/* pagina.css — estilos compartidos de las paginas de contenido de odonflow.com
   La landing (index.html) tiene su CSS embebido y NO usa este archivo.
   Ojo: la clase .barra es de la cabecera. No reusarla para otra cosa. */

:root{
  --porcelana:#F6F7F4;
  --porcelana-2:#EFF2ED;
  --tinta:#10201C;
  --tinta-suave:#4A5C56;
  --ambo:#1E4A40;
  --ambo-oscuro:#14332C;
  --ambo-claro:#E4EDE7;
  --confirmado:#2F8F71;
  --pendiente:#C9822C;
  --mal:#B4453A;
  --linea:#D5DCD6;
  --linea-fina:#E4E9E4;

  --display:'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gutter:clamp(20px,5vw,64px);
  --ancho:1240px;
  --ancho-texto:720px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--porcelana);color:var(--tinta);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding-inline:var(--gutter)}
.angosto{max-width:var(--ancho-texto)}
:focus-visible{outline:2.5px solid var(--ambo);outline-offset:3px;border-radius:2px}

/* tipografia */
.titulo-xl{font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.02;letter-spacing:-0.035em}
.titulo-l{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;letter-spacing:-0.028em}
.titulo-m{font-family:var(--display);font-weight:600;font-size:1.24rem;line-height:1.25;letter-spacing:-0.018em}
.rotulo{font-family:var(--mono);font-size:0.7rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--tinta-suave)}
.bajada{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--tinta-suave)}

/* barra (cabecera) */
.barra{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--porcelana) 88%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--linea-fina);
}
.barra-cuerpo{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca img{width:30px;height:30px;border-radius:8px}
.marca-texto{font-family:var(--display);font-weight:700;font-size:1.26rem;letter-spacing:-0.03em}
.barra-links{display:flex;align-items:center;gap:26px}
.barra-links a{text-decoration:none;font-size:0.93rem;font-weight:500;color:var(--tinta-suave);transition:color .18s}
.barra-links a:hover{color:var(--ambo)}
@media(max-width:860px){.barra-oculto{display:none}}

/* botones */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:0.97rem;font-weight:600;
  text-decoration:none;border:none;cursor:pointer;
  padding:14px 24px;border-radius:999px;min-height:48px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s;
}
.boton:hover{transform:translateY(-1px)}
.boton-primario{background:var(--ambo);color:#fff}
.boton-primario:hover{background:var(--ambo-oscuro)}
.boton-borde{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.boton-borde:hover{background:#fff}
.boton-chico{padding:10px 18px;min-height:42px;font-size:0.9rem}

/* miga de pan */
.miga{font-size:0.83rem;color:var(--tinta-suave);padding-top:26px}
.miga a{text-decoration:none}
.miga a:hover{color:var(--ambo)}
.miga span{opacity:.55;padding-inline:6px}

/* encabezado de pagina */
.cabecera-pagina{padding-block:clamp(28px,4vw,52px) clamp(30px,5vw,56px);border-bottom:1px solid var(--linea-fina)}
.cabecera-pagina .titulo-xl{margin-block:14px 18px}
.cabecera-pagina .bajada{max-width:58ch}
.cabecera-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* cuerpo del articulo */
.articulo{padding-block:clamp(40px,6vw,72px)}
.articulo h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.12;letter-spacing:-0.025em;margin-top:52px;margin-bottom:16px}
.articulo h2:first-child{margin-top:0}
.articulo h3{font-family:var(--display);font-weight:600;font-size:1.18rem;line-height:1.25;letter-spacing:-0.015em;margin-top:32px;margin-bottom:10px}
.articulo p{margin-bottom:18px;color:var(--tinta-suave)}
.articulo p strong{color:var(--tinta);font-weight:600}
.articulo ul,.articulo ol{margin:0 0 20px 22px;color:var(--tinta-suave)}
.articulo li{margin-bottom:9px}
.articulo li strong{color:var(--tinta);font-weight:600}
.articulo a{color:var(--ambo);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.articulo a:hover{text-decoration-thickness:2px}
.articulo figure{margin:32px 0}
.articulo figure img{border-radius:14px;border:1px solid var(--linea-fina);width:100%}
.articulo figcaption{font-size:0.85rem;color:var(--tinta-suave);margin-top:10px;font-family:var(--mono)}

/* destacado */
.destacado{
  background:var(--ambo-claro);border-radius:16px;
  padding:clamp(20px,3vw,28px);margin:32px 0;
  border:1px solid color-mix(in srgb,var(--ambo) 14%,transparent);
}
.destacado p:last-child{margin-bottom:0}
.destacado p{color:var(--tinta)}

/* tabla comparativa */
.tabla-envoltorio{overflow-x:auto;margin:28px 0;border:1px solid var(--linea);border-radius:14px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:0.93rem}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--linea-fina);vertical-align:top}
thead th{font-family:var(--display);font-weight:600;font-size:0.9rem;background:var(--porcelana-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td .si{color:var(--confirmado);font-weight:600}
td .no{color:var(--mal)}
td .medio{color:var(--pendiente)}

/* grilla de tarjetas */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:30px 0}
.tarjeta{background:#fff;border:1px solid var(--linea-fina);border-radius:16px;padding:22px}
.tarjeta h3{margin-top:0;margin-bottom:8px}
.tarjeta p{font-size:0.94rem;margin-bottom:0}

/* faq */
.faq-lista{margin-top:26px}
.faq-lista details{border-bottom:1px solid var(--linea)}
.faq-lista summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  font-family:var(--display);font-weight:600;font-size:1.05rem;padding:18px 0;min-height:48px;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--ambo);transition:transform .2s;flex:none}
.faq-lista details[open] summary::after{transform:rotate(45deg)}
.faq-lista details p{padding:0 0 18px;font-size:0.95rem;max-width:64ch}

/* cierre */
.cierre{
  background:var(--ambo);color:#fff;border-radius:20px;
  padding:clamp(28px,4vw,48px);margin-block:clamp(40px,6vw,72px);
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
}
.cierre h2{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.1;letter-spacing:-0.025em;max-width:20ch}
.cierre p{color:color-mix(in srgb,#fff 78%,transparent);margin-top:10px;max-width:44ch;font-size:0.98rem}
.cierre .boton-primario{background:#fff;color:var(--ambo)}
.cierre .boton-primario:hover{background:var(--porcelana)}

/* enlaces relacionados */
.relacionados{border-top:1px solid var(--linea-fina);padding-block:36px}
.relacionados ul{list-style:none;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.relacionados a{text-decoration:none;font-weight:600;font-size:0.97rem;display:block;padding:16px 18px;border:1px solid var(--linea-fina);border-radius:14px;background:#fff;transition:border-color .18s}
.relacionados a:hover{border-color:var(--ambo)}
.relacionados a small{display:block;font-weight:400;font-size:0.85rem;color:var(--tinta-suave);margin-top:5px}

/* pie */
.pie{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:28px;border-top:1px solid var(--linea-fina);font-size:0.85rem;color:var(--tinta-suave)}
.pie a{text-decoration:none}
.pie a:hover{color:var(--ambo)}
.pie-datos{display:flex;gap:22px;flex-wrap:wrap}
.pie-legal{flex-basis:100%;padding-top:14px;border-top:1px solid var(--linea-fina);font-size:0.8rem;line-height:1.7}