/* tealdev.es - CSS compartido de las landings de servicio.
   Fuente unica: si tocas una landing, tocas esto. El oro informa, el teal actua. */
:root{
  --abyss:#06090b; --abyss-2:#0c1214; --abyss-3:#121a1d;
  --ink-hi:#f4f1ea; --ink-lo:#93a0a1;
  --foam:#e7ecec; --foam-card:#f3f6f5; --foam-2:#dde4e3;
  --ink:#131a1b; --ink-mute:#545f5f; --line:#cdd6d5;
  --gold:#c9954b; --gold-lite:#ecd39a; --gold-deep:#a9782f;
  --wa:#17a45a;
  /* el oro informa, el teal actua */
  --teal:#1aa8a0; --teal-lite:#5fded3; --teal-deep:#0f7a74; --teal-ink:#042523;
  /* teal-deep sobre fondo claro da 4.34:1 y suspende AA (hace falta 4.5). Este es el
     mismo teal un paso mas oscuro, SOLO para texto sobre claro: 4.77 sobre --foam y
     5.23 sobre --foam-card. --teal-deep se queda como color de marca para los :active. */
  --teal-text:#0e736d;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 17px/1.55 var(--sans); background:var(--abyss); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal-lite); outline-offset:3px; border-radius:4px}
.wrap{width:100%; max-width:860px; margin:0 auto; padding:0 22px}

/* ---- header ---- */
.hdr{position:sticky; top:0; z-index:40; background:rgba(6,9,11,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07)}
.hdr .wrap{display:flex; align-items:center; justify-content:space-between; height:58px}
.brand{font:400 25px var(--serif); color:var(--ink-hi); text-decoration:none; letter-spacing:-.01em}
.brand em{font-style:italic; color:var(--teal-lite)}
.hdr-cta{display:inline-flex; align-items:center; gap:7px; background:var(--teal); color:var(--teal-ink);
  font:600 14px var(--sans); padding:9px 15px; border-radius:999px; text-decoration:none}
.hdr-cta:active{background:var(--teal-deep); color:#eafffd}

/* ---- hero ---- */
.hero{position:relative; background:
   radial-gradient(130% 80% at 50% 0%, #0d1a1c 0%, var(--abyss) 62%);
   color:var(--ink-hi); padding:64px 0 76px; overflow:hidden}
.hero::after{content:''; position:absolute; inset:auto 0 -1px 0; height:120px;
  background:linear-gradient(to bottom, transparent, var(--foam)); pointer-events:none}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-lite); margin-bottom:22px}
.eyebrow .bar{width:22px;height:1px;background:linear-gradient(90deg,var(--teal),transparent)}
h1{font:400 clamp(38px,9vw,60px)/1.03 var(--serif); letter-spacing:-.02em; margin-bottom:20px}
h1 .accent{display:block; font-style:italic; color:var(--teal-lite)}
.sub{font-size:18px; color:var(--ink-lo); max-width:46ch; margin-bottom:26px}
.sub b{color:var(--ink-hi); font-weight:500}

/* chat de muestra */
.chatsim{display:flex; flex-direction:column; gap:9px; margin:0 0 30px; max-width:470px}
.chatsim b{font-weight:400; font-size:14.5px; line-height:1.45; padding:11px 14px; border-radius:15px; max-width:82%}
.chatsim .u{align-self:flex-end; background:var(--teal); color:var(--teal-ink); border-bottom-right-radius:5px; font-weight:500}
.chatsim .b{align-self:flex-start; background:rgba(255,255,255,.07); color:var(--ink-hi);
  border:1px solid rgba(255,255,255,.09); border-bottom-left-radius:5px}

.ctas{display:flex; flex-direction:column; gap:10px; max-width:420px}
.cta{display:flex; align-items:center; justify-content:center; gap:9px; height:54px; border-radius:var(--r);
  font:600 16px var(--sans); text-decoration:none; transition:transform .12s}
.cta:active{transform:scale(.985)}
.cta-main{background:var(--teal); color:var(--teal-ink); box-shadow:0 12px 28px -10px rgba(0,0,0,.55)}
.cta-main:active{background:var(--teal-deep); color:#eafffd}
.cta-line{background:transparent; color:var(--ink-hi); border:1px solid rgba(255,255,255,.17)}
.undernote{font-size:13.5px; color:var(--ink-lo); margin-top:14px}
.undernote b{color:var(--teal-lite); font-weight:500}

/* ---- secciones claras ---- */
section.light{background:var(--foam); color:var(--ink); padding:66px 0; position:relative}
section.light + section.light{padding-top:0}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-text); margin-bottom:14px}
.kicker::before{content:''; width:18px; height:1px; background:var(--teal-text)}
h2{font:400 clamp(28px,6.4vw,40px)/1.12 var(--serif); letter-spacing:-.02em; margin-bottom:16px}
h2 em{font-style:italic; color:var(--teal-text)}
.lead{color:var(--ink-mute); max-width:56ch; margin-bottom:30px}

.pain{display:grid; gap:12px; margin-top:8px}
.pain li{list-style:none; display:flex; gap:12px; align-items:flex-start; background:var(--foam-card);
  border:1px solid var(--line); border-radius:13px; padding:15px 16px; font-size:15.5px}
.pain .x{flex:none; width:21px; height:21px; border-radius:50%; background:rgba(201,149,75,.16);
  color:var(--gold-deep); display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:1px}

.steps{counter-reset:s; display:grid; gap:18px}
.step{list-style:none; display:flex; gap:15px; align-items:flex-start}
.step .n{flex:none; counter-increment:s; width:33px; height:33px; border-radius:50%;
  background:var(--teal); color:var(--teal-ink); display:grid; place-items:center;
  font:600 14px var(--sans)}
.step .n::before{content:counter(s)}
.step h3{font:600 16.5px var(--sans); margin-bottom:3px}
.step p{font-size:15px; color:var(--ink-mute)}

.feat{display:grid; gap:11px; grid-template-columns:1fr}
@media(min-width:640px){.feat{grid-template-columns:1fr 1fr}}
.feat li{list-style:none; background:var(--foam-card); border:1px solid var(--line);
  border-radius:13px; padding:15px 16px; font-size:15.5px; display:flex; gap:11px}
.feat .tick{flex:none; color:var(--teal-text); font-weight:700}

/* caso real */
.caso{background:var(--abyss-2); color:var(--ink-hi); border-radius:18px; padding:26px 22px;
  border:1px solid rgba(255,255,255,.09)}
.caso .tag{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--teal-lite); margin-bottom:12px}
.caso .dot{width:7px;height:7px;border-radius:50%;background:var(--teal); flex:none}
.caso h3{font:400 25px var(--serif); margin-bottom:9px}
.caso p{color:var(--ink-lo); font-size:15.5px}
.caso a{color:var(--teal-lite); text-decoration:underline; text-underline-offset:3px; font-weight:500}

/* precio */
.price{background:var(--foam-card); border:1px solid var(--line); border-radius:18px; padding:26px 22px; max-width:440px}
.price .launch{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--gold);
  background:rgba(201,149,75,.1); color:var(--gold-deep); border-radius:999px;
  padding:5px 12px; font-size:12px; font-weight:600; margin-bottom:16px}
.price .launch .dot{width:6px;height:6px;border-radius:50%;background:var(--gold); flex:none}
.price .fig{font:400 50px var(--serif); color:var(--ink); letter-spacing:-.02em; line-height:1}
.price .fig span{font:600 17px var(--sans); color:var(--ink-mute)}
.price .mo{font-size:15px; color:var(--ink-mute); margin:8px 0 18px}
.price .mo b{color:var(--ink); font-weight:600}
.price .cta{margin-top:4px}
.price .cta-main{color:var(--teal-ink)}

/* faq */
details{background:var(--foam-card); border:1px solid var(--line); border-radius:13px;
  padding:15px 17px; margin-bottom:10px}
details+details{margin-top:0}
summary{font:600 16px var(--sans); cursor:pointer; list-style:none; display:flex;
  justify-content:space-between; gap:14px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; color:var(--teal-text); font-size:21px; font-weight:400; flex:none; line-height:1}
details[open] summary::after{content:'–'}
details p{margin-top:11px; color:var(--ink-mute); font-size:15.5px}

/* cierre */
.end{background:var(--abyss); color:var(--ink-hi); padding:70px 0}
.end h2{color:var(--ink-hi)}
.end h2 em{color:var(--teal-lite)}
.end .lead{color:var(--ink-lo)}
footer{background:var(--abyss); color:var(--ink-lo); padding:0 0 46px; font-size:13.5px}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.08); padding-top:22px}
footer a{color:var(--ink-lo); text-decoration:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

/* enlaces entre landings (hub de zonas / servicios). Elevacion neutra, sin halo de color. */
.zonas{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; list-style:none; padding:0}
.zonas li{list-style:none}
.zonas a{display:inline-flex; align-items:center; gap:9px; background:var(--foam-card);
  border:1px solid var(--line); border-radius:999px; padding:11px 17px;
  font:500 14.5px var(--sans); color:var(--ink); text-decoration:none}
.zonas a:active{background:var(--foam-2)}
.zonas .ar{color:var(--teal-text); font-weight:600}