/* ===========================================================================
   SISTEMA VISUAL — derivado de la identidad de @vet.mayollaferrere
   Verde monte / verde sala / crema / dorado mostaza / violeta / terracota
   Diseño de un solo mundo visual (oscuro): la marca no tiene versión clara.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* Color */
  --monte:        #131E11;
  --monte-hondo:  #0C150B;
  --sala:         #24331E;
  --sala-alta:    #31432A;
  --crema:        #F4EFE1;
  --crema-tenue:  #AEB9A2;
  --dorado:       #D7C37B;
  --violeta:      #AC90E2;
  --terracota:    #CB8D6E;
  --borde:        rgba(244, 239, 225, 0.14);
  --borde-fuerte: rgba(244, 239, 225, 0.28);
  --velo:         rgba(12, 21, 11, 0.72);

  /* Tipografía */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --t-hero:  clamp(2.7rem, 10.5vw, 7rem);
  --t-cap:   clamp(2rem, 6vw, 3.9rem);
  --t-med:   clamp(1.35rem, 3.4vw, 1.9rem);
  --t-body:  clamp(1.02rem, 0.55vw + 0.92rem, 1.18rem);
  --t-mini:  0.8rem;

  /* Ritmo */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --barra: 58px;
  --medida: 34ch;
}

* { box-sizing: border-box; }

/* Necesario: varias clases de este proyecto declaran display, y eso le gana al
   display:none que el navegador le da por defecto a los elementos [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--monte);
  color: var(--crema);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--dorado); color: var(--monte-hondo); }

:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Salto de contenido ---------------------------------------------- */
.salto {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--dorado); color: var(--monte-hondo);
  padding: 10px 16px; font-size: var(--t-mini);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
}
.salto:focus { transform: translateY(0); }

/* =====================  BARRA FIJA  ================================== */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--barra);
  display: flex; align-items: center; gap: 1rem;
  padding-inline: var(--gutter);
  background: rgba(19, 30, 17, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.barra[data-sombra="si"] { border-bottom-color: var(--borde); }

.barra__marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; margin-right: auto;
}
/* Monograma del logo (img/marca/monograma.png, dorado con fondo transparente) */
.barra__logo {
  height: 30px; width: auto; flex: none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.barra__marca:hover .barra__logo { transform: rotate(-6deg) scale(1.05); }
.barra__nombre {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crema-tenue); font-weight: 400;
  display: none;
}

.barra__anclas { display: none; gap: 1.6rem; }
.barra__anclas a {
  position: relative; white-space: nowrap;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--crema-tenue); text-decoration: none;
  padding-block: 4px;
  transition: color .2s ease;
}
/* Subrayado que crece desde la izquierda; se queda fijo en la sección activa */
.barra__anclas a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--dorado);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.barra__anclas a:hover,
.barra__anclas a[aria-current="true"] { color: var(--crema); }
.barra__anclas a:hover::after,
.barra__anclas a[aria-current="true"]::after { transform: scaleX(1); }

.hamburguesa {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--borde);
  border-radius: 2px; color: var(--crema); cursor: pointer;
  transition: border-color .2s ease;
}
.hamburguesa:hover { border-color: var(--borde-fuerte); }
.hamburguesa span {
  display: block; width: 17px; height: 1px; background: currentColor;
  position: relative;
}
.hamburguesa span::before,
.hamburguesa span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1px;
  background: currentColor; transition: transform .25s ease, opacity .2s ease;
}
.hamburguesa span::before { top: -5px; }
.hamburguesa span::after  { top: 5px; }
.hamburguesa[aria-expanded="true"] span { background: transparent; }
.hamburguesa[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* Panel móvil */
.panel {
  position: fixed; inset: var(--barra) 0 0 0; z-index: 99;
  background: var(--monte-hondo);
  padding: clamp(1.5rem, 7vw, 3rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: .25rem;
  overflow-y: auto;
}
.panel[hidden] { display: none !important; }
.panel a {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 300; text-decoration: none; color: var(--crema);
  padding-block: .55rem;
  border-bottom: 1px solid var(--borde);
  min-height: 44px;
}
/* ".panel a" le pone al botón la letra grande y crema de los links del menú:
   acá recupera la del botón para que se lea sobre el dorado. */
.panel .boton {
  margin-top: 1.6rem; align-self: flex-start;
  padding: .72rem 1.4rem; border-bottom: 0;
  font-family: var(--sans); font-size: .84rem; font-weight: 600;
  color: var(--monte-hondo);
}

/* =====================  BOTÓN CTA  =================================== */
.boton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .72rem 1.4rem;
  background: var(--dorado); color: var(--monte-hondo);
  font-family: var(--sans); font-size: .84rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 2px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .3s ease;
}
/* Brillo que cruza el botón al pasar el mouse */
.boton::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.boton:hover { background: #E6D392; transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(215,195,123,.55); }
.boton:hover::after { transform: translateX(130%); }
.boton:active { transform: translateY(0) scale(.98); }
.boton svg { width: 15px; height: 15px; flex: none; transition: transform .3s ease; }
.boton:hover svg { transform: rotate(-12deg) scale(1.12); }

.boton--fino {
  background: transparent; color: var(--crema);
  border: 1px solid var(--borde-fuerte);
  padding: .6rem 1.05rem;
}
.boton--fino:hover { background: rgba(244,239,225,.06); border-color: var(--dorado); }

.barra .boton { display: none; }

/* =====================  ESCENAS A PANTALLA  ========================== */
.escena {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--barra) + 2rem) var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}
/* El lienzo es un 8 % más alto que la escena: ese margen es el que usa el
   parallax (sitio.js lo desplaza con --par) sin que asomen bordes vacíos. */
.escena__lienzo {
  position: absolute; inset: -8% 0; z-index: -2;
  background: var(--monte);
  transform: translate3d(0, var(--par, 0px), 0);
  will-change: transform;
}
.escena__lienzo svg, .escena__lienzo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 7s cubic-bezier(.2,.6,.2,1);
}
/* Zoom lento al entrar en pantalla (estilo Ken Burns) */
[data-reveal="oculto"] .escena__lienzo svg,
[data-reveal="oculto"] .escena__lienzo img { transform: scale(1.1); }
.escena--hero .escena__lienzo svg,
.escena--hero .escena__lienzo img { animation: lienzoEntra 9s cubic-bezier(.2,.6,.2,1) both; }
@keyframes lienzoEntra { from { transform: scale(1.1); } to { transform: none; } }

.escena__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.escena__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(12,21,11,.92) 0%, rgba(12,21,11,.72) 26%,
    rgba(12,21,11,.18) 58%, rgba(12,21,11,.30) 100%);
}
/* En el celular el texto ocupa casi media pantalla y los dibujos tienen zonas
   claras (la cartilla, el sol): abajo el velo se cierra más para que se lea. */
@media (max-width: 859px) {
  .escena__velo {
    background: linear-gradient(to top,
      rgba(12,21,11,.95) 0%, rgba(12,21,11,.9) 32%,
      rgba(12,21,11,.6) 52%, rgba(12,21,11,.15) 74%, rgba(12,21,11,.3) 100%);
  }
}
.escena__contenido { position: relative; width: 100%; max-width: 1180px; margin-inline: auto; }

/* Portada con foto. El texto va abajo en el celular y a la izquierda en la
   computadora, así que el velo se refuerza justo ahí para que se lea aunque
   detrás haya cielo claro o pared, y deja más limpio el frente del local. */
.escena--hero .escena__velo {
  background: linear-gradient(to top,
    rgba(12,21,11,.94) 0%, rgba(12,21,11,.82) 30%,
    rgba(12,21,11,.45) 55%, rgba(12,21,11,.12) 78%, rgba(12,21,11,.35) 100%);
}
@media (min-width: 860px) {
  .escena--hero .escena__velo {
    background:
      linear-gradient(to right,
        rgba(12,21,11,.9) 0%, rgba(12,21,11,.72) 32%,
        rgba(12,21,11,.25) 55%, rgba(12,21,11,0) 72%),
      linear-gradient(to top,
        rgba(12,21,11,.85) 0%, rgba(12,21,11,.4) 22%,
        rgba(12,21,11,0) 45%, rgba(12,21,11,.3) 100%);
  }
}

/* Luz dorada que sigue al cursor sobre el hero (solo con mouse) */
.escena__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%),
    rgba(215,195,123,.16), rgba(215,195,123,.05) 40%, transparent 70%);
}
@media (hover: hover) {
  .escena--hero:hover .escena__luz { opacity: 1; }
}

/* --- Escena dos: la cartilla se escribe sola ---------------------------- */
/* Al entrar en pantalla, la cartilla sube, las líneas se trazan de izquierda
   a derecha y los rótulos "aparecen escritos" renglón por renglón. */
.cartilla {
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
[data-reveal="oculto"] .cartilla { opacity: 0; transform: translateY(60px); }
/* En el celular la cartilla ocupa toda la pantalla y el texto cae encima: se
   atenúa para que quede como fondo y no compita con lo que hay que leer. */
@media (max-width: 859px) { .cartilla { opacity: .5; } }

/* Sigue al mouse (sitio.js pone --tx y --ty entre -1 y 1) */
.cartilla__tilt {
  transform-box: fill-box; transform-origin: center;
  transform: translate(calc(var(--tx, 0) * 14px), calc(var(--ty, 0) * 10px))
             rotate(calc(var(--tx, 0) * 1.6deg));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.renglon line {
  stroke-dasharray: 380; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1);
}
.renglon rect {
  transform-box: fill-box; transform-origin: left center;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
[data-reveal="oculto"] .renglon line { stroke-dashoffset: 380; }
[data-reveal="oculto"] .renglon rect { transform: scaleX(0); opacity: 0; }
/* Cada renglón arranca un poco después que el anterior; el valor terracota
   aparece después del rótulo, como si se completara la ficha. */
.renglon:nth-of-type(1) line, .renglon:nth-of-type(1) rect { transition-delay: .5s; }
.renglon:nth-of-type(2) line, .renglon:nth-of-type(2) rect { transition-delay: .65s; }
.renglon:nth-of-type(3) line, .renglon:nth-of-type(3) rect { transition-delay: .8s; }
.renglon:nth-of-type(4) line, .renglon:nth-of-type(4) rect { transition-delay: .95s; }
.renglon:nth-of-type(5) line, .renglon:nth-of-type(5) rect { transition-delay: 1.1s; }
.renglon:nth-of-type(6) line, .renglon:nth-of-type(6) rect { transition-delay: 1.25s; }
.renglon:nth-of-type(7) line, .renglon:nth-of-type(7) rect { transition-delay: 1.4s; }
.renglon:nth-of-type(8) line, .renglon:nth-of-type(8) rect { transition-delay: 1.55s; }
.renglon:nth-of-type(9) line, .renglon:nth-of-type(9) rect { transition-delay: 1.7s; }
.renglon:nth-of-type(1) rect:last-child { transition-delay: .8s; }
.renglon:nth-of-type(2) rect:last-child { transition-delay: .95s; }
.renglon:nth-of-type(3) rect:last-child { transition-delay: 1.1s; }
.renglon:nth-of-type(4) rect:last-child { transition-delay: 1.25s; }
.renglon:nth-of-type(5) rect:last-child { transition-delay: 1.4s; }
.renglon:nth-of-type(6) rect:last-child { transition-delay: 1.55s; }
.renglon:nth-of-type(7) rect:last-child { transition-delay: 1.7s; }
.renglon:nth-of-type(8) rect:last-child { transition-delay: 1.85s; }
.renglon:nth-of-type(9) rect:last-child { transition-delay: 2s; }

/* La cruz entra girando y el halo late despacio */
.cruz {
  transform-box: fill-box; transform-origin: center;
  transition: opacity 1s ease .9s, transform 1.4s cubic-bezier(.2,.7,.2,1) .9s;
}
[data-reveal="oculto"] .cruz { opacity: 0; transform: rotate(-40deg) scale(.6); }
.cruz-halo {
  transform-box: fill-box; transform-origin: center;
  animation: latido 3.2s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.12); opacity: .45; }
}

/* --- Escena tres: cae la tarde ------------------------------------------ */
/* sitio.js pone --p en cada escena: 0 cuando asoma por abajo, 1 cuando se
   fue por arriba. Con eso el sol baja, las lomas suben a distinta velocidad
   (las de adelante más rápido) y el cielo se va poniendo cálido. */
.sol {
  transform: translateY(calc(var(--p, 0) * 110px - 30px));
  will-change: transform;
}
.loma { will-change: transform; }
.loma--1 { transform: translateY(calc(var(--p, 0) * -14px)); }
.loma--2 { transform: translateY(calc(var(--p, 0) * -34px)); }
.loma--3 { transform: translateY(calc(var(--p, 0) * -60px)); }
.atardecer {
  opacity: calc(var(--p, 0) * .28);
  mix-blend-mode: soft-light;
}

/* Entrada del hero al cargar: cada bloque sube y aparece, uno detrás del otro */
.escena--hero .escena__contenido > * {
  animation: subir 1s cubic-bezier(.2,.7,.2,1) both;
}
.escena--hero .escena__contenido > :nth-child(1) { animation-delay: .2s; }
.escena--hero .escena__contenido > :nth-child(2) { animation-delay: .35s; }
.escena--hero .escena__contenido > :nth-child(3) { animation-delay: .55s; }
.escena--hero .escena__contenido > :nth-child(4) { animation-delay: .75s; }
.hero__titulo span { animation: subir 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero__titulo span:nth-child(1) { animation-delay: .4s; }
.hero__titulo span:nth-child(2) { animation-delay: .55s; }
@keyframes subir {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.hueco {
  position: absolute; z-index: 2; right: var(--gutter);
  top: calc(var(--barra) + 0.9rem);
  margin: 0;
  font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--crema-tenue); opacity: .72;
  border: 1px dashed var(--borde); border-radius: 2px;
  padding: .3rem .6rem;
  background: rgba(12,21,11,.82);
  white-space: nowrap;
}

/* --- Hero -------------------------------------------------------------- */
.hero__eyebrow {
  font-size: var(--t-mini); letter-spacing: .22em; text-transform: uppercase;
  color: var(--dorado); margin: 0 0 1.1rem;
}
.hero__titulo {
  font-family: var(--serif);
  font-size: var(--t-hero);
  font-weight: 300; line-height: .93; letter-spacing: -.028em;
  margin: 0; text-wrap: balance;
}
.hero__titulo span { display: block; }
.hero__titulo .enfasis { font-style: italic; font-weight: 400; }
.hero__promesa {
  font-size: var(--t-med); font-weight: 300;
  max-width: 22ch; margin: 1.4rem 0 0; color: var(--crema);
  text-wrap: balance;
}
.hero__pie {
  margin-top: clamp(1.8rem, 5vh, 3rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  border-top: 1px solid var(--borde); padding-top: 1.4rem;
}
.hero__atributos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-size: .84rem; letter-spacing: .05em; color: var(--crema-tenue);
}
.hero__atributos li { display: flex; align-items: center; gap: .5rem; }
.hero__atributos li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--terracota); flex: none;
}

/* --- Escenas intermedias ---------------------------------------------- */
.escena__marcador {
  font-size: var(--t-mini); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dorado); margin: 0 0 .9rem;
}
.escena__lineas {
  font-family: var(--serif);
  font-size: var(--t-cap); font-weight: 300; line-height: 1.02;
  letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.escena__lineas span { display: block; }
.escena__lineas span:last-child { color: var(--dorado); font-style: italic; }
.escena__pie {
  margin: 1.1rem 0 0; color: var(--crema-tenue);
  max-width: 42ch; font-size: 1rem;
}

.escena__texto {
  margin: .9rem 0 0; max-width: 48ch;
  font-size: .95rem; line-height: 1.6;
  color: var(--crema-tenue);
}

/* =====================  FOTITOS  ===================================== */
/* Fotos que acompañan al capítulo uno y a las dos escenas dibujadas. Son las
   mismas de la tira (img/galeria/), así que no agregan descargas, y al tocarlas
   se abren grandes en el visor.

   Cada foto tiene tres capas, para que los movimientos no se pisen:
   - .fotito (el botón): se corre con el scroll (--p va de 0 a 1 mientras la
     sección pasa por pantalla) y con el mouse (--mx y --my, de -1 a 1). Las
     tres variables las pone sitio.js en la sección.
   - .fotito__marco: el giro, el flote y el marco dorado de atrás.
   - .fotito__ventana: recorta la imagen; ahí pasan la aparición y el zoom.

   Variables por foto: --ancho, --giro, --viaje (cuánto la corre el scroll),
   --hondo (cuánto la corre el mouse; si es negativa va para el otro lado),
   --ritmo y --demora (del flote) y --entra (cuánto espera para aparecer). */
.fotito {
  position: absolute; display: block;
  width: var(--ancho, 12rem);
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(
    calc(var(--mx, 0) * var(--hondo, 12px)),
    calc((.5 - var(--p, .5)) * var(--viaje, 44px) + var(--my, 0) * var(--hondo, 12px)),
    0);
  transition: transform 1.1s cubic-bezier(.16, .84, .3, 1);
}
.fotito:hover, .fotito:focus-visible { z-index: 3; }
/* Con el teclado, el marco dorado se cierra alrededor de la foto y la sigue
   en su giro (un outline común quedaría derecho, desfasado de la foto). */
.fotito:focus-visible { outline: none; }
.fotito:focus-visible .fotito__marco::before {
  translate: 0 0; scale: 1.07; opacity: 1;
  border: 2px solid var(--dorado);
}

.fotito__marco {
  position: relative; display: block; isolation: isolate;
  rotate: var(--giro, 0deg);
  animation: flotar var(--ritmo, 9s) ease-in-out var(--demora, 0s) infinite;
  transition: rotate 1s cubic-bezier(.2, .7, .2, 1), scale 1s cubic-bezier(.2, .7, .2, 1);
}
@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -11px; }
}
/* Marco dorado de un pelo, corrido detrás de la foto */
.fotito__marco::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; left: 0; width: 100%; aspect-ratio: 4 / 5;
  border: 1px solid rgba(215, 195, 123, .32); border-radius: 3px;
  translate: 9px 9px;
  transition: translate 1s cubic-bezier(.2, .7, .2, 1), scale .5s cubic-bezier(.2, .7, .2, 1),
              border-color .6s ease, opacity 1.2s ease calc(var(--entra, 0s) + .9s);
}
.fotito__ventana {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 3px;
  box-shadow: 0 28px 60px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(244, 239, 225, .1);
  transition: box-shadow 1.4s ease var(--entra, 0s);
}
/* Velo suave abajo: le da profundidad y se va al pasar el mouse */
.fotito__ventana::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(12, 21, 11, .4), rgba(12, 21, 11, 0) 48%);
  transition: opacity .8s ease var(--entra, 0s);
}
.fotito__ventana img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0);
  filter: saturate(.84) brightness(.95);
  transition: clip-path 1.5s cubic-bezier(.7, 0, .2, 1) var(--entra, 0s),
              scale 1.9s cubic-bezier(.2, .7, .2, 1) var(--entra, 0s),
              filter .9s ease;
}
.fotito__pie {
  display: block; margin-top: .8rem;
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--crema-tenue);
  transition: color .4s ease,
              opacity 1s ease calc(var(--entra, 0s) + .8s),
              translate 1s cubic-bezier(.2, .7, .2, 1) calc(var(--entra, 0s) + .8s);
}

/* Aparición: la foto se revela de abajo hacia arriba mientras la imagen se
   asienta, como una copia que sale del revelador; después llegan el marco y
   el pie. sitio.js pone fotito--espera a las que todavía no se vieron. */
.fotito--espera .fotito__ventana {
  box-shadow: 0 28px 60px -26px rgba(0, 0, 0, 0), 0 0 0 1px rgba(244, 239, 225, 0);
}
.fotito--espera .fotito__ventana::after,
.fotito--espera .fotito__marco::before { opacity: 0; }
.fotito--espera .fotito__ventana img { clip-path: inset(100% 0 0 0); scale: 1.22; }
.fotito--espera .fotito__pie { opacity: 0; translate: 0 8px; }

/* Al pasar el mouse: se endereza, se acerca y toma su color */
@media (hover: hover) {
  .fotito:hover .fotito__marco { rotate: 0deg; scale: 1.035; }
  .fotito:hover .fotito__marco::before { translate: 5px 5px; border-color: rgba(215, 195, 123, .65); }
  .fotito:hover .fotito__ventana {
    box-shadow: 0 38px 70px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(215, 195, 123, .35);
  }
  .fotito:hover .fotito__ventana::after { opacity: 0; }
  .fotito:hover .fotito__ventana img { scale: 1.06; filter: saturate(1.05) brightness(1.02); }
  .fotito:hover .fotito__pie { color: var(--dorado); }
}

/* --- Computadora: cada foto en su lugar -------------------------------- */
/* Los anchos se miden también contra el alto de la pantalla (vh): así, en una
   notebook baja las fotos se achican y nunca llegan al texto. */
@media (min-width: 900px) {
  /* En las escenas van sobre el dibujo, en la misma columna de 1180 px que
     usa el texto. La capa deja pasar el mouse; las fotos no. */
  .fotitos--escena {
    position: absolute; z-index: 1;
    inset: calc(var(--barra) + 1.5rem) var(--gutter) clamp(2.5rem, 7vh, 4.5rem);
    max-width: 1180px; margin-inline: auto;
    pointer-events: none;
  }
  .fotitos--escena .fotito { pointer-events: auto; }

  /* Capítulo tres: la grande queda entre el texto y la cartilla, apoyada en
     su borde; la chica, arriba a la izquierda. */
  .escena--cartilla .fotito--a {
    top: 10%; left: max(46%, 34rem);
    --ancho: clamp(13rem, min(20vw, 38vh), 19rem); --giro: 2.6deg; --hondo: 16px;
  }
  .escena--cartilla .fotito--b {
    top: 0; left: 0;
    --ancho: clamp(8rem, min(14vw, 24vh), 13rem); --giro: -3.4deg;
    --viaje: -30px; --hondo: -24px; --ritmo: 11s; --demora: -3.5s; --entra: .4s;
  }
  /* Capítulo cinco: la grande a la izquierda del sol; la chica abajo a la
     derecha, sobre las lomas. */
  .escena--atardecer .fotito--a {
    top: 2%; left: 50%;
    --ancho: clamp(12rem, min(18vw, 34vh), 17.5rem); --giro: -2.4deg; --hondo: 16px;
  }
  .escena--atardecer .fotito--b {
    right: 0; bottom: 4%;
    --ancho: clamp(9rem, min(12vw, 24vh), 12.5rem); --giro: 3.4deg;
    --viaje: -30px; --hondo: -24px; --ritmo: 10.5s; --demora: -4.5s; --entra: .4s;
  }
}
/* Pantallas muy bajas: en las escenas queda solo la foto grande */
@media (min-width: 900px) and (max-height: 640px) {
  .fotitos--escena .fotito--b { display: none; }
}

/* --- Celular y tablet parada: un par de fotos encimadas ----------------- */
/* En las escenas el par va arriba del texto, dentro del flujo: si la pantalla
   es baja la escena se estira, pero las fotos nunca tapan lo que hay que leer. */
@media (max-width: 899px) {
  .fotitos {
    position: relative; display: flex; align-items: flex-start;
    max-width: 30rem; padding-right: 4%;
  }
  .fotito { position: relative; }
  .fotito--a { width: 56%; z-index: 1; --giro: -2.6deg; }
  .fotito--b {
    width: 48%; margin-left: -6%; margin-top: 16%; z-index: 2;
    --giro: 3.2deg; --viaje: -30px; --ritmo: 11s; --demora: -4s; --entra: .4s;
  }
  .escena--cartilla, .escena--atardecer {
    flex-direction: column; justify-content: flex-end; align-items: stretch;
  }
  .fotitos--escena { width: 100%; margin: 0 0 2.6rem; }
}

/* =====================  CAPÍTULOS DE TEXTO  ========================== */
.capitulo {
  padding: clamp(4rem, 12vh, 8rem) var(--gutter);
  background: var(--sala);
  border-top: 1px solid var(--borde);
}
.capitulo--hondo { background: var(--monte-hondo); }
.capitulo__caja { max-width: 1180px; margin-inline: auto; }

/* Capítulo con fotitos al costado: texto a la izquierda y, a la derecha, dos
   fotos encimadas (el grupo tiene alto propio porque las fotos van
   absolutas). En pantalla angosta el par pasa abajo del texto. */
@media (min-width: 900px) {
  .capitulo__caja--dos {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .capitulo--fotos .fotitos { position: relative; aspect-ratio: 1 / 1.06; }
  .capitulo--fotos .fotito--a { top: 0; left: 0; --ancho: 61%; --giro: -2.6deg; --hondo: 14px; }
  .capitulo--fotos .fotito--b {
    right: 0; bottom: 0; --ancho: 52%; --giro: 3.2deg;
    --viaje: -30px; --hondo: -22px; --ritmo: 11.5s; --demora: -4s; --entra: .4s;
  }
}
@media (max-width: 899px) {
  .capitulo--fotos .fotitos { margin-top: 2.8rem; }
}

.marcador {
  display: flex; align-items: center; gap: .8rem;
  font-size: var(--t-mini); letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracota); margin: 0 0 1.6rem;
}
.marcador::after {
  content: ''; height: 1px; flex: 1; background: var(--borde);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .25s;
}

.titulo {
  font-family: var(--serif);
  font-size: var(--t-cap); font-weight: 300; line-height: 1.02;
  letter-spacing: -.022em; margin: 0; text-wrap: balance;
}
.titulo span { display: block; }
.titulo span:last-child:not(:only-child) { font-style: italic; color: var(--dorado); }

.prosa { max-width: 54ch; }
.prosa p { margin: 1.15rem 0 0; }
.prosa p:first-child { margin-top: 1.7rem; font-size: 1.12em; color: var(--crema); }

.nota-pendiente {
  margin-top: 2.2rem;
  display: flex; gap: .8rem; align-items: flex-start;
  border-left: 2px solid var(--terracota);
  padding: .6rem 0 .6rem .95rem;
  font-size: .86rem; color: var(--crema-tenue); max-width: 46ch;
}
.nota-pendiente b {
  display: block; font-weight: 500; color: var(--terracota);
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: .2rem;
}

/* --- Fichas de servicios (lenguaje de cartilla sanitaria) -------------- */
.fichas {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid; gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}
.ficha {
  background: var(--sala);
  padding: clamp(1.5rem, 4vw, 2.2rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: background .35s ease, opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.ficha:hover, .ficha--abierta { background: var(--sala-alta); cursor: pointer; }
.ficha--abierta .ficha__codigo { transform: rotate(-12deg); }
.ficha__items li { transition: transform .25s ease, color .25s ease; }
.ficha__items li:hover { transform: translateX(4px); color: var(--dorado); }

/* Pie de la ficha: aparece al pasar el mouse o al tocarla en el celular.
   Se despliega con grid-template-rows para animar la altura sin saber cuánto mide. */
.ficha__pie {
  margin: 0; display: grid; grid-template-rows: 0fr;
  opacity: 0; transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.ficha__pie > span { overflow: hidden; min-height: 0; }
.ficha:hover .ficha__pie, .ficha--abierta .ficha__pie { grid-template-rows: 1fr; opacity: 1; }
.ficha__consulta {
  display: inline-block; margin-top: .4rem; padding-block: 6px;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dorado); text-decoration: none;
  border-bottom: 1px solid var(--borde-fuerte);
  transition: border-color .2s ease;
}
.ficha__consulta:hover { border-bottom-color: var(--dorado); }

/* En pantallas táctiles no hay hover: se marca con un "+" que se vuelve "×" */
@media (hover: none) {
  .ficha__cabecera { position: relative; padding-right: 2rem; }
  .ficha__cabecera::after {
    content: '+'; position: absolute; right: 0; top: .1rem;
    font-family: var(--serif); font-size: 1.6rem; line-height: 1;
    color: var(--dorado); transition: transform .3s ease;
  }
  .ficha--abierta .ficha__cabecera::after { transform: rotate(45deg); }
}
.ficha__cabecera { display: flex; align-items: flex-start; gap: .9rem; }
.ficha__codigo {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em;
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  color: var(--violeta);
  border: 1px solid var(--violeta);
  border-radius: 50%;
  transition: transform .3s ease;
}
.ficha:hover .ficha__codigo { transform: rotate(-12deg); }
.ficha__titulo {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 400;
  line-height: 1.15; margin: 0; letter-spacing: -.012em;
}
.ficha__bajada { margin: .2rem 0 0; font-size: .88rem; color: var(--crema-tenue); }
.ficha__items { list-style: none; margin: 0; padding: 0; }
.ficha__items li {
  padding: .62rem 0; font-size: .95rem;
  border-bottom: 1px dashed var(--borde);
  display: flex; gap: .7rem; align-items: baseline;
}
.ficha__items li:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha__items li::before {
  content: ''; width: 14px; height: 1px; flex: none;
  background: var(--dorado); transform: translateY(-4px);
}

/* --- Placa de horarios ------------------------------------------------- */
.visitanos__grid {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
}
.placa {
  background: var(--crema); color: #1B3226;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border-radius: 3px;
  align-self: start;
}
.placa__titulo {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  margin: 0 0 1.3rem; color: #2E5A42;
}
/* "Abierto ahora" / "Cerrado": lo calcula sitio.js con los horarios de negocio.js */
.placa__estado {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: -.6rem 0 1.2rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.5; color: #2E5A42;
}
.placa__estado::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  margin-top: .32em;
  background: currentColor; box-shadow: 0 0 0 0 currentColor;
  animation: pulso 2.2s ease-out infinite;
}
.placa__estado[data-abierto="no"] { color: #9A5B3E; }
.placa__estado[data-abierto="no"]::before { animation: none; opacity: .7; }
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(46,90,66,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(46,90,66,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,90,66,0); }
}
.placa__filas { margin: 0; display: grid; gap: .35rem; }
.placa__fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-block: .3rem;
  border-bottom: 1px solid rgba(27,50,38,.14);
}
.placa__fila:last-child { border-bottom: 0; }
.placa__dia {
  font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #2E5A42;
}
.placa__hora {
  font-family: var(--serif); font-size: 1.18rem; font-weight: 400;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.placa__pie {
  margin: 1.5rem 0 0; padding-top: .9rem;
  border-top: 1px solid rgba(27,50,38,.2);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: #4A6B57;
}

.bloques { display: grid; gap: 1.6rem; align-content: start; }
.bloque {
  border-top: 1px solid var(--borde-fuerte);
  padding-top: 1.2rem;
}
.bloque__rotulo {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--violeta); margin: 0 0 .55rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.bloque__estado {
  border: 1px solid var(--violeta); border-radius: 100px;
  padding: .16rem .58rem; font-size: .7rem; letter-spacing: .1em;
}
.bloque__titulo {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  margin: 0 0 .5rem; line-height: 1.2;
}
.bloque p { margin: 0; color: var(--crema-tenue); font-size: .96rem; max-width: 44ch; }

/* --- Preguntas --------------------------------------------------------- */
.faq { margin-top: clamp(2.2rem, 5vh, 3rem); max-width: 62ch; }
.faq details {
  border-bottom: 1px solid var(--borde);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative; min-height: 44px;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 400;
  line-height: 1.3;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--dorado); }
.faq summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 1px solid var(--dorado);
  border-bottom: 1px solid var(--dorado);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details[open] summary { color: var(--dorado); }
.faq__cuerpo { padding: 0 0 1.3rem; color: var(--crema-tenue); max-width: 52ch; }
.faq details[open] .faq__cuerpo { animation: desplegar .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.faq__cuerpo p { margin: 0; }
.faq__enlace {
  display: inline-block; margin-top: .7rem; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dorado);
  text-decoration: none; border-bottom: 1px solid var(--borde-fuerte);
  padding-block: 4px;
}
.faq__enlace:hover { border-bottom-color: var(--dorado); }
.faq__pendiente {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracota); border: 1px dashed var(--terracota);
  padding: .35rem .6rem; border-radius: 2px;
}

/* --- Contacto y pie ---------------------------------------------------- */
.contacto__grid {
  margin-top: clamp(2.2rem, 5vh, 3rem);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.contacto__texto { color: var(--crema-tenue); max-width: 34ch; margin: 0 0 1.8rem; }
.datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.datos li { border-bottom: 1px solid var(--borde); }
.datos a, .datos .datos__plano {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding: .95rem 0; min-height: 44px;
  text-decoration: none; color: var(--crema);
  transition: color .2s ease;
}
.datos a:hover { color: var(--dorado); }
.datos__rotulo {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crema-tenue); flex: 0 0 7.5rem;
}
.datos__valor { font-size: 1.02rem; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.datos a:hover .datos__valor { transform: translateX(6px); }
.datos__nota {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracota); border: 1px dashed var(--terracota);
  padding: .1rem .4rem; border-radius: 2px;
}

.pie {
  padding: 2.2rem var(--gutter) 2.6rem;
  background: var(--monte-hondo);
  border-top: 1px solid var(--borde);
  font-size: .8rem; color: var(--crema-tenue);
}
.pie__caja {
  max-width: 1180px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .8rem 1.8rem;
  align-items: center; justify-content: space-between;
}
.pie__enlaces { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.pie a { text-decoration: none; border-bottom: 1px solid var(--borde); padding-block: 3px; }
.pie a:hover { color: var(--crema); border-bottom-color: var(--dorado); }

/* =====================  TIRA DE FOTOS  ============================== */
/* Fotos del trabajo diario. Se corren con el dedo o con la rueda del mouse,
   y al tocar una se abre grande en el visor. Para sumar fotos alcanza con
   agregar botones en index.html: la tira crece sola. */
.tira {
  padding: clamp(3rem, 9vh, 5rem) 0;
  background: var(--monte);
  border-top: 1px solid var(--borde);
  overflow: hidden;
}
.tira__caja { max-width: 1180px; margin-inline: auto; }
.tira__cabecera {
  padding-inline: var(--gutter); margin-bottom: 1.6rem;
  max-width: 46rem;
}
.tira__rotulo {
  margin: 0 0 .5rem; font-size: var(--t-mini); letter-spacing: .2em;
  text-transform: uppercase; color: var(--dorado);
}
.tira__texto { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--crema-tenue); }

.tira__pista {
  display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 1.6rem);
  padding-inline: var(--gutter); padding-top: .4rem; padding-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent;
  overscroll-behavior-x: contain;
}
.tira__pista::-webkit-scrollbar { height: 5px; }
.tira__pista::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 100px; }

/* Las tarjetas pares van un poco más abajo: la tira queda con un ritmo de
   ola en vez de una fila pareja. Al entrar en pantalla suben una por una
   (--i es la posición de cada tarjeta, la pone sitio.js). */
.tira__foto {
  flex: none; width: clamp(12.5rem, 19vw, 17rem);
  display: block; padding: 0; border: 0;
  background: none; color: inherit; cursor: zoom-in; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1),
              opacity 1s ease calc(var(--i, 0) * 80ms),
              translate 1.2s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 80ms);
}
.tira__foto:nth-child(even) { margin-top: 2.4rem; }
[data-reveal="oculto"] .tira__foto { opacity: 0; translate: 0 34px; }
.tira__foto:focus-visible { outline: 2px solid var(--dorado); outline-offset: 6px; border-radius: 4px; }

/* La ventana recorta la foto, así el zoom queda adentro del marco */
.tira__ventana {
  display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 3px;
  border: 1px solid var(--borde);
  box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .85);
  transition: border-color .5s ease, box-shadow .6s ease;
}
.tira__ventana img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) brightness(.93);
  transition: scale 1.4s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
}
.tira__pie {
  display: block; margin-top: .75rem;
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--crema-tenue);
  transition: color .3s ease;
}
.tira__foto:hover, .tira__foto:focus-visible { transform: translateY(-4px); }
.tira__foto:hover .tira__ventana, .tira__foto:focus-visible .tira__ventana {
  border-color: rgba(215, 195, 123, .5);
  box-shadow: 0 30px 56px -26px rgba(0, 0, 0, .95);
}
.tira__foto:hover img, .tira__foto:focus-visible img { scale: 1.06; filter: saturate(1.05) brightness(1.02); }
.tira__foto:hover .tira__pie, .tira__foto:focus-visible .tira__pie { color: var(--dorado); }

/* =====================  VISOR DE FOTOS  ============================= */
/* El tamaño de la foto lo calcula sitio.js con su proporción, así no salta
   cuando la versión chica (la que ya estaba cargada) se cambia por la grande.
   Abajo queda lugar para el pie y el número. */
.visor {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  padding-bottom: calc(clamp(1rem, 4vw, 3rem) + 2.4rem);
  background: rgba(6, 12, 6, .94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: aparecer .3s ease both;
}
.visor[hidden] { display: none !important; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.visor__foto {
  max-width: 100%; max-height: 100%; object-fit: contain;
  width: auto; height: auto; border-radius: 3px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(244, 239, 225, .08);
}
.visor__cerrar, .visor__paso {
  position: absolute; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(12,21,11,.75); color: var(--crema);
  border: 1px solid var(--borde); border-radius: 50%;
  cursor: pointer; font-size: 1.05rem; line-height: 1;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.visor__cerrar:hover, .visor__paso:hover { border-color: var(--dorado); color: var(--dorado); }
.visor__cerrar { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
.visor__paso svg { width: 18px; height: 18px; }
.visor__paso[data-visor="-1"] { left: clamp(.6rem, 2vw, 1.6rem); top: 50%; margin-top: -23px; }
.visor__paso[data-visor="1"]  { right: clamp(.6rem, 2vw, 1.6rem); top: 50%; margin-top: -23px; }
.visor__leyenda {
  position: absolute; left: 50%; bottom: clamp(.9rem, 3vw, 1.6rem);
  transform: translateX(-50%);
  display: flex; align-items: baseline; gap: .9rem;
  margin: 0; white-space: nowrap;
}
.visor__pie {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.1rem; color: var(--dorado);
}
.visor__cuenta {
  font-size: .74rem; letter-spacing: .14em;
  color: var(--crema-tenue); font-variant-numeric: tabular-nums;
}

/* La foto viaja desde la página hasta el visor (y vuelve) con la API de
   transiciones de vista, donde el navegador la tiene. Mientras dura el viaje,
   la barra y el botón de la tienda dejan su propio nombre de transición:
   si no, se dibujarían por encima del visor. */
.visor-viaje .barra, .visor-viaje .puente .boton { view-transition-name: none; }
::view-transition-group(foto-abierta) {
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.2, .75, .15, 1);
}
::view-transition-old(foto-abierta), ::view-transition-new(foto-abierta) {
  animation-duration: .62s;
}

/* =====================  WHATSAPP FLOTANTE  ========================== */
/* Solo en pantallas donde la barra no muestra el botón de WhatsApp (menos de
   860 px). sitio.js lo muestra cuando el botón de la portada ya quedó arriba
   y lo esconde cuando están a la vista el contacto o el pie, que tienen el suyo. */
.flotante {
  position: fixed; z-index: 90;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dorado); color: var(--monte-hondo);
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(12,21,11,.25);
  opacity: 0; visibility: hidden;
  transform: translateY(24px) scale(.85);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
}
.flotante svg { width: 26px; height: 26px; }
.flotante--visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.flotante:active { transform: scale(.94); }
/* Dos pulsos suaves solo la primera vez que aparece */
.flotante::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--dorado); opacity: 0; pointer-events: none;
}
.flotante--visible:not(.flotante--visto)::after {
  animation: flotantePulso 1.4s ease-out .4s 2;
}
@keyframes flotantePulso {
  from { transform: scale(1); opacity: .7; }
  to   { transform: scale(1.7); opacity: 0; }
}
@media (min-width: 860px) {
  .flotante { display: none; }
}

/* =====================  EQUIPO (carrusel)  =========================== */
/* Sin JS: título, presentación y después las personas una debajo de la otra.
   Cuando sitio.js arma el carrusel le pone data-listo a .equipo: ahí las
   fotos se apilan en un mismo lugar y cada persona toma una posición
   (data-pos): activa, siguiente (asoma a la derecha), previa (se va por la
   izquierda) u oculta (espera afuera). */
.capitulo--equipo { overflow: hidden; overflow: clip; }

.equipo {
  --equipo-intervalo: 7s;
  --foto-w: min(21rem, 70vw);
  position: relative;
}
/* Título y presentación viven adentro de .equipo para poder compartir columna
   con el nombre de la persona activa y los controles (ver modo carrusel). */
.equipo__intro { margin-bottom: clamp(2rem, 5vh, 3rem); }
.equipo__pista { display: grid; gap: 3.5rem; }

.persona { display: grid; gap: 1.6rem; align-content: start; }
.persona__foto { order: -1; }
.persona__texto { display: flex; flex-direction: column; justify-content: center; }
.persona__rol {
  margin: 0 0 .8rem;
  font-size: var(--t-mini); letter-spacing: .2em; text-transform: uppercase;
  color: var(--violeta);
}
.persona__nombre {
  margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance;
}
/* Nombre arriba y apellido abajo en cursiva dorada, como los títulos del sitio */
.persona__nombre span { display: block; }
.persona__nombre span:last-child:not(:only-child) { font-style: italic; color: var(--dorado); }
.persona__bio { margin: 1.1rem 0 0; color: var(--crema-tenue); max-width: 40ch; }
.persona__pendiente {
  align-self: flex-start; margin: 1.3rem 0 0;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terracota); border: 1px dashed var(--terracota);
  padding: .25rem .55rem; border-radius: 2px;
}

.persona__foto {
  position: relative; margin: 0;
  width: var(--foto-w); aspect-ratio: 4 / 5; max-width: 100%;
  overflow: hidden; border-radius: 3px;
  background: var(--sala);
  user-select: none; -webkit-user-select: none;
}
.persona__foto img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none;
}
/* Lugar reservado mientras no está la foto */
.persona__hueco {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 1px dashed var(--borde-fuerte); border-radius: 3px;
}
.persona__numero {
  font-family: var(--serif); font-weight: 300; line-height: 1;
  font-size: clamp(5rem, 16vw, 9rem); color: var(--crema); opacity: .12;
}
.persona__etiqueta {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  white-space: nowrap;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--crema-tenue);
  border: 1px dashed var(--borde); border-radius: 2px;
  padding: .25rem .5rem; background: rgba(12,21,11,.6);
}

/* --- Modo carrusel ---------------------------------------------------- */
/* .equipo pasa a ser una grilla de cuatro zonas: intro, foto, nombre y
   controles. La pista y los artículos se vuelven transparentes para la grilla
   (display: contents), así las cuatro fotos caen apiladas en la zona "foto" y
   los cuatro epígrafes (función y nombre) en la zona "nombre", justo debajo. */
.equipo[data-listo] {
  display: grid;
  grid-template-areas: "intro" "foto" "nombre" "controles";
  row-gap: 1rem;
}
.equipo[data-listo] .equipo__intro { grid-area: intro; margin-bottom: 1rem; }
.equipo[data-listo] .equipo__pista,
.equipo[data-listo] .persona { display: contents; }
.equipo[data-listo] .persona { pointer-events: none; }
.equipo[data-listo] .persona__texto { grid-area: nombre; }
.equipo[data-listo] .persona__foto {
  grid-area: foto; pointer-events: auto;
  touch-action: pan-y pinch-zoom;
}
.equipo[data-listo] .persona[data-pos="activa"] .persona__texto { pointer-events: auto; }
.equipo[data-listo] .equipo__controles { grid-area: controles; margin-top: .2rem; }

/* Epígrafe del retrato: una rayita dorada, la función y el nombre */
.equipo[data-listo] .persona__rol {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: .5rem;
}
.equipo[data-listo] .persona__rol::before {
  content: ''; width: 22px; height: 1px; flex: none;
  background: var(--dorado);
}
.equipo[data-listo] .persona__nombre { font-size: clamp(1.7rem, 5.5vw, 2rem); }

.equipo[data-listo] .persona__foto {
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease, filter .9s ease;
}
/* La imagen de adentro hace un zoom lento cada vez que su persona pasa al frente */
.equipo[data-listo] .persona__foto > * { transform: scale(1.08); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.equipo[data-listo] .persona[data-pos="activa"] .persona__foto > * { transform: none; }

.persona[data-pos="activa"] .persona__foto    { z-index: 3; }
.persona[data-pos="siguiente"] .persona__foto { z-index: 2; }
.persona[data-pos="previa"] .persona__foto    { z-index: 1; }
.persona[data-pos="activa"] .persona__texto   { z-index: 1; }

.persona[data-pos="activa"] .persona__foto { transform: none; opacity: 1; filter: none; }
.persona[data-pos="siguiente"] .persona__foto {
  transform: translateX(calc(100% + 1.25rem)) scale(.8);
  opacity: .55; filter: grayscale(1) brightness(.75);
  cursor: pointer;
}
.persona[data-pos="siguiente"] .persona__foto:hover { opacity: .8; }
.persona[data-pos="previa"] .persona__foto {
  transform: translateX(-35%) scale(.9); opacity: 0; filter: grayscale(1);
}
.persona[data-pos="oculta"] .persona__foto {
  transform: translateX(calc(200% + 2.5rem)) scale(.8); opacity: 0; filter: grayscale(1);
}

/* El texto sale rápido y el nuevo entra en cascada: función, nombre, bio */
.equipo[data-listo] .persona__texto > * {
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.equipo[data-listo] .persona:not([data-pos="activa"]) .persona__texto > * {
  opacity: 0; transform: translateY(14px); transition-delay: 0s;
}
.persona[data-pos="activa"] .persona__texto > :nth-child(1) { transition-delay: .3s; }
.persona[data-pos="activa"] .persona__texto > :nth-child(2) { transition-delay: .4s; }
.persona[data-pos="activa"] .persona__texto > :nth-child(3) { transition-delay: .5s; }
.persona[data-pos="activa"] .persona__texto > :nth-child(4) { transition-delay: .6s; }

/* Primer dibujado sin animar (lo usa sitio.js un instante al armar el carrusel) */
.equipo--quieto, .equipo--quieto * { transition: none !important; }

/* --- Controles: cuenta, segmentos que se llenan y flechas ----------------- */
.equipo__controles {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem 1.4rem; margin-top: 1.8rem;
}
.equipo__cuenta {
  flex: none; white-space: nowrap;
  margin: 0; font-size: .78rem; letter-spacing: .14em;
  color: var(--crema-tenue); font-variant-numeric: tabular-nums;
}
.equipo__cuenta b { color: var(--crema); font-weight: 500; }
.equipo__segmentos { display: flex; gap: .4rem; flex: 1 1 7rem; min-width: 7rem; }
.equipo__segmento {
  position: relative; flex: 1; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.equipo__segmento::before,
.equipo__relleno {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
}
.equipo__segmento::before { background: var(--borde-fuerte); transition: background .2s ease; }
.equipo__segmento:hover::before { background: var(--crema-tenue); }
.equipo__relleno {
  display: block; background: var(--dorado);
  transform: scaleX(0); transform-origin: left;
}
.equipo__segmento[data-estado="pasado"] .equipo__relleno { transform: scaleX(1); }
/* El segmento activo se llena en --equipo-intervalo; cuando termina, sitio.js
   pasa a la siguiente persona. Pausar la animación pausa el carrusel. */
.equipo__segmento[aria-current="true"] .equipo__relleno {
  animation: equipoLlenar var(--equipo-intervalo) linear forwards;
}
@keyframes equipoLlenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.equipo--pausado .equipo__segmento[aria-current="true"] .equipo__relleno,
.equipo:focus-within .equipo__segmento[aria-current="true"] .equipo__relleno {
  animation-play-state: paused;
}
@media (hover: hover) {
  .equipo:hover .equipo__segmento[aria-current="true"] .equipo__relleno { animation-play-state: paused; }
}
.equipo--manual .equipo__segmento[aria-current="true"] .equipo__relleno {
  animation: none; transform: scaleX(1);
}

.equipo__flechas { display: flex; gap: .5rem; }
/* En el celular, el botón flotante de WhatsApp ocupa la esquina de abajo a la
   derecha: los controles dejan libre esa columna para que no tape las flechas. */
@media (max-width: 859px) {
  .equipo__controles { flex-wrap: nowrap; column-gap: 1rem; padding-right: 64px; }
  .equipo__segmentos { min-width: 0; }
}
.equipo__flecha {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: none; color: var(--crema);
  border: 1px solid var(--borde); border-radius: 2px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.equipo__flecha:hover { border-color: var(--dorado); color: var(--dorado); }
.equipo__flecha svg { width: 16px; height: 16px; transition: transform .25s ease; }
.equipo__flecha[data-paso="1"]:hover svg  { transform: translateX(3px); }
.equipo__flecha[data-paso="-1"]:hover svg { transform: translateX(-3px); }

@media (min-width: 860px) {
  .equipo { --foto-w: min(24rem, 100%); }
  .equipo__pista { gap: 5rem; }
  .persona {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: stretch;
  }
  .persona__foto { order: 0; }

  /* Dos columnas. Izquierda: título y presentación arriba, controles abajo.
     Derecha: la foto y, pegado debajo, su epígrafe con la función y el
     nombre. Los controles quedan a la altura del epígrafe. */
  .equipo[data-listo] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "intro     foto"
      "controles nombre";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 1.2rem;
    align-items: start;
  }
  .equipo[data-listo] .equipo__intro { margin-bottom: 0; }
  .equipo[data-listo] .equipo__controles { align-self: end; margin-top: 0; }
  /* La foto nunca mide menos que su proporción 4:5, pero si la presentación
     es más alta (pantallas medianas) se estira hasta esa altura, así el
     epígrafe siempre queda pegado a la foto. */
  .equipo[data-listo] .persona__foto { align-self: stretch; }
  /* En computadora el nombre entra en un renglón: "Juan Manuel Mayol Laferrère" */
  .equipo[data-listo] .persona__nombre { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
  .equipo[data-listo] .persona__nombre span { display: inline; white-space: nowrap; }
}

/* =====================  ESCALAS  ===================================== */
@media (min-width: 600px) {
  .fichas { grid-template-columns: repeat(2, 1fr); }
  .fichas .ficha:last-child { grid-column: 1 / -1; }
}

@media (min-width: 860px) {
  :root { --barra: 66px; }
  .barra__logo { height: 34px; }
  .barra__nombre { display: block; }
  .barra .boton { display: inline-flex; }

  .escena--hero { min-height: min(94svh, 980px); }
  .hero__pie { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
  .hero__atributos { flex: 1; }

  .fichas { grid-template-columns: repeat(3, 1fr); }
  .fichas .ficha:last-child { grid-column: auto; }

  .visitanos__grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .contacto__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* Los siete links de la barra entran en una sola línea recién desde 1180 px.
   Entre 860 y 1180 px se ven la marca, el botón de WhatsApp y el menú
   desplegable. (Si cambia este ancho, cambiarlo también en sitio.js.) */
@media (min-width: 1180px) {
  .barra__anclas { display: flex; }
  .hamburguesa { display: none; }
  .panel { display: none !important; }
}

/* Móvil apaisado: las escenas no deben forzar una pantalla completa alta */
@media (max-height: 480px) and (orientation: landscape) {
  .escena { min-height: 0; padding-block: calc(var(--barra) + 1.5rem) 2rem; }
  .hero__titulo { font-size: clamp(2rem, 7vh, 3.2rem); }
  .hero__promesa { font-size: 1.1rem; margin-top: .8rem; }
  .hero__pie { margin-top: 1.2rem; }
  .escena__lineas { font-size: clamp(1.6rem, 6vh, 2.6rem); }
}

/* =====================  MOVIMIENTO  ================================== */
/* Las secciones llevan data-reveal. sitio.js les pone data-reveal="oculto"
   a las que están abajo del pliegue y se lo saca cuando entran en pantalla:
   ahí cada bloque sube y aparece, uno detrás del otro. Sin JS no se oculta
   nada, así que la página se lee entera igual. */
.capitulo__caja > *,
.escena__contenido > *,
.puente__caja > * {
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal="oculto"] .capitulo__caja > *,
[data-reveal="oculto"] .escena__contenido > *,
[data-reveal="oculto"] .puente__caja > * { opacity: 0; transform: translateY(28px); }
.capitulo__caja > :nth-child(2), .escena__contenido > :nth-child(2), .puente__caja > :nth-child(2) { transition-delay: .12s; }
.capitulo__caja > :nth-child(3), .escena__contenido > :nth-child(3) { transition-delay: .24s; }
.capitulo__caja > :nth-child(4) { transition-delay: .36s; }
.capitulo__caja > :nth-child(5) { transition-delay: .48s; }

/* Los títulos entran renglón por renglón */
.titulo span, .escena__lineas span {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal="oculto"] .titulo span,
[data-reveal="oculto"] .escena__lineas span { opacity: 0; transform: translateY(.5em); }
.titulo span:nth-child(2), .escena__lineas span:nth-child(2) { transition-delay: .18s; }
.titulo span:nth-child(3), .escena__lineas span:nth-child(3) { transition-delay: .36s; }

/* La línea del marcador se dibuja de izquierda a derecha */
[data-reveal="oculto"] .marcador::after { transform: scaleX(0); }

/* Las fichas de servicios entran en cascada */
[data-reveal="oculto"] .ficha { opacity: 0; transform: translateY(24px); }
.ficha:nth-child(2) { transition-delay: .15s; }
.ficha:nth-child(3) { transition-delay: .3s; }

/* --- Halo del cursor sobre lo clickeable --------------------------------- */
/* Un disco dorado translúcido que aparece pegado al puntero solo cuando está
   sobre un link o un botón; el resto del tiempo no existe. Lo crea sitio.js
   únicamente cuando hay mouse de verdad. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 300;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  pointer-events: none;
  /* El desplazamiento no tiene transición: va exactamente donde está el mouse */
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
}
.cursor::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: rgba(215,195,123,.14);
  opacity: 0; transform: scale(.4);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.cursor--activo::before { opacity: 1; transform: scale(1); }

/* --- Transición entre la landing y la tienda ----------------------------- */
/* En navegadores que lo soportan, el botón "Ver la tienda" se expande hasta
   convertirse en la cabecera de la tienda, y al volver hace el camino inverso.
   La barra de arriba se queda quieta durante el cambio. */
@view-transition { navigation: auto; }
.barra { view-transition-name: barra; }
.puente .boton { view-transition-name: puente-tienda; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
::view-transition-group(puente-tienda) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-old(puente-tienda), ::view-transition-new(puente-tienda) { animation-duration: .6s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal="oculto"] * { opacity: 1 !important; transform: none !important; }
  .escena__lienzo, .cartilla__tilt, .sol, .loma, .fotito { transform: none !important; }
  .fotito__marco { translate: none !important; }
  .renglon line { stroke-dashoffset: 0 !important; }
  .atardecer { opacity: .14; }
  .cursor { display: none !important; }
  .equipo__segmento[aria-current="true"] .equipo__relleno { transform: scaleX(1); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html { scroll-padding-top: calc(var(--barra) + 12px); }


/* =====================  PUENTE HACIA LA TIENDA  ====================== */
.puente {
  padding: clamp(3rem, 9vh, 5rem) var(--gutter);
  background: var(--sala-alta);
  border-top: 1px solid var(--borde);
}
.puente__caja {
  max-width: 1180px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 1.8rem;
  align-items: flex-start;
}
.puente__rotulo {
  margin: 0 0 .7rem; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dorado);
}
.puente__titulo {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.08;
  letter-spacing: -.018em; margin: 0; text-wrap: balance; max-width: 20ch;
}
.puente__texto {
  margin: .9rem 0 0; color: var(--crema-tenue); max-width: 48ch;
}

@media (min-width: 860px) {
  .puente__caja {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 3rem;
  }
  .puente__caja > .boton { flex: none; }
}