/* ===== Estilos de páginas de artículo (scoped) ===== */

.article-hero{
  padding: 44px 0 18px;
  background:
    radial-gradient(900px 400px at 85% -20%, rgba(16,185,129,.10), transparent 45%),
    radial-gradient(800px 320px at -10% -10%, rgba(14,165,160,.08), transparent 50%);
}
.breadcrumbs{
  font-size:.92rem; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:8px;
}
.breadcrumbs a{ color:var(--muted); text-decoration:underline dotted }

.article-hero h1{
  font-size:clamp(1.6rem, 3.4vw, 2.2rem);
  line-height:1.15; margin:6px 0 8px;
}
.article-sub{ color:var(--muted); margin:0 0 10px }
.article-meta{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.95rem }

.article-cta-top{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.article-cta-bottom{
  margin-top:24px; background:#f8fafc; border:1px dashed var(--border);
  border-radius:16px; padding:16px;
}

/* grid de página */
.article{ padding: 12px 0 36px; }
.article__grid{
  display:grid; grid-template-columns: 280px 1fr; gap:28px;
}
@media (max-width: 980px){
  .article__grid{ grid-template-columns: 1fr; }
}

/* TOC */
.article__toc .card{ padding:14px; }
.toc__title{ font-weight:800; margin-bottom:10px; }
.article__toc ol{
  margin:0; padding-left:18px; display:grid; gap:8px; font-size:.98rem;
}
.article__toc a{ color:var(--text); }
.article__toc a:hover{ text-decoration:underline }

/* contenido */
.article__content .lead{
  font-size:1.05rem; color:var(--muted);
}
.article__content h2{
  font-size:clamp(1.15rem, 2.4vw, 1.45rem);
  margin:18px 0 10px;
}
.article__content p{ margin:10px 0; }
.article__content ul{ margin:10px 0; padding-left:18px; }

.checklist{ display:flex; gap:10px; align-items:flex-start; margin:8px 0; }
.checklist .check{
  flex:0 0 18px; height:18px; border-radius:5px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:grid; place-items:center; color:#fff; font-size:.85rem; line-height:1;
}

/* plan de acción */
.plan{
  border:1px solid var(--border); background:var(--card); border-radius:16px; padding:14px; margin:12px 0;
  box-shadow: var(--shadow);
}
.plan__title{ font-weight:800; margin-bottom:8px; }
.plan__list{ margin:0; padding-left:18px; display:grid; gap:8px; }
.note{ color:var(--muted); font-size:.95rem; margin:10px 0; }

.cta-inline{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.sep{ border:0; border-top:1px solid var(--border); margin:22px 0; }
.author{ display:flex; gap:12px; align-items:center; }
.author img{ width:100px; height:100px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }

/* móvil */
@media (max-width:768px){
  .article-hero{ padding: 28px 0 12px; }
  .article-meta{ flex-wrap:wrap }
}



/* ===========================
   Variables + base
=========================== */
:root{
  --brand:#10b981;
  --brand-2:#0ea5a0;
  --text:#0f172a;
  --muted:#475569;
  --bg:#f8fafc;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(2, 6, 23, .08);
  --radius:18px;

  --nav-h: 88px;               /* altura header desktop */
  --sticky-offset: 120px;       /* se recalcula por JS */
  --safe-l: max(16px, env(safe-area-inset-left));
  --safe-r: max(16px, env(safe-area-inset-right));
}

*{ box-sizing:border-box; min-width:0 }
html,body{ height:100% }
html,body{ overflow-x:hidden }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  padding-bottom: var(--sticky-offset);
  padding-top: var(--nav-h);
}
section[id]{ scroll-margin-top: calc(var(--nav-h) + 16px); }

a{ color:inherit; text-decoration:none }
img,svg,video,canvas{ max-width:100%; height:auto; display:block }
.container{ max-width:1100px; margin:0 auto; padding:0 20px; padding-left:var(--safe-l); padding-right:var(--safe-r); }

/* ===========================
   Header + Nav (hamburguesa)
=========================== */
header{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
  z-index:2000; isolation:isolate;
}
.nav{ height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav__left{ display:flex; align-items:center; gap:14px }
.logo{ height:calc(var(--nav-h)  - 0.70px); width:auto }
.brand{ font-weight:700; letter-spacing:.2px }
.nav__links{ display:flex; gap:18px; align-items:center }
.nav__links a{ font-size:.95rem; color:var(--muted) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; border:1px solid transparent;
  font-weight:600; cursor:pointer; transition:transform .06s, box-shadow .2s, background .2s;
}
.btn:active{ transform:translateY(1px) }
.btn--primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 10px 20px rgba(16,185,129,.22) }
.btn--ghost{ border-color:var(--border); background:#fff }

/* Hamburguesa */
.nav__toggle{
  display:none; width:40px;height:40px; padding:6px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  align-items:center; justify-content:center; gap:4px;
}
.nav__toggle span{ display:block; width:20px; height:2px; background:var(--text); transition:transform .2s, opacity .2s; }
.nav__toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nav__toggle.is-open span:nth-child(2){ opacity:0 }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* M車vil: panel deslizante */
@media (max-width:920px){
  :root{ --nav-h:72px; }
  .brand{ display:none }
  .nav__toggle{ display:flex }
  .logo{ height:70px }

  .nav__links{
    position:fixed; inset:72px 0 0 0;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(160%) blur(10px);
    border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:12px;
    padding:16px var(--safe-l) 24px var(--safe-r);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .22s, opacity .22s; z-index:1999;
  }
  .nav__links.is-open{ transform:translateY(0); opacity:1; pointer-events:auto }
  .nav__links .btn{ width:100% }
}

/* ===========================
   Hero
=========================== */
.hero{
  padding:48px 0 24px;
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(16,185,129,.12), transparent 45%),
    radial-gradient(900px 400px at -10% 0%, rgba(14,165,160,.1), transparent 50%);
}
.hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center }
.hero h1{ font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.15; margin:0 0 14px }
.hero p{ font-size:1.05rem; color:var(--muted); margin:0 0 22px }
.badge{ display:inline-flex; align-items:center; gap:8px; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; padding:6px 12px; border-radius:999px; font-weight:600; font-size:.85rem }

/* ===========================
   Secciones / Cards
=========================== */
.section{ padding:40px 0 }
.section h2{ font-size:clamp(1.4rem,3vw,2rem); margin:0 0 10px }
.section .lead{ margin:0 0 20px; color:var(--muted) }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px }
.card h3{ margin:0 0 8px }
.price{ font-size:1.1rem; font-weight:800; margin:8px 0; color:#065f46 }
.price small{ font-weight:600; color:var(--muted) }
.features{ margin:14px 0 18px; padding:0; list-style:none; display:grid; gap:8px }
.features li{ display:flex; align-items:flex-start; gap:10px }
.check{ flex:0 0 18px; height:18px; border-radius:5px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:grid; place-items:center; color:#fff; font-size:.85rem; line-height:1 }

.tag{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem; border:1px solid var(--border); color:#0b4a46; background:#f0fdfa }

/* Listados + FAQ */
.list{ display:grid; gap:12px; margin:16px 0 8px }
.list .item{ background:#fff; border:1px dashed var(--border); border-radius:12px; padding:14px; display:flex; justify-content:space-between; align-items:center }
details{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; margin:8px 0 }
summary{ cursor:pointer; font-weight:700 }

/* ===========================
   Sticky CTA
=========================== */
.sticky-cta{
  position:fixed; bottom:12px; left:50%; transform:translate3d(-50%, 12px, 0);
  width:min(100%, 1020px); padding:10px 16px; z-index:50;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  opacity:0; transition:transform .32s, opacity .32s; will-change:transform, opacity; backface-visibility:hidden;
}
.sticky-cta.is-mounted{ animation:stickyIn .38s ease forwards }
@keyframes stickyIn{ from{ transform:translate3d(-50%,12px,0); opacity:0 } to{ transform:translate3d(-50%,0,0); opacity:1 } }
.sticky-cta.is-hidden{ transform:translate3d(-50%, calc(100% + 24px), 0); opacity:0; pointer-events:none }
.sticky-cta .bar{
  display:flex; gap:10px; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(10px); border:1px solid var(--border);
  box-shadow:var(--shadow); padding:10px; border-radius:999px;
}
.sticky-cta .bar .btn{ flex:1 }

/* Sentinel invisible */
#stickySentinel{ height:var(--sticky-offset); pointer-events:none }

/* ===========================
   Otros servicios / Confirmatorios
=========================== */
.svc-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.panel-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.card .badge-price{
  display:inline-flex; align-items:center; gap:8px; background:#fffbeb; color:#7c2d12;
  border:1px solid #fed7aa; padding:6px 12px; border-radius:999px; font-weight:700; font-size:.88rem;
}
.card .sub{ color:var(--muted); margin:2px 0 10px; font-size:.95rem }
.card .pill{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem; border:1px solid #fed7aa; color:#7c2d12; background:#fff7ed }
.card .meta{ display:grid; gap:8px; margin-top:10px }
.card .meta .row{ display:flex; gap:8px; align-items:flex-start; background:#f8fafc; border:1px dashed var(--border); padding:10px 12px; border-radius:12px; font-size:.93rem }
.card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }

/* ===========================
   Responsivo
=========================== */
@media (max-width:920px){
  .cards, .panel-cards, .svc-cards{ grid-template-columns:1fr }
}
@media (max-width:768px){
  .section{ padding:28px 0 }
  .card{ padding:18px; border-radius:16px }
  .features{ gap:8px }
  .price{ font-size:1rem }
  .hero{ padding:28px 0 16px }
  .hero__grid{ grid-template-columns:1fr; gap:18px }
  .hero h1{ font-size:clamp(1.35rem, 6.4vw, 1.95rem); line-height:1.15 }
  .hero p{ font-size:0.8rem }
  .badge{ font-size:.82rem; padding:6px 10px }
  .sticky-cta{ width:calc(100% - (var(--safe-l) + var(--safe-r))); max-width:640px }
}
@media (max-width:640px){
  .btn{ padding:14px 18px; font-size:1rem }
  .card .btn{ width:100% }
  
  /* Backdrop oscuro detrás del menú móvil */
.nav__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .45); /* scrim */
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 1998; /* debajo del panel (1999) y del header (2000) */
}
.nav__backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Menú móvil: fondo sólido y mejor contraste de links */
@media (max-width:920px){
  .nav__links{
    background:#fff;          /* sólido (antes era translúcido) */
    box-shadow: 0 20px 40px rgba(2, 6, 23, .14);
  }
  .nav__links a{
    color: var(--text);
    font-weight: 600;
    padding: 10px 4px;
  }
  
/* ===== FIX menú móvil legible ===== */
@media (max-width:920px){
  /* Panel del menú: fondo sólido y sobre todo */
  #navMenu{
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 20px 40px rgba(2,6,23,.14);
    z-index:2200 !important;          /* header está en 2000 */
  }

  /* Velo oscurecido detrás del panel */
  .nav__backdrop{
    position:fixed; inset:0;
    background:rgba(2,6,23,.4);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    z-index:2100;                      /* por debajo del panel, por encima del sitio */
  }
  .nav__backdrop.is-open{
    opacity:50; pointer-events:auto;
  }
  
  /* ===== Menú móvil: capas + overlay sólido ===== */
@media (max-width:920px){
  /* Panel del menú */
  #navMenu{
    position:fixed;
    inset:var(--nav-h) 0 0 0;             /* debajo del header */
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 20px 40px rgba(2,6,23,.14);
    z-index: 9000 !important;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
  }
  #navMenu.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }

  /* Velo detrás del panel */
  .nav__backdrop{
    position:fixed; inset:0;
    background:rgba(2,6,23,.44);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    z-index: 8990;                        /* justo debajo del panel */
  }
  .nav__backdrop.is-open{ opacity:1; pointer-events:auto; }
}

/* Cuando el menú está abierto, esconde la sticky CTA */
.menu-open .sticky-cta{
  transform:translate3d(-50%, calc(100% + 24px), 0);
  opacity:0; pointer-events:none;
}
/* Breadcrumbs */
.breadcrumbs{
  font-size:.92rem;
  color:var(--muted);
  margin:10px 0 0;
}
.breadcrumbs a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.breadcrumbs .sep{ margin:0 6px; opacity:.6 }