/*
Theme Name: LiquidGlass Azur
Theme URI: https://cartalogo.es
Author: Chas
Author URI: https://cartalogo.es
Description: Tema moderno con estética "liquid glass" en azul sky y cobalto. Endurecido en seguridad, con soporte de galerías, vídeo e iframes responsivos mediante shortcode sandbox.
Version: 1.16.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: liquidglass-azur
Tags: blog, one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================
   1. Tokens
   ========================================================== */
:root {
  --sky-100: #E0F2FE;
  --sky-300: #7DD3FC;
  --sky-400: #0EA5E9;
  --cobalt-500: #1E40AF;
  --cobalt-700: #003B8E;
  --cobalt-900: #081F52;
  --ink: #0A1B3D;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(0, 71, 171, 0.18);
  --glass-blur: 18px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --maxw: 1120px;
}

/* ==========================================================
   2. Base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Se eliminan las animaciones decorativas... */
  *, *::before, *::after { animation-duration: 0.001s !important; }
  *, *::before, *::after { transition-duration: 0.001s !important; }
  /* ...pero el movimiento funcional (cajón del menú, velo) conserva una
     transición breve: sin ella el panel aparece "de golpe" y desorienta más
     de lo que ayuda. 0.15s es imperceptible como "animación" pero da contexto. */
  .menu-lateral { transition-duration: 0.15s !important; }
  .velo-menu { transition-duration: 0.15s !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.92rem, .87rem + .25vw, .97rem);
  line-height: 1.6;
  color: var(--ink);
  background: linear-gradient(160deg, #CFE5FD 0%, #9EC5FB 35%, #6FA5F5 70%, #9CC0FA 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Burbujas líquidas de fondo */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}
body::before {
  width: 55vw; height: 55vw;
  top: -18vw; right: -12vw;
  background: radial-gradient(circle at 30% 30%, var(--sky-400), transparent 70%);
  animation: flotar1 26s ease-in-out infinite alternate;
}
body::after {
  width: 48vw; height: 48vw;
  bottom: -16vw; left: -10vw;
  background: radial-gradient(circle at 60% 60%, var(--cobalt-500), transparent 70%);
  animation: flotar2 32s ease-in-out infinite alternate;
}
@keyframes flotar1 { to { transform: translate(-6vw, 8vh) scale(1.12); } }
@keyframes flotar2 { to { transform: translate(7vw, -6vh) scale(1.08); } }

a { color: var(--cobalt-700); text-decoration: none; transition: color .2s; }
a:hover, a:focus { color: var(--cobalt-500); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cobalt-500);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--cobalt-900);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2rem); }
h2 { font-size: clamp(1.15rem, .98rem + .8vw, 1.5rem); }
h3 { font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); }

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }

.contenedor { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

.salto-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--cobalt-700); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--radius-sm) 0; z-index: 999;
}
.salto-contenido:focus { left: 0; color: #fff; }

/* ==========================================================
   3. Panel de cristal (componente base)
   ========================================================== */
.vidrio {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
}
/* Reflejo especular superior */
.vidrio::before {
  content: "";
  position: absolute; inset: 0 0 60% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}

/* ==========================================================
   4. Cabecera y navegación
   ========================================================== */
.cabecera-sitio {
  position: static; z-index: 50;
  margin: 12px auto 0;
  max-width: calc(var(--maxw) + 24px);
  padding: 0 12px;
}
.cabecera-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
  padding: clamp(9px, 1.2vw, 14px) clamp(14px, 2.4vw, 26px);
}
.marca { display: flex; align-items: center; gap: 12px; }
.marca .logo-personalizado img { width: clamp(32px, 5vw, 44px); height: clamp(32px, 5vw, 44px); border-radius: 50%; }
.titulo-sitio {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 0.65rem + 1.4vw, 1.35rem); margin: 0;
  background: linear-gradient(90deg, var(--cobalt-700), var(--sky-400));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.descripcion-sitio { font-size: .8rem; margin: 0; opacity: .75; }

.nav-principal ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.nav-principal a {
  display: block; padding: clamp(7px, 1vw, 9px) clamp(12px, 1.8vw, 16px); border-radius: 999px;
  font-weight: 600; font-size: clamp(.85rem, .7rem + .6vw, .95rem); color: var(--cobalt-900);
  transition: background .25s, color .25s, transform .2s;
}
.nav-principal a:hover,
.nav-principal .current-menu-item > a {
  background: linear-gradient(120deg, var(--sky-400), var(--cobalt-500));
  color: #fff;
  transform: translateY(-1px);
}
.nav-principal .sub-menu {
  display: none; position: absolute; flex-direction: column; min-width: 210px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 8px; margin-top: 8px;
  box-shadow: var(--glass-shadow);
}
.nav-principal li { position: relative; }
.nav-principal li:hover > .sub-menu,
.nav-principal li:focus-within > .sub-menu { display: flex; }

.boton-menu {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 42px;
  padding: 0; margin: 0;
  cursor: pointer;
  color: var(--cobalt-900);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 71, 171, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  text-shadow: none;
  transition: transform .15s, background .15s;
}
/* Anula el "cristal 3D" genérico de <button> (gradiente, brillo, destello):
   este botón necesita quedarse pequeño y discreto */
.boton-menu::before, .boton-menu::after { content: none; }
.boton-menu:hover { background: rgba(255, 255, 255, 0.6); transform: none; filter: none; box-shadow: 0 4px 12px rgba(0,71,171,.2), inset 0 1px 0 rgba(255,255,255,.7); }
.boton-menu:active { transform: scale(.94); }
.boton-menu svg { width: 20px; height: 20px; flex-shrink: 0; }

@media (max-width: 1024px), (pointer: coarse) {
  .boton-menu { display: inline-flex; }  /* tamaño ya fijado arriba: 42x42px */
  .nav-principal { display: none; }      /* la píldora de PC no se usa en móvil */
  .cabecera-interior { flex-wrap: wrap; }
}

/* ==========================================================
   Cajón de menú lateral (vive fuera de la cabecera en el DOM
   para que position:fixed no quede atrapado por backdrop-filter)
   ========================================================== */
.menu-lateral {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  width: min(78vw, 320px);
  padding: 68px 14px 24px;
  background: color-mix(in srgb, var(--glass-bg) 60%, var(--sky-100));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 8px 0 40px rgba(0, 47, 120, 0.25);
  transform: translateX(-105%);
  transition: transform .32s cubic-bezier(.22, .7, .3, 1);
  z-index: 90;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-lateral.abierto { transform: translateX(0); }

.menu-lateral-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 0;
  padding: 0 14px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cobalt-900);
  border-bottom: 1px solid color-mix(in srgb, var(--cobalt-700) 20%, transparent); /* línea fina a juego con la paleta */
}
.menu-lateral-logo {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.menu-lateral ul { list-style: none; margin: 0; padding: 0; display: block; }
.menu-lateral li { position: relative; }
/* Línea fina de separación entre entradas, a juego con el tema */
.menu-lateral > ul > li + li { border-top: 1px solid color-mix(in srgb, var(--cobalt-700) 16%, transparent); }
.menu-lateral a {
  display: block;
  margin: 6px 0;              /* mismo aire hacia la línea superior e inferior */
  padding: 11px 14px;
  font-weight: 600;
  font-size: .98rem;
  color: var(--cobalt-900);
  border-radius: 10px;
  transition: background .2s, color .2s;
}
.menu-lateral a:hover,
.menu-lateral .current-menu-item > a {
  background: linear-gradient(120deg, color-mix(in srgb, var(--sky-400) 18%, transparent), color-mix(in srgb, var(--cobalt-500) 18%, transparent));
  color: var(--cobalt-700);
}
.menu-lateral .sub-menu { margin: 0 0 6px 16px; border-left: 1px solid color-mix(in srgb, var(--cobalt-700) 16%, transparent); }
.menu-lateral .sub-menu a { padding: 10px 14px; font-size: .92rem; font-weight: 500; }

.cerrar-menu {
  position: absolute; top: 14px; right: 12px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 11px;
  color: var(--cobalt-900);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 71, 171, 0.14);
  text-shadow: none;
}
.cerrar-menu::before, .cerrar-menu::after { content: none; }
.cerrar-menu:hover { transform: none; filter: none; background: rgba(255,255,255,.75); }
.cerrar-menu svg { width: 18px; height: 18px; }

.velo-menu {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--cobalt-900) 45%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  z-index: 85;
}
body.menu-abierto .velo-menu { opacity: 1; pointer-events: auto; }
body.menu-abierto { overflow: hidden; }

/* En escritorio con ratón el cajón no existe: manda la píldora */
@media (min-width: 1025px) and (pointer: fine) {
  .menu-lateral, .velo-menu { display: none; }
}

/* ==========================================================
   5. Hero
   ========================================================== */
.hero {
  margin: clamp(28px, 6vw, 64px) auto;
  padding: clamp(32px, 6vw, 72px);
  text-align: center;
}
.hero p { max-width: 640px; margin: 0 auto; font-size: clamp(.9rem, .85rem + .2vw, .98rem); }
.hero .gota {
  display: inline-block; margin-bottom: 18px; padding: 6px 18px;
  border-radius: 999px; font-size: .85rem; font-weight: 700;
  color: #fff; letter-spacing: .04em;
  background: linear-gradient(120deg, var(--sky-400), var(--cobalt-700));
  box-shadow: 0 4px 18px rgba(0,71,171,.35);
}

/* ==========================================================
   6. Rejilla de artículos
   ========================================================== */
.rejilla-articulos {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  margin: 0 0 60px;
}
.tarjeta-articulo { padding: 0; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.tarjeta-articulo:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,71,171,.28), inset 0 1px 0 rgba(255,255,255,.8);
}
.tarjeta-articulo .miniatura img { border-radius: 0; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tarjeta-cuerpo { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tarjeta-cuerpo h2 { font-size: 1.25rem; margin: 0; }
.meta-articulo { font-size: .82rem; color: var(--cobalt-700); display: flex; gap: 14px; flex-wrap: wrap; }
.leer-mas {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center;
  white-space: nowrap; width: fit-content;
  padding: 7px 15px; border-radius: 999px; font-weight: 700; font-size: .88rem;
  color: #fff; background: linear-gradient(120deg, var(--sky-400), var(--cobalt-500));
  box-shadow: 0 4px 14px rgba(0,71,171,.3);
  transition: transform .2s, box-shadow .2s;
}
.leer-mas:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,71,171,.4); }

/* ==========================================================
   7. Contenido individual
   ========================================================== */
.articulo-individual { margin: 40px 0 60px; padding: clamp(26px, 5vw, 56px); }
.entrada-contenido > * + * { margin-top: 1.1em; }
.entrada-contenido blockquote {
  margin: 1.4em 0; padding: 18px 26px;
  border-left: 4px solid var(--sky-400);
  background: rgba(255,255,255,.45);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}
.entrada-contenido pre {
  background: var(--cobalt-900); color: var(--sky-100);
  padding: 20px; border-radius: var(--radius-md); overflow-x: auto; font-size: .9rem; font-family: var(--font-mono);
}
.entrada-contenido code { background: rgba(0,71,171,.1); padding: 2px 7px; border-radius: 6px; font-size: .92em; font-family: var(--font-mono); }
.entrada-contenido pre code { background: none; padding: 0; }
.entrada-contenido table { width: 100%; border-collapse: collapse; }
.entrada-contenido th, .entrada-contenido td { padding: 10px 14px; border-bottom: 1px solid rgba(0,71,171,.15); text-align: left; }

/* ==========================================================
   8. Galerías (Gutenberg + galería clásica)
   ========================================================== */
.wp-block-gallery, .gallery {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 1.4em 0;
}
.wp-block-gallery .wp-block-image, .gallery .gallery-item {
  margin: 0; overflow: hidden; border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 20px rgba(0,71,171,.15);
  background: rgba(255,255,255,.4);
}
.wp-block-gallery img, .gallery img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  transition: transform .4s ease;
}
.wp-block-gallery .wp-block-image:hover img, .gallery .gallery-item:hover img { transform: scale(1.05); }
.gallery .gallery-caption, .wp-block-gallery figcaption {
  font-size: .8rem; padding: 8px 12px; color: var(--cobalt-900);
  background: rgba(255,255,255,.6);
}

/* ==========================================================
   9. Vídeo e iframes responsivos
   ========================================================== */
.entrada-contenido video {
  width: 100%; border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}
.wp-block-embed, .marco-fluido {
  margin: 1.6em 0; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  background: rgba(255,255,255,.35);
}
.marco-fluido { position: relative; padding-top: 56.25%; }
.marco-fluido iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.wp-block-embed__wrapper { position: relative; }
.wp-embed-responsive .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; }
.wp-block-embed iframe { max-width: 100%; }

/* ==========================================================
   10. Comentarios, formularios, botones
   ========================================================== */
.zona-comentarios { margin: 40px 0 60px; padding: clamp(24px, 4vw, 44px); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 18px 0; border-bottom: 1px solid rgba(0,71,171,.12); }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
  width: 100%; padding: 10px 14px; font: inherit; font-size: .95rem;
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus {
  border-color: var(--cobalt-500);
  box-shadow: 0 0 0 4px rgba(29,78,216,.15);
  outline: none;
}
button, input[type="submit"], .wp-block-button__link {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 9px 18px; border: 0; border-radius: 999px; color: #fff;
  background: linear-gradient(120deg, var(--sky-400), var(--cobalt-700));
  box-shadow: 0 6px 18px rgba(0,71,171,.35);
  transition: transform .2s, box-shadow .2s;
}
button:hover, input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,71,171,.45); }

.formulario-busqueda { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-top: 10px; }
.formulario-busqueda label { flex: 1 1 220px; margin: 0; }
.comment-form p { margin: 0 0 16px; }
.comment-form input[type="submit"] { margin-top: 4px; }

/* ==========================================================
   11. Paginación y pie
   ========================================================== */
.navegacion-paginas { display: flex; justify-content: center; gap: 8px; margin: 0 0 60px; flex-wrap: wrap; }
.navegacion-paginas .page-numbers {
  padding: 8px 14px; border-radius: 999px; font-weight: 700;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.navegacion-paginas .current { background: linear-gradient(120deg, var(--sky-400), var(--cobalt-700)); color: #fff; }

.pie-sitio { margin: 60px 12px 20px; }
.pie-interior {
  max-width: var(--maxw); margin: 0 auto; padding: 30px clamp(20px, 4vw, 40px);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: .9rem;
}
.pie-interior a { font-weight: 600; }

/* ==========================================================
   12. Utilidades y alineaciones WP
   ========================================================== */
.alignwide { max-width: calc(var(--maxw) + 120px); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 1.4em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.4em; }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute;
}
.sticky, .bypostauthor { display: block; }
.entrada-contenido p:empty { display: none; margin: 0; padding: 0; }
.pagina-404 { text-align: center; margin: 60px 0; padding: clamp(40px, 8vw, 80px); }
.panel-aviso {
  margin: 28px 0 44px;
  padding: clamp(22px, 4.5vw, 40px);
  border-radius: var(--radius-lg);
}
.pagina-404 .numero {
  font-family: var(--font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 800; line-height: 1;
  background: linear-gradient(120deg, var(--sky-400), var(--cobalt-700));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ==========================================================
   13. Hero con banner de portada
   ========================================================== */
.hero-banner {
  margin: clamp(24px, 5vw, 52px) 0 clamp(36px, 6vw, 64px);
}
.hero-banner-marco {
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 71, 171, 0.35), inset 0 1px 0 rgba(255,255,255,.8);
}
.hero-banner-imagen {
  width: 100%; height: auto; display: block;
  border-radius: 0;
  aspect-ratio: 1367 / 768;
  object-fit: cover;
}
/* Reflejo diagonal animado sobre el banner.
   Implementado con transform (animación compuesta en GPU): a diferencia
   de animar background-position (que repinta cada frame y parpadea en
   Chrome/Android), esto funciona fluido en todas las plataformas. */
.hero-banner-brillo {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-banner-brillo::before {
  content: "";
  position: absolute;
  top: -25%; bottom: -25%;
  left: 0; width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.42) 50%, transparent);
  transform: translateX(-160%) skewX(-16deg);
  animation: barrido-gpu 4.5s ease-in-out infinite;
  z-index: 3;
  will-change: transform;
}
@keyframes barrido-gpu {
  0%, 30%   { transform: translateX(-160%) skewX(-16deg); }
  70%, 100% { transform: translateX(430%) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner-brillo::before { animation: none; }
}

/* Las burbujas de fondo (fijas + blur pesado) se retiran de todos los
   dispositivos táctiles: son la otra fuente clásica de parpadeo en Android */
@media (pointer: coarse), (max-width: 1024px) {
  body::before, body::after { display: none; }
}
/* Fundido inferior cobalto para integrar con el fondo */
.hero-banner-marco::after {
  content: "";
  position: absolute; inset: 68% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11, 42, 107, 0.32));
}
/* Logo superpuesto sobre el banner (posición y tamaño desde el Personalizador) */
.hero-banner-logo {
  position: absolute;
  z-index: 4;
  height: auto;
  border-radius: 0;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* CTA flotante de cristal */
.hero-banner-cta {
  position: absolute; left: clamp(18px, 4vw, 44px); bottom: clamp(18px, 4vw, 40px);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, 2vw, 1.1rem);
  color: #fff;
  background: linear-gradient(120deg, rgba(56,189,248,.92), rgba(0,71,171,.92));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(0,47,120,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .25s, box-shadow .25s;
}
.hero-banner-cta:hover, .hero-banner-cta:focus {
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,47,120,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.hero-banner-cta svg { transition: transform .25s; }
.hero-banner-cta:hover svg { transform: translateX(4px); }
/* Cinta de eslogan bajo el banner */
.hero-banner-eslogan {
  margin: 18px auto 0; max-width: 640px;
  padding: 14px 30px; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, 2vw, 1.15rem); color: var(--cobalt-900);
  border-radius: 999px;
}
@media (max-width: 640px) {
  /* La foto se muestra entera: proporción natural, sin recorte lateral */
  .hero-banner-imagen { aspect-ratio: auto; object-fit: fill; object-position: center; }
  .hero-banner-marco::after { display: none; }
  /* El botón pasa debajo de la foto para no taparla */
  .hero-banner-cta {
    position: static;
    display: flex; width: fit-content;
    margin: 14px auto 18px;
    white-space: nowrap;
  }
  .hero-banner-cta:hover { transform: translateY(-2px); }
}

/* Cabecera fija en PC solo si se activa en el Personalizador,
   y nunca en dispositivos táctiles */
@media (min-width: 1025px) and (pointer: fine) {
  body.cabecera-fija-pc .cabecera-sitio { position: sticky; top: 12px; }
}

/* ==========================================================
   14. Botones "cristal 3D" (sistema unificado)
   Se aplica a: botones, submit, bloques de botón, leer-más,
   CTA del banner y paginación.
   ========================================================== */
button,
input[type="submit"],
.wp-block-button__link,
.leer-mas,
.hero-banner-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);           /* borde blanco semitransparente */
  background:
    linear-gradient(160deg,
      rgba(96, 180, 245, 0.55) 0%,
      rgba(30, 130, 220, 0.52) 32%,
      rgba(23, 62, 160, 0.62) 68%,
      rgba(6, 44, 120, 0.72) 100%);
  backdrop-filter: blur(14px) saturate(170%);            /* trasluz de cristal */
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 40, 110, 0.55);
  box-shadow:
    0 10px 26px rgba(0, 47, 120, 0.38),                  /* proyección: profundidad */
    inset 0 2px 1px rgba(255, 255, 255, 0.55),           /* filo de luz superior */
    inset 0 -6px 12px rgba(0, 25, 75, 0.42),             /* sombra interna inferior: volumen 3D */
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

/* Brillo superior curvo (media luna de luz) */
button::before,
input[type="submit"]::before,
.wp-block-button__link::before,
.leer-mas::before,
.hero-banner-cta::before {
  content: "";
  position: absolute;
  inset: 2px 8% 55% 8%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
  pointer-events: none;
  z-index: 1;
}

/* Destello diagonal que barre al pasar el ratón */
button::after,
input[type="submit"]::after,
.wp-block-button__link::after,
.leer-mas::after,
.hero-banner-cta::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: left .5s ease;
  pointer-events: none;
  z-index: 1;
}
button:hover::after,
input[type="submit"]:hover::after,
.wp-block-button__link:hover::after,
.leer-mas:hover::after,
.hero-banner-cta:hover::after { left: 130%; }

button > *, .leer-mas > *, .hero-banner-cta > * { position: relative; z-index: 2; }

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.leer-mas:hover,
.hero-banner-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    0 16px 36px rgba(0, 47, 120, 0.48),
    inset 0 2px 1px rgba(255, 255, 255, 0.65),
    inset 0 -6px 12px rgba(0, 25, 75, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Estado pulsado: el botón se "hunde" */
button:active,
input[type="submit"]:active,
.wp-block-button__link:active,
.leer-mas:active,
.hero-banner-cta:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.96);
  box-shadow:
    0 4px 12px rgba(0, 47, 120, 0.35),
    inset 0 3px 8px rgba(0, 25, 75, 0.5),
    inset 0 -1px 1px rgba(255, 255, 255, 0.25);
}

/* Variante secundaria: cristal blanco (paginación, respuesta a comentarios) */
.navegacion-paginas .page-numbers,
.comment-reply-link {
  position: relative;
  overflow: hidden;
  color: var(--cobalt-900);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 6px 16px rgba(0, 71, 171, 0.18),
    inset 0 2px 1px rgba(255, 255, 255, 0.75),
    inset 0 -4px 8px rgba(0, 71, 171, 0.10);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.navegacion-paginas .page-numbers:hover,
.comment-reply-link:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 10px 24px rgba(0, 71, 171, 0.26),
    inset 0 2px 1px rgba(255, 255, 255, 0.85),
    inset 0 -4px 8px rgba(0, 71, 171, 0.10);
}
.navegacion-paginas .current {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(160deg, rgba(56,189,248,.9), rgba(0,71,171,.94));
  box-shadow:
    0 8px 20px rgba(0, 47, 120, 0.4),
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -5px 10px rgba(0, 25, 75, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  button::after, input[type="submit"]::after, .wp-block-button__link::after,
  .leer-mas::after, .hero-banner-cta::after { display: none; }
}

/* ==========================================================
   15. Responsive integral
   ========================================================== */

/* --- Tabletas grandes (≤1100px) --- */
@media (max-width: 1100px) {
  .rejilla-articulos { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
  .alignwide { max-width: 100%; }
}

/* --- Tabletas (≤860px): menú móvil ya activo --- */
@media (max-width: 1024px), (pointer: coarse) {
  /* Rendimiento de scroll: background-attachment fixed provoca
     repintados costosos en Android/Chrome móvil */
  body { background-attachment: scroll; }
  /* La cabecera deja de ser pegajosa: al hacer scroll desaparece
     y no tapa el contenido */
  .cabecera-sitio { position: static; }
  /* Opción del Personalizador: ocultar la cabecera por completo en móvil */
  body.sin-cabecera-movil .cabecera-sitio { display: none; }
  /* Opción del Personalizador: ocultar el pie por completo en móvil */
  body.sin-pie-movil .pie-sitio { display: none; }
  /* Sin pie, la página cierra a ras: sin márgenes de cortesía al final */
  body.sin-pie-movil #contenido > :last-child { margin-bottom: 0 !important; }
  body.sin-pie-movil .articulo-individual:last-child,
  body.sin-pie-movil .lienzo-completo:last-child { margin-bottom: 0; padding-bottom: 0; }
  /* Hamburguesa arriba a la izquierda; la marca queda a su derecha */
  .boton-menu { order: -1; }
  .cabecera-interior { justify-content: flex-start; }
  .marca { margin-right: auto; }
  /* Submenús siempre desplegados dentro del menú móvil (táctil fiable) */
  .nav-principal.abierto .sub-menu { display: flex; position: static; box-shadow: none; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cabecera-sitio { top: 8px; }
  .hero { padding: clamp(26px, 5vw, 44px); }
}

/* --- Móviles (≤640px) --- */
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea { padding: 9px 12px; }
  button, input[type="submit"], .wp-block-button__link { padding: 8px 15px; font-size: .9rem; }
  .contenedor { padding: 0 14px; }
  .cabecera-sitio { margin-top: 8px; padding: 0 8px; }
  .cabecera-interior { padding: 12px 16px; }
  .titulo-sitio { font-size: 1.15rem; }
  .descripcion-sitio { display: none; }

  .rejilla-articulos { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .tarjeta-cuerpo { padding: 18px 18px 22px; }

  /* Paneles de artículo a ancho completo del viewport con 5px internos:
     los márgenes negativos anulan el padding de .contenedor (14px). */
  .articulo-individual, .zona-comentarios {
    margin: 24px -14px 36px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 22px 5px 28px;
  }
  .articulo-individual .entrada-contenido img,
  .articulo-individual figure { border-radius: var(--radius-sm); }
  /* Refuerzo de espacio bajo el formulario de búsqueda (pantalla "sin resultados") */
  .articulo-individual .formulario-busqueda { margin-bottom: 6px; }

  /* Galerías en dos columnas compactas */
  .wp-block-gallery, .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px !important; }

  /* Tablas con desplazamiento horizontal, sin romper el diseño */
  .entrada-contenido table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Flotados de WP anulados: en móvil todo apilado */
  .alignleft, .alignright { float: none; margin: 1em auto; }

  .pie-sitio { margin: 36px 8px 14px; }
  .pie-interior { flex-direction: column; text-align: center; gap: 6px; padding: 20px; }

  .navegacion-paginas { gap: 6px; }
  .navegacion-paginas .page-numbers { padding: 8px 14px; font-size: .9rem; }

  /* Área táctil mínima 44px en botones */
  button, input[type="submit"], .wp-block-button__link, .leer-mas { min-height: 44px; }

  /* Rendimiento: menos desenfoque y sin burbujas de fondo en pantallas
     pequeñas (elementos fijos con blur = tirones de scroll) */
  :root { --glass-blur: 12px; }
  body::before, body::after { display: none; }
}

/* --- Móviles pequeños (≤400px) --- */
@media (max-width: 400px) {
  .wp-block-gallery, .gallery { grid-template-columns: 1fr; }
  .hero-banner-cta { padding: 12px 22px; font-size: .9rem; }
  .comment-form input, .comment-form textarea { font-size: 16px; } /* evita zoom automático en iOS */
}

/* --- Pantallas muy anchas (≥1600px) --- */
@media (min-width: 1600px) {
  :root { --maxw: 1240px; }
}

/* --- Táctil sin hover: estados activos en lugar de hover --- */
@media (hover: none) {
  .tarjeta-articulo:hover { transform: none; }
  .wp-block-gallery .wp-block-image:hover img, .gallery .gallery-item:hover img { transform: none; }
}

/* --- Navegadores sin backdrop-filter: cristal opaco de respaldo --- */
@supports not (backdrop-filter: blur(1px)) {
  .vidrio, .nav-principal .sub-menu { background: rgba(255, 255, 255, 0.88); }
  button, input[type="submit"], .wp-block-button__link, .leer-mas, .hero-banner-cta {
    background: linear-gradient(160deg, #7DD3FC, #38BDF8 32%, #1D4ED8 68%, #0047AB);
  }
}

/* ==========================================================
   16. Plantilla "Lienzo completo"
   Entrada/página a pantalla completa: solo el contenido,
   sin panel, sin meta, sin comentarios.
   ========================================================== */
/* El contenedor pierde límites en las páginas lienzo: sin trucos de 100vw
   (100vw incluye la barra de scroll y provocaba desbordamiento horizontal) */
body.pagina-lienzo #contenido { max-width: none; padding: 0; margin: 0; }
.lienzo-completo {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.lienzo-completo .entrada-contenido { margin: 0; }
.lienzo-completo .entrada-contenido > * { margin-top: 0; }
.lienzo-completo img,
.lienzo-completo .marco-fluido,
.lienzo-completo iframe { border-radius: 0; }
.lienzo-completo .marco-fluido { margin: 0; border: 0; box-shadow: none; }


/* ==========================================================
   17. Plantilla "Lienzo puro" (sin cabecera ni pie)
   ========================================================== */
body.lienzo-puro { overflow-x: hidden; }
body.lienzo-puro { margin: 0; }
body.lienzo-puro .lienzo-completo {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
body.lienzo-puro .lienzo-completo .marco-fluido { height: 100vh; height: 100dvh; padding-top: 0; }


/* ==========================================================
   17b. Repintado de cristal tras rotación (bug del compositor
   de Chrome/Android con backdrop-filter)
   ========================================================== */
body.repintado-cristal .vidrio,
body.repintado-cristal .menu-lateral,
body.repintado-cristal .nav-principal .sub-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================
   17c. Modo compatibilidad: cristal sin blur en táctil
   (activable en el Personalizador; elimina de raíz los artefactos
   de rotación del compositor de Chrome/Android)
   ========================================================== */
@media (pointer: coarse), (max-width: 1024px) {
  body.cristal-solido-movil .vidrio,
  body.cristal-solido-movil .menu-lateral,
  body.cristal-solido-movil .nav-principal .sub-menu,
  body.cristal-solido-movil button,
  body.cristal-solido-movil input[type="submit"],
  body.cristal-solido-movil .wp-block-button__link,
  body.cristal-solido-movil .leer-mas,
  body.cristal-solido-movil .hero-banner-cta,
  body.cristal-solido-movil .navegacion-paginas .page-numbers,
  body.cristal-solido-movil .boton-menu,
  body.cristal-solido-movil .cerrar-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Sin blur, los paneles suben opacidad para conservar legibilidad */
  body.cristal-solido-movil .vidrio { background: color-mix(in srgb, var(--glass-bg) 40%, var(--sky-100)); }
  body.cristal-solido-movil .menu-lateral { background: color-mix(in srgb, var(--glass-bg) 25%, var(--sky-100)); }
}

/* ==========================================================
   18. Paletas de color alternativas (Personalizador)
   ========================================================== */

/* --- Paleta "Marrón y amarillo" --- */
body.paleta-marron {
  --sky-100: #FBF0DC;
  --sky-300: #F3CE7F;
  --sky-400: #E9A83C;
  --cobalt-500: #9C6B33;
  --cobalt-700: #7A4E1F;
  --cobalt-900: #462C10;
  --ink: #3B2711;
  --glass-shadow: 0 8px 32px rgba(122, 78, 31, 0.20);
  background: linear-gradient(160deg, #F9ECCF 0%, #F0D9A4 35%, #DDB670 70%, #EBD5A2 100%);
}
body.paleta-marron button,
body.paleta-marron input[type="submit"],
body.paleta-marron .wp-block-button__link,
body.paleta-marron .leer-mas,
body.paleta-marron .hero-banner-cta {
  background:
    linear-gradient(160deg,
      rgba(243, 206, 127, 0.60) 0%,
      rgba(233, 168, 60, 0.55) 32%,
      rgba(156, 107, 51, 0.65) 68%,
      rgba(70, 44, 16, 0.75) 100%);
  text-shadow: 0 1px 2px rgba(60, 36, 10, 0.55);
  box-shadow:
    0 10px 26px rgba(90, 58, 20, 0.35),
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -6px 12px rgba(50, 30, 8, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.paleta-marron .navegacion-paginas .current {
  background: linear-gradient(160deg, rgba(233,168,60,.9), rgba(122,78,31,.94));
}

/* --- Paleta "Marrón oscuro y crema" (fondo oscuro, acentos crema) --- */
body.paleta-crema {
  --sky-100: #4A3826;
  --sky-300: #D9BE8F;
  --sky-400: #E3C893;
  --cobalt-500: #C9A876;
  --cobalt-700: #E8D5AE;
  --cobalt-900: #F5EBD3;
  --ink: #EFE3CC;
  --glass-bg: rgba(52, 36, 20, 0.55);
  --glass-bg-strong: rgba(52, 36, 20, 0.78);
  --glass-border: rgba(245, 235, 211, 0.22);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  background: linear-gradient(160deg, #1F1509 0%, #33220F 35%, #241809 70%, #2E1F0E 100%);
}
/* El reflejo especular blanco del cristal se atenúa sobre fondo oscuro */
body.paleta-crema .vidrio::before {
  background: linear-gradient(180deg, rgba(255, 244, 220, 0.10), transparent);
}
/* Inputs en crema para contraste sobre el cristal oscuro */
body.paleta-crema input[type="text"],
body.paleta-crema input[type="email"],
body.paleta-crema input[type="url"],
body.paleta-crema input[type="search"],
body.paleta-crema textarea {
  background: rgba(245, 235, 211, 0.92);
  color: #2E1F12;
  border-color: rgba(245, 235, 211, 0.45);
}
body.paleta-crema button,
body.paleta-crema input[type="submit"],
body.paleta-crema .wp-block-button__link,
body.paleta-crema .leer-mas,
body.paleta-crema .hero-banner-cta {
  color: #2A1C0E;
  background:
    linear-gradient(160deg,
      rgba(245, 235, 211, 0.85) 0%,
      rgba(227, 200, 147, 0.80) 40%,
      rgba(201, 168, 118, 0.85) 100%);
  text-shadow: 0 1px 1px rgba(255, 248, 230, 0.4);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.4),
    inset 0 2px 1px rgba(255, 250, 235, 0.7),
    inset 0 -6px 12px rgba(120, 88, 44, 0.45),
    inset 0 0 0 1px rgba(255, 250, 235, 0.15);
}
body.paleta-crema button:hover,
body.paleta-crema input[type="submit"]:hover,
body.paleta-crema .wp-block-button__link:hover,
body.paleta-crema .leer-mas:hover,
body.paleta-crema .hero-banner-cta:hover { color: #2A1C0E; }
body.paleta-crema .navegacion-paginas .current {
  color: #2A1C0E;
  background: linear-gradient(160deg, rgba(245,235,211,.92), rgba(201,168,118,.94));
}


/* ==========================================================
   19. Redes sociales y contacto
   ========================================================== */
.redes-sociales {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.redes-sociales a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--redes-tam, 26px) + 18px);
  height: calc(var(--redes-tam, 26px) + 18px);
  border-radius: 50%;
  color: var(--cobalt-900);
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cobalt-900) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .2s, background .2s;
}
.redes-sociales a:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--glass-bg) 95%, transparent); }
.redes-sociales a svg,
.redes-sociales a img {
  width: var(--redes-tam, 26px);
  height: var(--redes-tam, 26px);
  border-radius: 0;
  display: block;
}

/* Posición: arriba de todo (antes del panel del menú) */
.redes-arriba {
  justify-content: center;
  max-width: var(--maxw);
  margin: 14px auto 2px;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* Posición: debajo del header (banner en portada, píldora en el resto) */
.redes-cabecera {
  justify-content: center;
  max-width: var(--maxw);
  margin: -14px auto 26px; /* pega los iconos al banner que tiene encima */
  padding: 0 clamp(16px, 4vw, 32px);
}
/* Cuando no hay banner encima (resto de páginas), aire normal */
header.cabecera-sitio + .redes-cabecera { margin-top: 14px; }

/* Posición: sobre el banner (esquina inferior derecha) */
.hero-banner-marco .redes-banner {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 4;
}

/* Posición: dentro del pie */
.pie-interior .redes-pie { order: 2; }

/* Selector de paletas de color: fila de círculos, cada uno con la
   muestra de colores real de su tema. Pensado para que el VISITANTE
   pruebe los temas sin depender de lo que el admin fijó por defecto
   (esa elección sigue en el Personalizador y es la que ven los
   visitantes nuevos hasta que tocan uno de estos círculos). */
.menu-lateral .selector-paletas {
  margin-top: auto;               /* empuja el bloque (selector + redes) al fondo */
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--cobalt-700) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.paleta-punto {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 30px; height: 30px;
  min-width: 30px; min-height: 30px;   /* anula el min-height:44px que hereda como <button> en móvil */
  max-width: 30px; max-height: 30px;
  margin: 0; padding: 0;                /* anula el padding del sistema de botones cristal 3D */
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);   /* sombra propia y limpia: nada heredado */
  backdrop-filter: none;                /* el blur genérico deslavaba el color */
  -webkit-backdrop-filter: none;
  text-shadow: none;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
/* Anula por completo el brillo/destello del sistema de botones genérico:
   sobre un círculo de 30px esos overlays tapaban el color entero */
.paleta-punto::before, .paleta-punto::after { content: none; }
.paleta-punto:hover { transform: translateY(-2px); filter: none; }
.paleta-punto:active { transform: scale(.92); filter: none; }
.selector-paletas .paleta-punto-azul   { background: linear-gradient(135deg, #7DD3FC 0%, #0EA5E9 45%, #003B8E 100%); }
.selector-paletas .paleta-punto-marron { background: linear-gradient(135deg, #F3CE7F 0%, #E9A83C 45%, #7A4E1F 100%); }
.selector-paletas .paleta-punto-crema  { background: linear-gradient(135deg, #F5EBD3 0%, #C9A876 45%, #33220F 100%); }
/* Marca del círculo activo: aro exterior + check */
.paleta-punto[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--sky-100), 0 0 0 4px var(--cobalt-500), 0 3px 10px rgba(0,0,0,.2);
}
.paleta-punto[aria-pressed="true"]::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Fila de iconos al fondo del cajón lateral: una sola línea SIEMPRE.
   flex:1 en cada icono reparte el ancho disponible a partes iguales;
   min-width:0 les permite encoger por debajo de su tamaño natural y
   max-width los frena en su tamaño normal cuando sobra espacio. */
.menu-lateral .redes-cajon {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;                  /* la línea ya la pone el selector de paletas */
  display: flex;
  flex-wrap: nowrap;              /* prohibido saltar a segunda línea */
  gap: 6px;
  justify-content: center;
}
.menu-lateral .redes-cajon a {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  aspect-ratio: 1;                /* la ficha se mantiene circular al encoger */
  /* Mismo tamaño de ficha que los iconos del pie */
  max-width: calc(var(--redes-tam, 26px) + 18px);
  max-height: calc(var(--redes-tam, 26px) + 18px);
  padding: 0;
  overflow: hidden;
}
/* Misma proporción interior que el pie: el icono ocupa el 60% de la
   ficha (26px dentro de 44px), con su aro de cristal alrededor. Si la
   fila se encoge por exceso de iconos, todo escala en proporción. */
.menu-lateral .redes-cajon a img,
.menu-lateral .redes-cajon a svg {
  width: 60%;
  height: 60%;
}
.menu-lateral .redes-cajon a img {
  border-radius: 50%;             /* los cuadrados se recortan al círculo */
}

/* --- Alineación horizontal (Personalizador) --- */
.redes-alinear-izquierda { justify-content: flex-start; }
.redes-alinear-centro { justify-content: center; }
.redes-alinear-derecha { justify-content: flex-end; }

/* Con iconos dentro, el pie se apila en columna: los iconos ocupan su
   propia fila completa ENCIMA del copyright, nunca a su lado */
.pie-interior:has(.redes-pie) {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  text-align: center;
}
.pie-interior .redes-pie {
  order: 0;                       /* fila propia, encima del texto */
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--cobalt-700) 14%, transparent);
}
.pie-interior:has(.redes-pie) p { margin: 0; order: 2; } /* año y texto bajo la línea */

/* La alineación del Personalizador gobierna la fila de iconos */
.pie-interior .redes-pie.redes-alinear-izquierda { justify-content: flex-start; }
.pie-interior .redes-pie.redes-alinear-centro { justify-content: center; }
.pie-interior .redes-pie.redes-alinear-derecha { justify-content: flex-end; }


/* ==========================================================
   20. Botón flotante "volver arriba"
   (mismo redondel de cristal que los iconos de redes)
   ========================================================== */
.volver-arriba {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: calc(var(--redes-tam, 26px) + 18px);
  height: calc(var(--redes-tam, 26px) + 18px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--cobalt-900);
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cobalt-900) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow: none;
  cursor: pointer;
  /* Oculto por defecto: el JS lo revela solo si la página tiene scroll */
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .2s;
}
/* Anula el sistema de botones cristal 3D genérico de <button> */
.volver-arriba::before, .volver-arriba::after { content: none; }
.volver-arriba:hover { transform: translateY(-2px); filter: none; background: color-mix(in srgb, var(--glass-bg) 95%, transparent); }
.volver-arriba:active { transform: scale(.94); }
.volver-arriba svg {
  width: var(--redes-tam, 26px);
  height: var(--redes-tam, 26px);
}
.volver-arriba.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}