/* ============================================================
   Dr. Raul Sucari Cruz — Cirujano Dentista
   Juliaca, Puno

   Colores de marca:
     navy     #02164A
     amarillo #FFC401
   El amarillo va solo en acentos y botones, y siempre lleva
   texto navy encima (contraste AA, ver CLAUDE.md).
   ============================================================ */

:root {
  --navy:       #02164A;   /* oficial — vive sobre todo dentro de degradados */
  --navy-deep:  #060A16;   /* base de la página */
  --navy-soft:  #0C1730;   /* superficies: tarjetas, paneles */
  --navy-lift:  #152645;   /* hover */
  --gold:       #F9C536;   /* dorado de trabajo: textos, filetes, iconos */
  --gold-vivid: #FFC401;   /* oficial — acentos y degradados */
  --gold-soft:  #FFE07A;   /* luces altas */
  --gold-deep:  #C48C0E;   /* sombras del degradado */
  --paper:      #ECF1F9;
  --muted:      #93A0B5;   /* 7:1 sobre el fondo — texto de cuerpo AA */
  --whatsapp:   #25D366;

  --line:      rgba(249, 197, 54, 0.22);
  --line-soft: rgba(249, 197, 54, 0.10);

  /* Cinzel para el nombre, Outfit para títulos y botones,
     Manrope para el cuerpo y las versalitas espaciadas */
  /* Playfair Display y no Cinzel: Cinzel está dibujada con versalitas, o
     sea que las minúsculas le salen como mayúsculas pequeñas y "Dr. Raul
     Sucari Cruz" se leía todo en mayúsculas. Playfair tiene minúsculas
     de verdad y mantiene el aire serif elegante. */
  --font-brand: "Playfair Display", Georgia, serif;
  --font-head:  "Outfit", "Segoe UI", sans-serif;
  --font-body:  "Manrope", "Segoe UI", sans-serif;

  --container: 1340px;
  --header-h: 76px;
  --radius: 20px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* El color de fondo va aquí y no solo en body: el navegador tiñe con el
   fondo de html las zonas que no son la página — la barra de direcciones
   de Safari en iOS y el rebote del scroll. El degradado del body no sirve
   para eso (es una imagen, no un color), así que sin esta línea esas
   zonas salen blancas. */
html {
  /* La página es oscura siempre: así el navegador pinta en oscuro lo que
     dibuja él (barras, controles) y no mete un fondo claro por debajo. */
  color-scheme: dark;
  background: var(--navy-deep);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  scrollbar-color: #1b2743 var(--navy-deep);
}

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb {
  background: #1b2743;
  border-radius: 6px;
  border: 2px solid var(--navy-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

body {
  /* Solo color plano aquí. El degradado vive en la capa fija de abajo,
     no en `background-attachment: fixed`: iOS Safari no implementa bien
     esa propiedad y, al colapsar la barra de direcciones durante el
     scroll, dejaba sin pintar la franja que acababa de descubrir — la
     banda blanca que aparecía al bajar. */
  background-color: var(--navy-deep);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El fondo entero de la página: el degradado de base más la luz ambiental,
   en una sola capa fija al viewport y debajo de todo el contenido. Al ser
   continua, ninguna sección corta el degradado en su borde — no quedan
   costuras entre secciones.

   Es un elemento fijo, y no el `background-attachment: fixed` que había
   antes, porque esa propiedad está rota en iOS. Un elemento con
   `position: fixed` da el mismo resultado y lo pintan todos los
   navegadores. El `-1rem` de margen cubre la franja extra que aparece
   mientras la barra del navegador móvil se colapsa. */
body::before {
  content: "";
  position: fixed;
  inset: -1rem;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(920px 620px at 76% 6%, rgba(249, 197, 54, 0.09), transparent 60%),
    radial-gradient(1000px 720px at 6% 34%, rgba(2, 22, 74, 0.55), transparent 62%),
    radial-gradient(900px 620px at 94% 74%, rgba(2, 22, 74, 0.42), transparent 62%),
    linear-gradient(180deg, #070C1B 0%, #0A1228 38%, #081231 64%, #060A16 100%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
  width: min(var(--container), 100% - 2.8rem);
  margin-inline: auto;
}

::selection { background: var(--gold); color: var(--navy); }

.skip {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  border-radius: 10px;
  transition: top 0.2s ease;
}

.skip:focus { top: 1rem; }

/* ---------- Tipografía común ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section__head .eyebrow::after {
  content: "";
  width: 2.2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(270deg, transparent, var(--gold));
}

.section__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.section__lead {
  color: var(--muted);
  max-width: 48ch;
  margin-inline: auto;
}

.section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4.2rem;
}

.section { position: relative; padding: 7.5rem 0; }

/* Separador: un filete dorado que se desvanece hacia los extremos,
   en lugar de un cambio de color entre secciones */
.section + .section::before,
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), 100% - 2.8rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Dorado con texto navy: 11:1. Nunca al revés. */
.btn--gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 52%, var(--gold-deep));
  color: #0A1226;
  box-shadow: 0 14px 30px -18px rgba(249, 197, 54, 0.8);
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -18px rgba(249, 197, 54, 0.9);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--paper);
}

.btn--ghost:hover {
  border-color: var(--gold);
  background: rgba(249, 197, 54, 0.12);
  transform: translateY(-2px);
}

/* El pin va dorado aunque la etiqueta del botón sea clara: es el acento de
   la marca y ata el icono al filete dorado del propio botón. `flex-shrink`
   porque a 460 px los botones pasan a ancho completo y el icono no debe
   ceder espacio antes que el texto. */
.btn__pin {
  color: var(--gold);
  flex-shrink: 0;
}

.btn--sm { padding: 0.68rem 1.25rem; font-size: 0.88rem; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.02rem; }

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.header--scrolled {
  background: rgba(7, 11, 24, 0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft), 0 18px 40px -30px #000;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; }

.brand__logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

/* El tracking abierto lo pedía Cinzel, que iba toda en mayúsculas.
   Con minúsculas de verdad, separar las letras las desarma. */
.brand__name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.005em;
  color: var(--paper);
  white-space: nowrap;
}

.brand__tag {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 1.6rem; }

.nav__link {
  position: relative;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--paper);
  padding: 0.35rem 0;
  transition: color 0.25s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--gold);
  transition: width 0.28s ease;
}

.nav__link:hover { color: var(--gold); }
.nav__link:hover::after,
.nav__link--active::after { width: 100%; }
.nav__link--active { color: var(--gold); }

.nav__cta { margin-left: 0.4rem; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger--open span:nth-child(2) { opacity: 0; }
.burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: calc(var(--header-h) + 3.4rem) 0 2.2rem;
  overflow: hidden;
}

/* La columna de la foto es la más ancha de las dos: es lo que hace que
   la foto se vea grande. Al bajar la izquierda, vigilar que los dos
   botones del hero sigan entrando en una sola línea. */
.hero__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

/* A este tamaño una serif de alto contraste pide tracking negativo:
   con el espaciado por defecto las palabras se ven sueltas. */
.hero__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.1vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}

/* El apellido en dorado degradado */
.hero__title span {
  background: linear-gradient(120deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__credential {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}

.hero__credential::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
}

/* Las tres líneas de formación: son hechos verificables, no títulos */
.hero__formacion {
  margin: 1.1rem 0 1.6rem;
  padding-left: 1.1rem;
  max-width: 52ch;
  display: grid;
  gap: 0.65rem;
}

.hero__formacion li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.hero__formacion li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.hero__formacion strong { color: var(--paper); font-weight: 600; }

/* Lema de cierre del hero. Va en cursiva y con el mismo filete dorado
   que la línea de credencial, para que se lea como una firma y no como
   otro párrafo más de la lista de arriba. */
.hero__lema {
  position: relative;
  padding-left: 1.1rem;
  max-width: 46ch;
  margin-bottom: 2.1rem;
  color: var(--paper);
  font-size: 1.02rem;
  font-style: italic;
}

.hero__lema::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Retrato del hero ---------- */

.hero__stage {
  display: flex;
  justify-content: center;
  perspective: 1200px;
}

/* Sin tope de ancho: la foto ocupa toda su columna, y como va en 4:3
   su alto queda casi igual al de la columna de texto de al lado — o
   sea, va desde el "Juliaca · Puno" hasta los botones. Si se le pone
   un `max-width`, se encoge y deja de alinear con el texto. */
.retrato {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  animation: retratoFlota 9s ease-in-out infinite alternate;
}

@keyframes retratoFlota {
  from { transform: translateY(-9px); }
  to   { transform: translateY(12px); }
}

.retrato__inner {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Luz dorada detrás de la figura */
.retrato__halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateZ(-80px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(249, 197, 54, 0.26),
    rgba(249, 197, 54, 0.08) 46%,
    transparent 68%);
}

/* Marco rectangular (4:5), más alto que la foto cuadrada que hay
   dentro. object-fit: contain para que la foto se vea COMPLETA, sin
   recortar los brazos cruzados; el sobrante queda como banda arriba y
   abajo, rellena por el `background` de este mismo elemento. */
/* Marco 3:2 para la foto del consultorio, que es apaisada (16:9). Es más
   ancho que el 4:3 anterior, así que recorta menos la foto y, combinado
   con la columna más ancha, su alto sigue coincidiendo con el de la
   columna de texto: la foto va del "Juliaca · Puno" a los botones. */
.retrato__foto {
  position: relative;
  width: 100%;
  /* height: auto es obligatorio: el atributo height del <img> gana sobre
     aspect-ratio y estiraría la foto a su alto natural */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 34px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 70px -40px #000;
  transform: translateZ(30px);
}

/* Nada de velos degradados sobre la foto: dentro del contexto 3D Chrome
   los rasteriza en bandas y se ve una franja cruzando la cara. El marco
   en arco con su filete y su sombra ya la separa del fondo. */

/* ---------- Barra de confianza ---------- */

.trust {
  position: relative;
  padding: 1.4rem 0 0.4rem;
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-soft);
}

.trust__list li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--line-soft);
}

.trust__list strong {
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold);
}

.trust__list span { font-size: 0.84rem; color: var(--muted); }

/* ---------- Cómo trabajo ---------- */

/* `stretch` en vez de `center`: la foto ocupa exactamente el alto de la
   columna de al lado, del rótulo "Cómo trabajo" al final de la última
   tarjeta. Es lo que la mantiene simétrica aunque cambie el número de
   tarjetas o el largo de sus textos. */
.office__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.8rem;
  align-items: stretch;
}

.office__media { display: flex; }

/* Sin `aspect-ratio`: el alto lo pone la columna (100%) y el recorte lo
   resuelve `cover`. El retrato es cuadrado (1080×1080) y aquí se ve a
   una proporción de ~0,82, todavía por dentro de los codos; si se
   alarga mucho esta sección, revisar que no empiece a cortarlos. */
.office__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* Cada punto es su propio recuadro: leídos en fila corrida se apelmazaban */
.checks { display: grid; gap: 1rem; }

.checks li {
  position: relative;
  padding: 1.35rem 1.6rem 1.35rem 4rem;
  background: linear-gradient(165deg, rgba(18, 34, 70, 0.42), rgba(8, 14, 32, 0.24));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.97rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.checks li:hover { border-color: var(--line); }

.checks strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(249, 197, 54, 0.14);
  border: 1px solid var(--line);
}

/* El pico del visto: va calzado sobre el círculo de arriba */
.checks li::after {
  content: "";
  position: absolute;
  left: calc(1.5rem + 7px);
  top: calc(1.5rem + 7px);
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* ---------- Tratamientos ---------- */

/* La frase de entrada de la sección va en cursiva: enmarca lo que sigue
   en vez de leerse como un tratamiento más. */
.section__lead--lema { font-style: italic; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

/* Para un grupo con una sola tarjeta: a un tercio de ancho quedaría
   descolgada al lado de dos huecos vacíos. */
.cards--ancha { grid-template-columns: 1fr; }

/* Los tratamientos van agrupados por especialidad. El rótulo del grupo
   lleva un filete que se desvanece, como los separadores de sección. */
.grupo + .grupo { margin-top: 3.6rem; }

.grupo__titulo {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.8rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.grupo__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* La consulta es la puerta de entrada a todo lo demás: va sola y a lo
   ancho, antes de los grupos. */
.card--puerta {
  margin-bottom: 3.6rem;
  border-color: var(--line);
}

.card {
  position: relative;
  padding: 2.6rem 2.2rem;
  background: linear-gradient(165deg, rgba(18, 34, 70, 0.55), rgba(8, 14, 32, 0.35));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Filo dorado superior, como el borde del anillo */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover {
  transform: translateY(-7px);
  border-color: var(--line);
  box-shadow: 0 26px 50px -30px #000;
}

.card:hover::before { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.6rem;
  border-radius: 16px;
  background: rgba(249, 197, 54, 0.13);
  border: 1px solid var(--line-soft);
  color: var(--gold);
}

.card__icon svg { width: 30px; height: 30px; }

.card__title {
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 600;
  margin-bottom: 0.55rem;
  text-wrap: balance;
}

.card__text { color: var(--muted); font-size: 0.95rem; }

/* ---------- Ubicación ---------- */

.place__panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.1rem;
  align-items: stretch;
}

/* El fondo importa: el iframe va con loading="lazy", así que hasta que
   Google responde este bloque está vacío. Sin color propio se veía el
   blanco del hueco — un recuadro claro que saltaba al llegar scrolleando. */
.place__map {
  position: relative;
  min-height: 440px;
  background: var(--navy-soft);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(249, 197, 54, 0.07), 0 40px 70px -40px #000;
}

.place__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  border: 0;
}

.place__pin {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  background: rgba(8, 13, 28, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--paper);
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.place__pinDot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

.place__pinDot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: pinPulse 2.4s ease-out infinite;
}

@keyframes pinPulse {
  from { transform: scale(0.6); opacity: 1; }
  to   { transform: scale(1.8); opacity: 0; }
}

.place__info {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  padding: 2.6rem;
  background: linear-gradient(165deg, rgba(18, 34, 70, 0.55), rgba(8, 14, 32, 0.35));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.place__data { display: grid; gap: 1.8rem; }

.place__label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.place__value {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
}

/* Los enlaces van subrayados: el color no puede ser la única señal */
.place__value a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}

.place__value a:hover { color: var(--gold); text-decoration-color: var(--gold); }

.place__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
}

/* ---------- Franja de cita ---------- */

.cta {
  position: relative;
  padding: 5.5rem 0;
  background: radial-gradient(760px 340px at 50% 50%, rgba(249, 197, 54, 0.16), transparent 70%);
}

.cta__inner { text-align: center; }

.cta__title {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}

.cta__text {
  max-width: 46ch;
  margin: 0 auto 2rem;
  color: var(--muted);
}

/* ---------- Footer ---------- */

/* El hueco de abajo lo pide el botón flotante de WhatsApp: sin él tapa
   la línea legal y el enlace a la política de privacidad */
.footer {
  padding: 4rem 0 5.5rem;
  border-top: 1px solid var(--line-soft);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 0.95fr 1.1fr 1.25fr;
  gap: 3rem;
}

.footer__brand img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.footer__brand p { color: var(--muted); font-size: 0.92rem; }

.footer__brand strong {
  display: block;
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--paper);
  margin-bottom: 0.3rem;
}

.footer__label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__nav, .footer__contact { display: flex; flex-direction: column; gap: 0.8rem; }

.footer__nav a, .footer__contact a, .footer__contact span {
  color: var(--muted);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.footer__nav a, .footer__contact a {
  text-decoration: underline;
  text-decoration-color: rgba(147, 160, 181, 0.4);
  text-underline-offset: 4px;
}

.footer__nav a:hover, .footer__contact a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* Las cinco redes van siempre en una sola fila */
.socials { display: flex; gap: 0.8rem; }

.social {
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.social:hover {
  transform: translateY(-5px) scale(1.06);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}

.social__img, .social__mark svg { width: 100%; height: 100%; display: block; }

/* Mientras no estén subidos los logos oficiales a assets/redes/,
   se muestra el logo dibujado de cada red (ver assets/redes/LEEME.txt) */
.social__mark { display: none; }
.social--fallback .social__img { display: none; }
.social--fallback .social__mark { display: block; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--muted);
}

.footer__legal a {
  text-decoration: underline;
  text-decoration-color: rgba(147, 160, 181, 0.4);
  text-underline-offset: 4px;
}

.footer__legal a:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* ---------- Página legal (privacidad) ----------
   No carga main.js: la cabecera se queda arriba con `sticky`, sin
   depender de JavaScript, y no hay elementos `.reveal`. */

.legal-page .header {
  position: sticky;
  background: rgba(7, 11, 24, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
}

.legal { padding: 3.4rem 0 5rem; }

.legal__inner { max-width: 760px; }

.legal__title {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}

.legal__fecha {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 2rem;
}

.legal__intro {
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.6rem;
  background: linear-gradient(165deg, rgba(18, 34, 70, 0.5), rgba(8, 14, 32, 0.3));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--paper);
}

.legal h2 {
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 600;
  margin: 2.4rem 0 0.8rem;
  color: var(--paper);
}

.legal p { color: var(--muted); margin-bottom: 1rem; }
.legal strong { color: var(--paper); font-weight: 600; }

/* Solo los enlaces del texto: si el selector fuera `.legal a` le ganaría
   por especificidad a `.btn--gold` y dejaría el botón dorado con el
   texto dorado encima */
.legal p a,
.legal li a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal__lista { display: grid; gap: 0.55rem; margin-bottom: 1.2rem; }

.legal__lista li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--muted);
}

.legal__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.legal__datos {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.7rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(165deg, rgba(18, 34, 70, 0.35), rgba(8, 14, 32, 0.22));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.legal__datos li {
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--paper);
}

.legal__datos span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.legal__cierre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}

/* ---------- WhatsApp flotante ---------- */

/* El verde va oscurecido a propósito: el #25D366 de marca con texto
   blanco encima da 2:1 y no llega al mínimo AA (4.5:1). Así da 5.2:1
   y sigue leyéndose como WhatsApp. */
.whatsapp-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 1.35rem 0.62rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0F7D44, #0A5C31);
  color: #fff;
  box-shadow:
    0 0 0 7px rgba(37, 211, 102, 0.12),
    0 18px 38px -14px rgba(10, 92, 49, 0.75);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 9px rgba(37, 211, 102, 0.18),
    0 22px 44px -14px rgba(10, 92, 49, 0.85);
}

.whatsapp-float__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #06301A;
}

.whatsapp-float__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: var(--font-head);
  font-size: 0.78rem;
  color: #E8F5EC;
}

.whatsapp-float__text strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

/* ---------- Aparición al hacer scroll ---------- */

.reveal { opacity: 0; transform: translateY(24px); }

.reveal--visible {
  opacity: 1;
  transform: none;
  animation: riseIn 0.7s ease backwards;
  animation-delay: var(--rd, 0s);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
}

/* ---------- Accesibilidad ---------- */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal { opacity: 1; transform: none; }
  .reveal--visible { animation: none; }

  .retrato { animation: none; }
  .retrato__inner { transition: none; }

  .place__pinDot::after { animation: none; opacity: 0; }
}

/* ---------- Responsive ---------- */

/* Por debajo de este ancho, la columna de texto del hero se queda sin
   espacio para los dos botones en una línea y el segundo cae solo.
   Se emparejan las columnas: la foto sigue grande y los botones entran. */
@media (max-width: 1150px) {
  .hero__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .nav { gap: 1.2rem; }
  .nav__link { font-size: 0.88rem; }
}

@media (max-width: 980px) {
  .burger { display: flex; }

  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.8rem;
    background: rgba(8, 13, 28, 0.97);
    backdrop-filter: blur(16px);
    border-left: 1px solid var(--line-soft);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
  }

  .nav--open { transform: translateX(0); }

  /* ⚠️ Con el menú abierto el header tiene que soltar su `backdrop-filter`,
     y no es un detalle estético: esa propiedad lo convierte en el bloque
     contenedor de sus descendientes `position: fixed`, y el panel es uno.
     Su `bottom: 0` dejaba entonces de medirse contra el viewport y pasaba a
     medirse contra los 76 px del header, así que el menú aparecía cortado
     justo debajo de "Inicio". Solo pasaba al bajar, porque el filtro llega
     con `.header--scrolled`, a partir de 20 px de scroll.

     De paso arregla lo segundo que se veía: al filtrar, el header se vuelve
     "backdrop root" y el `backdrop-filter` del propio panel deja de
     difuminar bien lo que hay detrás — la foto del hero se transparentaba
     por encima del menú. */
  .menu-abierto .header--scrolled { backdrop-filter: none; }

  /* Aquí NO va un `overflow: hidden` que bloquee la página por detrás del
     panel: el comportamiento pedido es el contrario, que al desplazarse el
     menú se cierre solo. De eso se encarga `onScroll` en main.js, y con el
     scroll bloqueado no llegaría a dispararse nunca. */

  .nav__link {
    width: 100%;
    padding: 1rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav__link::after { display: none; }
  .nav__cta { margin: 1.6rem 0 0; }

  .hero { padding-top: calc(var(--header-h) + 2.2rem); }
  .hero__inner { grid-template-columns: 1fr; gap: 2.8rem; }
  .hero__stage { order: -1; }
  /* Más ancho que antes: arriba ahora va la foto apaisada del
     consultorio, y a 320px quedaba una franja demasiado baja. */
  .retrato { width: min(94%, 440px); }

  .trust__list { grid-template-columns: repeat(2, 1fr); }

  .office__inner { grid-template-columns: 1fr; gap: 3.2rem; }
  .office__media { order: -1; }

  /* En una sola columna no hay alto que igualar: sin esto, el
     `height: 100%` de la foto se queda sin referencia y colapsa. */
  .office__media img { height: auto; aspect-ratio: 9 / 10; }

  .cards { grid-template-columns: repeat(2, 1fr); }

  .place__panel { grid-template-columns: 1fr; }
  .place__map, .place__map iframe { min-height: 340px; }

  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
}

@media (max-width: 700px) {
  .section { padding: 5rem 0; }
  .cards { grid-template-columns: 1fr; }
  .trust__list strong { font-size: 1.1rem; }
  .place__info { padding: 1.7rem; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* En móvil la píldora estorba: se reduce al icono */
  .whatsapp-float {
    right: 1rem;
    bottom: 1rem;
    padding: 0.55rem;
    gap: 0;
  }

  .whatsapp-float__text { display: none; }
  .whatsapp-float__icon { width: 44px; height: 44px; }
}

@media (max-width: 460px) {
  .hero__actions .btn, .cta .btn { width: 100%; }
  .brand__name { font-size: 1rem; }
  .brand__tag { font-size: 0.54rem; letter-spacing: 0.22em; }
  .trust__list { grid-template-columns: 1fr; }
  .place__pin { font-size: 0.76rem; }
}