/*
 * Tema «Consulta» · Centro de Ginecología del Dr. Antonio Sánchez
 * Cálido y clínico-humano: marfil, ciruela reinterpretada y rosa empolvado; Newsreader + Figtree;
 * marcos en arco (pétalo de loto), numerales en cursiva y llamadas a la cita siempre a mano.
 */

:root {
  --tinta: #2a1828;
  --tinta-2: #55424f;
  --tenue: #735e6b;
  --ciruela: #6b2160;
  --ciruela-hondo: #521848;
  --noche: #2b0f28;
  --noche-2: #3b1737;
  --malva: #dcb9d4;
  --rosa: #f6eae7;
  --rosa-2: #ecd7d3;
  --marfil: #fcf8f4;
  --blanco: #fff;
  --salvia: #2b7369;
  --borde: #eadcd7;
  --foco: #a8478f;
  --sombra: 0 1px 2px rgba(43, 15, 40, .05), 0 12px 32px -18px rgba(43, 15, 40, .28);

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 76rem;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --bloque: clamp(4rem, 9vw, 7.5rem);

  /* variables del contenido común */
  --ancho-texto: 39rem;
  --ancho-amplio: 72rem;
  --hueco: clamp(1.25rem, 3vw, 2.25rem);
  --radio: 1rem;
  --color-texto: var(--tinta);
  --color-fondo: var(--marfil);
  --color-suave: var(--rosa);
  --color-borde: var(--borde);
  --color-acento: var(--ciruela);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--sans);
  --fuente-titulos: var(--serif);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6.5rem; }
body {
  margin: 0; background: var(--marfil); color: var(--tinta);
  font: 400 1.0625rem/1.68 var(--sans); font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--ciruela); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ciruela-hondo); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; margin: 0 0 .5em; color: var(--tinta); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--ciruela); }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: var(--rosa-2); color: var(--tinta); }

.envoltorio { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -5rem; z-index: 200; background: var(--ciruela); color: #fff; padding: .75rem 1.1rem; border-radius: .6rem; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 1rem; color: #fff; }
.icono { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

.antetitulo {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem;
  font: 600 .78rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ciruela);
}
.punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--salvia); box-shadow: 0 0 0 .3rem rgba(43, 115, 105, .15); flex: none; }

/* ------------------------------------------------------------------ botones */

.boton, .contenido .boton, .x-contacto .boton, .x-buscador button, .x-mapa button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 3rem;
  padding: .75em 1.45em; border-radius: 999px; border: 1px solid var(--ciruela);
  background: var(--ciruela); color: #fff; font: 600 .97rem/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.boton:hover, .contenido .boton:hover, .x-contacto .boton:hover, .x-buscador button:hover, .x-mapa button:hover {
  background: var(--ciruela-hondo); border-color: var(--ciruela-hondo); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(82, 24, 72, .6);
}
.boton .icono { width: 1.1em; height: 1.1em; }
.boton-linea, .contenido .boton.secundario { background: transparent; color: var(--ciruela); border-color: rgba(107, 33, 96, .35); }
.boton-linea:hover, .contenido .boton.secundario:hover { background: rgba(107, 33, 96, .07); color: var(--ciruela-hondo); border-color: var(--ciruela); box-shadow: none; }
.boton-claro { background: #fff; color: var(--ciruela); border-color: #fff; }
.boton-claro:hover { background: var(--rosa); color: var(--ciruela-hondo); border-color: var(--rosa); }
.botones-fila { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; text-decoration: none; }
.enlace-flecha .icono { transition: transform .2s ease; }
.enlace-flecha:hover .icono { transform: translateX(3px); }

/* ------------------------------------------------------------------ franja superior y cabecera */

.franja { background: var(--noche); color: #ecdde8; font-size: .82rem; }
.franja-fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem 2rem; min-height: 2.5rem; flex-wrap: wrap; padding-block: .35rem; }
.franja p { margin: 0; display: flex; align-items: center; gap: .5rem; }
.franja .icono { color: var(--malva); width: 1rem; height: 1rem; }
.franja a { color: #fff; text-decoration: none; font-weight: 600; }
.franja a:hover { text-decoration: underline; color: #fff; }
.franja-tel { margin-left: auto !important; }

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 248, 244, .93); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-fila { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; position: relative; }
.marca { display: block; flex: none; margin-right: auto; line-height: 0; border-radius: 6px; }
.marca-logo { height: 3.25rem; width: auto; mix-blend-mode: multiply; }
.marca-texto { font: 500 1.3rem/1.1 var(--serif); color: var(--tinta); }

.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.menu a {
  position: relative; display: block; padding: .6rem .8rem; border-radius: 999px;
  color: var(--tinta); font-weight: 500; font-size: .96rem; text-decoration: none; white-space: nowrap;
}
.menu a:hover { color: var(--ciruela); background: rgba(107, 33, 96, .06); }
.menu a[aria-current="page"] { color: var(--ciruela); }
.menu a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: .2rem; width: .3rem; height: .3rem; margin-left: -.15rem; border-radius: 50%; background: var(--ciruela); }
.menu-sub { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.navegacion-extra { display: none; }
.boton-cita { min-height: 2.75rem; padding-inline: 1.2em; font-size: .93rem; }
.boton-cita[aria-current="page"] { background: var(--ciruela-hondo); }

.menu-boton {
  display: none; align-items: center; gap: .6rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--borde); border-radius: 999px; background: #fff; color: var(--tinta); font: 600 .9rem var(--sans); cursor: pointer;
}
.menu-boton-raya, .menu-boton-raya::before, .menu-boton-raya::after { display: block; width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-boton-raya { position: relative; }
.menu-boton-raya::before, .menu-boton-raya::after { content: ""; position: absolute; left: 0; }
.menu-boton-raya::before { top: -6px; }
.menu-boton-raya::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton-raya { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton-raya::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton-raya::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 66rem) {
  .menu-boton { display: inline-flex; }
  .cabecera-fila { gap: .75rem; min-height: 4.5rem; flex-wrap: wrap; }
  .marca-logo { height: 2.75rem; }
  .navegacion { order: 5; flex-basis: 100%; padding-bottom: 1rem; }
  .js .navegacion { display: none; }
  .js .navegacion.abierto {
    display: block; position: absolute; top: 100%; left: calc(-1 * var(--margen)); right: calc(-1 * var(--margen));
    background: var(--marfil); border-bottom: 1px solid var(--borde); box-shadow: 0 24px 40px -24px rgba(43, 15, 40, .35);
    padding: .5rem var(--margen) 1.75rem; max-height: calc(100dvh - 4.5rem); overflow-y: auto;
  }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu li { border-bottom: 1px solid var(--borde); }
  .menu a { padding: 1rem .25rem; border-radius: 0; font: 400 1.45rem/1.2 var(--serif); }
  .menu a:hover { background: none; }
  .menu a[aria-current="page"]::after { left: auto; right: .5rem; top: 50%; bottom: auto; margin: -.2rem 0 0; width: .4rem; height: .4rem; }
  .navegacion-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
  .navegacion-tel { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
}
@media (max-width: 40rem) {
  .boton-cita { display: none; }
  .franja { display: none; }
  .marca-logo { height: 2.4rem; }
}

/* ------------------------------------------------------------------ portada */

.portada {
  position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(60rem 36rem at 88% 8%, rgba(236, 215, 211, .85), transparent 65%),
    radial-gradient(40rem 30rem at -5% 100%, rgba(246, 234, 231, .9), transparent 70%),
    var(--marfil);
}
.portada-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.portada-texto { grid-column: 1 / span 7; }
.portada h1 { font-size: clamp(2.6rem, 5.3vw, 4.6rem); line-height: 1.03; letter-spacing: -.022em; font-weight: 380; margin-bottom: .45em; }
.portada-subtitulo { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--tinta-2); max-width: 33rem; margin: 0; }
.portada-foto { grid-column: 8 / span 5; margin: 0; position: relative; isolation: isolate; justify-self: end; width: min(100%, 27rem); }
.arco {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rosa-2);
  border-radius: 50% 50% 1.5rem 1.5rem / 40% 40% 1.5rem 1.5rem;
}
.arco img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.portada-foto::before {
  content: ""; position: absolute; inset: -1.1rem -1.1rem 1.1rem 1.1rem; z-index: -1;
  border: 1px solid rgba(107, 33, 96, .3); border-radius: 50% 50% 1.5rem 1.5rem / 40% 40% 1.5rem 1.5rem;
}
.portada-foto figcaption {
  position: absolute; left: -1.75rem; bottom: 2rem; max-width: 80%;
  background: #fff; border-radius: 1rem; padding: .85rem 1.15rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .1rem; line-height: 1.3;
}
.portada-foto figcaption strong { font: 500 1.1rem/1.25 var(--serif); color: var(--tinta); }
.portada-foto figcaption span { font-size: .82rem; color: var(--tenue); }

.datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(2.75rem, 6vw, 4.5rem) 0 0;
  background: rgba(255, 255, 255, .78); border: 1px solid var(--borde); border-radius: 1.25rem; box-shadow: var(--sombra);
}
.dato { padding: 1.5rem 1.75rem; }
.dato + .dato { border-left: 1px solid var(--borde); }
.dato dt { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.dato dt .icono { color: var(--ciruela); width: 1.2rem; height: 1.2rem; }
.dato dd { margin: 0; font: 400 1.14rem/1.45 var(--serif); color: var(--tinta); }
.dato dd a { font-family: var(--sans); font-size: .9rem; font-weight: 600; }
.dato dd a.dato-tel { font: 500 1.2rem/1.5 var(--serif); color: var(--tinta); text-decoration: none; letter-spacing: .01em; }
.dato dd a.dato-tel:hover { color: var(--ciruela); text-decoration: underline; }

/* ------------------------------------------------------------------ secciones de portada */

.seccion-cabecera { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.seccion-cabecera h2, .seccion-doctor h2, .seguros h2, .cirugia h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; }
.seccion-cabecera-fila { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.seccion-cabecera-fila h2 { margin: 0; }
.seccion-pie { margin: 2.5rem 0 0; }

.seccion-doctor { padding-block: var(--bloque); }
.doctor-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.doctor-texto { grid-column: 1 / span 6; }
.doctor-lateral { grid-column: 8 / span 5; }
.prosa p { color: var(--tinta-2); max-width: 36rem; }
.prosa p:first-child { font: 400 1.3rem/1.5 var(--serif); color: var(--tinta); }

/* vídeo bajo demanda (botón .x-video del motor, con el aspecto del tema) */
.t-video { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 1.25rem; overflow: hidden; background: var(--noche); }
.x-video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; aspect-ratio: 16 / 9; padding: 1.5rem; border: 0; border-radius: 1.25rem; background: radial-gradient(circle at 25% 20%, #6e2a64, var(--noche) 70%); color: #fff; text-align: center; }
.t-video .x-video { height: 100%; border-radius: 0; }
.x-video::before { display: none; }
.x-video-icono { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #fff; color: var(--ciruela); box-shadow: 0 0 0 .6rem rgba(255, 255, 255, .14); transition: transform .25s ease, box-shadow .25s ease; }
.x-video-icono svg { display: none; }
.x-video-icono::after { content: ""; margin-left: .3rem; border-style: solid; border-width: .72rem 0 .72rem 1.2rem; border-color: transparent transparent transparent currentColor; }
.x-video:hover .x-video-icono, .x-video:focus-visible .x-video-icono { transform: scale(1.06); box-shadow: 0 0 0 .9rem rgba(255, 255, 255, .16); }
.x-video:active .x-video-icono { transform: scale(.97); }
.x-video-texto { position: static; display: flex; flex-direction: column; gap: .25rem; font: 400 1.25rem/1.3 var(--serif); text-shadow: none; }
.x-video-texto small { font: 500 .78rem var(--sans); letter-spacing: .06em; color: var(--malva); opacity: 1; }
.x-video:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.t-video iframe { position: absolute; inset: 0; width: 100%; height: 100% !important; border: 0; }

.titulos { margin-top: 2.25rem; }
.titulos-intro { font-size: .95rem; color: var(--tenue); }
.titulos ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--borde); }
.titulos li { display: flex; gap: .9rem; align-items: baseline; padding: .95rem 0; border-top: 1px solid var(--borde); font: 400 1.12rem/1.35 var(--serif); }
.titulos li .icono { color: var(--ciruela); width: 1.35rem; height: 1.35rem; transform: translateY(.2rem); }

.seccion-servicios { padding-block: var(--bloque); background: var(--rosa); }
.servicios {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: rgba(107, 33, 96, .16); border: 1px solid rgba(107, 33, 96, .16); border-radius: 1.25rem; overflow: hidden;
}
.servicio { background: var(--rosa); padding: 2rem 2rem 2.25rem; transition: background-color .25s ease; }
.servicio:hover { background: #fbf2f0; }
.servicio-num { display: block; margin-bottom: 1.5rem; font: italic 400 1.15rem/1 var(--serif); color: var(--ciruela); }
.servicio-num::after { content: ""; display: inline-block; width: 2rem; height: 1px; margin-left: .6rem; vertical-align: middle; background: rgba(107, 33, 96, .4); }
.servicio h3 { font-size: 1.5rem; margin-bottom: .45em; }
.servicio p { margin: 0; color: var(--tinta-2); font-size: .98rem; }

.seccion-laser { --foco: var(--malva); padding-block: var(--bloque); background: var(--noche); color: #f1e4ee; position: relative; overflow: hidden; }
.seccion-laser::before { content: ""; position: absolute; width: 46rem; height: 46rem; right: -14rem; top: -18rem; border-radius: 50%; background: radial-gradient(circle, rgba(107, 33, 96, .55), transparent 65%); pointer-events: none; }
.laser-rejilla { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; }
.laser-foto { grid-column: 1 / span 5; margin: 0; border-radius: 1.5rem; overflow: hidden; background: #fff; }
.laser-foto img { display: block; width: 100%; }
.laser-texto { grid-column: 7 / span 6; }
.laser-texto .antetitulo { color: var(--malva); }
.laser-texto h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); }
.laser-texto h2 em { color: var(--malva); }
.laser-texto p { color: rgba(241, 228, 238, .86); }
.laser-sub { margin: 1.75rem 0 .75rem; font: 600 .76rem/1.2 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--malva) !important; }
.indicaciones { list-style: none; margin: 0 0 2.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; }
.indicaciones li { display: flex; gap: .6rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid rgba(220, 185, 212, .2); font-size: .97rem; }
.indicaciones .icono { color: var(--malva); transform: translateY(.2rem); }

.seccion-seguros { padding-block: var(--bloque); }
.seguros-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.seguros, .cirugia { border-radius: 1.5rem; padding: clamp(2rem, 4vw, 3rem); }
.seguros { background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.seguros h2, .cirugia h2 { font-size: clamp(1.75rem, 2.6vw, 2.3rem); }
.seguros-lista { font: italic 400 1.4rem/1.4 var(--serif); color: var(--ciruela); margin-bottom: 1.5rem; }
.lista-check { list-style: none; margin: 0; padding: 0; }
.lista-check li { display: flex; gap: .6rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--borde); }
.lista-check .icono { color: var(--salvia); transform: translateY(.2rem); }
.cirugia { background: linear-gradient(160deg, var(--rosa-2), var(--rosa) 55%, var(--marfil)); }
.cirugia p { color: var(--tinta-2); margin: 0; }
.cirugia-loto { width: 2.25rem; height: 2.25rem; color: var(--ciruela); margin-bottom: 1.25rem; }

.seccion-blog { padding-block: 0 var(--bloque); }
@media (min-width: 56rem) {
  .seccion-blog .envoltorio:has(.tarjeta:only-child) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; align-items: center; }
  .seccion-blog .envoltorio:has(.tarjeta:only-child) .seccion-cabecera-fila { flex-direction: column; align-items: flex-start; margin: 0; }
  .seccion-blog .envoltorio:has(.tarjeta:only-child) .tarjetas { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ tarjetas */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1.5rem; }
.tarjetas:has(> .tarjeta:only-child) { grid-template-columns: minmax(0, 46rem); }
.tarjeta {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde);
  border-radius: 1.1rem; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--rosa-2); }
.tarjeta:focus-within { outline: 3px solid var(--foco); outline-offset: 3px; }
.tarjeta-sin-imagen { border-top: 4px solid var(--ciruela); }
.tarjeta-imagen img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.6rem; }
.tarjeta-meta { margin: 0 0 .6rem; font: 600 .74rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.tarjeta-titulo { font-size: 1.45rem; line-height: 1.18; margin: 0 0 .6rem; }
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; }
.tarjeta-titulo a:focus-visible { outline: none; }
.tarjeta:hover .tarjeta-titulo a { color: var(--ciruela); }
.tarjeta-extracto { color: var(--tinta-2); font-size: .97rem; margin: 0 0 1.25rem; }
.tarjeta-mas { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; color: var(--ciruela); }
.tarjeta-mas .icono { transition: transform .2s ease; }
.tarjeta:hover .tarjeta-mas .icono { transform: translateX(4px); }

/* ------------------------------------------------------------------ llamada a la cita */

.cita { --foco: var(--malva); position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--noche); padding-block: clamp(4rem, 8vw, 6.5rem); }
.cita-fondo { position: absolute; inset: 0; z-index: -2; }
.cita-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cita::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(43, 15, 40, .95) 0%, rgba(43, 15, 40, .82) 48%, rgba(107, 33, 96, .5) 100%); }
.cita-fila { display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.cita-texto { max-width: 38rem; }
.cita-loto { width: 2.25rem; height: 2.25rem; color: var(--malva); margin-bottom: 1rem; }
.cita h2 { color: #fff; font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.04; }
.cita h2 em { color: var(--malva); }
.cita p { color: rgba(255, 255, 255, .86); font-size: 1.1rem; margin: 0; }
.cita-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.cita-tel { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font: 400 1.35rem/1.2 var(--serif); }
.cita-tel .icono { color: var(--malva); width: 1.1rem; height: 1.1rem; }
.cita-tel:hover { color: var(--malva); }

/* ------------------------------------------------------------------ páginas interiores */

.cabecera-pagina { padding: clamp(2.25rem, 6vw, 4.5rem) 0 clamp(2rem, 4.5vw, 3.25rem); background: linear-gradient(180deg, var(--rosa) 0%, var(--marfil) 100%); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.cabecera-pagina h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); line-height: 1.04; letter-spacing: -.02em; max-width: 20ch; margin: 0; }
.cabecera-pagina .antetitulo { margin-bottom: .75rem; }
.entradilla { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--tinta-2); max-width: 40rem; margin: 1rem 0 0; }
.cabecera-meta { margin: 1.1rem 0 0; font-size: .9rem; color: var(--tenue); display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.cabecera-meta a { font-weight: 600; text-decoration: none; }
.cabecera-meta .sep { color: var(--rosa-2); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.5rem; padding: 0; font-size: .84rem; color: var(--tenue); }
.migas li + li::before { content: "/"; margin-right: .35rem; color: var(--rosa-2); }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--ciruela); text-decoration: underline; }
.pagina, .entrada, .listado { padding-bottom: var(--bloque); }

.subpaginas ul { list-style: none; padding: 0; margin: 3rem auto 0; max-width: var(--ancho-texto); display: grid; gap: .5rem; }
.subpaginas a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--borde); border-radius: .9rem; text-decoration: none; font: 400 1.2rem var(--serif); color: var(--tinta); }

/* ------------------------------------------------------------------ contenido importado */

.contenido { line-height: 1.72; }
.contenido h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 400; margin-top: 1.9em; }
.contenido h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 420; }
.contenido h4 { font-size: 1.28rem; font-weight: 500; margin-top: 1.2em; margin-bottom: .4em; }
.contenido h2::first-letter, .contenido h3::first-letter, .contenido h4::first-letter { text-transform: uppercase; }
.contenido h2 strong, .contenido h3 strong, .contenido h4 strong { font-weight: inherit; }
.contenido > .grupo { margin-block: 0 clamp(3rem, 6vw, 4.5rem); }
.contenido > .grupo:not(.con-fondo) > :is(p, h2, h3, ul, ol, blockquote, details) { max-width: var(--ancho-texto); }
.contenido > .grupo:not(.con-fondo) > h2 { max-width: 44rem; }
.contenido .rejilla { gap: clamp(1.5rem, 4vw, 3.5rem); }
.contenido .grupo > p:first-child:has(+ h2), .contenido .grupo > p:first-child:has(+ h3) {
  margin: 0 0 .9rem; font: 600 .78rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ciruela);
}
.contenido .grupo > h2:first-child, .contenido .grupo > p:first-child + h2, .contenido .grupo > h3:first-child { margin-top: 0; }
.contenido figure.imagen img, .contenido p > img { border-radius: 1rem; }
.contenido * > figure { margin-inline: 0; }
.contenido .columnas { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-block: 0 1.5rem; }
.contenido .columna figure { margin-bottom: 0; }
.contenido .columna figure img { max-height: 32rem; width: auto; margin-inline: auto; }
.contenido ol, .contenido ul { padding-left: 1.4em; }
.contenido li { margin-bottom: .6em; padding-left: .25em; }
.contenido ol > li::marker { color: var(--ciruela); font: italic 500 1.05em var(--serif); }
.contenido ul > li::marker { color: var(--ciruela); }
.contenido blockquote { border-left-color: var(--ciruela); font-family: var(--serif); font-size: 1.15em; }
.contenido hr, .contenido .separador { border: 0; height: 1px; background: var(--rosa-2); max-width: 8rem; margin: 3rem auto; }
.contenido .pregunta { margin-top: 1.8em; margin-bottom: .35em; font: 500 1.22rem/1.35 var(--serif); color: var(--ciruela); }
.contenido .pregunta + p { color: var(--tinta-2); }

/* tarjetas de servicio (imagen + título + texto); si falta la imagen, un panel con el loto */
.contenido .rejilla:has(> .grupo > figure.imagen + h4) > .grupo:has(> h4) {
  background: #fff; border: 1px solid var(--borde); border-radius: 1.25rem; overflow: hidden; padding: 1.6rem; align-self: stretch;
}
.contenido .rejilla:has(> .grupo > figure.imagen + h4) > .grupo > figure.imagen:first-child { margin: -1.6rem -1.6rem 1.4rem; }
.contenido .rejilla:has(> .grupo > figure.imagen + h4) > .grupo > figure.imagen:first-child img { border-radius: 0; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.contenido .rejilla:has(> .grupo > figure.imagen + h4) > .grupo:has(> h4):not(:has(> figure))::before {
  content: ""; display: block; aspect-ratio: 3 / 2; margin: -1.6rem -1.6rem 1.4rem;
  background: var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b2160' stroke-width='.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c2.2 2.6 2.2 8.6 0 12-2.2-3.4-2.2-9.4 0-12z'/%3E%3Cpath d='M11.4 16C8.6 15.4 5 12.8 4 8.2c3.6.4 6.5 3 7.4 7.8z'/%3E%3Cpath d='M12.6 16c2.8-.6 6.4-3.2 7.4-7.8-3.6.4-6.5 3-7.4 7.8z'/%3E%3Cpath d='M5.5 18.5c3.8 1.6 9.2 1.6 13 0'/%3E%3C/svg%3E") center / 30% no-repeat;
}
.contenido .rejilla > .grupo:has(> h4) > h4 { margin-top: 0; }
.contenido .rejilla:has(> .grupo > figure.imagen + h4) > .grupo > p { font-size: .97rem; color: var(--tinta-2); }
/* galerías hechas con columnas de imágenes: todas las fotos en una misma retícula */
.contenido .rejilla:has(> .grupo:not(:has(> :not(figure.imagen)))) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); }
.contenido .rejilla > .grupo:not(:has(> :not(figure.imagen))) { display: contents; }
.contenido .rejilla > .grupo:not(:has(> :not(figure.imagen))) > figure { margin: 0; }
.contenido .rejilla > .grupo:not(:has(> :not(figure.imagen))) > figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .9rem; box-shadow: var(--sombra); }

/* bloques con imagen de fondo */
.contenido .con-fondo { --foco: var(--malva); border-radius: 1.5rem; padding: clamp(2.25rem, 6vw, 4.5rem); }
.contenido .con-fondo::before { background: linear-gradient(115deg, rgba(43, 15, 40, .94), rgba(43, 15, 40, .84) 50%, rgba(78, 24, 70, .8)); }
.contenido .con-fondo h2, .contenido .con-fondo h3, .contenido .con-fondo h4 { color: #fff; }
.contenido .con-fondo p { color: rgba(255, 255, 255, .88); }
.contenido .con-fondo .rejilla > .grupo + .grupo { border-left: 1px solid rgba(220, 185, 212, .3); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.contenido .con-fondo .rejilla > .grupo + .grupo > p { margin-bottom: .55em; }
.contenido .con-fondo .rejilla > .grupo + .grupo > p:first-child { font: 400 1.4rem/1.3 var(--serif); color: #fff; margin-bottom: .8em; }
.contenido .con-fondo .x-video { --foco: var(--malva); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.contenido .con-fondo:has(.x-video) .rejilla { width: 100%; max-width: 52rem; margin-inline: auto; grid-template-columns: 1fr; }
.contenido figure.video { max-width: 52rem; margin-inline: auto; }
.contenido figure.video > .x-video { display: flex; }

/* entradas del blog */
.contenido-entrada { font-size: 1.1rem; }
.contenido-entrada > p:first-child { font: 400 1.26rem/1.6 var(--serif); color: var(--tinta); }

.vecinos { max-width: var(--ancho-texto); margin: 3.5rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vecino { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--borde); border-radius: 1rem; background: #fff; text-decoration: none; color: var(--tinta); font: 400 1.1rem/1.3 var(--serif); }
.vecino span { font: 600 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.vecino-sig { text-align: right; grid-column: 2; }
.relacionadas { margin-top: var(--bloque); }
.relacionadas-titulo { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.comentarios { max-width: var(--ancho-texto); margin: 3.5rem auto 0; }
.comentarios-lista { list-style: none; padding: 0; }
.comentarios-lista .comentarios-lista { padding-left: 1.5rem; border-left: 2px solid var(--rosa-2); }
.comentario { padding: 1rem 0; border-top: 1px solid var(--borde); }

/* listados y búsqueda */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtros a { padding: .5rem 1rem; border: 1px solid var(--borde); border-radius: 999px; text-decoration: none; color: var(--tinta); background: #fff; font-size: .92rem; }
.filtros a[aria-current="page"] { background: var(--ciruela); border-color: var(--ciruela); color: #fff; }
.vacio { font: 400 1.25rem/1.5 var(--serif); color: var(--tinta-2); }
.busqueda-formulario { margin-bottom: 2.5rem; }
.x-buscador { max-width: 36rem; }
.x-buscador input { border-radius: 999px; padding: .8em 1.2em; background: #fff; min-height: 3rem; border-color: #dccbc6; }
.paginacion a, .paginacion span[aria-current] { border-radius: 999px; min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.paginacion span[aria-current] { background: var(--ciruela); }

/* formularios de contacto y cita */
.formulario-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.formulario-info { grid-column: 1 / span 5; }
.formulario-info .contenido > * { max-width: none; }
.formulario-info .contenido h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.formulario-info .contenido p { color: var(--tinta-2); }
.formulario-info .contenido a[href^="tel:"] { font: 500 1.25rem var(--serif); color: var(--tinta); text-decoration: none; }
.formulario-info .contenido a[href^="tel:"]:hover { color: var(--ciruela); text-decoration: underline; }
.horario-caja { margin-top: 1.5rem; background: var(--rosa); border-radius: 1rem; padding: 1.25rem 1.5rem; }
.horario-caja p { margin: 0; font: 400 1.15rem/1.5 var(--serif); }
.horario-caja .horario-titulo { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ciruela); }
.formulario-tarjeta { grid-column: 7 / span 6; background: #fff; border: 1px solid var(--borde); border-radius: 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--sombra); }
.formulario-titulo { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: .3em; }
.formulario-texto { color: var(--tinta-2); margin-bottom: 1.75rem; }
.formulario-mapa { margin-top: clamp(2.5rem, 5vw, 4rem); }
.x-contacto { max-width: none; gap: 1.1rem 1.25rem; }
.x-contacto label { font-size: .88rem; color: var(--tinta); }
.x-contacto input:not([type=checkbox]), .x-contacto textarea {
  background: var(--marfil); border: 1px solid #dccbc6; border-radius: .8rem; padding: .85em 1em; min-height: 3rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.x-contacto input:not([type=checkbox]):hover, .x-contacto textarea:hover { border-color: #c9adb0; }
.x-contacto input:focus, .x-contacto textarea:focus, .x-buscador input:focus { outline: none; border-color: var(--ciruela); background: #fff; box-shadow: 0 0 0 4px rgba(107, 33, 96, .14); }
.x-contacto input[type=checkbox] { accent-color: var(--ciruela); width: 1.15rem; height: 1.15rem; }
.x-contacto .x-acepto label { font-size: .86rem; color: var(--tinta-2); }
.x-contacto .boton { width: 100%; min-height: 3.25rem; font-size: 1rem; }
.x-aviso { border-radius: 1rem; margin-bottom: 1.25rem; }
.x-mapa { background: var(--rosa); border-radius: 1.5rem; padding: 2.25rem 1.5rem; }
.x-mapa figcaption span { font: 400 1.3rem/1.4 var(--serif); }
.x-mapa figcaption a { font-weight: 600; }
.formulario-mapa figure.mapa iframe { aspect-ratio: 16 / 7; border-radius: 1.5rem; }

/* 404 */
.pagina-404 { padding-block: clamp(3rem, 8vw, 6rem) var(--bloque); text-align: center; }
.pagina-404 .envoltorio { max-width: 44rem; }
.numero-404 { margin: 0; font: italic 300 clamp(6rem, 18vw, 10.5rem)/.85 var(--serif); color: var(--rosa-2); letter-spacing: -.04em; }
.pagina-404 h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-top: .25em; }
.pagina-404 .entradilla { margin-inline: auto; }
.enlaces-404 { list-style: none; padding: 0; margin: 2rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.enlaces-404 a { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .5rem 1.1rem; border-radius: 999px; background: #fff; border: 1px solid var(--borde); text-decoration: none; color: var(--tinta); }
.enlaces-404 a:hover { border-color: var(--ciruela); color: var(--ciruela); }
.pagina-404 .x-buscador { margin-inline: auto; }
.pagina-404 .botones-fila { justify-content: center; }

/* ------------------------------------------------------------------ pie */

.pie { --foco: var(--malva); background: #230d20; color: #e6d6e2; padding-top: clamp(3.5rem, 7vw, 5rem); font-size: .95rem; }
.pie a { color: #f6eaf3; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-rejilla { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr .9fr; gap: 2.5rem; }
.pie-logo { display: flex; gap: .85rem; align-items: center; margin: 0 0 1.25rem; font: 400 1.5rem/1.15 var(--serif); color: #fff; }
.pie-logo small { display: block; margin-top: .3rem; font: 600 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--malva); }
.pie-loto { width: 2.5rem; height: 2.5rem; color: var(--malva); }
.pie-texto { color: rgba(230, 214, 226, .82); max-width: 24rem; }
.pie-titulo { margin: .35rem 0 1.1rem; font: 600 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--malva); }
.pie-lista, .pie-menu { list-style: none; margin: 0; padding: 0; }
.pie-lista li { display: flex; gap: .65rem; align-items: baseline; margin-bottom: .7rem; }
.pie-lista .icono { color: var(--malva); width: 1.05rem; height: 1.05rem; transform: translateY(.15rem); }
.pie-menu li { margin-bottom: .2rem; }
.pie-menu a { display: inline-block; padding: .3rem 0; }
.pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; margin-top: 3rem; padding-block: 1.5rem 2rem; border-top: 1px solid rgba(220, 185, 212, .16); font-size: .85rem; color: rgba(230, 214, 226, .72); }
.pie-base > p { margin: 0; }

.barra-movil { display: none; }

/* ------------------------------------------------------------------ adaptación */

@media (max-width: 64rem) {
  .portada-texto { grid-column: 1 / span 7; }
  .portada-foto { grid-column: 8 / span 5; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 56rem) {
  .portada-rejilla, .doctor-rejilla, .laser-rejilla, .formulario-rejilla { grid-template-columns: 1fr; gap: 2.5rem; }
  .portada-texto, .portada-foto, .doctor-texto, .doctor-lateral, .laser-foto, .laser-texto, .formulario-info, .formulario-tarjeta { grid-column: 1; }
  .portada-foto { justify-self: center; width: min(78%, 22rem); margin-top: 1rem; }
  .portada-foto figcaption { left: -1.25rem; bottom: 1.25rem; }
  .laser-foto { max-width: 30rem; }
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seguros-rejilla { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .dato + .dato { border-left: 0; border-top: 1px solid var(--borde); }
  .dato { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
  .dato dt { margin: 0; }
}
@media (max-width: 40rem) {
  body { font-size: 1.03rem; padding-bottom: 4.75rem; }
  .servicios { grid-template-columns: 1fr; }
  .servicio { padding: 1.6rem 1.4rem 1.75rem; }
  .servicio-num { margin-bottom: 1rem; }
  .indicaciones { grid-template-columns: 1fr; }
  .dato { grid-template-columns: 1fr; gap: .1rem; padding: 1.2rem 1.35rem; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .botones-fila .boton { flex: 1 1 auto; }
  .vecinos { grid-template-columns: 1fr; }
  .vecino-sig { grid-column: 1; }
  .contenido .con-fondo .rejilla > .grupo + .grupo { border-left: 0; padding-left: 0; border-top: 1px solid rgba(220, 185, 212, .3); padding-top: 1.5rem; }
  .formulario-mapa figure.mapa iframe { aspect-ratio: 4 / 3; }
  .barra-movil {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--borde); box-shadow: 0 -10px 30px -20px rgba(43, 15, 40, .4);
  }
  .barra-movil a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; border-radius: 999px; border: 1px solid rgba(107, 33, 96, .35); color: var(--ciruela); font-weight: 600; text-decoration: none; }
  .barra-movil a.barra-movil-cita { background: var(--ciruela); border-color: var(--ciruela); color: #fff; }
  .menu-abierto .barra-movil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tarjeta:hover, .boton:hover { transform: none; }
}

@media print {
  .franja, .cabecera nav, .menu-boton, .boton-cita, .cita, .barra-movil, .t-video, .x-video, .x-mapa, .formulario-tarjeta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  .cabecera { position: static; background: none; border: 0; }
  .cabecera-pagina, .seccion-servicios, .portada { background: none !important; }
  .seccion-laser, .pie { background: none; color: #000; }
  .laser-texto h2, .laser-texto p, .pie a, .pie-logo { color: #000 !important; }
  a { color: #000; }
  .contenido a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ajustes finos de las páginas de formulario */
.formulario-info .contenido > .grupo { margin-bottom: 0; }
.formulario-mapa .x-mapa, .formulario-mapa figure { margin: 0; }

.pie-legales { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pie-legales a { display: inline-flex; align-items: center; min-height: 2rem; }

/* ------------------------------------------------------------------ afinado */

/* cifras: teléfonos, horas y fechas alineadas */
.franja, .dato dd, .pie-lista, .horario-caja, .cita-tel, .navegacion-tel, .barra-movil, .tarjeta-meta, .cabecera-meta, .contenido a[href^="tel:"] { font-variant-numeric: tabular-nums lining-nums; }
.servicio-num, .numero-404 { font-variant-numeric: lining-nums; }
/* estados de pulsación */
.boton:active, .contenido .boton:active, .x-contacto .boton:active, .x-buscador button:active { transform: translateY(0) scale(.98); box-shadow: none; }
.tarjeta:active { transform: translateY(-1px); }
.menu a:active, .enlace-flecha:active { opacity: .8; }
.enlace-flecha:focus-visible, .menu a:focus-visible { outline-offset: 2px; }
/* sin viudas en titulares y entradillas */
.portada-subtitulo, .entradilla, .prosa p, .servicio p, .tarjeta-extracto, .cita p { text-wrap: pretty; }
/* columnas del contenido que se quedan solas (p. ej. si una imagen externa no carga) */
.contenido .columnas > .columna:only-child { max-width: var(--ancho-texto); }
/* texto corrido a 16px o más en móvil */
@media (max-width: 40rem) {
  .servicio p, .tarjeta-extracto, .prosa p, .x-contacto .x-acepto label, .titulos-intro, .lista-check li { font-size: 1rem; }
  .contenido { font-size: 1.03rem; }
}
/* titulares alineados con el texto dentro de los grupos anchos */
.contenido .grupo > :is(h2, h3, h4) { margin-inline: 0; }

/* ------------------------------------------------------------------ ronda 2 */

/* índice «En esta página» de las páginas largas */
.indice { margin-top: calc(-1 * clamp(1rem, 3vw, 2rem)); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--borde); border-radius: 1.25rem; }
.indice-titulo { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ciruela); }
.indice-titulo .icono { width: 1.1rem; height: 1.1rem; }
.indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.indice a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem .95rem; border-radius: 999px; background: var(--rosa); color: var(--tinta); font-size: .92rem; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.indice a:hover { background: var(--ciruela); color: #fff; }
.indice a:active { transform: scale(.98); }
.contenido h2[id] { scroll-margin-top: 7rem; }
.contenido h2[id]:target { color: var(--ciruela); }

/* indicaciones del láser enlazadas a su apartado */
.indicaciones a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease, color .2s ease; }
.indicaciones a:hover, .indicaciones a:focus-visible { color: #fff; background-size: 100% 1px; }

/* entradas: párrafos más aireados tras partir los textos pegados desde PDF */
.contenido-entrada > p:first-child + p { font-size: 1.1rem; }
@media print { .indice { display: none; } }
@media (max-width: 40rem) {
  .indice { padding: 1rem 0 .75rem; }
  .indice-titulo { padding-inline: 1rem; }
  .indice ol { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 1rem .4rem; scrollbar-width: thin; }
  .indice li { flex: none; scroll-snap-align: start; }
  .indice a { white-space: nowrap; }
}

/* ================================================================== ronda 3 · sistema y móvil */

:root {
  /* escala tipográfica modular (≈1,2) y espaciado en múltiplos de 4 px */
  --t-xs: .8125rem; --t-s: .9375rem; --t-m: 1.0625rem; --t-l: 1.25rem; --t-xl: 1.5rem; --t-2xl: 2rem; --t-3xl: 2.75rem;
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --alto-cabecera: 5rem;
  accent-color: var(--ciruela);
  scrollbar-color: var(--rosa-2) var(--marfil);
}
.contenido p, .prosa p, .servicio p, .tarjeta-extracto, .portada-subtitulo { hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3 { hyphens: manual; }

/* marca tipográfica */
.marca { display: inline-flex; align-items: center; gap: .7rem; line-height: 1; text-decoration: none; color: var(--tinta); padding-block: var(--e-2); }
.marca:hover { color: var(--tinta); }
.marca-loto { width: 2.35rem; height: 2.35rem; color: var(--ciruela); flex: none; }
.marca-texto { display: flex; flex-direction: column; gap: .28rem; }
.marca-linea-1 { font: 500 1.32rem/1 var(--serif); letter-spacing: -.01em; }
.marca-linea-2 { font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--salvia); }
.marca:hover .marca-loto { color: var(--ciruela-hondo); }

/* aval de la portada */
.portada-aval { list-style: none; margin: var(--e-6) 0 0; padding: var(--e-5) 0 0; border-top: 1px solid var(--borde); display: grid; gap: var(--e-3); max-width: 34rem; }
.portada-aval li { display: flex; gap: .6rem; align-items: baseline; font: 400 var(--t-m)/1.45 var(--serif); color: var(--tinta-2); }
.portada-aval .icono { color: var(--ciruela); width: 1.1rem; height: 1.1rem; transform: translateY(.15rem); }

/* franja superior legible en tableta */
.franja { font-size: .92rem; }

/* formularios: etiquetas y texto legal legibles, campos a 16 px (sin zoom en iOS) */
.x-contacto label { font-size: var(--t-s); }
.x-contacto .x-acepto label { font-size: var(--t-s); line-height: 1.5; }
.x-contacto input, .x-contacto textarea, .x-buscador input, .x-trampa, .x-trampa input { font-size: 1rem; }

/* tarjetas: todo el título es pulsable con altura suficiente */
.tarjeta-titulo a { display: block; }

/* galerías del contenido a dos columnas en móvil */
@media (max-width: 40rem) {
  .contenido .rejilla:has(> .grupo:not(:has(> :not(figure.imagen)))) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .contenido .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* menú móvil a pantalla completa, con el fondo bloqueado */
@media (max-width: 66rem) {
  :root { --alto-cabecera: 4rem; }
  .cabecera-fila { min-height: var(--alto-cabecera); }
  .marca-loto { width: 2rem; height: 2rem; }
  .marca-linea-1 { font-size: 1.12rem; }
  .marca-linea-2 { font-size: .64rem; letter-spacing: .14em; }
  .menu-boton { min-height: 2.75rem; }
  html.menu-abierto { overflow: hidden; }
  .menu-abierto .cabecera { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--marfil); }
  .js .navegacion.abierto {
    position: fixed; top: var(--alto-cabecera); left: 0; right: 0; bottom: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--e-4) var(--margen) calc(var(--e-7) + env(safe-area-inset-bottom)); box-shadow: none; border-top: 1px solid var(--borde);
    animation: panel-entra .2s ease-out;
  }
  .menu a { min-height: 3.5rem; display: flex; align-items: center; }
  @keyframes panel-entra { from { transform: translateY(-.5rem); } }
}

/* móvil y tableta: rótulos largos en minúscula y a 15 px (las mayúsculas espaciadas pequeñas se leen mal) */
@media (max-width: 56rem) {
  .antetitulo, .laser-sub, .indice-titulo, .contenido .grupo > p:first-child:has(+ h2), .contenido .grupo > p:first-child:has(+ h3) {
    font-size: var(--t-s) !important; letter-spacing: .01em; text-transform: none; font-weight: 600;
  }
  .portada-aval li { font-size: 1rem; }
  .dato dd a, .x-contacto .boton { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .js .navegacion.abierto { animation: none; } }

.x-contacto input:not([type=checkbox]), .x-contacto textarea, .x-contacto .x-trampa input { font-size: 1rem; }

/* el botón del menú dice «Cerrar» mientras el panel está abierto */
.menu-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-cerrar { display: inline; }
/* rótulos escritos en el contenido con mayúsculas al azar («ContactO»): en móvil, minúscula con inicial mayúscula */
@media (max-width: 56rem) {
  .contenido .grupo > p:first-child:has(+ h2), .contenido .grupo > p:first-child:has(+ h3) { text-transform: lowercase; }
  .contenido .grupo > p:first-child:has(+ h2)::first-letter, .contenido .grupo > p:first-child:has(+ h3)::first-letter { text-transform: uppercase; }
}

/* ================================================================== ronda 4 · fotos de la biblioteca */

/* cabeceras de página con foto */
.cabecera-con-foto { padding-bottom: 0; background: linear-gradient(180deg, var(--rosa) 0%, var(--marfil) 78%); }
.cabecera-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--e-7); align-items: end; }
.cabecera-con-foto .cabecera-textos { padding-bottom: var(--e-7); }
.cabecera-foto { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: var(--rosa-2); }
.cabecera-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cabecera-foto::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -60px 60px -60px rgba(43, 15, 40, .25); pointer-events: none; }
body:has(.cabecera-con-foto) .cabecera-pagina + .envoltorio, .cabecera-con-foto + * { margin-top: 0; }
.plantilla-pagina-la-clinica .cabecera-foto img, .cabecera-foto img[src*="IMG_0402"] { object-position: 50% 22%; }

/* cita destacada sobre foto a sangre */
.destacado { position: relative; isolation: isolate; overflow: hidden; color: #fff; min-height: clamp(26rem, 52vw, 38rem); display: grid; align-items: center; }
.destacado-fondo { position: absolute; inset: 0; z-index: -2; }
.destacado-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.05); }
.destacado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(43, 15, 40, .9) 0%, rgba(43, 15, 40, .72) 45%, rgba(107, 33, 96, .25) 100%); }
.destacado-caja { padding-block: var(--e-8); }
.destacado .antetitulo { color: var(--malva); }
.destacado-cita { margin: 0; max-width: 40rem; border: 0; padding: 0; }
.destacado-cita p { margin: 0; font: 400 clamp(1.8rem, 3.6vw, 3rem)/1.18 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.destacado-cita p::before { content: "«"; color: var(--malva); margin-right: .05em; }
.destacado-cita p::after { content: "»"; color: var(--malva); margin-left: .05em; }

/* ecografías 4D/5D: texto + mosaico */
.seccion-ecografias { padding-block: var(--bloque); background: var(--marfil); }
.ecografias-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-7); align-items: center; }
.ecografias-texto h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; }
.ecografias-texto p { color: var(--tinta-2); max-width: 30rem; }
.ecografias-mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .75rem; aspect-ratio: 16 / 10; }
.eco { margin: 0; overflow: hidden; border-radius: 1rem; background: #1b0b18; }
.eco img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.eco:hover img { transform: scale(1.04); }
.eco-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.eco-1 img { object-position: 45% 50%; }

@media (max-width: 56rem) {
  .cabecera-rejilla, .ecografias-rejilla { grid-template-columns: 1fr; gap: var(--e-5); }
  .cabecera-con-foto .cabecera-textos { padding-bottom: 0; }
  .cabecera-foto { aspect-ratio: 16 / 10; border-radius: 2rem 2rem 0 0; }
  .destacado::before { background: linear-gradient(180deg, rgba(43, 15, 40, .6) 0%, rgba(43, 15, 40, .9) 100%); }
}
@media (max-width: 40rem) {
  .ecografias-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; gap: .5rem; }
  .eco { aspect-ratio: 4 / 3; }
  .eco-1 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .destacado { min-height: 30rem; align-items: end; }
}
@media (prefers-reduced-motion: reduce) { .eco:hover img { transform: none; } }
@media print { .destacado, .ecografias-mosaico, .cabecera-foto { display: none !important; } }