/* ===========================================================================
   Angel Vivas (AV6)
   Identidad: pared de grafiti en relieve iluminada con neon.
   Fuego, franjas diagonales magenta facetadas, rayos verde lima, grano de
   spray sobre negro. La referencia manda: referencia-estilo.md
   =========================================================================== */

:root{
  /* --- Color --------------------------------------------------------- */
  --negro:#0D0B0C;
  --carbon:#1A1517;
  --rojo:#E8183C;
  --magenta:#D9145F;
  --naranja:#FF5A1F;
  --amarillo:#FFC21A;
  --neon:#C8F31D;
  --hueso:#F2EEE8;

  /* Derivados. Se calculan una sola vez para no repetir color-mix. */
  --humo:rgba(242,238,232,.62);      /* texto secundario sobre negro */
  --humo-claro:rgba(13,11,12,.68);   /* texto secundario sobre hueso */
  --borde:rgba(242,238,232,.14);

  /* --- Tipografia ----------------------------------------------------- */
  --display:"Archivo","Arial Narrow",Impact,sans-serif;
  --texto:"Archivo","Segoe UI",system-ui,sans-serif;

  /* --- Ritmo ---------------------------------------------------------- */
  --paso:clamp(5rem,11vw,9rem);      /* aire vertical entre secciones */
  --ancho:1320px;
  --margen:clamp(18px,5vw,56px);

  /* --- Movimiento ----------------------------------------------------- */
  --ease:cubic-bezier(0.23,1,0.32,1);

  /* --- Forma ---------------------------------------------------------- */
  /* Una sola escala de radios en toda la pagina: los botones son pildora,
     las tarjetas 14px, los campos 10px. No se mezcla nada mas. */
  --r-pildora:999px;
  --r-tarjeta:14px;
  --r-campo:10px;

  color-scheme:dark;
}

/* ===========================================================================
   TEXTURAS
   Van como data URI para que no haya peticiones extra ni archivos sueltos.
   El facetado es gris a proposito: se funde con mix-blend-mode sobre
   cualquier color de abajo, asi una sola textura sirve para magenta y rojo.
   =========================================================================== */

:root{
  /* Relieve facetado: triangulos tipo metal martillado. */
  --tex-facetado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpolygon points='0,0 16,0 0,16' fill='%23fff' fill-opacity='.42'/%3E%3Cpolygon points='16,0 16,16 0,16' fill='%23000' fill-opacity='.34'/%3E%3Cpolygon points='16,0 32,0 32,16' fill='%23fff' fill-opacity='.26'/%3E%3Cpolygon points='16,0 32,16 16,16' fill='%23000' fill-opacity='.22'/%3E%3Cpolygon points='0,16 16,32 0,32' fill='%23000' fill-opacity='.30'/%3E%3Cpolygon points='0,16 16,16 16,32' fill='%23fff' fill-opacity='.30'/%3E%3Cpolygon points='16,16 32,16 16,32' fill='%23fff' fill-opacity='.20'/%3E%3Cpolygon points='32,16 32,32 16,32' fill='%23000' fill-opacity='.38'/%3E%3C/svg%3E");

  /* Variante suave del facetado, para superficies grandes donde el relieve
     debe insinuarse y no competir con la foto (las iniciales de la portada). */
  --tex-facetado-sutil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 32 32'%3E%3Cpolygon points='0,0 16,0 0,16' fill='%23fff' fill-opacity='.13'/%3E%3Cpolygon points='16,0 16,16 0,16' fill='%23000' fill-opacity='.20'/%3E%3Cpolygon points='16,0 32,0 32,16' fill='%23fff' fill-opacity='.07'/%3E%3Cpolygon points='16,0 32,16 16,16' fill='%23000' fill-opacity='.13'/%3E%3Cpolygon points='0,16 16,32 0,32' fill='%23000' fill-opacity='.17'/%3E%3Cpolygon points='0,16 16,16 16,32' fill='%23fff' fill-opacity='.09'/%3E%3Cpolygon points='16,16 32,16 16,32' fill='%23fff' fill-opacity='.06'/%3E%3Cpolygon points='32,16 32,32 16,32' fill='%23000' fill-opacity='.22'/%3E%3C/svg%3E");

  /* Grano de pintura en spray. */
  --tex-grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* ===========================================================================
   BASE
   =========================================================================== */

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Ancla por debajo de la barra fija al saltar con los enlaces del menu. */
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip y no hidden: hidden convierte el body en contenedor de scroll y eso
     rompe position:sticky en toda la pagina. */
  overflow-x:clip;
}

/* Grano de spray sobre todo. Fijo y sin eventos: si estuviera dentro de un
   contenedor con scroll, el navegador lo repintaria en cada frame. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  background-image:var(--tex-grano);
  opacity:.22;
  mix-blend-mode:overlay;
}

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

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

h1,h2,h3{
  font-family:var(--display);
  margin:0;
  line-height:.92;
  text-wrap:balance;
  font-weight:900;
  text-transform:uppercase;
  font-variation-settings:"wdth" 70;
  letter-spacing:-.01em;
}

p{margin:0}

.envoltura{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--margen);
}

/* Salto al contenido. Fuera de la pantalla hasta que recibe el foco: quien
   navega con teclado no tiene que pasar por la barra y el menu entero. */
.saltar{
  position:fixed;
  top:0;left:0;
  z-index:100;
  translate:0 -200%;
  padding:.8em 1.2em;
  background:var(--neon);
  color:var(--negro);
  font-weight:800;
  text-decoration:none;
  border-radius:0 0 10px 0;
}
.saltar:focus-visible{translate:0 0}

/* Utilidad: solo para lectores de pantalla. */
.oculto{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ===========================================================================
   PIEZAS DE LA IDENTIDAD
   =========================================================================== */

/* Franja diagonal con relieve facetado. Se usa como separador y como marco. */
.franja{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.franja::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--tex-facetado);
  background-size:32px 32px;
  mix-blend-mode:overlay;
  opacity:.85;
  pointer-events:none;
}

/* Linea de neon. El halo va solo en la linea, nunca detras de un bloque de
   texto: sobre parrafos el glow destruye la legibilidad. */
.neon-linea{
  height:2px;
  background:var(--neon);
  box-shadow:0 0 6px var(--neon),0 0 18px rgba(200,243,29,.55);
  border:0;
  margin:0;
}

/* Suelo reflectante: cierra algunas secciones simulando el piso brillante. */
.suelo{
  position:absolute;
  left:0;right:0;bottom:0;
  height:min(26vh,200px);
  pointer-events:none;
  background:linear-gradient(to top,rgba(232,24,60,.22),rgba(217,20,95,.08) 42%,transparent);
  mix-blend-mode:screen;
  filter:blur(2px);
}

/* ===========================================================================
   BARRA SUPERIOR
   Fija y no sticky: asi no ocupa alto y la portada llena la pantalla entera.
   =========================================================================== */

.barra{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:60;
  padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(to bottom,rgba(13,11,12,.92),rgba(13,11,12,0));
  transition:background .25s var(--ease);
}

/* Sobre las dos secciones claras el velo oscuro ensuciaba el fondo y el
   monograma blanco desaparecia. El JS marca la barra cuando una de esas
   secciones ocupa la franja de arriba y aca se le da la vuelta al tono. */
.barra[data-tono="claro"]{
  background:linear-gradient(to bottom,rgba(242,238,232,.94),rgba(242,238,232,0));
}
.barra[data-tono="claro"] .monograma,
.barra[data-tono="claro"] .barra-nombre{color:var(--negro)}
/* El lima sobre hueso casi no se lee: en claro el 6 va en un verde oscuro. */
.barra[data-tono="claro"] .monograma span{color:#5C7A06}

.barra .envoltura{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:clamp(14px,2.2vw,20px);
}

.monograma{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  font-variation-settings:"wdth" 62;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--hueso);
}
.monograma span{color:var(--neon)}

.barra-nombre{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:"wdth" 62;
  font-size:clamp(.9rem,1.9vw,1.15rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--hueso);
}

/* Boton de menu: dos lineas inclinadas, como la referencia. Van de color
   desde el principio y no solo al pasar el mouse, porque en celular no hay
   mouse y ahi se quedaban siempre blancas. */
.barra-menu{
  display:grid;
  gap:5px;
  padding:10px;
  margin:-10px;
  border:0;
  background:none;
  cursor:pointer;
}
.barra-menu i{
  display:block;
  width:30px;
  height:3px;
  background:var(--neon);
  transform:skewX(-22deg);
  transition:
    background .2s var(--ease),
    width .3s var(--ease),
    margin-left .3s var(--ease),
    filter .25s var(--ease);
}
.barra-menu i:last-child{
  width:20px;
  margin-left:10px;
  background:var(--naranja);
}

/* Las dos lineas se emparejan y se encienden al apuntarlas o al tabular. */
.barra-menu:is(:hover,:focus-visible) i{
  filter:drop-shadow(0 0 10px color-mix(in srgb,currentColor 0%,var(--neon) 60%));
}
.barra-menu:is(:hover,:focus-visible) i:last-child{
  width:30px;
  margin-left:0;
  filter:drop-shadow(0 0 10px color-mix(in srgb,currentColor 0%,var(--naranja) 60%));
}

/* Sobre las secciones claras el lima y el naranja casi no se ven: van las
   versiones oscuras de los mismos colores, no el negro plano de antes. */
.barra[data-tono="claro"] .barra-menu i{background:#4F6A05}
.barra[data-tono="claro"] .barra-menu i:last-child{background:#A8330A}

/* En celular el nombre del centro estorba: la portada ya lo dice en grande. */
@media (max-width:560px){
  .barra-nombre{display:none}
  .barra .envoltura{justify-content:space-between}
}

/* ===========================================================================
   PORTADA
   =========================================================================== */

.portada{
  position:relative;
  /* dvh y no vh: con vh la barra del navegador en iOS provoca un salto. */
  min-height:100dvh;
  display:grid;
  grid-template-rows:1fr auto;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 108%,rgba(255,90,31,.26),transparent 62%),
    var(--negro);
}

/* AV6 gigante de fondo, con el relieve recortado dentro de la letra. */
.portada-marca{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 62;
  font-size:clamp(13rem,40vw,32rem);
  line-height:.8;
  letter-spacing:-.04em;
  user-select:none;
  pointer-events:none;
  /* Tono oscuro sobre negro: el relieve se insinua, no grita. */
  background-image:var(--tex-facetado-sutil),linear-gradient(160deg,#2A1E23,#151013 56%,#231A1D);
  /* A este tamano de letra un mosaico chico se lee como puntitos; a 34px se
     lee como las facetas que tiene la pared de la referencia. */
  background-size:34px 34px,100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Chorreon de pintura neon en la esquina superior izquierda. */
.portada-chorreon{
  position:absolute;
  z-index:3;
  top:0;
  /* Corrido a la derecha para no pisar el monograma de la barra. */
  left:clamp(96px,16vw,230px);
  width:clamp(120px,16vw,210px);
  pointer-events:none;
  /* El <use> se pinta con currentColor. Sin esto heredaba el hueso del body y
     el chorreon de la portada salia blanco, el unico distinto de los cinco. */
  color:var(--neon);
  filter:drop-shadow(0 0 10px rgba(200,243,29,.5));
}

/* El sprite no se ve: solo guarda el trazado del chorreon para los <use>. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Chorreon suelto, el mismo de la portada repartido por las secciones.
   Cada uno se coloca con variables en el style del HTML: --x cuanto a la
   derecha, --y cuanto baja del borde, --ancho, --giro y --espejo (-1 para
   darlo vuelta y que no se repita el mismo dibujo). */
.chorreon{
  position:absolute;
  z-index:3;
  top:var(--y,0);
  left:var(--x,8%);
  width:var(--ancho,150px);
  /* El origen arriba: con el centro, el giro despega el chorreon del borde y
     queda flotando en el aire en vez de colgar de el. */
  transform-origin:top center;
  rotate:var(--giro,0deg);
  scale:var(--espejo,1) 1;
  color:var(--neon);
  pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(200,243,29,.45));
}

/* Resplandor naranja al pie de la portada. Reemplaza a las llamas dibujadas:
   el mismo --naranja de la paleta subiendo desde el borde de abajo y
   apagandose contra el negro.
   El degradado se corta en transparente y no en var(--negro): encima hay un
   fondo negro, asi que transparente ya lee como negro, y de la otra manera la
   banda tapaba el degradado rojo de la portada. */
.portada-resplandor{
  position:absolute;
  z-index:1;
  inset-inline:0;
  bottom:0;
  height:min(48vh,440px);
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(255,90,31,.92) 0%,
    rgba(255,90,31,.58) 20%,
    rgba(255,90,31,.28) 44%,
    rgba(255,90,31,.10) 68%,
    transparent 100%);
}

/* Foto recortada de Angel.
   El original mide 240x253, asi que no se amplia mas alla de ~1.6x: pasado
   ese punto se pixela. Cuando llegue una foto grande, subir este tope. */
.portada-foto{
  position:relative;
  z-index:2;
  align-self:end;
  justify-self:center;
  /* La foto es un busto apaisado, no la silueta de cuerpo entero de antes:
     necesita bastante mas ancho para que la cara tenga peso. */
  width:min(86vw,660px);
  height:auto;
  margin-bottom:clamp(60px,10vw,120px);
  /* Naranja y no rojo: la sombra tiene que ser del mismo color que el
     resplandor que ahora esta detras, o la foto queda recortada contra el. */
  filter:drop-shadow(0 14px 50px rgba(255,90,31,.5));
}

/* Texto superpuesto. */
.portada-texto{
  position:relative;
  z-index:3;
  grid-row:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  /* Sin esto las filas automaticas se estiran para llenar la fila 1fr y en
     celular abren un hueco enorme entre la frase y la firma. */
  align-content:start;
  gap:var(--margen);
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding:clamp(5.5rem,12vh,7rem) var(--margen) 0;
  pointer-events:none;
}

/* Es un h1 por jerarquia, pero se lee como frase, no como titular: va en la
   familia de texto y en caja normal. */
/* Era un parrafo de dos lineas y ahora es una consigna de cuatro palabras: con
   el cuerpo de antes quedaba como un pie de foto perdido en la esquina. */
.portada-frase{
  /* Era un h1 y paso a ser un p (el h1 ahora es el nombre, oculto). La regla
     h1,h2,h3 le daba el margen en cero y el text-wrap:balance que parte la
     consigna en dos lineas parejas; como p hay que repetirlos aca. */
  margin:0;
  text-wrap:balance;
  max-width:22ch;
  font-family:var(--texto);
  font-weight:600;
  font-variation-settings:"wdth" 100;
  text-transform:none;
  letter-spacing:0;
  font-size:clamp(1.15rem,2.2vw,1.75rem);
  line-height:1.3;
  color:var(--hueso);
  text-shadow:0 2px 18px rgba(13,11,12,.95);
}

.portada-firma{
  justify-self:end;
  text-align:right;
}

/* La firma real de Angel. El PNG ya trae el resplandor y el fondo transparente
   (se saco del negro calculando el alfa desde el brillo de cada pixel), asi
   que no lleva ni filtro ni mezcla: se apoya sobre cualquier fondo. */
.firma{
  width:clamp(170px,24vw,300px);
  height:auto;
  margin-left:auto;
}

/* Corte diagonal que da paso a la siguiente seccion. */
.portada-corte{
  position:absolute;
  z-index:4;
  inset-inline:-5%;
  bottom:-1px;
  height:clamp(70px,11vw,150px);
  background:var(--negro);
  clip-path:polygon(0 100%,100% 38%,100% 100%);
}

@media (max-width:720px){
  /* El texto toma su alto natural arriba y la foto se centra en lo que
     queda: asi no se abre una zona muerta en el medio. */
  .portada{grid-template-rows:auto 1fr}
  .portada-foto{align-self:center}

  .portada-texto{
    grid-template-columns:1fr;
    gap:18px;
    padding-top:clamp(4.2rem,11vh,5.5rem);
  }
  .portada-firma{justify-self:start;text-align:left}
  .firma{margin-left:0}

  .portada-foto{
    width:min(96vw,440px);
    margin-bottom:clamp(44px,12vw,80px);
  }

  /* Menos alto: en vertical el resplandor llegaba hasta la cara de la foto. */
  .portada-resplandor{height:min(36vh,320px)}
  .portada-corte{height:clamp(52px,14vw,90px)}
}

/* ===========================================================================
   MOMENTOS
   Cartas coleccionables en fila. Sin titulos ni datos: la foto y el destello
   del marco cuentan todo. El destello recorre la fila de izquierda a derecha,
   una carta despues de la otra, como una luz que pasa por encima.
   =========================================================================== */

.momentos{
  position:relative;
  isolation:isolate;
  padding-block:var(--paso) calc(var(--paso) * .75);
  overflow:hidden;
}

/* Titular al fondo, en verde lima y con el mismo relieve facetado de antes.
   Baja lo suficiente para que la barra fija no le coma el primer renglon:
   en lima el solape se notaba muchisimo mas que en el gris de antes. */
.momentos-fondo{
  position:absolute;
  top:clamp(4.4rem,8vw,5.5rem);
  left:50%;
  translate:-50% 0;
  z-index:0;
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 62;
  font-size:clamp(4.2rem,15vw,13rem);
  line-height:.8;
  letter-spacing:-.03em;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  /* Mismo criterio que el marco de las cartas: facetado suave y soft-light.
     Con la textura fuerte el lima se lee como una rejilla y no como relieve. */
  background-image:var(--tex-facetado-sutil),linear-gradient(160deg,#D8FF3A,var(--neon) 42%,#8FBE0C);
  background-size:22px 22px,100% 100%;
  background-blend-mode:soft-light,normal;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* El riel desborda a proposito: ver media carta cortada en el borde es lo que
   avisa que hay mas para el costado, sin tener que escribirlo. */
.momentos-riel{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,32px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* safe y no center a secas: con center, cuando las cartas desbordan el
     navegador recorta la primera y no se puede llegar a ella. */
  justify-content:safe center;
  padding:clamp(56px,9vw,120px) var(--margen);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.momentos-riel::-webkit-scrollbar{display:none}

.carta{
  position:relative;
  flex:0 0 auto;
  /* Son cuatro cartas y nada mas: el ancho esta calibrado para que en
     computadora entren las cuatro sin que la ultima quede cortada, que con
     solo cuatro fotos haria creer que hay mas. */
  width:clamp(200px,19vw,280px);
  /* Los elementos flex traen min-width:auto y eso les deja ensancharse por
     encima del width cuando el contenido es mas ancho. */
  min-width:0;
  scroll-snap-align:center;
  rotate:var(--giro,0deg);
  translate:0 var(--sube,0px);
  transition:rotate .55s var(--ease),translate .55s var(--ease);
}

/* Resplandor de color detras de cada carta, como el estallido de la
   referencia. Va en ::before y no en un filtro sobre la carta para que la foto
   quede nitida. */
.carta::before{
  content:"";
  position:absolute;
  inset:-16%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(54% 46% at 50% 50%,var(--halo,rgba(232,24,60,.55)),transparent 70%);
  filter:blur(20px);
  transition:opacity .45s var(--ease),filter .45s var(--ease);
}

.carta-marco{
  --corte:clamp(15px,2.2vw,24px);
  position:relative;
  display:block;
  padding:clamp(6px,.9vw,10px);
  /* Esquinas cortadas arriba a la izquierda y abajo a la derecha. */
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte));
  /* Degradado con vuelta al amarillo en los dos extremos: eso es lo que da el
     bisel de metal. El facetado va en la variante suave y en soft-light, que
     insinua el relieve; con la textura fuerte el marco se leia como zigzag. */
  background-image:var(--tex-facetado-sutil),linear-gradient(145deg,var(--amarillo),var(--naranja) 26%,var(--magenta) 54%,var(--naranja) 76%,var(--amarillo));
  background-size:10px 10px,100% 100%;
  background-blend-mode:soft-light,normal;
}

.carta-foto{
  width:100%;
  /* height:auto es obligatorio: sin el, el atributo height="1350" del HTML
     gana y la carta se estira a 1350 px de alto. */
  height:auto;
  /* 4:5 y no 2:3: las fotos de campeon vienen casi cuadradas y con 2:3 habia
     que cortarles un tercio del ancho, que se llevaba la copa o la cara. */
  aspect-ratio:4/5;
  object-fit:cover;
  background:var(--carbon);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}

/* El destello. Una franja de luz diagonal que cruza la carta y despues espera.
   mix-blend-mode screen para que aclare la foto en vez de taparla. */
.carta-destello{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte));
  /* La franja ocupa del 43% al 57% de una imagen que mide 280% del ancho de la
     carta: eso da una banda de un tercio de carta. Mas ancha que esto deja de
     ser un destello y lava la foto entera. */
  background-image:linear-gradient(104deg,
    transparent 43%,
    rgba(242,238,232,.16) 46%,
    rgba(242,238,232,.82) 48.5%,
    rgba(200,243,29,.68) 50%,
    rgba(242,238,232,.78) 51.5%,
    rgba(242,238,232,.16) 54%,
    transparent 57%);
  background-size:280% 100%;
  background-position:165% 0;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:destello 7s linear infinite;
  animation-delay:var(--retardo,0s);
}

/* Espera quieto el 78% del ciclo y cruza en el 22% restante: si cruzara todo
   el tiempo seria un parpadeo y no un reflejo. */
@keyframes destello{
  0%,78%{background-position:165% 0}
  100%{background-position:-85% 0}
}

@media (hover:hover) and (pointer:fine){
  .carta:hover{
    rotate:0deg;
    translate:0 calc(var(--sube,0px) - 14px);
  }
  .carta:hover::before{filter:blur(28px)}
}

/* En celular y en tablet el riel deja de ser riel: Angel pidio las cuatro
   cartas a la vista, en cuadricula de 2 x 2 y sin arrastrar al costado. Las
   cartas se achican solas porque las columnas son 1fr.
   El corte va en 900 y no en 720: entre esos dos anchos las cuatro cartas de
   200 px no entran en una fila y la ultima quedaba cortada en el borde, que
   con solo cuatro fotos hace creer que hay mas. */
@media (max-width:900px){
  .momentos-riel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(12px,3.5vw,18px);
    padding-block:clamp(44px,13vw,80px);
    /* overflow y scroll-snap eran del riel horizontal: en cuadricula sobran
       y el auto dejaria una barra fantasma. */
    overflow:visible;
    scroll-snap-type:none;
  }

  .carta{
    width:auto;
    scroll-snap-align:none;
    /* El escalonado vertical abriria huecos entre las filas de la
       cuadricula, y el giro entero haria que las cartas se pisen. */
    translate:0 0;
    rotate:calc(var(--giro,0deg) * .55);
  }
}

/* ===========================================================================
   PIEZAS COMPARTIDAS DE LAS SECCIONES QUE SIGUEN
   =========================================================================== */

/* Titular gigante recortado con relieve. En oscuro para los fondos negros y
   en rojo para cuando tiene que gritar. */
.titan{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 62;
  line-height:.82;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
  background-image:var(--tex-facetado-sutil),linear-gradient(160deg,#2A1E23,#151013 56%,#231A1D);
  background-size:26px 26px,100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* Mismo criterio que el marco de las cartas: facetado suave y soft-light. Con
   la textura fuerte la letra se lee como una rejilla rosa. */
.titan--fuego{
  background-image:var(--tex-facetado-sutil),linear-gradient(150deg,var(--rojo),var(--magenta) 48%,var(--rojo));
  background-size:14px 14px,100% 100%;
  background-blend-mode:soft-light,normal;
}

/* Corte diagonal entre secciones. El color se pasa por --corte-color. */
.corte{
  position:absolute;
  inset-inline:-5%;
  z-index:4;
  height:clamp(60px,10vw,140px);
  background:var(--corte-color,var(--negro));
  pointer-events:none;
}
.corte--abajo{bottom:-1px;clip-path:polygon(0 100%,100% 38%,100% 100%)}
.corte--arriba{top:-1px;clip-path:polygon(0 0,100% 0,100% 62%)}

/* Boton principal: pildora con relieve de fuego. */
.boton{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.85em 1.6em;
  border:0;
  border-radius:var(--r-pildora);
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 78;
  font-size:clamp(.95rem,1.7vw,1.15rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--hueso);
  cursor:pointer;
  background-image:var(--tex-facetado-sutil),linear-gradient(135deg,var(--rojo),var(--magenta));
  background-size:12px 12px,100% 100%;
  background-blend-mode:soft-light,normal;
  transition:translate .25s var(--ease),box-shadow .25s var(--ease);
}
.boton--neon{
  color:var(--negro);
  background-image:var(--tex-facetado-sutil),linear-gradient(135deg,var(--neon),#9ED10F);
}
@media (hover:hover) and (pointer:fine){
  .boton:hover{translate:0 -2px;box-shadow:0 10px 30px rgba(232,24,60,.35)}
  .boton--neon:hover{box-shadow:0 10px 30px rgba(200,243,29,.35)}
}
.boton:active{translate:0 1px}

/* Polaroid: marco claro, mas aire abajo, como una foto revelada.
   Quedo solo en la tira de la galeria; antes tambien la usaba la pila de la
   frase, que ya no existe. */
.polaroid{
  /* figure trae margin:1em 40px del navegador y eso abria 80 px entre las
     polaroids de la tira. */
  margin:0;
  width:100%;
  padding:12px 12px 46px;
  background:var(--hueso);
  border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.1) inset;
  rotate:var(--giro,0deg);
}
.polaroid img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  background:var(--carbon);
}

/* ===========================================================================
   CARRERA
   Dos columnas, una por pais, y dentro de cada una una linea de tiempo
   vertical con un club por hito. En celular las columnas se apilan y la linea
   sigue siendo la misma, asi que no hay dos disenos que mantener.
   =========================================================================== */

.carrera{
  position:relative;
  padding-block:var(--paso);
  background:var(--negro);
  isolation:isolate;
  overflow:hidden;
}

.carrera-titulo{
  font-size:clamp(3rem,13vw,10rem);
  text-align:center;
  margin-bottom:clamp(2.6rem,6vw,4.5rem);
}

/* Los dos paises van uno debajo del otro y no en dos columnas: Venezuela tiene
   dos clubes y Panama cuatro, asi que al costado la columna de la izquierda
   quedaba vacia media pantalla. El ancho se usa dentro de cada hito. */
.carrera-paises{
  display:grid;
  gap:clamp(34px,6vw,62px);
}

.pais-nombre{
  font-size:clamp(1.5rem,3.2vw,2.3rem);
  color:var(--neon);
  letter-spacing:.02em;
  margin-bottom:clamp(1.2rem,2.4vw,1.8rem);
  padding-bottom:.5rem;
  border-bottom:1px solid var(--borde);
}

/* La linea de tiempo. El trazo vertical va en el ::before de la lista y no en
   cada hito: asi es un solo trazo continuo y no una fila de pedacitos con
   cortes en los huecos. */
.linea{
  position:relative;
  list-style:none;
  margin:0;
  padding:0 0 0 clamp(22px,2.6vw,32px);
}
.linea::before{
  content:"";
  position:absolute;
  left:4px;
  top:9px;
  bottom:9px;
  width:2px;
  background:linear-gradient(to bottom,var(--neon),rgba(200,243,29,.12));
}

/* El club a la izquierda y los logros a la derecha. Asi la linea de tiempo
   ocupa el ancho de la pagina en vez de quedar como una tira angosta. */
.hito{
  position:relative;
  display:grid;
  grid-template-columns:minmax(200px,.8fr) 1.2fr;
  gap:clamp(10px,2.5vw,40px);
  align-items:start;
  padding-bottom:clamp(1.6rem,3vw,2.4rem);
}
.hito:last-child{padding-bottom:0}

/* El punto de cada hito. Se apoya en la linea de arriba. */
.hito::before{
  content:"";
  position:absolute;
  left:calc(clamp(22px,2.6vw,32px) * -1 + 1px);
  top:9px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 0 3px var(--negro),0 0 10px rgba(200,243,29,.7);
}

/* h4 trae margin:1.33em 0 del navegador y eso abria 40 px entre el nombre del
   club y sus anos, y desalineaba los logros del costado. */
.hito-club{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 78;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  letter-spacing:-.005em;
  color:var(--hueso);
  line-height:1.1;
  text-wrap:pretty;
}
.hito-dato{
  margin-top:.3rem;
  font-size:.86rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--humo);
}

.logros{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.4rem;
}
.logros li{
  position:relative;
  padding-left:1.1em;
  font-size:.97rem;
  line-height:1.45;
  color:var(--hueso);
  text-wrap:pretty;
}
/* Guion corto y no una viñeta redonda: la viñeta competia con el punto de la
   linea de tiempo que esta al lado. */
.logros li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:.6em;
  height:2px;
  background:var(--naranja);
}

/* El unico hito que no es un club: se marca con el punto en naranja para que
   no se lea como un equipo mas. */
.hito--premio::before{
  background:var(--naranja);
  box-shadow:0 0 0 3px var(--negro),0 0 10px rgba(255,90,31,.7);
}

/* Lo de hoy y lo que viene, fuera de la linea: no son pasado. */
.carrera-ahora{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,22px);
  margin-top:clamp(2.6rem,5vw,4rem);
}
.ahora-bloque{
  display:grid;
  gap:.4rem;
  padding:clamp(18px,2.4vw,26px);
  border-radius:var(--r-tarjeta);
  background:var(--carbon);
  box-shadow:inset 0 0 0 1px var(--borde);
}
.ahora-rotulo{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--humo);
}
.ahora-valor{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 78;
  font-size:clamp(1.05rem,2.2vw,1.5rem);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--neon);
  text-wrap:pretty;
}

/* Debajo de 760 px los logros no entran al costado del nombre del club: se
   pasan abajo y el hito vuelve a ser una sola columna. */
@media (max-width:760px){
  .hito{
    grid-template-columns:1fr;
    gap:.7rem;
    padding-bottom:clamp(1.8rem,5vw,2.2rem);
  }
}
@media (max-width:560px){
  .carrera-ahora{grid-template-columns:1fr}
}

/* ===========================================================================
   MIS HABILIDADES
   Ficha de datos duros y fortalezas. Sin barras ni puntajes: los numeros
   habria que inventarlos y eso esta prohibido.
   =========================================================================== */

.habilidades{
  position:relative;
  padding-block:0 var(--paso);
  background:var(--negro);
}

/* El margen de abajo lo ponia el parrafo de entrada que se quito: sin el, el
   titulo quedaba pegado a la ficha. */
.habilidades-titulo{
  font-size:clamp(2.4rem,9vw,6.6rem);
  text-align:center;
  margin-bottom:clamp(2.4rem,5vw,3.4rem);
}

/* Ficha de datos. Tres columnas anchas y no seis angostas: con seis,
   "Mediocampista central" no tenia aire y se iba contra el borde redondeado.
   Se fija el numero de columnas en vez de usar auto-fit porque auto-fit, con
   un minimo chico, volvia a meter cinco columnas en computadora y dejaba una
   caja sola en la segunda fila. grid-auto-rows:1fr deja las dos filas iguales. */
.ficha{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;
  gap:clamp(10px,1.4vw,16px);
  margin:0;
}
/* minmax(0,1fr) y no la pista automatica: la pista automatica crece hasta el
   min-content, asi que la palabra mas larga empujaba el texto fuera de la caja
   en vez de quedarse dentro del relleno. */
.ficha-dato{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.35rem;
  padding:clamp(14px,2vw,20px);
  border-radius:var(--r-tarjeta);
  background:var(--carbon);
  box-shadow:inset 0 0 0 1px var(--borde);
}
.ficha-dato dt{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--humo);
}
.ficha-dato dd{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 78;
  font-size:clamp(1.1rem,2.1vw,1.45rem);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--hueso);
  text-wrap:balance;
}

.ficha-nota{
  margin-top:.9rem;
  font-size:.86rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--humo);
}

.fortalezas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3.5vw,44px);
  margin-top:clamp(2.6rem,5vw,4rem);
}
.fortalezas-bloque h3{
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  color:var(--naranja);
  margin-bottom:1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--borde);
}
.fortalezas-bloque ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.6rem;
}
.fortalezas-bloque li{
  position:relative;
  padding-left:1.6em;
  line-height:1.4;
  text-wrap:pretty;
}
/* Tilde de visto dibujado con dos bordes: no depende de ninguna fuente de
   iconos ni de un emoji que cada sistema pinta distinto. */
.fortalezas-bloque li::before{
  content:"";
  position:absolute;
  left:.1em;
  top:.34em;
  width:.42em;
  height:.78em;
  border:solid var(--neon);
  border-width:0 2px 2px 0;
  rotate:42deg;
}

/* Debajo de 860 las tres columnas dejan "Mediocampista central" sin aire otra
   vez, asi que pasa a dos. Nunca a una: seis cajas en fila india alargan la
   seccion sin que se lea mejor. */
@media (max-width:860px){
  .ficha{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:620px){
  .fortalezas{grid-template-columns:1fr;gap:clamp(22px,6vw,32px)}
}

/* ===========================================================================
   ANTES DE COMPETIR
   Tres tarjetas con la comida, la bebida y lo que no toca, y debajo el ritual
   y la musica. Todo sale de la encuesta: no hay ni un dato de relleno.
   =========================================================================== */

.previa{
  position:relative;
  padding-block:clamp(3.4rem,8vw,6rem);
  background:var(--negro);
}

/* El titulo es largo (seis palabras): va mas chico que los otros titanes o en
   celular se come media pantalla el solo. */
.previa-titulo{
  font-size:clamp(1.9rem,6vw,4.2rem);
  text-align:center;
  margin-bottom:clamp(2.2rem,5vw,3.4rem);
}

.previa-malla{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,20px);
}

.previa-tarjeta{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  gap:.5rem;
  padding:clamp(18px,2.4vw,26px);
  border-radius:var(--r-tarjeta);
  background:var(--carbon);
  box-shadow:inset 0 0 0 1px var(--borde);
}

.previa-rotulo{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 70;
  font-size:clamp(1.05rem,2.2vw,1.4rem);
  text-transform:uppercase;
  color:var(--neon);
}
/* La tarjeta de lo que evita se marca en naranja: se lee de un vistazo que
   esa es la que dice "no" sin tener que escribir la palabra. */
.previa-tarjeta--no .previa-rotulo{color:var(--naranja)}

.previa-dato{
  margin:0 0 .4rem;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--humo);
}

.previa-lista{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.55rem;
}
.previa-lista li{
  position:relative;
  padding-left:1.1em;
  line-height:1.45;
  color:var(--hueso);
  text-wrap:pretty;
}
/* Rayita corta en vez de vineta: es el mismo recurso que usa Carrera. */
.previa-lista li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.6em;
  height:2px;
  background:var(--neon);
}
.previa-tarjeta--no .previa-lista li::before{background:var(--naranja)}

.previa-ritual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3.5vw,44px);
  margin-top:clamp(2.2rem,4.5vw,3.4rem);
}
.previa-ritual h3{
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  color:var(--naranja);
  margin-bottom:1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--borde);
}
.previa-musica{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 78;
  font-size:clamp(1.3rem,3vw,2rem);
  line-height:1.15;
  text-transform:uppercase;
  color:var(--hueso);
  text-wrap:balance;
}

@media (max-width:860px){
  .previa-malla{grid-template-columns:1fr}
}
@media (max-width:620px){
  .previa-ritual{grid-template-columns:1fr;gap:clamp(22px,6vw,32px)}
}

/* ===========================================================================
   MARCAS
   =========================================================================== */

.marcas{
  position:relative;
  padding-block:var(--paso);
  background:var(--negro);
  overflow:hidden;
  isolation:isolate;
}

.marcas-titulo{
  font-size:clamp(3.4rem,17vw,14rem);
  text-align:center;
  line-height:.8;
}

.marcas-cabeza{
  position:relative;
  isolation:isolate;
}

/* Resplandor naranja detras de la palabra, donde antes estaban las llamas.
   Es un ovalo y no una banda: centrado en el pie de la palabra se apaga hacia
   los cuatro lados y no deja el borde recto que dejaba la banda. */
.marcas-resplandor{
  position:absolute;
  z-index:-1;
  left:50%;
  top:100%;
  translate:-50% -62%;
  width:min(118%,1100px);
  aspect-ratio:3/1;
  max-width:none;
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,90,31,.62) 0%,
    rgba(255,90,31,.30) 38%,
    rgba(255,90,31,.10) 64%,
    transparent 100%);
}

.marcas-tarjeta{
  position:relative;
  max-width:560px;
  /* Deja pasar las llamas, que bajan bastante por debajo de la palabra. */
  margin:clamp(5rem,13vw,11rem) auto 0;
  padding:clamp(26px,4vw,40px);
  border-radius:var(--r-tarjeta);
  background:var(--carbon);
  box-shadow:inset 0 0 0 1px var(--borde);
  text-align:center;
}
.marcas-tarjeta h3{
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  color:var(--hueso);
  margin-bottom:.6rem;
}
.marcas-tarjeta p{
  color:var(--humo);
  margin-bottom:1.6rem;
  text-wrap:pretty;
}

/* ===========================================================================
   FUERA DE LA CANCHA
   Unico bloque claro de la pagina. Va pegado a la galeria para que el cambio
   de tema ocurra una sola vez y no se alterne.
   =========================================================================== */

.fuera{
  position:relative;
  padding-block:calc(var(--paso) * 1.15) var(--paso);
  background:var(--hueso);
  color:var(--negro);
  isolation:isolate;
  overflow:hidden;
}
/* El grano de spray tambien sobre el claro, pero mas suave. */
.fuera::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--tex-grano);
  opacity:.5;
  mix-blend-mode:multiply;
  pointer-events:none;
}

.fuera-malla{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}

.fuera h2{
  font-size:clamp(2.4rem,6.5vw,5rem);
  color:var(--rojo);
  margin-bottom:1.2rem;
}
.fuera p{
  max-width:42ch;
  color:var(--humo-claro);
  margin-bottom:1.8rem;
  text-wrap:pretty;
}

/* El afiche manda y va a la izquierda, alto; las dos del gimnasio se apilan
   al costado. Las columnas son 1.94 a 1 porque con esa proporcion el alto del
   afiche (3:4) y el de las dos fotos apiladas (4:5 cada una, mas el hueco)
   dan casi lo mismo y el bloque cierra parejo abajo. */
.fuera-fotos{
  display:grid;
  grid-template-columns:1.94fr 1fr;
  gap:clamp(10px,1.6vw,18px);
  align-items:start;
}
.fuera-fotos img{
  width:100%;
  height:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-tarjeta);
  background:var(--carbon);
}
/* El afiche va en 3:4, su proporcion nativa: con cualquier recorte se pierde
   el texto de arriba o el de abajo. */
.fuera-fotos img:first-child{grid-row:1/3;aspect-ratio:3/4}

@media (max-width:860px){
  .fuera-malla{grid-template-columns:1fr}
}

/* En celular las dos del gimnasio al costado del afiche quedarian de 110 px
   de ancho y no se veria nada. Se pasan abajo, una al lado de la otra. */
@media (max-width:620px){
  .fuera-fotos{grid-template-columns:1fr 1fr}
  .fuera-fotos img:first-child{grid-row:auto;grid-column:1/-1}
}

/* ===========================================================================
   GALERIA
   =========================================================================== */

.galeria{
  position:relative;
  padding-block:var(--paso);
  background:var(--hueso);
  color:var(--negro);
  overflow:hidden;
}

.galeria h2{
  font-size:clamp(2.2rem,7vw,5.6rem);
  text-align:center;
  color:var(--negro);
  max-width:16ch;
  margin:0 auto clamp(2.2rem,5vw,3.6rem);
}

/* Tira continua de polaroids. Se duplica el contenido y se desplaza la mitad
   del ancho: al llegar al final la copia esta justo donde estaba el original,
   asi el salto no se ve. */
.tira{
  position:relative;
  overflow:hidden;
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
  /* Se desvanece en los bordes para que no se corte en seco. */
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tira-pista{
  display:flex;
  gap:clamp(12px,1.8vw,22px);
  width:max-content;
  animation:correr 56s linear infinite;
}
.tira .polaroid{
  flex:0 0 auto;
  width:clamp(150px,19vw,230px);
  opacity:1;
  scale:1;
  translate:0 0;
  padding:9px 9px 30px;
  box-shadow:0 12px 30px rgba(13,11,12,.22);
}
@keyframes correr{
  from{translate:0 0}
  to{translate:-50% 0}
}
@media (hover:hover) and (pointer:fine){
  .tira:hover .tira-pista{animation-play-state:paused}
}

/* Mosaico con todas las fotos. Columnas y no grid: con alturas distintas el
   grid deja huecos y las columnas las acomodan solas. */
.mosaico{
  columns:5 190px;
  column-gap:clamp(8px,1.2vw,14px);
}

/* Mientras esta recortada se ven tres y nada mas, como adelanto.
   Con tres fotos las columnas no sirven (dejan tres tiras de distinto alto),
   asi que mientras esta recortada el mosaico pasa a una fila de tres parejas
   y el recorte de cada foto lo hace object-fit. */
.mosaico[data-recortado="true"]{
  columns:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.2vw,14px);
}
.mosaico[data-recortado="true"] button{margin:0}
.mosaico[data-recortado="true"] img{
  height:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.mosaico[data-recortado="true"] button:nth-child(n+4){display:none}

/* En celular tres columnas dejan fotos de 110 px: no se distingue ni la
   camiseta. La primera pasa a lo ancho y las otras dos quedan debajo. */
@media (max-width:620px){
  .mosaico[data-recortado="true"]{grid-template-columns:1fr 1fr}
  .mosaico[data-recortado="true"] button:first-child{grid-column:1 / -1}
}

.galeria-mas{
  margin:clamp(1.6rem,3vw,2.4rem) 0 0;
  text-align:center;
}
.galeria-mas:has(button[hidden]){display:none}
.mosaico button{
  display:block;
  width:100%;
  margin:0 0 clamp(8px,1.2vw,14px);
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in;
  break-inside:avoid;
  border-radius:6px;
  overflow:hidden;
  transition:scale .3s var(--ease),box-shadow .3s var(--ease);
}
.mosaico img{
  width:100%;
  height:auto;
  background:var(--carbon);
}
@media (hover:hover) and (pointer:fine){
  .mosaico button:hover{
    scale:1.025;
    box-shadow:0 0 0 2px var(--neon),0 10px 26px rgba(13,11,12,.3);
  }
}

/* Visor a pantalla completa.
   El display:grid de abajo pisa el display:none que el navegador le pone a un
   <dialog> cerrado, asi que hay que devolverselo a mano. */
.visor:not([open]){display:none}

.visor{
  position:fixed;
  inset:0;
  z-index:95;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,48px);
  border:0;
  background:rgba(13,11,12,.94);
}
.visor::backdrop{background:rgba(13,11,12,.8)}
.visor img{
  max-width:100%;
  max-height:88dvh;
  width:auto;
  height:auto;
  border-radius:6px;
}
.visor-cerrar{
  position:absolute;
  top:clamp(10px,2vw,22px);
  right:clamp(10px,2vw,22px);
  border:0;
  background:none;
  color:var(--hueso);
  font-size:2rem;
  line-height:1;
  padding:10px;
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
  .visor-cerrar:hover{color:var(--neon)}
}

/* ===========================================================================
   CIERRE
   =========================================================================== */

.cierre{
  position:relative;
  padding-block:calc(var(--paso) * 1.2);
  background:var(--negro);
  overflow:hidden;
  isolation:isolate;
}

.cierre-malla{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}

.cierre h2{
  font-size:clamp(2.6rem,8vw,6.4rem);
  margin-bottom:1.6rem;
}
.cierre p{
  max-width:40ch;
  color:var(--humo);
  margin-bottom:2rem;
}

.cierre-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

/* La foto se funde con el negro por abajo en vez de cortarse con un borde
   duro. Es el reemplazo del recorte sin fondo mientras no haya una foto
   calada. El degradado va en un envoltorio y no como mask-image de la
   imagen: la mascara se reporta aplicada pero no llega a pintarse. */
.cierre-marco{
  position:relative;
  justify-self:end;
  width:100%;
  max-width:520px;
}
.cierre-marco::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 38%,rgba(13,11,12,.5) 74%,var(--negro) 100%);
}
.cierre-foto{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 22%;
  background:var(--carbon);
}

@media (max-width:860px){
  .cierre-malla{grid-template-columns:1fr}
  .cierre-marco{justify-self:center;max-width:420px}
}

@media (max-width:720px){
  /* Dos columnas y no una: en una sola la galeria se vuelve interminable. */
  .mosaico{columns:2 auto;column-gap:8px}
  .mosaico button{margin-bottom:8px}
}

/* ===========================================================================
   PIE DE PAGINA
   =========================================================================== */

.pie{
  position:relative;
  padding-block:clamp(2rem,4vw,3rem);
  background:var(--negro);
  border-top:1px solid var(--borde);
}
.pie .envoltura{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.pie-marca{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 62;
  font-size:1.5rem;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--hueso);
}
.pie-marca span{color:var(--neon)}
.pie-enlaces{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(14px,2.4vw,28px);
  font-size:.86rem;
}
.pie-enlaces a{
  text-decoration:none;
  color:var(--humo);
  transition:color .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .pie-enlaces a:hover{color:var(--neon)}
}
/* Los avisos legales van aparte de la navegacion: son enlaces de otra
   naturaleza y asi se leen como un bloque propio en el lector de pantalla. */
.pie-legal{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(14px,2.4vw,28px);
  font-size:.8rem;
}
.pie-legal a{
  color:var(--humo);
  text-decoration-color:var(--borde);
  text-underline-offset:.28em;
  transition:color .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .pie-legal a:hover{color:var(--neon)}
}

.pie-nota{
  width:100%;
  font-size:.74rem;
  color:var(--humo);
  opacity:.75;
}

/* ===========================================================================
   PAGINAS LEGALES (privacidad y aviso legal)
   Texto y nada mas: ni portada, ni fotos, ni barra fija. La unica regla de
   diseno es que se lea comodo, asi que la columna se limita en caracteres.
   =========================================================================== */

.pagina-legal{background:var(--negro)}

.legal-barra{
  padding-block:clamp(18px,3vw,26px);
  border-bottom:1px solid var(--borde);
}
.legal-barra .envoltura{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.legal-volver{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
  text-decoration:none;
  transition:color .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .legal-volver:hover{color:var(--neon)}
}

.legal{
  padding-block:clamp(2.6rem,6vw,4.6rem) clamp(3rem,7vw,5rem);
}
.legal .envoltura{max-width:68ch}

.legal h1{
  font-size:clamp(1.9rem,6vw,3.4rem);
  color:var(--hueso);
  margin-bottom:.6rem;
}
.legal h2{
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  color:var(--naranja);
  margin:clamp(2.2rem,4.5vw,3rem) 0 .8rem;
  letter-spacing:0;
}
.legal p,
.legal li{
  color:var(--humo);
  line-height:1.65;
  text-wrap:pretty;
}
.legal p{margin:0 0 1rem}
.legal ul{
  margin:0 0 1rem;
  padding-left:1.2em;
  display:grid;
  gap:.7rem;
}
.legal strong{color:var(--hueso);font-weight:700}
.legal a{color:var(--neon);text-underline-offset:.22em}

.legal-fecha{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.8;
}
.legal-entrada{
  margin-top:1.6rem;
  font-size:clamp(1rem,2vw,1.12rem);
  color:var(--hueso);
}

/* ===========================================================================
   MENU A PANTALLA COMPLETA
   =========================================================================== */

.menu{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  grid-template-rows:auto 1fr auto;
  /* El grano solo, al 50%, deja el fondo en un gris medio y contra ese gris el
     rojo de "Marcas" se queda sin contraste. Va un velo negro encima: el grano
     se sigue notando y las palabras de color recuperan el fondo oscuro. */
  background:
    linear-gradient(rgba(13,11,12,.88),rgba(13,11,12,.88)),
    var(--tex-grano),
    var(--negro);
  /* inert mientras esta cerrado: no se tabula ni se lee. */
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.menu[data-abierto="true"]{opacity:1;visibility:visible}

.menu-tope{
  display:flex;
  justify-content:flex-end;
  padding:clamp(14px,2.2vw,20px) var(--margen);
}

.menu-cerrar{
  border:0;
  background:none;
  color:var(--hueso);
  font-size:1.9rem;
  line-height:1;
  padding:10px;
  margin:-10px;
  cursor:pointer;
  transition:color .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .menu-cerrar:hover{color:var(--neon)}
}

.menu-lista{
  align-self:center;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:center;
  gap:clamp(10px,2.4vw,30px);
  list-style:none;
  margin:0;
  padding:0 var(--margen);
  max-width:1100px;
  margin-inline:auto;
}

/* Cada palabra lleva su color de la paleta (--c) en vez del gris de antes.
   Son todas texto grande (36 px para arriba), asi que hasta el rojo y el
   magenta pasan el minimo de contraste de 3:1 que pide ese tamaño. */
.menu-lista a{
  display:inline-block;
  padding:.1em .22em;
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:"wdth" 62;
  font-size:clamp(2.3rem,7.5vw,4.6rem);
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--c,var(--hueso));
  /* Entran de a una, de abajo hacia arriba. El turno lo da --i. */
  opacity:0;
  translate:0 .35em;
  transition:
    opacity .34s var(--ease) calc(var(--i,0) * 45ms),
    translate .34s var(--ease) calc(var(--i,0) * 45ms),
    scale .22s var(--ease),
    filter .22s var(--ease);
}
.menu[data-abierto="true"] .menu-lista a{
  opacity:1;
  translate:0 0;
}

/* La activa va dentro de un recuadro, como en la referencia. */
.menu-lista a[aria-current="page"]{
  box-shadow:inset 0 0 0 2px currentColor;
}

@media (hover:hover) and (pointer:fine){
  .menu-lista a:hover{
    scale:1.06;
    /* El resplandor sale del color de la propia palabra, asi que cada una
       se enciende con el suyo sin escribir una regla por color. */
    filter:drop-shadow(0 0 18px color-mix(in srgb,currentColor 55%,transparent));
  }
}
.menu-lista a:focus-visible{scale:1.06}

/* Sin animacion de entrada para quien pidio menos movimiento: aparecen y ya. */
@media (prefers-reduced-motion:reduce){
  .menu-lista a{opacity:1;translate:0 0;transition:none}
}

.menu-pie{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  padding:var(--margen);
  font-size:.78rem;
  color:var(--humo);
}

/* En celular una palabra por linea, como hace la referencia. */
@media (max-width:720px){
  .menu-lista{
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
}

/* Mientras el menu esta abierto el fondo no debe poder desplazarse. */
body[data-menu="abierto"]{overflow:hidden}

/* ===========================================================================
   MOVIMIENTO REDUCIDO
   Todo lo que se clava, parpadea o se desplaza solo queda estatico.
   =========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  /* La regla de arriba dejaria el destello parado en su posicion final, que
     esta fuera de la carta. Aqui queda como un brillo fijo en diagonal. */
  .carta-destello{
    animation:none !important;
    background-position:48% 0;
    opacity:.55;
  }

  /* La tira se queda quieta donde empieza, no a mitad del ciclo. */
  .tira-pista{animation:none !important;translate:0 0 !important}
}