/* ==========================================================================
   portadas-20261004.css — la parte de hasta arriba de las 9 páginas
   interiores (eventos, actividades, restaurantes, hospedaje, galería,
   artesanos, esferas, nueve tesoros y ¿sabías qué?).

   4-oct-2026, diseño final de Uriel (después de ver 12 opciones):
   - Arriba, una BARRA DE PAPEL PICADO a todo lo ancho: banderitas de calado
     fino con figuras del pueblo (esfera, calavera, estrella, flor de
     cempasúchil y cascada), SIN fotos, en los colores del rehilete. Cuelgan
     de un cordón y se mecen apenas.
   - Debajo, el título grande con migas y texto de siempre en el color de la
     página, y UNA foto GRANDE que se funde (difuminado) entre 4 fotos con un
     movimiento lento de cine (acercamiento o paneo). Sin botones ni contadores.

   Reglas que cuidan la carga (LCP):
   - La 1.ª foto es la portada de siempre (fetchpriority=high) y está visible
     desde el arranque. Las otras 3 (.pd-cuadro) van ENCIMA, transparentes,
     y solo aparecen cuando portadas-20261004.js las enciende.
   - Sin JS o con «reducir movimiento» todo se queda quieto en la 1.ª foto.
   - Con la pestaña oculta o la portada fuera de la pantalla, nada se mueve.
   Las banderitas son máscaras SVG (img/r37/pp-*-20261004.svg).
   ========================================================================== */

.page-hero.pd{
  --pt:#2A1B4A;            /* oscuro: título */
  --pv:#C2187A;            /* vivo: subtítulo y rayas */
  --pb:#FBB200;            /* raya del párrafo */
  --pd-k:.2;               /* tamaño del título según su largo (ver abajo) */
  --pd-max:160px;
  --gut:28px;
  --col:min(1284px, calc(100vw - 2 * var(--gut)));
  --pp-alto:118px;         /* alto de la barra de papel picado */
  display:grid;
  grid-template-columns:[orilla-i] minmax(var(--gut),1fr) [c-i] repeat(12,minmax(0,calc(1284px / 12))) [c-f] minmax(var(--gut),1fr) [orilla-f];
  grid-template-rows:[pp] var(--pp-alto) [cabeza] auto [arriba] minmax(0,1fr) [kick] auto [tit] auto [txt] auto [abajo] minmax(0,1fr) [fin];
  padding:0 0 64px;
  color:var(--tinta);
  background:#FBF6EE;
  overflow:hidden;
  isolation:isolate;
}
.page-hero.pd .inner{display:contents}
.page-hero.pd::before,
.page-hero.pd::after{content:none}

/* ── la barra de papel picado ── */
.page-hero.pd .pp{
  position:relative;z-index:4;
  grid-column:orilla-i / orilla-f;grid-row:pp;
  display:flex;justify-content:center;gap:10px;
  height:calc(var(--pp-alto) + 14px);
  padding-top:8px;
  overflow:hidden;
  pointer-events:none;
}
/* el cordón */
.page-hero.pd .pp::before{
  content:"";position:absolute;left:0;right:0;top:8px;height:2px;
  background:#5b4a3a;opacity:.55;
}
.page-hero.pd .pp i{
  --c:#EC0A82;
  flex:0 0 auto;
  width:88px;height:116px;
  background:var(--c);
  -webkit-mask:url(img/r37/pp-esfera-20261004.svg) 0 0 / 100% 100% no-repeat;
          mask:url(img/r37/pp-esfera-20261004.svg) 0 0 / 100% 100% no-repeat;
  transform-origin:50% 0;
  filter:drop-shadow(0 3px 2px rgba(60,40,30,.18));
  animation:pp-mece 4.6s ease-in-out infinite alternate;
}
/* figuras: 5 que se turnan */
.page-hero.pd .pp i:nth-child(5n+2){-webkit-mask-image:url(img/r37/pp-calavera-20261004.svg);mask-image:url(img/r37/pp-calavera-20261004.svg)}
.page-hero.pd .pp i:nth-child(5n+3){-webkit-mask-image:url(img/r37/pp-estrella-20261004.svg);mask-image:url(img/r37/pp-estrella-20261004.svg)}
.page-hero.pd .pp i:nth-child(5n+4){-webkit-mask-image:url(img/r37/pp-flor-20261004.svg);mask-image:url(img/r37/pp-flor-20261004.svg)}
.page-hero.pd .pp i:nth-child(5n+5){-webkit-mask-image:url(img/r37/pp-cascada-20261004.svg);mask-image:url(img/r37/pp-cascada-20261004.svg)}
/* colores del rehilete: 6 que se turnan (con 5 figuras, nunca se repite la pareja seguida) */
.page-hero.pd .pp i:nth-child(6n+2){--c:#FBB200}
.page-hero.pd .pp i:nth-child(6n+3){--c:#1CA9DD}
.page-hero.pd .pp i:nth-child(6n+4){--c:#5FB924}
.page-hero.pd .pp i:nth-child(6n+5){--c:#F7941D}
.page-hero.pd .pp i:nth-child(6n+6){--c:#8A2FA8}
/* cada una se mece a su ritmo */
.page-hero.pd .pp i:nth-child(2n){animation-duration:5.3s;animation-direction:alternate-reverse}
.page-hero.pd .pp i:nth-child(3n){animation-duration:3.9s;animation-delay:-1.2s}
.page-hero.pd .pp i:nth-child(4n+1){animation-delay:-2.4s}
@keyframes pp-mece{from{transform:rotate(-2.4deg) skewX(1deg)}to{transform:rotate(2.4deg) skewX(-1deg)}}
.page-hero.pd.pd-pausa .pp i{animation-play-state:paused}

/* ── renglón de cabeza: migas ── */
.page-hero.pd .crumb{
  position:relative;z-index:3;
  grid-column:c-i / 6;grid-row:cabeza;
  margin:18px 0 0;padding:0 0 10px;
  border-bottom:2px solid var(--tinta);
  color:var(--soft);
  font-size:12px;letter-spacing:.18em;
}
.page-hero.pd .crumb a{color:var(--tinta);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.page-hero.pd .crumb a:hover{color:var(--pv)}
.page-hero.pd .crumb a:focus-visible{outline:2px solid var(--pv);outline-offset:3px;border-radius:2px}

/* ── la foto grande: difuminado entre fotos y movimiento de cine ── */
.page-hero.pd .ph-bg{
  position:relative;inset:auto;z-index:1;
  grid-column:6 / orilla-f;grid-row:pp / fin;
  margin:46px 0 -64px;
  min-height:clamp(520px,47vw,720px);
  overflow:hidden;
  background:#e6ddd0;
  /* la orilla izquierda y la de abajo se funden con el papel */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(0deg,transparent 0,#000 24%);
          mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(0deg,transparent 0,#000 24%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.page-hero.pd .ph-bg::after{content:none}
.page-hero.pd .ph-bg picture{display:block}
.page-hero.pd .ph-bg img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:1;
  transform-origin:50% 50%;
  will-change:transform;
}
/* las otras 3 fotos, encima y apagadas hasta que el JS las prende */
.page-hero.pd .ph-bg .pd-cuadro{opacity:0;transition:opacity 2.2s ease-in-out}
.page-hero.pd .ph-bg .pd-cuadro.pd-on{opacity:1}
/* cada foto tiene su toma: acercamiento, paneo a la derecha, alejamiento, paneo a la izquierda */
.page-hero.pd .ph-bg img.pd-on{animation:pd-toma-1 11s linear forwards}
.page-hero.pd .ph-bg .pd-cuadro:nth-of-type(1).pd-on{animation-name:pd-toma-2}
.page-hero.pd .ph-bg .pd-cuadro:nth-of-type(2).pd-on{animation-name:pd-toma-3}
.page-hero.pd .ph-bg .pd-cuadro:nth-of-type(3).pd-on{animation-name:pd-toma-4}
.page-hero.pd .ph-bg .pd-cuadro.pd-on.pd-sale{opacity:0}
.page-hero.pd.pd-pausa .ph-bg img{animation-play-state:paused}
@keyframes pd-toma-1{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes pd-toma-2{from{transform:scale(1.1) translateX(-3%)}to{transform:scale(1.1) translateX(3%)}}
@keyframes pd-toma-3{from{transform:scale(1.12)}to{transform:scale(1.02)}}
@keyframes pd-toma-4{from{transform:scale(1.1) translate(3%,1%)}to{transform:scale(1.1) translate(-3%,-1%)}}

/* ── texto: subtítulo, título enorme y párrafo ── */
.page-hero.pd .ph-kicker,
.page-hero.pd h1,
.page-hero.pd p{position:relative;z-index:3;grid-column:c-i / 6;padding-right:36px}

.page-hero.pd .ph-kicker{
  grid-row:kick;
  display:flex;align-items:center;gap:14px;
  margin:28px 0 6px;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(20px,1.8vw,26px);line-height:1.2;
  letter-spacing:0;text-transform:none;
  color:var(--pv);
}
.page-hero.pd .ph-kicker::before{content:none}
.page-hero.pd .ph-kicker::after{content:"";flex:0 0 70px;height:2px;background:currentColor}

/* el tamaño sale del ancho de la columna (5 de 12) y del largo del título
   de cada página: --pd-k = 0.95 / ancho del título a 1px en Fraunces 900.
   portadas-20261004.js solo lo achica si en otro idioma ya no cabe */
.page-hero.pd h1{
  grid-row:tit;
  margin:0;
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:min(var(--pd-max), calc(var(--pd-k) * (var(--col) * 5 / 12 - 36px)));
  line-height:.9;letter-spacing:-.045em;
  color:var(--pt);
  text-shadow:none;
  font-variation-settings:"opsz" 144;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.page-hero.pd.pd-js h1{overflow-wrap:normal}
.page-hero.pd h1.pd-ajustado{font-size:var(--pd-fs)}

.page-hero.pd p{
  grid-row:txt;
  margin-top:22px;
  max-width:none;max-inline-size:calc(44ch + 36px);
  padding-left:18px;
  border-left:4px solid var(--pb);
  font-size:18px;line-height:1.55;
  color:#3d3552;
}

/* el listón arcoíris al pie */
.page-hero.pd .rb{z-index:3}

.page-hero.pd ::selection{background:var(--pv);color:#fff}

/* ── un color por página ── */
.page-hero.pd-fiesta  {--pt:#2A1B4A;--pv:#C2187A;--pb:#FBB200}   /* eventos */
.page-hero.pd-esfera  {--pt:#8E0D24;--pv:#C8102E;--pb:#1CA9DD}   /* esferas */
.page-hero.pd-mesa    {--pt:#7E3209;--pv:#B9420C;--pb:#5FB924}   /* restaurantes */
.page-hero.pd-historia{--pt:#5E4100;--pv:#8F6400;--pb:#1CA9DD}   /* ¿sabías qué? */
.page-hero.pd-sierra  {--pt:#2C5713;--pv:#3D7A14;--pb:#F7941D}   /* actividades */
.page-hero.pd-aguas   {--pt:#00566A;--pv:#007A93;--pb:#EC0A82}   /* nueve tesoros */
.page-hero.pd-descanso{--pt:#16375E;--pv:#1D66A8;--pb:#FBB200}   /* hospedaje */
.page-hero.pd-lente   {--pt:#521C65;--pv:#8A2FA8;--pb:#5FB924}   /* galería */
.page-hero.pd-taller  {--pt:#820E55;--pv:#B8106F;--pb:#1CA9DD}   /* artesanos */

/* ── largo de cada título (en español): entre más largo, más chico ── */
.page-hero.pd-fiesta  {--pd-k:.305}    /* Eventos */
.page-hero.pd-descanso{--pd-k:.225}   /* Hospedaje */
.page-hero.pd-taller  {--pd-k:.2375}   /* Artesanos */
.page-hero.pd-sierra  {--pd-k:.209}   /* Actividades */
.page-hero.pd-mesa    {--pd-k:.179}   /* Restaurantes */
.page-hero.pd-historia{--pd-k:.181}    /* ¿Sabías qué? */
.page-hero.pd-lente   {--pd-k:.162}    /* Chignahuapan en imágenes (2 renglones) */
.page-hero.pd-esfera  {--pd-k:.215}   /* La Cuna de la Esfera (2 renglones) */
.page-hero.pd-aguas   {--pd-k:.22}   /* Los nueve tesoros (2 renglones) */

/* ── tableta y celular: papel picado, título, la foto GRANDE a todo lo
   ancho y el párrafo debajo ── */
@media(max-width:1000px){
  .page-hero.pd{
    --gut:20px;--pd-max:92px;--pp-alto:84px;
    grid-template-columns:[orilla-i] var(--gut) [c-i] minmax(0,1fr) [c-f] var(--gut) [orilla-f];
    grid-template-rows:[pp] var(--pp-alto) [cabeza] auto [kick] auto [tit] auto [foto] auto [txt] auto [fin];
    padding:0 0 44px;
  }
  .page-hero.pd .pp{gap:7px;height:calc(var(--pp-alto) + 10px);padding-top:6px}
  .page-hero.pd .pp::before{top:6px}
  .page-hero.pd .pp i{width:62px;height:82px}
  .page-hero.pd .crumb{grid-column:c-i / c-f;margin-top:14px;font-size:11px;letter-spacing:.16em}
  .page-hero.pd .ph-kicker,
  .page-hero.pd h1,
  .page-hero.pd p{grid-column:c-i / c-f;padding-right:0}
  .page-hero.pd .ph-kicker{font-size:20px;margin:20px 0 4px}
  .page-hero.pd .ph-kicker::after{flex-basis:44px}
  .page-hero.pd h1{font-size:min(var(--pd-max), calc(var(--pd-k) * (100vw - 40px)))}
  .page-hero.pd .ph-bg{
    grid-column:orilla-i / orilla-f;grid-row:foto;
    min-height:0;aspect-ratio:1 / 1.05;
    margin:20px 0 0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 76%,transparent 100%);
  }
  .page-hero.pd p{margin-top:6px;font-size:16.5px;padding-left:14px;max-inline-size:none}
}
@media(min-width:601px) and (max-width:1000px){
  .page-hero.pd .ph-bg{aspect-ratio:16 / 11}
}
@media(max-width:400px){
  .page-hero.pd .pp{gap:6px}
  .page-hero.pd .pp i{width:56px;height:74px}
}

/* «reducir movimiento»: todo quieto en la 1.ª foto */
@media (prefers-reduced-motion:reduce){
  .page-hero.pd .ph-bg .pd-cuadro{display:none}
  .page-hero.pd .ph-bg img{animation:none!important;transform:none!important}
  .page-hero.pd .pp i{animation:none}
}