/* NAV */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.5rem;background:rgba(255,245,248,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--rosa-200)}
.nav__logo{font:600 1.3rem var(--f-titulo);color:var(--rosa-800);text-decoration:none}
.nav__links{display:flex;gap:1.5rem}
.nav__links a{text-decoration:none;font-weight:600;color:var(--rosa-600);padding-bottom:2px;border-bottom:2px solid transparent}
.nav__links a:hover,.nav__links a.active{color:var(--rosa-800);border-color:var(--rosa-400)}
.nav__toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--rosa-600)}
@media (max-width:700px){
  .nav{flex-wrap:wrap}.nav__toggle{display:block}
  .nav__links{display:none;width:100%;flex-direction:column;gap:.8rem;padding:1rem 0 .4rem}
  .nav.open .nav__links{display:flex}
}

/* HERO: solo la portada. Sin color propio, usa el fondo continuo + un par de manchas suaves */
.hero{position:relative;overflow:hidden;display:grid;place-content:center;justify-items:center;text-align:center;gap:1.1rem;padding:4.5rem 2rem 5rem}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(2.4rem,8vw,4.6rem)}

/* ENCABEZADO DE PÁGINA: galería / historia / cartas. Franja compacta, no un bloque rosado vacío */
.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  max-width:1000px;margin:0 auto;padding:2.4rem 1.5rem 1.6rem;border-bottom:1px solid var(--rosa-200)}
.page-header__titulo{display:flex;align-items:center;gap:.9rem}
.page-header__icono{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-size:1.3rem;box-shadow:0 4px 14px rgba(224,87,138,.15)}
.page-header h1{font-size:clamp(1.6rem,4vw,2.2rem)}

/* En celular: encabezado centrado (en PC se queda como está, a la izquierda) */
@media (max-width:640px){
  .page-header{justify-content:center;text-align:center}
  .page-header__titulo{flex-direction:column}
}

/* SECCIONES */
.section{max-width:1000px;margin:0 auto;padding:2.8rem 1.5rem;position:relative}
.section__title{text-align:center;font-size:2.2rem;margin-bottom:1.8rem}

/* "Sobre nosotros": tarjeta flotante, no un bloque de ancho completo (sin bordes que notar) */
.section--alt{max-width:900px;margin:1rem auto 3rem;padding:2.5rem 2rem;border-radius:calc(var(--radio) * 1.4);
  background:linear-gradient(135deg,#fff,var(--rosa-50));box-shadow:var(--sombra)}
.section--alt>*{max-width:900px;margin-inline:auto}

/* Divisor decorativo entre secciones (reemplaza el bloque de color de antes) */
.divisor{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:0 auto;padding:1rem 0;color:var(--rosa-400);font-size:1.1rem}
.divisor::before,.divisor::after{content:"";width:60px;height:1px;background:var(--rosa-200)}

/* FOOTER */
.footer{text-align:center;padding:2rem;color:var(--rosa-600)}