/* ==========================================================================
   Clínicas Anaga Dental — hoja de estilos única para toda la web
   Índice:  1. Colores y medidas   2. Base   3. Utilidades   4. Botones
            5. Cabecera   6. Portada (hero)   7. Secciones   8. Tarjetas
            9. Pie   10. WhatsApp flotante
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* 1. Colores y medidas ---------------------------------------------------- */
:root {
  /* Paleta corporativa (firmas de correo) */
  --turquesa: #5ecbca;         /* acento principal */
  --turquesa-oscuro: #3e9c9b;  /* acento oscuro */
  --texto: #2c2c2a;
  --texto-2: #444441;
  --texto-suave: #8a8a8e;
  /* Derivados: #3E9C9B no llega al contraste mínimo de accesibilidad
     para texto pequeño sobre blanco, así que los enlaces usan este tono */
  --enlace: #2a7170;
  --fondo: #ffffff;
  --fondo-tinte: #f1f8f8;
  --fondo-gris: #f5f5f4;
  --borde: #e3e6e6;
  --whatsapp: #25d366;

  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 32px);
  --radio: 14px;
  --sombra: 0 1px 2px rgb(44 44 42 / .06), 0 8px 24px rgb(44 44 42 / .06);
  --seccion: clamp(64px, 9vw, 112px);
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto-2);
  background: var(--fondo);
  overflow-x: hidden;
}
h1, h2, h3, h4 { color: var(--texto); line-height: 1.15; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--enlace); text-underline-offset: 3px; }
a:hover { color: var(--texto); }
img { max-width: 100%; height: auto; display: block; }
ul { padding: 0; margin: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--turquesa-oscuro); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 3. Utilidades ----------------------------------------------------------- */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 8px; }
.saltar:focus { top: 12px; color: #fff; }
.icono { width: 1.25em; height: 1.25em; flex: none; }
.antetitulo {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--enlace); margin-bottom: 1rem;
}
.antetitulo::before { content: ""; width: 22px; height: 8px; background: var(--turquesa); transform: skewX(-24deg); }
.entrada { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--texto-2); max-width: 36em; }
/* Datos pendientes de confirmar: se ven resaltados mientras la web no esté publicada */
.pendiente { background: #fff3b0; color: var(--texto); padding: 0 .3em; border-radius: 3px; }

/* 4. Botones -------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 12px 26px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.boton:hover { transform: translateY(-1px); }
.boton-principal { background: var(--turquesa); color: var(--texto); }
.boton-principal:hover { background: #4dbdbc; color: var(--texto); }
.boton-secundario { background: transparent; color: var(--texto); border-color: var(--texto); }
.boton-secundario:hover { background: var(--texto); color: #fff; }
.boton-claro { background: #fff; color: var(--texto); }
.boton-claro:hover { background: var(--turquesa); color: var(--texto); }
.boton-borde-claro { color: #fff; border-color: rgb(255 255 255 / .5); }
.boton-borde-claro:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / .08); }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; }
.enlace-flecha .icono { transition: transform .2s; }
.enlace-flecha:hover .icono { transform: translateX(4px); }

/* 5. Cabecera ------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .96); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo { flex: none; display: block; }
.logo img { width: 150px; height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--texto); text-decoration: none; font-weight: 500;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--fondo-tinte); color: var(--texto); }
.cabecera-telefono {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 10px 18px; border-radius: 999px; background: var(--texto); color: #fff;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cabecera-telefono:hover { background: var(--enlace); color: #fff; }
.boton-menu {
  display: none; margin-left: 4px; width: 46px; height: 46px; border-radius: 10px;
  border: 1px solid var(--borde); background: #fff; color: var(--texto); cursor: pointer;
  align-items: center; justify-content: center;
}
.boton-menu .icono { width: 24px; height: 24px; }
.boton-menu .icono-cerrar { display: none; }
.boton-menu[aria-expanded="true"] .icono-abrir { display: none; }
.boton-menu[aria-expanded="true"] .icono-cerrar { display: block; }

@media (max-width: 960px) {
  .cabecera .contenedor { min-height: 68px; gap: 10px; }
  .logo img { width: 128px; }
  .nav { margin-left: 0; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); display: none; }
  .nav.abierto { display: block; }
  .nav ul { flex-direction: column; padding: 8px var(--margen) 16px; }
  .nav a { padding: 14px 8px; font-size: 1.125rem; border-bottom: 1px solid var(--borde); border-radius: 0; }
  .cabecera-telefono { margin-left: auto; }
  .boton-menu { display: inline-flex; }
}
@media (max-width: 480px) {
  .cabecera-telefono { padding: 0; width: 46px; height: 46px; justify-content: center; }
  .cabecera-telefono .texto-telefono { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* 6. Portada (hero) ------------------------------------------------------- */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 88px); position: relative; overflow: hidden; }
.hero .contenedor { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 { margin-bottom: .4em; }
.hero h1 .resalte { position: relative; white-space: nowrap; z-index: 0; }
.hero h1 .resalte::after {
  content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; bottom: .06em; height: .32em;
  background: var(--turquesa); opacity: .55; transform: skewX(-24deg);
}
.hero .entrada { margin-bottom: 2rem; }
.hero-nota { margin-top: 1.25rem; font-size: .95rem; color: var(--texto-suave); display: flex; align-items: center; gap: .5em; }
.hero-foto { position: relative; justify-self: center; width: 100%; max-width: 440px; }
/* Paralelogramos que recuerdan al símbolo del logo */
.hero-foto::before, .hero-foto::after { content: ""; position: absolute; z-index: -1; transform: skewX(-24deg); border-radius: 10px; }
.hero-foto::before { inset: 8% -14% 18% 34%; background: var(--turquesa); }
.hero-foto::after { inset: 62% 46% -6% -10%; background: var(--fondo-tinte); }
.hero-foto img { border-radius: var(--radio); box-shadow: var(--sombra); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.hero-foto figcaption {
  position: absolute; left: -18px; bottom: 28px; background: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--sombra);
  font-size: .9rem; line-height: 1.35; color: var(--texto-2);
}
.hero-foto figcaption strong { display: block; color: var(--texto); font-size: 1rem; }

.garantias { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: #fff; }
.garantias ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.garantias li { display: flex; align-items: center; gap: 14px; padding: 22px 20px; font-weight: 500; color: var(--texto); line-height: 1.3; }
.garantias li + li { border-left: 1px solid var(--borde); }
.garantias .icono { width: 30px; height: 30px; color: var(--turquesa-oscuro); }
.garantias small { display: block; font-weight: 400; color: var(--texto-suave); font-size: .875rem; }

@media (max-width: 900px) {
  .hero .contenedor { grid-template-columns: 1fr; }
  .hero-foto { max-width: 360px; margin-top: 8px; }
  .hero-foto figcaption { left: -8px; }
  .garantias ul { grid-template-columns: 1fr 1fr; }
  .garantias li:nth-child(3) { border-left: 0; }
  .garantias li:nth-child(n+3) { border-top: 1px solid var(--borde); }
}
@media (max-width: 520px) {
  .grupo-botones .boton { width: 100%; }
  .garantias li { padding: 16px 10px; gap: 10px; font-size: .95rem; }
  .garantias .icono { width: 24px; height: 24px; }
}

/* 7. Secciones ------------------------------------------------------------ */
.seccion { padding-block: var(--seccion); }
.seccion-tinte { background: var(--fondo-tinte); }
.seccion-cabecera { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.seccion-cabecera p { font-size: 1.125rem; }
.seccion-pie { margin-top: 40px; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.dos-columnas > figure { margin: 0; }
.dos-columnas img { border-radius: var(--radio); width: 100%; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }

.foto-marco { position: relative; }
.foto-marco::before { content: ""; position: absolute; z-index: -1; inset: -18px 30% 40% -18px; background: var(--turquesa); opacity: .35; transform: skewX(-24deg); border-radius: 10px; }
.seccion, .hero { isolation: isolate; }

.hitos { display: grid; gap: 24px; margin-top: 32px; }
.hito { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.hito-icono { width: 52px; height: 52px; border-radius: 12px; background: var(--fondo-tinte); color: var(--turquesa-oscuro); display: grid; place-items: center; }
.seccion-tinte .hito-icono { background: #fff; }
.hito-icono .icono { width: 26px; height: 26px; }
.hito h3 { margin-bottom: .25em; font-size: 1.15rem; }
.hito p { margin: 0; }

.fecha-grande { font-size: clamp(4rem, 10vw, 7rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--turquesa); margin-bottom: .15em; }

/* 8. Tarjetas ------------------------------------------------------------- */
.rejilla { display: grid; gap: 20px; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rejilla-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .rejilla-3 { grid-template-columns: 1fr; } }

.tarjeta-servicio {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 28px 26px 24px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde);
  text-decoration: none; color: var(--texto-2); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tarjeta-servicio::before { content: ""; position: absolute; left: 26px; top: 0; width: 34px; height: 5px; background: var(--turquesa); transform: skewX(-24deg); }
.tarjeta-servicio h3 { margin: 6px 0 0; }
.tarjeta-servicio p { margin: 0 0 12px; font-size: 1rem; }
.tarjeta-servicio .enlace-flecha { margin-top: auto; color: var(--enlace); font-size: .95rem; }
.tarjeta-servicio:hover { border-color: var(--turquesa); box-shadow: var(--sombra); transform: translateY(-2px); color: var(--texto-2); }
.tarjeta-servicio:hover .enlace-flecha .icono { transform: translateX(4px); }
.grupo-servicio { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

.tarjeta-persona { margin: 0; }
.tarjeta-persona img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); background: var(--fondo-gris); }
.tarjeta-persona figcaption { padding: 16px 4px 0; }
.tarjeta-persona strong { display: block; color: var(--texto); font-size: 1.2rem; font-weight: 600; }
.tarjeta-persona span { color: var(--texto-suave); }

/* Aseguradoras */
.logos-aseguradoras { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-content: start; }
.logos-aseguradoras li { background: #fff; border-radius: 10px; border: 1px solid var(--borde); height: 76px; display: grid; place-items: center; padding: 14px; }
.logos-aseguradoras img { max-height: 40px; max-width: 78%; width: auto; }
.logos-aseguradoras img.logo-alto { max-height: 52px; } /* logos casi cuadrados */
.aseguradoras-nota { font-size: .95rem; color: var(--texto-suave); margin: 14px 0 0; }

/* Clínicas: título a la izquierda, fichas apiladas a la derecha (crece bien de 1 a 3 clínicas) */
.clinicas { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.clinicas .seccion-cabecera { margin-bottom: 0; }
.rejilla-clinicas { display: grid; gap: 20px; }
@media (max-width: 860px) { .clinicas { grid-template-columns: 1fr; } }
.tarjeta-clinica { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(24px, 3.5vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.tarjeta-clinica h3 { font-size: 1.5rem; margin: 0; }
.tarjeta-clinica .etiqueta { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--enlace); margin-bottom: 6px; }
.datos-clinica { display: grid; gap: 12px; }
.datos-clinica li { display: flex; gap: 12px; align-items: flex-start; }
.datos-clinica .icono { color: var(--turquesa-oscuro); margin-top: .2em; }
.datos-clinica a { color: var(--texto); font-weight: 600; text-decoration: none; }
.datos-clinica a:hover { color: var(--enlace); text-decoration: underline; }
.tarjeta-clinica .grupo-botones { margin-top: auto; padding-top: 6px; }
.tarjeta-clinica .boton { min-height: 46px; padding: 10px 20px; font-size: .95rem; }

/* Llamada final */
.llamada { background: var(--texto); color: #d9d9d6; position: relative; overflow: hidden; }
.llamada::before, .llamada::after { content: ""; position: absolute; background: var(--turquesa); transform: skewX(-24deg); border-radius: 8px; }
.llamada::before { width: 220px; height: 120px; right: 6%; top: -40px; opacity: .9; }
.llamada::after { width: 140px; height: 70px; right: 20%; bottom: -30px; opacity: .35; }
.llamada h2 { color: #fff; }
.llamada .contenedor { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; }
.llamada p { margin: 0; font-size: 1.125rem; max-width: 34em; }

/* 9. Pie ------------------------------------------------------------------ */
.pie { background: var(--fondo-gris); padding-block: 64px 100px; font-size: .975rem; } /* hueco abajo para el botón de WhatsApp */
.pie-columnas { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.pie h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto); margin-bottom: 1rem; font-weight: 600; }
.pie ul { display: grid; gap: 8px; }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--enlace); text-decoration: underline; }
.pie .logo img { width: 170px; margin-bottom: 16px; }
.pie-lema { color: var(--texto-suave); max-width: 22em; }
.pie-legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; color: var(--texto-suave); font-size: .875rem; }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-legal a { color: var(--texto-suave); }
@media (max-width: 900px) { .pie-columnas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie-columnas { grid-template-columns: 1fr; gap: 32px; } }

/* 10. WhatsApp flotante --------------------------------------------------- */
.whatsapp-flotante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--whatsapp); color: #0b3d1f; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18); transition: transform .2s, box-shadow .2s;
}
.whatsapp-flotante .icono { width: 28px; height: 28px; }
.whatsapp-flotante:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(0 0 0 / .22); color: #0b3d1f; }
@media (max-width: 560px) {
  .whatsapp-flotante { width: 60px; padding: 0; justify-content: center; }
  .whatsapp-flotante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* 11. Páginas interiores -------------------------------------------------- */
.migas { padding-top: 20px; font-size: .9rem; color: var(--texto-suave); }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.migas li + li::before { content: "›"; margin-right: 6px; color: var(--texto-suave); }
.migas a { color: var(--texto-suave); }
.migas a:hover { color: var(--enlace); }

.cabecera-pagina { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 88px); }
.cabecera-pagina .contenedor { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.cabecera-pagina .entrada { margin-bottom: 2rem; }
@media (max-width: 900px) { .cabecera-pagina .contenedor { grid-template-columns: 1fr; } }

/* Ficha de datos de una clínica */
.tarjeta-datos { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(24px, 3.5vw, 36px); box-shadow: var(--sombra); position: relative; overflow: hidden; }
.tarjeta-datos::before { content: ""; position: absolute; left: 28px; top: 0; width: 46px; height: 6px; background: var(--turquesa); transform: skewX(-24deg); }
.tarjeta-datos h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.tarjeta-datos .datos-clinica { margin-bottom: 22px; }
.horario { width: 100%; border-collapse: collapse; font-size: 1rem; }
.horario th { text-align: left; font-weight: 500; color: var(--texto-2); padding: 8px 0; }
.horario td { text-align: right; color: var(--texto); font-weight: 600; padding: 8px 0; }
.horario tr + tr th, .horario tr + tr td { border-top: 1px solid var(--borde); }
.horario .cerrado { color: var(--texto-suave); font-weight: 400; }

/* Mapa: solo se carga Google si la persona pulsa el botón */
.mapa { position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); aspect-ratio: 21 / 8; min-height: 300px;
  background-color: #e8f3f3;
  background-image: linear-gradient(rgb(255 255 255 / .7) 2px, transparent 2px), linear-gradient(90deg, rgb(255 255 255 / .7) 2px, transparent 2px);
  background-size: 48px 48px; display: grid; place-items: center; text-align: center; padding: 24px; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-pin { width: 44px; height: 44px; color: var(--enlace); margin: 0 auto 8px; }
.mapa p { margin: 0 0 16px; color: var(--texto); font-weight: 500; }
.mapa small { display: block; margin-top: 14px; color: var(--texto-suave); font-size: .85rem; }
.mapa .grupo-botones { justify-content: center; }
@media (max-width: 600px) { .mapa { aspect-ratio: auto; min-height: 340px; } }

/* Lista compacta de tratamientos */
.lista-enlaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lista-enlaces a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border: 1px solid var(--borde); border-radius: 12px; color: var(--texto); font-weight: 500; text-decoration: none; transition: border-color .2s; }
.lista-enlaces a:hover { border-color: var(--turquesa); color: var(--texto); }
.lista-enlaces .icono { color: var(--enlace); transition: transform .2s; }
.lista-enlaces a:hover .icono { transform: translateX(3px); }
@media (max-width: 900px) { .lista-enlaces { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lista-enlaces { grid-template-columns: 1fr; } }

/* 12. Páginas de tratamiento ---------------------------------------------- */
.imagen-cabecera { margin: 0; position: relative; }
.imagen-cabecera img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); }
.imagen-cabecera::before { content: ""; position: absolute; z-index: -1; inset: 12% -4% -6% 40%; background: var(--turquesa); opacity: .5; transform: skewX(-24deg); border-radius: 10px; }

.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 6vw, 80px); align-items: start; }
.cuerpo-lateral { position: sticky; top: 100px; }
@media (max-width: 960px) { .cuerpo { grid-template-columns: 1fr; } .cuerpo-lateral { position: static; } }

.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); margin-top: 2.2em; }
.prosa h2:first-child { margin-top: 0; }
.prosa ul { margin: 0 0 1.2em; display: grid; gap: .55em; }
.prosa ul li { position: relative; padding-left: 1.6em; }
.prosa ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: .8em; height: .32em; background: var(--turquesa); transform: skewX(-24deg); }
.prosa strong { color: var(--texto); font-weight: 600; }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 14px; }
.pasos li { counter-increment: paso; position: relative; padding: 16px 18px 16px 64px; background: var(--fondo-tinte); border-radius: 12px; }
.pasos li::before { content: counter(paso); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--enlace); font-weight: 700; display: grid; place-items: center; }
.recuadro { background: var(--fondo-tinte); border-left: 4px solid var(--turquesa); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 1.5em 0; }
.recuadro p:last-child { margin: 0; }

.lateral-cita h2 { font-size: 1.35rem; margin-bottom: .4em; }
.lateral-cita p { font-size: 1rem; }
.lateral-cita .grupo-botones { flex-direction: column; margin: 20px 0; }
.lateral-cita .boton { width: 100%; }
.lateral-cita .nota { font-size: .95rem; color: var(--texto-suave); margin: 0; padding-top: 16px; border-top: 1px solid var(--borde); }

/* Preguntas frecuentes */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: #fff; border: 1px solid var(--borde); border-radius: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; font-weight: 600; color: var(--texto); position: relative; font-size: 1.075rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--enlace); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] { border-color: var(--turquesa); }
.faq details p { padding: 0 22px 18px; margin: 0; }

/* Índice de tratamientos: grupos en dos niveles */
.grupo-tratamientos { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-block: 40px; border-top: 1px solid var(--borde); }
.grupo-tratamientos:first-child { border-top: 0; padding-top: 0; }
.grupo-tratamientos h2 { font-size: 1.5rem; margin-bottom: .3em; }
.grupo-tratamientos > div > p { color: var(--texto-suave); margin: 0; }
.grupo-tratamientos .rejilla { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 860px) { .grupo-tratamientos { grid-template-columns: 1fr; } }
.cabecera-pagina.una-columna .contenedor { grid-template-columns: 1fr; }
.seccion-compacta { padding-top: clamp(40px, 6vw, 72px); }

/* 13. Contacto y formulario ----------------------------------------------- */
.contacto { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
.contacto-rapido h2 { font-size: 1.35rem; }
.contacto-rapido .grupo-botones { flex-direction: column; margin: 18px 0 28px; }
.contacto-rapido .boton { width: 100%; }

.formulario { display: grid; gap: 18px; }
.formulario h2 { font-size: 1.35rem; margin: 0; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .campos-2 { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; color: var(--texto); font-size: .95rem; }
.campo .opcional { font-weight: 400; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--texto); width: 100%;
  padding: 12px 14px; border: 1px solid #c9cfcf; border-radius: 10px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--turquesa-oscuro); box-shadow: 0 0 0 3px rgb(94 203 202 / .3); }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--enlace); flex: none; }
.info-rgpd { font-size: .82rem; line-height: 1.5; color: var(--texto-suave); background: var(--fondo-gris); border-radius: 10px; padding: 14px 16px; margin: 0; }
.info-rgpd strong { color: var(--texto-2); font-weight: 600; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* campo anti-spam: invisible para personas */
.formulario .boton { justify-self: start; }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--enlace); margin-bottom: 6px; }
.tarjeta-clinica h2 { font-size: 1.5rem; margin: 0; }
.fila-clinica { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 20px; }
.fila-clinica + .fila-clinica { margin-top: 20px; }
.fila-clinica .mapa { aspect-ratio: auto; min-height: 360px; }
@media (max-width: 860px) { .fila-clinica { grid-template-columns: 1fr; } }

/* 14. Blog ---------------------------------------------------------------- */
.rejilla-blog { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.tarjeta-entrada { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--texto-2); transition: border-color .2s, box-shadow .2s, transform .2s; }
.tarjeta-entrada:hover { border-color: var(--turquesa); box-shadow: var(--sombra); transform: translateY(-2px); color: var(--texto-2); }
.tarjeta-entrada img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tarjeta-entrada div { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta-entrada h2 { font-size: 1.25rem; margin: 0; }
.tarjeta-entrada p { margin: 0; font-size: 1rem; }
.tarjeta-entrada .enlace-flecha { margin-top: auto; padding-top: 8px; color: var(--enlace); font-size: .95rem; }
.fecha { font-size: .875rem; color: var(--texto-suave); }

.cabecera-entrada { max-width: 820px; }
.cabecera-entrada .fecha { display: block; margin-bottom: 14px; }
.imagen-entrada { margin: 0 0 clamp(32px, 5vw, 56px); }
.imagen-entrada img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radio); }
.prosa ol:not(.pasos) { padding-left: 1.4em; margin: 0 0 1.2em; display: grid; gap: .6em; }
.prosa ol:not(.pasos) li::marker { color: var(--enlace); font-weight: 700; }
article > .cabecera-pagina { padding-bottom: clamp(24px, 3vw, 36px); }

/* 15. Textos legales ------------------------------------------------------ */
.legal { max-width: 820px; }
.legal h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin-top: 2.2em; padding-top: .4em; }
.legal h3 { font-size: 1.1rem; margin-top: 1.6em; }
.legal .actualizado { color: var(--texto-suave); font-size: .95rem; }
.indice-legal { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 18px 22px; margin: 0 0 2em; }
.indice-legal strong { display: block; color: var(--texto); margin-bottom: 8px; }
.indice-legal ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.tabla-legal-envoltorio { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--borde); border-radius: 12px; background: #fff; }
.tabla-legal { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.tabla-legal tr:last-child th, .tabla-legal tr:last-child td { border-bottom: 0; }
.tabla-legal thead th { background: var(--fondo-tinte); color: var(--texto); font-weight: 600; }
.tabla-legal tbody th { color: var(--texto); font-weight: 600; width: 28%; }

/* 16. Equipo -------------------------------------------------------------- */
.rejilla-equipo { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; max-width: 980px; }
@media (max-width: 760px) { .rejilla-equipo { grid-template-columns: 1fr 1fr; gap: 24px 14px; } }
.sin-foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); overflow: hidden; }
.sin-foto::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 22%; height: 14px; background: var(--turquesa); transform: skewX(-24deg); opacity: .6; }
.sin-foto span { font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 600; letter-spacing: .02em; color: var(--texto-suave); }
.tarjeta-persona .colegiado { display: block; margin-top: 4px; font-size: .85rem; color: var(--texto-suave); }
.rejilla-equipo-4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
@media (max-width: 960px) { .rejilla-equipo-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .rejilla-equipo-4 { grid-template-columns: 1fr 1fr; } }
.logos-todas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.aseguradoras-nota a { white-space: nowrap; }