/* PROTOTIPO «cristal líquido» — se carga DESPUÉS de styles.css; borrar este fichero y su <link> deshace todo. */
:root{
  --lg-bg: rgba(255,255,255,.14);
  --lg-bg-light: rgba(255,255,255,.58);
  --lg-edge: rgba(255,255,255,.55);
  --lg-shadow: 0 10px 40px rgba(46,26,79,.18), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.15);
}
/* 1) Barra de navegación: más translúcida y con borde de luz */
.navbar{
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 0 rgba(75,44,127,.06), 0 8px 30px rgba(46,26,79,.06);
}
/* 2) Tarjetas flotantes del hero (sobre el vídeo): cristal con reflejo */
.hero__float-card{
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-shadow);
  position: relative; overflow: hidden;
}
.hero__float-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 38%);
  opacity:.7;
}
/* 3) Precios: el fondo recibe color para que el cristal «se vea a través» */
.pricing{
  position:relative; overflow:hidden;
  background:
    radial-gradient(520px 340px at 12% 18%, rgba(123,92,184,.28), transparent 70%),
    radial-gradient(480px 360px at 88% 78%, rgba(180,211,31,.30), transparent 70%),
    radial-gradient(420px 300px at 60% 8%, rgba(94,58,153,.16), transparent 70%),
    var(--color-off-white);
}
.pricing-card{
  background: var(--lg-bg-light);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-shadow);
  overflow:hidden;
}
.pricing-card::before{ /* reflejo tipo espejo en el borde superior */
  content:""; position:absolute; inset:0 0 auto 0; height:46%; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-radius: inherit;
}
.pricing-card > *:not(.pricing-card__badge){ position:relative; }
.pricing-card--featured{
  border: 1.5px solid rgba(255,255,255,.8);
  box-shadow: 0 18px 60px rgba(94,58,153,.30), inset 0 1px 0 rgba(255,255,255,.8);
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(235,226,250,.55));
}
/* destello lento que cruza la tarjeta destacada */
.pricing-card--featured::after{
  content:""; position:absolute; top:-20%; bottom:-20%; width:40%; left:-60%; pointer-events:none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: lg-sheen 6.5s ease-in-out infinite;
}
@keyframes lg-sheen{ 0%,55%{left:-60%} 100%{left:130%} }
/* 4) «¿Por qué nosotros?» y opiniones: mismo lenguaje, más sutil */
.why-us__card, .testimonial-card{
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--lg-edge);
  box-shadow: 0 8px 30px rgba(46,26,79,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
/* 5) Botón secundario de precios: cristal que se ilumina al pasar el ratón */
.pricing-card__cta--secondary{
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(94,58,153,.35);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.pricing-card__cta--secondary:hover{ background: rgba(255,255,255,.85); box-shadow: 0 6px 22px rgba(94,58,153,.22); transform: translateY(-1px); }
/* Reserva: navegadores sin backdrop-filter → fondos casi sólidos para no perder legibilidad */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .navbar,.pricing-card,.why-us__card,.testimonial-card{ background: rgba(255,255,255,.96); }
  .hero__float-card{ background: rgba(46,26,79,.55); }
}
/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){ .pricing-card--featured::after{ animation:none; display:none; } }

/* ── Resto de páginas: tarjetas con el mismo lenguaje de cristal ── */
.fibra-feature-card, .movil-advantage-card, .contact-card, .about-card, .feature-card,
.promise-card, .app-download-card, .fibra-faq__item, .movil-faq__item{
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.55));
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--lg-edge);
  box-shadow: 0 8px 30px rgba(46,26,79,.08), inset 0 1px 0 rgba(255,255,255,.85);
}
.fibra-feature-card, .movil-advantage-card, .contact-card, .about-card, .feature-card, .promise-card{
  transition: transform .3s ease, box-shadow .3s ease;
}
.fibra-feature-card:hover, .movil-advantage-card:hover, .contact-card:hover, .about-card:hover,
.feature-card:hover, .promise-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(94,58,153,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .fibra-feature-card,.movil-advantage-card,.contact-card,.about-card,.feature-card,.promise-card,
  .app-download-card,.fibra-faq__item,.movil-faq__item{ background: rgba(255,255,255,.96); }
}
@media (prefers-reduced-motion: reduce){
  .fibra-feature-card:hover,.movil-advantage-card:hover,.contact-card:hover,.about-card:hover,
  .feature-card:hover,.promise-card:hover{ transform:none; }
}

/* ── Tarifas de Fibra y Móvil, y secciones con tarjetas: fondo con color para que el cristal se aprecie ── */
.fibra-plans, .movil-plans, .fibra-features, .movil-advantages, .about-section, .features{
  position:relative;
  background:
    radial-gradient(520px 340px at 10% 15%, rgba(123,92,184,.22), transparent 70%),
    radial-gradient(480px 360px at 92% 85%, rgba(180,211,31,.24), transparent 70%),
    var(--color-off-white);
}
.fibra-plan{
  background: var(--lg-bg-light);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  border: 1px solid var(--lg-edge);
  box-shadow: var(--lg-shadow);
  overflow:hidden;
}
.fibra-plan__body{ background: transparent; }
.fibra-plan--featured{
  box-shadow: 0 18px 60px rgba(94,58,153,.30), inset 0 1px 0 rgba(255,255,255,.8);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .fibra-plan{ background: rgba(255,255,255,.97); }
}