/* ══════════════════════════════════════════════════════════
   DISEÑO · ÁMBAR

   La idea: una habitación con luz de tarde. Todo tira a miel,
   nada tiene esquinas duras y el texto es grande y cómodo.

   El gesto: la blandura. Radios muy generosos y un halo cálido
   detrás del contenido principal. Ni un ángulo recto a la vista.
   ══════════════════════════════════════════════════════════ */

:root {
  --gold: #B5661C;          /* ámbar tostado */
  --gold-light: #E0954A;
  --gold-dark: #7E460F;
  --dark: #F6EEE1;          /* papel con luz de miel */
  --dark-2: #EFE2CE;
  --dark-3: #E5D3B8;
  --text: #33281C;
  --text-muted: #6E5E4A;
  --cuerpo: 18px;
  --grosor: 400;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Urbanist', sans-serif;
}

.hero { background: radial-gradient(ellipse 80% 65% at 50% 35%,
  color-mix(in srgb, var(--gold) 12%, var(--dark)) 0%, var(--dark) 70%); }
.hero::before { display: none; }
.page-hero { background: var(--dark); }

nav {
  background: color-mix(in srgb, var(--dark) 90%, transparent);
  border-bottom: none;
}
.nav-logo { font-family: var(--serif); font-style: normal;
  font-weight: 500; letter-spacing: -0.01em; }
.nav-links a { font-size: 0.86rem; letter-spacing: 0; font-weight: 500; }

.section-title { font-family: var(--serif); font-weight: 500;
  letter-spacing: -0.02em; }
.section-title em { font-style: italic; color: var(--gold); }

.btn-primary {
  background: var(--gold); color: #FFF8EF;
  border-radius: 100px; text-transform: none;
  letter-spacing: 0; font-size: 0.95rem; font-weight: 600;
  padding: 1rem 2.2rem;
}
.btn-outline {
  border: 2px solid color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 100px; text-transform: none;
  font-size: 0.95rem; font-weight: 600;
}

/* Formas blandas en todo */
.cita-card, .deseo-card, .faq-item, .cita-aviso,
.contacto-aviso, .contacto-donde {
  background: #FDF8F0; border: none; border-radius: 26px;
}
.gallery-item, .video-thumb-item, .deseo-imagen img { border-radius: 22px; }
.cita-icon { border-radius: 50%; background: color-mix(in srgb, var(--gold) 12%, transparent); }
.section-label::after { background: var(--gold); }
footer { border-top: none; }

@media (min-width: 901px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .about-grid, .contacto-grid { max-width: 1100px; padding: 4rem 3rem; }
}

/* ─── Portada ─── */
.am-portada {
  padding: 7rem 1.5rem 4rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.am-nombre {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  font-weight: 500; letter-spacing: -0.03em;
  line-height: 1.05; color: var(--text); margin: 0 0 1rem;
}
.am-nombre em { font-style: italic; color: var(--gold); }
.am-frase {
  color: var(--text-muted); font-size: 1.05rem; line-height: 1.85;
  max-width: 36ch; margin: 0 auto 2.5rem;
}
/* El retrato en una forma blanda, sin esquinas */
.am-retrato {
  width: min(26rem, 82vw); margin: 0 auto 2.5rem;
  border-radius: 40% 40% 36% 36% / 30% 30% 26% 26%;
  overflow: hidden;
}
.am-retrato img { width: 100%; display: block; }
.am-acciones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (min-width: 901px) {
  .am-portada { min-height: 100vh; justify-content: center; padding: 8rem 3rem 4rem; }
}

/* ══════════════════════════════════════════════════════════
   PÁGINAS INTERIORES
   La regla: todo redondeado y cómodo de leer. El texto va
   grande, con mucha interlínea.
   ══════════════════════════════════════════════════════════ */
.am-interior { max-width: 1100px; margin: 0 auto; padding: 8rem 1.5rem 5rem; }
.am-estrecho { max-width: 44rem; }
.am-interior .section-title { margin-bottom: 2rem; }

.am-prosa {
  color: var(--text-muted); font-size: 1.05rem; line-height: 1.95;
  max-width: 60ch; margin-bottom: 1.3rem;
}

/* Los destacados, en burbujas */
.am-burbujas {
  border: none; padding: 0; margin: 2rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.am-burbujas .stat {
  background: #FDF8F0; border-radius: 100px;
  padding: 0.9rem 1.8rem; text-align: left;
}
.am-burbujas .stat-num {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 500;
  color: var(--gold); margin-bottom: 0;
}
.am-burbujas .stat-label {
  font-size: 0.76rem; text-transform: none;
  letter-spacing: 0; color: var(--text-muted);
}

.am-canales { gap: 0.7rem; margin: 1rem 0 2rem; }
.am-canales .contact-channel {
  background: #FDF8F0; border: none; border-radius: 100px;
}
.am-imagen { margin: 2rem 0; border-radius: 26px; overflow: hidden; }
.am-imagen img { width: 100%; display: block; }
.am-faq { max-width: none; padding: 0; }
.am-legal { max-width: none; padding: 0; }
.am-donde { padding: 0; margin-top: 2rem; }

@media (min-width: 901px) {
  .am-interior { padding: 9rem 3rem 6rem; }
  .am-dos { display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 3rem; align-items: center; }
  .am-interior .citas-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .am-interior .deseos-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}

/* ─── La cabecera de las páginas de dentro ───
   La misma forma blanda del retrato de la portada, tumbada.
   Ninguna esquina: es la regla del diseño y aquí también. */
.am-cab {
  margin: 0 0 2.5rem;
  overflow: hidden;
  border-radius: 48% 52% 45% 55% / 16% 14% 86% 84%;
  aspect-ratio: 21 / 9;
  background: var(--dark-2);
}
.am-cab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
@media (max-width: 700px) {
  .am-cab { aspect-ratio: 16 / 10; border-radius: 40% 60% 45% 55% / 12% 10% 90% 88%; }
}

/* ─── Sin imagen ───
   La cabecera se esconde sola; solo hay que recuperar el aire de
   arriba que le quitaba. */
.am-interior .am-cab[style*="none"] + .section-title { margin-top: 2rem; }

/* ─── La cabecera, SIEMPRE del mismo tamaño ───
   Cada página usa el envoltorio que le conviene: unas anchas,
   otras en columna estrecha, «quién soy» y «contactar» con el
   suyo propio. La cabecera heredaba ese ancho y encogía o
   crecía al cambiar de página, que es lo que rompía el diseño.

   Ahora se sale del envoltorio y se planta siempre a 1100px,
   el ancho del más ancho de ellos. Da igual dónde caiga: mide
   lo mismo en las nueve páginas. */
.am-cab {
  width: min(1100px - 3rem, 100vw - 3rem);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 901px) {
  .am-cab { width: min(1100px - 6rem, 100vw - 6rem); }
}