/* ==========================================================================
   smile-pages.css — hoja compartida de las páginas de contenido/SEO.
   La landing (index.html) NO usa este archivo: mantiene su CSS inline para no
   arriesgar la página que ya convierte. Aquí viven los mismos tokens de marca
   para que una página nueva se sienta parte del sitio sin duplicar 167KB.
   Todo lo que se agregue aquí lo heredan todas las páginas de golpe.
   ========================================================================== */

:root {
  /* Paleta — espejo de index.html */
  --sand:      #EEEAE4;
  --sand-lt:   #F7F4EF;
  --white:     #FDFCFB;
  --topo:      #6B635C;
  --piedra:    #72685F;
  --muted:     #73685D;
  --carbon:    #3A3532;
  --terra:     #C4856A;
  --terra-dk:  #A06448;
  --salvia:    #6B8F71;
  --salvia-dk: #4A7A50;
  --pizarra:   #7D8EA0;
  --pizarra-dk:#5A7088;
  --rosa:      #EAC0B2;

  --border-subtle: rgba(168,159,150,0.22);
  --focus-ring:    rgba(125,142,160,0.55);

  --radius-card:    16px;
  --radius-card-lg: 26px;
  --radius-pill:    100px;

  --neu-raised: 5px 5px 12px rgba(185,177,167,.55),-4px -4px 10px rgba(255,255,255,.95);
  --neu-flat:   2px 2px 6px rgba(185,177,167,.38),-2px -2px 5px rgba(255,255,255,.85);
  --neu-inset:  inset 3px 3px 8px rgba(182,174,164,.55),inset -3px -3px 7px rgba(255,255,255,.92);

  /* Ritmo vertical: una sola escala, para que las secciones no peleen */
  --gap-s:  14px;
  --gap-m:  26px;
  --gap-l:  48px;
  --gap-xl: 88px;

  --wrap:  1080px;
  --prose: 68ch;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background:var(--sand);
  color:var(--topo);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a { color:var(--pizarra-dk); text-decoration:none; }
a:hover { color:var(--terra-dk); }
button,a,[onclick] { cursor:pointer; }

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:2px solid var(--pizarra);
  outline-offset:3px;
  border-radius:10px;
}

/* --- Tipografía -------------------------------------------------------- */

h1,h2,h3 { font-weight:300; color:var(--carbon); text-wrap:balance; line-height:1.18; }
h1 { font-size:clamp(34px,5.2vw,54px); letter-spacing:-.02em; }
h2 { font-size:clamp(26px,3.4vw,36px); letter-spacing:-.015em; }
h3 { font-size:clamp(19px,2.1vw,22px); font-weight:400; letter-spacing:-.01em; }
h1 em,h2 em { font-style:italic; color:var(--terra-dk); }

p { max-width:var(--prose); }
strong { font-weight:500; color:var(--carbon); }

.eyebrow {
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--terra-dk);
}

.lead { font-size:clamp(18px,2.1vw,21px); color:var(--piedra); }

/* --- Estructura -------------------------------------------------------- */

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* Las secciones se separan con padding propio y nada más, para que ninguna
   regla posterior tenga que pelear con márgenes colapsados. */
section { padding-block:var(--gap-xl); }
section > .wrap { display:flex; flex-direction:column; gap:var(--gap-m); }

.stack-s { display:flex; flex-direction:column; gap:var(--gap-s); }
.stack-m { display:flex; flex-direction:column; gap:var(--gap-m); }
.stack-l { display:flex; flex-direction:column; gap:var(--gap-l); }

/* --- Barra superior ---------------------------------------------------- */

.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,239,.86);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-subtle);
}
.topbar .wrap {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-m); padding-block:14px;
}
.topbar-logo { font-size:12px; font-weight:500; letter-spacing:7px; color:var(--topo); }
.topbar-links { display:flex; align-items:center; gap:22px; font-size:14px; }
.topbar-links a { color:var(--piedra); }

/* --- Migas de pan ------------------------------------------------------ */

.breadcrumb { font-size:13px; color:var(--muted); padding-top:var(--gap-m); }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.breadcrumb li::after { content:'›'; margin-left:8px; color:var(--border-subtle); }
.breadcrumb li:last-child::after { content:''; }

/* --- Botones ----------------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px;
  border:0; border-radius:var(--radius-pill);
  font-family:inherit; font-size:15px; font-weight:500; letter-spacing:.01em;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--terra); color:var(--white); box-shadow:var(--neu-raised); }
.btn-primary:hover { background:var(--terra-dk); color:var(--white); }
.btn-ghost { background:var(--sand-lt); color:var(--topo); box-shadow:var(--neu-flat); }
.btn-ghost:hover { color:var(--carbon); }

.btn-row { display:flex; flex-wrap:wrap; gap:var(--gap-s); align-items:center; }
.btn-note { font-size:13px; color:var(--muted); }

/* --- Tarjetas ---------------------------------------------------------- */

.card {
  background:var(--sand-lt);
  border-radius:var(--radius-card-lg);
  padding:30px;
  box-shadow:var(--neu-raised);
  display:flex; flex-direction:column; gap:var(--gap-s);
}
.card h3 { color:var(--carbon); }
.card p { font-size:15px; color:var(--piedra); max-width:none; }

.grid { display:grid; gap:var(--gap-m); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

/* Variantes con significado: el color codifica algo real (un requisito fiscal,
   una advertencia), nunca decora. Se tiñe la sombra, que es el idioma que ya
   usa el resto del sitio, en vez de poner un riel de color al costado. */
.card-note  { box-shadow:5px 5px 14px rgba(170,115,90,.22),-4px -4px 10px rgba(240,210,195,.75); }
.card-legal { box-shadow:5px 5px 14px rgba(90,108,128,.22),-4px -4px 10px rgba(200,214,228,.70); }
.card-note h3  { color:var(--terra-dk); }
.card-legal h3 { color:var(--pizarra-dk); }

/* --- Tabla comparativa -------------------------------------------------- */

/* Solo para lectores de pantalla: el texto existe en el HTML pero no se ve. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.table-scroll { overflow-x:auto; border-radius:var(--radius-card); }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:15px; background:var(--sand-lt); }
th,td { padding:14px 18px; text-align:left; border-bottom:1px solid var(--border-subtle); }
th { font-weight:500; color:var(--carbon); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
td { color:var(--piedra); }
tbody tr:last-child td { border-bottom:0; }
.num { font-variant-numeric:tabular-nums; }

/* --- Preguntas frecuentes ---------------------------------------------- */
/* <details> mantiene el texto en el HTML: Google lo lee aunque esté cerrado. */

.faq { display:flex; flex-direction:column; gap:10px; }
.faq details {
  background:var(--sand-lt);
  border-radius:var(--radius-card);
  box-shadow:var(--neu-flat);
  padding:18px 22px;
}
.faq summary {
  font-size:16px; font-weight:400; color:var(--carbon);
  list-style:none; display:flex; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--terra-dk); font-size:20px; line-height:1; }
.faq details[open] summary::after { content:'−'; }
.faq details p { margin-top:12px; font-size:15px; color:var(--piedra); }

/* --- Cierre ------------------------------------------------------------ */

.cta-band { background:var(--carbon); color:var(--sand); }
.cta-band .wrap { align-items:center; text-align:center; }
.cta-band h2 { color:var(--sand-lt); }
.cta-band p { color:rgba(238,234,228,.72); }
.cta-band .btn-note { color:rgba(238,234,228,.55); }

/* --- Pie --------------------------------------------------------------- */

.site-footer { background:var(--sand-lt); padding-block:var(--gap-l); font-size:13px; color:var(--muted); }
.site-footer .wrap { display:flex; flex-wrap:wrap; gap:var(--gap-m); justify-content:space-between; align-items:center; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:18px; }
.site-footer a { color:var(--piedra); }

/* --- Responsive -------------------------------------------------------- */

@media (max-width:640px) {
  body { font-size:16px; }
  section { padding-block:56px; }
  .card { padding:24px; }
  .topbar-links a:not(.btn) { display:none; }
  .btn { padding:14px 24px; width:100%; }
  .btn-row { flex-direction:column; align-items:stretch; }
  .topbar-links .btn { width:auto; padding:10px 18px; font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .btn:hover { transform:none; }
}