/* === Variables === */
:root {
  --marfil:#F7F3EE;
  --blanco:#FFFFFF;
  --carbon:#1F1D1B;
  --piedra:#8A817A;
  --piedra-texto:#6B635C;
  /* Piedra más oscura para que el texto pequeño tenga contraste AA sobre marfil. */
  --ambar:#B07A45;
  --ambar-oscuro:#8C5E33;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --ancho:1200px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:130px
}
body {
  margin:0;
  background:var(--marfil);
  color:var(--carbon);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65
}
img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover
}
a {
  color:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--ambar-oscuro);
  outline-offset:4px
}
.skip-link {
  position:fixed;
  top:-60px;
  left:12px;
  z-index:20;
  background:var(--blanco);
  padding:10px 16px
}
.skip-link:focus {
  top:12px
}
/* === Encabezado === */
.barra-demo {
  min-height:30px;
  padding:5px 12px;
  background:var(--carbon);
  color:white;
  text-align:center;
  font-size:12px;
  letter-spacing:.035em
}
.encabezado {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:0 5vw;
  background:rgba(247,243,238,.97);
  border-bottom:1px solid rgba(31,29,27,.08)
}
.cabecera-fija {
  position:sticky;
  top:0;
  z-index:15;
}
.marca {
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--serif);
  font-weight:600;
  font-size:25px;
  line-height:1
}
.marca-punto {
  width:9px;
  height:9px;
  background:var(--ambar);
  transform:rotate(45deg)
}
.menu-boton {
  border:0;
  background:transparent;
  padding:12px;
  display:grid;
  font-size:12px;
  gap:6px
}
.menu-boton span {
  width:24px;
  height:1px;
  background:var(--carbon)
}
.navegacion {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  padding:20px 6vw 26px;
  background:var(--marfil);
  border-bottom:1px solid #ddd5cd;
  flex-direction:column;
  gap:14px
}
.navegacion.menu-abierto {
  display:flex
}
.navegacion>a:not(.boton) {
  text-decoration:none;
  font-size:14px
}
.boton {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:50px;
  padding:12px 22px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  transition:background-color .2s,color .2s
}
.boton-oscuro {
  background:var(--ambar-oscuro);
  color:#fff
}
.boton-oscuro:hover {
  background:var(--carbon)
}
.boton-claro {
  background:var(--blanco);
  color:var(--carbon)
}
.seccion {
  padding:76px 6vw
}
/* === Inicio === */
.hero {
  position:relative;
  max-width:1600px;
  margin:auto;
  padding-top:54px
}
.hero-texto {
  max-width:600px;
  padding-bottom:34px
}
.sobrelinea {
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--ambar-oscuro);
  font-size:12px;
  font-weight:600
}
.hero h1,.encabezado-seccion h2,.credencial h2,.ubicacion h2,.contacto h2 {
  font:500 clamp(44px,10vw,76px)/.98 var(--serif);
  letter-spacing:-.025em;
  margin:14px 0 20px
}
.bajada {
  max-width:450px;
  color:var(--piedra-texto);
  font-size:15px;
  margin:0 0 26px
}
.cedula-inicio {
  font-size:13px;
  color:var(--piedra-texto);
  margin-top:22px
}
.hero-foto {
  height:clamp(300px,78vw,620px);
  overflow:hidden;
  background:#e6dfd6
}
.hero-foto img {
  height:100%;
  aspect-ratio:1.3;
  object-fit:cover
}
.hero-rotulo {
  position:absolute;
  right:6vw;
  bottom:32px;
  background:var(--blanco);
  padding:11px 16px;
  font-size:12px;
  letter-spacing:.08em
}
.foto-respaldo {
  height:100%;
  min-height:220px;
  display:grid;
  place-items:center;
  background:#e6dfd6;
  color:var(--piedra-texto);
  font-size:12px;
  letter-spacing:.04em;
  text-align:center
}
/* === Confianza === */
.confianza {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 16px;
  padding-top:55px;
  padding-bottom:55px;
  background:var(--blanco)
}
.confianza-item {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  line-height:1.4
}
.confianza-item svg {
  width:30px;
  height:30px;
  flex:none;
  fill:none;
  stroke:var(--ambar-oscuro);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round
}
/* === Procedimientos === */
.seccion-procedimientos {
  max-width:1400px;
  margin:auto
}
.encabezado-seccion {
  max-width:600px;
  margin-bottom:38px
}
.encabezado-seccion h2,.credencial h2,.ubicacion h2,.contacto h2 {
  font-size:clamp(42px,7vw,62px);
  margin:10px 0
}
.encabezado-seccion>p:last-child {
  color:var(--piedra-texto);
  font-size:14px
}
.rejilla-procedimientos {
  display:grid;
  gap:14px
}
.tarjeta-procedimiento {
  background:var(--blanco);
  padding:25px 23px;
  border:1px solid rgba(31,29,27,.08)
}
.tarjeta-procedimiento h3,.linea-tiempo h3 {
  font:600 30px/1.05 var(--serif);
  margin:0 0 13px
}
.descripcion-procedimiento {
  font-size:13px;
  color:var(--piedra-texto);
  min-height:64px;
  margin:0 0 20px
}
.tiempos {
  margin:0 0 20px;
  border-top:1px solid #e8e1da
}
.tiempos div {
  padding:11px 0 0
}
.tiempos dt {
  color:var(--ambar-oscuro);
  font-size:12px;
  font-weight:600
}
.tiempos dd {
  margin:2px 0 0;
  font-size:12px
}
.enlace-procedimiento {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ambar-oscuro);
  font-size:12px;
  font-weight:600;
  text-decoration:none
}
.enlace-procedimiento svg {
  width:18px;
  height:18px
}
.nota-medica {
  margin:24px 0 0;
  color:var(--piedra-texto);
  font-size:12px
}
/* === La doctora === */
.doctora {
  display:grid;
  gap:32px;
  background:var(--blanco)
}
.doctora-foto {
  height:400px;
  background:#e6dfd6
}
.doctora-foto img {
  height:100%;
  aspect-ratio:4/5
}
.credencial {
  align-self:center;
  max-width:580px
}
.titulo-doctora {
  color:var(--piedra-texto);
  font-size:14px
}
.regla {
  height:1px;
  background:#dfd6ce;
  margin:23px 0
}
.formacion {
  padding-left:18px;
  color:var(--piedra-texto);
  font-size:13px
}
.credencial>p:not(.sobrelinea) {
  font-size:13px
}
.cedulas {
  display:grid;
  gap:13px;
  margin:20px 0
}
.cedulas dt {
  font-size:13px;
  color:var(--piedra-texto)
}
.cedulas dd {
  margin:0;
  font-size:13px
}
.certificacion {
  padding-left:14px;
  border-left:2px solid var(--ambar);
  color:var(--piedra-texto)
}
/* === Proceso === */
.proceso {
  max-width:1400px;
  margin:auto
}
.proceso-fotos {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:28px 0 48px
}
.proceso-fotos img {
  height:180px;
  aspect-ratio:1;
  object-fit:cover
}
.linea-tiempo {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:28px
}
.linea-tiempo li {
  position:relative;
  padding:0 0 0 48px;
  border-left:1px solid #c9b6a3
}
.linea-tiempo li>span {
  position:absolute;
  left:-15px;
  top:0;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  background:var(--marfil);
  border:1px solid var(--ambar);
  color:var(--ambar-oscuro);
  font-size:12px
}
.linea-tiempo h3 {
  font-size:25px;
  margin-bottom:6px
}
.linea-tiempo p {
  font-size:12px;
  color:var(--piedra-texto);
  margin:0
}
/* === Preguntas frecuentes === */
.preguntas {
  background:#eee8e1
}
.lista-preguntas {
  max-width:850px
}
.pregunta {
  border-top:1px solid #d7cdc4
}
.pregunta:last-child {
  border-bottom:1px solid #d7cdc4
}
.pregunta summary {
  list-style:none;
  position:relative;
  padding:19px 34px 19px 0;
  cursor:pointer;
  font:600 24px/1.2 var(--serif)
}
.pregunta summary::-webkit-details-marker {
  display:none
}
.pregunta summary::after {
  content:'+';
  position:absolute;
  right:4px;
  top:17px;
  color:var(--ambar-oscuro);
  font:400 22px var(--sans)
}
.pregunta[open] summary::after {
  content:'−'
}
.pregunta p {
  max-width:700px;
  margin:0;
  padding:0 0 20px;
  color:var(--piedra-texto);
  font-size:13px
}
/* === Ubicación === */
.ubicacion {
  display:grid;
  gap:28px
}
.direccion {
  margin-top:28px
}
.ubicacion-info>p {
  font-size:14px
}
.horarios {
  margin-top:20px;
  max-width:430px;
  border-top:1px solid #ded5cc
}
.horarios div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #ded5cc;
  font-size:12px
}
.mapa {
  height:300px;
  background:#e6dfd6
}
.mapa iframe {
  width:100%;
  height:100%;
  border:0
}
.foto-pachuca {
  height:180px;
  aspect-ratio:2.4;
  object-fit:cover
}
/* === Contacto === */
.contacto {
  padding:10px 6vw 75px
}
.contacto-panel {
  background:var(--ambar-oscuro);
  color:#fff;
  padding:40px 27px
}
.contacto-panel .sobrelinea {
  color:var(--marfil)
}
.contacto-panel h2 {
  max-width:650px
}
.contacto-panel>p:not(.sobrelinea) {
  font-size:13px;
  color:#f4ede6
}
.contacto-panel .boton {
  margin-top:12px
}
.contacto-panel a:focus-visible,.pie a:focus-visible,.barra-demo a:focus-visible {
  outline-color:#fff
}
/* === Pie de página === */
.pie {
  padding:45px 6vw 20px;
  background:var(--carbon);
  color:#f8f5f1;
  font-size:12px
}
.pie-principal {
  display:grid;
  gap:28px;
  padding-bottom:30px
}
.marca-pie {
  color:#fff
}
.pie-principal p,.pie-legal p {
  margin:9px 0;
  color:#e1dbd5
}
.pie-legal a {
  display:inline-block;
  margin-bottom:7px;
  color:#fff
}
.pie-final {
  border-top:1px solid #514b46;
  padding-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#e1dbd5
}
.pie-final a {
  color:#fff
}
.whatsapp-flotante {
  position:fixed;
  z-index:10;
  right:18px;
  bottom:18px;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #e3dbd3;
  color:var(--ambar-oscuro);
  box-shadow:0 2px 12px #1f1d1b20
}
.whatsapp-flotante svg {
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
/* === Aparición === */
.js .aparece {
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s ease,transform .55s ease
}
.js .aparece.visible,.revelar .aparece {
  opacity:1;
  transform:none
}
/* === Diseño responsivo === */
@media(min-width:360px) {
  .hero {
    padding-left:7vw;
    padding-right:7vw
  }
  .confianza {
    padding-left:7vw;
    padding-right:7vw
  }
}
@media(min-width:768px) {
  .encabezado {
    padding:0 5vw
  }
  .menu-boton {
    display:none
  }
  .navegacion {
    position:static;
    display:flex;
    align-items:center;
    flex-direction:row;
    gap:22px;
    padding:0;
    background:transparent;
    border:0
  }
  .navegacion>a:not(.boton) {
    font-size:12px
  }
  .boton-nav {
    min-height:40px;
    padding:9px 14px;
    font-size:12px
  }
  .hero {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    align-items:center;
    gap:30px;
    min-height:610px;
    padding-top:50px;
    padding-bottom:55px
  }
  .hero-texto {
    position:relative;
    z-index:1;
    padding:25px 0
  }
  .hero h1 {
    font-size:clamp(60px,7vw,86px)
  }
  .hero-foto {
    height:500px
  }
  .hero-rotulo {
    right:6vw;
    bottom:32px
  }
  .confianza {
    grid-template-columns:repeat(4,1fr);
    padding:43px 7vw
  }
  .confianza-item {
    justify-content:center
  }
  .seccion {
    padding:100px 7vw
  }
  .rejilla-procedimientos {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
  }
  .tarjeta-procedimiento {
    padding:28px
  }
  .doctora {
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:7vw
  }
  .doctora-foto {
    height:610px
  }
  .proceso-fotos {
    grid-template-columns:1.3fr 1fr;
    max-height:360px;
    overflow:hidden
  }
  .proceso-fotos img {
    height:360px
  }
  .linea-tiempo {
    grid-template-columns:repeat(4,1fr);
    gap:0
  }
  .linea-tiempo li {
    border-left:0;
    border-top:1px solid #c9b6a3;
    padding:25px 18px 0 0
  }
  .linea-tiempo li>span {
    left:0;
    top:-15px
  }
  .preguntas {
    padding-left:12vw;
    padding-right:12vw
  }
  .ubicacion {
    grid-template-columns:1fr 1.1fr;
    align-items:center
  }
  .mapa {
    height:360px
  }
  .foto-pachuca {
    grid-column:1/-1;
    height:220px
  }
  .contacto {
    padding-left:7vw;
    padding-right:7vw;
    padding-top:24px
  }
  .contacto-panel {
    padding:65px 7vw
  }
  .pie-principal {
    grid-template-columns:1fr 1fr
  }
  .pie-final {
    flex-direction:row;
    justify-content:space-between
  }
}
@media(min-width:1440px) {
  .encabezado {
    padding-left:max(5vw,calc((100vw - 1320px)/2));
    padding-right:max(5vw,calc((100vw - 1320px)/2))
  }
  .hero {
    max-width:1440px;
    grid-template-columns:.85fr 1.15fr
  }
  .hero-foto {
    height:610px
  }
  .seccion {
    padding-top:120px;
    padding-bottom:120px
  }
  html { scroll-padding-top: 130px; }
  .rejilla-procedimientos {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .confianza {
    padding-left:max(7vw,calc((100vw - 1200px)/2));
    padding-right:max(7vw,calc((100vw - 1200px)/2))
  }
  .pie {
    padding-left:max(7vw,calc((100vw - 1200px)/2));
    padding-right:max(7vw,calc((100vw - 1200px)/2))
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
  .js .aparece {
    opacity:1;
    transform:none
  }
}
/* === Aviso de privacidad === */
.privacidad {
  max-width:1000px;
  margin:0 auto
}
.privacidad .encabezado-seccion h1 {
  font:500 clamp(42px,7vw,62px)/1 var(--serif);
  margin:10px 0
}
.texto-privacidad {
  max-width:780px
}
.texto-privacidad h2 {
  margin:34px 0 8px;
  font:600 30px/1.1 var(--serif)
}
.texto-privacidad p {
  color:var(--piedra-texto);
  font-size:14px
}
.texto-privacidad strong {
  color:var(--carbon)
}

/* === Ajustes de fase 4 === */
:root {
  --espacio-seccion: clamp(54px, 7vw, 96px);
}
.seccion {
  padding-top: var(--espacio-seccion);
  padding-bottom: var(--espacio-seccion);
}
.encabezado {
  background: var(--marfil);
  border-bottom-color: rgba(31, 29, 27, 0.08);
}
.hero h1 {
  font-size: clamp(42px, 8vw, 70px);
  overflow-wrap: normal;
  word-break: normal;
}
.hero-foto {
  height: auto;
  aspect-ratio: 4 / 3;
}
.hero-foto img {
  height: 100%;
  aspect-ratio: auto;
  object-position: center;
}
.hero-rotulo {
  display: none;
}
.foto-pachuca {
  height: auto;
  aspect-ratio: 4 / 3;
  object-position: center 35%;
}
.doctora-foto {
  height: auto;
  max-height: 640px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.doctora-foto img {
  height: 100%;
  aspect-ratio: auto;
}
.credencial {
  align-self: center;
  background: var(--blanco);
  border: 1px solid #ded5cc;
  border-top: 3px solid var(--ambar);
  padding: clamp(24px, 4vw, 48px);
}
.cedulas {
  grid-template-columns: minmax(0, 1fr);
}
.mapa {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: #e6dfd6;
}
.mapa-respaldo {
  position: absolute;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(247, 243, 238, 0.92);
  color: var(--piedra-texto);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
.mapa-respaldo.oculto {
  display: none;
}
.mapa iframe {
  position: relative;
  z-index: 1;
  background: transparent;
}
.pie {
  padding-bottom: max(32px, calc(32px + env(safe-area-inset-bottom)));
}
@media (max-width: 1023px) {
  .menu-boton {
    display: grid;
  }
  .navegacion {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 20px 6vw 26px;
    background: var(--marfil);
    border-bottom: 1px solid #ddd5cd;
    flex-direction: column;
    gap: 14px;
  }
  .navegacion.menu-abierto {
    display: flex;
  }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    min-height: 0;
  }
  .hero-texto {
    max-width: 720px;
    padding: 0;
  }
  .hero-foto {
    width: 100%;
  }
  .foto-pachuca {
    grid-column: 1 / -1;
  }
  .preguntas {
    padding-left: 7vw;
    padding-right: 7vw;
  }
  .lista-preguntas {
    max-width: 850px;
    margin-left: 0;
  }
}
@media (min-width: 1024px) {
  .menu-boton {
    display: none;
  }
  .navegacion {
    position: static;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 22px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .navegacion > a:not(.boton) {
    font-size: 12px;
  }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 30px;
  }
  .hero-foto {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .foto-pachuca {
    aspect-ratio: 16 / 8;
  }
  .preguntas {
    padding-left: 7vw;
    padding-right: 7vw;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cedulas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .encabezado {
    padding-left: 16px;
    padding-right: 16px;
  }
  .marca {
    font-size: 23px;
  }
  .pie {
    padding-bottom: 100px;
  }
}
.ubicacion { padding-bottom:16px; }
.contacto { padding-top:12px; }
@media (min-width: 768px) {
  .ubicacion { padding-bottom:32px; }
  .contacto { padding-top:24px; }
}


/* Ajustes solicitados por el cliente */
:root {
  --ancho: 1200px;
  --margen: clamp(20px, 5vw, 48px);
  --espacio-seccion: clamp(40px, 5vw, 72px);
  --texto-secundario: #4F4842;
}
.contenedor {
  width: min(calc(100% - 2 * var(--margen)), var(--ancho));
  margin-inline: auto;
}
.seccion { padding: var(--espacio-seccion) 0; }
.cabecera-fija { background: var(--marfil); }
.encabezado { padding: 0; }
.hero { max-width: none; min-height: 0; padding: var(--espacio-seccion) 0; gap: clamp(20px, 3vw, 40px); }
.hero-texto { padding: 0; }
.hero-foto { min-width: 0; }
.hero-foto img { object-position: center; }
.hero h1 { margin-bottom: 14px; }
.bajada, .cedula-inicio, .encabezado-seccion > p:last-child,
.descripcion-procedimiento, .nota-medica, .titulo-doctora, .formacion,
.cedulas dt, .certificacion, .linea-tiempo p, .pregunta p,
.ubicacion-info > p, .texto-privacidad p { color: var(--texto-secundario); }
.seccion-procedimientos, .proceso { max-width: none; }
.encabezado-seccion { margin-bottom: 24px; }
.encabezado-seccion h2, .credencial h2, .ubicacion h2, .contacto h2 { margin: 8px 0 12px; }
.confianza { padding: 30px 0; gap: 16px; box-shadow: 0 0 0 100vmax #fff; }
.confianza-item { color: var(--texto-secundario); }
.tarjeta-procedimiento {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E4DCD3;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(31,29,27,.04), 0 8px 24px rgba(31,29,27,.04);
  transition: border-color .2s ease;
}
.tarjeta-procedimiento:hover { border-color: #CFC2B5; }
.descripcion-procedimiento { min-height: 0; }
.tiempos { margin-bottom: 18px; }
.tiempos dt { color: var(--ambar-oscuro); }
.enlace-procedimiento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 14px;
  border: 1px solid var(--ambar-oscuro);
  border-radius: 2px;
  color: var(--ambar-oscuro);
  font-size: 12px;
  line-height: 1.4;
  transition: background-color .2s ease, color .2s ease;
}
.enlace-procedimiento:hover { color: #fff; background: var(--ambar-oscuro); }
.enlace-procedimiento svg { width: 16px; height: 16px; flex: none; }
.doctora { gap: clamp(24px, 5vw, 64px); box-shadow: 0 0 0 100vmax #fff; }
.doctora-foto { height: auto; max-height: none; aspect-ratio: 4 / 5; }
.doctora-foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center top; }
.credencial { min-width: 0; }
.proceso-fotos { display: none; }
.linea-tiempo { gap: 18px; }
.linea-tiempo p { font-size: 13px; }
.preguntas { padding-inline: 0; box-shadow: 0 0 0 100vmax #eee8e1; }
.lista-preguntas { max-width: 850px; margin-left: 0; }
.ubicacion { padding-bottom: 0; }
.horarios { width: 100%; }
.horarios > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; color: var(--texto-secundario); }
.horarios > div > :last-child { white-space: nowrap; text-align: right; }
.foto-pachuca { width: 100%; height: auto; max-height: 320px; aspect-ratio: 21 / 6; object-fit: cover; object-position: center 40%; }
.contacto { padding: 28px 0 var(--espacio-seccion); }
.contacto-panel { padding: clamp(28px, 5vw, 56px); }
.pie { padding: 40px 0 max(90px, calc(90px + env(safe-area-inset-bottom))); box-shadow: 0 0 0 100vmax var(--carbon); }
.pie-principal, .pie-final { padding-inline: 0; }
.pie-principal p, .pie-legal p, .pie-final { color: #E1DBD5; }
.whatsapp-flotante {
  width: 56px; height: 56px; right: 16px; bottom: 16px;
  background: #8C5E33; border: 0; color: #fff;
  box-shadow: 0 3px 12px rgba(31,29,27,.22);
  transition: background-color .2s ease;
}
.whatsapp-flotante:hover { background: #6F4A28; }
.js .aparece { transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
@media (max-width: 767px) {
  .hero { padding-top: 40px; padding-bottom: 40px; }
  .confianza { padding-block: 32px; }
  .foto-pachuca { aspect-ratio: 16 / 7; }
  .whatsapp-flotante { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}
@media (min-width: 768px) {
  .hero { min-height: 0; padding-block: var(--espacio-seccion); }
  .seccion { padding-block: var(--espacio-seccion); }
  .confianza { padding-block: 30px; }
  .rejilla-procedimientos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linea-tiempo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .contacto { padding: 12px 0 var(--espacio-seccion); }
  .pie { padding-top: 40px; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .rejilla-procedimientos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .encabezado { padding: 0; }
  .seccion { padding-block: var(--espacio-seccion); }
  .confianza { padding: 30px 0; }
  .contacto { padding: 12px 0 var(--espacio-seccion); }
  .pie { padding: 40px 0 max(90px, calc(90px + env(safe-area-inset-bottom))); box-shadow: 0 0 0 100vmax var(--carbon); }
}
@media (prefers-reduced-motion: reduce) {
  .js .aparece { opacity: 1; transform: none; }
}

/* Los fondos de lado a lado (box-shadow) solo se extienden a los lados, nunca encima de otras secciones */
.confianza,
.doctora,
.preguntas,
.pie {
  clip-path: inset(0 -100vmax);
}