/* ─────────────────────────────────────────────────────────────
   dianez.pro · Liquid Glass (CSS propio, inspirado en Glisse/iOS 26)
   Solo afecta a: barra de navegación, botones CTA y tarjetas principales.
   Cristal oscuro siempre; el resto de la web conserva su tema.
   ───────────────────────────────────────────────────────────── */

:root {
  --g-tint: rgba(16,22,36,.46);
  --g-sheen-a: rgba(255,255,255,.09);
  --g-sheen-b: rgba(255,255,255,.015);
  --g-rim: rgba(255,255,255,.55);
  --g-rim-2: rgba(120,170,255,.32);
  --g-edge: rgba(255,255,255,.12);
  --g-hi: rgba(255,255,255,.20);
  --g-spec: rgba(255,255,255,.09);
  --g-ink: #ffffff;
  --g-ink-2: #d2d2d7;
  --g-mute: #9d9da3;
  --g-btn: rgba(255,255,255,.05);
  --g-btn-line: rgba(255,255,255,.14);
  --g-accent: rgba(26,108,222,.70);
  --g-link: #5aa2ff;
  --g-blur: 18px;
  --g-sat: 175%;
  --g-shadow: 0 12px 32px -14px rgba(0,0,0,.75), 0 2px 8px -3px rgba(0,0,0,.45);
}

/* Fondo con algo más de color para que el cristal se note (decorativo, fijo) */
.net-depth { background:
  radial-gradient(ellipse 42% 34% at 14% 34%, rgba(34,130,255,.17), transparent 70%),
  radial-gradient(ellipse 34% 30% at 92% 58%, rgba(0,180,255,.10), transparent 70%),
  radial-gradient(ellipse 40% 30% at 52% 96%, rgba(70,90,255,.12), transparent 72%),
  radial-gradient(ellipse 55% 42% at 8% 104%, rgba(34,130,255,.07), transparent 70%),
  radial-gradient(ellipse 40% 30% at 50% 120%, rgba(10,40,90,.35), transparent 70%),
  radial-gradient(130% 90% at 50% 0%, transparent 45%, rgba(0,0,0,.5) 100%); }

/* ── Receta común de cristal ── */
.top, .card, .cta a.mail {
  position:relative; isolation:isolate;
  background-color:var(--g-tint);
  background-image:linear-gradient(180deg, var(--g-sheen-a), var(--g-sheen-b) 55%, transparent);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border:1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 -1px 0 rgba(255,255,255,.04), var(--g-shadow);
}
/* Borde con brillo (gradiente en el anillo, recortado con máscara) */
.top::before, .card::before, .cta a.mail::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:linear-gradient(135deg, var(--g-rim), transparent 32%, transparent 62%, var(--g-rim-2) 88%, var(--g-rim));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* Highlight especular (sigue al puntero en escritorio) */
.top::after, .card::after, .cta a.mail::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(140% 90% at var(--gx, 18%) var(--gy, -10%), var(--g-spec), transparent 46%);
}

/* ── Barra de navegación fija ── */
.top {
  position:sticky; top:10px; z-index:40;
  margin:0 -14px; padding:10px 14px; border-radius:22px;
  transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.top.is-hidden { transform:translateY(calc(-100% - 16px)); }
.top:focus-within { transform:none; }
/* Con un panel abierto la cabecera vuelve al flujo normal (como antes) */
.top:has(.panel-slot:not([hidden])) { position:relative; top:auto; transform:none; }
/* Centrado vertical: la bandeja de paneles (vacía si no hay panel abierto) no debe sumar
   el row-gap de la rejilla bajo los botones; con panel abierto, mismo aire abajo que arriba */
.top { row-gap:0; }
.top .panel-card { margin-bottom:0; }
.top a { color:var(--g-ink); }
.top a span { color:var(--g-mute); }
.top .tool-btn {
  color:var(--g-ink-2); background:var(--g-btn); border-color:var(--g-btn-line);
  box-shadow: inset 0 1px 0 var(--g-hi);
}
.top .tool-btn:hover, .top a.tool-btn:hover, .top .tool-btn.is-on { color:var(--g-ink); border-color:var(--blue); }
.top .tool-btn:focus-visible, .cta a.mail:focus-visible { outline:2px solid #5aa2ff; outline-offset:2px; }
/* Botón CTA de la barra (Contacto): cristal azul */
.top .top-actions > .tool-btn {
  color:#fff; background:var(--g-accent); border-color:rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px -6px rgba(34,130,255,.7);
}
.top .top-actions > .tool-btn:hover { color:#fff; border-color:rgba(255,255,255,.5); }
.top .lang-switch { border-color:var(--g-btn-line); background:var(--g-btn); }
.top .lang-switch a { color:var(--g-mute); }
.top .lang-switch a:hover { color:var(--g-ink); }
.top .lang-switch span { color:var(--g-ink); background:rgba(127,127,127,.14); }

/* ── Tarjetas principales ── */
.card { border-radius:18px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.card h3 { color:var(--g-ink); }
.card p { color:var(--g-mute); }
.card .links a { color:var(--g-link); }
.card .links a:hover { color:var(--g-ink); text-decoration:underline; text-underline-offset:3px; }
.card.secondary { opacity:1; }
.card.secondary h3 { color:var(--g-ink-2); }
@media (hover:hover) and (pointer:fine) { .card:hover { transform:translateY(-2px); } }

/* ── Panel de Novedades: misma receta de cristal que las tarjetas ── */
#slot-news .panel-card {
  position:relative; isolation:isolate;
  background-color:var(--g-tint);
  background-image:linear-gradient(180deg, var(--g-sheen-a), var(--g-sheen-b) 55%, transparent);
  border:1px solid var(--g-edge); border-radius:20px;
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 -1px 0 rgba(255,255,255,.04), var(--g-shadow);
}
#slot-news .panel-card::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:linear-gradient(135deg, var(--g-rim), transparent 32%, transparent 62%, var(--g-rim-2) 88%, var(--g-rim));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
#slot-news .news { max-width:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding-bottom:10px; }
#slot-news .news h2 { grid-column:1 / -1; margin-bottom:6px; }
/* Cada noticia: tarjeta de cristal ligera (sin desenfoque propio: ya lo da el panel) */
#slot-news .news article {
  position:relative; isolation:isolate; padding:16px 18px 14px; border-radius:16px;
  border:1px solid var(--g-edge);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 60%), rgba(16,22,36,.40);
  box-shadow: inset 0 1px 0 var(--g-hi), 0 8px 22px -14px rgba(0,0,0,.8);
}
#slot-news .news article::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(120% 80% at 12% -20%, var(--g-spec), transparent 50%);
}
#slot-news .news time { color:#b4b6be; }
#slot-news .news h3 { margin-top:6px; color:var(--g-ink); }
#slot-news .news p { margin-top:6px; color:var(--g-ink-2); font-size:.92rem; line-height:1.55; }
#slot-news .news a { color:var(--g-link); }
#slot-news .news a:hover { color:var(--g-ink); text-decoration:underline; text-underline-offset:3px; }
#slot-news .news a:focus-visible { outline:2px solid #5aa2ff; outline-offset:2px; border-radius:4px; }

/* ── CTA final (correo): píldora de cristal ── */
.cta a.mail {
  display:inline-flex; align-items:center; padding:12px 22px; border-radius:999px;
  color:var(--g-ink); font-weight:500;
}
.cta a.mail:hover { color:var(--g-ink); }
.cta a.mail:hover::after { --gy:0%; }

/* ── Móvil ── */
@media (max-width:820px) {
  .top { margin:0 -12px; padding:10px 12px; border-radius:20px; }
  .top .pills { margin-top:10px; }
  .top .lang-switch { background:var(--g-btn); }
  .top .lang-switch a { color:var(--g-mute); }
  .top .lang-switch span { color:#fff; background:transparent; }
  .top .lang-switch::before { background:#1667d9; }
  /* Rendimiento: sin desenfoque en las tarjetas (fondo animado detrás) */
  .card { -webkit-backdrop-filter:none; backdrop-filter:none; background-color:rgba(20,27,42,.72); }
  #slot-news .panel-card { -webkit-backdrop-filter:none; backdrop-filter:none; background-color:rgba(14,19,30,.86); }
  #slot-news .news { grid-template-columns:1fr; gap:10px; }
  #slot-news .news article { padding:14px 16px 12px; }
}

/* Refracción de borde (solo Chromium de escritorio; ver glass.js) */
html.lg-refract .top:not(:has(.panel-slot:not([hidden]))) {
  -webkit-backdrop-filter:url(#dz-refract) blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:url(#dz-refract) blur(var(--g-blur)) saturate(var(--g-sat));
}

/* Sin backdrop-filter: cristal opaco equivalente */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .top, .card, .cta a.mail { background-color:rgba(18,24,38,.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .top, .card, .cta a.mail, #slot-news .panel-card { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background-color:rgb(18,24,38); }
  #slot-news .news article { background:rgb(26,33,48); }
}
@media (prefers-reduced-motion: reduce) {
  .top, .card { transition:none !important; }
  .card:hover { transform:none; }
  .top.is-hidden { transform:none; }
}