/* ==========================================================================
   SALINAS GRID — Sistema de diseño v1
   Paleta y reglas: Etapa A2. Mobile-first (base 375px).
   ========================================================================== */

:root{
  --blanco-sal:#FAF8F4;
  --grafito:#1C1F22;
  --rosa-salina:#D98E80;
  --rosa-salina-oscuro:#C67465;
  --azul-poza:#22313A;
  --piedra:#E5E1D8;
  --bruma:#8A9096;
  --dorado:#C9A961;
  --verde-agua:#7FA694;
  --font-display:"Bricolage Grotesque","Segoe UI",sans-serif;
  --font-body:"Figtree",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-voice:"Instrument Serif",Georgia,serif;
  --font-voice-read:"Lora",Georgia,serif;
  --r-sm:12px; --r-md:18px; --r-lg:26px;
  --maxw:1160px;
  --pad-x:20px;
  --sec-y:88px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(min-width:900px){
  :root{ --pad-x:48px; --sec-y:140px; }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--blanco-sal);
  color:var(--grafito);
  font-family:var(--font-body);
  font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------- Tipografía ---------- */
h1,h2{ font-family:var(--font-display); font-weight:540; letter-spacing:-.018em; }
h3{ font-family:var(--font-body); font-weight:600; letter-spacing:-.01em; }
strong,b{ font-weight:600; }
h2{ transition:color .35s var(--ease); }
:not(.dark) .wrap:hover > h2{ color:#2A3A34; }
.dark h2{ color:var(--blanco-sal) !important; }
h1{ font-size:clamp(2.5rem,7.5vw,4.6rem); line-height:1.05; }
h2{ font-size:clamp(1.8rem,4.3vw,2.75rem); line-height:1.18; }
h3{ font-size:clamp(1.3rem,3vw,1.65rem); line-height:1.3; font-weight:500; }
.brand-voice{ font-family:var(--font-voice); font-style:italic; font-weight:400; letter-spacing:0; }

.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bruma); display:block; margin-bottom:1.1rem;
}
.eyebrow--active{ color:var(--rosa-salina); }

.lead{ font-size:1.08rem; color:var(--grafito); max-width:34em; }
.muted{ color:var(--bruma); }
.small{ font-size:.9rem; }

/* ---------- Estructura: la retícula visible ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--sec-y); }
.section--line-top{ border-top:0; position:relative; }
.section--line-top::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(720px,80%); height:1px; background:linear-gradient(to right,transparent,var(--piedra) 30%,var(--piedra) 70%,transparent); opacity:.7; }

/* bloques "tanque": el rasgo de la marca */
.tank{
  border:1.5px solid transparent; background-image:linear-gradient(#fff,#fff),
  linear-gradient(135deg, rgba(217,142,128,.5), rgba(201,169,97,.55), rgba(127,166,148,.5));
  background-origin:border-box; background-clip:padding-box, border-box;
  padding:28px 24px; border-radius:var(--r-lg);
}
@media(min-width:900px){ .tank{ padding:40px 36px; } }
.tank-grid{ display:grid; gap:14px; }
.tank-grid > *{
  border:1.5px solid transparent; background-image:linear-gradient(#fff,#fff),
  linear-gradient(135deg, rgba(217,142,128,.42), rgba(201,169,97,.48), rgba(127,166,148,.42));
  background-origin:border-box; background-clip:padding-box, border-box;
  border-radius:var(--r-md); padding:26px 24px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-image .35s;
}
.tank-grid > *:hover{
  transform:translateY(-6px) scale(1.015);
  background-image:linear-gradient(#fff,#fff),
  linear-gradient(135deg, rgba(217,142,128,.75), rgba(201,169,97,.85), rgba(127,166,148,.75));
  box-shadow:0 18px 40px -14px rgba(201,169,97,.4), 0 0 0 5px rgba(201,169,97,.12);
}
@media(min-width:900px){ .tank-grid{ grid-template-columns:repeat(var(--cols,4),1fr); gap:16px; } }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--blanco-sal) 92%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--piedra);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; text-decoration:none; letter-spacing:-.01em; }
.logo span{ color:var(--rosa-salina); }
.nav-toggle{ background:none; border:1px solid var(--piedra); width:44px; height:44px; cursor:pointer; display:grid; place-items:center; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--grafito); position:relative; transition:transform .2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; }

.nav-links{ display:none; align-items:center; gap:2rem; list-style:none; }
.nav-links a:not(.btn){ text-decoration:none; font-size:.95rem; color:var(--grafito); opacity:.85; position:relative; padding-bottom:4px; transition:opacity .18s, transform .25s var(--ease); }
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:linear-gradient(to right,var(--rosa-salina),var(--dorado)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); border-radius:2px; }
.nav-links a:not(.btn):hover{ opacity:1; transform:translateY(-1px); }
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); }

/* Regra final e decisiva: acima de 900px, SEMPRE mostra os links e SEMPRE esconde o botão ☰ */
@media(min-width:900px){
  .nav-links{ display:flex !important; }
  .nav-toggle{ display:none !important; }
}

.mobile-menu{ display:none; border-top:1px solid var(--piedra); background:var(--blanco-sal); }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding:16px var(--pad-x); text-decoration:none; border-bottom:1px solid var(--piedra); font-size:1rem; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; position:relative; overflow:hidden;
  font-family:var(--font-body); font-weight:560; font-size:.98rem;
  padding:16px 32px; min-height:44px; border-radius:999px;
  text-decoration:none; cursor:pointer; border:none;
  color:#fff; background:linear-gradient(115deg,var(--rosa-salina) 0%,var(--rosa-salina-oscuro) 55%,var(--dorado) 130%);
  background-size:160% 100%; background-position:0 0;
  transition:transform .25s var(--ease), box-shadow .35s var(--ease), background-position .5s var(--ease);
  box-shadow:0 2px 12px -6px rgba(217,142,128,.4);
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-3px);
  background-position:95% 0;
  box-shadow:0 12px 34px -8px rgba(217,142,128,.6), 0 4px 14px -6px rgba(201,169,97,.4), 0 0 0 6px rgba(217,142,128,.12);
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  background-size:220% 100%; background-position:130% 0;
  transition:background-position .7s ease;
}
.btn:hover::after,.btn:focus-visible::after{ background-position:-30% 0; }
.btn > span{ position:relative; z-index:1; }
.btn > span::after{
  content:"→"; display:inline-block; margin-left:10px;
  transition:transform .25s var(--ease);
}
.btn:hover > span::after,.btn:focus-visible > span::after{ transform:translateX(5px); }
.btn--ghost{ background:transparent; color:var(--grafito); border:1.5px solid var(--grafito); box-shadow:none; }
.btn--ghost::after{ background:var(--grafito); background-size:auto; transform:translateX(-101%); transition:transform .28s var(--ease); }
.btn--ghost:hover::after,.btn--ghost:focus-visible::after{ transform:translateX(0); background-position:0 0; }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--blanco-sal); box-shadow:0 8px 22px -8px rgba(28,31,34,.35); }
.btn--nav{ padding:11px 20px; font-size:.9rem; }
.btn--nav > span::after{ content:""; margin:0; }

a:focus-visible,button:focus-visible{ outline:2px solid var(--grafito); outline-offset:3px; }

.text-link{ font-weight:550; text-decoration:none; border-bottom:1px solid var(--rosa-salina); padding-bottom:2px; transition:border-color .18s, color .18s; }
.text-link:hover{ color:var(--rosa-salina-oscuro); border-color:var(--rosa-salina-oscuro); }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(84px,14vh,180px) var(--sec-y); }
.hero h1{ max-width:12em; }
.hero .lead{ margin-top:1.6rem; }
.hero-cta{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-proofs{ margin-top:3.5rem; display:grid; gap:12px; }
.hero-proofs li{ list-style:none; padding:15px 20px; font-size:.92rem; color:var(--grafito); display:flex; gap:.6em; align-items:baseline;
  background:rgba(255,255,255,.75); border:1px solid var(--piedra); border-radius:var(--r-md);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.hero-proofs li::before{ content:"—"; color:var(--rosa-salina); font-weight:600; }
.hero-proofs li:nth-child(2)::before{ color:var(--dorado); }
.hero-proofs li:nth-child(3)::before{ color:var(--verde-agua); }
.hero-proofs li:hover{ transform:translateY(-5px) scale(1.02); border-color:rgba(127,166,148,.55); box-shadow:0 14px 30px -12px rgba(127,166,148,.35), 0 0 0 4px rgba(127,166,148,.1); }
@media(min-width:900px){ .hero-proofs{ grid-template-columns:repeat(3,1fr); } }

/* ---------- El espejo ---------- */
.mirror-line{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.35rem,4vw,2.1rem); line-height:1.35; padding-block:18px; border-bottom:1px solid var(--piedra); }
.mirror-line:last-of-type{ border-bottom:none; }
.mirror-close{ margin-top:2rem; font-size:1.08rem; max-width:32em; }

/* ---------- Sistema (etapas) ---------- */
.steps{ counter-reset:step; }
.step{ position:relative; }
.step:nth-child(3n) h3::before{ color:var(--dorado); }
.step:nth-child(3n+2) h3::before{ color:var(--verde-agua); }
.step h3::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; font-family:var(--font-display); font-size:.95rem; font-weight:400;
  color:var(--rosa-salina); margin-bottom:.6rem; letter-spacing:.02em;
}
.step p{ font-size:.95rem; color:var(--grafito); margin-top:.5rem; }
.step .deliver{ font-size:.88rem; color:var(--bruma); margin-top:.8rem; }

/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid rgba(229,225,216,.7); }
.faq-item:last-child{ border-bottom:1px solid var(--piedra); }
.faq-item{ overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; overflow:hidden;
  font-family:var(--font-display); font-size:1.15rem; font-weight:500; line-height:1.4;
  padding:22px 44px 22px 14px; margin-left:-14px; position:relative; color:var(--grafito);
  border-radius:var(--r-sm);
  transition:transform .35s var(--ease), padding-left .35s var(--ease), background .35s var(--ease), color .3s; }
.faq-q .faq-q-text{ position:relative; display:inline-block; z-index:1; }
.faq-q .faq-q-text::before{
  content:""; position:absolute; inset:-4px -10px; pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(217,142,128,.28) 48%,rgba(201,169,97,.28) 52%,transparent 65%);
  background-size:260% 100%; background-position:150% 0; opacity:0;
  transition:background-position .8s var(--ease), opacity .25s;
}
.faq-q:hover{ transform:translateX(8px); background:linear-gradient(90deg, rgba(127,166,148,.07), transparent 70%); color:#1a2e28; }
.faq-q:hover .faq-q-text::before{ background-position:-40% 0; opacity:1; }
.faq-q::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-size:1.4rem; color:var(--rosa-salina);
  transition:transform .3s var(--ease), color .3s; }
.faq-q:hover::after{ color:var(--dorado); transform:translateY(-50%) scale(1.2); }
.faq-item.open .faq-q::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item.open .faq-q:hover::after{ transform:translateY(-50%) rotate(45deg) scale(1.2); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a p{ padding:0 0 24px; max-width:38em; color:var(--grafito); }

/* ---------- Bloque oscuro (cierre / footer) ---------- */
.dark{ background:var(--azul-poza); color:var(--blanco-sal); }
.dark .eyebrow{ color:var(--bruma); }
.dark h2{ color:var(--blanco-sal); }
.dark a{ color:var(--blanco-sal); }
.cierre h2{ max-width:16em; }
.cierre .lead{ color:color-mix(in srgb,var(--blanco-sal) 78%,transparent); margin-top:1.4rem; }
.cierre .btn{ margin-top:2.2rem; }

/* ---------- Footer ---------- */
.site-footer{ position:relative; font-size:.92rem; }
.site-footer::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(720px,80%); height:1px;
  background:linear-gradient(to right, transparent, rgba(250,248,244,.18) 30%, rgba(250,248,244,.18) 70%, transparent);
}
.footer-grid{ display:grid; gap:2.4rem; padding-block:64px; }
@media(min-width:900px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.site-footer h4{ font-family:var(--font-body); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bruma); margin-bottom:1rem; font-weight:600; }
.site-footer ul{ list-style:none; }
.site-footer li{ margin-bottom:.55rem; }
.site-footer a{ text-decoration:none; opacity:.85; }
.site-footer a:hover{ opacity:1; }
.footer-tag{ margin-top:.8rem; color:var(--bruma); }
.footer-legal{ border-top:1px solid color-mix(in srgb,var(--blanco-sal) 14%,transparent); padding-block:20px; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--bruma); }

/* ---------- Tablas (precios) ---------- */
.price-table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--piedra); border-radius:var(--r-md); overflow:hidden; background:#fff; }
.price-table th,.price-table td{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--piedra); font-size:.96rem; vertical-align:top; }
.price-table th{ font-family:var(--font-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bruma); font-weight:600; }
.price-table td:last-child{ font-family:var(--font-display); font-size:1.05rem; white-space:nowrap; }

/* ---------- Página interior: cabecera ---------- */
.page-head{ padding-block:clamp(64px,10vh,120px) 0; }
.page-head h1{ font-size:clamp(2.1rem,6vw,3.6rem); max-width:14em; }
.page-head .lead{ margin-top:1.4rem; }

/* ---------- Formulario ---------- */
.form{ display:grid; gap:1.2rem; max-width:560px; }
.form label{ font-size:.88rem; font-weight:550; display:block; margin-bottom:.4rem; }
.form input,.form textarea{
  width:100%; padding:13px 16px; font:inherit; font-size:.98rem;
  background:#fff; border:1px solid var(--piedra); color:var(--grafito); border-radius:var(--r-sm);
  transition:border-color .25s, box-shadow .25s;
}
.form input:hover,.form textarea:hover{ border-color:rgba(217,142,128,.5); }
.form input:focus,.form textarea:focus{ outline:2px solid var(--grafito); outline-offset:1px; }
.form textarea{ min-height:110px; resize:vertical; }

/* ---------- La línea que se traza (firma) ---------- */
.draw-line{ height:1px; background:linear-gradient(to right,var(--piedra),var(--piedra)); background-repeat:no-repeat; background-size:0% 100%; transition:background-size 1.1s var(--ease); }
.draw-line.drawn{ background-size:100% 100%; }

/* ---------- Reveal (IntersectionObserver) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease),transform .55s var(--ease); }
.reveal-stagger.visible > *{ opacity:1; transform:none; }
.reveal-stagger.visible > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.visible > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.visible > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.visible > *:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.visible > *:nth-child(6){ transition-delay:.40s; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.reveal-stagger > *{ opacity:1; transform:none; transition:none; }
  .draw-line{ background-size:100% 100%; transition:none; }
  .btn::after{ transition:none; }
}

/* ---------- Banner cookies ---------- */
.cookie-banner{ position:fixed; inset-inline:16px; bottom:16px; z-index:80;
  background:var(--grafito); color:var(--blanco-sal); padding:20px 22px;
  max-width:520px; margin-inline:auto; display:none; border-radius:var(--r-md); }
.cookie-banner.show{ display:block; }
.cookie-banner p{ font-size:.88rem; line-height:1.55; }
.cookie-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions button{ font:inherit; font-size:.85rem; font-weight:550; padding:10px 18px; cursor:pointer; border:1px solid var(--blanco-sal); background:transparent; color:var(--blanco-sal); min-height:44px; border-radius:999px; }
.cookie-actions .accept{ background:var(--rosa-salina); border-color:var(--rosa-salina); color:#fff; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:60;
  width:52px; height:52px; display:grid; place-items:center;
  background:var(--grafito); color:var(--blanco-sal); border-radius:50%;
  text-decoration:none; box-shadow:0 1px 0 var(--piedra); transition:background .2s; }
.wa-float:hover{ background:var(--azul-poza); }
.wa-float svg{ width:24px; height:24px; }

/* ---------- Utilidades ---------- */
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.center{ text-align:center; }
.placeholder-media{
  border-radius:var(--r-md);
  border:1px dashed var(--bruma); background:repeating-linear-gradient(45deg,transparent,transparent 10px,var(--piedra) 10px,var(--piedra) 11px);
  display:grid; place-items:center; color:var(--bruma); font-size:.85rem; min-height:260px; padding:1rem; text-align:center;
}

/* ==========================================================================
   HERO 2.0 — sistema vivo (refinamento A5)
   ========================================================================== */

.hero--vivo{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tanks{ position:absolute; inset:-8px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(6,1fr); gap:7px; padding:7px; opacity:.5; }
@media(min-width:900px){ .tanks{ grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(5,1fr); } }
.tank-cell{ background:var(--blanco-sal); animation:shimmer 9s ease-in-out infinite; border-radius:14px; }
.tank-cell.r1{ animation-name:shimr; }
.tank-cell.r2{ animation-name:shimr2; }
.tank-cell.aq{ animation-name:shimaq; }
@keyframes shimmer{ 0%,100%{background:#FAF8F4} 50%{background:#F4F0E8} }
@keyframes shimr{ 0%,100%{background:#F6EAE6} 45%{background:#EFD3CC} 70%{background:#F3E0DA} }
@keyframes shimr2{ 0%,100%{background:#F3E3DE} 35%{background:#E9C4BA} }
@keyframes shimaq{ 0%,100%{background:#EDF2EF} 50%{background:#DCE8E2} }
.tank-cell.au{ animation-name:shimau; }
@keyframes shimau{ 0%,100%{background:#F7F0E2} 50%{background:#EFE2C6} }
.veil{ position:absolute; inset:0; background:radial-gradient(ellipse 90% 70% at 30% 20%, rgba(250,248,244,.94), rgba(250,248,244,.75) 55%, rgba(250,248,244,.45)); }
.hero-inner{ position:relative; }

/* entrada del hero (al cargar) */
.hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; opacity:0; transform:translateY(12px); animation:heroUp .7s var(--ease) .1s forwards; }
.hero-eyebrow::before{ content:""; width:28px; height:1px; background:var(--rosa-salina); transform-origin:left; animation:heroLine 1s var(--ease) .2s both; }
@keyframes heroLine{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes heroUp{ to{opacity:1; transform:none} }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:block; transform:translateY(110%); animation:heroRise .9s var(--ease) forwards; }
.hero h1 .ln:nth-child(1) > span{ animation-delay:.25s; }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.4s; }
.hero h1 em{ font-style:italic; font-weight:520; color:var(--rosa-salina-oscuro); }
@keyframes heroRise{ to{transform:translateY(0)} }
.hero .lead{ opacity:0; transform:translateY(14px); animation:heroUp .8s var(--ease) .65s forwards; }
.hero-cta{ opacity:0; transform:translateY(14px); animation:heroUp .8s var(--ease) .85s forwards; }
.hero-proofs{ background:color-mix(in srgb,var(--blanco-sal) 82%,transparent); backdrop-filter:blur(4px); opacity:0; animation:heroUp .9s var(--ease) 1.05s forwards; }
.hero-proofs li{ transition:background .3s; }
.hero-proofs li:hover{ background:rgba(217,142,128,.07); }

/* la marea que se dibuja */
.tide{ position:relative; height:52px; margin-top:56px; }
.tide::before{ content:""; position:absolute; inset:-30px -10%; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 60% 100% at 50% 50%, rgba(127,166,148,.22), transparent 70%);
  transition:opacity .5s var(--ease); }
.tide:hover::before{ opacity:1; }
.tide svg{ position:absolute; inset:0; width:106%; left:-3%; height:100%; overflow:visible; }
.tide path{ fill:none; stroke:var(--rosa-salina); stroke-width:1.4; opacity:.5;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:tideDraw 2.6s var(--ease) 1s forwards, tideDrift 7s ease-in-out 3.6s infinite alternate;
  transition:filter .4s, opacity .4s; }
.tide path.p2{ stroke:var(--verde-agua); opacity:.35; animation-delay:1.25s, 4s; animation-duration:2.6s, 8.5s; }
.tide:hover path{ opacity:.85; filter:drop-shadow(0 3px 6px rgba(127,166,148,.5)); }
.tide:hover path.p2{ filter:drop-shadow(0 3px 8px rgba(127,166,148,.6)); }
@keyframes tideDraw{ to{stroke-dashoffset:0} }
@keyframes tideDrift{ from{transform:translateX(-14px)} to{transform:translateX(14px)} }

/* respiración de color en los tanques de contenido (regla relajada) */


@media(prefers-reduced-motion:reduce){
  .faq-q{ transition:none; }
  .faq-q:hover{ transform:none; }
  .faq-q .faq-q-text::before{ transition:none; opacity:0; }
  .tank-cell{ animation:none; }
  .hero-eyebrow,.hero .lead,.hero-cta,.hero-proofs{ opacity:1; transform:none; animation:none; }
  .hero-eyebrow::before{ animation:none; transform:scaleX(1); }
  .hero h1 .ln > span{ transform:none; animation:none; }
  .tide path{ animation:none; stroke-dashoffset:0; }
}

/* ==========================================================================
   V4 — ACABAMENTO DE JOALHERIA (inspiração: apresentação de objetos de desejo)
   ========================================================================== */

/* Ponto-joia dourado antes dos eyebrows — o detalhe que captura luz */
.eyebrow{ display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--dorado);
  box-shadow:0 0 8px rgba(201,169,97,.7); flex-shrink:0; }
.eyebrow--active::before{ background:var(--rosa-salina); box-shadow:0 0 8px rgba(217,142,128,.7); }

/* Cartões que capturam luz — reflexo suave atravessa no hover, como prata sob vitrine */
.tank-grid > *, .tank, .hero-proofs li{ position:relative; overflow:hidden; }
.tank-grid > *::before, .hero-proofs li::before-sheen{ content:none; }
.tank-grid > *::after, .hero-proofs li::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  background-size:250% 100%; background-position:135% 0; opacity:0;
  transition:background-position .8s var(--ease), opacity .3s;
}
.tank-grid > *:hover::after, .hero-proofs li:hover::after{ background-position:-35% 0; opacity:1; }

/* Títulos com respiro de joalheria */

h2 em, h1 em{ font-family:var(--font-voice); font-style:italic; font-weight:400; font-size:1.06em; color:var(--rosa-salina-oscuro); }

/* O escrínio: seções escuras com foco de luz de vitrine + dourado */
.dark{ position:relative; overflow:hidden; }
.dark::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(127,166,148,.18), transparent 60%),
             radial-gradient(ellipse 40% 35% at 80% 100%, rgba(201,169,97,.1), transparent 70%); }
.dark .wrap{ position:relative; }
.dark .brand-voice{ color:var(--blanco-sal); }
.dark .brand-voice em, .cierre h2 em{ color:var(--dorado); }
.dark .btn{ box-shadow:0 2px 16px -4px rgba(201,169,97,.35); }
.dark .btn:hover,.dark .btn:focus-visible{
  box-shadow:0 14px 40px -8px rgba(217,142,128,.55), 0 6px 18px -6px rgba(201,169,97,.5), 0 0 0 6px rgba(201,169,97,.14); }

/* Tabela de preços com toque de vitrine */
.price-table tbody tr{ transition:background .25s; }
.price-table tbody tr:hover{ background:rgba(201,169,97,.05); }
.price-table td:last-child{ font-family:var(--font-display); font-weight:600; }

/* Links com dourado no hover (já no nav; agora nos text-links) */
.text-link{ border-bottom-width:1.5px; }
.text-link:hover{ border-color:var(--dorado); }

/* Rodapé: a frase da marca em voz de joia */
.site-footer .brand-voice{ font-size:1.02rem; color:rgba(250,248,244,.8); }

@media(prefers-reduced-motion:reduce){
  .tank-grid > *::after, .hero-proofs li::after{ transition:none; opacity:0; }
}


/* Banda de células de cor à deriva — vivas, e brincalhonas ao toque */
.drift-band{ position:relative; height:72px; }
.drift-band span{ position:absolute; border-radius:14px; opacity:.68; cursor:pointer;
  animation:driftFloat 9s ease-in-out infinite alternate;
  transition:opacity .3s, box-shadow .35s var(--ease), filter .3s; }
.drift-band span:nth-child(1){ width:64px; height:34px; left:8%; top:20%; background:#F0CDC4; animation-delay:0s; }
.drift-band span:nth-child(2){ width:44px; height:44px; left:30%; top:40%; background:#D3E4DB; animation-delay:1.2s; }
.drift-band span:nth-child(3){ width:80px; height:30px; left:52%; top:15%; background:#EDDFB4; animation-delay:.6s; }
.drift-band span:nth-child(4){ width:38px; height:38px; left:72%; top:45%; background:#F0CDC4; animation-delay:1.8s; }
.drift-band span:nth-child(5){ width:56px; height:28px; left:88%; top:25%; background:#D3E4DB; animation-delay:.9s; }
.drift-band span:hover{ opacity:1; animation:driftDance .8s var(--ease); filter:saturate(1.5) brightness(1.06); }
.drift-band span:nth-child(1):hover,.drift-band span:nth-child(4):hover{ box-shadow:0 0 26px 6px rgba(217,142,128,.45); }
.drift-band span:nth-child(2):hover,.drift-band span:nth-child(5):hover{ box-shadow:0 0 26px 6px rgba(127,166,148,.5); }
.drift-band span:nth-child(3):hover{ box-shadow:0 0 26px 6px rgba(201,169,97,.5); }
@keyframes driftFloat{ from{ transform:translateY(-6px) translateX(-8px) rotate(-2deg); } to{ transform:translateY(8px) translateX(10px) rotate(3deg); } }
@keyframes driftDance{
  0%{ transform:scale(1) rotate(0deg); }
  30%{ transform:scale(1.25) rotate(-10deg); }
  60%{ transform:scale(1.15) rotate(8deg); }
  100%{ transform:scale(1.1) rotate(0deg); }
}
@media(prefers-reduced-motion:reduce){
  .drift-band span{ animation:none; }
  .drift-band span:hover{ animation:none; transform:none; }
  .tide path{ animation:tideDraw 0s forwards; }
  .tide::before{ display:none; }
  .tank-grid > *:hover,.hero-proofs li:hover{ transform:none; }
}


/* ==========================================================================
   V8 — Efeitos herdados do Noosferianismo, traduzidos para a identidade Salinas
   ========================================================================== */

/* Título do hero: unificado ao mesmo sistema de cascata de letras dos h2 */
.hero h1{ cursor:default; }

/* Botões magnéticos: o deslocamento vem do JS; aqui só a suavidade */
.btn{ will-change:transform; }

/* Bruma marina (canvas de partículas do hero) */
.bruma{ position:absolute; inset:0; pointer-events:none; }

@media(prefers-reduced-motion:reduce){
  .hero h1:hover .ln > span{ animation:none; background:none; -webkit-text-fill-color:var(--grafito); color:var(--grafito); }
  .bruma{ display:none; }
}


/* ==========================================================================
   V9 — Moldura luminosa + botão dourado sólido (herança Noosferianismo)
   ========================================================================== */

/* Moldura com brilho ambiente ao redor da imagem — luz de vela sob o veludo */
.marco-luminoso{
  position:relative; display:inline-block; padding:10px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(201,169,97,.4), rgba(217,142,128,.18));
  perspective:900px; transition:box-shadow .4s var(--ease);
}
.marco-luminoso::before{
  content:""; position:absolute; inset:-22px; border-radius:calc(var(--r-lg) + 16px);
  background:radial-gradient(ellipse 80% 70% at 50% 40%, rgba(201,169,97,.4), transparent 72%);
  filter:blur(7px); opacity:.65; z-index:0;
  animation:marcoPulso 5s ease-in-out infinite;
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
.marco-luminoso:hover::before{ opacity:1; filter:blur(11px); }
.marco-luminoso .marco-inner{
  position:relative; z-index:1; transform-style:preserve-3d;
  transition:transform .12s ease-out;
  animation:fotoRespira 7s ease-in-out infinite;
}
.marco-luminoso img{
  display:block; width:100%; border-radius:var(--r-md); border:1px solid rgba(250,248,244,.5);
}
@keyframes marcoPulso{ 0%,100%{ opacity:.55; } 50%{ opacity:.85; } }
@keyframes fotoRespira{ 0%,100%{ transform:scale(1) rotateX(0) rotateY(0); } 50%{ transform:scale(1.018) rotateX(0) rotateY(0); } }
@media(prefers-reduced-motion:reduce){
  .marco-luminoso::before{ animation:none; opacity:.75; }
  .marco-luminoso .marco-inner{ animation:none; transform:none !important; }
}

/* Botón dourado sólido — convite pessoal, maiúsculo, espaçado */
.btn--dorado{
  display:inline-flex; align-items:center; gap:10px; position:relative; overflow:hidden;
  font-family:var(--font-body); font-weight:650; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase;
  padding:15px 26px; min-height:44px; border-radius:6px; border:none; cursor:pointer;
  color:#241d0f; text-decoration:none;
  background:linear-gradient(135deg, #E1C27E 0%, var(--dorado) 55%, #B8924A 100%);
  box-shadow:0 4px 20px -6px rgba(201,169,97,.55);
  transition:transform .25s var(--ease), box-shadow .35s var(--ease);
}
.btn--dorado:hover, .btn--dorado:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 34px -8px rgba(201,169,97,.7), 0 0 0 5px rgba(201,169,97,.16);
}
.btn--dorado::after{
  content:""; position:absolute; inset:0; border-radius:6px;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  background-size:220% 100%; background-position:130% 0; transition:background-position .7s ease;
}
.btn--dorado:hover::after{ background-position:-30% 0; }
.btn--dorado > span{ position:relative; z-index:1; }


/* ==========================================================================
   V12 — Efeito "bolinha quicando" nas caixas do Sistema (etapas do método)
   ========================================================================== */

.step{
  transform-origin:center bottom;
  transition:background-image .35s, box-shadow .35s var(--ease);
}
.step:hover{
  animation:stepQuica .95s cubic-bezier(.22,.61,.36,1) forwards;
  background-image:linear-gradient(#fff,#fff),
    linear-gradient(135deg, rgba(217,142,128,.75), rgba(201,169,97,.85), rgba(127,166,148,.75));
  box-shadow:0 18px 40px -14px rgba(201,169,97,.4), 0 0 0 5px rgba(201,169,97,.12);
}
@keyframes stepQuica{
  0%   { transform:translateY(0) scale(1); }
  18%  { transform:translateY(-18px) scale(1.02); }   /* salto 1 — o mais alto */
  34%  { transform:translateY(1px) scale(1.005); }     /* toca o chão */
  48%  { transform:translateY(-9px) scale(1.016); }    /* salto 2 */
  62%  { transform:translateY(1px) scale(1.008); }
  74%  { transform:translateY(-4px) scale(1.019); }     /* salto 3 */
  86%  { transform:translateY(0.5px) scale(1.012); }
  94%  { transform:translateY(-1.5px) scale(1.014); }   /* salto 4 — quase imperceptível */
  100% { transform:translateY(-6px) scale(1.015); }     /* repouso, já elevado */
}
@media(prefers-reduced-motion:reduce){
  .step:hover{ animation:none; transform:none; }
}


/* ==========================================================================
   V13 — Cascata de letras (título do fechamento, ao passar o mouse)
   ========================================================================== */
.cascade-letter{ display:inline-block; will-change:transform, opacity; }
.cascade-play .cascade-letter{
  animation:cascadeFall .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes cascadeFall{
  0%{ transform:translateY(-16px); opacity:.1; }
  55%{ transform:translateY(3px); opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}
@media(prefers-reduced-motion:reduce){
  .cascade-play .cascade-letter{ animation:none; opacity:1; transform:none; }
}


/* V19 — Leitura confortável para trechos longos na voz da marca (manifesto, teses) */
.brand-voice-text{
  font-family:var(--font-voice-read); font-style:italic; font-weight:500;
  font-size:1.42rem; line-height:1.75; letter-spacing:-.003em;
  color:var(--grafito);
}
.brand-voice-text strong{ font-weight:600; }


/* ==========================================================================
   V24 — Transição de seção de alta qualidade: onda em camadas + aurora + grão
   Referência: divisores SVG multicamada com paralaxe (Stripe/Awwwards-style),
   nunca degradê linear plano.
   ========================================================================== */

.wave-divider{
  position:absolute; top:0; left:0; width:100%; height:100px; overflow:hidden; z-index:0;
  background:var(--blanco-sal); /* a cor de origem, antes da onda */
}
.wave-divider svg{ position:absolute; bottom:0; left:-5%; width:110%; height:100%; }
.wave-divider .wl-back{ fill:var(--azul-poza); opacity:.28; animation:waveDriftSlow 22s ease-in-out infinite alternate; }
.wave-divider .wl-mid{ fill:var(--azul-poza); opacity:.55; animation:waveDriftSlow 16s ease-in-out infinite alternate-reverse; }
.wave-divider .wl-front{ fill:var(--azul-poza); opacity:1; animation:waveDriftSlow 26s ease-in-out infinite alternate; }
@keyframes waveDriftSlow{ from{ transform:translateX(-2.5%);} to{ transform:translateX(2.5%);} }

/* Auroras: manchas de cor desfocadas que atravessam a fronteira — profundidade real, não gradiente chapado */
.aurora{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; mix-blend-mode:plus-lighter; }
.aurora--rosa{ background:var(--rosa-salina); width:340px; height:280px; opacity:.3; }
.aurora--dorado{ background:var(--dorado); width:260px; height:220px; opacity:.22; }
.aurora--verde{ background:var(--verde-agua); width:300px; height:260px; opacity:.26; }
@keyframes auroraFloat{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3%,-4%) scale(1.06);} }
.aurora{ animation:auroraFloat 14s ease-in-out infinite; }

/* Grão sutil: tira o aspecto "chapado" de qualquer área de cor sólida — textura tátil, não decoração */
.grain-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media(prefers-reduced-motion:reduce){
  .wave-divider .wl-back,.wave-divider .wl-mid,.wave-divider .wl-front{ animation:none; }
  .aurora{ animation:none; }
}