/* ============================================================================
   8A Dental — hoja de estilo del sitio
   Depende de tokens.css (sistema de marca). No usar hex crudos aquí:
   todo color sale de una variable --c-* o semántica.
   ========================================================================== */

/* ── fuentes autoalojadas (sin round-trip a un CDN externo) ─────────────── */
@font-face{
  font-family:'Montserrat';
  src:url('/assets/fonts/montserrat.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Noto Sans';
  src:url('/assets/fonts/notosans.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto;}
a{color:var(--link); text-decoration:none;}
a:hover{color:var(--link-hover); text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display); text-wrap:balance; margin:0;}
p{margin:0;}
ul{margin:0; padding:0;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--s-3);}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-marino); color:#fff; padding:.75rem 1.25rem;
  border-radius:0 0 var(--radius-sm) 0; font-weight:600;
}
.skip:focus{left:0;}

/* ── iconos ─────────────────────────────────────────────────────────────── */
.ico,.mIco{
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico{width:24px; height:24px;}
.mIco{width:19px; height:19px; flex:0 0 auto;}

/* ── botones ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm);
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover{text-decoration:none;}
/* primario: cian 800 — único cian que sostiene texto blanco (5.07:1) */
.btnP{background:var(--c-tur-800); color:#fff;}
.btnP:hover{background:var(--c-tur-900); color:#fff;}
/* sólido navy */
.btnG{background:var(--c-marino); color:#fff;}
.btnG:hover{background:var(--c-marino); color:#fff;}
/* contorno sobre fondo claro */
.btnO{background:transparent; color:var(--link); border-color:var(--border-field);}
.btnO:hover{border-color:var(--c-tur-800); color:var(--link-hover);}
/* contorno sobre fondo oscuro */
.btnL{background:transparent; color:#fff; border-color:rgba(255,255,255,.45);}
.btnL:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff;}

/* ── cabecera ───────────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.hdrIn{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:74px;}

.marca{display:flex; align-items:center; flex:0 0 auto;}
.marca:hover{text-decoration:none;}
/* El logotipo horizontal es la version para encabezados web (LEEME.txt).
   Se sirven las dos tintas y la negativa, y se intercambian con el tema:
   sobre el encabezado oscuro el marino del logotipo no se veria. */
.marcaLogo{width:auto; height:38px;}
.marcaLogo.oscuro{display:none;}
@media (prefers-color-scheme:dark){
  .marcaLogo.claro{display:none;}
  .marcaLogo.oscuro{display:block;}
}
@media (max-width:400px){.marcaLogo{height:31px;}}

.nav{display:flex; align-items:center; gap:var(--s-3);}
.navLinks{display:flex; align-items:center; gap:var(--s-3);}
.navLinks a{
  font-family:var(--font-display); font-weight:600; font-size:.94rem;
  color:var(--text); padding:.4rem 0; border-bottom:2px solid transparent;
}
.navLinks a:hover{color:var(--link); text-decoration:none;}
.navLinks a.on{color:var(--c-tur-800); border-bottom-color:var(--c-tur-300);}
.navMega{display:none;}

.burger{
  display:none; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; padding:10px; flex:0 0 auto;
}
.burger span{
  display:block; height:2px; background:var(--brand-ink); border-radius:2px;
  margin:4px 0; transition:transform var(--transition), opacity var(--transition);
}
.burger.x span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:960px){
  .burger{display:block;}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow); padding:var(--s-2) var(--s-3) var(--s-3);
    display:none;
  }
  .nav.abierto{display:flex;}
  .navLinks{flex-direction:column; align-items:stretch; gap:0;}
  .navLinks a{padding:.85rem 0; border-bottom:1px solid var(--border);}
  .navLinks a.on{border-bottom-color:var(--border); }
  .navMega{display:block; padding-top:var(--s-2);}
  .navMegaTit{
    display:block; font-size:var(--fs-label); letter-spacing:var(--ls-label);
    text-transform:uppercase; color:var(--text-muted); font-weight:600;
    margin-bottom:.6rem;
  }
  .navMegaGrid{display:grid; gap:2px;}
  .navMegaGrid a{
    display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem;
    border-radius:var(--radius-sm); color:var(--text); font-size:.9rem;
  }
  .navMegaGrid a:hover{background:var(--surface-alt); color:var(--link); text-decoration:none;}
  .navMegaGrid a .mIco{color:var(--c-tur-800);}
  .navCta{margin-top:var(--s-2); width:100%;}
}

/* ── secciones ──────────────────────────────────────────────────────────── */
.sec{padding:var(--s-6) 0;}
.sec.alt{background:var(--surface-alt);}
.sec.navy{background:var(--brand-ground); color:#fff;}
@media (max-width:720px){.sec{padding:var(--s-5) 0;}}

.secHead{max-width:64ch; margin-bottom:var(--s-4);}
.secHead.cent{margin-left:auto; margin-right:auto; text-align:center;}
.kick{
  display:block; font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--accent-ink); font-weight:700; margin-bottom:.7rem;
}
.sec.navy .kick{color:var(--c-tur-400);}
h2.tit{font-size:var(--fs-h2); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); font-weight:700;}
.secHead p{color:var(--text-muted); margin-top:var(--s-2); font-size:1.05rem;}
.sec.navy .secHead p{color:var(--c-mar-200);}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{background:var(--brand-ground); color:#fff; position:relative; overflow:hidden;}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1100px 480px at 88% -12%, rgba(34,178,205,.28), transparent 62%);
}
.heroIn{position:relative; z-index:1; padding:var(--s-6) 0;}
.heroGrid{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s-5); align-items:center;}
.hero h1{
  font-size:var(--fs-h1); line-height:1.05; letter-spacing:var(--ls-tight);
  font-weight:700; margin-bottom:var(--s-3); max-width:19ch;
}
.hero h1 em{font-style:normal; color:var(--c-tur-400);}
.heroP{color:var(--c-mar-200); font-size:1.12rem; max-width:56ch; margin-bottom:var(--s-3);}
.heroBtns{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-3);}
.heroNota{font-size:.85rem; color:var(--c-mar-300); display:flex; align-items:center; gap:.5rem;}
.heroNota .ico{width:17px; height:17px; color:var(--c-tur-400);}

.heroPanel{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg); padding:var(--s-3);
}
.heroPanelTit{
  font-family:var(--font-display); font-size:var(--fs-label); font-weight:700;
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--c-tur-400); margin-bottom:var(--s-2);
}
.heroList{display:grid; gap:1px; background:rgba(255,255,255,.12); border-radius:var(--radius-sm); overflow:hidden;}
.heroList a{
  display:flex; align-items:center; gap:.8rem; padding:.9rem 1rem;
  background:var(--brand-ground); color:#fff; font-size:.94rem; font-weight:500;
  transition:background var(--transition);
}
.heroList a:hover{background:var(--brand-ground-hi); text-decoration:none;}
.heroList a .mIco{color:var(--c-tur-400);}
.heroList a span{flex:1;}
.heroList a::after{content:"→"; color:var(--c-tur-400); font-size:1rem;}

@media (max-width:960px){
  .heroGrid{grid-template-columns:1fr; gap:var(--s-4);}
  .hero h1{max-width:100%;}
}

/* ── rejilla de tarjetas ────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:var(--s-3);}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s-3); display:flex; flex-direction:column;
  transition:border-color var(--transition), transform var(--transition);
}
a.card:hover{border-color:var(--c-tur-300); transform:translateY(-3px); text-decoration:none;}
.cardIco{
  width:46px; height:46px; border-radius:var(--radius-sm);
  background:var(--surface-accent); border:1px solid var(--border-accent);
  display:grid; place-items:center; color:var(--accent-ink); margin-bottom:var(--s-2);
}
.card h3{font-size:1.08rem; font-weight:600; color:var(--text); margin-bottom:.4rem;}
.card p{color:var(--text-muted); font-size:.93rem; flex:1;}
.cardMas{
  margin-top:var(--s-2); font-family:var(--font-display); font-weight:600;
  font-size:.88rem; color:var(--link);
}

/* ── lista de comprobación ──────────────────────────────────────────────── */
.chk{display:grid; gap:.7rem; list-style:none;}
.chk li{display:flex; align-items:flex-start; gap:.7rem; color:var(--text-muted);}
.chk li .ico{width:20px; height:20px; color:var(--accent-ink); flex:0 0 auto; margin-top:2px;}
.sec.navy .chk li{color:var(--c-mar-200);}
.sec.navy .chk li .ico{color:var(--c-tur-400);}

/* ── proceso numerado (secuencia real) ──────────────────────────────────── */
.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:var(--s-3); counter-reset:p;}
.paso{position:relative; padding-top:var(--s-3); border-top:2px solid var(--c-tur-300); counter-increment:p;}
.paso::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--accent-ink); display:block; margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
}
.paso h3{font-size:1.05rem; font-weight:600; margin-bottom:.4rem;}
.paso p{color:var(--text-muted); font-size:.93rem;}

/* ── planes 8A Care ─────────────────────────────────────────────────────── */
.planes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--s-3); align-items:start;}
.plan{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s-4) var(--s-3); display:flex; flex-direction:column;
}
.plan.destacado{border:2px solid var(--c-tur-300); position:relative;}
/* navy fijo sobre cian fijo: el fondo no cambia con el tema, asi que el
   texto navy es correcto en claro Y en oscuro (6.60:1). No tocar. */
.planTag{
  position:absolute; top:-11px; left:var(--s-3);
  background:var(--c-tur-300); color:var(--c-marino);
  font-family:var(--font-display); font-weight:700; font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase; padding:.25rem .6rem;
  border-radius:3px;
}
.planKick{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:600;}
.plan h3{font-size:1.4rem; font-weight:700; margin:.35rem 0 .5rem;}
.planDesc{color:var(--text-muted); font-size:.92rem; min-height:2.8em;}
.planPrecio{
  font-family:var(--font-display); font-weight:700; font-size:1.9rem;
  color:var(--brand-ink); margin:var(--s-2) 0 .2rem; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.planPrecio small{font-size:.9rem; font-weight:600; color:var(--text-muted); letter-spacing:0;}
.planNota{font-size:.82rem; color:var(--text-muted); margin-bottom:var(--s-3);}
.plan .chk{margin-bottom:var(--s-3); flex:1;}
.plan .chk li{font-size:.9rem;}
.plan .btn{width:100%;}

/* ── incluido / no incluido ─────────────────────────────────────────────── */
.dosCol{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3);}
@media (max-width:760px){.dosCol{grid-template-columns:1fr;}}
.caja{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s-3);}
.caja h3{font-size:1.05rem; font-weight:700; margin-bottom:var(--s-2); display:flex; align-items:center; gap:.5rem;}
.caja ul{list-style:none; display:grid; gap:.6rem;}
.caja li{color:var(--text-muted); font-size:.93rem; padding-left:1.1rem; position:relative;}
.caja li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%;}
.cajaSi li::before{background:var(--accent-ink);}
.cajaNo li::before{background:var(--text-muted);}

/* ── contenido de texto largo ───────────────────────────────────────────── */
.prosa{max-width:68ch;}
.prosa p{color:var(--text-muted); margin-bottom:var(--s-2);}
.prosa h3{font-size:1.15rem; font-weight:600; color:var(--text); margin:var(--s-4) 0 var(--s-2);}
.prosa h3:first-child{margin-top:0;}
.prosa strong{color:var(--text); font-weight:600;}
.prosa ul{list-style:none; display:grid; gap:.6rem; margin-bottom:var(--s-2);}
.prosa ul li{color:var(--text-muted); padding-left:1.15rem; position:relative;}
.prosa ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--c-tur-300);
}

/* ── dos columnas con panel lateral ─────────────────────────────────────── */
.conPanel{display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s-5); align-items:start;}
@media (max-width:900px){.conPanel{grid-template-columns:1fr; gap:var(--s-4);}}
.panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s-3); position:sticky; top:96px;
}
@media (max-width:900px){.panel{position:static;}}
.panel h3{font-size:1.05rem; font-weight:700; margin-bottom:var(--s-2);}
.panel p{color:var(--text-muted); font-size:.92rem; margin-bottom:var(--s-3);}
.panel .btn{width:100%; margin-bottom:.6rem;}
.panelDato{display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--text-muted); padding:.5rem 0;}
.panelDato .ico{width:18px; height:18px; color:var(--accent-ink);}

/* ── franja de llamada ──────────────────────────────────────────────────── */
.cta{background:var(--brand-ground); color:#fff; border-radius:var(--radius-lg); padding:var(--s-4);}
.ctaIn{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;}
.cta h2{font-size:1.65rem; font-weight:700; line-height:1.2; margin-bottom:.5rem;}
.cta p{color:var(--c-mar-200); max-width:52ch;}
.ctaBtns{display:flex; gap:var(--s-2); flex-wrap:wrap;}

/* ── formulario ─────────────────────────────────────────────────────────── */
.form{display:grid; gap:var(--s-2);}
.campo{display:grid; gap:.35rem;}
.campo label{font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--text);}
.campo .ayuda{font-size:.8rem; color:var(--text-muted);}
input,select,textarea{
  width:100%; font:inherit; color:var(--text); background:var(--surface);
  border:1px solid var(--border-field); border-radius:var(--radius-sm);
  padding:.8rem .9rem;
}
input:hover,select:hover,textarea:hover{border-color:var(--c-tur-800);}
textarea{min-height:120px; resize:vertical;}

/* ── contacto ───────────────────────────────────────────────────────────── */
.contactoGrid{display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s-4); align-items:start;}
@media (max-width:900px){.contactoGrid{grid-template-columns:1fr;}}
.viaLista{display:grid; gap:var(--s-2);}
.via{
  display:flex; gap:var(--s-2); padding:var(--s-3);
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  color:var(--text);
}
a.via:hover{border-color:var(--c-tur-300); text-decoration:none;}
.viaIco{
  width:42px; height:42px; border-radius:var(--radius-sm); flex:0 0 auto;
  background:var(--surface-accent); border:1px solid var(--border-accent);
  display:grid; place-items:center; color:var(--accent-ink);
}
.via b{display:block; font-family:var(--font-display); font-size:.98rem; font-weight:600;}
.via span{display:block; color:var(--text-muted); font-size:.9rem;}

/* ── pie ────────────────────────────────────────────────────────────────── */
.pie{background:var(--brand-ground); color:var(--c-mar-200); margin-top:var(--s-6);}
.pieIn{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-4);
  padding:var(--s-5) var(--s-3) var(--s-4);
}
@media (max-width:900px){.pieIn{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.pieIn{grid-template-columns:1fr;}}
.pieLogo{width:auto; height:36px; margin-bottom:var(--s-2);}
.pieMarca p{font-size:.9rem; margin-top:var(--s-2);}
.pieEmp{color:var(--c-mar-300); font-size:.85rem;}
.pieCol h3{
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--c-tur-400); font-weight:700; margin-bottom:var(--s-2);
}
.pieLinks{display:grid; gap:.55rem;}
.pieLinks a{color:var(--on-brand-soft); font-size:.9rem;}
.pieLinks a:hover{color:#fff;}
.pieBase{
  border-top:1px solid rgba(255,255,255,.1); padding:var(--s-3);
  font-size:.83rem; color:var(--c-mar-300);
}

/* ── botón flotante de WhatsApp ─────────────────────────────────────────── */
.waFab{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#128C4A; color:#fff;              /* verde accesible, no el #25D366 */
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform var(--transition);
}
.waFab:hover{transform:scale(1.07);}
.waFab svg{width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* ── migas ──────────────────────────────────────────────────────────────── */
.migas{font-size:.83rem; color:var(--text-muted); padding:var(--s-2) 0 0;}
.migas a{color:var(--text-muted);}
.migas a:hover{color:var(--link);}
.migas span{margin:0 .4rem; color:var(--text-muted);}

/* ── encabezado interior ────────────────────────────────────────────────── */
.pageHead{background:var(--brand-ground); color:#fff; padding:var(--s-5) 0;}
.pageHead h1{font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.08; letter-spacing:var(--ls-tight); font-weight:700; max-width:22ch;}
.pageHead p{color:var(--c-mar-200); margin-top:var(--s-2); max-width:60ch; font-size:1.05rem;}
.pageHead .migas{color:var(--c-mar-300); padding-bottom:var(--s-2);}
.pageHead .migas a{color:var(--c-mar-300);}
.pageHead .migas a:hover{color:var(--c-tur-400);}
.pageHead .kick{color:var(--c-tur-400);}

/* ── aviso ──────────────────────────────────────────────────────────────── */
.aviso{
  background:var(--aviso-bg); border:1px solid var(--border-accent);
  border-left:4px solid var(--c-tur-300);
  border-radius:var(--radius-sm); padding:var(--s-3); font-size:.92rem; color:var(--aviso-text);
}
.aviso strong{font-weight:600;}