/* ============================================================
   Retoques de tema — 2026-07-29 (encargo de Felipe).
   Fichero aparte a propósito: app.css lo edita él en paralelo.
   Se carga DESPUÉS de app.css, así que gana sin necesidad de !important
   salvo donde se dice.
   ============================================================ */

/* ------------------------------------------------------------------
   1. Cabecera y menú pegados arriba
   El bloque entero (barra de contacto + logo/buscador + navegación) viaja
   con la página. `position:sticky` no saca el elemento del flujo, así que
   los márgenes negativos de .hero y .page-header siguen funcionando igual.
   ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  /* Sin sombra el menú se confunde con el contenido al pasar por debajo. */
  box-shadow: 0 2px 10px rgba(28, 26, 23, .12);
}

/* ------------------------------------------------------------------
   2. El texto sobre blanco, los márgenes en crema
   El fondo de la página sigue siendo el crema de siempre; lo que cambia es
   que cada bloque de contenido de ancho de lectura se pinta sobre blanco.
   Se aplica solo a los hijos DIRECTOS de <main>: así la cabecera de página
   con foto, el hero y los CTA a sangre se quedan como estaban.
   ------------------------------------------------------------------ */
main.contenido > .contenedor {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  padding-top: 1.6rem;
  padding-bottom: 1.8rem;
  margin-bottom: 1.6rem;
}
/* Dos bloques seguidos no deben verse como dos tarjetas sueltas con una
   costura en medio: se cosen en una sola hoja. El de arriba cierra su hueco
   inferior y el de abajo se pega a él SIN margen negativo: con
   `margin-bottom:0` ya puesto arriba, el `-1.6rem` que había aquí no cosía
   nada, encabalgaba los dos bloques 1.6rem (encargo de Felipe, 2026-08-06).

   Las esquinas van en propiedades sueltas y no en el atajo `border-radius`
   porque en la hoja de tres bloques (categoría lienzos) el del medio casa
   con las DOS reglas: así se queda recto arriba y abajo en vez de que la
   última regla le devuelva las esquinas de arriba. */
main.contenido > .contenedor + .contenedor {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
main.contenido > .contenedor:has(+ .contenedor) {
  margin-bottom: 0;
  padding-bottom: .4rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media (max-width: 700px) {
  main.contenido > .contenedor {
    border-left: 0; border-right: 0; border-radius: 0;
    padding-left: 18px; padding-right: 18px;
  }
}

/* ------------------------------------------------------------------
   3. CTA a ancho completo, con la foto a la izquierda a toda altura
   Se usa en /trabajos, /heraldica, las informativas y todas las páginas de
   apellidos. El comportamiento base recorta la foto (`object-fit:cover`)
   porque su alto lo manda el texto; las dos variantes en uso —tienda y
   digital— lo anulan más abajo para verse enteras.
   ------------------------------------------------------------------ */
.cta-ancho {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  align-items: stretch;
  background: var(--burgundy);
  color: #fff;
  margin: 2.4rem 0 0;
  overflow: hidden;
}
/* Pegado al pie: <main> lleva 40px de relleno inferior y dejaba una banda de
   crema entre el CTA y el footer. */
main.contenido > .cta-ancho:last-child { margin-bottom: -40px; }

/* La foto ocupa su celda entera pase lo que pase: en posición absoluta no
   depende de que el alto en porcentaje se resuelva, que es lo que dejaba una
   franja de burdeos bajo la imagen en el CTA de tienda (2026-08-06). */
/* El alto mínimo lo lleva la celda, no la imagen: así empuja la fila del grid
   (una imagen en posición absoluta no empujaría nada). */
.cta-ancho__foto { margin: 0; position: relative; min-height: 210px; }
.cta-ancho__foto img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cta-ancho__texto {
  padding: 1.5rem clamp(1.2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centrado en su columna, no pegado al borde de la foto: con textos cortos
     —el CTA de tienda— quedaba todo el hueco a la derecha (encargo de Felipe). */
  max-width: 46rem;
  margin-inline: auto;
  width: 100%;
}
.cta-ancho__sobre {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 .5rem;
}
.cta-ancho h2 {
  color: #fff;
  margin: 0 0 .5rem;
  border: 0;
  padding: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.25;
}
.cta-ancho p { color: #f2e3cc; margin: 0 0 .9rem; font-size: .98rem; line-height: 1.5; }
.cta-ancho__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0;
}
/* Botón secundario legible sobre el borgoña */
.btn--linea-claro {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
}
.btn--linea-claro:hover { background: #fff; color: var(--burgundy); border-color: #fff; }

/* Fotos ENTERAS, sin recorte (encargo de Felipe): las dos imágenes vienen ya
   recortadas por él a su gusto y el alto lo manda la propia foto, no el texto.
   La de tienda es el lienzo de 1400×1001 del WordPress; la del digital, la
   lámina de 900×762 que recortó el 06/08. Si el texto quedara más alto que la
   foto, la imagen se centra y el burdeos se reparte arriba y abajo en vez de
   acumularse debajo. */
.cta-ancho--tienda .cta-ancho__foto,
.cta-ancho--digital .cta-ancho__foto {
  min-height: 0;
  display: flex;
  align-items: center;
}
.cta-ancho--tienda .cta-ancho__foto img,
.cta-ancho--digital .cta-ancho__foto img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: fill;
}
/* Solo la de tienda ensancha su columna: con ratio 1,4 al 38% se quedaba más
   baja que el texto y dejaba franja de burdeos. La del digital es más alta por
   ancho (ratio 1,18) y con el 38% de serie ya supera al texto. */
.cta-ancho--tienda { grid-template-columns: minmax(300px, 42%) 1fr; }

/* El € no se queda solo en una línea. */
.cta-ancho__precio { white-space: nowrap; }

@media (max-width: 780px) {
  .cta-ancho { grid-template-columns: 1fr; }
  /* En una sola columna la celda ya no se estira: se le da alto fijo para que
     la foto (absoluta) tenga dónde pintarse. */
  .cta-ancho__foto { height: 200px; min-height: 0; }
  .cta-ancho__texto { padding: 1.5rem 1.3rem; }
  /* Salvo las que van enteras: su alto lo pone la propia foto. */
  .cta-ancho--tienda { grid-template-columns: 1fr; }
  .cta-ancho--tienda .cta-ancho__foto,
  .cta-ancho--digital .cta-ancho__foto { height: auto; }
}

/* ------------------------------------------------------------------
   4. Imágenes de las informativas, centradas como sus pies de foto
   ------------------------------------------------------------------ */
.pagina-figura { text-align: center; margin-left: auto; margin-right: auto; }
.pagina-figura img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.pagina-figura figcaption { text-align: center; }

/* ------------------------------------------------------------------
   5. Tarjeta única de contacto: icono a la izquierda, etiqueta y dato
   La caja y los colores están en paginas.css; aquí solo la rejilla de cada
   fila y el icono en su círculo.
   ------------------------------------------------------------------ */
.contacto-datos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .9rem;
  align-items: center;
}
.contacto-datos__icono {
  /* Ocupa las dos filas de la fila: etiqueta arriba, dato debajo. */
  grid-row: span 2;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--burgundy);
  flex: 0 0 auto;
}
.contacto-datos__icono svg { width: 1.25rem; height: 1.25rem; }

/* ------------------------------------------------------------------
   6. Pie: reclamo destacado bajo el texto de presentación
   ------------------------------------------------------------------ */
.site-footer__destacado {
  font-size: 1.06rem;
  line-height: 1.45;
  font-weight: 600;
  color: #fff;
  margin: .9rem 0 0;
}

/* La línea de copyright, en blanco y centrada (encargo de Felipe, 2026-08-05).
   Estaba en gris apagado y alineada a la izquierda. */
.site-footer__bottom p {
  color: #fff;
  text-align: center;
}

/* ------------------------------------------------------------------
   7. Nitidez del texto en pantallas de densidad normal
   `-webkit-font-smoothing: antialiased` (que app.css ponía en el body) apaga
   el suavizado subpíxel de macOS y lo cambia por escala de grises: en un
   Retina no se nota, pero en un monitor externo de ~110 ppi adelgaza los
   trazos y el texto se ve sucio —justo lo que pasaba en la barra superior y
   en el menú, que además van en claro sobre borgoña, donde el efecto es peor.
   Se devuelve el suavizado por defecto del sistema y se compensa el poco
   grosor de la serif a cuerpo pequeño: un punto más de tamaño y de contraste.
   ------------------------------------------------------------------ */
body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

.topbar { font-size: .86rem; }
.topbar__link { color: #f7ece0; }

.nav-primary a {
  color: #f7ece0;
  letter-spacing: .01em;
}
.nav-primary .submenu a { font-weight: 600; }

/* ------------------------------------------------------------------
   8. Portada: curva del hero, banda de presentación y distintivos
   Los tres bloques replican el WordPress (encargo de Felipe, 2026-08-06).
   Del original se copian las medidas: filete superior burdeos de 2 px y
   esquina inferior izquierda de 100 px en la portada; fondo de la banda de
   texto en burdeos al 8 % y los iconos en un círculo del mismo burdeos al 27 %.
   ------------------------------------------------------------------ */
.hero--bg {
  border-top: 2px solid var(--burgundy);
  border-bottom-left-radius: 100px;
  /* La foto es un fondo, y sin esto se sale por la esquina redondeada. */
  overflow: hidden;
}

.home-intro {
  background: rgba(110, 20, 35, .08);
  padding: 2.1rem 0 1.6rem;
  margin-top: 2.5rem;
}
.home-intro .contenedor { max-width: 60rem; }
.home-intro p { margin: 0 0 .8rem; }
.home-intro p:last-child { margin-bottom: 0; }
.home-intro em { font-style: normal; }

.home-distintivos { margin: 2.2rem 0 0; }
/* Columnas `auto`, no `1fr` (encargo de Felipe, 2026-08-07): con `1fr` las tres
   celdas se reparten el contenedor entero y cada distintivo se centra DENTRO de
   su tercio, así que el conjunto queda estirado a todo lo ancho y descentrado
   —los tres textos miden distinto—. Con `auto` cada celda mide lo que su
   contenido y `justify-content:center` centra el grupo de los tres respecto al
   eje de la página. Los textos siguen alineados a la izquierda: solo se centra
   el bloque. */
.home-distintivos__lista {
  list-style: none;
  /* `0 auto`, NO `0`: el `<ul>` es además `.contenedor`, y `.contenedor` se
     centra con `margin:0 auto` (app.css:31). El `margin:0` que había aquí lo
     anulaba —tema.css se carga después— y dejaba la lista entera pegada al
     borde izquierdo: medido, iba de 0 a 1140 px en un viewport de 1265. Los
     tres distintivos ya se centraban DENTRO del ul; lo que estaba descentrado
     era el ul. Esta es la causa del punto 1 del encargo. */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 1.6rem 2.6rem;
}
.home-distintivos__lista li {
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: 22rem;
}
.home-distintivos__icono {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(110, 20, 35, .16);
  color: var(--burgundy);
}
.home-distintivos__icono svg { width: 1.7rem; height: 1.7rem; }
.home-distintivos__txt { display: flex; flex-direction: column; }
.home-distintivos__txt strong {
  font-family: var(--font-title);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
}
.home-distintivos__txt span { font-size: .9rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  /* En una columna hace falta `justify-items` otra vez: el `justify-content`
     de arriba no centra nada cuando la única columna ya ocupa todo el ancho, y
     el `li` está limitado a 26rem. */
  .home-distintivos__lista { grid-template-columns: 1fr; justify-items: center; gap: 1.1rem; }
  .home-distintivos__lista li { width: 100%; max-width: 26rem; }
}
@media (max-width: 700px) {
  .hero--bg { border-bottom-left-radius: 55px; }
  .home-intro { padding: 1.6rem 0 1.3rem; margin-top: 1.8rem; }
}

/* ------------------------------------------------------------------
   10. Tienda: fichas de categoría con foto
   La ficha pasa de fila (cuadro con la inicial + texto) a columna: foto
   cuadrada arriba, nombre y recuento debajo, como en el WordPress.
   ------------------------------------------------------------------ */
.cat-card--foto {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.cat-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.cat-card--foto .cat-card__body { padding: .9rem 1rem 1.1rem; }
.cat-card--foto .cat-card__nombre { color: var(--burgundy); }

/* ------------------------------------------------------------------
   11. Categoría: presentación sobre las fichas y tira de ejemplos
   ------------------------------------------------------------------ */
/* La presentación va en burdeos, como en el WordPress (encargo de Felipe,
   2026-08-06). El ancho de lectura se limita en los párrafos y no en la
   sección: la sección es una de las tarjetas blancas cosidas de §2 y tiene
   que medir lo mismo que la de las fichas, o la costura se ve escalonada. */
.cat-intro { color: var(--burgundy); text-align: center; }
.cat-intro p { margin: 0 auto .7rem; max-width: 62rem; }
.cat-intro p:last-child { margin-bottom: 0; }
.cat-intro__oferta {
  background: var(--paper-2);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .7rem .9rem;
  font-size: .97rem;
}

/* El h2 no puede ir a `margin-top:0`: la tarjeta de arriba cierra con solo
   .4rem de hueco y el título quedaba pegado a las fichas de producto. */
.galeria-tira h2 { margin: .6rem 0 1.2rem; }
.galeria-tira__marco { position: relative; }
.galeria-tira__pista {
  list-style: none;
  margin: 0;
  padding: 0 0 .6rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Sin esto, en Firefox la barra tapa los pies de foto. */
  scrollbar-width: thin;
}
.galeria-tira__pista > li {
  flex: 0 0 clamp(190px, 26vw, 280px);
  scroll-snap-align: start;
  margin: 0;
}
.galeria-tira__pista figure { margin: 0; }
.galeria-tira__pista img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.galeria-tira__pista figcaption {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: .4rem;
  line-height: 1.35;
}
.galeria-tira__nav {
  position: absolute;
  top: calc(50% - 1.4rem);
  transform: translateY(-50%);
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--burgundy);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.galeria-tira__nav:hover:not([disabled]) { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.galeria-tira__nav[disabled] { opacity: .35; cursor: default; }
.galeria-tira__nav--prev { left: -.6rem; }
.galeria-tira__nav--next { right: -.6rem; }

/* La banda de presentación de la portada, reutilizada bajo las categorías. */
.home-intro--tienda { margin-top: 2.2rem; }
.home-intro__sub { margin-bottom: .3rem; }
.home-intro__lista { list-style: none; margin: 0; padding: 0; }
.home-intro__lista li { margin: .2rem 0; }

/* ------------------------------------------------------------------
   9. Casilla de conformidad: dos columnas fijas y nunca más
   La de «términos y condiciones» del checkout y de /promo se veía partida en
   varias columnas en móvil. El texto ya va envuelto en un `<span>` (ver
   checkout.css), pero con `display:flex` cualquier nodo suelto que se cuele
   en el `<label>` vuelve a ser una columna. Con una rejilla de dos columnas
   declaradas —casilla y texto— y el texto anclado a la segunda, lo que entre
   de más se apila debajo en lugar de abrir columna.
   ------------------------------------------------------------------ */
.campo--check label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
}
.campo--check__txt { grid-column: 2; }
.campo--check input[type=checkbox] { grid-column: 1; grid-row: 1; }

/* ------------------------------------------------------------------
   12. Imagen del escudo en la ficha: ancho fijo, alto proporcional
   Encargo de Felipe (2026-08-07). Antes era una caja CUADRADA de 250×250
   con `object-fit: contain`, así que un escudo más alto que ancho —que son
   casi todos— salía con franjas en blanco arriba y abajo. Ahora el alto lo
   marca la propia imagen.

   Solo se toca el alto: el ancho (250 en escritorio, 220 en móvil) lo sigue
   poniendo app.css. Con `box-sizing: border-box`, esos 250 px incluyen el
   marco —8 px de relleno y 1 px de borde—, así que el escudo en sí ocupa 232.
   ------------------------------------------------------------------ */
.escudo__img img { height: auto; }

/* ------------------------------------------------------------------
   13. Botones primarios en burdeos, no en dorado
   Encargo de Felipe (2026-08-07). `.btn--oro` conserva el nombre —lo usan 20
   plantillas— pero pasa a pintar en burdeos.

   LA EXCEPCIÓN NO ES OPCIONAL: hay tres de esos botones DENTRO de bloques de
   fondo burdeos (los dos `.cta-ancho`, digital y tienda, y el `.cta-final` de
   /escudo-no-encontrado). En burdeos sobre burdeos desaparecerían. Ahí se
   invierten a fondo blanco con texto burdeos, que además los deja como el
   elemento de más contraste del bloque, que es lo que se quiere de un botón
   primario.
   ------------------------------------------------------------------ */
.btn--oro {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}
.btn--oro:hover {
  background: var(--burgundy-d);
  border-color: var(--burgundy-d);
  color: #fff;
}

/* Sobre fondo burdeos, invertido */
.cta-ancho .btn--oro,
.cta-final .btn--oro {
  background: #fff;
  border-color: #fff;
  color: var(--burgundy);
}
.cta-ancho .btn--oro:hover,
.cta-final .btn--oro:hover {
  background: #f2e3cc;
  border-color: #f2e3cc;
  color: var(--burgundy-d);
}

/* ------------------------------------------------------------------
   14. Retoques del 2026-08-07 (encargo de Felipe)
   ------------------------------------------------------------------ */

/* --- 14.1 Bloque destacado en burdeos: UNA clase para los cuatro sitios ---
   Los puntos 2, 8.1, 9 y 10 del encargo piden lo mismo —fondo burdeos al 8 % y
   banda vertical burdeos a la izquierda—, así que el color y el grosor se
   declaran UNA sola vez. `.destacado--burdeos` queda disponible para lo que
   venga; los otros tres selectores son los bloques que ya existen y que no
   conviene re-clasificar (dos viven en `.frag` de contenido, que Felipe edita).

   Sustituye al crema con filete dorado que traían de paginas.css/app.css. El
   crema (#F4ECDD) sobre el blanco del contenido apenas se distinguía: medido en
   /quienes-somos, el bloque «se veía» como una banda dorada suelta, no como un
   destacado. El burdeos al 8 % sí despega del blanco. */
.destacado--burdeos,
.pagina-cita,      /* Quiénes somos (2) y Heráldica (9) */
.aviso-busqueda,   /* /escudo-no-encontrado (8.1) */
.contacto-datos {  /* Contacto (10) */
  background: rgba(110, 20, 35, .08);
  /* En el contenedor, no en un hijo: así cubre el alto entero pase lo que pase
     con el relleno o con los márgenes de los párrafos de dentro. */
  border-left: 4px solid var(--burgundy);
}

/* Los que no tienen caja propia redondean solo el lado derecho, para que la
   banda quede recta. `.contacto-datos` conserva su borde de 1 px y su radio
   completo de paginas.css: ahí la caja sí es una tarjeta. */
.destacado--burdeos,
.pagina-cita,
.aviso-busqueda {
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Los tres bloques de arriba ya traen relleno de app.css/paginas.css; la clase
   suelta no, y sin él el texto se pega a la banda. */
.destacado--burdeos { padding: .9rem 1.1rem; }

/* --- 14.1b Ficha sin datos: el aviso de que SÍ se vende (7) ---
   Pegado al botón de compra, que va justo detrás. */
.escudo__disponible { margin-bottom: 1.1rem; }
.escudo__disponible strong { color: var(--burgundy); }

/* --- 14.2 Buscar escudos: el texto de ayuda, centrado (3) ---
   Se centra respecto al formulario, no a la página: el `<p>` y el `<form>` son
   hermanos con el mismo ancho —el campo es `flex:1 1 240px` y estira— así que
   centrar el texto en el `<p>` lo centra en el eje del buscador. */
.buscador__ayuda { text-align: center; }

/* --- 14.3 /escudo-no-encontrado: el índice A-Z respira (8.2) ---
   Iba pegado al formulario y se leía como parte de él. */
.buscar-otra .nota { margin-top: 1.6rem; }

/* --- 14.4 Contacto: teléfono y WhatsApp arriba, correo centrado debajo (10) ---
   Disposición del croquis de Felipe (temporal/contacto.jpeg, 2026-08-07): la
   tarjeta centrada en el contenedor, y dentro tres «cajas invisibles» —dos
   arriba, una debajo— cada una con su contenido centrado.

   Se centra la CAJA, no el texto: mismo criterio que Felipe fijó para los
   distintivos de la portada («solo se centra el bloque, los textos NO»). Así el
   icono sigue pegado a su etiqueta y a su dato, y lo que se mueve es el grupo. */

/* OJO CON LA ESPECIFICIDAD: el selector lleva `ul` a propósito. `paginas.css:36`
   tiene `.pagina ul { margin: 0 0 1.2em; padding-left: 1.4em }`, que es (0,1,1)
   y gana a un `.contacto-datos` pelado (0,1,0) por muy después que se cargue
   tema.css. Con `ul.contacto-datos` se empata a (0,1,1) y decide el orden, que
   sí nos favorece. Sin esto, ni el centrado ni el relleno llegan a aplicarse:
   medido, el margen lateral calculado se quedaba en 0px.

   Fuera del media query: la tarjeta va centrada también en móvil. Solo se tocan
   los laterales, así que el hueco de arriba y de abajo se respeta. */
ul.contacto-datos { margin-inline: auto; }

@media (min-width: 620px) {
  ul.contacto-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 42rem;
    /* El `padding-left` de `.pagina ul` es el sangrado de viñeta de una lista
       normal; esta no tiene viñetas y lo quiere simétrico. */
    padding: .4rem 1.2rem 1.2rem;
  }
  /* Cada caja, centrada en su celda. Hay que redefinir las columnas de §5
     (`auto 1fr`): esa segunda columna se queda con todo el espacio libre, así
     que `justify-content` no tendría nada que repartir y el grupo se pegaría a
     la izquierda. Con `auto auto` cada columna mide su contenido. */
  .contacto-datos li {
    border-top: 0;
    padding: .85rem 0 0;
    grid-template-columns: auto auto;
    justify-content: center;
  }
  /* El correo ocupa las dos columnas y queda centrado bajo las otras dos cajas.
     El centrado ya lo hereda de la regla de arriba; aquí solo el ancho y el
     hueco. Sin línea separadora: en el croquis las cajas son invisibles y no
     hay ningún filete entre ellas. */
  .contacto-datos li:last-child {
    grid-column: 1 / -1;
    padding-top: 1.1rem;
  }
}

/* --- 14.5 Ficha de escudo: la respuesta, enmarcada (croquis 2026-08-07) ---
   Croquis de Felipe en `temporal/resultado_busqueda.jpeg`, sobre una impresión
   de /escudo-heraldico-jurado. Cuatro anotaciones: la pregunta «+ grande»
   (el burdeos, «OK»), «+ espacio» bajo la frase de entrada, «enmarcar» el
   bloque de la respuesta y los dos encabezados de dentro en «BURDEOS».

   ESPECIFICIDAD: `.prosa h2` (app.css:141) es (0,1,1) y le gana a una clase
   suelta (0,1,0). Por eso el selector de la pregunta lleva `.prosa` delante:
   (0,2,0). Misma trampa que en §14.4 con `.pagina ul`. */

/* 1 · La pregunta, más grande. El color y el filete inferior de `.prosa h2` se
   respetan: el croquis dice «burdeos OK». Sigue por debajo del `<h1>` de la
   cabecera, que es quien manda en la página. */
.prosa .escudo__pregunta {
  font-size: 1.55rem;
  line-height: 1.25;
}

/* 2 · Aire entre la frase de entrada y el marco que viene detrás. */
.prosa .escudo__entradilla { margin-bottom: 1.5rem; }

/* 3 · El marco de la respuesta. Sin fondo: en el croquis el interior es el
   blanco del papel, y lo que separa el bloque es el marco, no un color. */
.escudo__respuesta {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
}
/* El primer encabezado no empuja hacia abajo dentro de la caja, y el último
   párrafo no deja un hueco muerto antes del borde. */
.escudo__respuesta > :first-child { margin-top: 0; }
.escudo__respuesta > :last-child { margin-bottom: 0; }

/* 4 · «Blasón del apellido X», «Origen e historia» y «Lema», en burdeos. No
   existe ninguna regla `.prosa h3` —por eso salían en el negro del navegador—
   así que aquí no hay que pelear con nadie. */
.escudo__respuesta h3 {
  color: var(--burgundy);
  font-size: 1.12rem;
  margin: 1.3em 0 .3em;
}
.escudo__respuesta h3:first-child { margin-top: 0; }