/* ============================================================
   Birrous — Landing v2 · "Editorial Broadsheet"
   Estilo editorial financiero: serif ultrafina a gran escala,
   un único acento (naranja), duotono periwinkle, layout asimétrico.
   Animación: scroll nativo + IntersectionObserver + CSS.
   ============================================================ */

:root{
  --linen:#F6F5F1;        /* lienzo casi blanco, cálido */
  --paper:#FFFFFF;
  --ink:#2E3E48;          /* tinta (pizarra de marca) */
  --ink-soft:#48565F;
  --mist:#8B95A0;         /* texto secundario */
  --accent:#FFAC40;       /* único acento (naranja) */
  --accent-deep:#F59012;
  --blue:#566DB3;         /* periwinkle (duotono / detalles) */
  --line:rgba(46,62,72,.14);
  --line-soft:rgba(46,62,72,.08);
  --maxw:1480px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --grotesk:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--linen); color:var(--ink);
  font-family:var(--grotesk); font-weight:400;
  font-size:clamp(15px,1.04vw,17px); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* grano sutil */
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,72px); }

/* ---------- Tipografía ---------- */
.display{ font-family:var(--serif); font-weight:300; line-height:.92; letter-spacing:-.02em; }
.display em{ font-style:italic; font-weight:300; }
.serif-italic{ font-family:var(--serif); font-style:italic; font-weight:300; }

.eyebrow{ font-family:var(--grotesk); font-weight:500; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

.tick{ display:inline-block; width:46px; height:2px; background:var(--accent); vertical-align:middle; }

.section-label{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); font-weight:500; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-soft); line-height:1.55; max-width:46ch; }
.muted{ color:var(--mist); }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--grotesk); font-weight:500;
  font-size:.95rem; line-height:1; cursor:pointer; transition:transform .4s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border-color .3s; }
.btn svg{ transition:transform .4s cubic-bezier(.16,1,.3,1); }
.btn:hover svg{ transform:translateX(5px); }
.btn--fill{ background:var(--accent); color:#23170a; padding:1.05rem 1.7rem; border-radius:2px;
  box-shadow:0 1px 0 var(--accent-deep), 0 14px 24px -16px rgba(245,144,18,.8); }
.btn--fill:hover{ background:var(--accent-deep); }
.btn--ghost{ color:var(--ink); padding:1.05rem .2rem; position:relative; }
.btn--ghost::after{ content:""; position:absolute; left:.2rem; right:.2rem; bottom:.75rem; height:1px;
  background:currentColor; transform:scaleX(.18); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1); opacity:.5; }
.btn--ghost:hover::after{ transform:scaleX(1); opacity:1; }
.btn--light{ color:var(--linen); }
.btn--light.btn--ghost::after{ background:var(--linen); }

/* ============================================================
   TOPBAR (dateline broadsheet)
   ============================================================ */
.topbar{ border-bottom:1px solid var(--line); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; gap:1rem; }
.topbar span{ white-space:nowrap; }
.topbar .mid{ color:var(--mist); }
@media (max-width:720px){ .topbar .hide-sm{ display:none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; top:38px; left:0; right:0; z-index:40; transition:background .35s, border-color .35s, top .35s, box-shadow .35s; border-bottom:1px solid transparent; }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav.stuck{ top:0; background:rgba(246,245,241,.86); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--line); }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand svg{ height:34px; width:34px; }
.brand-word{ font-family:var(--grotesk); font-weight:600; letter-spacing:.2em; font-size:15px; }
.brand-word b{ color:var(--accent-deep); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:2.2rem; list-style:none; font-size:.92rem; }
.nav-links a{ position:relative; color:var(--ink-soft); transition:color .3s; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.nav-links a:hover{ color:var(--ink); } .nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:1.2rem; }
.nav-burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:2px; background:none; place-items:center; color:var(--ink); }

/* nav claro sobre el hero (no stuck) */
.nav:not(.stuck) .brand-word, .nav:not(.stuck) .nav-links a{ color:rgba(246,245,241,.92); }
.nav:not(.stuck) .brand-word b{ color:var(--accent); }
.nav:not(.stuck) .nav-links a:hover{ color:#fff; }
.nav:not(.stuck) .brand svg .iso-mark{ fill:var(--linen); }
.nav:not(.stuck) .nav-burger{ color:var(--linen); border-color:rgba(246,245,241,.4); }

.mobile-menu{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--ink); color:var(--linen);
  z-index:60; transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); padding:6rem 2rem 2rem; display:flex; flex-direction:column; gap:.3rem; }
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--serif); font-weight:300; font-size:1.9rem; padding:.5rem 0; border-bottom:1px solid rgba(246,245,241,.12); }
.mobile-menu a:last-of-type{ border:0; }
.menu-backdrop{ position:fixed; inset:0; background:rgba(46,62,72,.5); z-index:55; opacity:0; pointer-events:none; transition:opacity .4s; }
.menu-backdrop.open{ opacity:1; pointer-events:auto; }
@media (max-width:900px){ .nav-links, .nav-cta .btn{ display:none; } .nav-burger{ display:grid; } }

/* ============================================================
   HERO — gran imagen de fondo (duotono) + animación
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); color:var(--linen); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{ position:absolute; inset:-2%; background-size:cover; background-position:center; opacity:0;
  animation:heroSlide 21s ease-in-out infinite; will-change:opacity,transform; }
.hero__slide:nth-child(1){ animation-name:heroSlideFirst; animation-delay:0s; }
.hero__slide:nth-child(2){ animation-delay:7s; }
.hero__slide:nth-child(3){ animation-delay:14s; }
@keyframes heroSlide{
  0%{ opacity:0; transform:scale(1.04); } 5%{ opacity:1; } 28%{ opacity:1; }
  33%{ opacity:0; transform:scale(1.13); } 100%{ opacity:0; transform:scale(1.13); }
}
/* primera slide visible al instante y reaparece antes de repetir (sin parpadeo) */
@keyframes heroSlideFirst{
  0%{ opacity:1; transform:scale(1.04); } 28%{ opacity:1; }
  33%{ opacity:0; transform:scale(1.13); } 93%{ opacity:0; transform:scale(1.04); } 100%{ opacity:1; transform:scale(1.04); }
}
.hero__grad{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(25,34,46,.35) 0%, rgba(25,34,46,.16) 32%, rgba(25,34,46,.5) 66%, rgba(25,34,46,.9) 100%),
    linear-gradient(90deg, rgba(25,34,46,.5) 0%, rgba(25,34,46,.08) 52%, transparent 100%); }
.hero__vsig{ position:absolute; top:0; bottom:0; right:clamp(16px,4vw,54px); display:flex; align-items:center; z-index:2; }
.hero__vsig span{ writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(246,245,241,.6); }
@keyframes kenburns{ from{ transform:scale(1) translateY(0); } to{ transform:scale(1.12) translateY(-1.5%); } }

.hero .wrap{ position:relative; z-index:2; padding-bottom:clamp(3rem,7vh,6rem); padding-top:9rem; width:100%; }
.hero__eyebrow{ color:rgba(246,245,241,.85); margin-bottom:1.6rem; }
.hero__eyebrow .dot{ background:var(--accent); }
.hero-title{ font-family:var(--serif); font-weight:200; line-height:.94; letter-spacing:-.025em;
  font-size:clamp(2.9rem,8.4vw,8.6rem); max-width:16ch; text-shadow:0 2px 44px rgba(25,34,46,.5); }
.hero-title em{ font-style:italic; font-weight:200; color:var(--linen); }
.hero__sub{ margin-top:2rem; max-width:42ch; font-size:clamp(1rem,1.35vw,1.22rem); color:rgba(246,245,241,.85); line-height:1.55; text-shadow:0 1px 22px rgba(25,34,46,.55); }
.hero__actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }
.hero__scroll{ margin-top:3.2rem; display:flex; align-items:center; gap:.8rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,245,241,.6); }
.hero__scroll .bar{ width:46px; height:1px; background:rgba(246,245,241,.5); position:relative; overflow:hidden; }
.hero__scroll .bar::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-100%); animation:scrollbar 2.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes scrollbar{ 0%{ transform:translateX(-100%);} 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }

/* máscara de revelado para titulares */
.mask{ display:block; overflow:hidden; }
.mask > span{ display:block; will-change:transform; }
.js .mask > span{ transform:translateY(115%); transition:transform 1.05s cubic-bezier(.16,1,.3,1); }
.js .mask.in > span, .js .in .mask > span{ transform:translateY(0); }

/* ============================================================
   MARQUEE (ticker editorial)
   ============================================================ */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:1.1rem 0; background:var(--linen); }
.marquee__track{ display:inline-flex; white-space:nowrap; gap:3rem; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.3rem,2.4vw,2rem); color:var(--ink); display:inline-flex; align-items:center; gap:3rem; }
.marquee span::after{ content:"—"; color:var(--accent); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECCIONES
   ============================================================ */
.section{ padding-block:clamp(5rem,11vh,9rem); }
.section--tight{ padding-block:clamp(3.5rem,7vh,6rem); }
.kicker{ display:flex; align-items:center; gap:1rem; margin-bottom:2.4rem; }
.kicker .num{ font-size:.74rem; letter-spacing:.18em; color:var(--mist); }

/* Manifiesto */
.manifesto{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(2rem,6vw,6rem); align-items:end; }
.manifesto__title{ font-size:clamp(2rem,4.6vw,4.4rem); max-width:18ch; }
.manifesto__title em{ color:var(--ink); }
.manifesto__aside{ padding-bottom:.5rem; }
.manifesto__img{ border-radius:14px; overflow:hidden; aspect-ratio:4/5; margin-bottom:1.6rem; }
.manifesto__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.02); }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 1rem; margin-top:3.5rem; border-top:1px solid var(--line); padding-top:2.2rem; }
.stat .n{ font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; letter-spacing:-.02em; }
.stat .l{ font-size:.85rem; color:var(--mist); margin-top:.5rem; }
@media (max-width:880px){ .manifesto{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(2,1fr); } }

/* Servicios — lista editorial */
.svc{ border-top:1px solid var(--line); }
.svc__row{ display:grid; grid-template-columns:5rem 1.3fr 1.4fr auto; gap:1.5rem; align-items:baseline;
  padding:clamp(1.6rem,3vw,2.5rem) 0; border-bottom:1px solid var(--line); position:relative; transition:padding-left .45s cubic-bezier(.16,1,.3,1); }
.svc__row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); opacity:0; transition:opacity .4s; }
.svc__row:hover{ padding-left:1.4rem; }
.svc__row:hover::before{ opacity:1; width:3px; }
.svc__num{ font-size:.8rem; color:var(--mist); letter-spacing:.1em; padding-top:.6rem; }
.svc__name{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.2vw,2.9rem); line-height:1; letter-spacing:-.02em; }
.svc__desc{ color:var(--ink-soft); max-width:44ch; font-size:.98rem; }
.svc__arrow{ align-self:center; color:var(--mist); transition:transform .45s cubic-bezier(.16,1,.3,1), color .3s; }
.svc__row:hover .svc__arrow{ transform:translate(6px,-6px); color:var(--accent-deep); }
.svc__row:hover .svc__name{ font-style:italic; }
@media (max-width:880px){
  .svc__row{ grid-template-columns:2.5rem 1fr; }
  .svc__desc{ grid-column:2; margin-top:.6rem; } .svc__arrow{ display:none; }
}

/* Imagen grande con cita */
.feature{ position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; color:var(--linen); background:var(--ink); }
.feature__img{ position:absolute; inset:-3%; background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.04); will-change:transform; }
.feature__grad{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(46,62,72,.86) 0%, rgba(46,62,72,.45) 55%, rgba(46,62,72,.2) 100%); }
.feature .wrap{ position:relative; z-index:2; }
.feature__quote{ font-family:var(--serif); font-weight:300; font-style:italic; line-height:1.05; letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.4vw,4.2rem); max-width:20ch; }
.feature__by{ margin-top:1.8rem; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,245,241,.7); }

/* Proceso */
.proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem); }
.proc__item{ border-top:2px solid var(--ink); padding-top:1.4rem; }
.proc__n{ font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,5vw,4rem); line-height:1; color:var(--accent-deep); }
.proc__t{ font-weight:600; margin-top:1rem; font-size:1.12rem; }
.proc__d{ color:var(--ink-soft); margin-top:.5rem; font-size:.95rem; }
@media (max-width:880px){ .proc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .proc{ grid-template-columns:1fr; } }

/* Nosotros */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.about__img{ border-radius:14px; overflow:hidden; aspect-ratio:5/6; }
.about__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03); }
.about__title{ font-size:clamp(1.9rem,4vw,3.6rem); max-width:16ch; }
.checks{ list-style:none; margin-top:2rem; display:grid; gap:1rem; }
.checks li{ display:flex; gap:.9rem; align-items:flex-start; color:var(--ink-soft); }
.checks svg{ flex:none; color:var(--accent-deep); margin-top:.2rem; }
.offices{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.4rem; border-top:1px solid var(--line); padding-top:1.8rem; }
.office h4{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist); margin-bottom:.5rem; }
.office p{ font-size:.95rem; color:var(--ink-soft); }
@media (max-width:880px){ .about{ grid-template-columns:1fr; } .about__img{ aspect-ratio:4/3; order:-1; } }

/* Testimonios */
.tst{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.tst__lead{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.15; letter-spacing:-.01em; }
.tst__lead .by{ display:block; font-style:normal; font-family:var(--grotesk); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin-top:1.6rem; }
.tst__list{ display:grid; gap:1.6rem; }
.tst__item{ border-top:1px solid var(--line); padding-top:1.4rem; }
.tst__item p{ color:var(--ink-soft); }
.tst__item .who{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); margin-top:.8rem; }
.tst__stars{ color:var(--accent); letter-spacing:.2em; font-size:.8rem; }
@media (max-width:880px){ .tst{ grid-template-columns:1fr; } }

/* Contacto */
.contact{ background:var(--ink); color:var(--linen); }
.contact .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); }
.contact__title{ font-size:clamp(2.4rem,5.5vw,5rem); }
.contact__title em{ color:var(--accent); }
.contact__info{ margin-top:2.4rem; display:grid; gap:1.1rem; }
.contact__info a, .contact__info p{ color:rgba(246,245,241,.82); display:flex; gap:.8rem; align-items:flex-start; }
.contact__info a:hover{ color:var(--accent); }
.field{ position:relative; margin-bottom:1.8rem; }
.field input, .field textarea{ width:100%; background:none; border:0; border-bottom:1px solid rgba(246,245,241,.28);
  color:var(--linen); font-family:var(--grotesk); font-size:1rem; padding:.7rem 0; transition:border-color .3s; }
.field textarea{ resize:vertical; min-height:90px; }
.field label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,245,241,.55); }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-bottom-color:#f08a8a; }
.field-error{ color:#f3a8a8; font-size:.78rem; min-height:1rem; margin-top:.3rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ color:var(--accent); font-size:.85rem; min-height:1.2rem; margin-top:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.field select{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(246,245,241,.28);
  color:var(--linen); font-family:var(--grotesk); font-size:1rem; padding:.7rem 1.4rem .7rem 0; transition:border-color .3s;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23BFC7D0' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .1rem center; }
.field select:focus{ outline:none; border-bottom-color:var(--accent); }
.field select option{ color:#2E3E48; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:rgba(246,245,241,.7); cursor:pointer; margin-top:.2rem; }
.consent input{ margin-top:.2rem; accent-color:var(--accent); width:16px; height:16px; flex:none; }
.consent a{ color:var(--linen); text-decoration:underline; text-underline-offset:2px; }
.consent a:hover{ color:var(--accent); }
.cf-turnstile{ margin:1.4rem 0 .4rem; min-height:65px; }
button[data-submit]:disabled{ cursor:wait; }
.form-success{ border:1px solid rgba(246,245,241,.16); padding:clamp(1.6rem,3vw,2.4rem); }
.form-success__mark{ width:46px; height:46px; border-radius:50%; background:var(--accent); color:#23170A;
  display:grid; place-items:center; font-size:1.35rem; font-weight:700; margin-bottom:1.2rem; }
@media (max-width:880px){ .contact .wrap{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }

/* Footer */
.footer{ background:var(--ink); color:rgba(246,245,241,.7); border-top:1px solid rgba(246,245,241,.12); }
.footer .wrap{ padding-block:3.5rem; }
.footer__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; }
.footer .brand-word{ color:var(--linen); }
.footer__nav{ display:flex; gap:2rem; flex-wrap:wrap; font-size:.9rem; }
.footer__nav a:hover{ color:var(--accent); }
.footer__deco{ height:54px; opacity:.85; margin-top:1.5rem; }
.footer__btm{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(246,245,241,.12); font-size:.78rem; color:rgba(246,245,241,.5); letter-spacing:.04em; }

/* WhatsApp flotante */
.fab{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:50; width:3.4rem; height:3.4rem; border-radius:50%;
  display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:transform .3s; }
.fab:hover{ transform:scale(1.08) translateY(-2px); }

/* ============================================================
   REVELADO (IntersectionObserver añade .in)
   ============================================================ */
.js [data-animate]{ opacity:0; transform:translateY(30px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.js [data-animate].in{ opacity:1; transform:none; }
.js .reveal-img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.js .reveal-img.in{ clip-path:inset(0 0 0 0); }
.js [data-animate] .tick{ transform:scaleX(0); transform-origin:left; transition:transform .9s .15s cubic-bezier(.16,1,.3,1); }
.js [data-animate].in .tick{ transform:scaleX(1); }

/* parallax nativo (scroll-driven) donde el navegador lo soporte */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .feature__img{ animation:featParallax linear both; animation-timeline:view(); animation-range:cover; }
    @keyframes featParallax{ from{ transform:translateY(-7%);} to{ transform:translateY(7%);} }
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .hero__slide{ opacity:0 !important; }
  .hero__slide:first-child{ opacity:1 !important; }
  .js [data-animate]{ opacity:1 !important; transform:none !important; }
  .js .mask > span{ transform:none !important; }
  .js .reveal-img{ clip-path:none !important; }
  .js [data-animate] .tick{ transform:none !important; }
}