/* ============================================================
   Dr. José Gregorio Ianniello
   Paleta y tipografías tomadas del manual de rebranding.
   Tema oscuro bloqueado en toda la página.
   Sistema de radios: 2px en controles, 4px en tarjetas y medios.
   ============================================================ */

:root {
  --negro-carbon: #0F0F10;
  --antracita:    #2A292A;
  --champagne:    #D0AB7B;
  --champagne-claro: #E8CFA6;
  --champagne-oscuro: #B98F52;
  --gris-perla:   #E7E6E6;
  --marfil:       #FAF7F2;

  --superficie:      #161617;
  --superficie-alta: #1D1C1E;
  --borde:           rgba(208, 171, 123, 0.18);
  --borde-suave:     rgba(231, 230, 230, 0.10);
  --error:           #E0857C;

  --radio: 2px;
  --radio-md: 4px;

  /* Italiana solo tiene un peso y trazo muy fino: va únicamente en
     titulares, nunca en texto corrido. Jost es variable (100-900). */
  --serif: "Italiana", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --contenedor: 1240px;
  --sp-seccion: clamp(5rem, 9vw, 8.5rem);
  --nav-alto: 72px;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro-carbon);
  color: var(--marfil);
  font-family: var(--sans);
  font-size: 1.03rem;
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.012em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* 'antialiased' adelgaza el trazo en macOS: a la sans le sienta bien, pero
   a una serif de trazo tan fino la deja anémica. Aquí se le devuelve el
   suavizado por defecto, que engorda. */
h1, h2, h3,
.nav__marca-nombre,
.galeria__titulo {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

html { overflow-x: clip; }

body.sin-scroll { overflow: hidden; }

img, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

/* Italiana pierde el trazo por debajo de unos 55px. Desde tablet hay ancho
   para sostener un piso alto; en el teléfono no, y ahí el titular debe
   poder achicarse o se sale de la pantalla. */
@media (min-width: 900px) {
  .hero__titulo { font-size: clamp(3.5rem, 5.2vw, 4.3rem); }
  .titulo-seccion { font-size: clamp(2.7rem, 4.2vw, 3.6rem); }
}

/* Italiana es de trazo finísimo: cuando el titular se achica, el suavizado
   de macOS lo adelgaza hasta dejarlo anémico. Una sombra del propio color,
   de fracción de píxel, le devuelve el cuerpo sin ensuciar la forma. */
/* Estos dos titulares son pequeños SIEMPRE (25-30px), así que llevan
   refuerzo sin condición de ancho. */
.bento__titulo,
.proc__titulo,
.galeria__titulo { text-shadow: 0 0 0.62px currentColor; }

/* Los grandes solo lo necesitan cuando el viewport los achica. */
@media (max-width: 1400px) {
  .hero__titulo,
  .titulo-seccion { text-shadow: 0 0 0.62px currentColor; }
}

/* En display el interletraje se cierra al crecer el cuerpo: lo que a 26px
   da aire, a 66px desarma la palabra. */
@media (min-width: 900px) {
  .hero__titulo { letter-spacing: 0.005em; }
  .titulo-seccion { letter-spacing: 0.015em; }
}

h1, h2, h3 {
  font-family: var(--serif);
  /* Italiana no tiene 300: pedirlo obliga al navegador a fingir un
     peso fino y el trazo se rompe. Se usa su peso real. */
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0.03em;
  margin: 0;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

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

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--champagne); color: var(--negro-carbon);
  padding: 0.7rem 1.1rem; border-radius: var(--radio);
  font-size: 0.82rem; font-weight: 600;
  transition: top 0.2s var(--curva);
}
.salto-contenido:focus { top: 12px; }

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

/* Trama diagonal de la marca, la misma del marcador de fotografía.
   Va sobre el color de cada sección, no encima del contenido, así que
   las tarjetas y las fotos la tapan y ella respira en los huecos. */
.seccion {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(208, 171, 123, 0.045) 0 14px,
    transparent 14px 28px
  );
}

.seccion { padding-block: var(--sp-seccion); }

/* ---------- Tipografía de secciones ---------- */

/* Micro-etiquetas en mayúsculas: un solo tamaño, peso e interletraje para
   todas, porque a 11px las diferencias de medio píxel solo desordenan. */
.antetitulo {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 1.1rem;
}

.titulo-seccion {
  text-wrap: balance;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  margin-bottom: 1.4rem;
  max-width: 20ch;
}

.texto-intro {
  color: var(--gris-perla);
  max-width: 60ch;
  font-size: 1.13rem;
  margin-bottom: 3.2rem;
}

.lista-marcada {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.85rem;
}
.lista-marcada li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--gris-perla);
  font-size: 0.95rem;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--champagne);
}

/* Un punto de la lista que no es una garantía sino una oferta: pesa más. */
.lista-marcada__destacado {
  margin-top: 0.4rem;
  padding: 1.1rem 1.2rem 1.1rem 2.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  /* Sólido: la trama no se cuela por detrás de la oferta. */
  background-color: #211F1D;
  color: var(--marfil);
}
/* Dentro de la caja el guion sobra: el recuadro ya separa el punto.
   El selector repite .lista-marcada li para ganarle a la regla base. */
.lista-marcada li.lista-marcada__destacado {
  padding-left: 1.2rem;
}
.lista-marcada li.lista-marcada__destacado::before { content: none; }

.nota-legal {
  margin-top: 2.4rem;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(231, 230, 230, 0.72);
  max-width: 70ch;
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.28s var(--curva), color 0.28s var(--curva),
              border-color 0.28s var(--curva), transform 0.12s var(--curva);
}
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--champagne);
  color: #14110C;
}
.boton--primario:hover { background: var(--champagne-claro); }

.boton--secundario {
  background: rgba(15, 15, 16, 0.55);
  color: var(--marfil);
  border-color: rgba(250, 247, 242, 0.42);
  backdrop-filter: blur(6px);
}
.boton--secundario:hover {
  border-color: var(--champagne);
  color: var(--champagne);
}

.boton--ancho { width: 100%; }

/* ---------- Intro animada con la firma ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--negro-carbon);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.7s var(--curva);
}
.intro[hidden] { display: none; }
.intro.cerrando { opacity: 0; pointer-events: none; }

/* Placa cinematográfica: polvo de oro en un haz de luz cálida. Va muy
   atenuada; su papel es que el fondo no sea negro plano. Si el video no
   carga, la escena se queda en negro y no se rompe nada. */
.intro__placa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  animation: placaEntra 1.6s var(--curva) 0.2s forwards;
}
@keyframes placaEntra { to { opacity: 0.62; } }

/* Viñeta: mantiene el centro limpio para que la firma respire. */
.intro__vineta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    transparent 0%, rgba(15, 15, 16, 0.55) 55%, rgba(15, 15, 16, 0.94) 100%);
}

/* Grano finísimo. Le quita el aspecto de render limpio de computadora. */
.intro__grano {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: granea 0.6s steps(3) infinite;
}
@keyframes granea {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

.intro__escena {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  width: min(84vw, 980px);
}

/* La firma se escribe: el borde de la máscara tiene el ancho de un plumín,
   así la tinta aparece en el orden en que se escribiría. Detrás corre una
   placa de polvo de oro; el negro pleno hacía ver la escena como plantilla. */
.firma {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 26px rgba(208, 171, 123, 0.12));
}

/* La máscara avanza con el borde difuminado, así la tinta aparece
   en lugar de que una cortina la destape. El ritmo imita el de una mano:
   arranca decidida, se demora en el centro y cierra suave. */
.firma__barrido {
  transform: translateX(-3120px);
  animation: escribir 3.1s cubic-bezier(0.42, 0.05, 0.28, 1) 0.45s forwards;
}

/* Cuando la firma termina de escribirse, el oro se asienta: sube un punto
   de luz y vuelve. Es el trazo el que respira, no un objeto que lo cruza. */
.firma {
  animation: asentar 2s ease-in-out 3.45s forwards;
}

.intro__regla {
  display: block;
  width: min(70%, 520px);
  height: 1px;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  background: linear-gradient(to right, transparent, var(--champagne), transparent);
  animation: extender 1.1s var(--curva) 3.7s forwards;
}

.intro__linea {
  margin: 0;
  font-size: clamp(0.6rem, 1.5vw, 0.74rem);
  font-weight: 400;
  letter-spacing: 0.26em;
  word-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--champagne);
  text-align: center;
  opacity: 0;
  animation: asomar 1.4s var(--curva) 4s forwards;
}

@keyframes escribir {
  to { transform: translateX(0); }
}
@keyframes asentar {
  0%   { filter: brightness(1) blur(0.4px) drop-shadow(0 0 26px rgba(208, 171, 123, 0.12)); }
  40%  { filter: brightness(1.22) blur(0) drop-shadow(0 0 26px rgba(208, 171, 123, 0.12)); }
  100% { filter: brightness(1.05) blur(0) drop-shadow(0 0 26px rgba(208, 171, 123, 0.12)); }
}
@keyframes extender { to { transform: scaleX(1); } }
@keyframes asomar {
  from { opacity: 0; letter-spacing: 0.62em; }
  to   { opacity: 1; letter-spacing: 0.42em; }
}

.intro__saltar {
  position: absolute;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  background: rgba(15, 15, 16, 0.72);
  color: var(--marfil);
  border: 1px solid rgba(250, 247, 242, 0.45);
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  transition: border-color 0.25s var(--curva), color 0.25s var(--curva);
}
.intro__saltar:hover { border-color: var(--champagne); color: var(--champagne); }

/* ---------- Navegación ---------- */

/* El header no es una barra sólida: es una píldora de vidrio que flota.
   El padding de este contenedor es lo que la hace flotar. */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 120;
  padding: clamp(0.8rem, 1.8vw, 1.3rem) clamp(1rem, 3vw, 2.5rem) 0;
  background: transparent;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* Tres zonas: marca a la izquierda, enlaces centrados, acciones a la
   derecha. Las columnas laterales miden igual para centrar los enlaces.
   Esta caja ES la píldora de vidrio. */
.nav__interior {
  position: relative;
  width: min(100%, var(--contenedor));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 16px;
  /* Vidrio líquido sobre medios oscuros. */
  background: rgba(15, 15, 16, 0.34);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10),
              0 12px 32px rgba(0, 0, 0, 0.34);
  transition: background-color 0.3s var(--curva), backdrop-filter 0.3s var(--curva);
}
/* Al pasar el hero, el contenido de abajo es más recargado: la píldora se
   oscurece un poco para que el texto siga legible. */
.nav.fija .nav__interior {
  background: rgba(11, 11, 12, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* Filo de luz en los bordes superior e inferior de la píldora. */
.nav__interior::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.10) 80%, rgba(255,255,255,0.30) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.nav__interior > * { position: relative; z-index: 1; }

.nav__marca {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
}
.nav__monograma { width: 36px; height: auto; }
.nav__marca-texto { display: flex; flex-direction: column; min-width: 0; }
.nav__marca-nombre {
  font-family: var(--serif);
  /* Italiana pierde el trazo por debajo de ~26px. El nombre es lo más
     visible de la barra, así que se le da tamaño y un refuerzo de trazo
     en lugar de dejarlo anémico. */
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-shadow: 0 0 0.6px currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__marca-linea {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* En escritorio el contenedor desaparece de la maquetación para que los
   enlaces y el botón ocupen sus propias columnas. En móvil vuelve a ser
   un bloque, porque ahí es el desplegable. */
.nav__menu {
  display: contents;
}

.nav__lista {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lista a {
  white-space: nowrap;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-perla);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}
.nav__lista a:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* Cambio de idioma. Comparte columna con el botón de consulta,
   discreto para no competir con la acción principal. */
/* Idioma y consulta comparten la columna derecha. */
.nav__acciones {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.idioma {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gris-perla);
  background: transparent;
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  padding: 0.62rem 1rem;
  cursor: pointer;
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}
.idioma:hover { color: var(--champagne); border-color: var(--champagne); }

.nav__cta { padding: 0.8rem 1.4rem; font-size: 0.7rem; }

.nav__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  cursor: pointer;
  padding: 0 11px;
}
.nav__barra {
  display: block;
  height: 1px;
  background: var(--marfil);
  transition: transform 0.3s var(--curva), opacity 0.2s var(--curva);
}
.nav__hamburguesa[aria-expanded="true"] .nav__barra:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] .nav__barra:nth-child(2) { opacity: 0; }
.nav__hamburguesa[aria-expanded="true"] .nav__barra:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

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

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-alto);
  /* El bloque de texto sube: el aire de abajo es lo que lo levanta. */
  padding-bottom: clamp(4rem, 25vh, 21rem);
  overflow: hidden;
}

/* La foto es apaisada y trae el quirófano entero: ocupa todo el ancho.
   Ya no hace falta la máscara que fundía el borde izquierdo, porque no
   hay borde: la sala llega hasta el filo del cuadro. */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
/* El video comparte encuadre exacto con la foto: si no carga o el equipo
   pide menos movimiento, abajo queda la foto y no se nota nada. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--curva);
}
.hero__video.visible { opacity: 1; }

.hero__fondo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(15,15,16,0.86) 0%, rgba(15,15,16,0.70) 26%, rgba(15,15,16,0.34) 48%, rgba(15,15,16,0.06) 72%, rgba(15,15,16,0) 88%),
    linear-gradient(to top, rgba(15,15,16,0.88) 1%, rgba(15,15,16,0.14) 22%, rgba(15,15,16,0) 52%, rgba(15,15,16,0.38) 100%);
}

/* El texto arranca en el mismo margen que el resto de las secciones. */
.hero__contenido {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--contenedor));
  margin-inline: auto;
}

.hero__titulo {
  text-wrap: balance;
  font-size: clamp(2.5rem, 4.6vw, 4.3rem);
  margin-bottom: 1.4rem;
  max-width: 25ch;
}

.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: var(--gris-perla);
  max-width: 46ch;
  margin-bottom: 2.4rem;
}

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

/* ---------- Áreas (bento) ---------- */

.areas { background-color: var(--negro-carbon); }

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: 1rem;
}

.bento__celda {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--borde-suave);
  background: var(--superficie);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7rem;
  transition: border-color 0.35s var(--curva), background-color 0.35s var(--curva);
}
.bento__celda:hover { border-color: var(--borde); background: var(--superficie-alta); }
.bento__celda p { color: var(--gris-perla); font-size: 0.93rem; margin: 0; }

.bento__celda--a { grid-column: span 2; grid-row: span 2; min-height: 440px; }
.bento__celda--b { grid-column: span 1; }
.bento__celda--c { grid-column: span 1; }
/* Celda con fotografía de fondo. El velo la apaga lo justo para que el
   título y el texto se lean encima sin recuadro de por medio. */
.celda-fondo { position: relative; overflow: hidden; }
.celda-fondo__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Remata el canto del encuadre contra el fondo de la celda. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  opacity: 0.95;
  pointer-events: none;
}
.celda-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,16,0.90) 18%, rgba(15,15,16,0.42) 100%);
  pointer-events: none;
}
.celda-fondo > *:not(.celda-fondo__foto) { position: relative; z-index: 1; }

.bento__titulo {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  margin: 0;
}

.celda-sello {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 132px; height: 132px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  color: var(--champagne);
  background: rgba(208, 171, 123, 0.05);
}
.celda-sello img { width: 70px; height: auto; opacity: 0.9; }

.icono {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  color: var(--champagne);
  border: 1px solid var(--borde);
  border-radius: 999px;
  margin-bottom: auto;
}
.icono svg { width: 20px; height: 20px; }

/* ---------- Procedimientos ---------- */

/* Negro liso: la lista es larga y la trama diagonal cansa la lectura. */
.procedimientos {
  background-color: var(--negro-carbon);
  background-image: none;
}

/* Columnas iguales. El reparto desigual de antes venía de cuando Péptidos
   tenía dos ítems; ahora tiene ocho y los rótulos son largos. */
.proc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.proc__grupo { min-width: 0; }

.proc__titulo {
  font-size: 1.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--borde);
  color: var(--champagne);
}

.proc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.05rem;
}
.proc__lista li { position: relative; }

/* Cursor de lupa sobre la sección. Solo se activa por JS y en equipos con
   mouse fino; en pantallas táctiles no aparece. */
.procedimientos.cursor-lupa,
.procedimientos.cursor-lupa .proc__item { cursor: none; }
.lupa-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  width: 42px; height: 42px;
  margin-left: -21px; margin-top: -21px;
  pointer-events: none;
  color: var(--champagne);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--curva), transform 0.18s var(--curva);
  will-change: left, top;
}
.lupa-cursor.visible { opacity: 1; transform: scale(1); }
.lupa-cursor.sobre { transform: scale(1.18); color: var(--champagne-claro); }
.lupa-cursor svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 6px rgba(208, 171, 123, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  .lupa-cursor { transition: opacity 0.2s; }
}

/* Cada procedimiento abre su galería, así que es un botón de verdad:
   alcanzable con el tabulador y con el rombo como viñeta. */
.proc__item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  /* Espacio a la derecha para la flecha que indica que se puede tocar. */
  padding: 0.35rem 2rem 0.35rem 1.5rem;
  border: 0;
  border-radius: var(--radio);
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--marfil);
  transition: color 0.25s var(--curva), background-color 0.25s var(--curva);
}
.proc__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95em;
  width: 7px; height: 7px;
  border: 1px solid var(--champagne);
  transform: rotate(45deg);
  transition: background-color 0.25s var(--curva);
}
/* Flecha ">" dibujada con bordes. Se ve siempre en tenue, así también en
   el teléfono queda claro que la fila es tocable. */
.proc__item::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--champagne);
  border-top: 1.5px solid var(--champagne);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.45;
  transition: opacity 0.25s var(--curva), right 0.25s var(--curva);
}
.proc__item:hover,
.proc__item:focus-visible {
  color: var(--champagne-claro);
  background-color: rgba(208, 171, 123, 0.06);
}
.proc__item:hover::before,
.proc__item:focus-visible::before { background-color: var(--champagne); }
.proc__item:hover::after,
.proc__item:focus-visible::after { opacity: 1; right: 2px; }

/* ---------- Péptidos: indicaciones, no procedimientos ---------- */

/* Estas filas no abren nada: son los cuadros que se tratan. Por eso no
   llevan flecha ni hover, para no prometer un gesto que no existe. La
   única puerta del grupo es el botón del catálogo, al final. */
.proc__nota {
  margin: -0.8rem 0 1.4rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(231, 230, 230, 0.62);
}

.proc__lista--indicaciones { gap: 0.8rem; }

.proc__indicacion {
  position: relative;
  display: block;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--marfil);
}
/* Mismo rombo que los procedimientos, pero sin relleno al pasar el
   cursor: es una viñeta, no un control. */
.proc__indicacion::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  border: 1px solid var(--champagne);
  transform: rotate(45deg);
}



/* ---------- Galería de un procedimiento ---------- */

.galeria {
  width: min(100% - 2rem, 1100px);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie);
  color: var(--marfil);
  overflow: hidden;
}
.galeria::backdrop { background: rgba(8, 8, 9, 0.86); }

.galeria__caja {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  gap: 1.4rem;
}
.galeria__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.galeria__titulo {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  margin: 0;
}
.galeria__cerrar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  background: none;
  color: var(--marfil);
  cursor: pointer;
  transition: border-color 0.25s var(--curva), color 0.25s var(--curva);
}
.galeria__cerrar:hover { border-color: var(--champagne); color: var(--champagne); }
.galeria__cerrar svg { width: 20px; height: 20px; }

.galeria__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  overflow-y: auto;
  padding-right: 0.3rem;
}
.galeria__rejilla img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--negro-carbon);
}

/* Mientras el doctor no cargue sus fotos, el hueco lo dice con claridad
   en lugar de mostrar imágenes rotas. */
.galeria__vacio {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 0.6rem;
  min-height: 190px;
  padding: 2rem;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  color: rgba(231, 230, 230, 0.7);
  font-size: 0.9rem;
  text-align: center;
}
.galeria__vacio img { width: 46px; height: auto; aspect-ratio: auto; opacity: 0.8; background: none; }

.galeria__nota {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(231, 230, 230, 0.6);
}

/* ---------- Nutrición ---------- */

/* El bloque entero, texto y foto, va sobre una cama de negro pleno:
   la trama diagonal respira alrededor y no por detrás de la lectura. */
.nutricion__grid {
  --pad: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding: var(--pad);
}
/* La cama va en una capa aparte para poder desvanecer sus bordes sin tocar
   el contenido: así no se marca el canto entre el negro y la trama. */
.nutricion__grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--negro-carbon);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.nutricion__grid > * { position: relative; z-index: 1; }
.nutricion__texto p { color: var(--gris-perla); }
/* La foto ocupa el lado derecho entero: se sale del acolchado por arriba,
   por abajo y por la derecha, y solo se desvanece hacia el texto. */
.nutricion__figura {
  position: relative;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  align-self: stretch;
  min-height: 620px;
  overflow: hidden;
  background-color: var(--negro-carbon);
}
/* El negro del estudio ya viene igualado al de la página en el propio
   archivo. El desvanecido hacia la izquierda es largo, de más de un tercio
   del ancho, para que no quede una línea donde termina la imagen. Los tres
   lados restantes llevan el mismo remate corto que la cama del bloque. */
.nutricion__figura img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 14%, rgba(0,0,0,0.55) 32%, #000 62%, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 14%, rgba(0,0,0,0.55) 32%, #000 62%, #000 calc(100% - 20px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Aviso legal de los péptidos. Vive dentro de la columna de nutrición,
   entre la lista y el botón. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin: 0 0 2rem;
  padding: 1.5rem 1.8rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  /* Color sólido a propósito: aquí la trama no debe verse por detrás.
     Es el mismo tono que daba el tinte champagne sobre la superficie. */
  background-color: #1F1D1C;
}
.aviso .icono { margin-bottom: 0; flex: 0 0 auto; }
.aviso p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gris-perla);
}

/* ---------- Doctor ---------- */

/* Negro limpio y sin trama: el retrato y su relato mandan solos. */
.doctor {
  background-color: var(--negro-carbon);
  background-image: none;
}

.doctor__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
/* Sin marco ni filete: la foto se funde con el negro de la página.
   Los bordes se desvanecen, así no hay un corte que delate el recuadro. */
.doctor__figura {
  position: relative;
  margin: 0;
  /* Retrato de cuerpo entero: el marco sigue la proporción de la foto
     para no cortar ni la cabeza ni los pies. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: transparent;
}
.doctor__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.doctor__texto p { color: var(--gris-perla); }
.doctor__texto .boton { margin-top: 1rem; }

/* ---------- Contacto ---------- */

.contacto { background-color: var(--superficie); }

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contacto__intro p { color: var(--gris-perla); }

/* Panel del formulario en vidrio: la trama diagonal de la sección se
   asoma apenas por detrás, igual que la píldora del header. */
.formulario {
  position: relative;
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: 18px;
  background: rgba(13, 13, 14, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08),
              0 20px 50px rgba(0, 0, 0, 0.4);
}
/* El filo de luz va DETRÁS del contenido (z-index:-1) en vez de forzar a
   cada campo a un nivel propio; así el desplegable de países puede subir
   por encima de los campos que tiene debajo. */
.formulario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%,
    rgba(255,255,255,0.06) 78%, rgba(255,255,255,0.22) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.campo { display: grid; gap: 0.5rem; }

.campo label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marfil);
}
.req { color: var(--champagne); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select,
.campo textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--marfil);
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.25s var(--curva), background-color 0.25s var(--curva);
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover { background-color: rgba(255, 255, 255, 0.07); }
.campo textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--champagne) 50%),
                    linear-gradient(135deg, var(--champagne) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(231, 230, 230, 0.62); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--champagne);
  background-color: rgba(255, 255, 255, 0.08);
}

.campo__telefono {
  display: grid;
  grid-template-columns: minmax(128px, 0.46fr) 1fr;
  gap: 0.6rem;
}

/* Selector de país con bandera (reemplaza al select nativo). */
.tel-pais { position: relative; }
.tel-pais__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  color: var(--marfil);
  font-family: var(--sans);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background-color 0.2s var(--curva);
}
.tel-pais__btn:hover { background-color: rgba(255, 255, 255, 0.07); }
.tel-pais__btn:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.tel-pais__bandera {
  width: 24px; height: 16px;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.tel-pais__code { font-variant-numeric: tabular-nums; }
.tel-pais__caret {
  margin-left: auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--champagne);
  border-bottom: 1.5px solid var(--champagne);
  transform: rotate(45deg);
  transition: transform 0.2s var(--curva);
}
.tel-pais__btn[aria-expanded="true"] .tel-pais__caret { transform: rotate(-135deg); }

.tel-pais__lista {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  width: max(220px, 100%);
  max-height: 280px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie-alta);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.tel-pais__op {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: var(--radio);
  background: none;
  color: var(--marfil);
  font-family: var(--sans);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--curva);
}
.tel-pais__op:hover { background-color: rgba(208, 171, 123, 0.10); }
.tel-pais__op[aria-selected="true"] { background-color: rgba(208, 171, 123, 0.14); }
.tel-pais__op .tel-pais__code { color: var(--champagne); min-width: 3.4em; }
.tel-pais__nom { color: var(--gris-perla); font-size: 0.85rem; }

.ayuda {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(231, 230, 230, 0.78);
}

.error {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--error);
  min-height: 0;
}
.error:empty { display: none; }

.campo--invalido input,
.campo--invalido select { border-color: var(--error); }

.campo--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.campo--check input {
  width: 20px; height: 20px;
  accent-color: var(--champagne);
  margin-top: 2px;
  cursor: pointer;
}
.campo--check label {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gris-perla);
  cursor: pointer;
}

.privacidad {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(231, 230, 230, 0.72);
}

.estado {
  margin: 0;
  font-size: 0.88rem;
  min-height: 0;
}
.estado:empty { display: none; }
.estado--ok { color: var(--champagne); }
.estado--mal { color: var(--error); }

#enviar[aria-busy="true"] { opacity: 0.72; pointer-events: none; }


/* ---------- Botón flotante de WhatsApp ---------- */

.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 130;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--champagne);
  color: #14110C;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  transition: background-color 0.28s var(--curva), transform 0.2s var(--curva),
              box-shadow 0.28s var(--curva);
}
.wa:hover {
  background: var(--champagne-claro);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.62);
}
.wa:active { transform: translateY(0); }

.wa__icono { width: 28px; height: 28px; flex: 0 0 auto; }

@media (max-width: 640px) {
  .wa { width: 56px; height: 56px; }
  .wa__icono { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa:hover { transform: none; }
}

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

.pie {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--borde-suave);
  background-color: var(--negro-carbon);
}

.pie__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  padding-bottom: 3rem;
}

/* Misma composición que la intro y también centrada: la firma, la regla,
   la especialidad y las redes, una debajo de otra sobre el mismo eje. */
.pie__marca { text-align: center; }
.pie__firma {
  width: min(328px, 82%);
  height: auto;
  margin: 0 auto 1.3rem;
}
.pie__regla {
  display: block;
  width: min(328px, 82%);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--champagne), transparent);
  margin: 0 auto 1rem;
}
.pie__linea {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  word-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0;
}
/* Instagram y el enlace de la página, debajo de la ciudad. */
.pie__redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.5rem;
}
.pie__red {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  background: none;
  color: var(--gris-perla);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.28s var(--curva), color 0.28s var(--curva);
}
.pie__red:hover,
.pie__red:focus-visible { border-color: var(--champagne); color: var(--champagne); }

/* Las redes van sueltas, sin recuadro: solo el logo en oro. El área que
   responde al dedo sigue siendo de 44px aunque el trazo mida menos. */
.pie__red--insta {
  width: 56px;
  min-height: 56px;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  background: none;
  color: var(--champagne);
}
.pie__red--insta:hover,
.pie__red--insta:focus-visible {
  border-color: transparent;
  color: var(--champagne-claro);
}
.pie__red--insta .pie__red__icono svg { width: 39px; height: 39px; }
.pie__red__icono { display: grid; place-items: center; }
.pie__red__icono svg { width: 18px; height: 18px; }

.pie__legal {
  border-top: 1px solid var(--borde-suave);
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
}
/* Crédito de autoría. Ocupa su propia línea para no competir con el
   aviso legal, y el dominio va en oro para que se vea que es un enlace. */
.credito {
  text-align: right;
}
.credito a {
  color: var(--champagne);
  border-bottom: 1px solid rgba(208, 171, 123, 0.35);
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}
.credito a:hover,
.credito a:focus-visible {
  color: var(--champagne-claro);
  border-bottom-color: var(--champagne-claro);
}

.pie__legal p {
  margin: 0;
  font-size: 0.76rem;
  color: rgba(231, 230, 230, 0.62);
  font-weight: 400;
}

/* ---------- Marcador para fotografía pendiente ---------- */

.marcador {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background:
    repeating-linear-gradient(45deg, rgba(208,171,123,0.10) 0 12px, transparent 12px 24px),
    var(--antracita);
  color: rgba(231, 230, 230, 0.7);
  text-align: center;
  padding: 1.5rem;
}
/* El hueco de la fotografía va en negro; la trama queda por fuera, como marco. */
.marcador::before {
  content: "";
  position: absolute;
  inset: clamp(14px, 2.4vw, 30px);
  background: var(--negro-carbon);
  border: 1px solid var(--borde-suave);
}
.marcador > * { position: relative; z-index: 1; }
.marcador img { width: 58px; height: auto; opacity: 0.30; }
.marcador span {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Revelado al hacer scroll ---------- */

.js-revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--curva), transform 0.75s var(--curva);
}
.js-revelar.visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

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

@media (max-width: 1024px) {
  /* Por debajo de este ancho la barra pasa a marca y hamburguesa. */
  .nav__interior { grid-template-columns: 1fr auto; }
  .nav__marca-linea { white-space: nowrap; }

  .nav__hamburguesa { display: flex; }

  /* Por debajo de 1024px el hero destapa la lámpara del quirófano justo
     detrás de la marca. Con el vidrio al 34% el nombre quedaba en 2.9:1.
     Al 80% el marfil sube a 11:1 y el champagne a 5.6:1. */
  .nav__interior { background: rgba(15, 15, 16, 0.80); }

  /* El desplegable no es una hoja sólida a pantalla completa: es una
     segunda píldora de vidrio, debajo de la barra y del mismo ancho. */
  .nav__menu {
    display: flex;
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 1.1rem 1rem;
    border-radius: 16px;
    background: rgba(10, 10, 11, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10),
                0 18px 40px rgba(0, 0, 0, 0.5);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s var(--curva), transform 0.26s var(--curva), visibility 0.26s;
  }
  .nav__menu::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 20%,
      rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
      rgba(255,255,255,0.10) 80%, rgba(255,255,255,0.30) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .nav__menu > * { position: relative; z-index: 1; }
  .nav__menu.abierto { opacity: 1; transform: none; visibility: visible; }

  .nav__lista { grid-column: auto; justify-self: stretch; flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista a {
    display: block;
    padding: 1rem 0;
    font-size: 0.86rem;
    border-bottom: 1px solid var(--borde-suave);
  }
  .nav__lista a:hover { border-bottom-color: var(--champagne); }

  .nav__acciones {
    grid-column: auto;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    margin-top: 1.1rem;
  }
  .idioma { padding: 0.9rem; }
  .nav__cta { width: 100%; padding: 1rem; }

  /* Nunca por debajo de 20px: es Italiana. El valor anterior (0.92rem,
     14.7px) venía de antes del cambio de tipografía y dejaba el nombre
     ilegible justo en el rango de las laptops. */
  .nav__marca-nombre { font-size: 1.5rem; }

  /* En teléfono el bloque no necesita subir tanto: la pantalla es alta
     y de lo contrario queda un vacío grande abajo. */
  .hero { align-items: flex-end; padding-bottom: clamp(3rem, 13vh, 9rem); }
  .hero__fondo {
    inset: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* En teléfono el cuadro es angosto y alto: se busca la cara dentro de
     la foto apaisada en vez de encajar la sala entera. */
  .hero__img,
  .hero__video { object-position: 74% 40%; }
  /* Solo se oscurece la franja del texto. Arriba el retrato queda limpio. */
.hero__fondo::after {
    background: linear-gradient(to top,
      var(--negro-carbon) 30%,
      rgba(15,15,16,0.88) 40%,
      rgba(15,15,16,0.30) 58%,
      rgba(15,15,16,0.10) 100%);
  }
  .hero__titulo { max-width: none; }
  .hero__sub { max-width: 46ch; }

  .bento { grid-template-columns: 1fr; }
  .bento__celda--a,
  .bento__celda--b,
  .bento__celda--c { grid-column: 1 / -1; grid-row: auto; }
  .bento__celda--a { min-height: 300px; }


  .nutricion__grid,
  .doctor__grid,
  .contacto__grid { grid-template-columns: 1fr; }

  .proc { grid-template-columns: 1fr; gap: 2.6rem; }

  .doctor__figura { order: -1; max-width: 420px; }
  .nutricion__figura {
    margin: 0;
    max-width: 420px;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .nutricion__figura img {
    -webkit-mask-image: none;
    mask-image: none;
  }

}

@media (max-width: 560px) {
  /* A 24px el nombre no entra junto al monograma y la hamburguesa, y
     quedaba cortado. 20px es el piso de Italiana: por debajo se rompe. */
  .nav__marca-nombre { font-size: 1.26rem; letter-spacing: 0.03em; }
  .nav__marca { gap: 0.7rem; }

  /* Cinco logos de 56px con 22px de aire suman 368px: cuatro pixeles más
     que el ancho disponible, y el quinto caía a una segunda fila. */
  .pie__redes { gap: 0.95rem; }
}

@media (max-width: 480px) {
  .contenedor,
  .nav__interior,
  .hero__contenido { width: min(100% - 1.6rem, var(--contenedor)); }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .boton { width: 100%; }
  .campo__telefono { grid-template-columns: 1fr; }
  .bento__celda { padding: 1.5rem; }
  .aviso { flex-direction: column; gap: 0.9rem; }
}


/* ============================================================
   MÓVIL: revisión de ergonomía
   La página se ve casi siempre en el teléfono, de noche, con una
   sola mano. Aquí se corrige lo que en escritorio no molesta pero
   en el pulgar sí: objetivos táctiles, tamaño de lectura y ritmo.
   ============================================================ */

@media (max-width: 640px) {

  /* --- 1. Nada por debajo de 44px de alto, que es el ancho del pulgar --- */

  .proc__item { min-height: 44px; padding-block: 0.55rem; }

  .campo--check input {
    width: 26px; height: 26px;
    margin-top: 0;
  }

  /* --- 2. Lectura: nada de cuerpo por debajo de 16px --- */

  .bento__celda p,
  .lista-marcada li,
  .proc__item,
  .aviso p,
  .campo--check label {
    font-size: 1rem;
  }

  .nota-legal,
  .privacidad,
  .ayuda {
    font-size: 0.88rem;
    color: rgba(231, 230, 230, 0.82);
  }

  .texto-intro { font-size: 1.05rem; }

  /* --- 3. Ritmo: menos aire en las secciones densas, más donde
         hay una imagen que respirar. Antes eran 80px iguales. --- */

  .seccion { padding-block: 4rem; }
  .areas,
  .doctor,
  .contacto { padding-block: 5.5rem; }
  .titulo-seccion { margin-bottom: 1.1rem; }
  .texto-intro { margin-bottom: 2.4rem; }

  /* iOS hace zoom automático en cualquier campo con menos de 16px y
     obliga al visitante a volver a alejar con los dedos. Es el fallo
     más caro de un formulario en el teléfono. */
  .campo input[type="text"],
  .campo input[type="email"],
  .campo input[type="tel"],
  .campo select,
  .campo textarea {
    font-size: 16px;
    padding: 0.95rem 1rem;
  }
  .campo textarea { min-height: 140px; }

  /* El botón de idioma llegaba a 43,8px: un pixel corto. */
  .idioma { min-height: 44px; }

  /* El aviso legal del pie era de 12px: ilegible en la cama, de noche. */
  .pie__legal p { font-size: 0.85rem; }

  /* --- 4. El botón flotante no debe pisar el final de la página --- */

  .pie__legal { padding-bottom: 4.5rem; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-revelar { opacity: 1; transform: none; }

  /* La intro no llega a mostrarse con movimiento reducido, pero si lo hiciera
     debe verse en su estado final, nunca a medio escribir. */
  .firma__barrido { transform: translateX(0); }
  .firma { animation: none; }
  .intro__placa { animation: none; opacity: 0.62; }
  /* Con movimiento reducido el hero se queda en la foto fija. */
  .hero__video { display: none; }
  .intro__grano { animation: none; }
  .intro__regla { transform: scaleX(1); }
  .intro__linea { opacity: 1; }
}