/* Medimagen · portal público · versión 2
   Hoja única, móvil primero. Colores de marca del membrete: rojo #EA2426 y gris #5E5E5E.
   Las páginas de Megamedica usan <body class="tema-megamedica">, que cambia el acento a azul. */

@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --rojo: #ea2426;
  --rojo-700: #c41a1f;
  --rojo-800: #a3151a;
  --rojo-50: #fdf1f1;
  --azul: #1b5e9e;
  --azul-claro: #3b82c4;
  --azul-800: #154a7d;
  --azul-50: #edf3f9;

  /* Acento del tema: rojo en Medimagen, azul en Megamedica */
  --acento: var(--rojo);
  --acento-700: var(--rojo-700);
  --acento-800: var(--rojo-800);
  --acento-50: var(--rojo-50);

  --tinta: #1b1d1f;
  --tinta-2: #3a3d40;
  --gris: #5e5e5e;
  --linea: #e6e3de;
  --linea-2: #d8d4cd;
  --fondo: #fbfaf8;
  --fondo-suave: #f4f2ee;
  --blanco: #fff;
  --oscuro: #141618;
  --foco: #1b1d1f;

  --radio: 18px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgb(20 22 24 / 5%), 0 10px 30px -10px rgb(20 22 24 / 18%);
  --sombra-alta: 0 2px 4px rgb(20 22 24 / 6%), 0 24px 50px -18px rgb(20 22 24 / 30%);
  --ancho: 76rem;
  --margen: 1rem;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

.tema-megamedica {
  --acento: var(--azul);
  --acento-700: var(--azul);
  --acento-800: var(--azul-800);
  --acento-50: var(--azul-50);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; text-wrap: balance; }
h1, h2, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.4rem); line-height: 1; }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1.05; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; }
h1 em, h2 em, .serif em { font-style: italic; color: var(--acento); }
.h3 { font-family: var(--sans); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }

p, ul, ol, dl { margin: 0 0 1rem; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: .35rem; }
strong { font-weight: 700; }
small { font-size: .875rem; }

a { color: var(--acento-700); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--acento-800); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--margen); top: -4rem; z-index: 100;
  padding: .75rem 1rem; background: var(--tinta); color: #fff; border-radius: var(--radio-chico); font-weight: 600;
}
.saltar:focus { top: .75rem; color: #fff; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
@media (min-width: 40rem) { :root { --margen: 1.5rem; } }
@media (min-width: 64rem) { :root { --margen: 2rem; } }

.icono {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* Retícula de visor: fondo de líneas finas, como la pantalla de una estación de lectura */
.fondo-reticula {
  background-color: var(--fondo);
  background-image:
    linear-gradient(rgb(27 29 31 / 4.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(27 29 31 / 4.5%) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

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

.barra-sup { background: var(--oscuro); color: #c9ccd0; font-size: .8125rem; }
.barra-sup__fila { display: flex; align-items: center; gap: 1.25rem; min-height: 2.25rem; overflow: hidden; }
.barra-sup__dato { display: none; align-items: center; gap: .45rem; white-space: nowrap; }
.barra-sup__dato .icono { width: 1rem; height: 1rem; color: var(--acento); }
.barra-sup__dato:first-child { display: inline-flex; }
.barra-sup a { color: #fff; text-decoration: none; }
.barra-sup a:hover { text-decoration: underline; }
.barra-sup :focus-visible { outline-color: #fff; }
.barra-sup__sistema { margin-left: auto; display: none; align-items: center; gap: .4rem; white-space: nowrap; }
.barra-sup__sistema a { color: #c9ccd0; }
.barra-sup__sistema .icono { width: .95rem; height: .95rem; }
@media (min-width: 48rem) { .barra-sup__dato, .barra-sup__sistema { display: inline-flex; } }

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: rgb(251 250 248 / 92%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
@supports (backdrop-filter: blur(8px)) {
  .encabezado { background: rgb(251 250 248 / 78%); backdrop-filter: saturate(1.5) blur(14px); }
}
.encabezado.compacto { border-bottom-color: var(--linea); box-shadow: 0 6px 20px -16px rgb(20 22 24 / 40%); }
.encabezado__fila { display: flex; align-items: center; gap: .75rem; min-height: 4.5rem; transition: min-height .3s var(--curva); }
.encabezado.compacto .encabezado__fila { min-height: 3.75rem; }
.marca { flex: none; display: inline-flex; align-items: center; margin-right: auto; padding: .25rem 0; border-radius: var(--radio-chico); }
.marca picture, .pie__marca picture { display: block; }
.marca img { width: 108px; height: auto; transition: width .3s var(--curva); }
.encabezado.compacto .marca img { width: 96px; }
.encabezado__acciones { display: flex; align-items: center; gap: .5rem; }

.boton-icono {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--linea-2); border-radius: 999px; background: #fff; color: var(--tinta); cursor: pointer;
  transition: border-color .2s ease, transform .2s var(--curva);
}
.boton-icono:hover { border-color: var(--tinta); color: var(--tinta); transform: translateY(-1px); }
.boton-icono .icono { width: 1.2rem; height: 1.2rem; }
.menu-boton .icono { transition: transform .3s var(--curva), opacity .2s ease; }
.menu-boton[aria-expanded="true"] .menu-abrir,
.menu-boton[aria-expanded="false"] .menu-cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-cerrar { animation: girar-entrada .3s var(--curva); }
@keyframes girar-entrada { from { transform: rotate(-90deg); opacity: 0; } }

.encabezado__acciones .encabezado__resultados { padding-inline: .9rem; white-space: nowrap; }
.encabezado__resultados .icono, .solo-escritorio, .encabezado__acciones .encabezado__agendar { display: none; }
@media (max-width: 22rem) { .encabezado__acciones .boton-llamar-movil { display: none; } }

.nav { display: none; }
.nav[data-abierto] {
  display: block; position: absolute; inset: 100% 0 auto;
  background: var(--fondo); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra-alta);
  animation: menu-baja .32s var(--curva);
}
@keyframes menu-baja { from { opacity: 0; transform: translateY(-10px); } }
.nav ul { list-style: none; margin: 0; padding: .5rem var(--margen) 1.25rem; }
.nav li + li { margin-top: 0; }
.nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: .95rem .25rem; border-bottom: 1px solid var(--linea);
  color: var(--tinta); font-weight: 600; text-decoration: none;
}
.nav[data-abierto] li { animation: menu-item .4s var(--curva) both; }
.nav[data-abierto] li:nth-child(2) { animation-delay: .04s; }
.nav[data-abierto] li:nth-child(3) { animation-delay: .08s; }
.nav[data-abierto] li:nth-child(4) { animation-delay: .12s; }
.nav[data-abierto] li:nth-child(5) { animation-delay: .16s; }
@keyframes menu-item { from { opacity: 0; transform: translateX(-12px); } }
.nav a:hover, .nav a[aria-current] { color: var(--acento-700); }
.nav li:last-child a { border-bottom: 0; }

@media (min-width: 62rem) {
  .marca img { width: 124px; }
  .encabezado.compacto .marca img { width: 108px; }
  .menu-boton, .boton-llamar-movil { display: none; }
  .nav, .nav[data-abierto] { display: block; position: static; box-shadow: none; border: 0; background: none; animation: none; }
  .nav[data-abierto] li { animation: none; }
  .nav ul { display: flex; gap: .15rem; padding: 0; }
  .nav a { position: relative; padding: .5rem .75rem; border: 0; font-size: .98rem; }
  .nav a::after {
    content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px;
    background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva);
  }
  .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
  .encabezado__resultados .icono { display: block; }
  .solo-escritorio { display: inline; }
  .solo-movil { display: none; }
  .encabezado__acciones .encabezado__agendar { display: inline-flex; }
}

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

.boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.35rem;
  border: 1.5px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .25s var(--curva), box-shadow .25s ease;
}
.boton:hover { text-decoration: none; transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(.98); }
.boton .icono-flecha { transition: transform .25s var(--curva); }
.boton:hover .icono-flecha { transform: translateX(4px); }
.boton--primario { background: var(--acento-700); color: #fff; box-shadow: 0 8px 20px -10px var(--acento-700); }
.boton--primario:hover { background: var(--acento-800); color: #fff; box-shadow: 0 12px 26px -10px var(--acento-700); }
.boton--secundario { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.boton--secundario:hover { background: var(--tinta); color: #fff; }
.boton--oscuro { background: var(--tinta); color: #fff; }
.boton--oscuro:hover { background: #000; color: #fff; box-shadow: 0 12px 24px -12px #000; }
.boton--claro { background: #fff; color: var(--tinta); }
.boton--claro:hover { background: var(--fondo-suave); color: var(--tinta); }
.boton--chico { min-height: 2.6rem; padding: .45rem 1rem; font-size: .95rem; }

/* Si el botón de WhatsApp está visible, «Llamar» pasa a segundo plano */
.cta-whatsapp:not([hidden]) + .cta-llamar { background: transparent; border-color: currentColor; color: var(--tinta); box-shadow: none; }
.cta-whatsapp:not([hidden]) + .cta-llamar:hover { background: var(--tinta); color: #fff; }

.botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.botones .boton { flex: 1 1 100%; }
@media (min-width: 30rem) { .botones .boton { flex: 0 1 auto; } }

.enlace-flecha { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; text-decoration: none; }
.enlace-flecha .icono { transition: transform .25s var(--curva); }
.enlace-flecha:hover .icono { transform: translateX(4px); }

/* ---------- Etiquetas y antetítulos ---------- */

.antetitulo {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
  color: var(--acento-700); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.antetitulo::before { content: ""; width: 1.75rem; height: 1.5px; background: currentColor; }
.entrada { font-size: 1.1875rem; color: var(--tinta-2); max-width: 36rem; }
.etiqueta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--linea-2);
  color: var(--gris); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.etiqueta--acento { border-color: transparent; background: var(--acento-50); color: var(--acento-700); }

/* ---------- Secciones ---------- */

.seccion { position: relative; padding-block: 4rem; }
.seccion--suave { background: var(--fondo-suave); }
.seccion--blanca { background: #fff; }
.seccion--oscura { background: var(--oscuro); color: #e7e9eb; }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion--oscura p { color: #b8bcc0; }
.seccion--oscura :focus-visible { outline-color: #fff; }
.seccion__cabeza { max-width: 44rem; margin-bottom: 2.5rem; }
.seccion__cabeza p:not(.antetitulo) { color: var(--tinta-2); font-size: 1.125rem; }
.seccion__cabeza--fila { display: grid; gap: 1rem; max-width: none; align-items: end; }
@media (min-width: 56rem) { .seccion__cabeza--fila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (min-width: 48rem) { .seccion { padding-block: 6rem; } }

/* ---------- Revelado al hacer scroll (solo con JavaScript) ---------- */

/* Corto a propósito: al bajar rápido nada debe quedar en blanco más de un instante (hallazgo m-1). */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .45s var(--curva), transform .45s var(--curva); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-img { clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--curva); }
.js .rv-img.in, .js .in .rv-img { clip-path: inset(0 0 0 0); }

/* ---------- Portada ---------- */

.portada { position: relative; overflow: hidden; padding-block: 2.5rem 0; }
.portada__fila { position: relative; display: grid; gap: 1rem; align-items: center; }
.portada__texto { position: relative; z-index: 2; }
.portada h1 { margin-bottom: 1.25rem; }
.portada h1 .linea { display: block; }
.portada .entrada { margin-bottom: 1.75rem; }
.portada .botones { margin-bottom: 1.75rem; }

.js .entra { opacity: 0; transform: translateY(18px); animation: entra .9s var(--curva) forwards; }
.js .entra-2 { animation-delay: .12s; }
.js .entra-3 { animation-delay: .24s; }
.js .entra-4 { animation-delay: .36s; }
.js .entra-5 { animation-delay: .48s; }
@keyframes entra { to { opacity: 1; transform: none; } }

.chips-modalidades { display: none; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.portada .botones .boton { flex: 1 1 0; padding-inline: 1rem; }
.portada .botones .corto { display: inline; }
.portada .botones .largo { display: none; }
@media (min-width: 40rem) {
  .chips-modalidades { display: flex; }
  .portada .botones .boton { flex: 0 1 auto; padding-inline: 1.35rem; }
  .portada .botones .corto { display: none; }
  .portada .botones .largo { display: inline; }
}
@media (max-width: 39.99rem) {
  .portada { padding-top: 1.75rem; }
  .portada .entrada { font-size: 1.05rem; margin-bottom: 1.25rem; }
  .portada .botones { flex-wrap: nowrap; margin-bottom: 1rem; }
  .portada .cta-whatsapp:not([hidden]) + .cta-llamar { display: none; }
  .portada__visual { width: min(100%, 22rem); }
}
.chips-modalidades li { margin: 0; }
.chips-modalidades a {
  display: inline-block; padding: .35rem .8rem; border: 1px solid var(--linea-2); border-radius: 999px;
  background: rgb(255 255 255 / 70%); color: var(--tinta-2); font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s var(--curva);
}
.chips-modalidades a:hover { border-color: var(--acento-700); color: var(--acento-700); transform: translateY(-2px); }

.portada__visual { position: relative; z-index: 1; width: min(100%, 34rem); margin-inline: auto; }
.portada__ondas {
  position: absolute; left: -6%; right: -6%; bottom: -1rem; z-index: 0;
  width: 112%; max-width: none; opacity: .45; pointer-events: none;
}
@media (min-width: 62rem) {
  .portada { padding-block: 3.5rem 2rem; min-height: calc(100svh - 6.75rem); display: flex; align-items: center; }
  .portada > .contenedor { width: 100%; }
  .portada__fila { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
  .portada__visual { width: 100%; }
  .portada__ondas { width: 62%; left: -14%; right: auto; bottom: -3.5rem; opacity: .7; }
}

/* Escáner animado (SVG en línea) */
.escaner { width: 100%; height: auto; overflow: visible; }
.escaner .trazo { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .escaner .trazo { stroke-dashoffset: 1; animation: dibuja 1.6s var(--curva) forwards; }
.js .escaner .trazo-2 { animation-delay: .25s; }
.js .escaner .trazo-3 { animation-delay: .5s; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
.js .escaner .aparece { opacity: 0; animation: aparece .9s ease forwards .9s; }
@keyframes aparece { to { opacity: 1; } }
.escaner .etq { font: 600 11px/1 var(--sans); letter-spacing: .14em; fill: var(--gris); }
.escaner .etq-claro { fill: #9aa0a6; }
.escaner .etq-acento { fill: var(--acento-700); }

.esc-corte .c-craneo { stroke: #e9ecef; stroke-width: 3.2; }
.esc-corte .c-corteza { stroke: #c4c9ce; stroke-width: 1.6; }
.esc-corte .c-giro { stroke: #8f979e; stroke-width: 1; stroke-opacity: .7; }
.esc-corte .c-ventriculo { stroke: #ff5a5c; stroke-width: 1.6; fill: rgb(234 36 38 / 22%); }

/* Ondas del logotipo que se dibujan al cargar */
.ondas-dibujo path { stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (min-width: 48rem) { .ondas-dibujo path { stroke-width: .38; } }
.js .ondas-dibujo path { stroke-dashoffset: 1; }
.js .ondas-dibujo.in path { animation: dibuja 2.2s var(--curva) forwards; }

/* ---------- Franja de datos ---------- */

.franja-datos { position: relative; z-index: 2; border-block: 1px solid var(--linea); background: #fff; }
.franja-datos__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dato { display: flex; gap: .75rem; padding: 1.1rem .75rem; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.dato:nth-child(2n) { border-right: 0; }
.dato .icono { margin-top: .2rem; color: var(--acento-700); }
.dato strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.1; margin-bottom: .2rem; }
.dato span { color: var(--gris); font-size: .9rem; line-height: 1.35; display: block; }
@media (min-width: 62rem) {
  .franja-datos__fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dato { padding: 1.5rem 1.25rem; border-bottom: 0; }
  .dato:nth-child(2n) { border-right: 1px solid var(--linea); }
  .dato:last-child { border-right: 0; }
}

/* ---------- Franja de resultados ---------- */

.franja-resultados { position: relative; overflow: hidden; background: var(--oscuro); color: #fff; }
.franja-resultados__fila { display: grid; gap: 1.25rem; align-items: center; padding-block: 2rem; }
.franja-resultados h2 { margin: 0 0 .35rem; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); color: #fff; }
.franja-resultados p { margin: 0; color: #b8bcc0; max-width: 44rem; }
.franja-resultados .boton--claro { justify-self: start; }
.franja-resultados :focus-visible { outline-color: #fff; }
.franja-resultados::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgb(234 36 38 / 16%), transparent);
  transform: translateX(-100%); pointer-events: none;
}
.js .franja-resultados.in::after { animation: barrido-x 4.5s ease-in-out infinite 1s; }
@keyframes barrido-x { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(340%); } }
@media (min-width: 56rem) { .franja-resultados__fila { grid-template-columns: minmax(0, 1fr) auto; padding-block: 2.25rem; } }

/* ---------- Tarjetas de estudio ---------- */

.estudios-rejilla { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.estudios-rejilla > li { margin: 0; }
@media (min-width: 40rem) { .estudios-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .estudios-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.tarjeta-estudio {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  transition: transform .35s var(--curva), box-shadow .35s ease, border-color .35s ease;
}
.tarjeta-estudio:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--linea-2); }
.tarjeta-estudio__foto { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fondo-suave); }
.tarjeta-estudio__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.tarjeta-estudio:hover .tarjeta-estudio__foto img { transform: scale(1.05); }
.tarjeta-estudio__foto::after {
  content: ""; position: absolute; inset: auto 0 0; height: 40%;
  background: linear-gradient(transparent, rgb(255 255 255 / 0%));
}
.numero {
  position: absolute; top: .85rem; left: .85rem; z-index: 1;
  padding: .2rem .55rem; border-radius: 999px; background: rgb(255 255 255 / 92%);
  font: 700 .75rem/1.2 var(--sans); letter-spacing: .08em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tarjeta-estudio__cuerpo { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: 1.25rem 1.35rem 1.35rem; }
.tarjeta-estudio__cuerpo h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.tarjeta-estudio__bajada { margin: 0; font-weight: 700; font-size: .95rem; color: var(--tinta-2); }
.tarjeta-estudio__texto { margin: .25rem 0 0; color: var(--gris); font-size: .98rem; }
.tarjeta-estudio__pie {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linea);
}
.agendar { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.agendar .icono { transition: transform .25s var(--curva); }
.agendar:hover .icono { transform: translateX(4px); }
.prep { margin-top: .85rem; border-top: 1px dashed var(--linea-2); }
.prep summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem 0 .25rem; cursor: pointer; list-style: none; font-weight: 700; font-size: .92rem; color: var(--tinta);
}
.prep summary::-webkit-details-marker { display: none; }
.prep summary::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--curva);
}
.prep[open] summary::after { transform: rotate(-135deg); }
.prep summary:hover { color: var(--acento-700); }
.prep ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--tinta-2); font-size: .93rem; }
.prep p { margin: .5rem 0 0; font-size: .9rem; }
.prep[open] ul { animation: entra-suave .35s var(--curva); }
@keyframes entra-suave { from { opacity: 0; transform: translateY(-6px); } }

/* Ilustración de marca cuando no hay foto */
.ilustracion { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(160deg, #fff 0%, var(--acento-50) 100%); }
.ilustracion__ondas { position: absolute; left: -12%; bottom: 8%; width: 124%; max-width: none; opacity: .5; }
.ilustracion__icono { position: relative; width: 5rem; height: 5rem; color: var(--acento-700); stroke-width: 1.1; transition: transform .9s var(--curva); }
.tarjeta-estudio:hover .ilustracion__icono { transform: scale(1.06); }

/* ---------- Mosaico de instalaciones ---------- */

.mosaico { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaico__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--radio); background: var(--fondo-suave); }
.mosaico__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.mosaico__item:hover img { transform: scale(1.04); }
.mosaico__item figcaption {
  position: absolute; left: .75rem; bottom: .75rem; padding: .3rem .7rem; border-radius: 999px;
  background: rgb(255 255 255 / 92%); font-size: .8rem; font-weight: 700; color: var(--tinta);
}
.mosaico__item--grande { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.mosaico__item--chico { aspect-ratio: 1; }
@media (min-width: 56rem) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 15rem; gap: 1rem; }
  .mosaico__item--grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .mosaico__item--chico { aspect-ratio: auto; }
  .mosaico__item--ancho { grid-column: span 2; }
}

/* ---------- Cifras ---------- */

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea-2); }
.cifra { margin: 0; padding: 1.5rem 1rem 1.5rem 0; border-bottom: 1px solid var(--linea-2); }
.cifra__numero { display: block; font-family: var(--serif); font-size: clamp(3rem, 2rem + 4vw, 4.75rem); line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cifra__numero small { font-size: .45em; color: var(--acento-700); margin-left: .1em; }
.cifra__texto { display: block; margin-top: .5rem; color: var(--gris); font-size: .95rem; max-width: 14rem; }
@media (min-width: 56rem) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cifra { border-bottom: 0; padding-right: 1.5rem; } }

/* ---------- Pasos ---------- */

.pasos-envoltura { position: relative; }
.pasos-linea { display: none; }
.pasos { position: relative; display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos > li { margin: 0; }
.paso { position: relative; counter-increment: paso; padding: 1.5rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 999px; background: var(--acento-700); color: #fff; font-weight: 700; font-size: .9rem;
  box-shadow: 0 0 0 6px var(--acento-50);
}
.paso h3 { margin-bottom: .4rem; }
.paso p { margin: 0; color: var(--gris); }
@media (min-width: 56rem) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .pasos-linea { display: block; position: absolute; top: 1.35rem; left: 1.4rem; right: 2rem; height: 2px; background: var(--acento); transform-origin: left; }
  .js .pasos-linea { transform: scaleX(0); transition: transform 1.6s var(--curva) .2s; }
  .js .pasos-envoltura.in .pasos-linea { transform: none; }
  .paso { background: transparent; border: 0; padding: 0 1rem 0 0; }
}

/* ---------- Chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.chips li {
  margin: 0; padding: .5rem 1rem; border: 1px solid var(--linea-2); border-radius: 999px; background: #fff;
  font-weight: 600; font-size: .95rem; transition: transform .2s var(--curva), border-color .2s ease;
}
.chips li:hover { transform: translateY(-2px); border-color: var(--acento-700); }
.chips li strong { color: var(--acento-700); }

/* ---------- Bloques ---------- */

.dividido { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56rem) {
  .dividido { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
  .dividido--centro { align-items: center; }
  .dividido--ancho-izq { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.5rem; }
ul.rejilla { list-style: none; margin: 0; padding: 0; }
ul.rejilla > li { margin: 0; }

.tarjeta {
  position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  transition: transform .35s var(--curva), box-shadow .35s ease;
}
.tarjeta h3 { margin: 0; }
.tarjeta p { margin: 0; color: var(--gris); }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.tarjeta__icono {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .5rem;
  border-radius: 14px; background: var(--acento-50); color: var(--acento-700);
}
.tarjeta__icono .icono { width: 1.5rem; height: 1.5rem; }
.tarjeta__pie { margin-top: auto; padding-top: .75rem; }

/* Tarjeta con foto (médicos, Megamedica) */
.tarjeta-foto {
  position: relative; display: grid; overflow: hidden; border-radius: var(--radio); background: var(--oscuro); color: #fff; min-height: 30rem;
  isolation: isolate;
}
.tarjeta-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); }
.tarjeta-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 22 24 / 0%) 0%, rgb(20 22 24 / 30%) 35%, rgb(20 22 24 / 92%) 72%); }
.tarjeta-foto h2 em { color: #ff8183; }
.tarjeta-foto--azul h2 em { color: #a9d0f5; }
.tarjeta-foto:hover img { transform: scale(1.05); }
.tarjeta-foto__cuerpo { align-self: end; padding: 1.75rem; }
.tarjeta-foto h2, .tarjeta-foto h3 { color: #fff; margin-bottom: .5rem; }
.tarjeta-foto h2 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); }
.tarjeta-foto p { color: #dfe2e5; margin-bottom: 1rem; max-width: 30rem; }
.tarjeta-foto a:not(.boton) { color: #fff; }
.tarjeta-foto :focus-visible { outline-color: #fff; }
.tarjeta-foto--azul::before { background: linear-gradient(180deg, rgb(21 74 125 / 0%) 0%, rgb(21 74 125 / 35%) 35%, rgb(14 44 76 / 94%) 72%); }
.tarjeta-foto .antetitulo { color: #fff; }

/* ---------- Notas ---------- */

.nota {
  display: flex; gap: .75rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--acento); border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background: var(--acento-50); color: var(--tinta);
}
.nota p:last-child { margin-bottom: 0; }
.nota .icono { margin-top: .2rem; color: var(--acento-700); }
.nota--neutra { border-left-color: var(--gris); background: var(--fondo-suave); }
.nota--neutra .icono { color: var(--gris); }

/* ---------- Preguntas ---------- */

.preguntas { border-top: 1px solid var(--linea-2); }
@media (min-width: 56rem) { .dividido > .seccion__cabeza:first-child { position: sticky; top: 7rem; } }
.pregunta { border-bottom: 1px solid var(--linea-2); }
.pregunta summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem .25rem; font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--linea-2); border-radius: 999px; font-weight: 400; font-size: 1.25rem; line-height: 1;
  transition: transform .3s var(--curva), background-color .2s ease, color .2s ease;
}
.pregunta[open] summary::after { transform: rotate(45deg); background: var(--tinta); color: #fff; border-color: var(--tinta); }
.pregunta summary:hover { color: var(--acento-700); }
.pregunta__cuerpo { padding: 0 .25rem 1.3rem; color: var(--tinta-2); }
.pregunta[open] .pregunta__cuerpo { animation: entra-suave .35s var(--curva); }
.pregunta__cuerpo > :last-child { margin-bottom: 0; }

/* ---------- Cabecera de páginas internas ---------- */

.cabecera-pagina { position: relative; overflow: hidden; padding-block: 3.5rem 3rem; border-bottom: 1px solid var(--linea); }
.cabecera-pagina .entrada { margin-bottom: 0; }
.cabecera-pagina__ondas { position: absolute; right: -8%; bottom: -10%; width: min(46rem, 90%); max-width: none; opacity: .5; pointer-events: none; }
.cabecera-pagina .contenedor { position: relative; }
@media (min-width: 48rem) { .cabecera-pagina { padding-block: 5rem 4rem; } }

/* ---------- Estudios (página) ---------- */

.indice-estudios { display: flex; gap: .5rem; margin: 0; padding: .75rem var(--margen); overflow-x: auto; list-style: none; scrollbar-width: thin; }
.indice-estudios li { margin: 0; flex: none; }
.indice-estudios a {
  display: inline-block; padding: .45rem .9rem; border: 1px solid var(--linea-2); border-radius: 999px; background: #fff;
  color: var(--tinta); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.indice-estudios a:hover { border-color: var(--acento-700); color: var(--acento-700); }
.barra-indice { position: sticky; top: 3.75rem; z-index: 10; background: rgb(251 250 248 / 94%); border-bottom: 1px solid var(--linea); }
.barra-indice .contenedor { padding-inline: 0; }

.modalidad { scroll-margin-top: 8.5rem; padding-block: 3.5rem; border-bottom: 1px solid var(--linea); }
.modalidad:last-of-type { border-bottom: 0; }
.modalidad__cabeza { display: grid; gap: 1.5rem; margin-bottom: 2rem; align-items: center; }
.modalidad__foto { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radio); background: var(--fondo-suave); }
.modalidad__foto img { width: 100%; height: 100%; object-fit: cover; }
.modalidad__cabeza h2 { margin-bottom: .5rem; }
.modalidad__cabeza p { color: var(--tinta-2); }
.modalidad__datos { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.modalidad__datos li { margin: 0; }
@media (min-width: 56rem) { .modalidad__cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; } }

.estudios-lista { columns: 2 14rem; column-gap: 2rem; margin-bottom: 1.5rem; padding-left: 1.1rem; }
.estudios-lista li { break-inside: avoid; }
.estudios-lista + .pregunta { border-top: 1px solid var(--linea-2); }

.preparacion { padding: 1.5rem; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.preparacion h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.0625rem; margin-bottom: .9rem; }
.preparacion h3 .icono { color: var(--acento-700); }
.lista-cotejo { list-style: none; padding: 0; margin: 0; }
.lista-cotejo li { position: relative; padding-left: 1.75rem; margin: 0 0 .65rem; }
.lista-cotejo li::before {
  content: ""; position: absolute; left: .2rem; top: .45em; width: .45rem; height: .8rem;
  border-right: 2px solid var(--acento-700); border-bottom: 2px solid var(--acento-700); transform: rotate(45deg);
}
.lista-cotejo + h2.h3 { margin-top: 1.5rem; }
.precio { display: inline-block; margin-left: .35rem; color: var(--acento-700); font-weight: 700; font-size: .95rem; }
.confirme { margin-top: 1rem; font-size: .95rem; color: var(--gris); }

/* ---------- Ficha de contacto ---------- */

.ficha { display: grid; gap: 1.25rem; margin: 0; }
.ficha div { display: flex; gap: .85rem; }
.ficha dt { font-weight: 700; margin-bottom: .1rem; }
.ficha dd { margin: 0; color: var(--tinta-2); }
.ficha .icono { margin-top: .2rem; color: var(--acento-700); width: 1.35rem; height: 1.35rem; }
.ficha a { color: inherit; font-weight: 600; }
.ficha a:hover { color: var(--acento-700); }
.horario { border-collapse: collapse; width: 100%; max-width: 22rem; }
.horario th, .horario td { padding: .3rem 0; text-align: left; border-bottom: 1px solid var(--linea); font-weight: 400; }
.horario th { padding-right: 1rem; color: var(--gris); }

.foto-marco { position: relative; margin: 0; overflow: hidden; border-radius: var(--radio); background: var(--fondo-suave); }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; }
.foto-marco figcaption { position: absolute; left: .75rem; bottom: .75rem; padding: .3rem .7rem; border-radius: 999px; background: rgb(255 255 255 / 92%); font-size: .8rem; font-weight: 700; }

/* ---------- Megamedica ---------- */

.marca-megamedica { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; color: var(--azul); font-weight: 700; letter-spacing: .08em; }
.marca-megamedica svg { width: 2.6rem; height: 2.6rem; }
.marca-megamedica small { display: block; color: var(--gris); font-weight: 600; letter-spacing: .02em; font-size: .82rem; }
.circuito { width: 100%; height: auto; overflow: visible; }
.circ-celula { fill: #d4373a; }
.circuito .trazo { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .circuito .trazo { stroke-dashoffset: 1; animation: dibuja 1.8s var(--curva) forwards; }
.js .circuito .trazo-2 { animation-delay: .3s; }
.js .circuito .aparece { opacity: 0; animation: aparece .9s ease forwards 1.1s; }
.circuito .etq { font: 600 11px/1 var(--sans); letter-spacing: .14em; fill: var(--gris); }
.collage { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; align-items: end; }
.collage .foto-marco:first-child { aspect-ratio: 3 / 4; }
.collage .foto-marco:last-child { aspect-ratio: 3 / 4; margin-bottom: -2rem; }

/* ---------- Páginas legales ---------- */

.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); }
.legal h2 { font-family: var(--sans); font-weight: 700; font-size: 1.375rem; margin-top: 2.5rem; letter-spacing: -.01em; }
.legal h3 { font-size: 1.125rem; margin-top: 1.5rem; }
.legal p, .legal li { color: #2c2f32; }
.borrador { margin-bottom: 2rem; padding: 1rem 1.25rem; border: 2px dashed var(--acento-700); border-radius: var(--radio-chico); background: var(--acento-50); font-weight: 600; }
.borrador p { margin: 0; }
.pendiente { padding: 0 .3rem; border-radius: 4px; background: #fff4c2; color: #4a3b00; }
.legal-indice { padding: 1rem 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: #fff; }
.legal-indice ol { margin: 0; }
.legal-meta { color: var(--tinta-2); font-size: .95rem; }
.legal-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 2rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .95rem; }
.legal th, .legal td { padding: .55rem .6rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.legal th { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.nota-legal { padding: .9rem 1.1rem; border-left: 3px solid var(--acento-700); background: #fff; color: var(--tinta-2); font-size: .95rem; }

/* Aviso simplificado y formato de consentimiento: se imprimen en recepción (Cmd/Ctrl+P o el botón) */
.formato fieldset { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--linea-2); border-radius: var(--radio-chico); background: #fff; }
.formato legend { padding: 0 .4rem; font-weight: 700; }
.formato fieldset > p:last-child, .formato fieldset > ul:last-child { margin-bottom: 0; }
.campos { display: grid; gap: .9rem 1.5rem; margin-bottom: .5rem; }
@media (min-width: 40rem) { .campos { grid-template-columns: 1fr 1fr; } .campo--ancho { grid-column: 1 / -1; } }
.campo { display: block; }
.campo-rotulo { display: block; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }
.campo-linea { display: block; min-height: 1.9rem; border-bottom: 1px solid var(--tinta); }
.campo-linea--corta { display: inline-block; width: min(18rem, 60%); min-height: 1.2rem; vertical-align: bottom; }
.casillas { list-style: none; margin: 0 0 1rem; padding: 0; }
.casillas li { display: flex; align-items: flex-start; gap: .65rem; }
.casillas li + li { margin-top: .5rem; }
.casilla { display: inline-block; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .25rem; border: 1.5px solid var(--tinta); border-radius: 3px; background: #fff; }
.firmas { display: grid; gap: 2.25rem 2rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .firmas { grid-template-columns: 1fr 1fr; } }
.firma { padding-top: 3.25rem; border-top: 1px solid var(--tinta); font-size: .9rem; line-height: 1.4; text-align: center; color: var(--tinta-2); }
.firma strong { display: block; color: var(--tinta); }
.folio { margin-top: 2rem; font-size: .8rem; color: var(--gris); }

/* ---------- Banda final ---------- */

.banda { position: relative; overflow: hidden; padding-block: 4.5rem; background: var(--oscuro); color: #fff; }
.banda h2 { color: #fff; }
.banda h2 em { color: #ff6b6d; }
.tema-megamedica .banda h2 em { color: #8cc0ef; }
.banda p { color: #b8bcc0; }
.banda .boton--secundario, .banda .cta-whatsapp:not([hidden]) + .cta-llamar { background: transparent; border-color: #fff; color: #fff; }
.banda .boton--secundario:hover, .banda .cta-whatsapp:not([hidden]) + .cta-llamar:hover { background: #fff; color: var(--tinta); }
.banda :focus-visible { outline-color: #fff; }
.banda__fila { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; }
.banda__ondas { position: absolute; right: -10%; top: 50%; width: min(60rem, 120%); max-width: none; transform: translateY(-50%); opacity: .35; pointer-events: none; }
@media (min-width: 56rem) { .banda__fila { grid-template-columns: minmax(0, 1fr) auto; } }

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

.pie { padding-block: 3.5rem 2rem; background: #202225; color: #d5d7d9; font-size: .95rem; }
.pie a { color: #fff; }
.pie a:hover { color: #fff; text-decoration-thickness: 2px; }
.pie :focus-visible { outline-color: #fff; }
.pie h2 { margin-bottom: .75rem; color: #fff; font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: 0; }
.pie__rejilla { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pie__rejilla { grid-template-columns: 1.2fr 1.2fr 1fr; } }
.pie p { margin-bottom: .5rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li + li { margin-top: .4rem; }
.pie__marca { display: inline-block; margin-bottom: 1.25rem; border-radius: var(--radio-chico); }
.pie__marca img { width: 136px; }
.pie .boton--claro, .pie .boton--claro:hover { color: var(--tinta); text-decoration: none; }
.pie .boton--claro { margin-bottom: .5rem; }
.pie__sistema { margin-top: 1rem !important; padding-top: .9rem; border-top: 1px solid #45484c; }
.pie__sistema a { display: inline-flex; align-items: center; gap: .4rem; color: #b9bcbf; font-size: .875rem; text-decoration: none; }
.pie__sistema a:hover { color: #fff; text-decoration: underline; }
.pie__sistema .icono { width: 1rem; height: 1rem; }
.pie__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #45484c; color: #b9bcbf; font-size: .875rem; }
.pie__legal p { margin-bottom: .35rem; }

/* ---------- Acciones flotantes ---------- */

.flotante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: none; align-items: center; gap: .55rem; padding: .85rem 1.15rem;
  border-radius: 999px; background: var(--acento-700); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 12px 30px -10px rgb(20 22 24 / 50%);
  transform: translateY(150%); transition: transform .45s var(--curva), background-color .2s ease;
}
.flotante:hover { color: #fff; background: var(--acento-800); }
.flotante .icono { width: 1.35rem; height: 1.35rem; }
.flotante::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--acento);
  animation: pulso 2.4s ease-out infinite; pointer-events: none;
}
@keyframes pulso { 0% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.35); } }
.mostrar-flotantes .flotante { transform: none; }

.barra-acciones {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 60;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .35rem;
  border-radius: 999px; background: rgb(20 22 24 / 94%); box-shadow: 0 14px 34px -12px rgb(20 22 24 / 60%);
  transform: translateY(160%); transition: transform .45s var(--curva);
}
.mostrar-flotantes .barra-acciones { transform: none; }
.barra-acciones a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  min-height: 3.1rem; border-radius: 999px; color: #fff; font-size: .75rem; font-weight: 700; text-decoration: none;
}
.barra-acciones a:first-child { background: var(--acento-700); }
.barra-acciones .icono { width: 1.2rem; height: 1.2rem; }
.barra-acciones :focus-visible { outline-color: #fff; outline-offset: -3px; }
@media (min-width: 62rem) {
  .barra-acciones { display: none; }
  .flotante { display: inline-flex; }
}
@media (max-width: 61.99rem) { body { padding-bottom: 5rem; } }

/* ---------- Página 404 ---------- */

.error-404 { padding-block: 5rem; }

/* ---------- Movimiento reducido e impresión ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .rv, .js .entra { opacity: 1; transform: none; }
  .js .rv-img { clip-path: none; }
  .js .escaner .trazo, .js .circuito .trazo, .js .ondas-dibujo path { stroke-dashoffset: 0; }
  .js .pasos-linea { transform: none; }
  .js .escaner .aparece, .js .circuito .aparece { opacity: 1; }
}

@media print {
  .barra-sup, .encabezado, .pie, .banda, .barra-indice, .botones, .saltar, .flotante, .barra-acciones { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; padding: 0; }
  .seccion, .modalidad { padding-block: 1rem; }
  .preparacion { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  /* Páginas legales e impresos de recepción: hoja limpia, sin índice ni botones; se conservan los recuadros */
  .legal-indice, .legal-acciones { display: none !important; }
  .fondo-reticula { background: #fff; }
  .legal { max-width: none; }
  .legal h1 { font-size: 20pt; }
  .legal h2 { font-size: 13pt; margin-top: 1.25rem; }
  .legal p, .legal li, .legal td, .legal th { color: #000; font-size: 10pt; }
  .formato fieldset, .firmas, .nota-legal, .legal-indice { break-inside: avoid; }
  .formato fieldset { border-color: #000; }
  .campo-linea { border-bottom-color: #000; }
  .firmas { margin-top: 1.75rem; }
  .pendiente { outline: 1px solid #000; background: #fff; }
}

/* ---------- Portada de Megamedica ---------- */

.megamedica-portada {
  background-color: var(--azul-50);
  background-image:
    linear-gradient(rgb(27 94 158 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(27 94 158 / 7%) 1px, transparent 1px);
  background-size: 56px 56px;
}
.megamedica-portada .portada__visual { width: min(100%, 30rem); }
.circ-pulso { transform-box: fill-box; transform-origin: center; animation: pulso 2.4s ease-out infinite; }
.tema-megamedica .ondas-dibujo g { stroke: #3b82c4; }
.tema-megamedica .franja-resultados::after { background: linear-gradient(90deg, transparent, rgb(59 130 196 / 18%), transparent); }

/* =====================================================================
   Versión 3: página de entrada para las tres empresas, selector de empresa
   y tema del Centro de Imagen e Investigación (CII)
   ===================================================================== */

/* Colores del logotipo del CII: rojo #E01D25 (texto: #C8161E, 5.9:1) y gris #747879 */
.tema-cii {
  --acento: #e01d25;
  --acento-700: #c8161e;
  --acento-800: #a01218;
  --acento-50: #fbeeee;
  --cii-gris: #747879;
  --cii-carbon: #1f2023;
}

/* ---------- Desplegables (selector de empresa y acceso del personal) ---------- */

.desplegable { position: relative; }
.desplegable > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable .icono-abajo { width: .9rem; height: .9rem; transition: transform .25s var(--curva); }
.desplegable[open] .icono-abajo { transform: rotate(180deg); }
.desplegable > ul {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 90;
  min-width: 15rem; margin: 0; padding: .4rem; list-style: none;
  background: #fff; color: var(--tinta); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra-alta);
  animation: entra-suave .25s var(--curva);
}
.desplegable > ul li { margin: 0; }
.desplegable > ul a {
  display: flex; flex-direction: column; gap: .05rem; padding: .6rem .75rem; border-radius: 10px;
  color: var(--tinta); font-size: .92rem; font-weight: 600; text-decoration: none;
}
.desplegable > ul a small { color: var(--gris); font-weight: 400; font-size: .78rem; }
.desplegable > ul a:hover, .desplegable > ul a[aria-current] { background: var(--fondo-suave); color: var(--tinta); }
.desplegable > ul a[aria-current]::after { content: "Está aquí"; color: var(--acento-700); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.desplegable > ul a:focus-visible { outline-offset: -3px; }
.desplegable--derecha > ul { left: auto; right: 0; }

/* Selector de empresa en la barra superior de cada sitio */
.selector-empresa > summary {
  padding: .2rem .65rem .2rem .45rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px;
  color: #fff; font-weight: 600; font-size: .8rem;
}
.selector-empresa > summary:hover { border-color: rgb(255 255 255 / 55%); }
.selector-empresa > summary .icono { width: .95rem; height: .95rem; color: var(--acento); }
.tema-megamedica .selector-empresa > summary .icono:first-child { color: #8cc0ef; }
.barra-sup .selector-empresa ul a { color: var(--tinta); }
.barra-sup__fila { overflow: visible; }

/* ---------- Página de entrada ---------- */

.pagina-entrada { background: var(--oscuro); color: #fff; }
.pagina-entrada :focus-visible { outline-color: #fff; }
.entrada-barra {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.25rem; padding-inline: var(--margen);
  background: rgb(20 22 24 / 92%); border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.entrada-dominio { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.entrada-dominio img { width: 34px; height: auto; }
.entrada-dominio:hover { color: #fff; }
.acceso-personal > summary {
  padding: .4rem .8rem; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px;
  color: #d5d7d9; font-size: .85rem; font-weight: 600;
}
.acceso-personal > summary:hover { color: #fff; border-color: rgb(255 255 255 / 55%); }
.acceso-personal > summary .icono { width: 1rem; height: 1rem; }
.acceso-personal > ul { left: auto; right: 0; }

.paneles { display: flex; flex-direction: column; }
.panel {
  position: relative; display: flex; align-items: flex-end; min-height: 34svh; overflow: hidden;
  color: #fff; text-decoration: none; isolation: isolate;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.panel:hover, .panel:focus-visible { color: #fff; }
.panel:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: 0; }
.panel__foto {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--curva), filter .6s ease;
}
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(10 11 12 / 30%) 0%, rgb(10 11 12 / 58%) 42%, rgb(10 11 12 / 94%) 100%);
  transition: opacity .6s ease;
}
.panel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--panel-color, var(--rojo));
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva);
}
.panel--medimagen { --panel-color: var(--rojo); }
.panel--cii { --panel-color: #e01d25; }
.panel--megamedica { --panel-color: #3b82c4; }
.panel--medimagen .panel__foto { object-position: 70% 50%; }
.panel--cii .panel__foto { object-position: 40% 50%; }
.panel--megamedica .panel__foto { object-position: 50% 40%; }

.panel__contenido { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; width: 100%; padding: 1.5rem var(--margen) 1.6rem; }
.panel__logo { display: block; margin-bottom: .6rem; }
.panel__logo img { width: auto; height: 46px; }
.panel__logo--cii img { height: 58px; }
.panel__nombre { font-family: var(--serif); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.05; }
.panel__lugar { display: inline-flex; align-items: center; gap: .4rem; color: #d5d7d9; font-size: .92rem; }
.panel__lugar .icono { width: 1rem; height: 1rem; color: var(--panel-color); }
.panel__desc { max-width: 26rem; color: #c3c7cb; font-size: .95rem; }
.panel__entrar {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem;
  padding: .6rem 1.15rem; border: 1.5px solid rgb(255 255 255 / 70%); border-radius: 999px;
  font-weight: 700; transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.panel__entrar .icono { transition: transform .3s var(--curva); }
.panel:hover .panel__entrar, .panel:focus-visible .panel__entrar { background: #fff; border-color: #fff; color: var(--tinta); }
.panel:hover .panel__entrar .icono, .panel:focus-visible .panel__entrar .icono { transform: translateX(4px); }
.panel:hover::after, .panel:focus-visible::after { transform: scaleX(1); }
.panel:hover .panel__foto, .panel:focus-visible .panel__foto { transform: scale(1.05); }

/* Entrada animada: los paneles se descubren uno tras otro y la foto se asienta */
.js .panel { clip-path: inset(100% 0 0 0); animation: panel-entra 1s var(--curva) forwards; }
.js .panel:nth-child(3) { animation-delay: .12s; }
.js .panel:nth-child(4) { animation-delay: .24s; }
@keyframes panel-entra { to { clip-path: inset(0 0 0 0); } }
.js .panel__foto { animation: foto-asienta 2.4s var(--curva) both; }
@keyframes foto-asienta { from { transform: scale(1.14); } }
.js .panel__contenido > * { opacity: 0; transform: translateY(14px); animation: entra .7s var(--curva) forwards; }
.js .panel__contenido > :nth-child(1) { animation-delay: .45s; }
.js .panel__contenido > :nth-child(2) { animation-delay: .55s; }
.js .panel__contenido > :nth-child(3) { animation-delay: .62s; }
.js .panel__contenido > :nth-child(4) { animation-delay: .69s; }
.js .panel__contenido > :nth-child(5) { animation-delay: .76s; }

.resultados-entrada {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 30;
  display: flex; align-items: center; gap: 1rem; padding: .5rem .5rem .5rem 1rem;
  border-radius: 999px; background: #fff; color: var(--tinta); box-shadow: 0 16px 40px -14px rgb(0 0 0 / 70%);
}
.resultados-entrada :focus-visible { outline-color: var(--foco); }
.resultados-entrada__texto { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; }
.resultados-entrada__icono { display: none; }
.resultados-entrada h2 { margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--tinta); }
.resultados-entrada p { display: none; margin: 0; color: var(--gris); font-size: .95rem; }
.resultados-entrada__boton { flex: none; background: var(--tinta); color: #fff; }
.resultados-entrada__boton:hover { background: #000; color: #fff; }
.entrada-pie { padding: 1.5rem var(--margen) 6.5rem; color: #9aa0a6; font-size: .8rem; text-align: center; }
.entrada-pie p { margin: 0 0 .35rem; }
.entrada-pie a { color: #d5d7d9; }

@media (min-width: 56rem) {
  .pagina-entrada { display: flex; flex-direction: column; min-height: 100svh; }
  .paneles { flex: 1; flex-direction: row; min-height: 34rem; }
  .panel {
    flex: 1 1 0; min-height: 0; border-bottom: 0; border-right: 1px solid rgb(255 255 255 / 10%);
    transition: flex-grow .8s var(--curva);
  }
  .panel:last-child { border-right: 0; }
  .panel:hover, .panel:focus-visible { flex-grow: 1.55; }
  .paneles:hover .panel:not(:hover) .panel__foto { filter: saturate(.55) brightness(.6); }
  .panel__contenido { padding: 2.5rem clamp(1.5rem, 3vw, 3rem) 3rem; }
  .panel__logo img { height: 56px; }
  .panel__logo--cii img { height: 72px; }
  .panel__desc { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--curva), opacity .5s ease; }
  .panel:hover .panel__desc, .panel:focus-visible .panel__desc { max-height: 6rem; opacity: 1; }
  .resultados-entrada {
    position: static; left: auto; right: auto; bottom: auto; border-radius: 0;
    padding: 1.4rem var(--margen); background: #fff; box-shadow: none; gap: 2rem;
  }
  .resultados-entrada > * { max-width: none; }
  .resultados-entrada__icono {
    display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 14px;
    background: var(--rojo-50); color: var(--rojo-700);
  }
  .resultados-entrada__icono .icono { width: 1.5rem; height: 1.5rem; }
  .resultados-entrada h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; }
  .resultados-entrada p { display: block; }
  .resultados-entrada__boton { min-height: 3.25rem; padding-inline: 1.6rem; }
  .entrada-pie { padding-bottom: 1.5rem; }
}
@media (min-width: 56rem) and (hover: none) {
  .panel__desc { max-height: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .panel { clip-path: none; }
  .js .panel__contenido > * { opacity: 1; transform: none; }
}

/* ---------- Centro de Imagen e Investigación ---------- */

.marca--cii img { width: 132px; }
@media (min-width: 62rem) { .marca--cii img { width: 150px; } .encabezado.compacto .marca--cii img { width: 128px; } }

.cii-portada {
  color: #fff;
  background-color: var(--cii-carbon, #1f2023);
  background-image:
    radial-gradient(circle at 78% 45%, rgb(224 29 37 / 16%), transparent 42%),
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
.cii-portada h1 { color: #fff; }
.cii-portada h1 em { color: #ff5a60; }
.cii-portada .antetitulo { color: #ff8a8e; }
.cii-portada .entrada { color: #d5d7d9; }
.cii-portada :focus-visible { outline-color: #fff; }
.cii-portada .chips-modalidades a { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 22%); color: #e7e9eb; }
.cii-portada .chips-modalidades a:hover { border-color: #fff; color: #fff; }
.cii-portada .boton--claro:hover { background: #e7e9eb; }

/* Figura del logotipo con anillos (como bobinas) y una línea de barrido */
.cii-visual { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin-inline: auto; }
.cii-anillos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cii-anillo { fill: none; stroke: rgb(255 255 255 / 22%); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.cii-anillo--1 { stroke-dasharray: 2 10; }
.cii-anillo--2 { stroke: rgb(224 29 37 / 55%); stroke-dasharray: 160 40 30 40; stroke-width: 2; }
.cii-anillo--3 { stroke-dasharray: 1 6; stroke: rgb(255 255 255 / 30%); }
.cii-pulso { fill: none; stroke: rgb(224 29 37 / 70%); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cii-figura { position: absolute; left: 50%; top: 50%; width: auto; height: 78%; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 40px rgb(0 0 0 / 45%)); }
/* La pista ocupa el alto de la figura; la línea va en su borde superior y la pista entera baja su propio alto. */
.cii-barrido { position: absolute; left: 24%; right: 24%; top: 11%; height: 78%; opacity: 0; pointer-events: none; }
.cii-barrido::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
  background: #ff3b42; box-shadow: 0 0 18px 4px rgb(224 29 37 / 55%);
}
.cii-barrido::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 70px;
  background: linear-gradient(180deg, transparent, rgb(224 29 37 / 20%));
}
.js .cii-anillo--1 { animation: gira 60s linear infinite; }
.js .cii-anillo--2 { animation: gira 22s linear infinite reverse; }
.js .cii-anillo--3 { animation: gira 40s linear infinite; }
.js .cii-pulso { animation: pulso-anillo 3.6s ease-out infinite 1s; }
.js .cii-pulso--2 { animation-delay: 2.8s; }
.js .cii-barrido { animation: barrido-figura 4s ease-in-out infinite 1.2s; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pulso-anillo { 0% { opacity: .9; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes barrido-figura { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }

.ilustracion--cii {
  background:
    repeating-radial-gradient(circle at 18% 120%, transparent 0 22px, rgb(116 120 121 / 16%) 22px 23px),
    linear-gradient(160deg, #fff 0%, var(--acento-50) 100%);
}

.cii-oscura { background: var(--cii-carbon, #1f2023); color: #e7e9eb; }
.cii-oscura h2 { color: #fff; }
.cii-oscura h2 em { color: #ff5a60; }
.cii-oscura .antetitulo { color: #ff8a8e; }
.cii-oscura p, .cii-oscura li { color: #d5d7d9; }
.cii-oscura a:not(.boton) { color: #fff; }
.cii-oscura .lista-cotejo li::before { border-color: #ff5a60; }
.cii-oscura :focus-visible { outline-color: #fff; }

.certificado {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding: 1.25rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
}
.certificado__imagen { display: block; overflow: hidden; border-radius: 8px; border: 1px solid var(--linea); transition: transform .3s var(--curva), box-shadow .3s ease; }
.certificado__imagen:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: var(--sombra); }
.certificado__imagen img { width: 100%; }
.certificado h3 { margin-bottom: .35rem; font-family: var(--serif); font-weight: 400; font-size: 1.75rem; }
.certificado p { margin: 0; color: var(--gris); font-size: .95rem; }
@media (max-width: 30rem) { .certificado { grid-template-columns: 1fr; } .certificado__imagen { max-width: 14rem; } }

@media (prefers-reduced-motion: reduce) {
  .cii-barrido, .cii-pulso { display: none; }
}

/* ---------- MegaMedica como sitio propio ---------- */

.marca--megamedica img { width: 140px; }
@media (min-width: 62rem) { .marca--megamedica img { width: 168px; } .encabezado.compacto .marca--megamedica img { width: 146px; } }
.encabezado__acciones .encabezado__agendar--siempre { display: inline-flex; }
.tema-megamedica .barra-acciones { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.tema-megamedica .pie__marca img { width: 182px; }
.tema-cii .pie__marca img { width: 173px; }
.cii-portada h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); }
@media (min-width: 62rem) { .marca--cii img { width: 178px; } .encabezado.compacto .marca--cii img { width: 150px; } }
.ficha + .botones { margin-top: 1.5rem; }

/* ---------- Fotos propias de MegaMedica (680 px de WhatsApp: se disimula la resolución) ---------- */

/* Panel de la entrada: duotono azul de la marca; al pasar el mouse recupera el color */
.panel--megamedica .panel__foto { filter: grayscale(.9) contrast(1.08) brightness(.95); }
.panel--megamedica::before {
  background: linear-gradient(180deg, rgb(27 94 158 / 42%) 0%, rgb(16 52 92 / 66%) 42%, rgb(8 20 36 / 94%) 100%);
}
.panel--megamedica:hover .panel__foto, .panel--megamedica:focus-visible .panel__foto { filter: grayscale(.15) contrast(1.02); }
.panel--megamedica .panel__foto { object-position: 45% 40%; }

.collage--horizontal { display: block; position: relative; padding: 0 0 4.5rem; }
.collage--horizontal .foto-marco:first-child { aspect-ratio: 680 / 450; margin: 0; }
.collage--horizontal .foto-marco:last-child {
  position: absolute; right: -.5rem; bottom: 0; width: 52%; aspect-ratio: 4 / 3; margin: 0;
  border: 6px solid var(--fondo); box-shadow: var(--sombra-alta);
}
.foto-marco--fachada { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
.foto-marco--panoramica { max-width: 52rem; aspect-ratio: 680 / 228; margin: 3rem auto 0; }

/* Panel del CII: la foto del folleto es de baja resolución; un duotono rojo y carbón lo disimula y al pasar el mouse
   recupera el color (provisional, hasta tener fotos propias) */
.panel--cii .panel__foto { filter: grayscale(.75) contrast(1.12) brightness(.9); }
.panel--cii::before {
  background: linear-gradient(180deg, rgb(120 16 22 / 38%) 0%, rgb(40 14 16 / 62%) 42%, rgb(12 10 11 / 94%) 100%);
}
.panel--cii:hover .panel__foto, .panel--cii:focus-visible .panel__foto { filter: grayscale(.1) contrast(1.05); }

/* Ilustraciones generadas con IA: siempre llevan su aviso visible */
.foto-marco--ia { aspect-ratio: 3 / 2; }
.foto-marco .aviso-ia {
  position: absolute; left: .75rem; bottom: .75rem; padding: .3rem .7rem; border-radius: 999px;
  background: rgb(20 22 24 / 78%); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.galeria-unidad { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.galeria-unidad .mosaico__item { aspect-ratio: 3 / 2; }
.como-funciona__cabeza { margin-bottom: 2.5rem; }
.como-funciona__cabeza .seccion__cabeza { margin-bottom: 0; }