/* ============================================================
   dopamine. — sistema de diseño
   Vino profundo, crema y oliva. Centrado, con mucho aire.
   ============================================================ */

:root {
  /* Fondo */
  --bg:#4F1A24;
  --bg-2:#5C222D;
  --bg-3:#3E1119;

  /* Tinta */
  --cream:#F6F1E7;
  --cream-2:rgba(246,241,231,0.70);
  --cream-3:rgba(246,241,231,0.44);

  /* Acento */
  --olive:#5F6B3C;
  --olive-2:#6E7A45;
  --olive-lit:#A3B268;

  /* Líneas */
  --line:rgba(246,241,231,0.16);
  --line-2:rgba(246,241,231,0.09);

  /* Formas */
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --pill:100px;

  --section:150px;
  --gap:clamp(24px,3vw,40px);
  --wide:1120px;
  --text:660px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

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

body {
  font-family:'Satoshi',system-ui,sans-serif;
  background:var(--bg);
  color:var(--cream);
  line-height:1.6;
  font-size:17px;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* Polvo de estrellas sobre el vino: sutil, sin JS */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(246,241,231,0.42), transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(246,241,231,0.30), transparent),
    radial-gradient(1.6px 1.6px at 33% 62%, rgba(163,178,104,0.30), transparent),
    radial-gradient(1.2px 1.2px at 88% 48%, rgba(246,241,231,0.26), transparent),
    radial-gradient(1.3px 1.3px at 58% 86%, rgba(246,241,231,0.22), transparent),
    radial-gradient(1.5px 1.5px at 6% 78%, rgba(163,178,104,0.24), transparent),
    radial-gradient(1.1px 1.1px at 46% 30%, rgba(246,241,231,0.24), transparent),
    radial-gradient(1.4px 1.4px at 94% 76%, rgba(246,241,231,0.20), transparent);
  background-size:100% 100%;
}
main, .nav, .foot, .sheet { position:relative; z-index:1; }

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--olive-lit); color:var(--bg-3); }

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

/* ---------- Tipografía ---------- */

.display, h1, h2 {
  font-family:'Clash Display',sans-serif;
  font-weight:600;
  line-height:1.04;
  letter-spacing:-0.025em;
  text-wrap:balance;
  text-transform:lowercase;
}
h1 { font-size:clamp(38px,6.6vw,78px); }
h2 { font-size:clamp(29px,4.2vw,52px); }

h3 {
  font-family:'Clash Display',sans-serif;
  font-weight:600; font-size:21px; line-height:1.22;
  letter-spacing:-0.01em; text-transform:lowercase;
}

p { text-wrap:pretty; }

.lede {
  font-size:clamp(16px,1.45vw,18.5px);
  color:var(--cream-2);
  line-height:1.65;
  max-width:var(--text);
}

.label {
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.13em;
  color:var(--olive-lit);
}

.muted { color:var(--cream-2); }
.tiny { font-size:13.5px; color:var(--cream-3); line-height:1.55; }
strong, b { font-weight:700; color:var(--cream); }
.hl { color:var(--olive-lit); }

/* ---------- Layout ---------- */

.wrap { width:100%; max-width:var(--wide); margin:0 auto; padding:0 24px; }
section { padding:var(--section) 0; position:relative; }
section.tight { padding:calc(var(--section) * 0.6) 0; }
.center { text-align:center; }

.head {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; margin-bottom:64px;
}
.head .lede { margin:0 auto; }

.rule {
  display:flex; align-items:center; gap:20px; justify-content:center;
  color:var(--cream-3);
  font-size:12.5px; font-weight:500; letter-spacing:0.03em;
}
.rule::before, .rule::after {
  content:''; height:1px; width:min(120px,16vw);
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* ---------- Botones ---------- */

.btn {
  display:inline-flex; align-items:center; gap:11px;
  font-weight:700; font-size:15.5px;
  padding:15px 30px; border-radius:var(--pill);
  border:1px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn-primary { background:var(--olive); color:var(--cream); }
.btn-primary:hover { background:var(--olive-2); }

.btn-ghost { background:transparent; color:var(--cream); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--cream); background:rgba(246,241,231,0.06); }

.btn .arrow { transition:transform .3s cubic-bezier(.16,1,.3,1); }
.btn:hover .arrow { transform:translateX(4px); }

.sublink {
  display:inline-block; font-size:14.5px; color:var(--cream-2);
  border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:color .2s, border-color .2s;
}
.sublink:hover { color:var(--olive-lit); border-color:var(--olive-lit); }

/* ---------- Navegación: píldora centrada ---------- */

.nav {
  position:fixed; top:20px; left:50%;
  transform:translateX(-50%);
  z-index:60;
}
.nav-inner {
  display:flex; align-items:center; gap:2px;
  padding:6px;
  border-radius:var(--pill);
  background:rgba(62,17,25,0.62);
  border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 8px 30px rgba(30,8,13,0.34);
}
.nav-inner a {
  font-size:14.5px; font-weight:500;
  color:var(--cream-2);
  padding:10px 19px; border-radius:var(--pill);
  white-space:nowrap;
  transition:color .2s, background .25s ease;
}
.nav-inner a:hover { color:var(--cream); }
.nav-inner a.current {
  color:var(--cream);
  background:var(--olive);
  font-weight:700;
}

@media (max-width:600px) {
  .nav { top:12px; width:calc(100% - 24px); }
  .nav-inner { justify-content:center; padding:5px; gap:0; }
  .nav-inner a { font-size:12.5px; padding:9px 12px; }
}
@media (max-width:360px) {
  .nav-inner a { font-size:11.5px; padding:8px 9px; }
}

/* ---------- Pantalla de entrada ---------- */

.intro {
  position:fixed; inset:0; z-index:999;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s ease, visibility .7s;
}
.intro.done { opacity:0; visibility:hidden; pointer-events:none; }
.intro-mark {
  font-family:'Clash Display',sans-serif; font-weight:600;
  font-size:clamp(72px,15vw,140px); line-height:1;
  color:var(--cream); letter-spacing:-0.04em;
  opacity:0; transform:scale(.9);
  animation:introIn 1.5s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-mark span { color:var(--olive-lit); }
@keyframes introIn {
  0% { opacity:0; transform:scale(.86); }
  55% { opacity:1; transform:scale(1); }
  100% { opacity:1; transform:scale(1); }
}
body.intro-on { overflow:hidden; }
/* Mientras dura la intro el contenido espera: si no, se ven a la vez
   la "d." de la intro y la de la portada durante el fundido. */
body.intro-on main, body.intro-on .nav, body.intro-on .foot,
body.intro-on .wa-float, body.intro-on .dion-widget { opacity:0; }
main, .nav, .foot { transition:opacity .8s ease .15s; }
@media (prefers-reduced-motion:reduce) {
  .intro { display:none; }
  .intro-mark { animation:none; opacity:1; transform:none; }
}

/* ---------- Portada ---------- */

.hero {
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:150px 24px 70px;
  gap:22px;
}
.hero-mark {
  font-family:'Clash Display',sans-serif; font-weight:600;
  font-size:clamp(64px,10vw,104px); line-height:1;
  letter-spacing:-0.05em; color:var(--cream);
  margin-bottom:10px;
}
.hero-mark span { color:var(--olive-lit); }
.hero h1 { max-width:20ch; }

/* Subtítulo que alterna entre dos mensajes */
.rotator {
  position:relative;
  width:100%; max-width:590px;
  height:78px;
}
.rotator p {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-size:clamp(15.5px,1.4vw,18px);
  color:var(--cream-2); line-height:1.6;
  opacity:0; transition:opacity .9s ease;
}
.rotator p.on { opacity:1; }
@media (max-width:560px) { .rotator { height:104px; } }

.hero-actions { display:flex; flex-direction:column; align-items:center; gap:15px; margin-top:6px; }
.hero-rule { margin-top:54px; }

/* ---------- Marquesina ---------- */

.marquee {
  overflow:hidden;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  padding:16px 0;
  background:rgba(62,17,25,0.4);
}
.marquee-track { display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee-track span {
  display:inline-flex; align-items:center; gap:9px; padding:0 28px;
  font-size:12.5px; font-weight:500; letter-spacing:0.02em;
  color:var(--cream-2); white-space:nowrap;
}
.marquee-track .dot { color:var(--olive-lit); padding:0; }
@keyframes slide { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* ---------- Tarjetas ---------- */

.grid { display:grid; gap:var(--gap); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:880px) { .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .grid-2, .grid-3 { grid-template-columns:1fr; } }

.card {
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  padding:34px 30px;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.card:hover { border-color:var(--line); transform:translateY(-3px); }
.card p { color:var(--cream-2); font-size:15.5px; line-height:1.6; }
.card .ico {
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:11px; background:rgba(163,178,104,0.16);
  color:var(--olive-lit); margin-bottom:6px;
}
.card ul { list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.card li {
  font-size:14.5px; color:var(--cream-2);
  padding-left:20px; position:relative; line-height:1.5;
}
.card li::before {
  content:''; position:absolute; left:2px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--olive-lit);
}

.card-quiet { background:transparent; border-color:var(--line-2); }
.card-olive { background:var(--olive); border-color:var(--olive); }
.card-olive .ico { background:rgba(246,241,231,0.18); color:var(--cream); }
.card-olive:hover { border-color:var(--olive-lit); }

.stat {
  font-family:'Clash Display',sans-serif; font-weight:600;
  font-size:clamp(38px,4.6vw,58px); line-height:1;
  letter-spacing:-0.03em; color:var(--olive-lit);
  font-variant-numeric:tabular-nums; text-transform:lowercase;
}
.card-olive .stat { color:var(--cream); }
.card-quiet .stat { color:var(--cream); }

/* ---------- Pasos ---------- */

.steps { display:flex; flex-direction:column; }
.step {
  display:grid; grid-template-columns:64px 1fr; gap:26px;
  padding:32px 0; border-top:1px solid var(--line-2); align-items:start;
}
.step:last-child { border-bottom:1px solid var(--line-2); }
.step-n {
  font-family:'Clash Display',sans-serif; font-weight:600;
  font-size:15px; color:var(--olive-lit); padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.step-body { display:flex; flex-direction:column; gap:8px; }
.step-body p { color:var(--cream-2); font-size:15.5px; max-width:60ch; }
@media (max-width:640px) { .step { grid-template-columns:1fr; gap:10px; padding:26px 0; } }

/* ---------- Tabla ---------- */

.table-scroll { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line-2); }
table { width:100%; border-collapse:collapse; background:var(--bg-2); min-width:540px; }
th, td { padding:17px 20px; text-align:left; font-size:15px; border-bottom:1px solid var(--line-2); }
th {
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--cream-3); background:var(--bg-3);
}
td { color:var(--cream-2); font-variant-numeric:tabular-nums; }
td:first-child { color:var(--cream); font-weight:700; }
tr:last-child td { border-bottom:none; }
.td-win { color:var(--olive-lit); font-weight:700; }

/* ---------- FAQ ---------- */

.faq { display:flex; flex-direction:column; max-width:760px; margin:0 auto; }
.faq details { border-top:1px solid var(--line-2); }
.faq details:last-of-type { border-bottom:1px solid var(--line-2); }
.faq summary {
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:'Clash Display',sans-serif; font-weight:600;
  font-size:17.5px; line-height:1.35; text-transform:lowercase;
  transition:color .2s;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--olive-lit); }
.faq summary::after {
  content:''; position:absolute; right:6px; top:31px;
  width:11px; height:11px;
  border-right:1.6px solid var(--cream-3);
  border-bottom:1.6px solid var(--cream-3);
  transform:rotate(45deg);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.faq details[open] summary::after { transform:rotate(-135deg); top:36px; }
.faq details p { padding:0 30px 26px 0; color:var(--cream-2); font-size:15.5px; line-height:1.7; }

/* ---------- Cifra grande ---------- */

.figure { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.figure .n {
  font-family:'Clash Display',sans-serif; font-weight:600;
  font-size:clamp(76px,15vw,190px); line-height:0.85;
  letter-spacing:-0.05em; color:var(--olive-lit);
  font-variant-numeric:tabular-nums;
}
.figure .cap { font-size:clamp(15.5px,1.7vw,19px); color:var(--cream-2); max-width:36ch; }

.prose { max-width:var(--text); margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.prose p { color:var(--cream-2); font-size:16.5px; line-height:1.75; }

/* ---------- Cierre ---------- */

.closer-section { background:var(--bg-3); border-top:1px solid var(--line-2); }
.closer { text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.closer h2 { max-width:18ch; }

/* ---------- Pie ---------- */

.foot { border-top:1px solid var(--line-2); padding:66px 0 34px; background:var(--bg-3); }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding-bottom:44px; }
.foot-grid > * { min-width:0; }
.foot-brand img { height:26px; margin-bottom:14px; }
.foot-brand p { font-size:14px; color:var(--cream-2); max-width:34ch; line-height:1.6; }
.foot h4 {
  font-family:'Satoshi',sans-serif; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--cream-3); margin-bottom:15px;
}
.foot-col a, .foot-col span {
  display:block; font-size:14.5px; color:var(--cream-2);
  margin-bottom:10px; overflow-wrap:break-word; transition:color .2s;
}
.foot-col a:hover { color:var(--olive-lit); }
.foot-bottom {
  border-top:1px solid var(--line-2); padding-top:26px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; font-size:13px; color:var(--cream-3);
}
.foot-bottom a { color:var(--olive-lit); font-weight:700; }
@media (max-width:860px) { .foot-grid { grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:480px) { .foot-grid { grid-template-columns:1fr; } }

/* ---------- Aparición al hacer scroll ---------- */

[data-reveal] {
  opacity:0; transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
}

/* Las anclas no quedan tapadas por la píldora fija */
section[id] { scroll-margin-top:104px; }

@media (max-width:760px) {
  :root { --section:96px; }
  body { font-size:16px; }
  .card { padding:28px 24px; }
  .head { margin-bottom:44px; gap:14px; }
}

/* Bloquea el scroll de fondo mientras hay un modal abierto */
body.modal-open { overflow:hidden; }
body.modal-open .wa-float, body.modal-open .dion-widget { opacity:0; pointer-events:none; }

/* La frase destacada arranca siempre en su propia línea: si no, "tu"
   se queda colgando al final de la anterior, separado de lo que acompaña. */
.hero h1 .hl { display:block; }

/* Tarjeta destacada: tinte oliva y borde, sin llegar a bloque macizo.
   Da el contraste que pide una comparativa sin recargar la página. */
.card-accent {
  background:rgba(95,107,60,0.20);
  border-color:rgba(163,178,104,0.42);
}
.card-accent:hover { border-color:var(--olive-lit); }
.card-accent .stat { color:var(--olive-lit); }
.card-accent .ico { background:rgba(163,178,104,0.22); color:var(--olive-lit); }

/* La comparativa usa marcas explícitas: X en la columna sin dopamine,
   check en la de con dopamine. Se leen de un vistazo sin tener que
   comparar los textos línea a línea. */
#problema .card li {
  padding-left:30px;
  min-height:22px;
}
#problema .card li::before {
  content:'\2715';                 /* ✕ */
  width:auto; height:auto;
  background:none; border:none; border-radius:0;
  left:0; top:0;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:13.5px; font-weight:700; line-height:1.6;
  /* La X es información, no decoración: --cream-3 se quedaba en 3,5 de
     contraste. Este valor la deja legible sin competir con el check. */
  color:rgba(246,241,231,0.62);
}
#problema .card-accent li::before {
  content:'\2713';                 /* ✓ */
  font-size:15px;
  color:var(--olive-lit);
}

/* Línea de precio: la única de toda la web. Va sobre un panel propio
   para que destaque sin necesidad de gritar. */
.price-note {
  max-width:640px; margin:70px auto 0;
  text-align:center;
  background:rgba(163,178,104,0.07);
  border:1px solid rgba(163,178,104,0.24);
  border-radius:var(--r-lg);
  padding:38px 34px 30px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.price-lead {
  font-family:'Clash Display',sans-serif; font-weight:600;
  font-size:clamp(21px,2.4vw,28px); line-height:1.25;
  letter-spacing:-0.02em; color:var(--cream);
  text-wrap:balance;
}
.price-sub {
  font-size:15.5px; line-height:1.6; color:var(--cream-2);
  max-width:46ch;
}

/* Dos garantías, dos piezas: antes era una sola pastilla enorme con el
   texto partido en dos líneas y un punto suelto en medio. */
.guarantees {
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:10px;
}
.guarantees li {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700;
  color:var(--cream);
  background:rgba(95,107,60,0.28);
  border:1px solid rgba(163,178,104,0.30);
  border-radius:var(--pill);
  padding:9px 16px 9px 13px;
  line-height:1.3;
}
.guarantees li::before {
  content:'\2713';
  color:var(--olive-lit);
  font-size:14px; font-weight:700;
  flex-shrink:0;
}
@media (max-width:600px) {
  .price-note { padding:30px 22px 26px; margin-top:52px; }
  .guarantees li { font-size:12.5px; }
}

/* La FAQ va dentro del apartado de únete, con aire por encima */
#unete .faq { margin-top:64px; }

/* La comparativa se lee enfrentada: mantenerla a dos columnas también en
   ventanas estrechas (paneles laterales), y apilarla solo en móvil real. */
@media (min-width:520px) {
  #problema .grid-2 { grid-template-columns:1fr 1fr; }
}
/* Misma altura aunque una columna tenga más texto */
#problema .grid-2 > .card { height:100%; }

/* Si el texto del separador no cabe en una línea, las rayitas estorban */
@media (max-width:680px) {
  .rule { flex-wrap:wrap; text-align:center; }
  .rule::before, .rule::after { display:none; }
}

/* ---------- Ilustración de fondo en las tarjetas ---------- */
/* Un eco grande del mismo icono, con brillo oliva, al estilo de las
   tarjetas de Nitid. Es decorativo: no debe competir con el texto. */
.card { position:relative; overflow:hidden; }
.card > *:not(.card-art) { position:relative; z-index:1; }

.card-art {
  position:absolute;
  right:-26px; bottom:-30px;
  width:170px; height:170px;
  color:var(--olive-lit);
  opacity:0.14;
  pointer-events:none;
  z-index:0;
  transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
/* Halo suave detrás del trazo */
.card::after {
  content:'';
  position:absolute;
  right:-70px; bottom:-80px;
  width:250px; height:250px;
  background:radial-gradient(circle, rgba(163,178,104,0.20) 0%, transparent 68%);
  pointer-events:none; z-index:0;
}
.card:hover .card-art { opacity:0.22; transform:translate(-6px,-6px) scale(1.04); }

/* Deja sitio abajo para que el texto no se cruce con la ilustración */
#servicios .card { padding-bottom:64px; }

/* En la tarjeta con acento el brillo se apaga: ya tiene fondo propio */
.card-accent::after { background:radial-gradient(circle, rgba(163,178,104,0.16) 0%, transparent 68%); }
.card-accent .card-art { opacity:0.17; }

/* La comparativa no lleva ilustración */
#problema .card::after { display:none; }

@media (prefers-reduced-motion:reduce) {
  .card:hover .card-art { transform:none; }
}
@media (max-width:600px) {
  .card-art { width:130px; height:130px; right:-20px; bottom:-24px; }
  #servicios .card { padding-bottom:52px; }
}