:root{
  --ink:#14171b;
  --ink-2:#3b4148;
  --paper:#f5f4f1;
  --panel:#ffffff;
  --line:#dedbd5;
  --line-2:#eceae5;
  --signal:#c8102e;
  --steel:#6d757e;
  --green:#1c6b4a;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',Arial,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:-0.01em;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* Topbar */
.topbar{background:var(--ink); color:#c9ccd0; font-size:13px; padding:8px 0;}
.topbar .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.topbar a{text-decoration:none; color:#e6e7e9;}
.topbar .sep{color:#4b5158; margin:0 8px;}

/* Header */
header{position:sticky; top:0; z-index:60; background:rgba(245,244,241,0.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 24px; max-width:1120px; margin:0 auto;}
.logo img{height:42px; width:auto;}
.nav-links{display:flex; gap:24px; font-size:14.5px; align-items:center;}
.nav-links a{text-decoration:none; color:var(--ink-2);}
.nav-links a:hover,.nav-links a.activo{color:var(--signal);}
.nav-cta{background:var(--green); color:#fff; text-decoration:none; padding:10px 16px; font-size:14px; font-weight:600; border-radius:3px; white-space:nowrap;}
@media (max-width:960px){ .nav-links{display:none;} }

/* Botones */
.btn{text-decoration:none; font-weight:600; font-size:15px; padding:14px 22px; border-radius:3px; display:inline-flex; align-items:center; gap:9px;}
.btn-wa{background:var(--green); color:#fff;}
.btn-ghost{border:1px solid var(--ink); color:var(--ink);}
.btn-ghost-light{border:1px solid rgba(255,255,255,0.45); color:#fff;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap;}

/* Secciones */
section{padding:60px 0;}
.shead{max-width:62ch; margin-bottom:34px;}
.shead h2{font-size:clamp(23px,3vw,31px); font-weight:600; margin:0 0 10px;}
.shead p{color:var(--ink-2); margin:0; font-size:16.5px;}

/* Cabecera interna de página de servicio */
.page-hero{background:var(--ink); color:#f1f0ed; padding:52px 0 46px; border-bottom:1px solid #262b30;}
.page-hero .kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; color:#ff6b7f; margin:0 0 14px;}
.page-hero h1{font-size:clamp(27px,4vw,40px); line-height:1.14; font-weight:600; margin:0 0 16px; color:#fff; max-width:22ch;}
.page-hero p.lead{font-size:17px; color:#c7cace; max-width:60ch; margin:0 0 26px;}
.breadcrumb{font-size:13px; color:#8d949b; margin-bottom:18px;}
.breadcrumb a{color:#c9ccd0; text-decoration:none;}

/* Cuerpo de artículo */
.articulo{background:var(--panel); border-bottom:1px solid var(--line);}
.art-grid{display:grid; grid-template-columns:1fr 340px; gap:52px; align-items:start;}
@media (max-width:940px){ .art-grid{grid-template-columns:1fr; gap:36px;} }
.art h2{font-size:24px; font-weight:600; margin:36px 0 12px;}
.art h2:first-child{margin-top:0;}
.art h3{font-size:18px; font-weight:600; margin:26px 0 8px;}
.art p{font-size:16px; color:var(--ink-2); margin:0 0 14px;}
.art ul{margin:0 0 18px; padding-left:20px;}
.art li{font-size:15.5px; color:var(--ink-2); margin-bottom:7px;}
.art img{border:1px solid var(--line); border-radius:4px; margin:20px 0;}
.art table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px;}
.art th{background:var(--paper); text-align:left; padding:11px 13px; border:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
.art td{padding:11px 13px; border:1px solid var(--line); color:var(--ink-2); vertical-align:top;}

/* Caja lateral */
.aside-box{border:1px solid var(--line); border-radius:4px; padding:22px; background:var(--paper); position:sticky; top:96px;}
.aside-box h3{margin:0 0 10px; font-size:17px; font-weight:600;}
.aside-box p{font-size:14.5px; color:var(--ink-2); margin:0 0 16px;}
.aside-box .mono{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--signal); display:block; margin-bottom:9px;}
.aside-box .dato{border-top:1px solid var(--line); padding-top:13px; margin-top:15px; font-size:14px; color:var(--ink-2);}
.aside-box .dato strong{display:block; color:var(--ink); font-size:14.5px;}

/* Bloque señales / síntomas */
.chips{display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 22px;}
.chip{background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:7px 12px; font-size:13.5px; color:var(--ink-2);}

/* Aviso */
.aviso{border-left:3px solid var(--signal); background:var(--paper); padding:16px 18px; margin:22px 0; border-radius:0 3px 3px 0;}
.aviso p{margin:0; font-size:15px;}
.aviso strong{color:var(--ink);}

/* Otros servicios */
.otros{background:var(--paper);}
.otros-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:880px){ .otros-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .otros-grid{grid-template-columns:1fr;} }
.otros-grid a{background:var(--panel); padding:22px; text-decoration:none; border-left:3px solid transparent;}
.otros-grid a:hover{border-left-color:var(--signal);}
.otros-grid .tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; color:var(--signal); display:block; margin-bottom:9px;}
.otros-grid h3{margin:0 0 6px; font-size:16px; font-weight:600;}
.otros-grid p{margin:0; font-size:14px; color:var(--ink-2);}

/* CTA final */
.cta-final{background:var(--ink); color:#eceae7; text-align:center;}
.cta-final h2{color:#fff; font-size:clamp(22px,3vw,29px); margin:0 0 12px;}
.cta-final p{color:#a9b0b7; max-width:56ch; margin:0 auto 24px; font-size:16px;}
.cta-final .cta-row{justify-content:center;}

/* Footer */
footer{background:var(--ink); color:#8d949b; padding:34px 0; font-size:13.5px; border-top:1px solid #262b30;}
.ft{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;}
footer a{color:#c9ccd0; text-decoration:none; margin-left:16px;}
footer a:hover{color:#fff;}

/* WhatsApp flotante */
.wa-float{position:fixed; bottom:22px; right:22px; z-index:80; background:#25D366; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 18px rgba(0,0,0,0.28); text-decoration:none;}
.wa-float svg{width:29px;height:29px;fill:#fff;}
