/* =========================================================
   SOLARA · SECCIONES
   Fase 2 · Diseño aplicada.

   Dos decisiones ordenan todo este archivo:

   1 · EL SITIO ES CLARO. Todo el circuito de electrónica es negro;
       el deck de Solara es arena en sus 28 páginas y la carta
       también. Hay UN solo bloque oscuro en toda la página —"Cómo
       acceder"— y por eso pega. El pie no cuenta como excepción: es
       la noche después del atardecer.

   2 · EL SCROLL BAJA DE LUZ, NO DE COLOR. El "sunset scroll" del
       documento original era un degradé morado → dorado sobre
       colores que la marca no tiene. Acá el mismo concepto se
       resuelve con los tres arenas: la página se va apagando de
       arriba hacia abajo, como una tarde que cae.

   Ningún color literal: todo sale de tokens.css.
   ========================================================= */

/* El degradé va en body y no por sección: así no hay costuras entre
   una sección y la siguiente. Las secciones son transparentes. */
body {
  background: linear-gradient(
    180deg,
    var(--arena) 0%,
    var(--arena) 28%,
    var(--arena-2) 58%,
    var(--arena-3) 100%
  );
  background-attachment: scroll;
}

.seccion { position: relative; }

/* Ahora que el fondo es continuo no se puede alternar entre dos
   fondos planos. El velo da el mismo ritmo aclarando, no pintando. */
.seccion--alt { background: var(--velo); }

.seccion--oscura {
  background: var(--bg-oscuro);
  color: var(--texto-sobre-oscuro);
}
/* REMAPEO POR CONTEXTO, no regla por regla. --acento es un marron-naranja
   calculado CONTRA ARENA: sobre el bloque oscuro da 2.03 de contraste y
   no pasa AA. En vez de corregir cada componente que lo usa, se redefine
   el token dentro del contexto oscuro y todos heredan bien; asi un
   componente nuevo tampoco nace roto. */
.seccion--oscura,
.pie {
  --acento: var(--celeste);
  --texto-suave: var(--arena-3);
  --borde: var(--borde-oscuro);
  --sombra-md: var(--sombra-oscura);
  --sombra-sm: var(--sombra-oscura);
}

.seccion--oscura .kicker { color: var(--frio); }
.seccion--oscura .bajada { color: var(--arena-3); }

/* ACA VIVIA EL ISOTIPO DE FONDO del bloque marron, y se saco.

   Se probo chico y centrado, despues al doble y contra el margen
   izquierdo, y al final cruzando el borde con la seccion de arriba para
   que se leyera como un sol saliendo por el horizonte. En escritorio
   funcionaba; en telefono no, y esa es la pantalla desde la que llega la
   mayoria. Con la columna angosta el dibujo quedaba encima del titular a
   dos renglones y de la bajada, sin aire alrededor: en vez de ornamento
   se leia como una mancha detras del texto.

   Queda anotado en vez de borrado en silencio porque la idea era buena y
   alguien la va a querer reponer: si vuelve, tiene que resolver primero el
   caso de 390 px de ancho, no el de 1440.

   La seccion conserva su otro ornamento -la lluvia, en ::after- y por eso
   se queda el `isolation`. */
#como-acceder { isolation: isolate; }

/* Las tarjetas sobre el bloque oscuro. Sin esto heredaban el marrón
   oscuro del texto secundario sobre un fondo marrón oscuro: 1.6 de
   contraste, ilegible. Un cambio de fondo de sección no arrastra solo
   los colores de lo que vive adentro. */
.seccion--oscura .paso,
.seccion--oscura .razon,
.seccion--oscura .via {
  background: transparent;
  border-color: var(--borde-oscuro);
}
.seccion--oscura .paso p,
.seccion--oscura .razon p,
.seccion--oscura .via p,
.seccion--oscura .nota { color: var(--arena-3); }
/* Va gateada igual que el hover que anula. Si esta quedara suelta y la
   positiva no, sobre tactil tendriamos la cancelacion sin la regla que
   cancela: ruido puro. Ver el comentario largo en components.css. */
@media (hover: hover) and (pointer: fine) {
  .seccion--oscura .paso:hover { box-shadow: none; }
}

/* ---------- La greca ancestral ----------
   Es el separador de marca. Reemplaza a las barras de acento que el
   documento maestro prohíbe por genéricas.

   Es la greca REAL, extraída del set de iconos del deck (p. 6, fila 2).
   Antes acá había una que dibujé a mano aproximándola; una aproximación
   dibujada a ojo de un asset que existe es exactamente el tipo de cosa
   que después nadie recuerda que era falsa.

   Va como máscara y no como imagen para que el color salga de una
   variable: un archivo con el color adentro es un hex que ningún
   linter de CSS encuentra nunca. */
.greca::after {
  content: "";
  display: block;
  height: 18px;
  margin-top: 1.25rem;
  /* La greca es ornamento puro: no lleva texto encima, así que acá sí
     va el naranja de marca sin diluir. */
  background: var(--acento-grafico);
  -webkit-mask: url("../assets/img/iconos/greca.png") repeat-x center / auto 18px;
  mask: url("../assets/img/iconos/greca.png") repeat-x center / auto 18px;
  opacity: 0.55;
}
.seccion__head--centro.greca::after { margin-inline: auto; max-width: 240px; }

/* ---------- El sol y las fases de la luna, de fondo en #mito ----------
   El unico ornamento grande del sitio, y va en un solo lugar a proposito.
   Se eligio #mito porque ahi el ornamento ILUSTRA el texto en vez de
   decorarlo: el titular dice "Cuando el sol se despide, la magia comienza"
   y el dibujo es exactamente eso, el sol flanqueado por las fases.

   Aca ya hubo un intento fallido con los iconos del deck: son PNG de
   128 px y ampliados se veian rotos, asi que hubo que sacarlos. Este es
   otro material -2834 x 1174 con transparencia- y aguanta el tamano.

   Va a `opacity` baja y detras de todo. NO lleva `overflow: hidden` en la
   seccion: recortaria el anillo de foco de cualquier control cercano, que
   se dibuja 8 px por fuera. En su lugar el ancho se acota con `max-width`
   para que no ensanche la pagina. */
/* Va sobre la COLUMNA DE TEXTO, no sobre la seccion. Centrado en la
   seccion, la mitad del dibujo quedaba tapada por la foto de la izquierda
   y lo que se veia era una forma cortada, no un sol. La seccion es de dos
   columnas: el eje de simetria que le sirve a un ornamento simetrico es el
   de la columna, no el del bloque.

   Va a media altura de la columna, detras del cuerpo de texto. Primero se
   habia puesto arriba, enmarcando el titular; a pedido bajo al centro, que
   es donde el dibujo tiene aire alrededor en vez de competir con los tres
   renglones grandes del titulo. La opacidad esta calculada para que el
   cuerpo siga cumpliendo AA por encima: ver la medicion mas abajo. */
#mito .dos-col__texto { position: relative; isolation: isolate; }
#mito .dos-col__texto::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  /* El corrimiento a la izquierda es a ojo y esta bien que lo sea. El
     dibujo esta centrado dentro de su archivo, pero el texto no llena la
     columna de forma pareja -los renglones cortan donde caen- asi que el
     centro optico del bloque de texto cae a la izquierda del centro
     geometrico de la caja. Centrarlo por calculo lo deja viendose corrido
     a la derecha, que es como estaba. */
  translate: calc(-50% - 2.5rem) -50%;
  left: 50%;
  width: min(680px, 100%);
  aspect-ratio: 2834 / 1174;
  background: url("../assets/img/texturas/sol-lunas.webp") no-repeat center / contain;
  opacity: 0.12;
  pointer-events: none;
}

/* En telefono se mantiene, adaptado. Ahi la columna ocupa el ancho
   completo, asi que el dibujo -que es tres veces mas ancho que alto- se
   iria de escala y quedaria una banda tapando el cuerpo de texto de punta
   a punta. Se achica al 84% de la columna y baja de opacidad: sobre un
   ancho chico la misma tinta pesa mas, porque hay menos aire alrededor. */
@media (max-width: 767px) {
  #mito .dos-col__texto::before {
    width: 84%;
    opacity: 0.09;
  }
}

/* =========================================================
   ORNAMENTOS ANCESTRALES
   Los iconos de la marca, grandes y muy velados, uno por seccion.

   TRES REGLAS, y las tres salen de un intento anterior que hubo que
   deshacer. Aquella vez se uso el set de 128 px que estaba en el
   proyecto -miniaturas sacadas del deck- ampliado a varios cientos: se
   veian rotos y quedaron feos. Ahora el material son los originales, de
   4725 x 4725, exportados al tamano en que se dibujan.

   1 · VAN COMO MASCARA, no como imagen. En el archivo solo viaja el alfa
       y el color lo pone el CSS desde un token. Asi el mismo icono es
       marron sobre arena y arena sobre el bloque oscuro, sin exportar dos
       versiones, y ningun color queda escondido dentro de un asset donde
       ningun linter lo encuentra.

   2 · UNO POR SECCION, y elegido porque SIGNIFICA algo ahi: el ojo
       radiante donde se cuentan los cinco actos, el sol donde estan las
       fechas del atardecer, el condor donde se habla del lugar entre
       montanas, el tocado en la invitacion a sumarse, la espiral en las
       preguntas. Un icono que solo rellena espacio se nota.

   3 · NUNCA `overflow: hidden` en la seccion para recortarlos: eso
       recortaria tambien el anillo de foco, que se dibuja 8 px por fuera
       de cada control. El tamano se acota con `width` y `max-width`.

   Tamanos deliberadamente distintos entre si. Cinco ornamentos del mismo
   porte leen como una plantilla; variar la escala los hace parecer
   puestos a mano, que es lo que son. */
/* La lista va enumerada y no como `.seccion[id]`. Con el selector amplio,
   TODAS las secciones se llevaban un ::after con fondo marron; sin medidas
   quedan en 0x0 y no se ven, pero es un pseudo-elemento pintado esperando
   que alguien le de un ancho por accidente. Cinco secciones tienen
   ornamento: se nombran las cinco. */
#experiencia::after,
#galeria::after,
#lineup::after,
#lugar::after,
#se-parte::after,
#faq::after,
#contacto::after,
.pie::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--marron);
  opacity: 0.055;
}

/* Sobre el pie el marron desaparece contra el marron: ahi se pinta con el
   arena y con menos alfa, porque un ornamento claro sobre fondo oscuro
   salta bastante mas que uno oscuro sobre fondo claro. */
.pie { position: relative; }
.pie::after { background: var(--arena); opacity: 0.045; }

#experiencia, #galeria, #lineup, #lugar,
#se-parte, #faq, #contacto { isolation: isolate; }

/* Grande, sobre la JUNTURA con la seccion de arriba y corrido a la
   izquierda del centro. Cruza el borde a proposito: la parte que sobresale
   cae sobre #mito, que tiene el mismo fondo arena, asi que el ornamento se
   ve entero y encadena las dos secciones en vez de quedar encerrado en
   una. Es lo contrario del caso del bloque oscuro, donde el cruce cortaba
   el dibujo porque cambiaba el color del fondo. */
#experiencia::after {
  top: clamp(-6rem, -5vw, -2rem);
  /* Del lado derecho. A la izquierda caia justo detras de "Experiencia
     Solara", que es el titulo mas grande de la seccion: el ornamento
     desaparecia contra el texto en vez de acompañarlo. A la derecha la
     franja esta vacia en los tres anchos. */
  right: clamp(6%, 14vw, 22%);
  width: clamp(150px, 20vw, 300px);
  aspect-ratio: 420 / 338;
  -webkit-mask: url("../assets/img/ornamentos/ojo-radiante.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/ojo-radiante.webp") no-repeat center / contain;
}

/* Chico. Es el unico que va abajo a la izquierda: si los cinco cayeran
   en la misma esquina se leerian como un patron, no como ornamento. */
#lineup::after {
  bottom: clamp(1rem, 3vw, 2.5rem);
  left: clamp(-1rem, 1vw, 1.5rem);
  width: clamp(84px, 10vw, 140px);
  aspect-ratio: 340 / 350;
  -webkit-mask: url("../assets/img/ornamentos/sol.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/sol.webp") no-repeat center / contain;
}

/* Mediano y apaisado: el condor abre las alas, asi que pide ancho. */
#lugar::after {
  top: clamp(1rem, 5vw, 4rem);
  left: clamp(-1.5rem, 2vw, 2.5rem);
  width: clamp(130px, 18vw, 260px);
  aspect-ratio: 460 / 243;
  -webkit-mask: url("../assets/img/ornamentos/condor.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/condor.webp") no-repeat center / contain;
}

/* El mas grande de todos, y vertical. */
#se-parte::after {
  top: 50%;
  translate: 0 -50%;
  right: clamp(-2.5rem, 1vw, 1.5rem);
  width: clamp(96px, 13vw, 190px);
  aspect-ratio: 300 / 624;
  -webkit-mask: url("../assets/img/ornamentos/tocado.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/tocado.webp") no-repeat center / contain;
}

/* Chico y geometrico, arriba a la izquierda. La galeria es la seccion mas
   cargada de imagen del sitio, asi que aca el ornamento es de los mas
   discretos: compite con 37 fotos. */
#galeria::after {
  top: clamp(0.5rem, 3vw, 2.5rem);
  left: clamp(-1rem, 1.5vw, 2rem);
  width: clamp(70px, 8vw, 120px);
  aspect-ratio: 210 / 269;
  -webkit-mask: url("../assets/img/ornamentos/rombo.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/rombo.webp") no-repeat center / contain;
}

/* Mediano, abajo a la derecha. */
#faq::after {
  bottom: clamp(1rem, 4vw, 3rem);
  right: clamp(-1rem, 2vw, 2.5rem);
  width: clamp(104px, 13vw, 180px);
  aspect-ratio: 1 / 1;
  -webkit-mask: url("../assets/img/ornamentos/espiral.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/espiral.webp") no-repeat center / contain;
}

/* ---------- Segundos ornamentos ----------
   Cuatro secciones son lo bastante altas como para sostener dos sin que se
   vean juntos. El segundo va SIEMPRE en la esquina opuesta al primero y
   mas chico: dos ornamentos del mismo porte a la misma altura leen como un
   patron repetido, uno grande y uno chico leen como composicion.

   Usan el pseudo que le queda libre a cada seccion: las que ya gastaron
   ::after toman ::before, y #como-acceder al reves. */
#experiencia::before,
#lineup::before,
#lugar::before,
#se-parte::before,
#como-acceder::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--marron);
  opacity: 0.05;
}
/* Sobre el bloque oscuro, el arena y con menos alfa. */
#como-acceder::after { background: var(--arena); opacity: 0.045; }

/* Las olas, sobre el margen izquierdo y bien arriba. El ojo radiante ya
   esta arriba a la derecha.

   Estaba abajo del todo, y abajo esta mal: esta seccion en telefono mide
   varias pantallas -las seis razones y los cinco actos se apilan- asi que
   el borde inferior cae en medio del texto del quinto acto.

   Ahora cae en la franja que queda LIBRE entre la grilla de razones y el
   titulo de los cinco actos. Es el unico hueco real de la seccion, y lo es
   en los tres anchos. Ademas, lo que quede detras de una tarjeta se
   esconde solo: las tarjetas pintan su propio fondo y el ornamento va en
   z-index negativo. */
#experiencia::before {
  top: 47%;
  left: clamp(-2rem, 3vw, 5rem);
  width: clamp(76px, 9vw, 132px);
  aspect-ratio: 190 / 184;
  -webkit-mask: url("../assets/img/ornamentos/olas.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/olas.webp") no-repeat center / contain;
}

/* La tablilla, arriba a la derecha. Toda la banda superior del line-up
   estaba vacia: el encabezado va centrado y a los costados no queda nada,
   asi que la seccion abre con un hueco. El sol del line-up esta abajo a la
   izquierda, o sea que esta cae en la esquina opuesta y equilibra. */
#lineup::before {
  top: clamp(1rem, 4vw, 3.5rem);
  right: clamp(-1.5rem, 2vw, 3rem);
  width: clamp(64px, 7.5vw, 118px);
  aspect-ratio: 200 / 381;
  -webkit-mask: url("../assets/img/ornamentos/tablilla.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/tablilla.webp") no-repeat center / contain;
}

/* La serpiente, arriba a la derecha, enfrentada al condor.

   Estaba abajo a la derecha y ahi no se veia: esa esquina la ocupa la foto
   aerea de la quebrada, que va a sangre y con esquinas redondeadas, asi
   que el ornamento quedaba mitad tapado por la foto y mitad asomando por
   el redondeo. Arriba, al costado del encabezado centrado, hay aire real y
   ademas queda simetrico con el condor del otro lado. Va mas grande, que
   es lo que esa franja admite. */
#lugar::before {
  top: clamp(1rem, 4vw, 3.5rem);
  right: clamp(-1rem, 3vw, 4rem);
  width: clamp(74px, 9vw, 138px);
  aspect-ratio: 150 / 339;
  -webkit-mask: url("../assets/img/ornamentos/serpiente.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/serpiente.webp") no-repeat center / contain;
}

/* El ojo, arriba a la izquierda: el tocado esta al centro de la derecha. */
#se-parte::before {
  top: clamp(0.5rem, 3vw, 2.5rem);
  left: clamp(-0.5rem, 2vw, 2.5rem);
  width: clamp(84px, 10vw, 150px);
  aspect-ratio: 200 / 124;
  -webkit-mask: url("../assets/img/ornamentos/ojo.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/ojo.webp") no-repeat center / contain;
}

/* La lluvia, abajo a la derecha: el isotipo esta arriba a la izquierda. */
#como-acceder::after {
  bottom: clamp(0.5rem, 3vw, 2.5rem);
  right: clamp(-1rem, 2vw, 3rem);
  width: clamp(56px, 6.5vw, 104px);
  aspect-ratio: 170 / 464;
  -webkit-mask: url("../assets/img/ornamentos/lluvia.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/lluvia.webp") no-repeat center / contain;
}

/* Alto y angosto, sobre el margen izquierdo. Es la flecha ceremonial: en la
   seccion donde alguien escribe para llegar a Solara, una flecha que sube.

   Va al DOBLE del tamano con el que se puso primero. A 92 px quedaba justo
   detras del kicker y del titular, sin aire alrededor, y a 0.055 de
   opacidad una forma chica y tapada no se lee como ornamento: se lee como
   suciedad. Ademas se corrio hacia arriba y hacia afuera, asi que ahora
   cruza el borde de la seccion en vez de esconderse debajo del texto. El
   archivo tambien se reexporto al doble: al ancho nuevo, el de 130 px se
   habria estirado y quedado blando. */
#contacto::after {
  /* Sobre la juntura, en los dos ejes: arriba cruza el borde con la
     seccion anterior, y a lo ancho cae en el canal que separa la columna
     de texto de la del formulario. Es el unico hueco de esta seccion donde
     no hay ni texto ni campos, asi que el ornamento respira sin taparle
     nada a nadie. Antes estaba contra el margen izquierdo, debajo del
     titular. */
  top: clamp(-4rem, -3vw, -1.5rem);
  left: 50%;
  /* Los 3cm van en centimetros y no convertidos a pixeles porque es
     exactamente lo que se pidio y asi queda dicho. En CSS un centimetro
     son 37,8 px de referencia, o sea que esto corre el ornamento 113 px a
     la izquierda del centro. */
  translate: calc(-50% - 3cm) 0;
  /* Al doble por segunda vez. El archivo se reexporto a 540 px de ancho
     para acompanar: al tamano nuevo, el de 270 se habria estirado. */
  width: clamp(208px, 24vw, 368px);
  aspect-ratio: 540 / 836;
  -webkit-mask: url("../assets/img/ornamentos/flecha-ceremonial.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/flecha-ceremonial.webp") no-repeat center / contain;
}

/* En el pie, contra el borde derecho. La llama es el unico ornamento
   figurativo del set y por eso va al final: cierra con algo que se
   reconoce, despues de siete signos abstractos. */
.pie::after {
  bottom: 0;
  right: clamp(-1rem, 2vw, 3rem);
  width: clamp(64px, 8vw, 116px);
  aspect-ratio: 180 / 356;
  -webkit-mask: url("../assets/img/ornamentos/llama.webp") no-repeat center / contain;
  mask: url("../assets/img/ornamentos/llama.webp") no-repeat center / contain;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--texto-sobre-oscuro);
  overflow: hidden;
}
/* El degradé del contenedor es el plan B, no decoración: mientras no
   haya foto de hero, el <img> no resuelve y sin esto se vería un ícono
   de imagen rota a pantalla completa. Cuando llegue la foto, queda
   igual debajo y no molesta. */
.hero__fondo {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, var(--marron-3), var(--marron), var(--acento));
}
/* El <picture> tiene que estirarse, no solo el <img>. Un `height:100%`
   sobre la imagen se mide contra su padre, y ese padre pasó a ser el
   <picture>, que sin altura propia colapsa al alto natural de la foto.
   Resultado medido antes de arreglarlo: 154 px de franja del degradé
   de respaldo asomando debajo del hero. */
.hero__fondo picture { display: block; width: 100%; height: 100%; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; }

/* VISIBLE DESDE EL PRIMER MOMENTO. Antes arrancaba en opacity:0 y solo
   aparecia al reproducir, para que no se viera un rectangulo negro
   mientras descargaba. Eso tenia sentido cuando detras habia una foto de
   respaldo; sin ella, lo que se veia mientras tanto era el degrade y
   nada mas, y si el video no arrancaba nunca -modo de bajo consumo en
   iPhone- se quedaba asi para siempre.

   Ahora el elemento lleva `poster`, que es un fotograma del propio video:
   no hay rectangulo negro que esconder. Lo que se ve mientras baja es el
   video quieto, y cuando arranca se pone en movimiento. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* `esta-activo` la sigue poniendo main.js cuando el video empieza a
   reproducir de verdad. Ya no cambia como se ve -el video se ve siempre-,
   pero es la unica senal fiable de que la reproduccion arranco, y de eso
   depende el respaldo de abajo. */

/* Dos capas: una pareja para legibilidad general y una que oscurece
   más abajo, donde caen los CTA. Con una sola, o el texto no se lee
   o la foto se pierde. */
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Bajado a pedido: el tope pasa de 0.72 a 0.50, y las otras dos paradas
     se escalan en la misma proporcion (x0.694) para no deformar la curva
     -si solo se bajara el tope, el degradado cambiaria de forma ademas de
     de intensidad-. Se ve mucho mas el metraje.

     El costo esta medido y esta abajo, en el comentario del bloque de
     marca: este velo es lo que sostiene el contraste del texto blanco
     encima del video. */
  background:
    linear-gradient(180deg, rgba(46, 33, 21, 0.17), rgba(46, 33, 21, 0.50)),
    radial-gradient(120% 80% at 50% 30%, transparent, rgba(46, 33, 21, 0.38));
}

.hero__lucias { position: absolute; inset: 0; pointer-events: none; }

/* El logo y el bloque de abajo van ANCLADOS POR SEPARADO, no separados
   por un margen entre los dos. Con un margen quedaban acoplados: bajar
   los botones subía el logo en el mismo movimiento, y no había forma de
   dejar el logo en el centro exacto y los botones abajo a la vez.

   El inner ocupa el alto completo; el bloque inferior se apoya en el
   fondo y el logo se centra por posición absoluta. */
.hero__inner {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(5rem, 12vh, 8rem);
}

/* El padding extra de telefono se saco junto con el CTA fijo: existia solo
   para abrirle al indicador de bajar un hueco que esa barra le comia. Sin
   la barra sobran 76 px y el indicador entra sin mover nada. */

/* La marca: isologotipo + su bajada, como una sola unidad centrada.

   El ancho lo da el contenido y no un valor fijo. La bajada mide 576 px
   sin cortar y el logo 380: con el contenedor clavado en 380 el texto se
   desbordaba, y en un teléfono de 375 px se iba de pantalla. El tope en
   `vw` lo obliga a partirse en dos renglones antes de que eso pase. */
.hero__marca {
  position: absolute;
  /* 44% y no 50%. El bloque de marca esta centrado en absoluto y el de
     botones anclado al pie, asi que en pantallas BAJAS -que son las de
     telefono real, no las de 800 px con las que se venia midiendo- los dos
     se acercan hasta chocarse. Medido antes de tocarlo: a 360x640 la marca
     terminaba 24 px por debajo de donde arranca el primer boton, a 370x665
     12 px, y a 414x736 la rozaba.

     Subirla tiene un segundo efecto pedido: la bajada queda mas arriba y
     el hero respira. Optico y no matematico, que es lo correcto para un
     bloque que no esta solo en su caja. */
  top: 44%;
  left: 50%;
  translate: -50% -50%;
  width: max-content;
  max-width: min(88vw, 640px);
}

/* Pintado desde la variable, no desde el archivo: el PNG es blanco y se
   usa solo como máscara. Cambiar el color de marca acá es una línea, y
   no hay que reexportar un asset. */
.hero__logo {
  width: min(62vw, 380px);
  margin-inline: auto;
  aspect-ratio: 2739 / 1042;   /* la proporción real del archivo */
  background: var(--arena-3);
  -webkit-mask: url("../assets/img/logo/isologotipo-blanco.webp") no-repeat center / contain;
  mask: url("../assets/img/logo/isologotipo-blanco.webp") no-repeat center / contain;
}

/* Resguardo del anclaje: la marca está fija al centro y el bloque de
   abajo al fondo, así que en una pantalla baja se acercan hasta
   chocarse. A 800 px de alto quedan 29 px de aire; calculado, a 600 px
   se superponen 13. Achicar la marca devuelve el margen sin mover a
   ninguna de las dos de su anclaje. */
@media (max-height: 720px) {
  .hero__logo { width: min(46vw, 260px); }
}

/* Bajada del isologotipo: va pegada abajo para que se lean como una sola
   pieza y no como dos elementos que coincidieron en el centro.

   VA EN --arena-3, el mismo beige que el isologotipo, por decision del
   cliente: los dos tienen que verse del mismo color.

   Queda escrito lo que eso cuesta, porque se midio. A 1280x800, sobre
   ocho frames de los 15,1 s del video, peor pixel bajo la caja del
   parrafo:

     arena-3 (el que esta) ...... 3.01     arena ....... 4.09
     arena-2 .................... 3.64     blanco ...... 4.77

   AA pide 4.5 para texto de este tamano, asi que esta linea NO lo cumple.
   Es el unico texto del hero en esa situacion: los otros tres pasan
   holgados, con 5.92 el peor. Cae justo donde el velo del video todavia
   es claro y ademas usa el mas oscuro de los tres arenas.

   Se probo primero al reves —subir la bajada a blanco y despues el
   isologotipo tambien— y el cliente pidio explicitamente el beige en los
   dos. Es una decision suya, tomada con el numero a la vista.

   Si alguna vez se quiere recuperar el contraste SIN cambiar el color,
   la salida es oscurecer un poco el velo detras del bloque de la marca,
   no de toda la foto. Sobre la foto fija -reduced-motion y saveData- el
   beige ya mide 4.45, o sea que ahi casi pasa: el problema es el video. */
.hero__sub {
  font-size: var(--fs-chico);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--arena-3);
  margin: 0.75rem 0 0;
}

/* A 320 px -el piso que WCAG pide soportar, y el iPhone SE- esta bajada
   pasaba de dos renglones a TRES. El bloque de marca esta centrado en
   absoluto, asi que al crecer se estira hacia abajo e invade el bloque de
   los CTA, que esta anclado al pie: medido, la bajada terminaba en 478 y
   el primer boton arrancaba en 474. Cuatro pixeles de texto encima de un
   boton.

   Se aprieta el tracking y se achica un punto el logo, que juntos
   devuelven la bajada a dos renglones. No se toca el tamano del texto: a
   0,75rem ya esta cerca del piso legible y bajarlo mas seria cambiar un
   problema de layout por uno de lectura. */
@media (max-width: 344px) {
  .hero__sub { letter-spacing: 0.1em; }
  .hero__logo { width: min(56vw, 300px); }
}

/* El CTA del hero, translucido al 70%: se ve la portada por detras. Solo
   el del hero —el de la nav y el fijo de mobile se quedan opacos, porque
   flotan sobre contenido que cambia mientras se scrollea y ahi no hay
   forma de garantizar que se lean. */
.hero__ctas .btn--primario { background: var(--cta-bg-velado); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-block: clamp(1.5rem, 4vw, 2.25rem);
}

.hero__firma {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--arena-2);
}

/* El indicador de bajar, con su gota animada.

   Su posicion costo cuatro intentos, y los tres primeros existieron solo
   para esquivar el CTA fijo del pie: estuvo debajo de esa barra, despues
   encima de la firma, despues oculto en telefono por falta de lugar.
   Ahora esa barra no existe y el indicador vuelve a su sitio natural, el
   mismo en todos los anchos. */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 1.5px solid currentColor;
  border-radius: 13px;
  opacity: 0.6;
}
/* En escritorio no hay barra fija, asi que el limite es el borde de la
   pantalla. Baja de 2rem a 0.75rem: 20 px mas abajo, que es lo que queda
   sin que el indicador toque el canto. */
/* Ya no hace falta una regla aparte para escritorio: sin el CTA fijo, el
   indicador esta a 2rem del borde en todos los anchos. */
.hero__scroll span {
  position: absolute;
  top: 8px;
  left: 50%;
  translate: -50% 0;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}

/* =========================================================
   STATS
   ========================================================= */
.stats { background: var(--velo); border-block: 1px solid var(--borde); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  text-align: center;
  padding-block: clamp(2rem, 5vw, 3rem);
}

/* Son CINCO cifras, así que en dos columnas la última queda sola en la
   fila. En vez de dejarla arrinconada a la izquierda, ocupa el ancho
   completo y se centra. Es la única solución que no pide ni sacar una
   cifra ni inventar una sexta. */
.stats__grid .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat strong {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: var(--acento);
}
.stat span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-chico);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--texto-suave);
}

/* =========================================================
   MEDIA DE LAS SECCIONES A DOS COLUMNAS
   ========================================================= */
.dos-col__media img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
}

/* La foto de "Qué es Solara" al 81% del ancho de su columna. Son dos
   reducciones del 10% encadenadas: 90% × 90% = 81%, no 80%. Restar diez
   puntos dos veces daría 80 y el segundo recorte saldría un 1% pasado.
   Ancho y alto bajan juntos porque la proporción se mantiene sola, y va
   centrada para que lo que se recorta salga por los dos lados.

   SOLO DE 768 PARA ARRIBA. Ahí la sección es de dos columnas y achicar la
   foto le da aire contra el texto de al lado. En teléfono la sección se
   apila: la foto queda arriba y el texto abajo, los dos a lo ancho del
   contenedor, y una foto al 81% se lee como desalineada respecto del
   párrafo que le sigue. Ahí va al ancho completo, que es el mismo margen
   que tiene el texto. */
@media (min-width: 768px) {
  #mito .dos-col__media img {
    max-width: 81%;
    margin-inline: auto;
  }
}

/* NO estirar la imagen para igualar la altura del texto. Se probó y se
   descartó: en una columna de 576 px, llegar a los 530 de alto del texto
   deja la foto casi cuadrada (ratio 1,09) cuando el archivo es 1,62.
   `cover` recorta los costados y la aérea pierde el panorama, que es
   justo lo que la hace valer. Preferible el aire debajo que un recorte
   que arruina la toma. */

.firma, .cita {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--texto-suave);
}
.seccion--oscura .cita { color: var(--arena-2); }

/* =========================================================
   CARDS: RAZONES, PASOS, VÍAS
   Se diferencian con tinte de fondo y sombra, nunca con una barra
   de acento arriba: eso es lo que las hace ver genéricas.
   ========================================================= */
/* .galeria-grid ya no esta en esta lista: la galeria dejo de ser una
   grilla y paso a ser el carrusel del final del archivo. */
.razones, .pasos, .vias, .testimonios {
  display: grid;
  gap: var(--gap);
}

.razon, .paso, .via {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Relleno minimo: la tarjeta abraza la captura en vez de enmarcarla. */
.paso { padding: clamp(0.5rem, 0.8vw, 0.7rem); }

/* Todo el bloque de los pasos, un 10% mas chico: la captura, el numero,
   el titulo y la bajada. Se bajan TODOS y en la misma proporcion; tocar
   solo la imagen dejaria el texto sobredimensionado al lado. */
#como-acceder .paso__num { font-size: 0.9rem; }
#como-acceder .paso h3 { font-size: clamp(1.08rem, 1.8vw, 1.44rem); }
#como-acceder .paso p { font-size: 0.9rem; }

/* Sube el bloque de los cuatro pasos: se recorta el hueco entre la
   cabecera y la grilla, que era lo unico que los mantenia abajo. No se
   toca ni el tamano de las capturas ni el titulo. */
#como-acceder .seccion__head { margin-bottom: 1.5rem; }

/* La SUPERFICIE de tarjeta. Vivia arriba, junto al padding compartido de
   .razon, .paso y .via. Cuando las seis razones se compactaron a una linea
   ese bloque se partio en dos y el borde, el radio y el fondo quedaron
   colgando solo de .razon: las tres tarjetas de "Se parte" se quedaron sin
   superficie y elevaban al hover una caja que no se veia. Va en su propia
   regla para que un cambio de padding no se la vuelva a llevar puesta.

   .paso queda afuera a proposito: abraza una captura en vez de enmarcarla.
   La transicion si la comparte: es lo unico que anima su hover. */
.razon, .via {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--velo);
  box-shadow: var(--sombra-sm);
}

/* Esta linea estuvo un rato sin efecto y vale la pena dejarlo escrito:
   `.js .reveal` de animations.css declara su propia transition con
   especificidad 0,2,0 y le ganaba a esta lista de clases (0,1,0). Como
   main.js dejaba la clase .reveal puesta para siempre, el hover se movia
   con los 600 ms del reveal y la sombra no se animaba nunca, porque
   box-shadow ni figura entre sus propiedades. Se arreglo del lado del JS
   —el reveal es de una sola vez y ahora suelta la clase al terminar—, no
   subiendole la especificidad a esta regla. */
.razon, .paso, .via {
  transition: transform var(--t-media), box-shadow var(--t-media);
}

/* Escala de elevacion en reposo. --sombra-sm estaba declarada en tokens y
   no la usaba nadie: todo era plano y saltaba a --sombra-md recien al
   pasar el mouse, un estado que en tactil no existe. Con el degrade de
   fondo continuo, sin sombra las tarjetas no se despegan de la pagina.
   Dentro de .seccion--oscura y del pie, --sombra-sm ya esta remapeada a
   la version oscura, asi que esta misma linea sirve en los dos contextos. */
/* .mapa salio de la lista: el iframe de Google se elimino y su sombra la
   hereda ahora la foto aerea, declarada junto a .quebrada. */
.fecha, .galeria__item { box-shadow: var(--sombra-sm); }

/* Las seis razones en UNA linea. En dos filas de tres ocupaban media
   pantalla de alto para decir seis frases cortas: mucho scroll para poca
   informacion. En una sola fila cada tarjeta mide ~180 px, asi que todo
   adentro se achica —icono, titulo y bajada— o no entra. */
.razon {
  padding: clamp(0.9rem, 1.6vw, 1.15rem);
}
@media (hover: hover) and (pointer: fine) {
  .razon:hover, .paso:hover, .via:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-md);
  }
}

.razon h3 { font-size: 0.98rem; line-height: 1.25; margin-bottom: 0.4rem; }
.razon p  { font-size: 0.82rem; line-height: 1.45; }
.razon[data-icono]::before { width: 30px; height: 30px; margin-bottom: 0.6rem; }

/* Separación entre las dos mitades de la sección, y el título de los
   actos un escalón por debajo del de la sección. Con la clase `.titulo`
   medía los mismos 48 px que "Experiencia Solara" y competían: dos
   títulos del mismo tamaño en un bloque leen como dos secciones, que es
   justo lo que se acaba de fusionar. */
/* Compactada: ahora es una sola sección con dos bloques, así que el aire
   de adentro compite con el que la separa de las vecinas. Se recortan
   los tres huecos que la estiraban —el relleno de la sección, el
   respiro antes de los actos y el que deja cada cabecera— para que
   entre entera de una lectura. */
#experiencia { padding-block: clamp(2rem, 4vw, 3.25rem); }
#experiencia .seccion__head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
#experiencia .greca::after { margin-top: 0.75rem; }
#experiencia .bajada { margin-bottom: 0; }

.actos__intro { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.acto p { margin-bottom: 0; }
.subtitulo {
  font-family: var(--ff-titulo);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
}

.razon__num, .paso__num {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--acento);
  margin-bottom: 0.75rem;
}

.razon p, .paso p, .via p { color: var(--texto-suave); margin-bottom: 0; }

/* Las capturas de la app, una por paso. Van con la proporcion real del
   telefono (9:16) y un tope de alto: sin el, cuatro capturas verticales
   a lo ancho de la columna estiraban la seccion casi mil pixeles para
   mostrar cuatro pantallas. El tope las achica antes de que eso pase. */
.paso__foto {
  display: block;
  margin-bottom: 0.75rem;
}
.paso__foto img {
  /* El ALTO manda y el ancho sale solo. Con `width:100%` mas un
     aspect-ratio 9:16 recortado por max-height, `contain` dejaba franjas
     vacias a los costados de cada captura: la caja medía 220x340 y la
     imagen 191x340. Fijando el alto no hay caja sobrante que rellenar. */
  /* Manda el ANCHO de la tarjeta, con tope de alto. Con el alto fijo la
     captura quedaba mas angosta que su tarjeta y flotaba en el medio:
     92 px de aire entre una y la siguiente. Ocupando el ancho, lo unico
     que las separa es el relleno y el hueco de la grilla. */
  /* La captura entra en su caja SIN deformarse. Se llego aca despues de
     tres intentos que la aplastaban, y el ultimo enganaba: decia "manda
     el alto y nada mas" con `height` fijo, `width:auto` y `max-width:100%`.
     El max-width es la segunda dimension. Mientras sobra lugar no hace
     nada, pero apenas la tarjeta se angosta le recorta el ancho y el alto
     sigue clavado: Lighthouse midio 189x360 (0,525) contra 0,562 del
     archivo, las cuatro capturas un 6,6% angostas.

     Con las dos medidas en `auto` y las dos como TOPE, el navegador
     escala la imagen hasta que entre en los dos limites conservando su
     proporcion, que es el comportamiento normal de un elemento
     reemplazado. Ninguna dimension queda fijada, asi que no hay forma de
     que una obligue a la otra. */
  height: auto;
  width: auto;
  max-height: clamp(216px, 42.3vh, 360px);   /* -10% */
  max-width: 100%;
  /* Redondeo de pantalla de telefono. Va en px y no en el token de
     radio: el token es del sistema de tarjetas y si algun dia cambia,
     estas capturas dejarian de parecer un celular. */
  border-radius: 20px;
  margin-inline: auto;
}
/* ---------- Los cuatro pasos, en telefono: carrusel ----------
   Apilados a ancho completo, las cuatro capturas estiraban la seccion casi
   cuatro pantallas: quien llega desde el telefono tenia que scrollear todo
   eso para pasar de largo un contenido que se entiende de un vistazo. Aca
   se agrupan en una tira horizontal y se achican.

   Mismo mecanismo que la galeria y por el mismo motivo: scroll-snap
   nativo, cero JavaScript. La grilla ya existe, asi que alcanza con
   cambiarle el flujo a columna y darle desborde.

   El ancho de 68% no es estetico: es la senal de que hay mas. Con las
   tarjetas al 100% no se ve que siga nada al costado y el carrusel pasa
   desapercibido; con la siguiente asomando, se entiende sin explicarlo.

   Solo por debajo de 768: desde ahi la grilla de tres y cuatro columnas
   ya las muestra todas juntas y un carrusel seria de mas. */
@media (max-width: 767px) {
  .pasos {
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    overflow-x: auto;
    /* Sin esto, llegar al final de la tira sigue de largo y en Android
       dispara el recargar-tirando de la pagina de atras. */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* El anillo de foco se dibuja 8 px por fuera del elemento. Sin este
       aire, el propio scroller se lo recorta a las tarjetas de las puntas. */
    padding-block: 8px;
    /* La barra de scroll se oculta: la senal de que hay mas la da la
       tarjeta que asoma, igual que en el carrusel de la galeria. */
    scrollbar-width: none;
  }
  .pasos::-webkit-scrollbar { display: none; }

  .paso { scroll-snap-align: start; }

  /* Las flechas van centradas de verdad. El `top: calc(50% - 1.5rem)` de
     .carrusel__flecha descuenta la fila de puntos que tiene la galeria y
     que este carrusel no tiene, asi que sin esto quedarian 24 px altas. */
  .carrusel--pasos .carrusel__flecha { top: 50%; }

  /* Las capturas bajan de tope: adentro de una tarjeta al 68% del ancho
     manda el ancho, no el alto, asi que el tope viejo de 360 px no se
     alcanzaba nunca y sobraba alto vacio en la tarjeta. */
  .paso__foto img { max-height: clamp(180px, 34vh, 260px); }
}

/* Los tres botones, a la misma altura. El grid ya estiraba las tarjetas a
   309 px iguales, pero adentro cada una apilaba su contenido desde arriba,
   asi que el boton caia donde terminara el texto: "Generadoras de
   contenido" envuelve a dos renglones y el suyo quedaba 56 px mas abajo
   que el de "Prensa". Tres pildoras escalonadas en una fila leen como un
   error de maquetado, no como un ritmo.

   Con la tarjeta en columna flexible, margin-top:auto se come el sobrante
   y lo empuja al piso. El margin-bottom del parrafo garantiza la
   separacion minima cuando no sobra nada, y align-self evita que el boton
   se estire de lado a lado: son pildoras que abrazan su texto. */
.via { display: flex; flex-direction: column; }
.via p { margin-bottom: 1rem; }
.via .btn { margin-top: auto; align-self: start; }

/* ---------- Los iconos ancestrales ----------
   Los 20 del deck (p. 6), extraídos del PDF —era el único lugar donde
   existían— como máscaras con alfa. Van como mask y no como <img> por
   dos motivos: el color sale de una variable, y el icono no se anuncia
   a un lector de pantalla, que es lo correcto para un ornamento que no
   agrega información al título que tiene al lado.

   La URL va en CSS y no en un style inline sobre cada card: el
   trinquete cuenta estilos inline, y esquivarlo desde otro archivo
   sería el mismo agujero por la puerta de atrás. */
.razon[data-icono]::before,
.via[data-icono]::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  background: var(--acento);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

[data-icono="ondas"]::before       { mask-image: url("../assets/img/iconos/ondas.png");       -webkit-mask-image: url("../assets/img/iconos/ondas.png"); }
[data-icono="condor"]::before      { mask-image: url("../assets/img/iconos/condor.png");      -webkit-mask-image: url("../assets/img/iconos/condor.png"); }
[data-icono="diosa"]::before       { mask-image: url("../assets/img/iconos/diosa.png");       -webkit-mask-image: url("../assets/img/iconos/diosa.png"); }
[data-icono="ofrenda"]::before     { mask-image: url("../assets/img/iconos/ofrenda.png");     -webkit-mask-image: url("../assets/img/iconos/ofrenda.png"); }
[data-icono="chaman"]::before      { mask-image: url("../assets/img/iconos/chaman.png");      -webkit-mask-image: url("../assets/img/iconos/chaman.png"); }
[data-icono="sol"]::before         { mask-image: url("../assets/img/iconos/sol.png");         -webkit-mask-image: url("../assets/img/iconos/sol.png"); }
[data-icono="ojo"]::before         { mask-image: url("../assets/img/iconos/ojo.png");         -webkit-mask-image: url("../assets/img/iconos/ojo.png"); }
[data-icono="rombo"]::before       { mask-image: url("../assets/img/iconos/rombo.png");       -webkit-mask-image: url("../assets/img/iconos/rombo.png"); }
[data-icono="ojo-radiante"]::before{ mask-image: url("../assets/img/iconos/ojo-radiante.png");-webkit-mask-image: url("../assets/img/iconos/ojo-radiante.png"); }

/* Con icono, el número ordinal pasa a ser una marca chica arriba a la
   derecha: dos elementos grandes compitiendo arriba de cada card es
   ruido.

   Se lo bajaba de tono con opacity —0.65 en la regla base y 0.4 aca
   encima— y eso lo dejaba en 1.89 de contraste medido, contra los 4.5 que
   pide AA para texto chico. La opacity es la trampa: --acento esta medido
   y documentado en 6.19, y despues una regla de estilo se lo deshace en
   silencio, sin que ningun color literal cambie en ningun lado, asi que
   revisar tokens.css no lo encuentra nunca.

   Para que una marca sea discreta se la hace CHICA, no ilegible: va a
   0.8rem —el tamano que ya pedia una regla duplicada mas arriba, muerta
   porque esta misma la pisaba— y en el acento a full. Medido despues:
   6.95 / 6.76 / 6.48 en los tres pasos del degrade de fondo. */
.razon[data-icono] { position: relative; }
.razon[data-icono] .razon__num {
  position: absolute;
  top: clamp(1.25rem, 3vw, 1.75rem);
  right: clamp(1.25rem, 3vw, 1.75rem);
  font-size: 0.8rem;
  margin: 0;
}

/* =========================================================
   LOS CINCO ACTOS
   Numeral romano grande y línea de tiempo. En desktop se leen de
   izquierda a derecha; en mobile bajan, que es como se lee un viaje.
   ========================================================= */
.actos { display: grid; gap: var(--gap); counter-reset: acto; }

/* Sin `border-top`. Cinco reglas horizontales alineadas leen como los
   bordes de una tabla, no como una secuencia: separan los actos cuando
   lo que hay que mostrar es que van encadenados. El numeral romano ya
   marca dónde empieza cada uno. */
/* Centrado. Alineado a la izquierda, los cinco actos quedaban como cinco
   columnas de tabla: el ojo bajaba por el borde izquierdo en vez de leer
   la secuencia. Centrar cada acto los vuelve cinco piezas iguales, y el
   numeral romano queda arriba de su propio texto en vez de flotando en un
   costado. */
.acto {
  position: relative;
  padding-top: 1.5rem;
  text-align: center;
}
.acto__num {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--acento);
  margin-bottom: 0.5rem;
}
.acto h3 { margin-bottom: 0.35rem; }
.acto p { color: var(--texto-suave); font-size: var(--fs-chico); }

/* =========================================================
   EL RITUAL — el único bloque oscuro de la página
   ========================================================= */
.ritual { overflow: hidden; }
.lista-rito { margin-block: 1.25rem; }
.lista-rito li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--arena-2);
}
.lista-rito li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
}

/* =========================================================
   LINE-UP
   ========================================================= */
/* La grilla del line-up agrupa por temporada; las tarjetas viven un
   nivel mas adentro. */
.lineup-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.temporada__head { margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }
.temporada__nota { font-size: var(--fs-chico); color: var(--texto-suave); margin-bottom: 0; }
.temporada__grid { display: grid; gap: var(--gap); }

.fecha {
  position: relative;
  padding: clamp(0.9rem, 1.6vw, 1.15rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--velo);
  transition: transform var(--t-media), box-shadow var(--t-media);
}
@media (hover: hover) and (pointer: fine) {
  .fecha:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
}

/* La tarjeta con carpeta de fotos es un enlace. `display:block` y el
   color heredado para que no se vea como un link de texto suelto. */
.fecha--con-fotos {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* ---------- Tarjeta con foto de fondo ----------
   La tarjeta pasa de 290x85 a 3:2. Con 85 px de alto, una foto vertical
   recortada con `cover` quedaba en una tira donde no se reconocia nada. */
.fecha--con-foto {
  position: relative;
  /* 1,7 y no 3:2. Es el ratio EXACTO del recorte, asi `cover` no tiene
     nada que recortar y la foto se ve entera tal como se encuadro. */
  aspect-ratio: 1.7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-color: transparent;
  background: var(--marron-3);
}
.fecha__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* El velo NO es decoracion: sin el, el texto claro cae sobre una foto
   que cambia de brillo y no hay forma de garantizar contraste. Va en
   degradé y no parejo para que la parte de arriba de la imagen se vea. */
.fecha--con-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Tres paradas. La del medio va en 38% porque el texto de la tarjeta
     arranca al 44% en desktop: cuando el texto empieza, el velo ya subio.
     Con dos paradas la unica forma de cubrir esa zona era subir el velo
     entero y apagar la foto de arriba. Detalle medido en tokens.css. */
  background: linear-gradient(180deg,
    var(--sombra-foto-0) 0%,
    var(--sombra-foto-m) 38%,
    var(--sombra-foto-1) 100%);
}
.fecha--con-foto .fecha__num,
.fecha--con-foto .fecha__artista,
.fecha--con-foto .fecha__dia,
.fecha--con-foto .fecha__ver { position: relative; z-index: 1; }
.fecha--con-foto .fecha__artista { color: var(--blanco); }
.fecha--con-foto .fecha__dia { color: var(--arena-3); }
.fecha--con-foto .fecha__num { color: var(--arena-3); opacity: 0.7; }
.fecha--con-foto .fecha__ver { color: var(--arena); }

.fecha__ver {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--acento);
}
/* El "Ver fotos" va SIEMPRE subrayado: es un afordance de enlace dentro de
   una tarjeta que entera es clickeable, y sin el subrayado no se distingue
   de una etiqueta.

   Aca vivia ademas una regla de hover -`.fecha--con-fotos:hover
   .fecha__ver { text-decoration: underline }`- que no hacia nada: la linea
   de abajo ya subraya incondicionalmente, asi que el hover no podia
   agregar ningun cambio. Venia de un arreglo anterior: el selector habia
   quedado sin llave delante de un comentario y el navegador lo leia como
   un descendente imposible; al repararlo se repuso la regla sin notar que
   para entonces ya sobraba. El enfasis al hover se repone en la Capa 5,
   donde el subrayado se acerca en vez de aparecer. */
.fecha__ver { text-decoration: underline; }

.fecha__num {
  position: absolute;
  top: clamp(0.9rem, 1.6vw, 1.15rem);
  right: clamp(0.9rem, 1.6vw, 1.15rem);
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--acento);
  opacity: 0.4;
}
.fecha__artista {
  font-size: 0.98rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
  padding-right: 2rem;   /* deja lugar al numero */
}
.fecha__dia {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--texto-suave);
  margin-bottom: 0;
}

/* Antes las fechas pasadas iban al 45% de opacidad. Se saco: con las
   ocho de la temporada 25/26 ya cumplidas, TODA la grilla quedaba
   atenuada y la seccion parecia rota. Ahora no se apaga lo viejo, se
   destaca lo proximo. */
.fecha--proxima { border-color: var(--acento); }
/* =========================================================
   EL LUGAR
   La seccion existe para una sola cosa: que alguien llegue.

   Antes era "texto | mapa" en dos columnas de altura desigual —medido:
   246 px contra 434, o sea 188 px de hueco muerto— y el hueco CRECIA con
   la pantalla, porque el alto del mapa salia de dividir el ancho de su
   columna por 4/3. Ese problema no se compenso: dejo de existir cuando
   dejaron de ser dos columnas.

   Ahora la foto aerea y los datos son UNA pieza: la vista de la quebrada
   con la informacion encima. No una imagen y abajo un bloque de texto que
   podria ser de cualquier lado.
   ========================================================= */
.lugar-vista { position: relative; }

.quebrada { margin: 0; }
.quebrada picture { display: block; }
.quebrada img {
  display: block;
  width: 100%;
  /* En pantalla angosta la foto se RECORTA, no se achica. Es 16:9: a 358
     px de ancho quedaba en 201 de alto, una tira fina, y esta foto es
     ahora el elemento principal de la seccion. Con 4/3 sube a 269 y
     vuelve a leerse como una vista. El recorte va centrado y se come los
     bordes laterales, que es donde la imagen tiene mas ladera repetida;
     el valle y las curvas del camino caen en el centro. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
}
.quebrada__pie {
  margin: 0.9rem 0 0;
  font-size: var(--fs-chico);
  color: var(--texto-suave);
  text-align: center;
}

/* ---------- La chapa con los datos ----------
   Va OPACA y no como degrade sobre la foto. Un degrade deja el contraste
   a merced de lo que caiga debajo en cada pixel, y aca abajo hay desde
   monte en sombra hasta cielo casi blanco: no se puede medir ni
   garantizar. Con una superficie opaca el contraste es el mismo que en
   cualquier otra parte del sitio y se verifica una sola vez.

   En mobile NO se superpone: la foto mide ahi unos 270 px de alto y una
   chapa encima la taparia entera. Va abajo, apilada, que es lo unico
   sensato en esa pantalla. */
.llegar {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
/* Sin reglas para direccion, titulos de grupo, tiempos ni enlace alterno:
   esos elementos se eliminaron de la seccion por decision del cliente, y
   dejar su CSS seria exactamente el tipo de regla muerta que este archivo
   ya acumulo dos veces. */

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto-datos { margin-block: 1.5rem; }
.contacto-datos li {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--borde);
}

/* Los enlaces de contacto -"Abrir chat", el arroba de Instagram y el mail-
   median 20 px de alto, por debajo de los 24x24 que pide SC 2.5.8. Medido
   en los 14 anchos, de 320 a 1920: fallaban en todos.

   Se resuelve con alto minimo y centrado vertical, no con padding: el
   padding correria el subrayado y separaria el texto de su etiqueta. Asi
   la caja tactil crece y el renglon se ve igual. */
.contacto-datos a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.contacto-datos span {
  display: block;
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--texto-suave);
}
.contacto-datos p { margin-bottom: 0; }

/* =========================================================
   PIE — la noche, después del atardecer
   ========================================================= */
.pie {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--bg-oscuro);
  color: var(--texto-sobre-oscuro);
}
/* El cierre va CENTRADO y en una sola columna, de arriba abajo: marca,
   menú, redes, y al final la letra chica separada por una línea.

   Antes era una grilla de `auto 1fr` en la que los cuatro bloques caían
   donde entraran: la marca arriba a la izquierda, el menú arriba a la
   derecha, las redes abajo a la izquierda y la letra chica al lado de las
   redes, en una columna que no compartía con nadie. Cuatro bloques, cuatro
   alineaciones distintas y ningún eje en común. Un pie es lo último que se
   ve: si está desprolijo, es la impresión con la que uno se va. */
.pie__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  /* El hueco se cerro al sacar el menu del pie: con tres bloques en vez de
     cuatro, el mismo espaciado dejaba el cierre desparramado. */
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

/* El isologotipo, del mismo alto que en la barra de arriba (46 px) para
   que el sitio abra y cierre con la marca al mismo tamaño. Mismo
   mecanismo: máscara pintada desde la variable, no un archivo con el
   color adentro. */
.pie__logo {
  display: block;
  height: 46px;
  aspect-ratio: 2739 / 1042;
  background: var(--arena-3);
  -webkit-mask: url("../assets/img/logo/isologotipo-blanco.webp") no-repeat center / contain;
  mask: url("../assets/img/logo/isologotipo-blanco.webp") no-repeat center / contain;
  margin-inline: auto;
}

/* Se borraron .pie__claim, .pie__links y .pie__redes junto con los bloques
   que estilaban: el claim, el menu del pie y la fila de redes salieron del
   HTML, asi que estas reglas ya no las usaba nadie. Dejarlas puestas es la
   forma mas comun de que una hoja de estilos engorde sin que se note. */

/* La letra chica se separa con una línea y no con más aire: el aire solo
   la aleja, la línea dice que es otra cosa. El ancho tope evita que a
   1440 px los dos renglones queden nadando de punta a punta. */
.pie__legal {
  font-size: var(--fs-chico);
  color: var(--arena-3);
  border-top: 1px solid var(--borde-oscuro);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  width: min(100%, 640px);
}
.pie__legal p { margin-bottom: 0.25rem; }
.pie__legal p:last-child { margin-bottom: 0; }

/* El pie ya no necesita despeje abajo: el CTA sticky que tapaba su final
   en mobile se elimino. */

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (min-width: 768px) {
  /* Cinco columnas: las cinco cifras en una sola línea. Y se anula el
     span de la última, que solo hace falta cuando hay dos columnas. */
  .stats__grid   { grid-template-columns: repeat(5, 1fr); }
  .stats__grid .stat:last-child:nth-child(odd) { grid-column: auto; }
  .razones       { grid-template-columns: repeat(3, 1fr); }
  .pasos, .vias  { grid-template-columns: repeat(3, 1fr); }
  /* Se limita el ANCHO de la grilla, no el gap. Las capturas miden
     190 px dentro de tarjetas de 293: el hueco real estaba adentro de
     cada tarjeta, asi que cerrar el gap las movia 13 px y las capturas
     seguian a 109 de distancia. Con la grilla angosta, la tarjeta
     abraza la captura. */
  .pasos         { gap: clamp(0.4rem, 1vw, 0.8rem); max-width: 880px; margin-inline: auto; }
  .temporada__grid { grid-template-columns: repeat(4, 1fr); }
  .tiempos       { grid-template-columns: repeat(2, 1fr); }
  /* El pie ya NO se abre en dos columnas de 768 para arriba. Esa regla
     -`auto 1fr`- era la que dejaba la marca a la izquierda y el menu a la
     derecha, con las redes y la letra chica cayendo despues donde
     entraran: cuatro bloques con cuatro alineaciones distintas. Ahora es
     una sola columna centrada en todos los anchos. */
  .lead__form    { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .lead__form .consentimiento,
  .lead__form button,
  .lead__form .form__estado { grid-column: 1 / -1; }
}

/* La chapa de datos se sube ENCIMA de la foto y se apoya en el borde
   izquierdo. Ese lado tiene monte en sombra: no se lleva puesto ni el rio
   ni las curvas del camino, que son lo que hay que ver.

   El corte va en 900 y no en 768 porque depende del ALTO que tenga la
   foto, no del ancho de la pantalla. Es 16:9: a 900 px de ancho mide 506
   de alto y la chapa entra con aire. Abajo de eso la foto se achica mas
   rapido que el texto que tiene que contener, y la taparia entera. */
@media (min-width: 900px) {
  /* Con lugar de sobra la foto vuelve a su proporcion real: no se recorta
     nada y se ve la quebrada entera, que es de lo que se trata. */
  .quebrada img { aspect-ratio: auto; height: auto; }

  /* El boton se apoya sobre la foto, centrado y abajo. Cuando aca vivia
     una banda con direccion, tiempos y enlaces hacia falta un velo para
     que el texto se leyera sobre la imagen; con un solo boton no, porque
     el boton trae su propio fondo opaco (--cta-bg) y su contraste ya esta
     medido y documentado en tokens.css: 4,53 con blanco encima. No hay un
     solo pixel de texto apoyado sobre la foto.

     Va CENTRADO en la imagen, en los dos ejes. Ocupa el 1,6% del area, asi
     que tapar el centro cuesta poco y a cambio queda donde la vista lleva
     el ojo. */
  .llegar {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: auto;
    margin-top: 0;
    justify-items: center;
  }
}


@media (min-width: 1024px) {
  .razones      { grid-template-columns: repeat(6, 1fr); gap: clamp(0.6rem, 1vw, 1rem); }
  .pasos        { grid-template-columns: repeat(4, 1fr); }
  .actos        { grid-template-columns: repeat(5, 1fr); }
  .temporada__grid { grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1vw, 1rem); }
  .contacto-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .contacto-form .campo--ancho,
  .contacto-form button,
  .contacto-form .form__estado { grid-column: 1 / -1; }
}

/* =========================================================
   CARRUSEL DE LA GALERÍA
   Mismo formato que el de Naples —tira horizontal, flechas y puntos,
   avanzando de a una pantalla— pero sin su implementación: allá es
   Swiper desde un CDN, o sea una hoja de estilos y un bundle de
   terceros. Acá el desplazamiento lo hace el navegador con scroll-snap
   y el JS solo mueve el scroll y pinta el punto activo.

   Consecuencia buena de esa elección: sin JavaScript el carrusel NO se
   rompe. Queda una tira que se arrastra con el dedo o con la rueda, que
   es exactamente lo que hace un carrusel. Lo único que se pierde son
   las flechas y los puntos, y por eso los crea el JS: si no está, no
   aparecen controles muertos.
   ========================================================= */
.carrusel { position: relative; }

.carrusel__pista {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* El scrollbar se oculta porque la barra ya la dan las flechas y los
     puntos. La pista sigue siendo scrolleable con dedo, rueda y teclado. */
  scrollbar-width: none;
  /* Aire para que la sombra en reposo de cada foto no quede recortada
     contra el borde de la pista. */
  padding-block: 6px;
}
.carrusel__pista::-webkit-scrollbar { display: none; }

/* ---------- Arrastre con el mouse ----------
   La mano abierta gana sobre la lupa de la foto. Las dos cosas son
   ciertas —se puede arrastrar la tira y se puede abrir una foto— pero
   solo una necesita anunciarse: que la foto se agranda al hacerle clic
   lo prueba cualquiera sin que se lo digan, y que la tira se arrastra
   con el mouse, no. Es el mismo cursor que usa el carrusel de Naples.

   ACA ESTABA `touch-action: pan-y` Y ROMPIA EL CARRUSEL EN TELEFONO.

   La intencion era buena -que arrastrar sobre la galeria no secuestre el
   scroll vertical de la pagina- pero `pan-y` no dice "ademas permiti el
   vertical": dice "SOLO el vertical". Con eso el navegador tiene prohibido
   desplazar horizontalmente este elemento, que es exactamente lo que hace
   un carrusel. Resultado medido, despachando un deslizamiento tactil real
   de 200 px: scrollLeft 0 antes, 0 despues. Con el dedo no se movia; solo
   andaban las flechas.

   El valor correcto es el que viene por defecto: el navegador mira la
   direccion del gesto y decide. Horizontal mueve la tira, vertical
   scrollea la pagina. El secuestro que se queria evitar no existe: lo
   resuelve el navegador solo. */
.carrusel__pista { cursor: grab; touch-action: auto; }
.carrusel__pista .galeria__item { cursor: inherit; }

/* Mientras se arrastra se apagan las dos cosas que pelean contra mover
   el scroll a mano: el snap, que tironea hacia el punto de anclaje en
   cada pixel, y el desplazamiento suave, que convierte cada asignacion
   de scrollLeft en una animacion. Al soltar vuelven los dos y el snap
   reencaja solo en la foto mas cercana. */
.carrusel__pista.esta-arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  /* Sin esto, arrastrar sobre una foto selecciona el texto de al lado y
     deja media pagina en azul. */
  user-select: none;
  -webkit-user-select: none;
}

/* Cada foto ocupa un ancho fijo y se ancla al borde izquierdo. En mobile
   entra una y se asoma la siguiente: ese recorte es lo que le avisa a la
   persona que hay más para el costado. Sin el asomo, una tira parece una
   foto sola. */
/* MANDA EL ALTO, y el ancho de cada foto sale de su proporcion. Antes
   mandaba el ancho: todas median lo mismo y una apaisada metida ahi habria
   que recortarla a vertical o deformarla. Con el alto fijo conviven las dos
   orientaciones sin tocar una sola foto —las verticales miden 0,8 de alto y
   la apaisada 1,25— y de paso la tira gana ritmo, porque deja de ser una
   fila de rectangulos identicos. */
.carrusel__pista > .galeria__item {
  flex: 0 0 auto;
  height: clamp(275px, 90vw, 350px);
  scroll-snap-align: start;
}
/* Dentro del carrusel la imagen no impone proporcion: la trae puesta desde
   sus atributos width/height, que son los reales del archivo. */
.carrusel__pista > .galeria__item img {
  height: 100%;
  width: auto;
  aspect-ratio: auto;
}

/* ---------- Flechas ---------- */
.carrusel__flecha {
  position: absolute;
  top: calc(50% - 1.5rem);   /* -1.5rem: descuenta la fila de puntos */
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;               /* 44 es el mínimo táctil de WCAG 2.5.8 */
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--texto);
  cursor: pointer;
  box-shadow: var(--sombra-md);
  transition: background var(--t-rapida), color var(--t-rapida),
              transform var(--t-rapida), opacity var(--t-rapida);
}
.carrusel__flecha--prev { left: -6px; }
.carrusel__flecha--next { right: -6px; }

@media (hover: hover) and (pointer: fine) {
  .carrusel__flecha:hover {
    background: var(--cta-bg);
    color: var(--cta-texto);
    transform: translateY(-50%) scale(1.08);
  }
}

/* En las puntas la flecha no se esconde: se apaga y deja de recibir
   clics. Que desaparezca haría saltar el layout y, peor, dejaría a quien
   navega con teclado sin entender por qué se fue el foco. */
/* `[hidden]` NO alcanza solo. El navegador le da display:none a cualquier
   elemento con ese atributo, pero eso vive en su hoja de estilos por
   defecto y CUALQUIER regla de autor le gana: dos lineas mas arriba,
   .carrusel__flecha declara `display: grid`. O sea que main.js ponia el
   atributo, el atributo quedaba puesto, y la flecha se seguia viendo.

   No se noto nunca en la galeria porque ahi la tira SIEMPRE desborda y
   `hidden` nunca llega a ser true. Aparecio con los cuatro pasos, que en
   escritorio vuelven a ser grilla: las flechas quedaban flotando a los
   costados de una grilla que no se desplaza. */
.carrusel__flecha[hidden] { display: none; }

.carrusel__flecha[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
  box-shadow: var(--sombra-sm);
}

/* La punta de flecha se dibuja con dos bordes girados: no hace falta ni
   un icono ni una fuente para dos triángulos. */
.carrusel__flecha span {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.carrusel__flecha--next span { transform: rotate(-45deg); margin-left: -3px; }
.carrusel__flecha--prev span { transform: rotate(135deg); margin-right: -3px; }

/* ---------- Puntos ---------- */
.carrusel__puntos {
  display: flex;
  justify-content: center;
  /* Envuelven en vez de apretarse. Con una sola linea y muchas fotos, en
     un telefono angosto los puntos no entraban y flex los achicaba. */
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* El punto que se ve mide 9 px, pero el botón mide 24: un blanco de 9 px
   es imposible de acertar con el pulgar. El área grande es transparente. */
.carrusel__punto {
  /* `flex-shrink: 0` NO es de mas. Estos 24 px son el minimo tactil que
     pide SC 2.5.8, pero el punto vive dentro de un flex y por defecto
     `flex-shrink` vale 1: medido a 320, 360, 390 y 414 px, los puntos se
     aplastaban a 9 px de ancho. Declarar el tamano no alcanza si el
     contenedor tiene permiso para achicarlo. */
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carrusel__punto::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--borde);
  transition: background var(--t-rapida), transform var(--t-rapida);
}
.carrusel__punto[aria-current="true"]::before {
  background: var(--acento);
  transform: scale(1.35);
}
@media (hover: hover) and (pointer: fine) {
  .carrusel__punto:hover::before { background: var(--acento); }
}