/* Cuba Despierta · Calles famosas (views/calles.php). Se carga solo en /descubre-cuba/calles-famosas.
   Paleta de site.css más los colores de las placas de cerámica de La Habana Vieja (azul y crema).
   Animaciones comunes de redesign.css (kenburns, fadeup, data-reveal). Interacción: js/calles.js. */
.cz { --tile: #f4efe4; --navy: #1f3a68; --navy-soft: #3a5a8f; --iron: #9a9a9a; --iron-dark: #5b5b5b; }

/* ---------- 1. Cabecera con la placa colgada ---------- */
.ch { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 3rem) 0 5rem; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.ch-media { position: absolute; inset: 0; z-index: -2; }
.ch-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 60% 50%; }
html.js .ch-media img { animation: kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
.ch::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,14,14,.9) 0%, rgba(14,14,14,.6) 45%, rgba(14,14,14,.15) 85%), linear-gradient(to top, rgba(14,14,14,.92) 0%, rgba(14,14,14,0) 55%); }
@media (max-width: 767px) { .ch::before { background: linear-gradient(to top, rgba(14,14,14,.96) 0%, rgba(14,14,14,.72) 55%, rgba(14,14,14,.5) 100%); } }
.ch-in { position: relative; width: 100%; }
/* El soporte de hierro y las dos cadenas */
.ch-sign { position: relative; margin-top: 2rem; width: min(100%, 560px); padding-top: 54px; transform-origin: 50% 0; }
.ch-bracket { position: absolute; top: 0; left: -1rem; right: 2rem; height: 54px; }
.ch-bracket::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 4px; background: linear-gradient(#c4c4c4, var(--iron) 45%, var(--iron-dark)); box-shadow: 0 4px 8px rgba(0,0,0,.6); }
.ch-bracket::after { content: ''; position: absolute; right: -10px; top: -6px; width: 20px; height: 20px; border-radius: 50%; border: 5px solid var(--iron); }
.ch-bracket i { position: absolute; top: 8px; width: 3px; height: 46px; background: repeating-linear-gradient(to bottom, #b5b5b5 0 6px, #6a6a6a 6px 9px); }
.ch-bracket i:first-child { left: 18%; }
.ch-bracket i:last-child { right: 14%; }
/* La placa: cerámica crema con doble filete azul y tornillos */
.ch-plate { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem) clamp(1.4rem, 1rem + 2vw, 2.6rem); background: var(--tile); color: var(--navy); box-shadow: 0 30px 50px -20px rgba(0,0,0,.7), inset 0 0 0 6px var(--tile), inset 0 0 0 8px var(--navy), inset 0 0 0 12px var(--tile), inset 0 0 0 13px var(--navy-soft); text-align: center; }
.ch-plate::before, .ch-plate::after { content: ''; position: absolute; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d6d0c4, #8f887a); }
.ch-plate::before { left: 20px; }
.ch-plate::after { right: 20px; }
.ch-k { font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--navy-soft); }
.ch-title { margin-top: .5rem; font-size: clamp(2.4rem, 1rem + 5vw, 5rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: var(--navy); }
.ch-title .serif { display: block; color: var(--brand); text-transform: none; font-size: 1.05em; }
.ch-sub { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(31,58,104,.35); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--navy-soft); }
html.js .ch-sign { animation: cz-swing 2.6s cubic-bezier(.3, 0, .3, 1) .3s both; }
html.js .ch-sign.is-nudge { animation: cz-nudge 1.4s ease-out both; }
@keyframes cz-swing { 0% { transform: translateY(-40px) rotate(-14deg); opacity: 0; } 15% { opacity: 1; } 35% { transform: rotate(9deg); } 55% { transform: rotate(-5deg); } 72% { transform: rotate(2.5deg); } 86% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes cz-nudge { 25% { transform: rotate(3deg); } 55% { transform: rotate(-1.6deg); } 80% { transform: rotate(.6deg); } 100% { transform: rotate(0); } }
.ch-lead { margin-top: 2rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.ch-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 2. Dilo como un habanero: placas que giran ---------- */
.cn { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.cn-note { max-width: 26rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 600px) { .cn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cn-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .cn-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cn-item { display: flex; flex-direction: column; gap: .8rem; perspective: 1200px; }
.cn-card { position: relative; display: grid; width: 100%; min-height: 220px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; cursor: pointer; transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.cn-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.cn-card[aria-pressed="true"] { transform: rotateY(180deg); }
.cn-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.6rem 1.2rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cn-front { background: var(--tile); color: var(--navy); box-shadow: 0 18px 30px -22px rgba(0,0,0,.55), inset 0 0 0 5px var(--tile), inset 0 0 0 7px var(--navy); transition: box-shadow .4s; }
.cn-card:hover .cn-front { box-shadow: 0 26px 40px -22px rgba(0,0,0,.6), inset 0 0 0 5px var(--tile), inset 0 0 0 7px var(--brand); }
.cn-back { background: var(--brand); color: #fff; transform: rotateY(180deg); box-shadow: 0 18px 30px -22px rgba(0,0,0,.55); }
.cn-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.cn-plate { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.cn-hint { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.cn-pop { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); line-height: 1; }
.cn-nota { font-size: 13.5px; line-height: 1.5; color: #fff; }
.cn-go { align-self: center; 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; }
.cn-go svg { transition: transform .45s var(--ease-out); }
.cn-go:hover svg { transform: translateX(5px); }

/* ---------- 3. El recorrido ---------- */
.cr { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--ink-900); color: #fff; scroll-margin-top: var(--hdr-h); overflow: hidden; }
.cr-note { max-width: 22rem; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
.cr-note b { color: #fff; }
.cr-route { --road-x: 22px; position: relative; padding-block: 1rem; }
@media (min-width: 900px) { .cr-route { --road-x: 50%; } }
/* La calle: asfalto con línea discontinua; la parte recorrida se pinta de rojo */
.cr-road { position: absolute; top: 0; bottom: 0; left: var(--road-x); width: 16px; translate: -50% 0; background: #2b2b2b; border-inline: 1px solid #3a3a3a; }
.cr-road::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 14px, transparent 14px 28px); }
.cr-road span { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--brand), var(--brand-light)); transform: scaleY(var(--fill, 0)); transform-origin: top; opacity: .85; }
html:not(.js) .cr-road span { transform: none; }
.cr-list { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3rem; }
.cr-stop { position: relative; padding-left: calc(var(--road-x) + 32px); }
@media (min-width: 900px) {
  .cr-stop { width: 50%; padding: 0 3.5rem 0 0; }
  .cr-stop.is-right { margin-left: 50%; padding: 0 0 0 3.5rem; }
}
.cr-pin { position: absolute; top: 1.4rem; left: var(--road-x); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; translate: -50% 0; border-radius: 50%; background: var(--brand); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 0 0 6px var(--ink-900), 0 0 0 8px rgba(255,90,71,.5); }
@media (min-width: 900px) { .cr-pin { left: 100%; } .cr-stop.is-right .cr-pin { left: 0; } }
html.js .cr-stop.is-in .cr-pin { animation: cz-pop .7s var(--ease-out) .2s both; }
@keyframes cz-pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.cr-card { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 30px 50px -30px rgba(0,0,0,.8); transition: transform .6s var(--ease-out); }
.cr-card:hover, .cr-card:focus-visible { transform: translateY(-6px); }
.cr-card:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 4px; }
.cr-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cr-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.cr-card:hover .cr-img img { transform: scale(1.06); }
.cr-body { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.5rem; }
.cr-plate { position: relative; align-self: flex-start; margin-top: -2.6rem; padding: .55rem 1rem; background: var(--tile); color: var(--navy); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; box-shadow: inset 0 0 0 3px var(--tile), inset 0 0 0 5px var(--navy), 0 10px 18px -10px rgba(0,0,0,.6); }
.cr-d { font-size: 15px; line-height: 1.6; color: var(--muted); }
.cr-go { display: inline-flex; align-items: center; gap: .4rem; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); text-decoration: none; }
.cr-go svg { transition: transform .45s var(--ease-out); }
.cr-card:hover .cr-go svg, .cr-soon .cr-go:hover svg { transform: translateX(5px); }
.cr-soon { padding: 1.4rem 1.5rem; border: 1px dashed rgba(255,255,255,.35); }
.cr-soon p { font-size: 15.5px; line-height: 1.6; color: #e0e0e0; }
.cr-soon .cr-go { margin-top: .9rem; color: var(--brand-light); }
.cr-end .cr-pin { background: var(--ink-900); border: 2px dashed var(--brand-light); color: var(--brand-light); }

/* ---------- 4. Sigue descubriendo ---------- */
.cx { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.cx ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 560px) { .cx ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cx ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cx ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cx 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); }
.cx-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); }
.cx-txt { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.cx-n { font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.cx-c { font-size: 12px; color: var(--muted); }
.cx a > svg { color: var(--brand); transition: transform .45s var(--ease-out); }
.cx a:hover { border-color: var(--ink); transform: translateY(-3px); }
.cx a:hover .cx-ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.cx a:hover > svg { transform: translateX(5px); }

/* ---------- Movimiento reducido: sin balanceo ni giros 3D (la placa enseña directamente la otra cara) ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .ch-sign, html.js .ch-sign.is-nudge, html.js .cr-stop.is-in .cr-pin { animation: none; }
  .cn-card, .cr-card, .cr-img img, .cx a { transition: none; }
  .cn-card[aria-pressed="true"] { transform: none; }
  .cn-back { transform: none; visibility: hidden; }
  .cn-card[aria-pressed="true"] .cn-back { visibility: visible; }
  .cn-card[aria-pressed="true"] .cn-front { visibility: hidden; }
}

/* ---------- Archivo (views/_cat_archivo.php): placas de calle de azulejo ---------- */
.arc.is-calles { --arc-accent: var(--navy); }
.arc.is-calles .arc-t { padding: .4rem .6rem; background: var(--tile); border: 2px solid var(--navy); color: var(--navy); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; }