/*
 * Estilos de las páginas interiores del sitio de Dentali.
 * Se carga siempre después de home.css: reutiliza sus variables, la retícula
 * (.wrap), los botones y el bloque .faq-list.
 */

/* INTRO DE PÁGINA */
.pag-hero{background:var(--marino);color:#fff;padding:56px 0 64px}
.pag-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:860px){.pag-hero .wrap{grid-template-columns:1fr;gap:32px}}
.pag-hero .eyebrow{color:var(--cielo)}
.pag-hero h1{font-size:clamp(32px,5vw,52px);font-weight:400;margin:14px 0 18px}
.pag-hero p{color:#C9D8E9;font-size:17px;max-width:54ch}
.pag-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pag-hero-foto{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);background:var(--marino-2)}
.pag-hero-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Variante sin columna derecha: el texto ocupa el ancho legible y nada más. */
.pag-hero-corto .wrap{grid-template-columns:1fr;gap:0}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Migas de pan */
.migas{font-size:13px;color:#8FA6C0;margin-bottom:14px;line-height:1.5}
.migas a{color:var(--cielo);text-decoration:underline;text-underline-offset:2px}
.migas a:hover{color:#fff}
.migas span[aria-hidden]{margin:0 4px;color:#5C7797}
.migas [aria-current]{color:#C9D8E9}

/* Cifras sueltas en la columna derecha de la intro */
.pag-hero-datos{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:center}
@media(max-width:520px){.pag-hero-datos{grid-template-columns:1fr}}
.pag-hero-datos li{background:var(--marino-2);border:1.5px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);padding:16px 18px}
.pag-hero-datos li>b{display:block;font-family:var(--ff-d);font-size:22px;font-weight:500;color:#fff}
.pag-hero-datos li>span{display:block;font-size:12.5px;color:#A9BDD4;margin-top:4px;line-height:1.35}

/* ORTODONCIA — tabla de precios */
.precios-orto{background:var(--lienzo)}
.tabla-scroll{overflow-x:auto;background:#fff;border-radius:var(--r);box-shadow:var(--sombra)}
.tabla-precios{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.tabla-precios th,.tabla-precios td{text-align:left;padding:16px 20px;border-top:1px solid var(--linea)}
.tabla-precios thead th{border-top:0;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-2)}
.tabla-precios tbody th{font-family:var(--ff-d);font-size:19px;font-weight:500;white-space:nowrap}
.tabla-precios tbody th span{display:block;font-family:var(--ff-b);font-size:12.5px;
  font-weight:600;color:var(--tinta-2)}
.tabla-precios td{color:var(--tinta-2)}
.tabla-precios td b{font-family:var(--ff-d);font-size:18px;font-weight:500;color:var(--azul);line-height:1.35}
.tabla-precios tbody th{width:55%}
.tabla-precios td.si{color:var(--azul);font-weight:700}

/* Alineadores y medios de pago */
.alineadores{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:center;
  background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sombra);margin-top:20px}
@media(max-width:820px){.alineadores{grid-template-columns:1fr;gap:20px}}
.alineadores h3{font-size:24px;margin-bottom:8px}
.alineadores p{color:var(--tinta-2);font-size:14.5px}
.alineadores ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.alineadores li{border:1.5px solid var(--linea);border-radius:var(--r-sm);padding:12px 14px}
.alineadores li b{display:block;font-family:var(--ff-d);font-size:19px;font-weight:500;color:var(--azul)}
.alineadores li span{display:block;font-size:12px;color:var(--tinta-2);margin-top:2px;line-height:1.3}
.pagos{margin-top:20px}
.pagos h3{font-size:22px;margin-bottom:8px}
.pagos p{color:var(--tinta-2);max-width:70ch}

/* Retenedores */
.retenedores-caja{background:var(--cielo-suave);border-radius:var(--r);padding:28px 32px;max-width:900px}
.retenedores-caja .grande{font-family:var(--ff-d);font-size:clamp(20px,2.6vw,26px);line-height:1.3}
.retenedores-caja .letra-chica{font-size:13px;color:var(--tinta-2);margin:14px 0}
.retenedores-caja>p:last-child{color:var(--tinta-2)}

/* Vídeo */
.video-orto{background:var(--lienzo)}
.video-marco{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);background:var(--marino);
  aspect-ratio:16/9;max-width:900px;margin:0 auto}
.video-marco iframe{display:block;width:100%;height:100%;border:0}

/* Paso a paso */
.lista-pasos{list-style:none;counter-reset:paso;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.lista-pasos li{counter-increment:paso;background:#fff;border:1.5px solid var(--linea);
  border-radius:var(--r);padding:20px;position:relative}
.lista-pasos li::before{content:counter(paso);display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;background:var(--azul);color:#fff;font-weight:800;font-size:14px;margin-bottom:12px}
.lista-pasos li>b{display:block;font-family:var(--ff-d);font-size:19px;font-weight:500;margin-bottom:6px}
.lista-pasos li>span{font-size:14px;color:var(--tinta-2);line-height:1.45}

/* Casos que resuelve la ortodoncia y bloques "en detalle" de los tratamientos */
.casos,.detalle{background:var(--lienzo)}
.grid-casos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.grid-casos article{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--sombra)}
.grid-casos article>b{display:block;font-family:var(--ff-d);font-size:20px;font-weight:500;margin-bottom:6px}
.grid-casos article>span{font-size:14px;color:var(--tinta-2);line-height:1.45}

/* Avisos para quien ya tiene brackets */
.grid-avisos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.grid-avisos article{border-left:4px solid var(--azul);background:var(--lienzo);
  border-radius:var(--r-sm);padding:20px 22px}
.grid-avisos article>b{display:block;font-family:var(--ff-d);font-size:20px;font-weight:500;margin-bottom:8px}
.grid-avisos p{font-size:14.5px;color:var(--tinta-2);line-height:1.5}

/* VACANTES */
.grid-vacantes{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.grid-vacantes a{display:block;background:#fff;border:1.5px solid var(--linea);
  border-radius:var(--r-sm);padding:16px 18px;transition:border-color .15s,transform .15s}
.grid-vacantes a:hover{border-color:var(--azul);transform:translateY(-2px)}
.grid-vacantes b{display:block;font-family:var(--ff-d);font-size:19px;font-weight:500}
.grid-vacantes span{display:block;font-size:12.5px;color:var(--tinta-2);margin-top:4px}
.postularme{margin-top:24px;max-width:560px}

/* CONTACTO */
.grid-contacto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.grid-contacto article{background:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:var(--sombra)}
.grid-contacto .ciudad{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul)}
.grid-contacto h3{font-size:22px;margin:2px 0 8px}
.grid-contacto .dir{font-size:13.5px;color:var(--tinta-2);line-height:1.45}
.grid-contacto .tel{display:inline-block;margin-top:8px;font-family:var(--ff-d);
  font-size:20px;font-weight:500;color:var(--azul)}
.grid-contacto .acciones{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.grid-contacto .acciones .btn{padding:10px 16px;font-size:13px}

/* Fecha y vuelta al blog en los artículos */
.articulo-fecha{margin-top:14px;font-size:13.5px;color:#A9BDD4}
.articulo-fecha a{color:var(--cielo);font-weight:700;text-decoration:underline}

/* DOCUMENTO LEGAL — texto largo, sin maqueta, legible */
.documento{padding-top:48px}
.documento .wrap{max-width:min(760px,calc(100% - 40px))}
.documento h1,.documento h2,.documento h3,.documento h4,.documento h5,.documento h6{
  scroll-margin-top:84px;margin:26px 0 10px}
.documento [id^="sec-"]{scroll-margin-top:84px}
.documento p{margin-bottom:14px;color:var(--tinta-2);font-size:15.5px;line-height:1.65}
.documento p:empty{display:none}
.documento b,.documento strong{color:var(--tinta)}
.documento ol,.documento ul{margin:0 0 16px 22px;color:var(--tinta-2);font-size:15.5px;line-height:1.65}
.documento li{margin-bottom:8px}
.documento a{color:var(--azul);text-decoration:underline;word-break:break-word}
.documento table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14px}
.documento th,.documento td{border:1px solid var(--linea);padding:10px 12px;text-align:left}
/* La tabla de precios trae su propio diseño y no lleva el borde del documento. */
.documento .tabla-precios th,.documento .tabla-precios td{border:0}
.documento figure{margin:0 0 20px}
.documento figure img{width:100%;height:auto;border-radius:var(--r);background:var(--cielo-suave)}
.documento figcaption{margin-top:8px;color:var(--tinta-3,var(--tinta-2));font-size:13.5px}

/* BLOG */
.blog{background:var(--lienzo)}
.blog-cols{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
@media(max-width:900px){.blog-cols{grid-template-columns:1fr}}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:18px}
.post{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);
  border:1.5px solid transparent;transition:border-color .15s,transform .15s}
.post:hover{border-color:var(--azul);transform:translateY(-2px)}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cielo-suave)}
.post-texto{padding:16px 18px 20px}
.post h2{font-size:19px;line-height:1.2}
.post time{display:block;font-size:12px;font-weight:600;color:var(--azul);margin-top:6px}
.post p{font-size:13.5px;color:var(--tinta-2);margin-top:8px;line-height:1.45}
.blog-vacio{color:var(--tinta-2);max-width:52ch}

/* Paginación */
.paginacion{display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;margin-top:28px}
.paginacion span{font-size:14px;color:var(--tinta-2);font-weight:600}

/* Columna derecha del blog */
.blog-aside{display:grid;gap:18px;position:sticky;top:84px}
@media(max-width:900px){.blog-aside{position:static}}
.aside-card{background:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:var(--sombra)}
.aside-card h3{font-size:20px;margin-bottom:12px}
.aside-card ul{list-style:none;display:grid;gap:10px}
.aside-card li{border-top:1px solid var(--linea);padding-top:10px;line-height:1.35}
.aside-card li:first-child{border-top:0;padding-top:0}
.aside-card li a{font-size:14px;font-weight:600}
.aside-card li a:hover{color:var(--azul)}
.aside-cta p{font-size:14px;color:var(--tinta-2);margin-bottom:16px}

/* MISIÓN */
.mision{display:block;padding:22px 24px;background:var(--marino-2)}
.mision b{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cielo);margin-bottom:6px}
.mision span{font-family:var(--ff-d);font-size:20px;line-height:1.25;color:#fff}

/* FILOSOFÍA */
.filosofia{background:var(--lienzo)}
.filosofia .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
@media(max-width:860px){.filosofia .wrap{grid-template-columns:1fr;gap:32px}}
@media(max-width:860px){.filosofia-foto{order:2}}
.filosofia-foto{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.filosofia-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.filosofia-texto h2{margin:12px 0 14px}
.filosofia-texto>p{color:var(--tinta-2);max-width:52ch;margin-bottom:22px}
.filosofia .faq-list{background:#fff;border-radius:var(--r);padding:6px 22px;box-shadow:var(--sombra)}

/* ÍNDICE DE SEDES DEL HERO */
.pag-hero-indice{list-style:none;display:flex;flex-wrap:wrap;gap:10px;align-content:center}
.pag-hero-indice a{display:inline-flex;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700;
  background:var(--marino-2);border:1.5px solid rgba(255,255,255,.14);color:#fff}
.pag-hero-indice a:hover{border-color:var(--cielo);color:var(--cielo)}

/* FICHA DE CADA CLÍNICA */
.clinicas{background:var(--lienzo)}
.clinica{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:stretch;
  background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sombra);margin-bottom:22px;
  scroll-margin-top:84px}
.clinica-foto{border-radius:var(--r-sm);overflow:hidden;background:var(--cielo-suave);min-height:220px}
.clinica-foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .clinica{grid-template-columns:1fr;gap:20px}
  .clinica-foto{min-height:0}
  .clinica-foto img{height:auto;aspect-ratio:16/10}
}
.clinica .ciudad{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--azul)}
.clinica h2{font-size:clamp(26px,3.4vw,34px);margin:4px 0 16px}
.clinica .acciones{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.clinica .acciones .btn{padding:10px 16px;font-size:13px}

/* Los datos de la sede, en pares etiqueta/valor */
.datos{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.5px}
@media(max-width:520px){.datos{grid-template-columns:1fr;gap:2px}}
.datos dt{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-2);padding-top:3px}
.datos dd{color:var(--tinta);line-height:1.45}
@media(max-width:520px){.datos dd{margin-bottom:10px}}
.datos dd a{color:var(--azul);font-weight:700}
.datos-planos{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:pre}

/* MAPA CON TODAS LAS SEDES (Leaflet + OpenStreetMap) */
.mapa-general{background:var(--lienzo)}
.mapa-columnas{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch}
@media(max-width:860px){.mapa-columnas{grid-template-columns:1fr}}
.mapa-lienzo{width:100%;height:560px;background:var(--cielo-suave);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
@media(max-width:860px){.mapa-lienzo{height:400px}}

/* Selector de sede junto al mapa */
.mapa-lista{list-style:none;display:grid;grid-template-rows:repeat(7,1fr);gap:8px}
@media(max-width:860px){.mapa-lista{grid-template-rows:none;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.mapa-lista button{display:block;width:100%;height:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid transparent;border-radius:var(--r-sm);
  padding:10px 16px;font-family:inherit;box-shadow:var(--sombra);transition:border-color .15s}
.mapa-lista button:hover{border-color:var(--azul)}
.mapa-lista button.on{border-color:var(--azul);background:var(--cielo-suave)}
.mapa-lista b{display:block;font-family:var(--ff-d);font-size:19px;font-weight:500;color:var(--tinta)}
.mapa-lista span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul)}
.mapa-lista small{display:block;font-size:12.5px;color:var(--tinta-2);margin-top:2px}
.marcador-sede span{display:block;width:24px;height:24px;border-radius:50%;
  background:var(--azul);border:3px solid #fff;box-shadow:0 2px 8px rgba(11,31,58,.45)}
.leaflet-container{font-family:var(--ff-b)}
.leaflet-popup-content{margin:14px 16px;line-height:1.4}
.mapa-sede{font-family:var(--ff-d);font-size:19px;font-weight:500;display:block}
.mapa-zona{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--azul);margin-top:2px}
.mapa-dir{display:block;font-size:13px;color:var(--tinta-2);margin-top:6px}
.mapa-enlaces{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.mapa-enlaces a{font-size:13px;font-weight:700;color:var(--azul);text-decoration:underline}

/* EQUIPO */
.equipo-titulo{font-size:24px;margin:38px 0 18px;color:var(--azul)}
.equipo-titulo:first-of-type{margin-top:8px}
.equipo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.persona{background:#fff;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column}
.persona img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--cielo-suave)}
.persona b{font-size:14px;padding:14px 14px 4px;line-height:1.25}
.persona span{font-size:12.5px;color:var(--tinta-2);padding:0 14px 16px;line-height:1.35}
@media(max-width:520px){.equipo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}