/*
Theme Name: Exzelen
Theme URI: https://exzelen.es
Description: Tema hijo de Blocksy para exzelen.es — talleres sensoriales en Zaragoza.
Author: Exzelen
Template: blocksy
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: exzelen-child
*/


/* FAQ (bloque details) */
.wp-block-details { border-bottom: 1px solid var(--theme-palette-color-5); padding: .25em 0; }
.wp-block-details > summary { font-weight: 700; cursor: pointer; padding: .6em 0; }
.wp-block-details[open] > summary { color: var(--theme-palette-color-1); }

/* Franja de datos bajo el hero */
.exz-datos .wp-block-column { background: var(--theme-palette-color-8); border-radius: 16px; padding: 1rem; }
.exz-datos strong { color: var(--theme-palette-color-2); }
@media (max-width: 781px) {
  .exz-datos { flex-wrap: wrap !important; gap: 1rem; }
  .wp-block-columns.exz-datos > .wp-block-column { flex-basis: calc(50% - .5rem) !important; }
  .exz-datos strong { font-size: 1.5rem !important; }
}

/* Amelia: color de marca. Amelia pone sus variables inline, de ahí !important;
   se limita a los elementos que llevan el azul por defecto. */
#amelia-container,
#amelia-container [style*="265CF2"],
#amelia-container [style*="1246D6"],
#amelia-container [style*="38, 92, 242"],
#amelia-container [style*="18, 70, 214"] {
  --am-c-primary: #7C5CBF !important;
  --am-c-btn-prim: #7C5CBF !important;
  --am-c-btn-first: #7C5CBF !important;
  --am-c-btn-first-op20: rgba(124,92,191,.12) !important;
  --am-c-btn-first-op30: rgba(124,92,191,.3) !important;
  --am-c-btn-first-op80: rgba(124,92,191,.8) !important;
  --am-c-ec-primary: #7C5CBF !important;
  --am-c-pagination-active: #7C5CBF !important;
  --am-c-scroll-op10: rgba(124,92,191,.1) !important;
  --am-c-scroll-op30: rgba(124,92,191,.3) !important;
}
#amelia-container { font-family: inherit; }

/* ── Fondo: malla de color suave + burbujas flotantes (tonos del logotipo) ──
   Marcado en inc/background.php. Las secciones con color de fondo se vuelven
   translúcidas (cristal) para que el fondo se vea a través. */
body {
  background-color: var(--theme-palette-color-8);
  background-image:
    radial-gradient(58% 52% at 16% 10%, rgba(111, 220, 224, .50), transparent 70%),
    radial-gradient(52% 48% at 86% 18%, rgba(188, 162, 236, .48), transparent 70%),
    radial-gradient(64% 55% at 78% 92%, rgba(154, 209, 245, .50), transparent 70%),
    radial-gradient(60% 50% at 12% 88%, rgba(233, 227, 245, .70), transparent 70%);
  background-attachment: fixed;
}
#main-container { position: relative; z-index: 1; }

.exz-burbujas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.exz-burbujas i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.95), rgba(255,255,255,.25) 38%, rgba(154,209,245,.30) 62%, rgba(188,162,236,.34) 100%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 24px rgba(66, 45, 116, .10), inset 0 -6px 14px rgba(188,162,236,.28);
  animation: exz-bob 12s ease-in-out infinite;
}
.exz-burbujas i:nth-child(1) { width: 110px; height: 110px; left: 5vw;  top: 18vh; animation-delay: -1s; }
.exz-burbujas i:nth-child(2) { width: 56px;  height: 56px;  right: 9vw; top: 14vh; animation-delay: -4s; }
.exz-burbujas i:nth-child(3) { width: 150px; height: 150px; right: 4vw; bottom: 9vh; animation-delay: -2.5s; }
.exz-burbujas i:nth-child(4) { width: 40px;  height: 40px;  left: 14vw; bottom: 20vh; animation-delay: -6s; }
.exz-burbujas i:nth-child(5) { width: 26px;  height: 26px;  left: 30vw; top: 9vh; animation-delay: -7.5s; }
.exz-burbujas i:nth-child(6) { width: 34px;  height: 34px;  right: 26vw; bottom: 8vh; animation-delay: -3.5s; }
.exz-burbujas i:nth-child(7) { width: 72px;  height: 72px;  left: 48vw; bottom: 30vh; animation-delay: -9s; }
@keyframes exz-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(8px, -22px, 0); }
}
@media (prefers-reduced-motion: reduce) { .exz-burbujas i { animation: none; } }
@media (max-width: 781px) { .exz-burbujas i:nth-child(3) { width: 90px; height: 90px; } .exz-burbujas i:nth-child(7) { display: none; } }

/* Secciones a ancho completo: cristal, para que el fondo asome */
.alignfull.has-palette-color-7-background-color,
.alignfull.has-palette-color-6-background-color {
  background-color: color-mix(in srgb, var(--theme-palette-color-7) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.alignfull.has-palette-color-6-background-color {
  background-color: color-mix(in srgb, var(--theme-palette-color-6) 72%, transparent) !important;
}

/* ── Hero: aurora animada + burbujas que suben y explotan al tocarlas (assets/burbujas.js) ── */
.exz-hero { position: relative; overflow: hidden; background-color: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.exz-hero::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 40% at 18% 30%, rgba(111, 220, 224, .60), transparent 70%),
    radial-gradient(34% 44% at 78% 22%, rgba(255, 150, 210, .45), transparent 70%),
    radial-gradient(44% 40% at 62% 82%, rgba(188, 162, 236, .60), transparent 70%),
    radial-gradient(30% 32% at 12% 88%, rgba(154, 209, 245, .60), transparent 70%);
  animation: exz-aurora 22s ease-in-out infinite alternate;
}
@keyframes exz-aurora {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(4%, -3%) rotate(3deg); }
  100% { transform: translate(-3%, 4%) rotate(-2deg); }
}
.exz-hero > * { position: relative; z-index: 2; }
.exz-hero-burbujas { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.exz-hero-burbujas i {
  --s: 40px; --d: 20s; --x: 0px;
  position: absolute; bottom: -130px; width: var(--s); height: var(--s); border-radius: 50%;
  pointer-events: auto; cursor: pointer;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.95), rgba(255,255,255,.30) 38%, rgba(154,209,245,.40) 62%, rgba(188,162,236,.50) 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 24px rgba(66, 45, 116, .14), inset 0 -6px 14px rgba(188,162,236,.32);
  animation: exz-rise var(--d) linear infinite;
  transition: scale .35s ease-out, opacity .35s ease-out;
}
@keyframes exz-rise {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(var(--x), -70vh, 0); }
  100% { transform: translate3d(0, -140vh, 0); }
}
.exz-hero-burbujas i.is-pop { animation-play-state: paused; scale: 1.7; opacity: 0; }
.exz-hero .wp-block-image img { animation: exz-flotar 7s ease-in-out infinite; box-shadow: 0 30px 60px -20px rgba(91, 63, 163, .45); }
@keyframes exz-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .exz-hero::before, .exz-hero-burbujas i, .exz-hero .wp-block-image img { animation: none; }
  .exz-hero-burbujas i { bottom: auto; }
}

/* ── Pills de servicios en el hero (lista con className exz-pills) ── */
.exz-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.exz-pills li { margin: 0; padding: .35em .95em; border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: color-mix(in srgb, var(--theme-palette-color-8) 75%, transparent); border: 1px solid var(--theme-palette-color-5); color: var(--theme-palette-color-3); }

/* ── Blog: tarjetas redondeadas con elevación al pasar ── */
.entry-card { border-radius: 28px !important; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(66, 45, 116, .35); transition: translate .25s ease, box-shadow .25s ease; }
.entry-card:hover { translate: 0 -6px; box-shadow: 0 24px 40px -20px rgba(91, 63, 163, .45); }
.entry-card .ct-media-container { border-radius: 20px !important; }
.entry-card .entry-title { font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .entry-card, .entry-card:hover { translate: none; transition: none; } }

/* ── Vídeos de redes: rejilla 9/16, carga al pulsar (assets/redes.js).
   La sección entera se oculta mientras ningún .exz-reel tenga data-url. ── */
.exz-redes-seccion:not(:has(.exz-reel[data-url*="http"])) { display: none; }
.exz-reel:not([data-url*="http"]) { display: none; }
.exz-redes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 0; }
.exz-reel { position: relative; aspect-ratio: 9 / 16; margin: 0; border-radius: 24px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--theme-palette-color-5), var(--theme-palette-color-9)); }
.exz-reel button { min-width: 44px; min-height: 44px; padding: .8em 1.4em; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--theme-palette-color-8); background: var(--theme-palette-color-1); box-shadow: 0 10px 24px -10px rgba(66, 45, 116, .6); }
.exz-reel button:hover, .exz-reel button:focus-visible { background: var(--theme-palette-color-2); }
.exz-reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Modo «luz negra» (Blocksy Pro color-mode-switch pone data-color-mode en <html>;
   la paleta oscura la sirve Blocksy como variables; aquí van los brillos). ── */
:root[data-color-mode*="dark"] body {
  background-image:
    radial-gradient(58% 52% at 16% 10%, rgba(0, 229, 255, .22), transparent 70%),
    radial-gradient(52% 48% at 86% 18%, rgba(192, 132, 252, .28), transparent 70%),
    radial-gradient(64% 55% at 78% 92%, rgba(255, 79, 163, .22), transparent 70%),
    radial-gradient(60% 50% at 12% 88%, rgba(57, 255, 20, .10), transparent 70%);
}
:root[data-color-mode*="dark"] .exz-burbujas i,
:root[data-color-mode*="dark"] .exz-hero-burbujas i {
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.55), rgba(192,132,252,.18) 40%, rgba(0,229,255,.14) 65%, rgba(255,79,163,.30) 100%);
  border-color: rgba(0, 229, 255, .75);
  box-shadow: 0 0 18px rgba(0, 229, 255, .55), 0 0 40px rgba(192, 132, 252, .35), inset 0 -6px 14px rgba(255, 79, 163, .35);
}
:root[data-color-mode*="dark"] .exz-hero::before {
  background:
    radial-gradient(38% 40% at 18% 30%, rgba(0, 229, 255, .35), transparent 70%),
    radial-gradient(34% 44% at 78% 22%, rgba(255, 79, 163, .42), transparent 70%),
    radial-gradient(44% 40% at 62% 82%, rgba(192, 132, 252, .48), transparent 70%),
    radial-gradient(30% 32% at 12% 88%, rgba(57, 255, 20, .18), transparent 70%);
}
:root[data-color-mode*="dark"] h1, :root[data-color-mode*="dark"] h2 { text-shadow: 0 0 18px rgba(192, 132, 252, .75), 0 0 42px rgba(0, 229, 255, .35); }
:root[data-color-mode*="dark"] .exz-hero .wp-block-image img { box-shadow: 0 0 40px rgba(0, 229, 255, .40), 0 0 90px rgba(255, 79, 163, .30); }
:root[data-color-mode*="dark"] .exz-datos .wp-block-column,
:root[data-color-mode*="dark"] .exz-pills li,
:root[data-color-mode*="dark"] .entry-card {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(192, 132, 252, .40); box-shadow: 0 0 20px rgba(192, 132, 252, .18);
}
:root[data-color-mode*="dark"] .exz-datos strong,
:root[data-color-mode*="dark"] .exz-pills li,
:root[data-color-mode*="dark"] .wp-block-details[open] > summary { color: #7DF9FF; text-shadow: 0 0 12px rgba(0, 229, 255, .7); }
:root[data-color-mode*="dark"] .wp-block-button__link { box-shadow: 0 0 20px rgba(192, 132, 252, .55); }
:root[data-color-mode*="dark"] .alignfull.has-palette-color-7-background-color,
:root[data-color-mode*="dark"] .alignfull.has-palette-color-6-background-color { border-top: 1px solid rgba(192, 132, 252, .25); border-bottom: 1px solid rgba(192, 132, 252, .25); }
:root[data-color-mode*="dark"] .ct-color-switch { color: #7DF9FF; }

/* Slider del hero: crossfade en CSS, sin JS */
.exz-slider { display: grid; }
.exz-slider > figure { grid-area: 1 / 1; margin: 0; opacity: 0; animation: exz-slider 24s infinite; }
.exz-slider > figure:nth-child(2) { animation-delay: -18s; }
.exz-slider > figure:nth-child(3) { animation-delay: -12s; }
.exz-slider > figure:nth-child(4) { animation-delay: -6s; }
@keyframes exz-slider {
	0%, 21% { opacity: 1; }
	27%, 94% { opacity: 0; }
	100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.exz-slider > figure { animation: none; opacity: 1; }
	.exz-slider > figure:not(:first-child) { display: none; }
}