/* ═══════════════════════════════════════════════════════════
   NAILS CARIBE ART — hoja de estilos
   Oscuro editorial: fondo casi negro, tipografía enorme, un solo acento.
   Sobre fondo oscuro el esmalte de las fotos resalta al máximo.
   ═══════════════════════════════════════════════════════════ */

:root{
  --fondo:      #0b0b0c;
  --fondo-2:    #111113;
  --tinta:      #f4f2ef;   /* blanco roto, nunca blanco puro */
  --tenue:      #8b8b90;
  --acento:     #d4a95e;   /* SU oro. Sale de su portafolio (láminas 07/09),
                              no del rojo del sitio de referencia, que es de otra marca */
  --borde:      rgba(244,242,239,.14);
  --display:    'Archivo', 'Arial Black', system-ui, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;
  /* la caligrafía de SUS láminas: el nombre y los títulos van en script
     dorado. Antes el lema salía en la mono técnica, que no es su marca. */
  --script:     'Great Vibes', 'Segoe Script', cursive;
  --serif:      'Cormorant Garamond', Georgia, serif;
  --marco:      22px;      /* aire del marco que encuadra la página */
  --lado:       calc(var(--marco) + 18px);   /* margen lateral ÚNICO del sitio */
  --banda:      1180px;    /* ancho de la banda de contenido: el encabezado y el
                              contenido de cada sección comparten esta medida,
                              si no el título queda descolgado */

  /* Escala de radios. Antes había 5px, 11px, 12px, 14px y 16px para cosas
     equivalentes; ahora tres peldaños y se elige uno. */
  --r-chico:    6px;
  --r-medio:    12px;
  --r-grande:   16px;
  --r-pastilla: 999px;

  /* Escala de sombras. Antes cinco valores, todos de un solo uso. */
  --sombra-1:   0 18px 40px rgba(0,0,0,.52);   /* piezas pequeñas */
  --sombra-2:   0 26px 58px rgba(0,0,0,.62);   /* tarjetas */
  --sombra-3:   0 32px 76px rgba(0,0,0,.78);   /* lo que flota sobre todo */

  /* Escala tipográfica del texto menudo. Antes: 10,5 · 11 · 12 · 12,5 · 13 ·
     14 · 15 · 17 px sueltos, sin sistema. */
  --t-micro:    11px;      /* etiquetas en mayúsculas */
  --t-menudo:   12.5px;    /* pies, meta */
  --t-base:     14px;
  --t-medio:    15.5px;    /* cuerpo de lectura */
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--mono); font-size:var(--t-base); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }

/* marco fino, decorativo, fijo */
.marco{
  position:fixed; inset:var(--marco); border:1px solid var(--borde);
  pointer-events:none; z-index:50;
}

/* ─────────── atmósfera ───────────
   Grano fino + un resplandor cálido detrás del racimo. Sin esto el fondo
   es un plano liso y la página se ve barata (777-frontend-craft §5).
   El grano va como SVG en línea: cero peticiones, cero imagen que cargar. */
body::before{                                   /* el resplandor */
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 44% at 50% 42%, rgba(212,169,94,.14), transparent 70%),
    radial-gradient(42% 36% at 82% 78%, rgba(160,120,60,.10), transparent 72%),
    radial-gradient(50% 40% at 12% 18%, rgba(120,100,70,.09), transparent 70%);
}
body::after{                                    /* el grano */
  /* z-index 45: ENCIMA del contenido (z 2) para que el grano se vea sobre
     todas las secciones, y por DEBAJO del marco (50) y la cabecera (60).
     A z-index 1 quedaba tapado por el fondo sólido del catálogo. */
  content:''; position:fixed; inset:0; z-index:45; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.portada, .catalogo, .contacto, .cabecera{ position:relative; z-index:2 }

/* ─────────── entrada escalonada ───────────
   Un page-load orquestado rinde más que micro-interacciones dispersas
   (777-frontend-craft §3). Solo CSS, con retardos. */
@keyframes surge{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
@keyframes aparece{ from{ opacity:0 } to{ opacity:1 } }
.titular span,.bajada,.scroll{ animation:surge .9s cubic-bezier(.2,.7,.3,1) both }
.titular span:nth-child(1){ animation-delay:.05s }
.titular span:nth-child(2){ animation-delay:.13s }
.titular span:nth-child(3){ animation-delay:.21s }
.bajada{ animation-delay:.34s }
.scroll { animation-delay:.95s }
/* las muestras entran una detrás de otra */
.muestra{ animation:aparece .8s ease both }
.muestra:nth-child(1){ animation-delay:.30s } .muestra:nth-child(2){ animation-delay:.36s }
.muestra:nth-child(3){ animation-delay:.42s } .muestra:nth-child(4){ animation-delay:.48s }
.muestra:nth-child(5){ animation-delay:.54s } .muestra:nth-child(6){ animation-delay:.60s }
.muestra:nth-child(7){ animation-delay:.66s } .muestra:nth-child(8){ animation-delay:.72s }
.muestra:nth-child(9){ animation-delay:.78s }

/* ─────────── foco de teclado ───────────
   No había NINGUNA regla de foco para 13 elementos pulsables: quien navegue
   con Tab no veía dónde estaba. En un dossier que revisa un desconocido, eso
   es un fallo de acabado. */
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:3px;
  border-radius:var(--r-chico);
}
.mini:focus-visible{ opacity:1; outline-offset:2px }
.lamina:focus-visible{ outline-offset:4px }

/* ─────────── cabecera ─────────── */
.cabecera{
  /* fondo difuminado: antes las pastillas se montaban ilegibles sobre los
     títulos de cada sección (fallo visto en la captura del dueño) */
  background:linear-gradient(to bottom, rgba(11,11,12,.92), rgba(11,11,12,0));
  backdrop-filter:blur(6px);
  position:fixed; top:0; left:0; right:0; z-index:60;
  /* centrado: ya no hay logotipo a la izquierda que lo equilibre */
  display:flex; align-items:center; justify-content:center;
  /* más aire respecto al marco: antes las pastillas quedaban pegadas al
     borde superior */
  padding:calc(var(--marco) + 22px) var(--lado) 20px;
}
.nav{ display:flex; gap:6px }
.nav a{
  border:1px solid var(--borde); border-radius:var(--r-pastilla);
  padding:5px 13px; font-size:var(--t-menudo); letter-spacing:.02em;
  transition:border-color .25s, color .25s;
}
.nav a:hover{ border-color:var(--acento); color:var(--acento) }

/* alto que ocupa la cabecera fija. Las secciones dejan ese aire arriba para
   que el menú no pise sus títulos, y los saltos de ancla no queden debajo. */
:root{ --cab:106px; }
section{ scroll-margin-top:var(--cab) }
/* Títulos de sección. Esta regla se perdió al reescribir el catálogo: sus h2
   quedaron heredando la mono del cuerpo, a tamaño por defecto y pegados al
   borde. Restaurada y unificada con el margen lateral del sitio. */
.seccion-cab{ padding:8px var(--lado) 0; max-width:var(--banda); margin:0 auto }
.seccion-cab h2{
  margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem, 5.6vw, 4rem); letter-spacing:-.022em; line-height:1;
}
.seccion-cab p{ margin:10px 0 0; color:var(--tenue); font-size:var(--t-menudo) }

/* ─────────── 1 · portada ───────────
   Dos mitades: nombre a la izquierda, campo de fotos a la derecha.
   Decisión del dueño: las fotos ABIERTAS, no apiladas. */
.portada{
  /* height fija, no min-height: cuando la portada crecía más que la ventana,
     el indicador «BAJAR» (anclado a su final) caía FUERA del marco, que está
     fijo a la ventana. Con altura exacta, siempre queda dentro. */
  position:relative; height:100svh; overflow:hidden;
  display:grid; align-items:center;
  /* el par nombre+fotos, centrado como bloque en la pantalla. Sin max-width y
     margin auto, el conjunto se estiraba a lo ancho y quedaba descuadrado
     (el mismo defecto que tenían las otras secciones). */
  max-width:1560px; margin:0 auto;
  /* el nombre gana sitio y el racimo lo cede: así el nombre se lee grande
     aunque las fotos sean más pequeñas */
  grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);
  gap:clamp(18px, 4vw, 60px);
  padding:15svh calc(var(--marco) + 26px) 13svh;
}

/* el nombre: apilado, enorme, ART en el acento */
.portada-nombre{
  position:relative; z-index:3;
  /* un poco de margen por la izquierda: así el lema tiene sitio para
     centrarse debajo del nombre sin pegarse al borde */
  padding-left:clamp(6px, 3cqw, 46px);
  display:flex;
  /* container-type deja que el título se mida contra el ancho de ESTA columna
     (cqw) y no contra la ventana (vw). Con vw, al estrechar la ventana el texto
     crecía más que su columna y se salía por el lado (fallo visto en la captura
     del dueño: «AILS / ARIBE / RT»). */
  container-type:inline-size;
}
.nombre-caja{ width:fit-content }   /* mide lo que «CARIBE», la línea más larga */
.titular{
  margin:0; font-family:var(--display); font-weight:900;
  line-height:.84; letter-spacing:-.035em; text-transform:uppercase;
}
.titular span{
  display:block;
  /* 21cqw = 21% del ancho de su columna. La palabra más larga («CARIBE», 6
     caracteres de Archivo Black) ocupa ~0,8 de la columna: nunca desborda. */
  font-size:clamp(2.2rem, 21cqw, 9rem);
}
.titular-acento{ color:var(--acento) }
/* El lema, con la caligrafía y los adornos de su portafolio: script dorado
   entre dos filetes finos, igual que los separadores de sus láminas. */
/* ─────────── el adorno ───────────
   Caligrafía dorada entre dos filetes con rombo, el separador de sus láminas.
   UNA sola pieza reutilizable: la usa el lema de la portada, el del catálogo
   y la etiqueta «Manicurista». Antes estaba escrito solo para la portada. */
.adorno{
  display:flex; align-items:center; gap:14px;
  margin:0;
}
.adorno--centro{ justify-content:center; max-width:760px; margin-inline:auto }
.adorno--chico .lema{ font-size:clamp(1.35rem, 3.4vw, 2.1rem) }
.adorno--chico .filete{ max-width:110px }

.bajada{
  display:flex; align-items:center; gap:14px;
  /* el ancho lo da .nombre-caja (= la línea más larga del título), así que
     centrarse aquí es centrarse EXACTAMENTE bajo el nombre */
  width:100%;
  /* aire arriba y abajo: la caligrafía tiene trazos altos y bajos que el
     contenedor recortaba (la «e» se comía por arriba) */
  margin:30px 0 0;
  padding:6px 0 10px;
}
.lema{
  font-family:var(--script);
  font-size:clamp(1.5rem, 5.6cqw, 2.9rem);
  /* 1.45 en vez de 1.1: con una caligrafía, los trazos altos y las colas se
     salen de la caja de línea y el contenedor los recorta */
  line-height:1.45;
  /* el degradado imita el metal de su lámina, no un dorado plano */
  background:linear-gradient(100deg, #b98a3e 0%, #f0d9a3 42%, #d4a95e 70%, #a8763a 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-right:.06em;      /* la cursiva se come su propio borde derecho */
}
/* el filete con rombo: el separador que ella usa en sus láminas */
.filete{
  flex:1 1 0; min-width:16px; height:1px; position:relative;
  background:linear-gradient(to right, transparent, color-mix(in srgb, var(--acento) 55%, transparent));
}
.filete:last-child{
  background:linear-gradient(to left, transparent, color-mix(in srgb, var(--acento) 55%, transparent));
}
.filete::after{
  content:''; position:absolute; top:-2.5px; right:0;
  width:5px; height:5px; background:var(--acento);
  transform:rotate(45deg);          /* rombo, como el suyo */
}
.filete:last-child::after{ right:auto; left:0 }

/* el campo de muestras. --x/--y son la esquina de cada foto en % del campo */
.campo{
  position:relative; z-index:2;
  width:100%; aspect-ratio:1/1.06;
}
.muestra{
  position:absolute; margin:0;
  left:var(--x); top:var(--y);
  width:var(--w, 28%);        /* el tamaño varía por tarjeta, como en la referencia */
  aspect-ratio:9/16;
  border-radius:var(--r-medio); overflow:hidden;
  background:var(--fondo-2);
  box-shadow:var(--sombra-1), 0 1px 0 rgba(255,255,255,.05) inset;
  transform:translate3d(var(--dx, 0px), var(--dy, 0px), 0)
            rotate(var(--r)) scale(var(--s, 1));
  transition:box-shadow .3s, filter .3s;
  will-change:transform;
}
.muestra img{ width:100%; height:100%; object-fit:cover }
.muestra[data-z="1"]{ z-index:2; --s:.88; filter:brightness(.7) saturate(.92) }
.muestra[data-z="2"]{ z-index:3; --s:.96; filter:brightness(.88) }
.muestra[data-z="3"]{ z-index:4; --s:1.04 }
.muestra--acento{ outline:3px solid var(--acento); outline-offset:-3px }
/* al pasar por encima, esa muestra se destaca del resto */
.muestra:hover{
  filter:none; z-index:9;                    /* se pone delante de todas */
  box-shadow:var(--sombra-3);
}

.scroll{
  /* centrado y DENTRO del marco: el marco está a var(--marco) del borde, así
     que el indicador se aparta un poco más para no tocarlo */
  position:absolute; z-index:5; bottom:calc(var(--marco) + 22px);
  left:0; right:0; margin:0 auto; width:max-content;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:var(--t-micro); letter-spacing:.22em; color:var(--tenue);
}
.scroll-linea{ width:1px; height:42px; background:var(--borde) }

/* ─────────── 2 · catálogo ───────────
   Una sola pantalla: título arriba, foto en medio, controles y miniaturas
   abajo. Todo junto y centrado, para que no haya que bajar y dejar el
   título colgado. */
.catalogo{
  /* El alto disponible al aterrizar aquí NO es la ventana entera: el ancla
     deja la sección 106 px más abajo (scroll-margin-top) para que el título no
     quede bajo la cabecera. Contar además un relleno superior de --cab duplica
     ese hueco y echa la tira de miniaturas fuera del marco. */
  min-height:calc(100svh - var(--cab));
  display:grid; align-content:center;
  padding:2svh 0 2.5svh;
  background:var(--fondo);
}
.catalogo-caja{
  display:grid; gap:clamp(12px, 2vh, 26px);
  justify-items:center;
  width:100%;
}
.catalogo-cab{
  text-align:center; padding:0 var(--lado);
  /* aire arriba y abajo del título, que estaba apretado contra la foto */
  margin:clamp(10px, 2.4vh, 30px) 0 clamp(14px, 3vh, 38px);
}
.catalogo-cab h2{
  margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase;
  /* más contenido que los otros títulos: aquí compite con la foto por el sitio */
  font-size:clamp(1.6rem, 4.2vw, 3rem); letter-spacing:-.02em; line-height:1;
}
.catalogo-cab p{ margin:14px 0 0 }

/* la pista en perspectiva: la central de frente, las laterales giradas */
.carrusel{
  position:relative; width:100%;
  /* 46svh en vez de 52: la sección medía 961 px en una ventana de 900 y
     la tira de miniaturas se salía del marco */
  height:clamp(260px, 43svh, 440px);
  perspective:1400px; overflow:hidden;
  touch-action:pan-y;
}
.pista{ position:absolute; inset:0; transform-style:preserve-3d }
.tarjeta{
  /* margin:0 es OBLIGATORIO: <figure> trae 1em 40px del navegador y, al estar
     centrada con translate(-50%,-50%), ese margen la descentraba. */
  margin:0;
  position:absolute; top:50%; left:50%;
  height:100%; width:auto; aspect-ratio:9/16;
  max-width:34vw;
  border-radius:var(--r-grande); overflow:hidden; background:var(--fondo-2);
  border:1px solid var(--borde);
  box-shadow:var(--sombra-2);
  transform-origin:center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s, filter .6s;
  cursor:pointer;
}
.tarjeta img{ width:100%; height:100%; object-fit:cover }
.tarjeta[data-pos="0"]{ z-index:5; opacity:1; filter:none }
.tarjeta[data-pos="-1"],
.tarjeta[data-pos="1"]{ z-index:4; opacity:.82; filter:brightness(.62) }
.tarjeta[data-pos="-2"],
.tarjeta[data-pos="2"]{ z-index:3; opacity:.4;  filter:brightness(.45) }
.tarjeta[data-lejos="si"]{ opacity:0; pointer-events:none }

.controles{ display:flex; align-items:center; justify-content:center; gap:20px }
.flecha{
  width:44px; height:44px; border-radius:var(--r-pastilla);
  background:transparent; border:1px solid var(--borde); color:var(--tinta);
  font-size:var(--t-medio); cursor:pointer;
  transition:border-color .25s, color .25s;
}
.flecha:hover{ border-color:var(--acento); color:var(--acento) }
.contador{
  margin:0; font-variant-numeric:tabular-nums; letter-spacing:.14em;
  font-size:var(--t-menudo); color:var(--tenue); min-width:86px; text-align:center;
}
.contador span:first-child{ color:var(--tinta) }

/* el selector manual: miniaturas. Se desplaza sola para seguir a la actual */
.tira{
  display:flex; gap:6px; overflow-x:auto; scroll-behavior:smooth;
  max-width:min(100%, 900px);
  padding:4px var(--lado);
  scrollbar-width:thin; scrollbar-color:var(--borde) transparent;
}
.tira::-webkit-scrollbar{ height:5px }
.tira::-webkit-scrollbar-thumb{ background:var(--borde); border-radius:var(--r-chico) }
.mini{
  flex:0 0 auto; width:32px; aspect-ratio:9/16;
  border:0; padding:0; border-radius:var(--r-chico); overflow:hidden;
  background:var(--fondo-2); cursor:pointer;
  opacity:.4; outline:1px solid transparent;
  transition:opacity .25s, outline-color .25s, transform .25s;
}
.mini img{ width:100%; height:100%; object-fit:cover; display:block }
.mini:hover{ opacity:.8 }
.mini[aria-selected="true"]{
  opacity:1; outline-color:var(--acento); transform:scale(1.14);
}

/* ─────────── 3 · ¿quién soy? (sus láminas) ───────────
   Sus tres páginas de portafolio. Botones, no figuras: se pulsan para
   abrirlas grandes, porque su letra es demasiado pequeña en fila de tres. */
/* mismo criterio que el catálogo: el ancla ya deja el hueco de la cabecera
   (scroll-margin-top), así que la sección NO debe reservarlo otra vez. */
.laminas{
  min-height:calc(100svh - var(--cab));
  display:grid; align-content:center;
  padding:2svh 0 3svh;
  border-top:1px solid var(--borde);
}
.seccion-cab--centro{ text-align:center }
.laminas .seccion-cab{ text-align:center; max-width:1420px; margin-bottom:clamp(30px, 5vh, 62px) }
.laminas-fila{
  display:grid; gap:clamp(14px, 2.2vw, 28px);
  grid-template-columns:repeat(3, 1fr);
  padding:0 var(--lado);
  /* margin:0 auto es lo que faltaba: con max-width y sin él, el bloque se
     pegaba a la izquierda y dejaba todo el hueco a la derecha. Y de 1180 a
     1420 px las láminas se leen bastante mejor. */
  max-width:1420px; margin:0 auto;
}
.lamina{
  display:block; padding:0; margin:0; cursor:zoom-in;
  border-radius:var(--r-medio); overflow:hidden; background:none;
  border:1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  box-shadow:var(--sombra-2);
  transition:transform .3s, border-color .3s;
}
.lamina:hover{ transform:translateY(-5px); border-color:var(--acento) }
.lamina{ display:flex; justify-content:center }
/* acotadas en ALTO, no en ancho: son carteles verticales y, a tres columnas,
   su alto es lo que echaba el bloque fuera de la pantalla */
.lamina img{
  max-height:min(62svh, 620px);
  width:auto; height:auto; max-width:100%;
  display:block;
}

/* el visor: la lámina a pantalla completa, para poder leerla */
/* El visor es un <dialog>: se oculta solo cuando no está abierto, así que ya
   no hace falta la guarda de `hidden` que antes olvidé y dejaba la página
   tapada al cargar (fallo real, 2026-09-14). */
.visor{
  border:0; padding:3svh 3vw; max-width:100vw; max-height:100svh;
  width:100vw; height:100svh;
  background:rgba(6,6,7,.94); backdrop-filter:blur(8px);
  cursor:zoom-out; color:var(--tinta);
}
.visor[open]{ display:grid; place-items:center }
.visor::backdrop{ background:rgba(6,6,7,.8); backdrop-filter:blur(4px) }
.visor img{
  max-width:min(94vw, 720px); max-height:94svh;
  width:auto; height:auto;
  border-radius:var(--r-medio); box-shadow:var(--sombra-3);
}
.visor-cerrar{
  position:absolute; top:22px; right:24px;
  width:44px; height:44px; border-radius:var(--r-pastilla);
  background:rgba(255,255,255,.07); border:1px solid var(--borde);
  color:var(--tinta); font-size:var(--t-medio); cursor:pointer;
}
.visor-cerrar:hover{ border-color:var(--acento); color:var(--acento) }

/* ─────────── 4 · datos de contacto ───────────
   Ficha de presentación: quién es + cómo escribirle, con botón de acción en
   cada vía. Sin dirección ni horario (es un dossier, no una web de salón). */
.contacto{
  min-height:calc(100svh - var(--cab));
  display:grid; align-content:center;
  padding:2svh 0 3svh;
  border-top:1px solid var(--borde);
}
/* UNA sola columna centrada. En dos columnas las tarjetas se estiraban a lo
   ancho y el botón acababa a un palmo del dato, con un hueco muerto en medio. */
.ficha{
  display:grid; gap:clamp(24px, 4vh, 44px); justify-items:center;
  padding:0 var(--lado);
  max-width:620px; margin:0 auto;
  text-align:center;
}
.ficha-quien{
  width:100%;
  /* aire respecto al titulo de la seccion: pegado, «MANICURISTA» se leia
     como subtitulo de «DATOS DE CONTACTO» en vez de etiqueta de su nombre */
  padding-top:clamp(10px, 2.5vh, 26px);
}
.etiqueta{
  display:block; font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--tenue);
}
.nombre-persona{
  /* serif, como el «NAILS CARIBE ART» de su logo: la sans gorda del titular
     no es la tipografía con la que ella firma */
  margin:12px 0 0; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem, 5vw, 3.4rem); line-height:1.04;
  letter-spacing:-.005em;
}
.ficha-vias{ display:flex; flex-direction:column; gap:14px; width:100%; text-align:left }

.via{
  border:1px solid var(--borde); border-radius:var(--r-grande);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  transition:border-color .25s;
}
.via:hover{ border-color:color-mix(in srgb, var(--acento) 55%, var(--borde)) }
.via-fila{ display:flex; align-items:center; gap:14px; padding:16px 18px }
.icono{ width:24px; height:24px; flex:0 0 24px; fill:currentColor; opacity:.8 }
.via-texto{ flex:1; min-width:0 }
.via-valor{
  display:block; margin-top:3px;
  font-family:var(--display); font-weight:600;
  font-size:clamp(.98rem, 1.9vw, 1.2rem);
  overflow-wrap:anywhere;
}

/* el botón de acción: lo que el visitante viene a pulsar */
.boton{
  flex:0 0 auto;
  padding:9px 18px; border-radius:var(--r-pastilla);
  border:1px solid var(--acento); color:var(--acento);
  font-size:var(--t-menudo); letter-spacing:.04em; white-space:nowrap;
  transition:background .22s, color .22s;
}
.boton:hover{ background:var(--acento); color:#15100a }

/* el avance de Instagram: una tira BAJA dentro de la tarjeta. Antes cada
   miniatura ocupaba el ancho completo (más de 300 px) y se desbordaba por
   abajo; parecía una galería suelta pegada debajo. */
.ig-tira{
  display:flex; gap:2px;
  padding:0 2px 2px;
}
.ig-tira img{
  flex:1 1 0; min-width:0;
  height:clamp(72px, 9vw, 104px);
  object-fit:cover; display:block;
  border-radius:var(--r-chico);
}

/* sin dato todavía: apagado y sin poder pulsarse */
.via--sin-dato{ opacity:.45; cursor:not-allowed }

/* el pie: centrado y con aire, no pegado al borde de la ventana */
.pie{
  border-top:1px solid var(--borde);
  padding:clamp(34px, 6vh, 64px) var(--lado) calc(var(--marco) + 42px);
  text-align:center;
}
.pie p{
  margin:0; font-size:var(--t-menudo); color:var(--tenue);
  letter-spacing:.16em; text-transform:uppercase;
}

/* ─────────── móvil ─────────── */
@media (max-width:860px){
  .portada{
    grid-template-columns:1fr; align-content:center;
    padding:13svh calc(var(--marco) + 14px) 14svh;
  }
  .campo{ aspect-ratio:1/1.12 }
  .ficha{ grid-template-columns:1fr }
  .laminas-fila{ grid-template-columns:1fr; max-width:420px; margin:0 auto }
}
@media (max-width:760px){
  :root{ --marco:12px }
  .carrusel{ height:clamp(250px, 44svh, 400px) }
  .tarjeta{ max-width:56vw }
  .mini{ width:26px }
}

/* ─────────── móvil: lo que la cuenta decía que se rompía ───────────
   Auditoría a 390 px: las 4 pastillas del menú sumaban ~389 px contra 330 px
   de ancho útil, así que se desbordaban. Y el visor mostraba las láminas a
   366 px, donde su letra pequeña no se lee — justo para lo que existe. */
@media (max-width:620px){

  /* el menú: pastillas más justas y, si aun así no caben, se desplaza en
     horizontal sin barra visible. Nunca desborda ni se parte en dos líneas. */
  .cabecera{
    padding:calc(var(--marco) + 14px) 0 14px;
    justify-content:flex-start;
  }
  .nav{
    width:100%; overflow-x:auto; gap:5px;
    padding:2px var(--lado);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{ display:none }
  .nav a{ flex:0 0 auto; padding:5px 11px; font-size:var(--t-micro) }

  /* el visor: la lámina se muestra a 700 px como mínimo y el diálogo se
     desplaza, así se puede leer moviéndola con el dedo (y el pellizco del
     navegador sigue funcionando porque no bloqueamos la escala) */
  .visor{ padding:0; cursor:default }
  .visor[open]{ display:block; overflow:auto }
  .visor img{
    max-width:none; width:max(700px, 100vw); height:auto;
    border-radius:0; margin:0 auto; display:block;
  }
  .visor-cerrar{ position:fixed; top:14px; right:14px; z-index:2 }

  /* el contacto: el botón baja debajo del dato en vez de apretarse al lado */
  .via-fila{ flex-wrap:wrap; gap:10px 12px }
  .via-texto{ flex:1 1 140px }
  .boton{ flex:1 1 100%; text-align:center; padding:11px 18px }

  /* el pie, sin tanto aire lateral */
  .pie p{ letter-spacing:.1em }
}

/* quien pide menos movimiento, no lo recibe */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .muestra, .tarjeta{ transition:none }
  .titular span,.bajada,.scroll,.muestra{ animation:none }
}