/* ==========================================================================
   charlydoblec.com
   Paleta tomada de "La noche estrellada" y del logo (nariz y lágrimas de payaso)
   ========================================================================== */
:root {
  --noche: #0e1d52;
  --remolino: #2c4fa8;
  --estrella: #f4cf55;
  --hueso: #f6efe2;
  --nariz: #ec6a5c;
  --kick: #53fc18;
  --en-vivo: #ff3b4e;

  --ancho: 480px;
  --radio: 999px;
  --resorte: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--noche);
  color: var(--hueso);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fondo ---------- */
.fondo {
  position: fixed;
  inset: -4%;
  z-index: 0;
  background-color: var(--noche);
  background-image: url("../../img/fondo.jpg");
  background-image: image-set(url("../../img/fondo.webp") type("image/webp"), url("../../img/fondo.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 35%;
  animation: deriva 60s ease-in-out infinite alternate;
  will-change: transform;
}
@media (max-aspect-ratio: 4/5) {
  .fondo {
    background-image: url("../../img/fondo-movil.jpg");
    background-image: image-set(url("../../img/fondo-movil.webp") type("image/webp"), url("../../img/fondo-movil.jpg") type("image/jpeg"));
    background-position: 50% 50%;
  }
}
/* Velo para que el texto se lea sobre la pintura */
.velo {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(10, 20, 64, .55), rgba(10, 20, 64, 0) 70%),
    linear-gradient(180deg, rgba(8, 16, 52, .25) 0%, rgba(8, 16, 52, .10) 45%, rgba(8, 16, 52, .65) 100%);
}
@keyframes deriva {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
}

/* ---------- Estructura ---------- */
.pagina {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(40px, 9vh, 88px) 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 12px;
  background: var(--hueso); color: var(--noche); font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 16px; }

/* ---------- Perfil ---------- */
.perfil { display: flex; flex-direction: column; align-items: center; }

.avatar {
  position: relative;
  width: 132px; height: 132px;
  margin-bottom: 20px;
  border-radius: 50%;
}
.avatar::before { /* halo fantasma */
  content: "";
  position: absolute; inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 239, 226, .38) 0%, rgba(125, 140, 240, .2) 42%, transparent 70%);
  filter: blur(8px);
  animation: respirar 5s ease-in-out infinite;
}
.avatar img {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--estrella);
  box-shadow: 0 0 0 7px rgba(244, 207, 85, .16), 0 14px 40px rgba(4, 10, 40, .55);
}
@keyframes respirar {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

.nombre {
  font-family: "Caprasimo", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 8.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: .005em;
  text-shadow: 3px 3px 0 var(--remolino), 0 0 28px rgba(244, 207, 85, .35);
}
.bio {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 1.04rem;
  line-height: 1.4;
  color: rgba(246, 239, 226, .9);
  text-shadow: 0 1px 10px rgba(4, 10, 40, .8);
}
.bio-linea { display: block; white-space: nowrap; }
.bio-linea--destacada { font-weight: 700; color: var(--hueso); }
.bio-separador { margin: 0 .3em; color: var(--estrella); font-weight: 400; }
.bio-linea--invitacion { margin-top: 8px; font-size: .92rem; color: rgba(246, 239, 226, .75); }
@media (max-width: 340px) { .bio-linea { white-space: normal; } }

/* ---------- Fila de redes (iconos) ---------- */
.redes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.vidrio.vidrio--icono {
  width: 46px;
  height: 46px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.vidrio--icono .icono { width: 21px; height: 21px; }
@media (max-width: 360px) {
  .redes { gap: 7px; }
  .vidrio.vidrio--icono { width: 42px; height: 42px; }
  .vidrio--icono .icono { width: 19px; height: 19px; }
}
.vidrio--icono::before { left: 14%; right: 14%; height: 44%; }

/* ---------- Campana de avisos ---------- */
.campana[hidden] { display: none; }
.campana { display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.vidrio.vidrio--campana {
  --tinte: 244, 207, 85;
  width: auto;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-color: rgba(244, 207, 85, .55);
}
.vidrio--campana .icono { width: 20px; height: 20px; color: var(--estrella); }
.vidrio--campana[data-estado="activo"] { --tinte: 83, 252, 24; border-color: rgba(83, 252, 24, .55); }
.vidrio--campana[data-estado="activo"] .icono { color: var(--kick); }
.vidrio--campana[data-estado="cargando"] { opacity: .7; pointer-events: none; }
.vidrio--campana:not([data-estado="activo"]) .icono { animation: timbre 4s ease-in-out 1.2s infinite; transform-origin: 50% 15%; }
@keyframes timbre {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(14deg); }
  88% { transform: rotate(-12deg); }
  91% { transform: rotate(8deg); }
  94% { transform: rotate(-5deg); }
}
.campana-nota {
  max-width: 32ch;
  margin-top: 8px;
  font-size: .85rem;
  color: rgba(246, 239, 226, .82);
  text-shadow: 0 1px 8px rgba(4, 10, 40, .9);
}

/* Pasos para iPhone */
.tarjeta-campana { width: 44px; height: 44px; margin: 6px 0 10px; color: var(--estrella); }
.pasos { list-style: none; width: 100%; margin: 18px 0 20px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.pasos li { display: flex; align-items: flex-start; gap: 12px; font-size: .98rem; line-height: 1.4; }
.paso-num {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(244, 207, 85, .18); color: var(--estrella); font-weight: 700; font-size: .9rem;
}
.icono-en-linea { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- Enlaces ---------- */
.enlaces {
  list-style: none;
  width: 100%;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.icono { flex: none; width: 26px; height: 26px; fill: currentColor; }
.icono--linea { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.texto strong { font-size: 1.06rem; font-weight: 700; }
.texto small {
  font-size: .86rem;
  opacity: .82;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   VIDRIO LÍQUIDO
   - Capa base: desenfoque + saturación (todos los navegadores modernos)
   - Navegadores Chromium (Chrome, Brave, Edge, Opera): refracción real con
     SVG feDisplacementMap; la clase .refraccion la agrega app.js
   ========================================================================== */
.vidrio {
  --tinte: 255, 255, 255;
  --mx: 50%;
  --my: 50%;
  --brillo: 0;

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-radius: var(--radio);
  color: #fff;
  text-decoration: none;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  background: linear-gradient(135deg,
    rgba(var(--tinte), .16) 0%,
    rgba(var(--tinte), .05) 50%,
    rgba(var(--tinte), .10) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(175%) brightness(1.05);
  backdrop-filter: blur(14px) saturate(175%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .14),
    inset 0 0 20px rgba(255, 255, 255, .07),
    0 10px 30px rgba(4, 10, 40, .38);

  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(var(--sx, 1), var(--sy, 1));
  transition:
    transform .45s var(--resorte),
    box-shadow .3s ease,
    background .3s ease,
    border-color .3s ease;
  will-change: transform;
}

/* Reflejo curvo en la parte de arriba */
.vidrio::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 7%; right: 7%; top: 2px;
  height: 46%;
  border-radius: 999px 999px 45% 45% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Destello especular que sigue al cursor / dedo */
.vidrio::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(90px circle at var(--mx) var(--my), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%),
    radial-gradient(220px circle at var(--mx) var(--my), rgba(var(--tinte), .16), transparent 70%);
  opacity: var(--brillo);
  transition: opacity .3s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Estado activo (cursor encima o dedo presionando) */
.vidrio.activo {
  --brillo: 1;
  border-color: rgba(255, 255, 255, .5);
  background: linear-gradient(135deg,
    rgba(var(--tinte), .22) 0%,
    rgba(var(--tinte), .07) 50%,
    rgba(var(--tinte), .14) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .8),
    inset 0 -1.5px 0 rgba(255, 255, 255, .25),
    inset 0 0 26px rgba(255, 255, 255, .12),
    0 16px 40px rgba(4, 10, 40, .45);
}
.vidrio.presionado {
  --sx: 1.03;
  --sy: .94;
  transition: transform .14s ease-out;
}
.vidrio.soltar { animation: gelatina .7s var(--resorte); }
@keyframes gelatina {
  0%   { transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1.03, .94); }
  30%  { transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(.97, 1.04); }
  55%  { transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1.015, .985); }
  75%  { transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(.995, 1.005); }
  100% { transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1, 1); }
}

.vidrio:focus-visible {
  outline: 3px solid var(--estrella);
  outline-offset: 4px;
}

/* Refracción real (Chromium). El filtro SVG lo genera app.js por botón */
.vidrio.refraccion {
  -webkit-backdrop-filter: var(--filtro) blur(2.5px) saturate(175%) brightness(1.06);
  backdrop-filter: var(--filtro) blur(2.5px) saturate(175%) brightness(1.06);
}

/* Botón principal de Kick */
.vidrio--kick {
  --tinte: 83, 252, 24;
  padding: 19px 22px;
  border-color: rgba(83, 252, 24, .6);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(83, 252, 24, .35),
    inset 0 0 26px rgba(83, 252, 24, .16),
    0 0 26px rgba(83, 252, 24, .22),
    0 10px 30px rgba(4, 10, 40, .38);
}
.vidrio--kick.activo {
  border-color: rgba(83, 252, 24, .9);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .85),
    inset 0 -1.5px 0 rgba(83, 252, 24, .5),
    inset 0 0 30px rgba(83, 252, 24, .24),
    0 0 36px rgba(83, 252, 24, .38),
    0 16px 40px rgba(4, 10, 40, .45);
}
.vidrio--kick .icono { width: 30px; height: 30px; color: var(--kick); filter: drop-shadow(0 0 6px rgba(83, 252, 24, .55)); }
.vidrio--kick .texto strong { font-size: 1.2rem; }

/* Indicador EN VIVO (lo activa app.js con /api/en-vivo) */
.vivo {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: none;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--en-vivo);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: none;
  box-shadow: 0 0 18px rgba(255, 59, 78, .55);
}
.vivo::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: latido 1.4s ease-in-out infinite;
}
.en-vivo .vivo { display: inline-flex; }
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* Botones <button> con el mismo aspecto que los enlaces */
button.vidrio { width: 100%; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }

/* ---------- Tarjeta de contacto ---------- */
.contacto {
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hueso);
  overflow: visible;
}
.contacto::backdrop {
  background: rgba(6, 12, 40, .55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.contacto[open] { animation: aparecer .45s var(--resorte); }
.contacto[open]::backdrop { animation: oscurecer .3s ease; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes oscurecer { from { opacity: 0; } to { opacity: 1; } }

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 22px;
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(44, 79, 168, .55), rgba(14, 29, 82, .78));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .45),
    inset 0 0 40px rgba(255, 255, 255, .06),
    0 30px 80px rgba(2, 6, 28, .6);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.tarjeta-etiqueta { font-size: .9rem; color: rgba(246, 239, 226, .8); }
.tarjeta-logo {
  width: 88px; height: 88px;
  margin: 16px 0 12px;
  border-radius: 50%;
  border: 3px solid var(--estrella);
  box-shadow: 0 0 0 6px rgba(244, 207, 85, .15);
  object-fit: cover;
}
.tarjeta-nombre {
  font-family: "Caprasimo", Georgia, serif;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  text-shadow: 2px 2px 0 var(--remolino);
}
.tarjeta-sub { margin-top: 4px; font-size: .95rem; color: rgba(246, 239, 226, .82); }
.tarjeta-acciones {
  width: 100%;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta-acciones .vidrio { padding: 13px 18px; }
.tarjeta-acciones .vidrio--kick .icono { color: #fff; filter: none; }
.tarjeta-acciones .vidrio--kick .texto strong { font-size: 1.06rem; }

.cerrar {
  position: absolute;
  top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.cerrar:hover { background: rgba(255, 255, 255, .2); }
.cerrar:focus-visible { outline: 3px solid var(--estrella); outline-offset: 3px; }
.cerrar .icono { width: 18px; height: 18px; }

/* ---------- Pie ---------- */
.pie {
  margin-top: 44px;
  font-size: .84rem;
  color: rgba(246, 239, 226, .72);
  text-shadow: 0 1px 8px rgba(4, 10, 40, .9);
}
.pie b { font-weight: 700; color: var(--estrella); }

/* ---------- 404 ---------- */
.error-codigo {
  font-family: "Caprasimo", Georgia, serif;
  font-size: clamp(4.5rem, 22vw, 7rem);
  line-height: 1;
  text-shadow: 4px 4px 0 var(--remolino), 0 0 40px rgba(244, 207, 85, .4);
}
.error-texto { margin: 14px 0 28px; max-width: 100%; font-size: 1rem; text-wrap: balance; color: rgba(246, 239, 226, .9); text-shadow: 0 1px 10px rgba(4, 10, 40, .8); }
.error-texto p + p { margin-top: 10px; }
.vidrio--centro { justify-content: center; text-align: center; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .fondo, .avatar::before, .vivo::before, .contacto[open], .contacto[open]::backdrop, .vidrio--campana .icono { animation: none !important; }
  .vidrio, .vidrio.presionado { transition: background .2s ease, box-shadow .2s ease; transform: none; }
  .vidrio.soltar { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .vidrio, .vidrio.refraccion {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(14, 29, 82, .92);
  }
}
@media (forced-colors: active) {
  .vidrio { border: 2px solid ButtonText; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }