/* ───────────────────────────────────────────────
   FUENTES DEL CLIENTE — pendientes de recibir.
   Al llegar los .woff2 se descomenta este bloque
   y se cambian las tres variables --f-* de abajo.
   No hace falta tocar nada más del layout.

@font-face{font-family:'The Seasons';src:url('./assets/fonts/theseasons-regular.woff2') format('woff2'),url('./assets/fonts/theseasons-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'The Seasons';src:url('./assets/fonts/theseasons-light.woff2') format('woff2'),url('./assets/fonts/theseasons-light.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'Ed Lavonia';src:url('./assets/fonts/edlavonia.woff2') format('woff2'),url('./assets/fonts/edlavonia.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Exmouth';src:url('./assets/fonts/exmouth.woff2') format('woff2'),url('./assets/fonts/exmouth.woff') format('woff');font-weight:400;font-display:swap}
─────────────────────────────────────────────── */

:root{
  /* Paleta festiva de marca */
  --crema:#fff7e9;
  --crema-hueso:#f6ecd8;
  --olivo:#747a48;
  --salvia:#8a9665;
  --magenta:#be5a7b;
  --naranja:#ce7d4d;
  --tinta:#41472a;
  --tinta-suave:#6f7553;

  /* Sustitutos temporales. Cambiar por las reales al recibirlas. */
  --f-texto:'Cormorant Garamond', Georgia, serif;   /* → The Seasons */
  --f-titulo:'Pinyon Script', cursive;              /* → Ed Lavonia  */
  --f-nombres:'Parisienne', cursive;                /* → Exmouth     */

  --stage:min(76vh, 620px);
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:clamp(16px,1.05vw + 13px,19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

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

/* ═══════════════ INTRO — EL SOBRE ═══════════════ */

#intro{
  position:fixed;inset:0;z-index:100;
  background:var(--crema);
  display:grid;grid-template-rows:1fr auto;
  place-items:center;
  padding:6vh 5vw 5vh;
  transition:opacity .9s var(--ease), visibility .9s;
}
#intro[hidden]{display:none}
#intro.is-gone{opacity:0;visibility:hidden;pointer-events:none}

.escena{
  position:relative;
  height:var(--stage);
  aspect-ratio:1290 / 2350;   /* el sobre ocupa la parte baja; arriba queda aire
                                 para que la tarjeta pueda salir por completo */
  align-self:center;
  border:0;background:none;padding:0;margin:0;
  overflow:hidden;
  cursor:pointer;
  transition:transform 1s var(--ease), opacity .8s var(--ease);
}
.sobre{
  position:absolute;left:0;bottom:0;
  width:100%;
  aspect-ratio:1290 / 1810;
}
.escena[data-fase="abierto"],
.escena[data-fase="fuera"]{cursor:default}

.capa{position:absolute;left:0;top:0;width:100%}

/* Sobre cerrado — registrado sobre el mismo lienzo */
.capa--cerrado{
  left:.70%;top:29.23%;width:97.36%;
  z-index:4;
  transition:opacity .55s var(--ease);
}
.capa--fondo,.capa--frente{left:0;top:0;width:100%}
.capa--fondo{opacity:0;transition:opacity .55s var(--ease) .1s}
.capa--frente{opacity:0;transition:opacity .55s var(--ease) .1s;z-index:3}

.capa--tarjeta{
  left:1.4%;top:31%;width:96%;
  z-index:2;
  transform:translateY(28%);
  opacity:0;
  transition:transform 1.6s var(--ease) 1.15s, opacity .3s linear 1.15s;
  filter:drop-shadow(0 14px 26px rgba(65,71,42,.18));
}

.escena[data-fase="abierto"] .capa--cerrado,
.escena[data-fase="fuera"]   .capa--cerrado{opacity:0}
.escena[data-fase="abierto"] .capa--fondo,
.escena[data-fase="abierto"] .capa--frente,
.escena[data-fase="fuera"]   .capa--fondo,
.escena[data-fase="fuera"]   .capa--frente{opacity:1}
.escena[data-fase="abierto"] .capa--tarjeta,
.escena[data-fase="fuera"]   .capa--tarjeta{transform:translateY(-78%);opacity:1}

.escena.saliendo{transform:scale(1.06);opacity:0}

/* Pie de la intro */
.intro-pie{
  text-align:center;
  min-height:5.5rem;
  display:grid;place-items:center;
}
.intro-aviso{
  margin:0;
  font-size:.94rem;
  letter-spacing:.16em;
  color:var(--tinta-suave);
  transition:opacity .5s var(--ease);
}
.intro-aviso i{display:block;font-size:.86rem;letter-spacing:.11em;opacity:.62;font-style:italic}
.escena[data-fase="abierto"] ~ .intro-pie .intro-aviso,
.escena[data-fase="fuera"] ~ .intro-pie .intro-aviso{opacity:0}

.entrar{
  position:absolute;
  font-family:var(--f-texto);
  font-size:1rem;
  letter-spacing:.2em;
  color:var(--crema);
  background:var(--olivo);
  border:0;border-radius:2px;
  padding:.85em 2.4em;
  cursor:pointer;
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease) .2s, visibility .6s, background .3s;
}
.entrar.visible{opacity:1;visibility:visible}
.entrar:hover{background:var(--tinta)}

/* ═══════════════ NAVEGACIÓN ═══════════════ */

.barra{
  position:sticky;top:0;z-index:40;
  background:rgba(255,247,233,.94);
  border-bottom:1px solid rgba(116,122,72,.16);
}
.barra-fila{
  max-width:1180px;margin:0 auto;
  padding:.9rem 5vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:1.5rem;
}
.barra-dato{
  font-size:.76rem;
  letter-spacing:.22em;
  color:var(--tinta-suave);
  white-space:nowrap;
}
.barra-dato:last-child{text-align:right}
.barra-marca{width:clamp(96px,11vw,132px);margin:0 auto}

.menu{
  border-top:1px solid rgba(116,122,72,.16);
  padding:.55rem 5vw .7rem;
}
.menu ul{
  max-width:1180px;margin:0 auto;padding:0;
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem 2.4rem;
}
.menu a{
  text-decoration:none;
  font-size:.8rem;
  letter-spacing:.19em;
  color:var(--tinta-suave);
  padding:.25rem 0;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.menu a:hover{color:var(--olivo);border-bottom-color:var(--salvia)}

/* ═══════════════ HERO ═══════════════ */

.hero{padding:0 0 clamp(3rem,7vw,5.5rem)}
.hero-lienzo{
  width:100%;
  display:grid;place-items:center;
  background:var(--crema);
}
.hero-lienzo img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
}

.hero-texto{
  max-width:760px;
  margin:clamp(2.2rem,5vw,3.6rem) auto 0;
  padding:0 5vw;
  text-align:center;
}
.hero-nombres{width:min(78%,470px);margin:0 auto}

.hero-datos{
  margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:.5rem 1.4rem;
  font-size:.88rem;
  letter-spacing:.2em;
  color:var(--tinta-suave);
}
.hero-datos span:not(:last-child)::after{
  content:'';display:inline-block;
  width:5px;height:5px;margin-left:1.4rem;
  border-radius:50%;background:var(--salvia);
  vertical-align:middle;
}
.hero-lugar{
  margin:.9rem 0 0;
  font-family:var(--f-titulo);
  font-size:clamp(1.7rem,4.2vw,2.5rem);
  line-height:1.25;
  color:var(--olivo);
}

/* Cuenta regresiva */
.cuenta{
  margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  display:flex;justify-content:center;
  gap:clamp(1.5rem,5vw,3.4rem);
}
.cuenta div{text-align:center}
.cuenta b{
  display:block;
  font-weight:400;
  font-size:clamp(1.9rem,5vw,2.9rem);
  line-height:1;
  color:var(--olivo);
  font-variant-numeric:lining-nums tabular-nums;
}
.cuenta small{
  display:block;margin-top:.5rem;
  font-size:.72rem;letter-spacing:.19em;
  color:var(--tinta-suave);
}

/* Separador de corazón */
.sep{padding:clamp(2.8rem,6vw,4.4rem) 0;text-align:center}
.sep img{width:clamp(58px,7vw,84px);margin:0 auto;opacity:.72}

/* Cenefa ancha — separa bloques largos dentro de una página */
.sep--cenefa{padding:clamp(2.2rem,5vw,3.6rem) 5vw}
.sep--cenefa img{width:min(78%,620px);opacity:.9}

/* ═══════════════ ITINERARIO ═══════════════ */

.seccion{padding:clamp(1rem,3vw,2rem) 5vw clamp(3rem,7vw,5rem)}
.seccion-cabeza{max-width:1120px;margin:0 auto clamp(2.4rem,5vw,3.8rem);text-align:center}
.seccion-titulo{
  margin:0;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(2.3rem,5.5vw,3.4rem);
  line-height:1.15;
  color:var(--olivo);
}
.seccion-titulo em{
  display:block;
  margin-top:.35rem;
  font-family:var(--f-texto);
  font-style:italic;
  font-size:.9rem;
  letter-spacing:.2em;
  color:var(--tinta-suave);
}

.evento{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(2rem,4vw,3.2rem) 0;
}
.evento + .evento{border-top:1px solid rgba(116,122,72,.15)}
.evento--invertido .evento-arte{order:2}

.evento-arte img{
  width:100%;
  border-radius:2px;
}
.evento-arte--alto img{max-height:60vh;width:auto;margin:0 auto}

.evento-fecha{
  margin:0 0 .9rem;
  font-size:.78rem;
  letter-spacing:.22em;
  color:var(--magenta);
}
.evento-nombre{
  margin:0;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(2rem,4.4vw,2.9rem);
  line-height:1.1;
  color:var(--olivo);
}
.evento-nombre em{
  display:block;margin-top:.3rem;
  font-family:var(--f-texto);font-style:italic;
  font-size:.86rem;letter-spacing:.19em;color:var(--tinta-suave);
}
.evento-hora{
  margin:1.1rem 0 0;
  font-size:clamp(1.3rem,2.6vw,1.65rem);
  color:var(--tinta);
}
.evento-sede{margin:1.4rem 0 0;font-size:1.05rem;line-height:1.5}
.evento-sede b{font-weight:600}
.evento-sede span{display:block;color:var(--tinta-suave);font-size:.95rem}

.evento-codigo{
  display:inline-block;
  margin:1.4rem 0 0;
  padding:.42em 1.15em;
  border:1px solid var(--salvia);
  border-radius:2px;
  font-size:.76rem;
  letter-spacing:.19em;
  color:var(--olivo);
}
.evento-codigo i{font-style:italic;letter-spacing:.1em;opacity:.72}

.mapa{
  display:inline-block;
  margin:1.6rem 0 0;
  padding:.7em 1.9em;
  background:var(--olivo);
  color:var(--crema);
  text-decoration:none;
  border-radius:2px;
  font-size:.8rem;
  letter-spacing:.18em;
  transition:background .3s;
}
.mapa:hover{background:var(--tinta)}

/* Aviso de traslados — rayas del kit reproducidas en CSS */
.traslados{
  margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  max-width:1120px;
  border-radius:2px;
  overflow:hidden;
  border:1px solid rgba(116,122,72,.2);
}
.traslados-cinta{
  height:26px;
  background:repeating-linear-gradient(
    90deg,
    #9ba07f 0 12px,
    #fffdf5 12px 24px
  );
}
.traslados-cuerpo{padding:clamp(1.6rem,3.5vw,2.4rem) clamp(1.4rem,4vw,2.8rem);background:var(--crema-hueso)}
.traslados h3{
  margin:0 0 1rem;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.1rem);
  color:var(--olivo);
}
.traslados h3 em{
  display:block;font-family:var(--f-texto);font-style:italic;
  font-size:.82rem;letter-spacing:.19em;color:var(--tinta-suave);margin-top:.25rem;
}
.traslados ul{margin:0;padding:0;list-style:none;display:grid;gap:.85rem}
.traslados li{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.traslados b{
  flex:0 0 auto;font-weight:400;
  color:var(--magenta);
  font-variant-numeric:lining-nums tabular-nums;
  min-width:5.2em;
}

/* ═══════════════ INVITACIÓN FORMAL ═══════════════ */

.invitacion{
  position:relative;
  padding:clamp(3rem,7vw,5.5rem) 5vw clamp(3.5rem,8vw,6rem);
  background:url('./assets/toile-floral.webp') center / 460px repeat;
  overflow:hidden;
}
.invitacion::before{
  content:'';position:absolute;inset:0;
  background:var(--crema);
  opacity:.74;
}
.invitacion > *{position:relative}

.tarjeton{
  max-width:660px;
  margin:0 auto;
  background:var(--crema);
  padding:clamp(2.4rem,5.5vw,4rem) clamp(1.6rem,4.5vw,3.4rem);
  text-align:center;
  border:clamp(18px,2.6vw,28px) solid transparent;
  border-image:url('./assets/marco-cuadros.webp') 76 79 round;
}
@supports not (border-image:url('x') 76 79 round){
  .tarjeton{border:1px solid var(--salvia)}
}

.tarjeton-padres{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 2.2rem;
  margin:0 0 2rem;
  font-size:.94rem;
  line-height:1.55;
  color:var(--tinta-suave);
}
.tarjeton-padres p{margin:0}

.tarjeton-formula{margin:0 0 1.5rem;font-size:1rem;line-height:1.6}
.tarjeton-formula i{display:block;margin-top:.4rem;font-size:.85rem;color:var(--tinta-suave)}

.tarjeton-novios{
  margin:0 0 1.7rem;
  font-family:var(--f-nombres);
  font-weight:400;
  font-size:clamp(2rem,4.8vw,3rem);
  line-height:1.2;
  color:var(--olivo);
}

.tarjeton-sello{width:clamp(58px,7vw,84px);margin:0 auto 1.6rem;opacity:.92}

.tarjeton-detalle{margin:0;font-size:1.02rem;line-height:1.75}
.tarjeton-detalle i{display:block;margin-top:.9rem;font-size:.87rem;color:var(--tinta-suave)}

/* ═══════════════ HOSPEDAJE ═══════════════ */

.hoteles{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.6rem,3vw,2.4rem);
}

.hotel{
  display:flex;flex-direction:column;
  background:var(--crema);
  border:1px solid rgba(116,122,72,.2);
  border-radius:2px;
  overflow:hidden;
}
.hotel-foto{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  background:var(--crema-hueso);
}
.hotel-cuerpo{
  padding:1.5rem 1.5rem 1.7rem;
  display:flex;flex-direction:column;
  flex:1;
}
.hotel-nombre{
  margin:0 0 .8rem;
  font-size:1.2rem;
  font-weight:600;
  line-height:1.3;
  color:var(--olivo);
}
.hotel-texto{margin:0 0 1.2rem;font-size:.95rem;line-height:1.6}
.hotel-texto i{display:block;margin-top:.5rem;font-size:.86rem;color:var(--tinta-suave)}

.hotel-pie{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start}

.hotel-shuttle{
  display:inline-block;
  margin:0 0 1rem;
  padding:.3em .8em;
  background:rgba(190,90,123,.12);
  border-radius:2px;
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--magenta);
}

.hotel-tarifa{
  align-self:stretch;
  margin:0 0 1.1rem;
  padding:.9rem 1rem;
  background:var(--crema-hueso);
  border-left:3px solid var(--naranja);
  font-size:.88rem;
  line-height:1.55;
}
.hotel-tarifa b{color:var(--olivo)}
.hotel-tarifa a{color:var(--olivo);text-decoration:underline;text-underline-offset:2px}
.hotel-tarifa i{display:block;margin-top:.45rem;font-size:.8rem;color:var(--tinta-suave)}

.hotel-boton{
  display:inline-block;
  padding:.62em 1.6em;
  border:1px solid var(--olivo);
  border-radius:2px;
  color:var(--olivo);
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.16em;
  transition:background .3s, color .3s;
}
.hotel-boton:hover{background:var(--olivo);color:var(--crema)}

/* ═══════════════ RECOMENDACIONES ═══════════════ */

.acordeones{max-width:1120px;margin:0 auto;display:grid;gap:1rem}

.grupo{
  border:1px solid rgba(116,122,72,.22);
  border-radius:2px;
  background:var(--crema);
  overflow:hidden;
}
.grupo > summary{
  list-style:none;
  cursor:pointer;
  padding:1.25rem clamp(1.2rem,3vw,2rem);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  transition:background .25s;
}
.grupo > summary::-webkit-details-marker{display:none}
.grupo > summary:hover{background:var(--crema-hueso)}

/* Viñeta ilustrada de cada acordeón */
.grupo-icono{
  flex:0 0 auto;
  width:clamp(34px,4.2vw,46px);
  margin-right:clamp(.7rem,1.6vw,1.1rem);
  transition:transform .35s var(--ease);
}
.grupo > summary:hover .grupo-icono{transform:scale(1.08) rotate(-4deg)}
.grupo > summary > .grupo-titulo{margin-right:auto}

.grupo-titulo{
  font-family:var(--f-titulo);
  font-size:clamp(1.5rem,3.2vw,2rem);
  line-height:1.15;
  color:var(--olivo);
}
.grupo-titulo em{
  display:block;margin-top:.2rem;
  font-family:var(--f-texto);font-style:italic;
  font-size:.8rem;letter-spacing:.17em;color:var(--tinta-suave);
}
.grupo-signo{flex:0 0 auto;width:1.5rem;height:1.5rem;position:relative}
.grupo-signo::before,.grupo-signo::after{
  content:'';position:absolute;left:50%;top:50%;
  width:15px;height:1px;background:var(--olivo);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease);
}
.grupo-signo::after{transform:translate(-50%,-50%) rotate(90deg)}
.grupo[open] .grupo-signo::after{transform:translate(-50%,-50%) rotate(0)}

.grupo-cuerpo{padding:0 clamp(1.2rem,3vw,2rem) clamp(1.6rem,3vw,2.2rem)}

.lista{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1.4rem clamp(1.6rem,3vw,2.6rem);
}
.lista > li{border-top:1px solid rgba(116,122,72,.16);padding-top:1.1rem}
.lista h4{margin:0 0 .35rem;font-size:1.02rem;font-weight:600;color:var(--olivo)}
.lista p{margin:0;font-size:.92rem;line-height:1.55}
.lista p i{display:block;margin-top:.35rem;font-size:.84rem;color:var(--tinta-suave)}
.lista .dato{display:block;margin-top:.5rem;font-size:.82rem;color:var(--tinta-suave)}
.lista a{color:var(--olivo);text-decoration:underline;text-underline-offset:2px}

.tiendas{
  margin:0 0 2rem;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.2rem,2.5vw,1.8rem);
}
.tiendas img{
  width:100%;aspect-ratio:4 / 5;object-fit:cover;
  border-radius:2px;background:var(--crema-hueso);
  margin-bottom:.85rem;
}
.tiendas h4{margin:0 0 .3rem;font-size:1rem;font-weight:600;color:var(--olivo)}
.tiendas p{margin:0;font-size:.86rem;line-height:1.5;color:var(--tinta-suave)}
.tiendas a{color:var(--olivo);text-decoration:underline;text-underline-offset:2px}

.tiendas-mas{margin:0;padding:1.3rem 0 0;border-top:1px solid rgba(116,122,72,.16)}
.tiendas-mas h4{margin:0 0 .8rem;font-size:.82rem;letter-spacing:.17em;color:var(--tinta-suave);font-weight:400}
.tiendas-mas ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem 2rem}
.tiendas-mas li{font-size:.9rem;line-height:1.5}
.tiendas-mas b{font-weight:600;color:var(--olivo)}
.tiendas-mas span{display:block;font-size:.82rem;color:var(--tinta-suave)}

.nota-belleza{margin:0 0 1.4rem;font-size:.88rem;color:var(--tinta-suave);font-style:italic}

@media (max-width:640px){
  :root{--stage:min(66vh, 520px)}
  .barra-fila{grid-template-columns:1fr;gap:.6rem;text-align:center}
  .barra-dato,.barra-dato:last-child{text-align:center;font-size:.68rem}
  .menu ul{gap:.35rem 1.4rem}
  .menu a{font-size:.73rem;letter-spacing:.15em}
  .hero-datos{flex-direction:column;gap:.35rem}
  .hero-datos span:not(:last-child)::after{display:none}
  .evento{grid-template-columns:1fr;gap:1.6rem;text-align:center}
  .evento--invertido .evento-arte{order:0}
  .evento-arte--alto img{max-height:none;width:100%}
  .traslados li{display:block}
  .traslados b{display:block;margin-bottom:.2rem}
  .hero-lienzo img{max-height:none}
  .hero-nombres{width:88%}
  .tarjeton-padres{grid-template-columns:1fr;gap:1.1rem}
  .invitacion{background-size:300px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* ═══════════════ CABECERA DE PÁGINA INTERIOR ═══════════════ */

.portada{
  padding:clamp(2.6rem,6vw,4.4rem) 5vw clamp(1.5rem,3vw,2.4rem);
  text-align:center;
  border-bottom:1px solid rgba(116,122,72,.14);
}
.portada-marca{width:clamp(52px,6vw,74px);margin:0 auto 1.3rem;opacity:.85}

/* Guirnalda de arte popular: una distinta por página.
   Sustituye al monograma; la marca ya vive en la barra y en el pie. */
.portada-guirnalda{
  margin:0 auto clamp(1rem,2.4vw,1.7rem);
  width:min(88%,var(--guirnalda,540px));
}
/* Las que llevan pájaro son más altas: se limitan por altura */
.portada-guirnalda--alta{width:auto;max-height:clamp(120px,17vw,215px)}
.portada h1{
  margin:0;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(2.6rem,6vw,4rem);
  line-height:1.1;
  color:var(--olivo);
}
.portada h1 em{
  display:block;margin-top:.5rem;
  font-family:var(--f-texto);font-style:italic;
  font-size:.88rem;letter-spacing:.2em;color:var(--tinta-suave);
}
.portada p{
  max-width:56ch;
  margin:1.3rem auto 0;
  font-size:1.02rem;
  line-height:1.65;
  color:var(--tinta-suave);
}

/* Estado activo del menú */
.menu a[aria-current="page"]{
  color:var(--olivo);
  border-bottom-color:var(--magenta);
}

/* ═══════════════ PIE ═══════════════ */

.pie{
  margin-top:clamp(3rem,7vw,5rem);
  padding:clamp(2.4rem,5vw,3.4rem) 5vw clamp(2rem,4vw,2.8rem);
  border-top:1px solid rgba(116,122,72,.16);
  text-align:center;
}
.pie-marca{width:clamp(110px,13vw,150px);margin:0 auto 1.4rem;opacity:.9}
.pie-datos{
  margin:0;
  font-size:.8rem;
  letter-spacing:.2em;
  color:var(--tinta-suave);
  line-height:2;
}
.pie-enlaces{
  margin:1.6rem 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.8rem;
}
.pie-enlaces a{
  font-size:.76rem;letter-spacing:.17em;
  color:var(--tinta-suave);text-decoration:none;
  transition:color .25s;
}
.pie-enlaces a:hover{color:var(--olivo)}

/* La sección ya no necesita el padding superior del scroll único */
.seccion--interior{padding-top:clamp(2.4rem,5vw,3.6rem)}

/* ═══════════════ CÓMO LLEGAR ═══════════════ */

.bloque{max-width:1120px;margin:0 auto clamp(2.6rem,5vw,4rem)}
.bloque-titulo{
  margin:0 0 1.6rem;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(1.8rem,3.8vw,2.4rem);
  color:var(--olivo);
}
.bloque-titulo em{
  display:block;margin-top:.2rem;
  font-family:var(--f-texto);font-style:italic;
  font-size:.82rem;letter-spacing:.18em;color:var(--tinta-suave);
}

.rutas{margin:0;padding:0;list-style:none;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rutas > li{
  padding:1.5rem 1.6rem;
  background:var(--crema-hueso);
  border-radius:2px;
  border-top:3px solid var(--salvia);
}
.rutas h4{margin:0 0 .7rem;font-size:1.05rem;font-weight:600;color:var(--olivo)}
.rutas p{margin:0;font-size:.94rem;line-height:1.6}
.rutas p i{display:block;margin-top:.5rem;font-size:.85rem;color:var(--tinta-suave)}

.traslados-empresas{margin:0;padding:0;list-style:none;display:grid;gap:1rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.traslados-empresas li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(116,122,72,.16);
}
.traslados-empresas b{font-weight:600;color:var(--olivo)}
.traslados-empresas a{
  color:var(--tinta-suave);text-decoration:none;
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
}
.traslados-empresas a:hover{color:var(--olivo)}

.aviso{
  max-width:1120px;margin:0 auto;
  padding:clamp(1.5rem,3.5vw,2.2rem) clamp(1.4rem,3.5vw,2.4rem);
  background:var(--crema-hueso);
  border-left:3px solid var(--naranja);
  border-radius:2px;
  font-size:.98rem;line-height:1.7;
}
.aviso p{margin:0}
.aviso p + p{margin-top:.9rem}
.aviso i{color:var(--tinta-suave);font-size:.88rem}

/* ═══════════════ PÁGINAS SIMPLES ═══════════════ */

.centro{max-width:640px;margin:0 auto;text-align:center;padding:0 5vw}
.centro-sello{width:clamp(90px,11vw,128px);margin:0 auto clamp(1.8rem,4vw,2.6rem);opacity:.9}
.centro p{font-size:1.06rem;line-height:1.75}
.centro p i{display:block;margin-top:.6rem;font-size:.9rem;color:var(--tinta-suave)}

.boton-grande{
  display:inline-block;
  margin-top:clamp(1.8rem,4vw,2.6rem);
  padding:1em 2.8em;
  background:var(--olivo);
  color:var(--crema);
  text-decoration:none;
  border-radius:2px;
  font-size:.86rem;
  letter-spacing:.2em;
  transition:background .3s;
}
.boton-grande:hover{background:var(--tinta)}
.boton-grande--wa{background:var(--magenta)}
.boton-grande--wa:hover{background:#a44a67}

.pendiente{
  display:inline-block;
  margin-top:1.6rem;
  padding:.55em 1.3em;
  border:1px dashed var(--salvia);
  border-radius:2px;
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--tinta-suave);
}

/* ═══════════════════════════════════════════════
   SISTEMA DE SECCIONES
   Cada sección tiene su tinte, su emblema enmarcado
   y su guirnalda. El color vive en las ilustraciones;
   los fondos son tintes del 8–14 % sobre el crema.
   ═══════════════════════════════════════════════ */

:root{--fondo:var(--crema)}
body{background:var(--fondo)}
.barra{background:var(--fondo)}

body.s-itinerario   {--fondo:#f6ecd8}  /* crema hueso */
body.s-traslados    {--fondo:#f3eddc}  /* salvia 10 % */
body.s-hoteles      {--fondo:#fff7e9}  /* crema puro  */
body.s-viaje        {--fondo:#fde8d8}  /* naranja 9 % */
body.s-movilizacion {--fondo:#f3ecda}  /* olivo 9 %   */
body.s-turismo      {--fondo:#eee9d6}  /* salvia 14 % */
body.s-guia         {--fondo:#f9e7de}  /* magenta 10 %*/
body.s-regalos      {--fondo:#fde8d8}
body.s-rsvp         {--fondo:#f9e7de}

/* ── Emblema: el icono dentro de un marco de bordado ── */
.portada-emblema{
  position:relative;
  width:clamp(126px,15vw,178px);
  aspect-ratio:1 / 1.3;
  margin:0 auto clamp(.6rem,1.6vw,1.1rem);
  display:grid;place-items:center;
}
/* El marco va como <img>: una url() dentro de una variable CSS se
   resolvería contra la hoja de estilos y duplicaría la ruta. */
.portada-marco{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:.9;
}
.portada-icono{
  position:relative;
  width:54%;
  max-height:56%;
  object-fit:contain;
}
/* Los marcos con flores dibujadas piden un icono más pequeño dentro */
.portada-emblema--ornado{width:clamp(140px,17vw,200px)}
.portada-emblema--ornado .portada-icono{width:33%;max-height:34%}
.portada-emblema--ornado .portada-marco{opacity:1}

/* La portada hereda el tinte y separa con la guirnalda */
.portada{background:var(--fondo)}

/* ── Cabecera de subsección dentro de la Guía ── */
.subseccion{
  max-width:1180px;
  margin:0 auto clamp(3rem,7vw,5rem);
  scroll-margin-top:7rem;
}
.subseccion-cabeza{
  display:flex;align-items:center;
  gap:clamp(1rem,2.5vw,1.8rem);
  margin:0 0 clamp(1.8rem,4vw,2.6rem);
  padding-bottom:1.1rem;
  border-bottom:1px solid rgba(116,122,72,.2);
}
.subseccion-icono{width:clamp(40px,5vw,58px);flex:0 0 auto}
.subseccion-cabeza h2{
  margin:0;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(1.9rem,4.2vw,2.7rem);
  line-height:1.1;
  color:var(--olivo);
}
.subseccion-cabeza h2 em{
  display:block;margin-top:.25rem;
  font-family:var(--f-texto);font-style:italic;
  font-size:.82rem;letter-spacing:.18em;color:var(--tinta-suave);
}
.subseccion-arte{
  width:min(58%,420px);
  margin:0 auto clamp(1.6rem,3.5vw,2.4rem);
  opacity:.92;
}

/* ── Galería editorial: rejilla asimétrica de 12 columnas ── */
.galeria{
  max-width:1180px;margin:0 auto;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,2.6vw,2.2rem);
}
.galeria > li{grid-column:span 6}
.galeria > li:nth-child(6n+1){grid-column:span 7}
.galeria > li:nth-child(6n+2){grid-column:span 5}
.galeria > li:nth-child(6n+3){grid-column:span 5}
.galeria > li:nth-child(6n+4){grid-column:span 7}
.galeria img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;object-position:center;
  border-radius:2px;
  background:var(--crema-hueso);
  margin-bottom:1rem;
}
/* Las piezas anchas van apaisadas: da el ritmo editorial */
.galeria > li:nth-child(6n+1) img,
.galeria > li:nth-child(6n+4) img{aspect-ratio:3 / 2}
.galeria h4{
  margin:0 0 .4rem;
  font-size:clamp(1.05rem,2vw,1.25rem);
  font-weight:600;color:var(--olivo);
}
.galeria p{margin:0;font-size:.92rem;line-height:1.6}
.galeria p i{display:block;margin-top:.4rem;font-size:.85rem;color:var(--tinta-suave)}
.galeria a{color:var(--olivo);text-decoration:underline;text-underline-offset:2px}

/* ── Turismo: bloques grandes alternados ── */
.destino{
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
  padding:clamp(2rem,4.5vw,3.4rem) 0;
}
.destino + .destino{border-top:1px solid rgba(116,122,72,.16)}
.destino--invertido .destino-foto{order:2}
.destino-foto img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:2px;
  background:var(--crema-hueso);
}
.destino h3{
  margin:0 0 .9rem;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.15;
  color:var(--olivo);
}
.destino p{margin:0;font-size:1.02rem;line-height:1.7}
.destino p i{display:block;margin-top:.6rem;font-size:.88rem;color:var(--tinta-suave)}
.destino a{color:var(--olivo);text-decoration:underline;text-underline-offset:2px}

/* ── Decoración de margen: solo en pantallas anchas ── */
.margen{
  position:absolute;
  top:0;width:clamp(110px,11vw,190px);
  opacity:.42;
  pointer-events:none;
  z-index:0;
}
.margen--izq{left:-1.5vw}
.margen--der{right:-1.5vw;transform:scaleX(-1)}
.con-margen{position:relative;overflow:hidden}
.con-margen > *{position:relative;z-index:1}
@media (max-width:1400px){.margen{display:none}}

@media (max-width:820px){
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria > li,
  .galeria > li:nth-child(6n+1),
  .galeria > li:nth-child(6n+2),
  .galeria > li:nth-child(6n+3),
  .galeria > li:nth-child(6n+4){grid-column:span 1}
  .galeria > li img,
  .galeria > li:nth-child(6n+1) img,
  .galeria > li:nth-child(6n+4) img{aspect-ratio:4 / 5}
  .destino{grid-template-columns:1fr;gap:1.5rem}
  .destino--invertido .destino-foto{order:0}
}
@media (max-width:540px){
  .galeria{grid-template-columns:1fr}
  .subseccion-cabeza{gap:.9rem}
}

/* ── Marco de bordado alrededor del contenido central ── */
.centro--enmarcado{
  position:relative;
  max-width:820px;
  /* La banda del marco ocupa ~13 % del ancho: el texto necesita
     despejarla o queda por debajo de las flores. */
  padding:clamp(5rem,11vw,7rem) clamp(6.5rem,16vw,10rem);
}
.centro--enmarcado > *:not(.centro-marco){position:relative;z-index:1}
.centro-marco{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:fill;
  z-index:0;pointer-events:none;
}
/* En móvil el bloque se estira demasiado y el marco se deformaría */
@media (max-width:700px){
  .centro--enmarcado{padding:0}
  .centro-marco{display:none}
}

/* ── Mesas de regalos ── */
.mesas{
  margin:clamp(2rem,4vw,2.8rem) 0 0;
  padding:0;list-style:none;
  display:grid;gap:clamp(1.6rem,3.5vw,2.4rem);
}
.mesas h3{
  margin:0 0 .9rem;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.1rem);
  line-height:1.15;
  color:var(--olivo);
}
.mesas .boton-grande{margin-top:0}