/* ==========================================================================
   Estilos por página. Cada bloque se añade con su FEAT al implementarse.
   ========================================================================== */

/* FEAT-001 · Cabecera de página provisional (se reemplaza al implementar FEAT-002 a FEAT-006) */
.page-intro {
  padding-block: var(--sp-9) var(--section-y);
}

.page-intro h1 {
  max-width: 14ch;
}

.page-intro__lead {
  max-width: 44ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--c-gris);
}

/* ==========================================================================
   FEAT-009 · Política de privacidad
   ========================================================================== */
.legal-cabecera {
  padding-block: var(--sp-9) var(--sp-8);
}

.legal-cabecera__fecha {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-gris);
}

.legal-resumen {
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--c-salvia);
  border-radius: var(--radius-sm);
  max-width: 62rem;
}

.legal-resumen__titulo {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-4);
}

.legal-resumen__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  list-style: none;
}

.legal-resumen__lista li {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-laton);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.legal {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding-bottom: var(--section-y);
}

.legal-indice {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  font-size: var(--fs-small);
}

.legal-indice__titulo {
  margin-bottom: var(--sp-3);
  font-weight: 600;
  color: var(--c-pino);
}

.legal-indice__lista {
  display: grid;
  gap: var(--sp-2);
  list-style: none;
  counter-reset: indice;
}

.legal-indice__lista li {
  counter-increment: indice;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
}

.legal-indice__lista li::before {
  content: counter(indice);
  font: 500 1.0625rem / 1.3 var(--f-serif);
  color: var(--c-laton);
  font-variant-numeric: lining-nums;
}

.legal-indice__lista a {
  color: var(--c-gris);
  transition: color var(--dur-fast) var(--ease);
}

.legal-indice__lista a:hover {
  color: var(--c-pino);
}

.legal-texto {
  max-width: 42rem;
}

.legal-seccion {
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--c-linea);
}

.legal-seccion:first-child {
  margin-top: 0;
}

/* El número de la sección cuelga en el margen: se cita por número */
.legal-seccion h2 {
  position: relative;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
}

.legal-num {
  position: absolute;
  right: calc(100% + var(--sp-5));
  top: -0.15em;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--c-laton);
  font-variant-numeric: lining-nums;
}

.legal-seccion p,
.legal-seccion ul,
.legal-seccion dl {
  margin-bottom: var(--sp-4);
  line-height: 1.7;
}

.legal-seccion ul {
  padding-left: 1.2rem;
}

.legal-seccion li {
  margin-bottom: var(--sp-2);
}

.legal-seccion li::marker {
  color: var(--c-laton);
}

.legal-seccion a {
  color: var(--c-pino);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-laton);
  text-underline-offset: 3px;
}

.legal-seccion strong {
  font-weight: 600;
  color: var(--c-pino);
}

.legal-terceros {
  display: grid;
  gap: var(--sp-4);
}

.legal-terceros dt {
  font-weight: 600;
  color: var(--c-pino);
}

.legal-terceros dd {
  color: var(--c-gris);
}

.legal-aviso {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-laton);
  font: italic 500 1.25rem / 1.4 var(--f-serif);
  color: var(--c-pino-2);
}

@media (max-width: 1023.98px) {
  .legal {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .legal-indice {
    position: static;
    padding: var(--sp-5);
    border: 1px solid var(--c-linea);
    border-radius: var(--radius-sm);
  }

  .legal-indice__lista {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }

  .legal-num {
    position: static;
    display: inline-block;
    margin-right: var(--sp-3);
    font-size: 1.1em;
    vertical-align: -0.05em;
  }

  .legal-resumen__lista {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 540px) {
  .legal-resumen {
    padding: var(--sp-5);
  }
}

/* FEAT-008 R7 · Página 404 */
.no-encontrada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

/* ==========================================================================
   FEAT-002 · Inicio
   ========================================================================== */

/* Hero: el retrato en arco con el dibujo de rodilla es el elemento memorable del sitio */
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-8);
  align-items: end;
  padding-top: var(--sp-7);
}

.hero h1 {
  max-width: 11ch;
}

.hero__lead {
  max-width: 32ch;
  margin: var(--sp-6) 0 var(--sp-6);
  font-size: var(--fs-lead);
  color: var(--c-gris);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
}

.hero__credencial {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--sp-4);
  max-width: 34rem;
  margin-top: var(--sp-8);
  padding-block: var(--sp-5) var(--sp-8);
  border-top: 1px solid var(--c-linea);
  font-size: var(--fs-small);
  color: var(--c-gris);
}

.hero__credencial svg {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--c-laton);
}

.hero__credencial strong {
  display: block;
  font-weight: 600;
  color: var(--c-tinta);
}

.hero__retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  overflow: hidden;
  background: var(--c-salvia);
}

.hero__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.hero__rodilla {
  position: absolute;
  right: -6%;
  bottom: 5%;
  width: 46%;
  color: var(--c-laton);
  pointer-events: none;
}

/* Única secuencia automática del sitio: el dibujo de la rodilla se traza al cargar */
@media (prefers-reduced-motion: no-preference) {
  .hero__rodilla [pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: trazar 1.8s var(--ease) 0.35s forwards;
  }

  .hero__rodilla [pathLength]:nth-child(2) { animation-delay: 0.7s; }
  .hero__rodilla [pathLength]:nth-child(3) { animation-delay: 0.9s; }
  .hero__rodilla [pathLength]:nth-child(4) { animation-delay: 1.05s; }
  .hero__rodilla [pathLength]:nth-child(6) { animation-delay: 1.4s; }

  .hero__rodilla-punteada {
    opacity: 0;
    animation: aparecer 0.6s var(--ease) 2s forwards;
  }
}

@keyframes trazar {
  to { stroke-dashoffset: 0; }
}

@keyframes aparecer {
  to { opacity: 1; }
}

/* Franja de confianza */
.confianza {
  border-block: 1px solid var(--c-linea);
}

.confianza__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.confianza__lista li {
  padding: var(--sp-6) var(--sp-6) var(--sp-6) 0;
}

.confianza__lista li + li {
  padding-left: var(--sp-6);
  border-left: 1px solid var(--c-linea);
}

.confianza__titulo {
  font-size: 1.5rem;
  margin-bottom: var(--sp-2);
}

.confianza__lista p {
  font-size: var(--fs-small);
  color: var(--c-gris);
}

/* FEAT-002 R3 · Cifras (CMP-07). Sin JS o con movimiento reducido se ven completas;
   con JS, la línea de latón se traza y el número cuenta al entrar en pantalla (main.js) */
.cifras {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--c-pino);
  color: var(--c-texto-oscuro);
}

.cifras__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  list-style: none;
}

.cifra {
  position: relative;
  padding-top: var(--sp-6);
}

.cifra::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--c-laton-claro);
  transform-origin: left;
}

.cifra::after {
  content: '';
  position: absolute;
  top: -0.25rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-laton-claro);
}

.cifra__numero {
  font: 500 clamp(3.75rem, 8vw, 6.75rem) / 0.9 var(--f-serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
  color: var(--c-hueso);
}

.cifra__mas {
  margin-right: 0.04em;
  font-weight: 400;
  color: var(--c-laton-claro);
}

.cifra__texto {
  max-width: 22ch;
  margin-top: var(--sp-4);
}

@media (prefers-reduced-motion: no-preference) {
  .cifras.is-animable .cifra::before {
    transform: scaleX(0);
    transition: transform 1s var(--ease);
  }

  .cifras.is-animable .cifra::after {
    transform: scale(0);
    transition: transform var(--dur) var(--ease);
  }

  .cifras.is-visible .cifra::before,
  .cifras.is-visible .cifra::after {
    transform: none;
  }

  .cifras .cifra:nth-child(2)::before,
  .cifras .cifra:nth-child(2)::after { transition-delay: 0.25s; }
  .cifras .cifra:nth-child(3)::before,
  .cifras .cifra:nth-child(3)::after { transition-delay: 0.5s; }
}

@media (max-width: 900px) {
  .cifras__lista {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .cifra {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    gap: var(--sp-5);
    align-items: end;
    padding-top: var(--sp-5);
  }

  .cifra__texto {
    margin-top: 0;
  }
}

/* Lo que tratamos */
.condiciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-8);
  list-style: none;
}

.condicion {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--c-linea);
}

.condicion svg {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--c-pino-2);
}

.condicion h3 {
  margin-bottom: var(--sp-2);
}

/* Los títulos con procedimiento asociado llevan subrayado latón */
.condicion h3 a {
  background: linear-gradient(var(--c-laton), var(--c-laton)) 0 100% / 100% 1px no-repeat;
  transition: color var(--dur-fast) var(--ease);
}

.condicion h3 a:hover {
  color: var(--c-laton);
}

.condicion p {
  color: var(--c-gris);
  font-size: var(--fs-small);
  line-height: 1.65;
}

/* Procedimientos destacados */
.destacados {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.destacado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: var(--sp-6);
}

.destacado + .destacado {
  padding-left: var(--sp-6);
  border-left: 1px solid var(--c-linea);
}

.destacado svg {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--c-laton);
}

.destacado h3 {
  margin: var(--sp-5) 0 var(--sp-3);
}

.destacado p {
  flex: 1;
  margin-bottom: var(--sp-5);
  color: var(--c-gris);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.destacados__todos {
  margin-top: var(--sp-8);
}

/* Sobre el especialista */
.especialista-home {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-9);
}

.especialista-home__texto p {
  max-width: 40ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
}

.especialista-home__texto .btn {
  margin-top: var(--sp-7);
}

.formacion > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-linea-oscura);
}

.formacion dt {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--c-laton-claro);
}

.formacion dd {
  font: 500 1.5rem / 1.25 var(--f-serif);
  color: var(--c-hueso);
}

.formacion__clinicas {
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--c-texto-oscuro-2);
}

@media (max-width: 900px) {
  .hero__grid,
  .condiciones,
  .especialista-home {
    grid-template-columns: 1fr;
  }

  .hero__grid {
    gap: var(--sp-7);
    padding-top: var(--sp-5);
  }

  .hero__credencial {
    margin-top: var(--sp-7);
    padding-bottom: 0;
  }

  .hero__retrato {
    width: min(88%, 26rem);
    justify-self: center;
  }

  .confianza__lista,
  .destacados {
    grid-template-columns: 1fr;
  }

  .confianza__lista li,
  .confianza__lista li + li {
    padding: var(--sp-5) 0;
    border-left: 0;
  }

  .confianza__lista li + li {
    border-top: 1px solid var(--c-linea);
  }

  .destacado,
  .destacado + .destacado {
    padding: var(--sp-6) 0 0;
    border-left: 0;
  }

  .destacado + .destacado {
    margin-top: var(--sp-6);
    border-top: 1px solid var(--c-linea);
  }

  .especialista-home {
    gap: var(--sp-7);
  }
}

@media (max-width: 480px) {
  .formacion > div {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }

  .hero__credencial {
    grid-template-columns: 1.75rem 1fr;
  }

  .hero__credencial svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* ==========================================================================
   FEAT-005 · Para pacientes
   ========================================================================== */

/* Videos guía (CMP-10 con placeholder hasta la sesión) */
.videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  list-style: none;
}

.video__marco {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-5);
}

.video__marco svg {
  width: 3.25rem;
  height: 3.25rem;
  max-width: none;
  padding: 0.9rem;
  border-radius: 50%;
  background: var(--c-hueso);
  color: var(--c-pino);
  opacity: 1;
}

.video h3 {
  margin-bottom: var(--sp-2);
}

.video p {
  font-size: var(--fs-small);
  color: var(--c-gris);
}

/* Antes y después */
.antes-despues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
}

.antes-despues h3 {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-laton);
}

/* Signos de alarma */
.alarma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6) var(--sp-9);
  align-items: start;
}

.alarma__cabecera svg {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--sp-5);
  color: var(--c-laton);
}

.alarma__cabecera h2 {
  max-width: 14ch;
}

.alarma__lista {
  list-style: none;
  font-size: var(--fs-lead);
  color: var(--c-hueso);
}

.alarma__lista li {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--c-linea-oscura);
}

.alarma__acciones {
  grid-column: 2;
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
}

.alarma__urgencia {
  font-size: var(--fs-small);
  color: var(--c-texto-oscuro);
}

.alarma__urgencia strong {
  font-weight: 600;
  color: var(--c-hueso);
}

/* Preguntas frecuentes: título fijo a la izquierda en escritorio */
.preguntas {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--sp-8);
  align-items: start;
}

.preguntas__cabecera {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

.preguntas__cabecera p {
  margin-top: var(--sp-5);
  color: var(--c-gris);
}

.preguntas__cabecera a,
.acordeon__respuesta a {
  color: var(--c-pino);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-laton);
  text-underline-offset: 3px;
}

/* Seguros: nombres en texto hasta tener permiso para usar logos (CNT-73) */
.seguros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  border-top: 1px solid var(--c-linea);
}

.seguros li {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-linea);
  font: 500 1.625rem / 1.2 var(--f-serif);
  color: var(--c-pino);
}

@media (max-width: 900px) {
  .videos {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .antes-despues,
  .alarma,
  .preguntas {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .alarma__acciones {
    grid-column: auto;
  }

  .preguntas__cabecera {
    position: static;
  }

  .seguros {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-5);
  }
}

/* ==========================================================================
   FEAT-004 · Procedimientos
   ========================================================================== */
.procedimiento {
  padding-block: var(--section-y);
  border-top: 1px solid var(--c-linea);
}

.procedimiento:nth-of-type(even) {
  background: var(--c-surface);
}

.procedimiento__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-9);
  align-items: start;
}

/* R4 · Diseño alterno: en los bloques pares la imagen pasa a la derecha */
.procedimiento:nth-of-type(even) .procedimiento__media {
  order: 2;
}

/* La imagen acompaña la lectura del texto largo */
.procedimiento__media {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

.procedimiento__foto {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
}

.procedimiento__foto svg {
  max-width: 9rem;
}

.procedimiento__texto {
  max-width: 38rem;
}

.procedimiento__texto h2 {
  margin-bottom: var(--sp-6);
}

.procedimiento__texto h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: 1.5rem;
}

.procedimiento__texto > p {
  line-height: 1.7;
}

.procedimiento__texto strong {
  font-weight: 600;
  color: var(--c-pino);
}

.procedimiento__nota {
  margin-top: calc(var(--sp-2) * -1);
  font-size: var(--fs-small);
  color: var(--c-gris);
}

.procedimiento__texto > .btn {
  margin-top: var(--sp-7);
}

/* Línea de recuperación: la secuencia real de la página, trazada en latón */
.recuperacion {
  position: relative;
  margin-top: var(--sp-5);
  list-style: none;
}

.recuperacion::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--c-laton);
}

.recuperacion li {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-6);
  color: var(--c-gris);
  line-height: 1.6;
}

.recuperacion li:last-child {
  padding-bottom: 0;
}

.recuperacion li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid var(--c-laton);
  border-radius: 50%;
  background: var(--c-hueso);
}

.procedimiento:nth-of-type(even) .recuperacion li::before {
  background: var(--c-surface);
}

.recuperacion li:last-child::before {
  background: var(--c-laton);
}

.recuperacion__momento {
  display: block;
  font: 500 1.25rem / 1.3 var(--f-serif);
  font-variant-numeric: lining-nums;
  color: var(--c-pino);
}

/* Bloques pendientes de confirmación del doctor: solo visibles en desarrollo */
.pendiente-confirmar {
  display: none;
}

[data-env='dev'] .pendiente-confirmar {
  display: revert;
  outline: 1px dashed var(--c-laton);
  outline-offset: -1px;
}

@media (max-width: 900px) {
  .procedimiento__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .procedimiento:nth-of-type(even) .procedimiento__media {
    order: 0;
  }

  .procedimiento__media {
    position: static;
  }

  .procedimiento__foto {
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   FEAT-006 · Contacto y agendamiento
   ========================================================================== */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding-bottom: var(--section-y);
}

/* El panel agrupa lo que el paciente completa */
.cita {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--c-surface);
  border: 1px solid var(--c-linea);
  border-radius: var(--radius);
}

.cita__obligatorios {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--c-gris);
}

.cita__resumen {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-error);
  background: var(--c-error-fondo);
  font-weight: 600;
  color: var(--c-error);
}

.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-6);
}

.campo {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.campo--ancho {
  grid-column: 1 / -1;
}

/* Etiqueta, control y ayuda comparten filas con el campo vecino: si una etiqueta ocupa dos líneas,
   los controles de la misma fila siguen alineados */
@supports (grid-template-rows: subgrid) {
  .campos .campo {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--sp-2);
  }

  .campos .campo > label {
    align-self: end;
  }
}

.campo label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-pino);
}

.campo__req {
  color: var(--c-error);
}

.campo__opcional {
  font-weight: 400;
  color: var(--c-gris);
}

.campo input:not([type='checkbox']),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(18 51 46 / 0.3);
  border-radius: var(--radius-sm);
  background: var(--c-hueso);
  font: inherit;
  color: var(--c-tinta);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.campo textarea {
  resize: vertical;
  min-height: 7rem;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--c-gris);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--c-laton);
  outline-offset: 1px;
  background: var(--c-surface);
}

.campo [aria-invalid='true'] {
  border-color: var(--c-error);
  background: var(--c-error-fondo);
}

.campo__error {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-error);
}

.campo__ayuda,
.campo__contador {
  font-size: 0.8125rem;
  color: var(--c-gris);
}

.campo__pie {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}

.campo__contador {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.campo--check {
  grid-template-columns: 1.25rem 1fr;
  column-gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-linea);
}

.campo--check input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--c-pino);
}

.campo--check label {
  font-weight: 400;
  color: var(--c-tinta);
  line-height: 1.55;
}

.campo--check label a {
  font-weight: 600;
  color: var(--c-pino);
  text-decoration: underline;
  text-decoration-color: var(--c-laton);
  text-underline-offset: 3px;
}

.campo--check .campo__error {
  grid-column: 2;
}

.cita__enviar {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  margin-top: var(--sp-6);
}

.cita__enviar p {
  max-width: 52ch;
  font-size: 0.8125rem;
  color: var(--c-gris);
}

/* Estado de éxito: muestra el mensaje exacto que se enviará */
.cita__exito:focus {
  outline: none;
}

.cita__exito-icono {
  width: 3rem;
  height: 3rem;
  padding: 0.6rem;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  background: var(--c-pino);
  color: var(--c-hueso);
}

.cita__exito h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}

.cita__exito > p {
  max-width: 48ch;
  color: var(--c-gris);
}

.cita__vista {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-salvia);
  border-radius: var(--radius-sm);
}

.cita__vista figcaption {
  margin-bottom: var(--sp-3);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-pino-2);
}

.cita__vista pre {
  font: 400 var(--fs-small) / 1.6 var(--f-sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--c-tinta);
}

.cita__exito-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
}

/* Información de contacto */
.contacto__info {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

.contacto__info > h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-5);
}

.consultorios {
  list-style: none;
  border-top: 1px solid var(--c-linea);
}

.consultorios li {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-linea);
}

.consultorios h3 {
  font-size: 1.375rem;
  margin-bottom: var(--sp-2);
}

.consultorios p {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-gris);
}

.contacto__datos {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.contacto__datos dt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-gris);
}

.contacto__datos dt svg {
  width: 1rem;
  height: 1rem;
  color: var(--c-laton);
}

.contacto__datos dd {
  margin-top: 0.15rem;
  padding-left: 1.5rem;
}

.contacto__datos a {
  font-weight: 600;
  color: var(--c-pino);
}

.contacto__datos a:hover {
  color: var(--c-laton);
}

/* Mapa */
.mapa {
  background: var(--c-surface);
  border-top: 1px solid var(--c-linea);
}

.mapa__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.mapa__selector {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid var(--c-linea);
  border-radius: var(--radius-pill);
  background: var(--c-hueso);
}

.mapa__opcion {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-pino);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.mapa__opcion[aria-pressed='true'] {
  background: var(--c-pino);
  color: var(--c-hueso);
}

.mapa__marco {
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-salvia);
}

.mapa__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1023.98px) {
  .contacto {
    grid-template-columns: 1fr;
  }

  .contacto__info {
    position: static;
  }
}

@media (max-width: 640px) {
  .campos {
    grid-template-columns: 1fr;
  }

  .cita {
    margin-inline: calc(var(--gutter) * -0.5);
  }

  .mapa__marco {
    aspect-ratio: 4 / 5;
  }

  .mapa__selector {
    width: 100%;
  }

  .mapa__opcion {
    flex: 1;
    padding: 0 0.75rem;
  }
}

/* ==========================================================================
   FEAT-003 · El especialista
   ========================================================================== */
.perfil__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-8);
  align-items: end;
  padding-top: var(--sp-7);
}

.perfil__especialidad {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--c-gris);
}

.perfil__frase {
  max-width: 30ch;
  margin: var(--sp-7) 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-laton);
  font: italic 500 clamp(1.375rem, 2.2vw, 1.75rem) / 1.35 var(--f-serif);
  color: var(--c-pino-2);
}

.perfil__texto {
  padding-bottom: var(--sp-8);
}

.perfil__retrato {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  overflow: hidden;
  background: var(--c-salvia);
}

.perfil__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.bio {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--sp-8);
}

.bio__texto {
  display: grid;
  gap: var(--sp-5);
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.credenciales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: start;
}

.formacion-lista {
  margin-top: var(--sp-7);
}

.formacion-lista li {
  padding-bottom: var(--sp-6);
}

.formacion-lista .recuperacion__momento {
  font-size: 1.5rem;
  margin-bottom: var(--sp-1);
}

.credenciales__apoyo {
  margin: var(--sp-4) 0 var(--sp-6);
  color: var(--c-gris);
}

.credenciales__lateral h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: 1.375rem;
}

.lista-simple {
  list-style: none;
  border-top: 1px solid var(--c-linea);
}

.lista-simple li {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--c-linea);
}

/* FEAT-003 R3 · Año de cada hito de la formación (pino: el latón no alcanza 4.5:1 en texto pequeño sobre hueso) */
.formacion-lista__anio {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
  color: var(--c-pino-2);
}

.formacion-lista__nota {
  max-width: 44ch;
  margin-top: var(--sp-5);
  padding-left: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--c-gris);
}

/* FEAT-003 R5 · Docencia e investigación: reutiliza la lista .formacion de Inicio sobre pino */
.academica > div {
  grid-template-columns: 12rem 1fr;
  padding-block: var(--sp-6);
}

.academica > div:last-child {
  border-bottom: 1px solid var(--c-linea-oscura);
}

.academica dd {
  font: 400 var(--fs-body) / var(--lh-body) var(--f-sans);
  color: var(--c-texto-oscuro);
}

.academica dd p,
.academica__sociedades abbr {
  max-width: 46ch;
  font: 500 1.375rem / 1.3 var(--f-serif);
  color: var(--c-hueso);
}

.academica dd p + p,
.academica__detalle + p {
  margin-top: var(--sp-5);
}

.academica__detalle {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-texto-oscuro-2);
}

.academica__sociedades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-7);
  list-style: none;
}

.academica__sociedades abbr {
  display: block;
  text-decoration: none;
}

@media (max-width: 900px) {
  .academica > div {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .academica__sociedades {
    grid-template-columns: 1fr;
  }
}

/* Galería: una foto protagonista y cuatro de apoyo */
.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  list-style: none;
}

.galeria__item {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}

.galeria__item--grande {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 900px) {
  .perfil__grid,
  .bio,
  .credenciales {
    grid-template-columns: 1fr;
  }

  .perfil__grid {
    gap: 0;
  }

  .perfil__texto {
    padding-bottom: var(--sp-7);
  }

  .perfil__retrato {
    width: min(88%, 26rem);
    justify-self: center;
  }

  .bio,
  .credenciales {
    gap: var(--sp-7);
  }

  .galeria {
    grid-template-columns: 1fr 1fr;
  }
}