/* Cuba Despierta · Pueblos (views/pueblos.php). Se carga solo en /descubre-cuba/pueblos.
   Paleta de site.css más los colores de las fachadas coloniales, la madera de las puertas y la teja.
   Animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal). Sin JS propio. */
.pz { --ocre: #d6a24a; --azul: #5b93b9; --rosa: #d68f97; --verde: #74a68b; --amarillo: #e6c55f; --blanco: #eee5d2;
      --teja: #b5532f; --teja-dark: #7e3418; --wood: #6b3f22; --wood-dark: #3f2412; --paper: #f3ecdc; --azulejo: #1f4e8c; }
.pz .is-ocre { --wall: var(--ocre); } .pz .is-azul { --wall: var(--azul); } .pz .is-rosa { --wall: var(--rosa); }
.pz .is-verde { --wall: var(--verde); } .pz .is-amarillo { --wall: var(--amarillo); } .pz .is-blanco { --wall: var(--blanco); }

/* ---------- 1. Cabecera: la calle se levanta casa a casa ---------- */
.ph { --street: clamp(86px, 11vw, 150px); position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 calc(var(--street) + 3rem); background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.ph-media { position: absolute; inset: 0; z-index: -3; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 40%; }
html.js .ph-media img { animation: kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
.ph::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(14,14,14,.92) 0%, rgba(14,14,14,.66) 45%, rgba(14,14,14,.15) 85%), linear-gradient(to top, rgba(14,14,14,.85) 0%, rgba(14,14,14,0) 55%); }
@media (max-width: 767px) { .ph::before { background: linear-gradient(to top, rgba(14,14,14,.95) 0%, rgba(14,14,14,.72) 55%, rgba(14,14,14,.5) 100%); } }
.ph-in { position: relative; width: 100%; }
.ph-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.ph-title { margin-top: 1.2rem; font-size: clamp(2.6rem, .8rem + 6.4vw, 6.6rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.ph-title .serif { color: var(--amarillo); font-size: 1.08em; text-transform: none; }
.ph-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.ph-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* La calle: fachadas de colores con teja, puerta de arco y ventana con reja */
.ph-street { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; display: flex; align-items: flex-end; height: var(--street); padding-top: 1rem; border-bottom: 10px solid #5e5446; }
.ph-house { position: relative; flex: 1; height: 72%; margin-left: -1px; background: var(--wall); box-shadow: inset -6px 0 0 rgba(0,0,0,.08); }
.ph-house:nth-child(odd) { height: 64%; }
.ph-house.t-b { height: 84%; }
.ph-roof { position: absolute; left: -4%; right: -4%; bottom: 100%; height: 14px; background: repeating-linear-gradient(90deg, var(--teja) 0 9px, var(--teja-dark) 9px 11px); border-radius: 3px 3px 0 0; }
.ph-door { position: absolute; left: 50%; bottom: 0; width: 26%; height: 58%; translate: -50% 0; border-radius: 999px 999px 0 0; background: linear-gradient(90deg, var(--wood) 0 48%, var(--wood-dark) 48% 52%, var(--wood) 52%); box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.ph-win { position: absolute; left: 10%; top: 22%; width: 18%; height: 36%; background: repeating-linear-gradient(90deg, #2c241c 0 2px, transparent 2px 6px), #6d5a45; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.ph-house.t-b .ph-win { left: 50%; top: 10%; width: 44%; height: 20%; translate: -50% 0; border-bottom: 3px solid #2c241c; }
.ph-house.t-v .ph-door { left: 64%; }
/* Torre del campanario, como la de San Francisco en Trinidad */
.ph-house.t-t { flex: .7; height: 100%; }
.ph-house.t-t .ph-roof { left: 22%; right: 22%; height: 26px; bottom: calc(100% - 1px); border-radius: 50% 50% 0 0; background: var(--wall); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.ph-house.t-t .ph-win { left: 50%; top: 10%; width: 32%; height: 24%; translate: -50% 0; border-radius: 999px 999px 0 0; background: #2c241c; }
.ph-house.t-t .ph-door { width: 34%; height: 40%; }
html.js .ph-house { animation: pz-rise 1s var(--ease-out) both; animation-delay: calc(.5s + var(--i) * 85ms); transform-origin: bottom; }
@keyframes pz-rise { from { transform: translateY(105%); } to { transform: none; } }
@media (max-width: 639px) { .ph-house:nth-child(n+8) { display: none; } }

/* ---------- 2. Puerta a puerta ---------- */
.pp { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.pp-note { max-width: 22rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem 3rem; }
@media (min-width: 760px) { .pp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .pp-list.is-solo { grid-template-columns: minmax(0, 1fr); } }
.pp-item { display: flex; flex-direction: column; gap: 1.8rem; }
@media (min-width: 900px) { .pp-list.is-solo .pp-item { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 4.5rem; align-items: center; } }

/* La fachada: tejado, pared de color, portón con dos hojas de madera y placa de azulejo */
.pp-house { position: relative; display: block; max-width: 460px; width: 100%; margin-inline: auto; padding-top: 22px; color: inherit; text-decoration: none; }
.pp-house:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.pp-roof { position: absolute; top: 0; left: -5%; right: -5%; height: 26px; background: repeating-linear-gradient(90deg, var(--teja) 0 16px, var(--teja-dark) 16px 19px); border-radius: 6px 6px 0 0; box-shadow: 0 8px 12px -6px rgba(0,0,0,.45); z-index: 1; }
.pp-wall { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: 2.4rem 2rem 0; background: var(--wall); box-shadow: inset 0 -14px 0 rgba(0,0,0,.08), 0 30px 40px -30px rgba(0,0,0,.55); }
.pp-wall::after { content: ''; position: absolute; left: -3%; right: -3%; bottom: -12px; height: 12px; background: #8d8270; }
.pp-arch { position: relative; display: block; width: 78%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; border: 8px solid rgba(255,255,255,.75); border-bottom: 0; background: var(--wood-dark); }
.pp-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), filter .8s; }
.pp-house:hover .pp-arch img { transform: scale(1.07); filter: saturate(1.15); }
.pp-leaf { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(to bottom, transparent 0 22%, rgba(0,0,0,.18) 22% 23%), linear-gradient(90deg, var(--wood), #84512e 50%, var(--wood)); box-shadow: inset 0 0 0 6px rgba(0,0,0,.18); transition: transform 1.6s cubic-bezier(.6,.05,.25,1) .55s; backface-visibility: hidden; }
.pp-leaf.is-l { left: 0; transform-origin: left center; transform: perspective(1100px) rotateY(-112deg); }
.pp-leaf.is-r { right: 0; transform-origin: right center; transform: perspective(1100px) rotateY(112deg); }
.pp-leaf::after { content: ''; position: absolute; top: 55%; width: 6px; height: 22px; border-radius: 3px; background: #c9a35a; }
.pp-leaf.is-l::after { right: 10px; } .pp-leaf.is-r::after { left: 10px; }
html.js .pp-item[data-reveal]:not(.is-in) .pp-leaf { transform: perspective(1100px) rotateY(0); }
/* Al pasar el ratón, las hojas se entornan un poco, como saludando */
.pp-house:hover .pp-leaf.is-l { transform: perspective(1100px) rotateY(-96deg); transition-delay: 0s; transition-duration: .7s; }
.pp-house:hover .pp-leaf.is-r { transform: perspective(1100px) rotateY(96deg); transition-delay: 0s; transition-duration: .7s; }
/* Placa de azulejo con el nombre de la calle */
.pp-sign { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; margin-bottom: 1.6rem; padding: .7rem 1.4rem .6rem; background: #fbf8f0; border: 3px solid var(--azulejo); outline: 1px solid #fbf8f0; box-shadow: 0 10px 16px -10px rgba(0,0,0,.5); color: var(--azulejo); text-align: center; transition: transform .5s var(--ease-out); }
.pp-sign b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); line-height: 1; }
.pp-sign span { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.pp-house:hover .pp-sign { transform: rotate(-2deg) translateY(-2px); }

.pp-body { display: flex; flex-direction: column; gap: 1rem; max-width: 36rem; }
.pp-num { font-size: clamp(3rem, 2rem + 3vw, 5rem); font-weight: 800; line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.pp-t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.pp-t a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease-out); }
.pp-t a:hover { background-size: 100% 2px; }
.pp-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.pp-pts { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.pp-pts li { position: relative; padding-left: 1.6rem; font-size: 15px; line-height: 1.6; color: var(--text-soft, var(--muted)); }
.pp-pts li::before { content: ''; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--teja); transform: rotate(45deg); }
.pp-pts strong { color: var(--ink); }
.pp-go { margin-top: .6rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding-bottom: .15rem; border-bottom: 2px solid var(--brand); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); text-decoration: none; }
.pp-go svg { transition: transform .45s var(--ease-out); }
.pp-go:hover svg { transform: translateX(5px); }
.pp-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- 2b. Más pueblos: fachadas pequeñas ---------- */
.pa { padding-block: 0 clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.pp + .pa { margin-top: -1rem; }
.pa:first-child, .ph + .pa { padding-top: clamp(4rem, 3rem + 4vw, 7rem); }
.pa-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 1.6rem; }
@media (min-width: 560px) { .pa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pa-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pa-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pa-card { position: relative; display: flex; flex-direction: column; height: 100%; padding-top: 16px; color: var(--ink); text-decoration: none; }
.pa-card .pp-roof { height: 18px; background: repeating-linear-gradient(90deg, var(--teja) 0 11px, var(--teja-dark) 11px 13px); }
.pa-wall { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.4rem 1.2rem 0; background: var(--wall); box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); transition: transform .5s var(--ease-out), box-shadow .5s; }
.pa-arch { display: block; width: 76%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; border: 5px solid rgba(255,255,255,.75); border-bottom: 0; background: var(--wood-dark); }
.pa-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.pa-wall .pp-sign { margin-bottom: 1rem; padding: .45rem .9rem .4rem; }
.pa-wall .pp-sign b { font-size: 1.2rem; }
.pa-wall .pp-sign span { font-size: 9px; }
.pa-t { margin-top: 1.1rem; font-size: 15px; font-weight: 800; line-height: 1.3; }
.pa-m { margin-top: .35rem; font-size: 12px; color: var(--muted); }
.pa-card:hover .pa-wall { transform: translateY(-5px); box-shadow: inset 0 -10px 0 rgba(0,0,0,.08), 0 22px 30px -22px rgba(0,0,0,.5); }
.pa-card:hover .pa-arch img { transform: scale(1.07); }
.pa-card:hover .pp-sign { transform: rotate(-2deg); }
.pa-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }

/* ---------- 3. Las siete primeras villas ---------- */
.pv { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--paper); border-block: 1px solid #e2d8c2; scroll-margin-top: var(--hdr-h); overflow: hidden; }
.pv-note { max-width: 26rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.pv-map { position: relative; aspect-ratio: 1740 / 600; margin: .5rem 0 2.5rem; }
.pv-map img { position: absolute; inset: 0; width: 100%; height: 100%; }
html.js .pv-map[data-reveal] { opacity: 1; transform: none; }
.pv-pin { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: flex; align-items: center; gap: .45rem; translate: -13px -50%; transition: opacity .4s ease, transform .8s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.3s + var(--i) * 260ms); }
.pv-pin i { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(0,0,0,.35); }
.pv-pin i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand); animation: pin-pulse 2.8s ease-out infinite; animation-delay: calc(var(--i) * .4s); }
.pv-pin b { padding: .25rem .5rem; background: rgba(255,255,255,.92); font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(0,0,0,.3); }
.pv-pin.is-right { flex-direction: row-reverse; translate: calc(-100% + 13px) -50%; }
html.js .pv-map[data-reveal]:not(.is-in) .pv-pin { opacity: 0; transform: translateY(-60px); }
@media (max-width: 899px) { .pv-pin b { display: none; } .pv-pin i { width: 20px; height: 20px; font-size: 10px; } .pv-pin { translate: -10px -50%; } .pv-pin.is-right { translate: -10px -50%; } }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 700px) { .pv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pv-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pv-list a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'n y go' 'txt txt txt'; align-items: center; gap: .6rem .8rem; height: 100%; padding: 1.1rem 1.2rem 1.2rem; background: #fff; border: 1px solid #e2d8c2; color: var(--ink); text-decoration: none; transition: border-color .3s, transform .5s var(--ease-out), box-shadow .5s; }
.pv-n { grid-area: n; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; }
.pv-y { grid-area: y; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pv-list a > svg { grid-area: go; color: var(--brand); transition: transform .45s var(--ease-out); }
.pv-txt { grid-area: txt; display: flex; flex-direction: column; gap: .25rem; }
.pv-txt b { font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.pv-txt em { font-family: var(--serif); font-size: 15px; line-height: 1.25; color: var(--brand-dark); }
.pv-txt span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.pv-list a:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 18px 30px -22px rgba(0,0,0,.5); }
.pv-list a:hover > svg { transform: translateX(5px); }
.pv-more { margin-top: 2.2rem; }
.pv-credit { margin-top: 1.6rem; font-size: 11px; color: var(--muted); }
.pv-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 4. Sigue descubriendo ---------- */
.px { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.px ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 560px) { .px ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .px ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .px ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s, transform .5s var(--ease-out); }
.px-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: var(--soft); color: var(--brand-dark); transition: background-color .35s, color .35s, transform .5s var(--ease-out); }
.px-txt { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.px-n { font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.px-c { font-size: 12px; color: var(--muted); }
.px a > svg { color: var(--brand); transition: transform .45s var(--ease-out); }
.px a:hover { border-color: var(--ink); transform: translateY(-3px); }
.px a:hover .px-ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.px a:hover > svg { transform: translateX(5px); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .ph-house { animation: none; }
  .pp-arch img, .pp-leaf, .pp-sign, .pv-pin, .pv-list a, .px a { transition: none; }
  html.js .pp-item[data-reveal]:not(.is-in) .pp-leaf.is-l { transform: perspective(1100px) rotateY(-112deg); }
  html.js .pp-item[data-reveal]:not(.is-in) .pp-leaf.is-r { transform: perspective(1100px) rotateY(112deg); }
  html.js .pv-map[data-reveal]:not(.is-in) .pv-pin { opacity: 1; transform: none; }
  .pv-pin i::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .pa-wall, .pa-arch img, .pa-card .pp-sign { transition: none; } }