/* Los tokens y las piezas de página de la plantilla v30 de Alan (vendor/prototipo/plantilla-v2.html), sacados por scripts/armar/hoja.mjs. */
:root {
  --fondo: #f4efe6;          /* cantera */
  --superficie: #fbf9f5;     /* cal */
  --tinta: #2b2b2b;          /* grafito */
  --tinta-suave: #57534c;    /* grafito medio */
  --marca: #b8432b;          /* tezontle */
  --marca-hover: #a03a25;
  --sobre-marca: #fbf9f5;
  --marca-claro: #eed5cd;    /* por confirmar */
  --acento: #9a8cdf;         /* jacaranda */
  --acento-claro: #d4cdec;   /* confirmado */
  --linea: rgba(43, 43, 43, 0.12);
  --linea-control: rgba(43, 43, 43, 0.5);
  --velo-foto: rgba(12, 12, 20, 0.55);   /* sombra técnica sobre fotos, del sistema de diseño */
  --mapa-tierra: #ece6dc;
  --sombra: 0 1px 2px rgba(43, 43, 43, 0.06), 0 10px 28px -14px rgba(43, 43, 43, 0.3);
  --sombra-alta: 0 2px 6px rgba(43, 43, 43, 0.08), 0 24px 48px -20px rgba(43, 43, 43, 0.45);
  --sans: Jost, Futura, "Avenir Next", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radio-chico: 8px; --radio: 14px; --radio-grande: 22px; --pildora: 999px;
  --barra: 64px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
:is(.pagina, .pagina-cabeza, .rejilla-texto, .peldanos, .banda, .vacio, .pie, .tarjeta-accion, .barra-accion, .campo-evento) :is(h1, h2, h3, h4) { margin: 0; text-wrap: balance; }
:is(.pagina, .pagina-cabeza, .rejilla-texto, .peldanos, .banda, .vacio, .pie, .tarjeta-accion, .barra-accion, .campo-evento) :is(p) { margin: 0; }
.envoltura { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .envoltura { padding-inline: 32px; } }
.etiqueta { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.banda { margin-block: 64px 0; background: var(--marca); color: var(--fondo); border-radius: var(--radio-grande); padding: 36px clamp(20px, 4vw, 48px); display: grid; gap: 16px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .banda { grid-template-columns: 1.4fr auto; } }
.banda h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 600; letter-spacing: -0.015em; }
.banda .boton { background: var(--fondo); color: var(--tinta); border-color: var(--fondo); }
.vacio { background: var(--superficie); border-radius: var(--radio); padding: 28px; display: grid; gap: 10px; justify-items: start; border: 1px solid var(--linea); }
.tarjeta-accion { background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--linea); padding: 18px; display: grid; gap: 12px; box-shadow: var(--sombra); }
.tarjeta-accion h3 { font-size: 18px; font-weight: 600; }
.tarjeta-accion .boton { width: 100%; }
.campo-evento { display: grid; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.campo-evento select { min-height: 42px; border-radius: var(--radio-chico); border: 1px solid var(--linea-control); background: var(--fondo); padding: 6px 10px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--tinta); font-weight: 400; }
.tarjeta-accion.resaltada { border: 1.5px solid var(--marca); }
.barra-accion { position: sticky; bottom: 0; z-index: 4; background: var(--superficie); border-top: 1px solid var(--linea); padding: 12px clamp(16px, 3.5vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; }
.barra-accion .boton-primario { flex: 1; }
@media (min-width: 900px) { .barra-accion { display: none; } }
.pagina { padding-block: 48px 64px; display: grid; gap: 40px; }
.pagina-cabeza { display: grid; gap: 14px; max-width: 780px; }
.pagina-cabeza h1 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.02; font-weight: 600; letter-spacing: -0.025em; }
.pagina-cabeza p { font-size: 18px; color: var(--tinta-suave); max-width: 62ch; }
.rejilla-texto { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rejilla-texto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rejilla-texto.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rejilla-texto article { background: var(--superficie); border-radius: var(--radio); border: 1px solid var(--linea); padding: 22px; display: grid; gap: 8px; align-content: start; }
.rejilla-texto article svg { width: 26px; height: 26px; color: var(--marca); }
.rejilla-texto h3 { font-size: 19px; font-weight: 600; }
.rejilla-texto p { color: var(--tinta-suave); }
.peldanos { display: grid; gap: 12px; grid-template-columns: 1fr; counter-reset: p; }
@media (min-width: 900px) { .peldanos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.peldanos article { border-top: 3px solid var(--marca); padding-top: 14px; display: grid; gap: 6px; }
.peldanos .n { font-family: var(--mono); color: var(--marca); font-size: 13px; }
.peldanos h3 { font-size: 18px; font-weight: 600; }
.peldanos p { color: var(--tinta-suave); font-size: 15px; }
.pie { border-top: 1px solid var(--linea); padding-block: 40px 56px; margin-top: 64px; }
.pie .envoltura { display: grid; gap: 18px; }
.pie .isologo { color: var(--marca); width: 136px; }
.pie .renglon { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 15px; }
.campo-evento select { font-size: 16px; }
/* Las páginas estáticas del sitio (fichas, zonas, tipos, la solicitud, lo legal, el 404). Al armar va detrás del :root y las
   piezas de página de la plantilla v30 de Alan (scripts/armar/hoja.mjs): los tonos, las letras, los radios, la línea y la
   sombra son los de «/», con sus nombres (--fondo, --superficie, --tinta, --marca, --acento…). Aquí va solo lo que la
   plantilla no trae; un token suyo no se redefine aquí, para que las dos no se vuelvan a separar. */
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("/fuentes/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("/fuentes/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("/fuentes/jost-latin-600-normal.woff2") format("woff2"); }
/* El 700 es el negrito del navegador (<strong>, el h3 del .vacio): sin él caía al 600, más angosto que en «/». */
@font-face { font-family: "Jost"; font-weight: 700; font-display: swap; src: url("/fuentes/jost-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("/fuentes/dm-mono-latin-400-normal.woff2") format("woff2"); }
:root {
  /* Los campos y controles de aquí se bordean con --campo, no con el --linea-control de la plantilla (2.89:1 con la cantera). */
  --campo: #776F63;           /* borde y ejemplo de un campo: 4.3:1 sobre cantera, 4.7:1 sobre cal (WCAG 1.4.11 y 1.4.3) */
  --arena: #E8E1D5;
  /* Los de estado siguen en PROPUESTA en Brinda-Identidad (tokens.css) y van siempre con palabra. «Revisado por el venue» no
     usa verde: es el «confirmado» de «/», jacaranda clara con grafito encima (9.27:1). */
  --aviso: #8A5A12;
  --aviso-claro: #F1E2C4;
  --error: #8E2F1F;
}
* { box-sizing: border-box; }
/* Un display de clase (.s-form es grid) le gana al [hidden] del navegador: lo oculto se seguía viendo. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--sans); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marca); text-underline-offset: 2px; }
a:hover { color: var(--marca-hover); }
/* Los títulos de las páginas, fuera de las piezas de «/»: dentro mandan la plantilla y su base sin margen (hoja.mjs), y estos
   les abrían huecos y les cerraban la interlínea que en «/» no tienen. Con :where() la especificidad sigue siendo la de h1. */
:is(h1, h2, h3):not(:where(.pagina, .pagina-cabeza, .rejilla-texto, .peldanos, .banda, .vacio, .tarjeta-accion) *) { line-height: 1.2; font-weight: 600; }
h1:not(:where(.pagina, .pagina-cabeza, .rejilla-texto, .peldanos, .banda, .vacio, .tarjeta-accion) *) { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin: 0.2em 0 0.3em; }
h2:not(:where(.pagina, .pagina-cabeza, .rejilla-texto, .peldanos, .banda, .vacio, .tarjeta-accion) *) { font-size: 1.3rem; margin: 1.6em 0 0.6em; }
/* El foco en tinta, como en «/»: en tezontle se confundía con un enlace o con el botón. */
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
::placeholder { color: var(--campo); opacity: 1; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: 12px 16px; z-index: 10; }
.saltar:focus { left: 8px; }
.nota { color: var(--tinta-suave); font-size: 0.92rem; }

.barra { position: sticky; top: 0; z-index: 5; background: var(--fondo); border-bottom: 1px solid var(--linea); }
/* La barra va a todo lo ancho, como en «/»; el contenido y el pie, en la envoltura de 1280 (con el logo, en x = 32 a 1280 px). */
.barra .envoltura { display: flex; align-items: center; gap: 12px 24px; min-height: 64px; max-width: none; }
/* El logo es de una sola tinta: tezontle sobre claro (Brinda-Identidad; marca/logotipo.svg pinta con currentColor), y no
   baja de 88 px (el mínimo de la marca). */
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--marca); text-decoration: none; }
.logo svg { width: 98px; height: auto; }
.marca-texto { font-family: var(--sans); font-size: 1.5rem; font-weight: 600; color: var(--marca); }
.navegacion { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* Cada enlace suelto mide 44 px de alto para el dedo (WCAG 2.5.5); el texto no cambia de tamaño. */
.navegacion a, .pie .renglon a, .migas a, .ficha-cabeza .tipos a { display: inline-flex; align-items: center; min-height: 44px; }
/* Una miga corta («Zonas», «Tipos») o un tipo corto de la ficha («Casa») no baja de 44 de ancho. */
.migas a, .ficha-cabeza .tipos a { min-width: 44px; justify-content: center; }
.navegacion a { color: var(--tinta); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: var(--pildora); }
.navegacion a:hover { color: var(--tinta); background: rgb(43 43 43 / 0.12); }
.navegacion a[aria-current="page"] { background: var(--tinta); color: var(--fondo); }
.navegacion .guardados { min-width: 44px; justify-content: center; }
.navegacion .guardados svg { width: 18px; height: 18px; }
@media (max-width: 719px) { .navegacion .solo-grande { display: none; } .logo svg { width: 88px; } }
/* A menos de 360 px la cabecera cabe en su renglón (WCAG 1.4.10, reflujo a 320 px): el logo no baja de 88 px, los
   enlaces se juntan. Lo mismo en «/» (CABECERA_EN_320, scripts/armar/hoja.mjs). */
@media (max-width: 359px) { .barra .envoltura { column-gap: 8px; padding-inline: 12px; } .navegacion { gap: 0; } .navegacion a { padding-inline: 4px; font-size: 14px; white-space: nowrap; } }
main { padding-block: 16px; }

.boton { display: inline-block; background: var(--marca); color: var(--sobre-marca); border: 0; border-radius: var(--pildora); padding: 12px 22px; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.boton:hover { background: var(--marca-hover); color: var(--sobre-marca); }
.boton:disabled { opacity: 0.6; cursor: progress; }
.boton.secundario { background: var(--superficie); color: var(--marca); border: 1px solid var(--marca); }
.boton.peligro { background: var(--superficie); color: var(--error); border: 1px solid var(--error); }
/* En la banda (fondo tezontle) el botón es cantera, el de «/»: su hover de aquí lo volvía tezontle sobre tezontle. */
.banda .boton:hover { background: var(--superficie); color: var(--tinta); }
/* Sobre tezontle el foco va en cantera: el de tinta daba 2.61:1, bajo el 3:1 de WCAG 1.4.11 (lo mismo en «/», hoja.mjs). */
.banda :focus-visible { outline-color: var(--fondo); }

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: var(--pildora); background: var(--superficie); text-decoration: none; color: var(--tinta); }
.chips span { color: var(--tinta-suave); }
.chips.grande a { padding: 10px 16px; }

.tarjetas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tarjeta a { display: flex; flex-direction: column; gap: 4px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--tinta); height: 100%; box-shadow: var(--sombra); }
.tarjeta img, .tarjeta .sin-foto { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--arena); }
/* Sin foto con derecho no se pone una de relleno: el espacio lo dice. */
.tarjeta .sin-foto { display: grid; place-items: center; color: var(--tinta-suave); font-size: 0.85rem; }
.t-nombre { font-weight: 600; padding: 8px 12px 0; }
.t-meta { color: var(--tinta-suave); font-size: 0.9rem; padding: 0 12px 12px; }
.t-sello, .t-construccion { margin: 0 12px 12px; font-size: 0.8rem; font-weight: 600; }
/* «Verificada» y «Confirmado por el venue» son el «confirmado» de «/» (.chip-verificado): jacaranda clara con grafito encima. */
.t-sello, .marca-venue, .sello span:first-child { background: var(--acento-claro); color: var(--tinta); border-radius: var(--pildora); }
.t-sello { align-self: flex-start; padding: 2px 8px; }
.t-credito { display: block; margin: -6px 12px 12px; color: var(--tinta-suave); font-size: 0.75rem; }
.t-construccion { color: var(--aviso); }

.migas { font-size: 0.9rem; color: var(--tinta-suave); margin: 8px 0; }
.ficha-cabeza .tipos { color: var(--tinta-suave); margin: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
.ficha-cabeza .lugar { margin: 0; color: var(--tinta-suave); }
.aviso-construccion { display: inline-block; background: var(--aviso-claro); color: var(--aviso); padding: 6px 10px; border-radius: var(--radio); font-size: 0.92rem; }
.sello { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sello span:first-child { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; font-weight: 600; }
.marca-venue { display: inline-block; padding: 2px 8px; font-weight: 600; font-size: 0.85rem; }
.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 16px 0; }
.galeria figure { margin: 0; scroll-snap-align: start; }
.galeria img { border-radius: var(--radio); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.galeria figcaption { font-size: 0.8rem; color: var(--tinta-suave); padding-top: 4px; }
/* Sin fotos, la ficha lo dice donde iría la galería, con la liga para mandarlas (SIN_FOTO_EN_LA_FICHA, servidor/decidir.mjs).
   Sobre cal y no sobre arena, como el de las tarjetas: la liga en tezontle da 5.15:1 sobre cal y 4.17:1 sobre arena (AA pide 4.5). */
.sin-foto-ficha { margin: 16px 0; padding: 24px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--tinta-suave); text-align: center; }
.sin-foto-ficha p { margin: 0; }
.sin-foto-ficha a { display: inline-flex; align-items: center; min-height: 44px; }
/* Con dos fotos o más, una a la vez, con flechas y la cuenta (src/cliente/carrusel.js; sin él, la fila se desliza igual). */
.carrusel-fotos .galeria { grid-auto-columns: 100%; margin-bottom: 8px; scrollbar-width: none; }
/* Y la foto no pasa del 40 % del alto de la pantalla (60vh de ancho, a 3:2), centrada en su lugar: a todo lo ancho medía
   1168 × 779 a 1280 px, y su pie y las flechas, lo que dice que hay más, quedaban abajo de la primera pantalla. Con el
   40 % le sobran unos 60 px a 1366 × 768 para un nombre en dos renglones o el aviso de ficha en construcción. */
.carrusel-fotos .galeria figure { width: min(100%, 60vh); margin-inline: auto; scroll-snap-align: center; }
.carrusel-controles { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.carrusel-controles button { min-width: 44px; min-height: 44px; border: 1px solid var(--campo); border-radius: var(--pildora); background: var(--superficie); color: var(--tinta); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.carrusel-controles button:hover { border-color: var(--tinta); }
.carrusel-cuenta { min-width: 7ch; text-align: center; color: var(--tinta-suave); font-family: var(--mono); font-size: 0.9rem; }
.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.ficha-pedir { position: sticky; top: 80px; }
/* La tarjeta para pedir es la .tarjeta-accion del panel de «/»; aquí su título es un h2 (en «/», un h3 del panel). */
.tarjeta-accion h2 { font-size: 18px; font-weight: 600; }
/* La letra la ponía la base de la plantilla (font: inherit en los controles), que hoja.mjs no trae: salía en Arial. */
.campo-evento select { min-height: 44px; font-family: inherit; }
/* Bajo 860 px la tarjeta queda después de todos los datos (a 3.2 pantallas en un teléfono): «Pide disponibilidad» va
   también pegado abajo, como en el panel de «/», a todo lo ancho y sin tapar lo que tiene el foco. */
.p-ficha .barra-accion { margin: 24px -16px 0; }
@media (min-width: 720px) { .p-ficha .barra-accion { margin-inline: -32px; } }
@media (min-width: 861px) { .p-ficha .barra-accion { display: none; } }
@media (max-width: 860px) { html:has(.p-ficha) { scroll-padding-bottom: 88px; } }
/* La entrada a la solicitud de las páginas que no son de un venue (pideAyuda, base.mjs). */
.pide-ayuda { margin-top: 48px; display: grid; gap: 16px; align-items: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px clamp(20px, 3vw, 32px); }
.pide-ayuda h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.pide-ayuda p { margin: 0; color: var(--tinta-suave); max-width: 62ch; }
@media (min-width: 720px) { .pide-ayuda { grid-template-columns: 1fr auto; gap: 32px; } }
/* Las páginas armadas con las piezas de «/» (Para venues, el 404 y el 410). */
.pagina > section > h2 { margin-bottom: 16px; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.015em; }
.pagina .pide-ayuda, .pagina .banda { margin-top: 0; }
.pagina-cabeza .nota { font-size: 15px; }
/* Cada peldaño es una rejilla que estiraba sus renglones al alto del más largo: los títulos de los cortos bajaban (lo mismo
   en «/», hoja.mjs). */
.peldanos article { align-content: start; }
.bloque { border-bottom: 1px solid var(--linea); padding-bottom: 8px; }
.cifra { font-size: 1.6rem; font-weight: 600; margin: 0; }
.formatos { list-style: none; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.formatos span { color: var(--tinta-suave); }
.precios, .espacios { padding-left: 1.1em; }
.espacios li + li { margin-top: 6px; }
.espacios .fuente { display: block; }
.datos { margin: 0; }
.dato { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--linea); }
.dato dt { font-weight: 600; }
.dato dd { margin: 0; grid-column: 2; }
.dato dd + dd { padding-top: 8px; border-top: 1px dotted var(--linea); }
.dato dd p { margin: 0 0 4px; }
.fuente { color: var(--tinta-suave); font-size: 0.88rem; }
.actualizada { color: var(--tinta-suave); font-size: 0.9rem; margin-top: 16px; }

.s-estado.error, .mv-resultado.error, .mv-estado.error { color: var(--error); }

.mi-venue, .texto { max-width: 720px; }
.s-form, .mv-form { display: grid; gap: 16px; }
.s-form label, .mv-form label { display: grid; gap: 4px; font-weight: 500; }
.s-form input, .s-form select, .mv-form input, .mv-form select, .mv-form textarea, .mv-fotos input[type=file] { padding: 10px 12px; border: 1px solid var(--campo); border-radius: var(--radio-chico); font: inherit; color: var(--tinta); background: var(--superficie); }
/* Las opciones y casillas en tezontle, como las de «/» (no en el azul del navegador). */
input[type=radio], input[type=checkbox] { accent-color: var(--marca); }
.s-form [aria-invalid="true"] { border-color: var(--error); }
.s-error { margin: -12px 0 0; color: var(--error); font-size: 0.875rem; }
.s-canal, .mv-form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.s-canal label, .mv-form fieldset label { display: inline-flex !important; gap: 8px; align-items: center; min-height: 44px; font-weight: 400; }
.trampa { position: absolute !important; left: -9999px; }
.listo { background: var(--acento-claro); color: var(--tinta); padding: 12px 16px; border-radius: var(--radio); }
.aviso { background: var(--aviso-claro); color: var(--aviso); padding: 10px 12px; border-radius: var(--radio); }
.pendiente { background: var(--aviso-claro); padding: 12px; border-radius: var(--radio); }
.mv-unidades { list-style: none; padding: 0; display: grid; gap: 12px; }
.mv-unidad { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; }
.mv-unidad h2 { margin: 0 0 4px; font-size: 1.05rem; }
.mv-fotos, .mv-baja, .mv-historial { margin-top: 24px; }

@media (max-width: 860px) {
  .ficha-cuerpo { grid-template-columns: 1fr; }
  .ficha-pedir { position: static; }
  .dato { grid-template-columns: 1fr; gap: 4px; }
  .dato dd { grid-column: 1; }
}
/* En una columna (teléfono), «sin foto» se dice en un renglón: el recuadro de 3:2 medía 237 px vacío por tarjeta. */
@media (max-width: 560px) { .tarjeta .sin-foto { aspect-ratio: auto; min-height: 40px; padding: 8px 12px; place-items: center start; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }