/* ============================================================
   CRUDO · styles.css
   Base del sitio: tokens de diseño, reset, tipografía, botones
   y animaciones genéricas. Los estilos de cada sección están
   en sections.css.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Colores de marca */
  --rojo:      #C8102E;   /* Rojo Crudo (primario) */
  --rojo-vivo: #E8334B;   /* Rojo del logo, para acentos sobre negro */
  --oro:       #F5A623;   /* Amarillo oro (kickers, destacados) */
  --negro:     #111111;   /* Fondo general */
  --negro-puro:#0B0B0B;   /* Fondo del frame del hero */
  --crema:     #F5F0E8;
  --crema-2:   #ECE4D6;
  --blanco:    #FFFFFF;

  /* Tipografías (Google Fonts, se cargan en index.html) */
  --font-display:'Anton','Archivo Black',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* Otros */
  --ease-crudo: cubic-bezier(.16,1,.3,1);
  --maxw: 1480px;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{ display:block; max-width:100%; }

::selection{ background:var(--rojo); color:var(--crema); }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* El atributo hidden siempre oculta, aunque la clase tenga display */
[hidden]{ display:none !important; }

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- 3. Tipografía ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.04em;
  line-height:0.88;
  text-transform:uppercase;
  margin:0;
}
.kicker{
  font-family:var(--font-body);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.72rem;
}

.rojo{ color:var(--rojo-vivo); }
.oro{ color:var(--oro); }

/* ---------- 4. Pills y botones ---------- */
.pill{
  display:inline-flex; align-items:center; gap:0.6em;
  border-radius:999px;
  padding:0.85em 1.5em;
  font-weight:700;
  font-size:0.98rem;
  border:none;
  line-height:1;
  transition:transform .35s var(--ease-crudo), background .25s, color .25s;
}
.pill-rojo{ background:var(--rojo); color:var(--crema); }
.pill-rojo:hover{ background:var(--rojo-vivo); transform:translateY(-2px); }
.pill-ghost{ background:transparent; color:var(--crema); border:1.5px solid rgba(245,240,232,.32); }
.pill-ghost:hover{ border-color:var(--crema); }

/* CTA grande con círculo + flecha */
.cta-big{
  display:inline-flex; align-items:center; gap:1.1rem;
  background:var(--rojo); color:var(--crema);
  border-radius:999px;
  padding:0.6rem 0.6rem 0.6rem 1.7rem;
  font-weight:800; font-size:1.05rem;
  border:none;
  transition:background .25s, transform .35s var(--ease-crudo);
}
.cta-big:hover{ background:var(--rojo-vivo); }
.hero-meta .cta-big:hover{ animation:vibrate .3s linear infinite; }
.cta-big .circ{
  width:3rem; height:3rem; border-radius:999px;
  background:var(--negro); color:var(--crema);
  display:grid; place-items:center;
  transition:transform .35s var(--ease-crudo);
}
.cta-big:hover .circ{ transform:scale(1.12) rotate(8deg); }

/* Íconos SVG inline: toman el tamaño de la fuente y el color del texto */
.ico{ width:1em; height:1em; flex:0 0 auto; }

/* ---------- 5. Layout ---------- */
.section{ position:relative; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,72px); }

/* ---------- 6. Animaciones base (las activa js/main.js) ---------- */

/* Reveal: fade + slide up al entrar en pantalla */
.reveal{ opacity:0; transform:translateY(34px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-crudo), transform .8s var(--ease-crudo);
}

/* WordsPullUp: cada palabra sube desde abajo (títulos) */
.wpu{ display:inline; }
.wpu .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-top:0.18em; margin-top:-0.18em; }
.wpu .w > span{
  display:inline-block;
  transform:translateY(108%);
  transition:transform .6s var(--ease-crudo);
}
.wpu.in .w > span{ transform:none; }

/* ScrollChars: el texto se "enciende" letra por letra al scrollear */
.chars span{ transition:color .3s linear, opacity .3s linear; }
.chars-word{ display:inline-block; }

@keyframes vibrate{
  0%,100%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(-1.5px,1px) rotate(-3deg); }
  50%{ transform:translate(1.5px,-1px) rotate(2deg); }
  75%{ transform:translate(-1px,-1px) rotate(-2deg); }
}

@keyframes imgShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* Sin JavaScript: mostrar todo el contenido sin animaciones */
.no-js .reveal,
.no-js .srow,
.no-js .pola{ opacity:1; transform:none; }
.no-js .pola{ transform:rotate(var(--rot)); }

/* Accesibilidad: respetar "reducir movimiento" del sistema */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .wpu .w > span{ transform:none !important; }
}