/* ============================================================
   servicio-detalle.css
   Estilos compartidos para páginas individuales de servicio.
   Design system: Instrument Serif + Inter, tokens oklch.
   Visual: editorial, tipográfico, denso en contenido.
   ============================================================ */

:root{
  --bg: oklch(0.985 0.005 240);
  --bg-soft: oklch(0.965 0.010 240);
  --bg-card: #ffffff;
  --ink: oklch(0.20 0.03 250);
  --ink-2: oklch(0.40 0.02 250);
  --ink-3: oklch(0.60 0.015 250);
  --line: oklch(0.90 0.008 240);
  --line-2: oklch(0.84 0.010 240);
  --accent: #3A5A8C;
  --accent-soft: color-mix(in oklab, #3A5A8C 12%, transparent);
  --grad: linear-gradient(135deg, #C9A0C7 0%, #B89FD9 40%, #9FC9E8 100%);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --radius: 16px;
  --radius-lg: 22px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-0.015em}
h1{font-family:var(--serif); line-height:1.02}
h2{font-family:var(--serif); line-height:1.1}
h3{font-family:var(--serif); line-height:1.2; font-size:22px; letter-spacing:-0.01em}
em{font-family:var(--serif); font-style:italic}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--ink-3)}

/* ========== NAV ========== */
.nav-root{position:sticky; top:0; z-index:40; background:color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:38px; height:38px; border-radius:12px; background:var(--grad); position:relative; flex:none}
.brand-mark::after{content:""; position:absolute; inset:8px; border:2.5px solid rgba(255,255,255,.85); border-radius:8px; border-right-color:transparent; transform:rotate(-15deg)}
.brand-text b{display:block; font-weight:600; font-size:15px; color:var(--ink)}
.brand-text span{font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase}
.nav-links{display:flex; gap:34px}
.nav-links a{font-size:14px; color:var(--ink-2); transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink); font-weight:500}
.btn{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px; font-size:14px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:transform .15s, background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink); color:var(--bg)}
.btn-ghost{border-color:var(--line-2); background:transparent; color:var(--ink)}
.btn-wa{background:#25D366; color:#fff}

/* ========== BREADCRUMB ========== */
.crumbs{padding:28px 0 0; font-size:12.5px; color:var(--ink-3); letter-spacing:.02em}
.crumbs a{color:var(--ink-2); border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .15s}
.crumbs a:hover{border-color:var(--ink-2)}
.crumbs .sep{margin:0 10px; color:var(--ink-3)}

/* ========== HERO ========== */
.sh{padding:48px 0 72px; border-bottom:1px solid var(--line)}
.sh-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center}
.sh .meta-row{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px}
.sh .chip{font-size:11.5px; letter-spacing:.06em; padding:6px 12px; border-radius:999px; color:var(--ink-2); background:var(--bg-card); border:1px solid var(--line-2)}
.sh .chip.accent{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.sh h1{font-size:clamp(52px,6vw,88px)}
.sh h1 em{color:var(--ink-2)}
.sh .lead{font-size:18px; color:var(--ink-2); margin-top:24px; max-width:52ch; line-height:1.6}
.sh .ctas{margin-top:36px; display:flex; gap:12px; flex-wrap:wrap}

/* placeholder image block */
.sh-visual{
  aspect-ratio:5/6; border-radius:28px; background:var(--bg-soft);
  border:1px solid var(--line); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:32px;
}
.sh-visual::before{
  content:""; position:absolute; inset:0; background:var(--grad); opacity:.32;
  mask:radial-gradient(ellipse 70% 55% at 50% 45%, #000 40%, transparent 75%);
  -webkit-mask:radial-gradient(ellipse 70% 55% at 50% 45%, #000 40%, transparent 75%);
}
.sh-visual .sh-ring{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.sh-visual .sh-ring svg{width:62%; height:62%; opacity:.22; color:var(--accent)}
.sh-visual .ph-tag{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
}
.sh-visual .ph-tag .dot{width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* ========== QUICK FACTS STRIP ========== */
.facts{padding:40px 0; background:var(--bg-card); border-bottom:1px solid var(--line)}
.facts-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:48px}
.fact .label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.fact .val{font-family:var(--serif); font-size:22px; line-height:1.2; color:var(--ink); letter-spacing:-0.01em}
.fact .val em{color:var(--ink-2)}

/* ========== SECTION BASE ========== */
.sec{padding:100px 0; border-bottom:1px solid var(--line)}
.sec-soft{background:var(--bg-soft)}
.sec-grid{display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start}
.sec-head h2{font-size:clamp(36px,4.4vw,52px); margin-top:18px; max-width:14ch}
.sec-head .hint{font-size:14px; color:var(--ink-2); margin-top:18px; max-width:30ch; line-height:1.6}
.sec-body p{font-size:16px; color:var(--ink-2); line-height:1.7; max-width:62ch}
.sec-body p + p{margin-top:18px}
.sec-body p b{color:var(--ink); font-weight:500}

/* ========== "PARA QUÉ SIRVE" checklist ========== */
.checks{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:40px}
.check{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:20px 22px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); align-items:start}
.check .c-ic{width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none}
.check b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-0.005em; line-height:1.35}
.check span{display:block; font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.55}

/* ========== VENTANA IDÓNEA — timeline semanas ========== */
.window{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px 40px; margin-top:40px}
.window h3{font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--ink); margin-bottom:24px}
.weeks{position:relative; height:70px; margin:32px 0 20px}
.weeks-track{position:absolute; left:0; right:0; top:32px; height:2px; background:var(--line)}
.weeks-fill{position:absolute; top:32px; height:2px; background:var(--accent); border-radius:2px}
.weeks-mark{position:absolute; top:22px; width:22px; height:22px; border-radius:50%; background:var(--bg-card); border:2px solid var(--line-2); transform:translateX(-50%); display:grid; place-items:center}
.weeks-mark.active{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 6px var(--accent-soft)}
.weeks-mark .lbl{position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--ink-2); letter-spacing:.04em; white-space:nowrap}
.weeks-mark.active .lbl{color:var(--ink); font-weight:500}
.weeks-mark .sub{position:absolute; top:30px; left:50%; transform:translateX(-50%); font-size:10.5px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.window p.note{font-size:13.5px; color:var(--ink-2); margin-top:28px; line-height:1.6; padding-top:20px; border-top:1px solid var(--line); max-width:72ch}

/* ========== FAQ ========== */
.faq-head{max-width:48ch; margin-bottom:40px}
.faq-head h2{font-size:clamp(34px,4vw,48px); margin-top:16px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%; background:none; border:none; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; gap:24px;
  padding:24px 0; text-align:left; align-items:center;
  font-family:var(--sans); font-size:17px; font-weight:500; color:var(--ink); letter-spacing:-0.005em;
  transition:color .15s;
}
.faq-q:hover{color:var(--accent)}
.faq-q .ic{width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink-2); transition:transform .25s, background .15s}
.faq-item[open] .faq-q .ic{transform:rotate(45deg); background:var(--ink); color:var(--bg); border-color:var(--ink)}
.faq-a{padding:0 56px 28px 0; font-size:15px; color:var(--ink-2); line-height:1.65; max-width:74ch}
.faq-a p + p{margin-top:12px}

/* ========== CTA BAND ========== */
.cta-band{padding:110px 0; background:var(--ink); color:var(--bg); text-align:center; position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:120%; height:200%; background:radial-gradient(ellipse at center, color-mix(in oklab, var(--grad), transparent 70%), transparent 60%); opacity:.28; pointer-events:none}
.cta-band > *{position:relative}
.cta-band h2{font-family:var(--serif); font-size:clamp(40px,5vw,68px); color:var(--bg); max-width:22ch; margin:0 auto; line-height:1.1}
.cta-band p{color:color-mix(in oklab, var(--bg) 70%, transparent); font-size:17px; margin-top:20px; max-width:56ch; margin-left:auto; margin-right:auto; line-height:1.55}
.cta-band .btns{margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta-band .btn-primary{background:var(--bg); color:var(--ink)}
.cta-band .btn-ghost{color:var(--bg); border-color:color-mix(in oklab, var(--bg) 25%, transparent)}

/* ========== RELATED ========== */
.related{padding:80px 0; background:var(--bg-soft)}
.related h3{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:32px}
.rel-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.rel-card{padding:28px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .15s, transform .2s}
.rel-card:hover{border-color:var(--line-2); transform:translateY(-2px)}
.rel-card .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.rel-card b{display:block; font-family:var(--serif); font-size:22px; line-height:1.25; color:var(--ink); margin-top:12px; letter-spacing:-0.01em}
.rel-card b em{color:var(--ink-2)}
.rel-card .arr{margin-top:18px; font-size:13px; color:var(--ink-2); display:inline-flex; gap:6px; align-items:center}

/* ========== FOOTER ========== */
footer{padding:72px 0 32px; background:var(--bg); border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:56px; margin-bottom:48px}
.foot-brand p{font-size:13.5px; color:var(--ink-2); margin-top:20px; line-height:1.6; max-width:32ch}
.foot-col h4{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; font-weight:600}
.foot-col a{display:block; font-size:13.5px; color:var(--ink-2); padding:5px 0}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{padding-top:28px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}

/* ========== FLOATING WHATSAPP ========== */
.wa-float{position:fixed; bottom:24px; right:24px; background:#25D366; color:#fff; padding:14px 20px 14px 14px; border-radius:999px; font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:0 14px 32px -10px rgba(37,211,102,.5); z-index:50; transition:transform .15s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float .icon{width:22px; height:22px; display:grid; place-items:center}
.wa-float svg{width:22px; height:22px; fill:#fff}

/* ========== RESPONSIVE ========== */
@media (max-width: 980px){
  .sh-grid{grid-template-columns:1fr; gap:48px}
  .facts-row{grid-template-columns:repeat(2,1fr); gap:32px 40px}
  .sec-grid{grid-template-columns:1fr; gap:32px}
  .checks{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .nav-links{display:none}
  .sh{padding:32px 0 56px}
  .sec{padding:72px 0}
  .cta-band{padding:80px 0}
  .window{padding:24px 22px}
  .weeks{height:80px}
  .weeks-mark .lbl{font-size:10px}
  .weeks-mark .sub{font-size:9.5px}
}