/* =========================================================
   glass.css
   Estilo "Dark Bento Glass" — cristal OSCURO translúcido para las tarjetas.
   Se carga DESPUÉS de components.css para sobrescribir sus tarjetas.
   Modular y reversible: borra el <link> y la web vuelve a su estado.

   - Tarjetas: fondo oscuro translúcido con una luz sutil superior,
     borde fino claro (rgba blanco 0.1) y esquinas de 24px.
   - Cajas internas (slots de imagen, iconos, chips, inputs, opciones):
     cristal oscuro flotante (rgba blanco 0.05 + blur 16px + borde 0.08).
   - Hover: resplandor/beam blanco translúcido muy sutil en el borde.
   Se conservan paleta, tipografía y acentos cian de la marca.
   ========================================================= */

/* Superficies tipo tarjeta a las que aplicamos el cristal oscuro */
.card,
.testimonial,
.transform,
.form,
.test__card,
.faq__item,
.booking-card,       /* agenda.html */
.detail,             /* agenda.html */
.scheduler__frame {  /* agenda.html */
  /* 1 · Cristal: desenfoque del fondo (con prefijo para Safari/iOS) */
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);

  /* 2 · Fondo oscuro profundo translúcido + luz superior sutil
     (gradiente especular tenue 0.04 → 0.01 sobre base oscura sólida) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
    rgba(10, 13, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);   /* borde especular extremadamente sutil */
  border-radius: 24px;

  /* 3 · Elevación + reflejo superior interno (bisel sutil) */
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Fallback si el navegador no soporta backdrop-filter: fondo oscuro opaco. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card,
  .testimonial,
  .transform,
  .form,
  .test__card,
  .faq__item,
  .booking-card,
  .detail,
  .scheduler__frame {
    background: rgba(16, 22, 40, 0.96);
  }
}

/* ---- Legibilidad: texto en blanco / blancos translúcidos (jerarquía) ---- */
.card__title,
.form__title,
.form__field label,
.testimonial__name { color: #ffffff; }

.card__text,
.card--benefit p,
.testimonial__quote,
.transform__caption,
.form__subtitle,
.faq__q,
.faq__a p,
.test__card .section__lead { color: rgba(255, 255, 255, 0.85); }

/* Acentos de marca: se mantienen (cian), no se pasan a blanco */
.card__num,
.testimonial__result,
.testimonial__quote::before { color: var(--c-cyan); }

/* ---- 2 · Cajas internas "flotantes" (cristal oscuro) ----
   Slots de imagen antes/después, iconos, chips numéricos, opciones del test
   y campos del formulario: transparencia oscura + desenfoque + borde fino. */
.card__icon,
.card__num,
.step__num,          /* agenda.html */
.test__option,
.form .form__field input,
.form .form__field select,
.form .form__field textarea {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Slots de imagen antes/después: pozos oscuros recesados (cristal oscuro),
   más oscuros que la tarjeta para dar sensación de profundidad. */
.transform__ph {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---- 3 · Hover: el borde especular gana luminosidad + sombra de luz difusa.
   Transición suave con easing "macOS" (cubic-bezier 0.16, 1, 0.3, 1). ---- */
.card,
.testimonial,
.transform,
.booking-card,
.detail {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover,
.testimonial:hover,
.transform:hover,
.booking-card:hover,
.detail:hover {
  border-color: rgba(255, 255, 255, 0.25);     /* borde más luminoso al pasar el cursor */
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),            /* sombra difusa y elegante */
    0 0 40px rgba(25, 212, 255, 0.10),          /* halo de luz muy suave (cian de marca) */
    inset 0 1px 0 rgba(255, 255, 255, 0.22);    /* línea de luz superior (bisel) */
}
.card:hover .card__icon {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}

/* FAQ: el acordeón es una "tarjeta"; ajustamos sus piezas internas */
.faq__item { overflow: hidden; }          /* mantiene el recorte con el radio nuevo */
.faq__a p { color: rgba(255, 255, 255, 0.80); }

/* Inputs: mismo cristal oscuro interno, con texto blanco y borde un punto
   más visible para usabilidad (el foco sigue siendo cian, de components.css). */
.form .form__field input,
.form .form__field select,
.form .form__field textarea {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
}

/* ---- 4 · Contraste detrás del cristal ----
   Las secciones con tarjetas reciben un halo de color sutil (azul/cian de
   la marca) para que la translucidez del cristal se aprecie. Muy tenue:
   no cambia la identidad, solo da "algo que desenfocar" por detrás. */
#servicio,
#transformaciones,
#testimonios,
#beneficios,
#test-nivel,
.cta-final {
  background-image:
    radial-gradient(70% 60% at 15% 10%, rgba(27, 63, 224, 0.16), transparent 60%),
    radial-gradient(60% 55% at 90% 85%, rgba(25, 212, 255, 0.12), transparent 60%);
  background-repeat: no-repeat;
}

/* ---- agenda.html: legibilidad sobre el cristal (acentos cian intactos) ---- */
.booking-card__title,
.detail__value { color: #ffffff; }

.booking-card__text,
.booking-card__note,
.scheduler__placeholder p { color: rgba(255, 255, 255, 0.85); }

/* Contraste detrás del cristal en las secciones de la agenda */
.agenda-grid,
.scheduler {
  background-image:
    radial-gradient(70% 60% at 12% 8%, rgba(27, 63, 224, 0.16), transparent 60%),
    radial-gradient(60% 55% at 92% 88%, rgba(25, 212, 255, 0.12), transparent 60%);
  background-repeat: no-repeat;
}

/* En tilt 3D, el cristal viaja con la tarjeta (se mantiene el perspective) */
.has-tilt { border-radius: 24px; }

/* Movimiento reducido / sin cambios de estructura: el cristal es estático,
   funciona igual. Nada que desactivar aquí. */