/* Cuba Despierta · ¿Sabías que…? (views/sabiasque.php). Se carga solo en /descubre-cuba/sabias-que.
   Paleta de site.css más la luz cálida de la bombilla (ámbar) sobre negro. Animaciones comunes de redesign.css
   (fadeup, lineup, data-reveal). Panel de letras y generador: js/sabiasque.js. */
.sq { --amber: #ffc04d; --amber-soft: #ffe2a3; --night: #0f0e0d; --flap: #1d1b19; }

/* ---------- 1. Cabecera: la bombilla y el panel de letras ---------- */
.sqh { position: relative; padding: calc(var(--hdr-h) + 3.5rem) 0 4.5rem; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 50% 60% at 78% 40%, rgba(255,192,77,.10), transparent 70%), var(--night); }
.sqh-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .sqh-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; min-height: min(calc(100svh - var(--hdr-h) - 8rem), 640px); } }
.sqh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.sqh-kicker .hx-line { background: var(--amber); }
.sqh-title { margin-top: 1.2rem; font-size: clamp(3rem, 1rem + 7vw, 7.2rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.sqh-title .serif { color: var(--amber); font-size: 1.08em; text-transform: none; letter-spacing: -.02em; }
/* Panel de letras: casillas con una línea en medio, como los paneles de los aeropuertos */
.sqh-board { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .5rem; }
.sqh-board-l { font-size: 10.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #a39a8c; }
.sqh-cells { display: flex; gap: 3px; }
.sqh-cell { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(19px, 1.2rem + 1vw, 34px); aspect-ratio: 5 / 7; border-radius: 3px; perspective: 120px;
  background: linear-gradient(#2a2724 0 49%, #000 49% 51%, #23201d 51%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.4); }
.sqh-cell b { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 700; font-size: clamp(.8rem, .5rem + .9vw, 1.35rem); color: var(--amber-soft); }
.sqh-cell.is-flip b { animation: sq-flap .07s linear; }
@keyframes sq-flap { from { transform: rotateX(-80deg); opacity: .4; } }
.sqh-lead { margin-top: 1.6rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e2dcd2; }
.sqh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* La bombilla: el cristal, el filamento y la rosca se dibujan; luego se enciende con un parpadeo */
.sqh-bulb { position: relative; justify-self: center; width: min(78vw, 380px); }
@media (max-width: 999px) { .sqh-bulb { position: absolute; z-index: -1; top: calc(var(--hdr-h) + 1rem); right: -14vw; width: min(62vw, 300px); opacity: .45; } }
.sqh-bulb svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.sqh-glow { position: absolute; left: 50%; top: 34%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,192,77,.55), rgba(255,140,40,.18) 35%, transparent 65%); }
.sqh-glass, .sqh-fil, .sqh-base { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.sqh-glass { stroke: #f4ead8; stroke-width: 3; fill: rgba(255,214,140,.12); }
.sqh-fil { stroke: var(--amber); stroke-width: 3.5; filter: drop-shadow(0 0 6px var(--amber)); }
.sqh-base { stroke: #b9b0a2; stroke-width: 5; }
.sqh-rays path { fill: none; stroke: var(--amber); stroke-width: 4; stroke-linecap: round; }
html.js .sqh-glass { animation: sq-draw 1.6s ease-in-out .2s both, sq-glassfill .4s ease 2.2s both; }
html.js .sqh-base { animation: sq-draw 1s ease-in-out .9s both; }
html.js .sqh-fil { animation: sq-draw 1s ease-in-out 1.3s both; }
html.js .sqh-glow, html.js .sqh-rays { animation: sq-on 1.1s linear 2.2s both; }
@keyframes sq-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sq-glassfill { from { fill: rgba(255,214,140,0); } }
@keyframes sq-on { 0% { opacity: 0; } 12% { opacity: .9; } 20% { opacity: .1; } 34% { opacity: 1; } 44% { opacity: .25; } 60%, 100% { opacity: 1; } }

/* ---------- 2. Fichas que se encienden ---------- */
.sqd { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.sqd-note { max-width: 24rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.sqd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.sqd-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px) {
  .sqd-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .sqd-item:nth-child(even) .sqd-img { order: 2; }
}
.sqd-img { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--night); box-shadow: 0 30px 50px -34px rgba(0,0,0,.55); }
.sqd-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.sqd-img:hover img { transform: scale(1.04); }
/* Al aparecer, la foto parpadea y se enciende como una bombilla */
html.js .sqd-item[data-reveal]:not(.is-in) .sqd-img img { opacity: 0; }
.sqd-item.is-in .sqd-img img { animation: sq-on 1.1s linear .2s both; }
.sqd-n { position: absolute; left: 0; top: 1.2rem; padding: .45rem .9rem .45rem 1.1rem; background: var(--amber); color: var(--night); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.sqd-body { display: flex; flex-direction: column; gap: 1rem; max-width: 36rem; }
.sqd-k { display: inline-flex; align-items: center; gap: .45rem; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.sqd-t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.sqd-t a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--amber), var(--amber)) 0 92% / 0 .35em no-repeat; transition: background-size .6s var(--ease-out); }
.sqd-t a:hover { background-size: 100% .35em; }
.sqd-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.sqd-pts { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.sqd-pts li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .8rem 1rem; background: #fbf7ef; border-left: 3px solid var(--amber); }
.sqd-pts b { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.sqd-pts span { font-size: 15px; line-height: 1.55; color: var(--muted); }
.sqd-go { margin-top: .4rem; 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; }
.sqd-go svg { transition: transform .45s var(--ease-out); }
.sqd-go:hover svg { transform: translateX(5px); }
.sqd-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- Archivo (views/_cat_archivo.php) ---------- */
.arc.is-sabiasque { --arc-accent: #b7791f; }

/* ---------- 3. Enciende otro dato ---------- */
.sqx { position: relative; padding-block: clamp(4rem, 3rem + 4vw, 7rem); color: #fff; background: radial-gradient(ellipse 50% 70% at 70% 50%, rgba(255,192,77,.08), transparent 70%), var(--night); scroll-margin-top: var(--hdr-h); overflow: hidden; }
.sqx-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; align-items: center; }
@media (min-width: 1000px) { .sqx-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; } }
.sqx .kicker-light { color: var(--amber); }
.sqx .h-display .serif { color: var(--amber); }
.sqx-note { margin-top: 1rem; max-width: 26rem; font-size: 15px; line-height: 1.6; color: #c9c1b4; }
.sqx-btn { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: .9rem; padding: .6rem 1.4rem .6rem .6rem; border: 1px solid rgba(255,192,77,.5); border-radius: 999px; background: transparent; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, background-color .3s; }
.sqx-btn[hidden] { display: none; }
.sqx-btn-bulb { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--amber); color: var(--night); box-shadow: 0 0 0 0 rgba(255,192,77,.5); transition: box-shadow .4s, transform .4s var(--ease-out); }
.sqx-btn:hover { border-color: var(--amber); background: rgba(255,192,77,.08); }
.sqx-btn:hover .sqx-btn-bulb { box-shadow: 0 0 0 10px rgba(255,192,77,.12), 0 0 30px rgba(255,192,77,.6); transform: rotate(-10deg); }
.sqx-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.sqx-card { position: relative; padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(255,192,77,.4), 0 0 80px rgba(255,192,77,.18); }
.sqx-card::before { content: '“'; position: absolute; right: 1.4rem; top: -.2rem; font-family: var(--serif); font-size: 8rem; line-height: 1; color: rgba(255,192,77,.45); pointer-events: none; }
.sqx-list { list-style: none; margin: 0; padding: 0; }
.sqx-dato[hidden] { display: none; }
.sqx-tema { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-dark); }
.sqx-txt { margin-top: .9rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.sqx-src { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .3rem; font-size: 13.5px; }
.sqx-src span { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sqx-src a { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-weight: 700; text-decoration: none; }
.sqx-src a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.sqx-src a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Cada dato nuevo se enciende con un parpadeo */
.sqx.is-on .sqx-dato:not([hidden]) { animation: sq-on .8s linear both; }
.sqx.is-on .sqx-btn-bulb { animation: sq-on .8s linear both; }

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

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .sqh-glass, html.js .sqh-base, html.js .sqh-fil, html.js .sqh-glow, html.js .sqh-rays, .sqh-cell.is-flip b { animation: none; }
  html.js .sqd-item[data-reveal]:not(.is-in) .sqd-img img { opacity: 1; }
  .sqd-item.is-in .sqd-img img, .sqx.is-on .sqx-dato:not([hidden]), .sqx.is-on .sqx-btn-bulb { animation: none; }
  .sqd-img img, .sqo a, .sqx-btn-bulb { transition: none; }
}