/* ============================================================
   VALENT — Landing
   Estilo: minimalista, alto contraste, mobile first.
   Paleta: negro / blanco / grises. Sin colores de marca extra.
   ============================================================ */

:root{
  --black:#0B0B0C;
  --ink:#131315;
  --white:#FFFFFF;
  --paper:#F4F4F3;
  --paper-2:#EAEAE8;
  --muted:#7A7A7E;
  --muted-dark:#9C9CA1;
  --line:rgba(11,11,12,.12);
  --line-dark:rgba(255,255,255,.14);

  --radius:14px;
  --radius-lg:22px;
  --gap:clamp(1.25rem, 4vw, 2rem);
  --pad-x:clamp(1.25rem, 5vw, 3.5rem);
  --section-y:clamp(3.25rem, 7.5vw, 5.5rem);

  --font:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:74px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:var(--font);
  font-size:clamp(1rem,.96rem + .3vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.98}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

.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}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--black);color:var(--white);padding:.75rem 1rem;
}
.skip-link:focus{left:.5rem;top:.5rem}

.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad-x)}

/* ---------- Tipografía utilitaria ---------- */
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;
  text-wrap:balance;   /* reparte las líneas parejo si la lista de disciplinas corta */
}
.section--dark .eyebrow{color:var(--muted-dark)}

.section__title{font-size:clamp(2.1rem,7.5vw,4.25rem)}
.section__text{margin-top:1.1rem;max-width:52ch;color:#3A3A3E}
.section--dark .section__text{color:#B6B6BA}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(244,244,243,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line)}

.header__inner{
  display:flex;align-items:center;gap:1rem;
  height:66px;
}

/* Logo: isotipo + wordmark vectorizados del logo oficial.
   Ambos heredan currentColor → negro sobre claro, blanco sobre oscuro. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.logo{display:inline-flex;align-items:center;gap:.6rem;margin-right:auto;color:inherit}
.logo__mark,.logo__word{display:block;fill:currentColor;flex:none;width:auto}
.logo__mark{height:21px;aspect-ratio:100/86.5}
.logo__word{height:10.5px;aspect-ratio:100/15.9;margin-top:1px}

/* Lockup vertical completo (footer) */
.logo-lockup{display:inline-block;color:inherit}
.logo-lockup svg{
  display:block;fill:currentColor;
  width:78px;height:auto;aspect-ratio:100/76.1;
}

.nav{display:none}
.site-header .header__cta{display:none}   /* se activa en ≥900px */

.nav-toggle{
  width:44px;height:44px;margin-right:-10px;
  display:grid;place-content:center;gap:6px;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--black);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Menú mobile */
@media (max-width:899px){
  .nav{
    position:fixed;inset:66px 0 auto 0;
    display:block;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:1rem var(--pad-x) 2rem;
    transform:translateY(-8px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav a{
    display:block;padding:.9rem 0;
    font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
    border-bottom:1px solid var(--line);
  }
  .nav a:last-child{border-bottom:0}
}

@media (min-width:900px){
  .nav-toggle{display:none}
  .nav{display:flex;gap:2rem;margin-right:1.75rem}
  .nav a{
    font-size:.875rem;font-weight:600;position:relative;padding-block:.25rem;
  }
  .nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .3s var(--ease);
  }
  .nav a:hover::after{transform:scaleX(1)}
  .site-header .header__cta{display:inline-flex}
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --btn-bg:var(--black);--btn-fg:var(--white);--btn-bd:var(--black);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;min-height:50px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:999px;
  font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;text-align:center;
  transition:transform .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--light{--btn-bg:var(--white);--btn-fg:var(--black);--btn-bd:var(--white)}
.btn--dark{--btn-bg:var(--black);--btn-fg:var(--white);--btn-bd:var(--black)}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;--btn-bd:currentColor}
.btn--ghost:hover{--btn-bg:currentColor}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.btn--sm{padding:.6rem 1.15rem;min-height:40px;font-size:.8125rem}
.btn--full{width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--black);color:var(--white);
  padding-top:clamp(3rem,10vw,5.5rem);
  padding-bottom:clamp(3.5rem,10vw,6rem);
  overflow:hidden;
}
.hero__inner{display:grid;gap:clamp(2rem,7vw,3rem)}

.hero__title{
  font-size:clamp(2.9rem,12vw,6.5rem);
  letter-spacing:-.045em;
}
.hero__title em{font-style:normal;color:var(--muted-dark)}

.hero__text{
  margin-top:1.5rem;max-width:46ch;
  color:#B6B6BA;font-size:1.05rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__actions .btn{flex:1 1 auto;min-width:min(100%,15rem)}

.hero__media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--paper-2);
}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.06);
  border-radius:inherit;
}
.hero__media img{
  width:100%;
  aspect-ratio:4/3;object-fit:cover;object-position:center 52%;
  filter:grayscale(1) contrast(1.04);
}

@media (min-width:900px){
  .hero__inner{
    grid-template-columns:1.05fr 1fr;align-items:center;
    padding-block:1rem;
  }
  .hero__media img{aspect-ratio:1/1}
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{
  background:var(--black);color:var(--white);
  border-top:1px solid var(--line-dark);
  padding-block:.9rem;overflow:hidden;
}
.ticker__track{
  display:flex;width:max-content;
  animation:slide var(--ticker-dur,26s) linear infinite;
  will-change:transform;
}
/* El padding-right hace de separación entre mitades: así el ancho exterior de
   cada mitad es exactamente el 50% del track y el salto queda invisible. */
.ticker__half{display:flex;align-items:center;gap:1.5rem;padding-right:1.5rem}
.ticker span{
  font-size:.8125rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
.ticker i{width:5px;height:5px;background:currentColor;border-radius:50%;flex:none;opacity:.5}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SECCIONES
   ============================================================ */
.section{padding-block:var(--section-y)}
/* Para bloques cortos, donde el alto completo deja demasiado aire muerto. */
.section--compacta{padding-block:clamp(2.5rem,5.5vw,4rem)}

/* Dos secciones del MISMO color pegadas: el aire de una y el de la otra se
   suman y queda un vacío enorme, porque no hay cambio de fondo que lo explique.
   Esta clase sube la sección media tanda, así el corte se siente parejo al
   resto. Se mide sobre --section-y, así que acompaña sola en cada pantalla.
   Ojo: sólo para fondos iguales; sobre un fondo distinto se superpondrían. */
.section--continua{margin-top:calc(var(--section-y) * -.75)}
.section--dark{background:var(--black);color:var(--white)}
.section__head{max-width:44rem;margin-bottom:clamp(1.75rem,5vw,2.75rem)}

/* ---------- Productos ---------- */
.products{display:grid;gap:clamp(1.25rem,4vw,1.75rem)}

.product{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product:hover{transform:translateY(-4px);box-shadow:0 18px 50px -24px rgba(0,0,0,.45)}

.product__media{
  position:relative;background:var(--paper-2);
  aspect-ratio:4/3;overflow:hidden;
}
.product__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform .6s var(--ease), opacity .3s var(--ease);
}
.product:hover .product__media img{transform:scale(1.03)}
.product__media img.is-swapping{opacity:0}

/* Ficha sin foto: isotipo de marca sobre trama diagonal */
.product__media--brand{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,var(--paper-2) 0 12px,var(--paper) 12px 24px);
}
.ph{width:34%;max-width:130px;height:auto;fill:var(--black);opacity:.14}

.tag{
  position:absolute;top:.85rem;left:.85rem;
  background:rgba(11,11,12,.85);color:var(--white);
  padding:.35rem .7rem;border-radius:999px;
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}

.product__body{display:flex;flex-direction:column;gap:1.15rem;padding:clamp(1.25rem,5vw,1.75rem);flex:1}
/* Nombre de línea: "Valent" chico arriba y el nombre propio grande debajo,
   así la marca acompaña sin robarle protagonismo al artículo. */
.product__name{
  font-size:clamp(1.5rem,5vw,1.9rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:-.02em;
}
.product__name span{
  display:block;margin-bottom:.2rem;
  font-size:.42em;font-weight:700;letter-spacing:.2em;color:var(--muted);
}
.product__linea{
  margin-top:.45rem;font-size:.8125rem;font-weight:600;
  letter-spacing:.02em;color:var(--muted);
}
.product__desc{color:#4A4A4E;font-size:.9375rem;line-height:1.55}

/* El aire que sobra en la ficha se acumula ARRIBA de las opciones, no abajo.
   Así los chips y el precio quedan a la misma altura en las cuatro fichas
   aunque las descripciones tengan distinto largo, sin fijarles una altura. */
.opt{display:flex;flex-direction:column;gap:.55rem;margin-top:auto}
.opt + .opt{margin-top:0}
.opt__label{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  padding:.55rem 1rem;min-height:42px;
  border:1px solid var(--line);border-radius:999px;
  font-size:.875rem;font-weight:600;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{border-color:var(--black)}
.chip.is-active{background:var(--black);color:var(--white);border-color:var(--black)}

.product__foot{display:flex;flex-direction:column;gap:.85rem}
.price{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
/* "Consultar precio" no es una cifra: no tiene que pesar como una. */
.price--consultar{font-size:.9375rem;font-weight:600;color:var(--muted)}

@media (min-width:760px){
  .products{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1280px){
  .products{grid-template-columns:repeat(4,1fr)}
  /* Con cuatro fichas en fila la columna se angosta y los tres chips de onzas
     caen a dos renglones por 17px. Un poco menos de aire a los costados y entran. */
  .products .chip{padding-left:12px;padding-right:12px}
}

/* ---------- Features ---------- */
.features{display:grid;gap:clamp(1.5rem,5vw,2rem)}
.feature{
  padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:.6rem;
}
.feature svg{
  width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.4rem;
}
.feature h3{font-size:1.15rem;letter-spacing:-.02em}
.feature p{color:#A8A8AD;font-size:.9375rem;line-height:1.55}

@media (min-width:640px){.features{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.features{grid-template-columns:repeat(4,1fr)}}

/* ---------- Quiénes somos ---------- */
.nosotros__grid{display:grid;gap:clamp(2rem,6vw,4rem)}
.nosotros__col .section__title{margin-bottom:1.75rem}

/* Sello de disciplinas: el isotipo apoyado contra el rótulo de la tienda. */
.nosotros__sello{
  display:flex;align-items:center;gap:.9rem;
  padding-top:1.25rem;border-top:1px solid var(--line);
}
.nosotros__sello svg{width:36px;height:auto;fill:var(--black);flex:none}
.nosotros__sello strong{
  display:block;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
}
.nosotros__sello span{
  display:block;margin-top:.15rem;font-size:.8125rem;color:var(--muted);
}

.nosotros__texto{display:grid;gap:1.1rem;max-width:62ch}
.nosotros__texto p{color:var(--muted);line-height:1.7}
/* El primer párrafo entra como bajada, no como un párrafo más. */
.nosotros__entrada{
  font-size:clamp(1.0625rem,2.4vw,1.25rem);font-weight:600;
  color:var(--black)!important;line-height:1.5;letter-spacing:-.01em;
}
.nosotros__cierre{
  margin-top:.4rem;padding-left:1rem;border-left:2px solid var(--black);
  color:var(--black)!important;font-weight:600;
}

@media (min-width:900px){
  .nosotros__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .nosotros__col{position:sticky;top:calc(66px + 2rem)}
}

/* ---------- Guía ---------- */
.guide{display:grid;gap:clamp(2rem,7vw,4rem)}
.guide__copy .btn{margin-top:1.75rem}

.guide__table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.guide table{width:100%;border-collapse:collapse;min-width:320px}
.guide th,.guide td{
  text-align:left;padding:1.05rem .5rem;
  border-bottom:1px solid var(--line);
  font-size:.9375rem;
}
.guide thead th{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.guide tbody th{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.guide tbody td{color:#4A4A4E}
.guide tbody tr:last-child th,.guide tbody tr:last-child td{border-bottom:0}

@media (min-width:900px){
  .guide{grid-template-columns:1fr 1fr;align-items:center}
}

/* ---------- CTA marca ---------- */
.cta{position:relative;overflow:hidden}
.cta__watermark{
  position:absolute;right:-14%;top:50%;transform:translateY(-50%);
  width:min(58vw,420px);height:auto;
  fill:var(--white);opacity:.045;pointer-events:none;
}
.cta__inner{position:relative;max-width:56rem}
@media (min-width:900px){
  .cta__watermark{right:2%;width:min(34vw,400px)}
}
.cta__title{font-size:clamp(2.1rem,8vw,4.5rem);letter-spacing:-.04em}
.cta__text{margin-top:1.5rem;max-width:48ch;color:#B6B6BA}
.cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.cta__actions .btn{flex:1 1 auto;min-width:min(100%,14rem)}
@media (min-width:640px){.cta__actions .btn{flex:0 0 auto;min-width:0}}

/* ---------- FAQ ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.35rem 0;cursor:pointer;list-style:none;
  font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .3s var(--ease);
}
.acc details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.acc p{padding-bottom:1.5rem;max-width:62ch;color:#4A4A4E;font-size:.9375rem}

/* ---------- Contacto ---------- */
.contact{background:var(--paper-2)}
.contact__inner{display:grid;gap:clamp(1.5rem,5vw,3rem)}
.contact__list{border-top:1px solid var(--line)}
.contact__list li{border-bottom:1px solid var(--line)}
.contact__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.05rem 0;transition:padding-left .25s var(--ease);
}
.contact__list a:hover{padding-left:.5rem}
.contact__k{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.contact__v{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;text-align:right}
@media (min-width:900px){.contact__inner{grid-template-columns:1fr 1fr;align-items:center}}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--black);color:var(--white);padding-block:clamp(3rem,9vw,4.5rem)}
.footer__inner{display:grid;gap:1.25rem}
.footer__claim{color:var(--muted-dark);font-size:.9375rem;max-width:24ch}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.5rem}
.footer__nav a{font-size:.875rem;font-weight:600;color:#D6D6DA}
.footer__nav a:hover{color:var(--white)}
.footer__legal{
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);
  font-size:.75rem;color:var(--muted-dark);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem .75rem;
}
.footer__legal p{margin:0}
/* Crédito del estudio: presente pero sin competir con la marca. */
.footer__credito{display:inline-flex;align-items:center;gap:.5rem;opacity:.5;transition:opacity .2s ease}
.footer__credito:hover{opacity:.85}
.footer__credito img{height:28px;width:auto;display:block}

@media (min-width:900px){
  .footer__inner{grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
  .footer__claim{margin:0}
  .footer__nav{margin:0;justify-content:flex-end}
  .footer__legal{grid-column:1/-1}
}

/* ============================================================
   FAB WhatsApp
   ============================================================ */
.fab{
  position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:90;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--black);color:var(--white);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  transform:translateY(120%);opacity:0;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.fab.is-visible{transform:none;opacity:1}
.fab:hover{transform:translateY(-3px)}
.fab svg{width:26px;height:26px;fill:currentColor}
@media (min-width:900px){.fab{right:1.75rem;bottom:1.75rem}}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
/* Sólo se ocultan si el JS está activo: sin JS, todo se ve igual. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .fab{transform:none;opacity:1}
}