/* ───────────────────────────────────────────────
   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(19px,1.25vw + 15px,22.5px);
  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:1.107rem;
  letter-spacing:.16em;
  color:var(--tinta-suave);
  transition:opacity .5s var(--ease);
}
.intro-aviso i{display:block;font-size:1.012rem;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:1.177rem;
  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:0.894rem;
  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:0.942rem;
  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:1.036rem;
  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(2.001rem,4.586vw,2.943rem);
  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(2.237rem,5.46vw,3.414rem);
  line-height:1;
  color:var(--olivo);
  font-variant-numeric:lining-nums tabular-nums;
}
.cuenta small{
  display:block;margin-top:.5rem;
  font-size:0.848rem;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.708rem,6.006vw,4.002rem);
  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:1.059rem;
  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:0.918rem;
  letter-spacing:.22em;
  color:var(--magenta);
}
.evento-nombre{
  margin:0;
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(2.354rem,4.805vw,3.414rem);
  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:1.012rem;letter-spacing:.19em;color:var(--tinta-suave);
}
.evento-hora{
  margin:1.1rem 0 0;
  font-size:clamp(1.53rem,2.839vw,1.942rem);
  color:var(--tinta);
}
.evento-sede{margin:1.4rem 0 0;font-size:1.237rem;line-height:1.5}
.evento-sede b{font-weight:600}
.evento-sede span{display:block;color:var(--tinta-suave);font-size:1.119rem}

.evento-codigo{
  display:inline-block;
  margin:1.4rem 0 0;
  padding:.42em 1.15em;
  border:1px solid var(--salvia);
  border-radius:2px;
  font-size:0.894rem;
  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:0.942rem;
  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.884rem,3.713vw,2.472rem);
  color:var(--olivo);
}
.traslados h3 em{
  display:block;font-family:var(--f-texto);font-style:italic;
  font-size:0.966rem;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:1.107rem;
  line-height:1.55;
  color:var(--tinta-suave);
}
.tarjeton-padres p{margin:0}

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

.tarjeton-novios{
  margin:0 0 1.7rem;
  font-family:var(--f-nombres);
  font-weight:400;
  font-size:clamp(2.354rem,5.242vw,3.532rem);
  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.201rem;line-height:1.75}
.tarjeton-detalle i{display:block;margin-top:.9rem;font-size:1.024rem;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.413rem;
  font-weight:600;
  line-height:1.3;
  color:var(--olivo);
}
.hotel-texto{margin:0 0 1.2rem;font-size:1.119rem;line-height:1.6}
.hotel-texto i{display:block;margin-top:.5rem;font-size:1.012rem;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:0.848rem;
  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:1.036rem;
  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:0.942rem;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:0.918rem;
  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.766rem,3.494vw,2.354rem);
  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:0.942rem;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.201rem;font-weight:600;color:var(--olivo)}
.lista p{margin:0;font-size:1.083rem;line-height:1.55}
.lista p i{display:block;margin-top:.35rem;font-size:0.989rem;color:var(--tinta-suave)}
.lista .dato{display:block;margin-top:.5rem;font-size:0.966rem;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:1.177rem;font-weight:600;color:var(--olivo)}
.tiendas p{margin:0;font-size:1.012rem;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:0.966rem;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:1.059rem;line-height:1.5}
.tiendas-mas b{font-weight:600;color:var(--olivo)}
.tiendas-mas span{display:block;font-size:0.966rem;color:var(--tinta-suave)}

.nota-belleza{margin:0 0 1.4rem;font-size:1.036rem;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:0.8rem}
  .menu ul{gap:.35rem 1.4rem}
  .menu a{font-size:0.86rem;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(3.061rem,6.552vw,4.709rem);
  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:1.036rem;letter-spacing:.2em;color:var(--tinta-suave);
}
.portada p{
  max-width:56ch;
  margin:1.3rem auto 0;
  font-size:1.201rem;
  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:0.942rem;
  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:0.894rem;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(2.119rem,4.15vw,2.825rem);
  color:var(--olivo);
}
.bloque-titulo em{
  display:block;margin-top:.2rem;
  font-family:var(--f-texto);font-style:italic;
  font-size:0.966rem;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.237rem;font-weight:600;color:var(--olivo)}
.rutas p{margin:0;font-size:1.107rem;line-height:1.6}
.rutas p i{display:block;margin-top:.5rem;font-size:1rem;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:1.153rem;line-height:1.7;
}
.aviso p{margin:0}
.aviso p + p{margin-top:.9rem}
.aviso i{color:var(--tinta-suave);font-size:1.036rem}

/* ═══════════════ 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.247rem;line-height:1.75}
.centro p i{display:block;margin-top:.6rem;font-size:1.059rem;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:1.012rem;
  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:0.918rem;
  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)}

/* El cliente pidió un único fondo crema en todas las secciones:
   los tintes por sección quedan anulados a propósito. */
body.s-itinerario, body.s-traslados, body.s-hoteles, body.s-viaje,
body.s-movilizacion, body.s-turismo, body.s-guia,
body.s-regalos, body.s-rsvp{--fondo:#fff7e9}

/* ── 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(2.237rem,4.586vw,3.178rem);
  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:0.966rem;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.237rem,2.184vw,1.472rem);
  font-weight:600;color:var(--olivo);
}
.galeria p{margin:0;font-size:1.083rem;line-height:1.6}
.galeria p i{display:block;margin-top:.4rem;font-size:1rem;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(2.119rem,4.368vw,3.061rem);
  line-height:1.15;
  color:var(--olivo);
}
.destino p{margin:0;font-size:1.201rem;line-height:1.7}
.destino p i{display:block;margin-top:.6rem;font-size:1.036rem;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. */
  /* El marco de regalos tiene la guirnalda arriba: el texto
     necesita más aire por ese lado que por los demás. */
  padding:clamp(8rem,17vw,11rem) clamp(6.5rem,16vw,10rem) clamp(5rem,11vw,7rem);
}
.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.884rem,3.713vw,2.472rem);
  line-height:1.15;
  color:var(--olivo);
}
.mesas .boton-grande{margin-top:0}

/* ═══════════════════════════════════════════════
   HOME · Bienvenidos y contador
   ═══════════════════════════════════════════════ */

.bienvenida{
  background:#869762 url('./fondo-bienvenidos.webp') center / cover no-repeat;
  color:#fdf8ec;
  padding:clamp(3.6rem,9vw,6.5rem) 6vw;
  text-align:center;
}
.bienvenida-caja{max-width:820px;margin:0 auto}
.bienvenida h2{
  margin:0 0 clamp(1.8rem,4vw,2.8rem);
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(2.825rem,6.552vw,4.473rem);
  line-height:1.05;
  color:#fdf8ec;
}
.bienvenida h2 em{
  display:block;margin-top:.5rem;
  font-family:var(--f-texto);font-style:normal;
  font-size:clamp(1.177rem,2.621vw,1.59rem);
  letter-spacing:.12em;
  color:rgba(253,248,236,.9);
}
.bienvenida p{
  margin:0 0 1.4rem;
  font-size:clamp(1.153rem,2.184vw,1.295rem);
  line-height:1.85;
  font-style:italic;
  color:rgba(253,248,236,.96);
}
/* El inglés va en redonda. Hace falta subir la especificidad
   porque '.bienvenida p' pesa más que '.bienvenida-en' a secas. */
.bienvenida .bienvenida-en{
  font-style:normal;
  font-size:clamp(1.083rem,2.075vw,1.201rem);
}
.bienvenida .bienvenida-en--primera{
  margin-top:clamp(1.8rem,4vw,2.6rem);
  padding-top:clamp(1.6rem,3.5vw,2.2rem);
  border-top:1px solid rgba(253,248,236,.28);
}

.contador{
  padding:clamp(3.4rem,8vw,5.6rem) 6vw clamp(3.8rem,9vw,6rem);
  text-align:center;
}
.contador-titulo{
  margin:0 0 clamp(1.4rem,3vw,2rem);
  font-family:var(--f-titulo);
  font-weight:400;
  font-size:clamp(2.237rem,5.023vw,3.532rem);
  line-height:1.1;
  color:var(--olivo);
}
.contador-titulo em{
  display:block;margin-top:.45rem;
  font-family:var(--f-texto);font-style:normal;
  font-size:clamp(1.059rem,2.184vw,1.354rem);
  letter-spacing:.1em;
  color:var(--tinta-suave);
}
.contador-arte{
  width:min(78%,520px);
  margin:0 auto clamp(1.4rem,3vw,2rem);
}
.contador .cuenta{margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.contador .boton-grande{margin-top:0}

@media (max-width:520px){
  .cuenta{gap:clamp(.9rem,4vw,1.6rem)}
  .bienvenida{background-attachment:scroll}
}

/* ── Traslados (dentro de Itinerario) ── */
.traslados-intro{
  max-width:760px;margin:0 auto clamp(1.8rem,4vw,2.6rem);
  text-align:center;font-size:clamp(1.153rem,2.184vw,1.271rem);line-height:1.8;
}
.horarios{
  max-width:900px;margin:0 auto;padding:clamp(1.6rem,3.5vw,2.2rem) clamp(1.6rem,4vw,2.6rem);
  list-style:none;
  border:1px solid rgba(116,122,72,.28);border-radius:2px;
  display:grid;gap:1.1rem;
}
.horarios b{display:block;color:var(--olivo);font-weight:600;margin-bottom:.2rem}
.horarios span{font-size:1.119rem;line-height:1.65}
.notas-titulo{
  max-width:900px;margin:clamp(2rem,4vw,2.8rem) auto clamp(.9rem,2vw,1.3rem);
  text-align:center;font-weight:400;font-size:0.942rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave);
}
.notas{max-width:900px;margin:0 auto;display:grid;gap:1.1rem}
.notas p{margin:0;font-size:1.119rem;line-height:1.75}
.notas b{color:var(--olivo);border-bottom:1px solid rgba(116,122,72,.4)}
/* El inglés va en su propio bloque, no intercalado */
.bloque-en{
  margin-top:clamp(2.6rem,6vw,4rem);
  padding-top:clamp(2.2rem,5vw,3.2rem);
  border-top:1px solid rgba(116,122,72,.18);
  font-style:italic;
}
.bloque-en .notas b{font-style:normal}

/* ── Hero de Home: fecha, nombres, panorámica, lugar ── */
.hero{padding:clamp(2rem,5vw,3.4rem) 0 clamp(2.4rem,6vw,4rem);text-align:center}
.hero-fecha{
  margin:0 0 clamp(.6rem,1.6vw,1rem);
  font-size:clamp(1.177rem,2.402vw,1.53rem);
  letter-spacing:.06em;
  color:var(--tinta);
}
.hero .hero-nombres{
  display:block;
  width:min(72%,560px);
  margin:0 auto clamp(.4rem,1.4vw,1rem);
}
.hero .hero-lienzo img{max-height:none}
.hero .hero-lugar{
  margin:clamp(.8rem,2vw,1.4rem) 0 0;
  font-size:clamp(1.237rem,2.621vw,1.648rem);
  letter-spacing:.04em;
  color:var(--tinta);
  text-transform:none;
}
.hero .hero-lugar span{display:block}
.hero .hero-lienzo img{width:min(92%,980px);margin:0 auto}

/* ═══════════════════════════════════════════════
   AJUSTES DE LOS MOCKS DEL CLIENTE
   ═══════════════════════════════════════════════ */

/* El inglés de las portadas va en bloque aparte, no intercalado */
.portada-en{font-style:italic;color:var(--tinta-suave);margin-top:.9rem}
.portada--sinborde{border-bottom:0}
.titulo-seccion{
  margin:0;font-family:var(--f-titulo);font-weight:400;
  font-size:clamp(2.354rem,5.46vw,3.767rem);line-height:1.05;color:var(--olivo);
}
.titulo-seccion em{
  display:block;margin-top:.4rem;font-family:var(--f-texto);font-style:normal;
  font-size:clamp(1.059rem,2.184vw,1.354rem);letter-spacing:.1em;color:var(--tinta-suave);
}

/* Hero fotográfico a sangre (Turismo) */
.hero-foto img{width:100%;height:clamp(240px,42vw,560px);object-fit:cover;display:block}

/* Encabezado de bloque: título · decoración · ilustración */
.bloque-cabeza{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.4rem);
  margin-bottom:clamp(1.4rem,3vw,2rem);
}
.bloque-cabeza .bloque-titulo{margin:0}
.bloque-deco{width:min(100%,240px);margin:0 auto;opacity:.95}
.bloque-icono{width:clamp(110px,16vw,215px);justify-self:end;opacity:.95}
@media (max-width:760px){
  .bloque-cabeza{grid-template-columns:1fr auto;gap:1rem}
  .bloque-deco{display:none}
  .bloque-icono{width:clamp(84px,22vw,120px)}
}

/* Notas con barra lateral de color */
.notas--barra{
  border-left:3px solid var(--naranja);
  padding-left:clamp(1.1rem,2.5vw,1.6rem);
  gap:1.3rem;
}
.notas--verde{border-left-color:var(--salvia)}

/* Recuadro de aviso (nota de traslados en Hoteles) */
.nota-recuadro{
  max-width:900px;margin:0 auto;
  padding:clamp(1.6rem,4vw,2.4rem) clamp(1.6rem,4vw,2.6rem);
  border:1px solid rgba(116,122,72,.3);border-radius:2px;
  text-align:center;
}
.nota-recuadro h4{
  margin:0 0 1rem;font-weight:400;font-size:0.942rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--olivo);
  border-bottom:1px solid rgba(116,122,72,.4);display:inline-block;padding-bottom:.3rem;
}
.nota-recuadro p{margin:0 0 .6rem;font-size:1.153rem;line-height:1.7}
.nota-en{font-style:italic;color:var(--tinta-suave)}

/* RSVP a dos columnas: sobre y texto */
.rsvp-doble{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:clamp(2rem,5vw,4.5rem);
}
.rsvp-sobre{width:100%}
.rsvp-texto{text-align:center}
.rsvp-monograma{width:clamp(90px,11vw,150px);margin:0 auto clamp(1.6rem,4vw,2.6rem)}
.rsvp-texto p{margin:0 0 1.2rem;font-size:clamp(1.153rem,2.184vw,1.271rem);line-height:1.8}
.rsvp-en{font-style:italic;color:var(--tinta-suave)}
.rsvp-texto #wa-zona{margin-top:clamp(1.8rem,4vw,2.6rem)}
@media (max-width:820px){
  .rsvp-doble{grid-template-columns:1fr}
  .rsvp-sobre{width:min(78%,420px);margin:0 auto}
}

/* Regalos */
.regalos-en{font-style:italic;color:var(--tinta-suave)}
.muchas-gracias{
  width:min(70%,330px);
  margin:clamp(2.4rem,5vw,3.4rem) auto 0;
}
.notas-titulo em{
  display:block;margin-top:.35rem;
  font-style:italic;letter-spacing:.1em;text-transform:none;
  font-size:0.966rem;color:var(--tinta-suave);
}


/* ── Aparición suave al entrar en pantalla ── */
.revelar{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .revelar{opacity:1;transform:none;transition:none}
}
/* Enlaces y botones con transición propia */
a,.boton-grande,.mapa{transition:color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ── Tarjetas de "También vale la pena" ── */
.tiendas-mas h4{
  margin:clamp(2.4rem,5vw,3.4rem) 0 clamp(1.4rem,3vw,2rem);
  text-align:center;font-weight:400;
  font-family:var(--f-titulo);
  font-size:clamp(1.766rem,3.494vw,2.472rem);
  color:var(--olivo);
}
.tiendas-mas h4 em{
  display:block;margin-top:.35rem;
  font-family:var(--f-texto);font-style:italic;
  font-size:1rem;letter-spacing:.12em;color:var(--tinta-suave);
}
.tarjetas-mas{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1.2rem,2.5vw,1.8rem);
}
.tarjetas-mas li{
  padding:clamp(1.4rem,3vw,2rem);
  background:var(--crema);
  border:1px solid rgba(116,122,72,.22);
  border-radius:2px;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.tarjetas-mas li:hover{border-color:rgba(116,122,72,.5);transform:translateY(-3px)}
.tarjetas-mas h5{
  margin:0 0 .5rem;font-size:1.271rem;font-weight:600;color:var(--olivo);
}
.tarjetas-mas p{margin:0 0 .7rem;font-size:1.107rem;line-height:1.6}
.tarjetas-mas span{font-size:1.012rem;color:var(--tinta-suave)}

/* Foto del hero de Turismo completa, sin recortar */
.hero-foto img{height:auto;max-height:none;object-fit:contain}

/* Guirnalda ancha como arte de subsección */
.subseccion-arte--ancha{width:min(78%,620px)}

/* Cierre de página más ceñido */
.seccion + .sep{padding-top:clamp(1.6rem,3.5vw,2.4rem)}

/* Guirnalda que encabeza el bloque de Regalos */
.regalos-guirnalda{
  width:min(88%,620px);
  margin:0 auto clamp(1.8rem,4vw,2.8rem);
}

/* ═══════════════════════════════════════════════
   FOTOS ENMARCADAS Y DETALLES  (1er feedback)
   Las fotos del cliente ya traen su marco pintado,
   con bordes irregulares: no se recortan ni se
   fuerza proporción, o se cortarían las esquinas.
   ═══════════════════════════════════════════════ */

.galeria img,
.galeria > li:nth-child(6n+1) img,
.galeria > li:nth-child(6n+4) img,
.destino-foto img{
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
  background:none;
  border-radius:0;
}
@media (max-width:820px){
  .galeria > li img,
  .galeria > li:nth-child(6n+1) img,
  .galeria > li:nth-child(6n+4) img{aspect-ratio:auto}
}

/* Azulejo sobre el título de cada ficha */
.ficha-tile{
  width:clamp(34px,4.2vw,50px);
  margin:0 0 .9rem;
  opacity:.95;
}
.destino--invertido .ficha-tile{margin-left:0}

/* Divisor: regla pintada a los lados y motivo al centro */
.divisor{
  max-width:1180px;
  margin:clamp(1.4rem,3vw,2.2rem) auto;
  display:flex;align-items:center;
  gap:clamp(.8rem,2vw,1.4rem);
}
.divisor::before,.divisor::after{
  content:'';
  flex:1;
  height:10px;
  background:var(--regla,url('./regla-verde.webp')) center/100% 100% no-repeat;
}
.divisor img{
  width:clamp(24px,3.4vw,38px);
  height:auto;
  flex:0 0 auto;
}

/* Título pegado al dibujo. Las guirnaldas nuevas cuelgan hacia abajo
   en el centro, así que no llevan tiro negativo: se solaparían.
   Cada página puede afinarlo con --tiro si su dibujo deja aire. */
.portada-guirnalda{margin-bottom:clamp(.3rem,1vw,.8rem)}
.portada-guirnalda + h1,
.portada-guirnalda + h2,
.portada-guirnalda + .titulo-seccion{margin-top:var(--tiro,0)}
.portada-emblema + .portada-guirnalda{margin-top:-.4rem}

/* Los nombres del hero no deben tocar la ilustración */
.hero .hero-nombres{margin-bottom:clamp(.8rem,2vw,1.4rem)}

/* Título que ya viene pintado dentro de la ilustración: se oculta a la
   vista pero sigue disponible para lectores de pantalla y buscadores. */
.solo-lectores{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}


/* Las ilustraciones apaisadas dejaban un hueco de 114 px frente al
   texto. No se pueden recortar sin cortar el dibujo, así que se las
   deja crecer hacia el margen exterior, donde hay aire de sobra. */
.evento{gap:clamp(1.4rem,3.4vw,2.6rem)}
.evento-arte--ancha{--sangra:clamp(0px,5.6vw,76px)}
.evento-arte--ancha img{width:calc(100% + var(--sangra));max-width:none}
.evento:not(.evento--invertido) .evento-arte--ancha img{margin-left:calc(-1 * var(--sangra))}
.evento--invertido .evento-arte--ancha img{margin-right:calc(-1 * var(--sangra))}
@media (max-width:820px){
  .evento-arte--ancha{--sangra:0px}
  .evento-arte--ancha img{width:100%;margin:0}
}

/* En los bloques invertidos (texto a la izquierda, ilustración a la
   derecha) el texto ocupa ~310 px de una columna de 539 y dejaba casi
   280 px de vacío contra la imagen. Se ciñe al ancho de su contenido y
   se pega al lado de la ilustración, espejando el bloque de la
   Ceremonia: el aire sobrante queda en el margen exterior. */
.evento--invertido > *:not(.evento-arte){
  justify-self:end;
  max-width:100%;
  /* Alineado a la derecha para que cada línea cierre contra la
     ilustración, igual que en el bloque de la Ceremonia las líneas
     arrancan todas contra su imagen. */
  text-align:right;
}
@media (max-width:820px){
  .evento--invertido > *:not(.evento-arte){
    justify-self:stretch;
    text-align:center;
  }
}