/* =========================================================
=  TARJETAS DE PLANES (BASE)
========================================================= */
.tarjeta-plan{
  width: 100%;
  max-width: 360px;
  background-color: #111827;
  color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  margin: 0; /* Swiper controla el espacio */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tarjeta-plan:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

/* =========================================================
=  ENCABEZADO CON FOTO (EL QUE USAS AHORA)
=  - Mantiene variantes de color (azul/verde/morado)
=  - No depende de gradientes legacy
========================================================= */
.encabezado-foto{
  position: relative;
  padding: 0 !important;
  height: 140px;
  display: block !important;
  background: #0b63f3; /* fallback si no carga la imagen */
  overflow: hidden;
}
.encabezado-foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
}
.encabezado-foto {
  --head-h: 200px; /* altura base, cámbiala si quieres más o menos alto */
  position: relative;
  padding: 0 !important;
  height: var(--head-h);
  display: block !important;
  background: #0b63f3; /* fallback si no carga la imagen */
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Responsivo: ajustar altura en pantallas pequeñas */
@media (max-width: 1024px) {
  .encabezado-foto { --head-h: 150px; }
}
@media (max-width: 640px) {
  .encabezado-foto { --head-h: 140px; }
}


/* —— Variantes de color (overlay sutil) —— */
.encabezado-foto.azul::after,
.encabezado-foto.verde::after,
.encabezado-foto.morado::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
}
.encabezado-foto.azul::after  { background: rgba(33,150,243,.18); }  /* #2196F3 */
.encabezado-foto.verde::after { background: rgba(36,193,107,.18); }  /* #24C16B */
.encabezado-foto.morado::after{ background: rgba(126,87,194,.18); }  /* #7E57C2 */

/* —— Utilidades de encuadre —— */
.encabezado-foto img.focus-right  { object-position: right  center; }
.encabezado-foto img.focus-left   { object-position: left   center; }
.encabezado-foto img.focus-center { object-position: center center; }
.encabezado-foto img.focus-top    { object-position: center 20%; }
.encabezado-foto img.focus-bottom { object-position: center 80%; }

/* =========================================================
=  (OPCIONAL) ENCABEZADO LEGACY CON GRADIENTES
=  - No se usa en tu HTML actual, pero LO CONSERVO comentado
=  - Útil si algún día quieres volver a gradientes
========================================================= */
/*
.encabezado{
  width: 100%;
  padding: 16px 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.encabezado-amarillo{ background: linear-gradient(90deg, #f9a825, #f57c00); }
.encabezado-azul{     background: linear-gradient(90deg, #1976d2, #2196f3); }
.encabezado-morado{   background: linear-gradient(90deg, #8e24aa, #d81b60); }
.encabezado h2{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.1;
  font-weight: 800;
  flex: 1;
}
.encabezado h2 span{
  display: block;
  font-size: .85em;
  font-weight: 600;
  opacity: .95;
}
.icono-chica, .icono-router{
  height: 80px; width: auto; flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
@media (max-width: 360px){
  .icono-chica, .icono-router{ height: 68px; }
  .encabezado{ padding: 14px; gap: 10px; }
}
*/

/* =========================================================
=  CONTENIDO DE LA TARJETA (LISTA, PRECIO, BOTÓN)
========================================================= */
/* — Lista de características — */
.caracteristicas{
  list-style: none;
  margin: 0 16px 4px 16px;
  padding: 0;
}
.caracteristicas li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #e6edf7;
  margin: 8px 0;
}
.caracteristicas li::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}

/* — Precio — */
.precio{
  text-align: center;
  padding: 10px 16px 0;
}
.precio-original{
  text-decoration: line-through;
  color: #9aa4b2;
  font-size: 14px;
  margin: 0 0 6px;
}
.precio-oferta{
  font-size: 22px;
  font-weight: 800;
  background-color: #ff5722;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
  letter-spacing: .2px;
}
.precio-oferta span{
  font-size: 13px;
  font-weight: 600;
  opacity: .95;
}

/* — Botón — */
.boton-interesa{
  margin: 14px auto 18px;
  width: 90%;
  text-align: center;
  background-color: #2196f3;
  color: white;
  padding: 11px;
  border-radius: 10px;
  font-size: 16px;
  text-decoration: none;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.boton-interesa:hover{
  background-color: #1976d2;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(25,118,210,.35);
}

/* =========================================================
=  SWIPER (AYUDAS PARA QUE NO SE COLAPSE)
=  - Importante: NO definir .planes-izzi como grid/flex aquí
========================================================= */
#planesSwiper .swiper-wrapper{ align-items: stretch; }
#planesSwiper .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: auto !important; /* evita colapso de altura */
}

/* =========================================================
=  BENEFICIOS (ESCALA/SORPRESAS/VELOCIDAD)
=  - Mantengo tu versión en grid (limpié el duplicado en flex)
=  - Scoped p/ no afectar otros .card
========================================================= */
.benefit-cards {
  padding: 48px 24px 80px;
  min-height: 70vh;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  perspective: 1000px;
}
.benefit-cards .card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.benefit-cards .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.benefit-cards .card img {
  width: 100%;
  max-width: 360px;
  border-radius: 12px;
  margin-bottom: 16px;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform-origin: center;
}
.benefit-cards .card:hover img { transform: scale(1.03); }
.benefit-cards .card h3 {
  font-weight: 800;
  font-size: 1.5rem;
  margin: 10px 0 8px;
  color: #0d2b4f;
}
.benefit-cards .card p {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  max-width: 50ch;
}

/* — Reveal al hacer scroll (con IntersectionObserver) — */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px) rotateY(8deg) scale(.98);
    filter: blur(3px);
    transform-origin: 50% 60%;
  }
  .reveal.in-view {
    opacity: 1;
    transform: translateY(0) rotateY(0) scale(1);
    filter: blur(0);
    transition:
      transform .7s cubic-bezier(.2,.8,.2,1),
      opacity .6s ease,
      filter .6s ease;
  }
  .benefit-cards .card.reveal:nth-child(1).in-view { transition-delay: .05s; }
  .benefit-cards .card.reveal:nth-child(2).in-view { transition-delay: .15s; }
  .benefit-cards .card.reveal:nth-child(3).in-view { transition-delay: .25s; }
}

/* — Tilt 3D suave al hover — */
@media (hover: hover) and (pointer: fine) {
  .benefit-cards .card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
  }
  .benefit-cards .card:hover {
    transform: translateY(-8px) rotateX(3deg) rotateY(3deg);
    box-shadow: 0 22px 48px rgba(0,0,0,.18);
  }
}

/* — Responsive grid de beneficios — */
@media (min-width: 1440px){
  .benefit-cards{ max-width: 1600px; gap: 56px; }
}
@media (max-width: 1024px){
  .benefit-cards{ grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 640px){
  .benefit-cards{ grid-template-columns: 1fr; gap: 20px; padding: 32px 16px 56px; }
}

/* — Efectos LED (solo en beneficios) — */
:root{
  --hf-blue:#2f80ff;
  --hf-green:#22c55e;
}
.led-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: transparent;
  background: linear-gradient(90deg, var(--hf-blue), var(--hf-green), var(--hf-blue));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0 6px rgba(47,128,255,.35), 0 0 16px rgba(34,197,94,.25);
  animation: ledGradient 6s linear infinite;
}
@keyframes ledGradient { to { background-position: 200% 0; } }
.benefit-cards .card:hover .led-title{
  text-shadow: 0 0 8px rgba(47,128,255,.45), 0 0 22px rgba(34,197,94,.35);
}
.led-soft{
  color:#3b4756; font-weight: 500; letter-spacing:.15px;
  text-shadow: 0 0 2px rgba(96,165,250,.25), 0 0 6px rgba(34,197,94,.15);
  transition: text-shadow .3s ease;
}
.benefit-cards .card:hover .led-soft{
  text-shadow: 0 0 3px rgba(96,165,250,.35), 0 0 10px rgba(34,197,94,.25);
}

/* Párrafos animados SOLO dentro de .benefit-cards */
.benefit-cards .card p{
  font-size: 1rem;
  font-weight: 500;
  color: #1e3a5f;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp .6s ease forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.benefit-cards .card:hover p{
  color: #0d6efd;
  text-shadow: 0 2px 6px rgba(13,110,253,.4);
}

/* =========================================================
=  INTRO SERVICIOS (TARJETAS GRANDES)
========================================================= */
.intro-servicios{
  background: linear-gradient(to right, #f4f9ff, #e8fff4);
  padding: 60px 20px;
  text-align: center;
  position: relative;
  z-index: 5;
  perspective: 1200px;
}
.container-intro{ max-width: 1200px; margin: auto; }
.titulo-intro{
  font-size: 2.5rem; font-weight: 800; color: #0d2b4f; margin-bottom: 40px;
}
.fibra-text{ color:#007bff; }
.antena-text{ color:#28a745; }
.contenedor-tarjetas-intro{
  display: flex; justify-content: center; flex-wrap: wrap; gap: 40px;
}
.card-intro{
  background: #fff;
  padding: 30px 25px;
  border-radius: 15px;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter, box-shadow;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease, filter .6s ease, box-shadow .35s;
}
.card-intro.reveal{
  opacity: 0; transform: translateY(26px) rotateX(4deg) rotateY(14deg) scale(.96); filter: blur(3px);
}
.card-intro.reveal.in-view{
  opacity: 1; transform: translateY(0) rotateX(0) rotateY(0) scale(1); filter: blur(0);
}
.card-intro:hover,
.card-intro.reveal.in-view:hover{
  transform: translateY(-8px) rotateX(6deg) rotateY(8deg) scale(1.02);
  box-shadow: 0 24px 56px rgba(0,0,0,.16);
}
.card-intro img{ width:120px; height:auto; margin-bottom:20px; object-fit:contain; }
.card-intro h3{ font-size:1.6rem; color:#0d2b4f; margin-bottom:10px; }
.card-intro p{ font-family:'Poppins',sans-serif; font-size:1rem; color:#444; line-height:1.6; }
@media (max-width: 900px){
  .titulo-intro{ font-size: 2.1rem; }
  .contenedor-tarjetas-intro{ gap: 24px; }
}


/* ===== ESTILOS IFT ===== */
.ift-block{
  width:100%;
  margin-top:40px;                 /* separa del formulario */
  background-position:center;
  background-size:cover;
  position:relative;
  color:#fff;
}
.ift-overlay{
  position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.45));
}
.ift-container{
  position:relative; z-index:1;
  max-width:1000px; margin:0 auto;
  padding:60px 20px 50px;          /* alto del banner + espacio para la lista */
  text-align:center;
}
.ift-title{
  margin:0 0 18px;
  font-weight:800;
  font-size:clamp(24px,3vw,40px);
  text-shadow:0 6px 18px rgba(0,0,0,.35);
}
.ift-sub{
  margin:0 auto 14px;
  font-size:clamp(16px,2vw,22px);
  font-weight:800;
  color:#c9f5d8;
}
.ift-list{
  list-style:none; padding:0; margin:0 auto;
  max-width:640px; text-align:left;
}
.ift-list li{ margin:8px 0; }
.ift-list a{
  display:block; padding:8px 10px; border-radius:6px;
  color:#fff; text-decoration:none; font-weight:600;
  font-size:clamp(15px,1.2vw,18px);
  transition:background .15s ease, text-decoration-color .15s ease;
}
.ift-list a:hover{ background:rgba(255,255,255,.08); text-decoration:underline; }

/* Responsive */
@media (max-width:640px){
  .ift-container{ padding:44px 16px 40px; }
  .ift-list{ max-width:100%; }
}

/* === Chat a la parte superior derecha (forzado) === */
.chat-fab{
  position: fixed !important;
  right: 18px !important;
  top: 90px !important;        /* AJUSTA según la altura del header */
  bottom: auto !important;     /* anula posición inferior previa */
  z-index: 10050 !important;   /* más alto que el header y el botón de WhatsApp */
}

.chat-panel{
  position: fixed !important;
  right: 18px !important;
  top: 160px !important;       /* panel debajo del FAB; ajusta si lo quieres más separado */
  bottom: auto !important;     /* anula posición inferior */
  z-index: 10040 !important;
}

/* En móvil, regresa el chat abajo para no tapar navegación */
@media (max-width: 768px){
  .chat-fab{
    top: auto !important;
    bottom: 18px !important;
  }
  .chat-panel{
    top: auto !important;
    bottom: 88px !important;   /* panel justo arriba del FAB */
  }
}




/* ====== Contacto + Redes + Mapa ====== */
.footer-extras{
    background: transparent;
    padding: 40px 20px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: bold;
}

.footer-extras .wrap{
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 24px;
    align-items: flex-start; justify-content: space-between;

    /* Fondo semitransparente */
    background: rgba(0, 0, 0, 0.55);
    padding: 25px;
    border-radius: 12px;
}

.footer-extras h2{
    color: #FFFFFF;
    font-size: 1.4rem;
    margin: 0 0 14px;
    letter-spacing: .5px;
}

.footer-extras p{
    margin: 6px 0;
    line-height: 1.45;
    color: #E0E0E0;
}

.footer-extras strong{
    color:#FFFFFF;
}

.footer-extras a{
    color: #0e8a3a;
    text-decoration: none;
}
.footer-extras a:hover{
    color:#FFD700;
}

.contacto{ flex: 1 1 320px; min-width: 260px; }
.social{ flex: 1 1 260px; min-width: 220px; text-align: center; }
.social-icons{
    display:flex; gap:14px;
    justify-content:center; align-items:center;
}
.social-icons img{
    width:34px; height:34px;
    display:block; border-radius:8px;
}

.mapa{ flex: 1 1 420px; min-width: 320px; }
.mapa iframe{
    width:100%; height:220px;
    border:0; border-radius:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Responsivo */
@media (max-width: 720px){
    .social{ order:3; }
    .mapa{ order:2; }
    .contacto{ order:1; }
    .footer-extras{ padding:28px 16px; }
}



/* Chat: legibilidad y listas bonitas */
.chat-panel{ width: 380px; max-width: 92vw; }
.msg{
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: .2px;
  word-break: break-word;
  text-align: left;
  background:#fff;
  border:1px solid #e6e8eb;
}
.msg.user{ background:#e8f6ee; border:1px solid #cfeedd; }

.msg a{ color:#0e8a3a; font-weight:700; text-decoration:none; }
.msg a:hover{ text-decoration:underline; }

/* Estilos específicos para títulos/listas dentro del mensaje del bot */
.msg .msg-title{ font-weight:800; margin-bottom:6px; }
.msg .msg-list{ margin:8px 0 10px 1rem; padding:0; }
.msg .msg-list li{ margin:6px 0; }
.msg .hint{ margin-top:8px; font-size:13px; color:#6b7280; }





/* Imágenes fluidas por si acaso */
img { max-width: 100%; height: auto; }

/* Tarjetas: asegura que la foto cubra bien y no deforme */
.encabezado-foto img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}

/* Formulario: en móvil todo a una columna */
@media (max-width: 768px){
  .container { padding-left: 16px; padding-right: 16px; }

  /* Si tu layout del formulario usa grid/flex, fuerza columna única */
  .formulario-cotizacion .fila{
    display:block;          /* o flex -> column */
  }
  .formulario-cotizacion .fila input{
    width:100%;
    margin-bottom:12px;
  }
  .formulario-cotizacion select,
  .formulario-cotizacion textarea,
  .formulario-cotizacion button{
    width:100%;
  }

  /* Separación extra entre tarjetas en el carrusel */
  #planesSwiper .swiper-slide{
    padding: 6px 4px;
  }
}

/* Evita “temblores” con el fondo fijo en algunos móviles */
.background-carousel{
  position: fixed; inset:0; z-index:-1;
  transform: translateZ(0);    /* acelera en GPU */
  will-change: opacity, transform;
}