/* =====================================================================
   ACCESO PICO — HOJA DE ESTILOS
   =====================================================================
   Cómo está organizado este archivo:
   1. Variables globales (colores, tipografía, medidas reutilizables)
   2. Reset básico + estilos generales (body, links, botones)
   3. Un bloque de CSS por sección del sitio, en el mismo orden en que
      aparecen en index.html (header → hero → planes → ... → footer)
   4. Media queries al final, agrupadas por ancho de pantalla

   Unidad de medida: casi todo está en píxeles para que sea predecible.
   Los tamaños de fuente "clamp(min, ideal, max)" son la excepción:
   crecen o achican solos según el ancho de pantalla, sin necesitar
   una media query aparte para cada tamaño de texto.
   ===================================================================== */

/* -----------------------------------------------------------------
   1) VARIABLES GLOBALES (custom properties)
   Definir los colores acá (una sola vez) y usarlos como var(--nombre)
   en el resto del archivo permite cambiar toda la paleta del sitio
   editando solamente estas líneas.
   ----------------------------------------------------------------- */
:root{
  /* Paleta violeta: es el color dominante de la marca (fondos de
     hero, tarjetas destacadas, CTA finales) */
  --purple-1: #8A3DF7;   /* violeta más claro/vibrante, arranque de los degradés */
  --purple-2: #3A1470;   /* violeta oscuro, final de los degradés */
  --purple-deep: #200B49;/* violeta casi negro, para las esquinas del hero */

  /* Tinta principal: se usa para textos oscuros y fondos sólidos oscuros
     (header, footer, tarjeta "Empresas") */
  --ink: #180B33;

  /* Acentos secundarios, tomados del isotipo (globo azul + alas rojas) */
  --blue: #1CA7E8;
  --blue-2: #0E7FC4;
  --red: #E8443C;
  --red-2: #F2825A;

  /* Neutros: fondos claros y líneas divisorias */
  --paper: #FFFFFF;
  --paper-2: #F6F3FC;    /* blanco con un toque violeta, para secciones alternadas */
  --line: #E7E1F3;       /* líneas separadoras sobre fondo claro */
  --line-dark: #4A2E86;  /* líneas separadoras sobre fondo oscuro */

  /* Texto */
  --text: #241640;
  --text-soft: #6B6180;  /* texto secundario/descriptivo */

  /* Medidas reutilizables */
  --max: 1180px;         /* ancho máximo del contenido (evita líneas gigantes en monitores grandes) */
  --radius: 16px;        /* radio de borde estándar para tarjetas */
}

/* -----------------------------------------------------------------
   2) RESET BÁSICO Y ESTILOS GENERALES
   ----------------------------------------------------------------- */

/* Reset universal: saca márgenes/paddings por defecto del navegador
   y hace que width/height incluyan el padding y el borde (box-sizing) */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Los links con # (ej. href="#planes") se desplazan con animación
   en vez de saltar de golpe */
html{
  scroll-behavior: smooth;
}

body{
  background: var(--paper);
  color: var(--text);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased; /* texto más prolijo en pantallas Mac/iOS */
}

/* Las imágenes y SVG nunca desbordan su contenedor */
img, svg{
  display: block;
  max-width: 100%;
}

a{
  color: inherit;
  text-decoration: none;
}

ul{
  list-style: none;
}

button{
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Contenedor centrado que usan casi todas las secciones */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* Los títulos usan la tipografía redondeada (Poppins) para que se
   note la diferencia con el texto de cuerpo (Inter) */
h1, h2, h3, .disp{
  font-family: 'Poppins', sans-serif;
}
h2{
  font-size: clamp(27px, 3.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.18;
}
h3{
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
p{
  color: var(--text-soft);
}

/* Contorno visible al navegar con teclado (accesibilidad).
   :focus-visible solo lo muestra cuando se navega con Tab, no al
   hacer click con el mouse, así no "ensucia" la interfaz. */
:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ============================== BOTONES ============================== */
/* .btn es la base común; .btn-solid / .btn-ghost / .btn-outline son
   las 3 variantes de color; .btn-sm y .btn-block son modificadores
   de tamaño que se pueden combinar con cualquier variante. */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 25px;
  border-radius: 999px; /* número grande = siempre termina en píldora */
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{
  transform: translateY(-1px); /* se "levanta" un poco al pasar el mouse */
}

.btn-solid{ /* botón principal: relleno rojo, para la acción más importante */
  background: var(--red);
  color: #fff;
}
.btn-solid:hover{
  background: #f0584c;
  box-shadow: 0 12px 26px -10px rgba(232,68,60,.55);
}

.btn-ghost{ /* botón secundario sobre fondos oscuros/violeta */
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.2);
}

.btn-outline{ /* botón secundario sobre fondos claros */
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-outline:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.btn-sm{ padding: 10px 19px; font-size: 13.5px; }
.btn-block{ width: 100%; justify-content: center; }

/* Botón de "Consultar mi empresa" dentro de la franja oscura de
   la sección Empresas: necesita separación del párrafo de arriba */
.local-band .btn{
  margin-top: 22px;
}

/* Botón de WhatsApp dentro del menú mobile: no debe estirarse a
   todo el ancho como el resto de los links */
.mobile-menu .btn{
  width: fit-content;
  margin-top: 10px;
}


/* ============================== HEADER / NAV ============================== */
header{
  position: fixed;      /* siempre visible, incluso al hacer scroll */
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
}
header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo a la izquierda, nav+CTA a la derecha */
}
/* Clase que agrega script.js por JS cuando el usuario baja más de
   40px: el header se achica y gana fondo sólido con blur */
header.scrolled{
  padding: 11px 0;
  background: rgba(24,11,51,.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -14px rgba(0,0,0,.5);
}

/* Logo del header y del footer: el emblema (globo + alas) como imagen,
   y el nombre de la marca como texto al lado. Se usa el emblema solo
   (no el archivo con la palabra incluida) porque en una barra fina el
   logo completo quedaría demasiado chico para leerse. */
.logo{
  display: flex;
  align-items: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 19px;
  white-space: nowrap; /* que "Acceso Pico" no se parta en dos líneas */
}
.logo .mark{
  height: 34px;
  width: auto;
  margin-right: 11px;
  flex-shrink: 0; /* nunca se achica aunque falte espacio */
}
/* Al hacer scroll el header se achica, y el logo lo acompaña */
header.scrolled .logo .mark{
  height: 28px;
}

nav ul{
  display: flex;
}
/* Espaciado entre links de nav usando margin en vez de "gap":
   así funciona igual en cualquier navegador, viejo o nuevo */
nav ul li:not(:last-child){
  margin-right: 30px;
}
nav a{
  color: rgba(255,255,255,.82);
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}
nav a:hover{ color: #fff; }

.nav-cta{
  display: flex;
  align-items: center;
}
.nav-cta .btn-ghost{
  margin-right: 18px;
}

/* Ícono de menú hamburguesa (mobile), construido con 3 <span>
   posicionados de forma absoluta en vez de flexbox: así el ícono
   se ve bien en cualquier navegador, incluso los más antiguos,
   sin depender de que "gap" funcione dentro de un <button>. */
.burger{
  display: none; /* se muestra solo en mobile, ver media query abajo */
  position: relative;
  width: 26px;
  height: 18px;
  flex-shrink: 0;
}
.burger span{
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.burger span:nth-child(1){ top: 0; }
.burger span:nth-child(2){ top: 8px; }
.burger span:nth-child(3){ top: 16px; }

/* Menú mobile a pantalla completa, oculto por defecto.
   script.js le agrega/saca la clase .open al tocar el botón burger. */
.mobile-menu{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  padding: 100px 28px 40px;
  flex-direction: column;
}
.mobile-menu.open{
  display: flex;
}
.mobile-menu a{
  display: block;
  color: #fff;
  font-size: 21px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: 24px;
}


/* ============================== HERO ============================== */
.hero{
  /* Degradé radial violeta, más claro arriba a la derecha y oscuro
     hacia las esquinas — da la sensación de "luz" detrás del logo */
  background: radial-gradient(120% 130% at 78% 18%, var(--purple-1) 0%, var(--purple-2) 52%, var(--purple-deep) 100%);
  color: #fff;
  padding: 160px 0 0; /* el padding-top dej lugar al header fijo */
  position: relative;
  overflow: hidden; /* recorta los anillos animados que sobresalen */
}
.hero .wrap{
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2; /* por encima de los anillos decorativos */
}
.hero-copy{ flex: 1.05 1 0; min-width: 320px; }
.hero-visual{
  flex: .95 1 0;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* referencia para centrar los anillos */
}

.hero h1{
  font-size: clamp(36px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 14ch; /* corta el título en un ancho legible, no en el borde de la pantalla */
}
.hero .lede{
  margin-top: 22px;
  font-size: 17.5px;
  color: rgba(255,255,255,.82);
  max-width: 48ch;
}
.hero-cta{
  display: flex;
  flex-wrap: wrap;
  margin-top: 34px;
}
.hero-cta .btn{
  margin-right: 14px;
  margin-bottom: 12px; /* para cuando los botones se apilan en pantallas chicas */
}
.hero-facts{
  display: flex;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-facts .hero-fact{
  margin-right: 34px;
  margin-bottom: 10px;
}
.hero-fact b{
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}
.hero-fact span{
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
}

/* Logo grande del hero. Se dimensiona por ancho porque es la pieza
   visual principal de la sección, y queda centrado dentro de los
   anillos animados. */
.hero-logo{
  width: 330px;
  max-width: 100%;
  position: relative;
  z-index: 2;
}

/* Anillos tipo "señal de radar" que rodean el logo del hero.
   Están centrados con la técnica top/left 50% + translate(-50%,-50%),
   que los ancla al medio exacto de .hero-visual sin importar el tamaño
   del logo ni el ancho de la pantalla.
   Los 3 usan la misma animación pero arrancan en momentos distintos
   (animation-delay), para que parezcan ondas expandiéndose una detrás
   de la otra en vez de moverse todas juntas. */
.ring{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px; /* la mitad del tamaño, para centrarlo */
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4);
  animation: ping 3.6s ease-out infinite;
}
.ring:nth-of-type(1){ animation-delay: 0s; }
.ring:nth-of-type(2){ animation-delay: 1.2s; }
.ring:nth-of-type(3){ animation-delay: 2.4s; }
@keyframes ping{
  0%   { transform: scale(.55); opacity: .9; }
  100% { transform: scale(1.4); opacity: 0; }
}
/* Si el usuario configuró su sistema para reducir animaciones,
   respetamos esa preferencia y dejamos los anillos quietos */
@media (prefers-reduced-motion: reduce){
  .ring{ animation: none; opacity: .25; }
}

/* Franja oscura pegada abajo del hero, con accesos rápidos a cada
   servicio (ancla a las secciones de más abajo) */
.services-strip{
  background: var(--ink);
  padding: 8px 0;
}
.services-nav{
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
}
.services-nav a{
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.75);
  font-size: 13.5px;
  font-weight: 500;
  margin-right: 30px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.services-nav a .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 9px;
  flex-shrink: 0;
}
.services-nav a:hover{ color: #fff; }


/* ============================== SECCIONES (genérico) ============================== */
/* Reglas compartidas por casi todas las <section>: separan el
   contenido en bloques verticales parejos */
section{
  padding: 92px 0;
}
.section-head{
  max-width: 640px;
  margin-bottom: 50px;
}
.section-head .kicker{ /* etiqueta chica arriba del título, ej. "Internet" */
  display: block;
  color: var(--red);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.section-head p{
  margin-top: 14px;
  font-size: 16.5px;
}
/* Alterna el fondo entre secciones blancas y violeta clarito, para
   separar visualmente un bloque de contenido del siguiente sin
   necesitar líneas divisorias */
.alt-bg{
  background: var(--paper-2);
}


/* ============================== TARJETAS "POR QUÉ ELEGIRNOS" ============================== */
.service-cards{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.service-card{
  flex: 1 1 210px; /* crece parejo, pero nunca baja de 210px antes de saltar de línea */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -22px rgba(24,11,51,.25);
  border-color: transparent;
}
.service-icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
/* Variantes de color de fondo para .service-icon: reemplazan los
   "style=background:..." sueltos que había antes en el HTML, para
   que el color de cada ícono se pueda cambiar acá y no en el markup */
.service-icon.tint-blue{ background: #E9F6FD; }
.service-icon.tint-red{ background: #FDEDEC; }
.service-icon.tint-blue2{ background: #EAF3FD; }
.service-icon.tint-coral{ background: #FBEEE7; }

.service-card h3{ font-size: 16.5px; margin-bottom: 8px; }
.service-card p{ font-size: 13.5px; }


/* ============================== PLANES DE INTERNET ============================== */
/* Selector tipo "pill" para cambiar entre Fibra óptica / Wireless.
   El cambio de contenido lo maneja script.js agregando/sacando la
   clase .active de .plan-tab y .plan-set. */
.plan-tabs{
  display: flex;
  width: fit-content;
  margin-bottom: 38px;
  padding: 5px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.plan-tab{
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
}
.plan-tab.active{
  background: var(--ink);
  color: #fff;
}

.plan-set{
  display: none; /* oculto por defecto; .active lo muestra */
}
.plan-set.active{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch; /* todas las tarjetas de la fila quedan con la misma altura */
}
.plan-card{
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color .2s ease, transform .2s ease;
}
/* Espaciado vertical entre los elementos de cada tarjeta de plan,
   sin tener que ponerle margin a cada uno por separado */
.plan-card > *{ margin-bottom: 13px; }
.plan-card > *:last-child{ margin-bottom: 0; }
.plan-card:hover{
  transform: translateY(-4px);
  border-color: var(--ink);
}

/* Tarjeta destacada ("el más elegido"): degradé violeta y todo el
   texto interno pasa a blanco automáticamente */
.plan-card.featured{
  background: linear-gradient(160deg, var(--purple-1), var(--purple-2));
  border-color: transparent;
}
.plan-card.featured *{ color: #fff; }
.plan-card.featured .plan-speed{ color: #fff; }
.plan-card.featured .plan-tag{ color: #F4D9FF; }
.plan-card.featured ul{ color: rgba(255,255,255,.85); }
.plan-card.featured ul li::before{ color: #F4D9FF; }
.plan-card.featured .plan-price-note{ color: rgba(255,255,255,.65); }

.plan-tag{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-2);
}
.plan-speed{
  font-family: 'Poppins', sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.plan-speed sup{
  font-size: 15px;
  font-weight: 600;
  margin-left: 4px;
}
.plan-card ul{
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--text-soft);
}
.plan-card ul li{
  display: flex;
  align-items: flex-start;
  margin-bottom: 9px;
}
.plan-card ul li:last-child{ margin-bottom: 0; }
/* Guion "—" dibujado con CSS en vez de escribirlo a mano en cada <li> */
.plan-card ul li::before{
  content: "—";
  color: var(--blue-2);
  margin-right: 9px;
  flex-shrink: 0;
}
.plan-price-note{
  font-size: 12.5px;
  color: #9187a6;
}

/* Las dos tarjetas de "forma de pago" debajo de los planes */
.payment-band{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 26px;
}
.payment-card{
  flex: 1 1 280px;
  display: flex;
  align-items: flex-start;
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.payment-card .num{
  flex-shrink: 0;
  margin-right: 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--red);
}
.payment-card h3{ font-size: 16px; margin-bottom: 6px; }
.payment-card p{ font-size: 13.5px; }


/* ============================== BLOQUES DE SERVICIO (TV / Cámaras / Starlink) ============================== */
/* Estructura de 2 columnas: texto explicativo (.feature-copy) +
   lista de características con ícono (.feature-list). Se reutiliza
   para TV Digital, Cámaras y Starlink. */
.feature-section{
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}
/* .reverse invierte el orden visual (lista primero, texto después)
   en pantallas grandes — se usa en la sección de Cámaras para que
   no todos los bloques se vean exactamente iguales */
.feature-section.reverse .feature-list{ order: 1; }
.feature-section.reverse .feature-copy{ order: 2; }

.feature-copy{ flex: 1 1 320px; }
.feature-copy .badge{
  display: inline-block;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.feature-copy p.lead{
  margin-top: 14px;
  font-size: 16.5px;
  color: var(--text);
}

.feature-list{
  flex: 1.1 1 360px;
  display: flex;
  flex-direction: column;
}
.feature-row{
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.feature-row:last-child{
  border-bottom: 1px solid var(--line);
}
.feature-row .fi{ /* círculo de fondo detrás de cada ícono */
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}
.feature-row .fi svg{ width: 17px; height: 17px; }
.feature-row p{ font-size: 14.5px; color: var(--text); }

/* Recuadro de aviso importante (ej. "no hacemos monitoreo") */
.disclaimer{
  margin-top: 22px;
  background: #FFF4E9;
  border: 1px solid #F3DDBE;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13.5px;
  color: #8A5A1E;
}
/* Recuadro de aviso neutro (ej. beneficio o promo vigente) */
.promo-note{
  margin-top: 22px;
  background: var(--paper-2);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--text-soft);
}


/* ============================== FRANJA "EMPRESAS" ============================== */
.local-band{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  background: var(--ink);
  color: #fff;
  border-radius: 24px;
  padding: 56px 50px;
}
.local-band .mark-big{ /* emblema (sin texto) dentro de la franja oscura */
  width: 96px;
  height: auto;
  flex-shrink: 0;
}
.local-band h2{ color: #fff; max-width: 18ch; }
.local-band p{ color: rgba(255,255,255,.7); margin-top: 12px; max-width: 52ch; }


/* ============================== TESTIMONIOS ============================== */
.testimonials{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.t-card{
  flex: 1 1 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.t-card p.quote{
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.t-card .who{
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}


/* ============================== CONTACTO ============================== */
.contact-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.contact-info{
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
}
.contact-row{
  display: flex;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.contact-row:last-child{
  border-bottom: 1px solid var(--line);
}
.contact-row .ci{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}
.contact-row .ci svg{ width: 18px; height: 18px; }
.contact-row h3{ font-size: 14.5px; margin-bottom: 4px; }
.contact-row p{ font-size: 14px; }

/* Tarjeta violeta con el formulario de "consultá tu zona" */
.contact-form-card{
  flex: 1 1 360px;
  background: linear-gradient(160deg, var(--purple-1), var(--purple-2));
  border-radius: var(--radius);
  padding: 36px;
  color: #fff;
}
.contact-form-card h3{ color: #fff; font-size: 21px; margin-bottom: 8px; }
.contact-form-card p{ color: rgba(255,255,255,.72); font-size: 14px; margin-bottom: 22px; }
.cform{
  display: flex;
  flex-direction: column;
}
.cform input{
  margin-bottom: 12px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
}
.cform input::placeholder{ color: rgba(255,255,255,.5); }

/* Mensaje de confirmación que aparece después de enviar el
   formulario (script.js le agrega la clase .show) */
.check-result{
  display: none;
  margin-top: 4px;
  font-size: 13.5px;
  color: #F4D9FF;
}
.check-result.show{ display: block; }


/* ============================== PREGUNTAS FRECUENTES ============================== */
.faq{ max-width: 820px; }
.faq-item{ border-top: 1px solid var(--line); }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }

.faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 23px 0;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
.faq-q span:first-child{
  flex: 1 1 auto;
  padding-right: 20px;
}
/* El ícono +/− se arma con dos líneas (::before horizontal,
   ::after vertical) en vez de un ícono de fuente o imagen.
   margin-left:auto lo empuja al extremo derecho del botón sin
   depender de "justify-content: space-between", que en algunos
   navegadores no se aplica bien dentro de un <button>. */
.faq-q .plus{
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
  margin-left: auto;
}
.faq-q .plus::before,
.faq-q .plus::after{
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease;
}
.faq-q .plus::before{ /* línea horizontal, siempre visible */
  width: 100%; height: 2px;
  top: 50%; left: 0;
  transform: translateY(-50%);
}
.faq-q .plus::after{ /* línea vertical: al abrir, rota 90° y desaparece → queda el "−" */
  width: 2px; height: 100%;
  left: 50%; top: 0;
  transform: translateX(-50%);
}
.faq-item.open .plus::after{
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-a{
  max-height: 0; /* respuesta colapsada por defecto */
  overflow: hidden;
  transition: max-height .3s ease;
}
/* Altura por defecto cuando una pregunta está marcada como abierta
   en el HTML (la primera del listado). script.js recalcula esta
   altura con precisión (scrollHeight) apenas el usuario interactúa,
   este valor de acá es solo el estado inicial antes de tocar nada. */
.faq-item.open .faq-a{
  max-height: 500px;
}
.faq-a p{
  padding-bottom: 23px;
  font-size: 14.5px;
  max-width: 64ch;
}


/* ============================== CTA FINAL ============================== */
.final-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 36px;
  background: radial-gradient(120% 150% at 20% 20%, var(--purple-1) 0%, var(--purple-2) 55%, var(--purple-deep) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 60px 54px;
}
.final-cta h2{ color: #fff; max-width: 16ch; }
.final-cta p{ color: rgba(255,255,255,.72); margin-top: 10px; max-width: 38ch; }


/* ============================== FOOTER ============================== */
footer{
  background: var(--ink);
  color: rgba(255,255,255,.68);
  padding: 60px 0 28px;
}
.foot-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.foot-grid > div{ flex: 1 1 190px; }
.foot-grid > .foot-brand{ flex: 1.5 1 250px; } /* la columna de marca es un poco más ancha */
.foot-grid h4{
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 15px;
}
.foot-grid ul{
  display: flex;
  flex-direction: column;
}
.foot-grid ul li{
  margin-bottom: 9px;
  font-size: 13.5px;
}
.foot-grid a:hover{ color: #fff; }
.foot-brand .logo{ margin-bottom: 14px; }
.foot-brand p{ font-size: 13.5px; max-width: 30ch; }

.foot-bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  font-size: 12px;
}


/* =====================================================================
   4) MEDIA QUERIES
   Se agrupan por punto de corte (980px = tablet/mobile, 560px =
   celular chico) en vez de una media query distinta por componente,
   para que sea más fácil ver de un vistazo todo lo que cambia en
   cada tamaño de pantalla.
   ===================================================================== */

/* --- Tablet y celular (menos de 980px de ancho) --- */
@media (max-width: 980px){
  nav{ display: none; }                 /* se oculta el menú de escritorio */
  .nav-cta .btn-ghost{ display: none; } /* se oculta el botón de WhatsApp del header */
  .burger{ display: flex; }             /* aparece el ícono hamburguesa */

  .hero .wrap{ flex-direction: column; }
  .hero-visual{ order: -1; margin-bottom: 30px; } /* el logo pasa arriba del texto */

  .local-band{ padding: 40px 30px; }
  .final-cta{ padding: 44px 30px; }

  .contact-form-card{ order: -1; } /* el formulario pasa arriba de los datos de contacto */

  /* En mobile, todos los bloques "reverse" (como Cámaras) vuelven a
     mostrar primero el texto y después la lista, para que el título
     de la sección no quede oculto más abajo en la pantalla */
  .feature-section.reverse .feature-copy{ order: -1; }
  .feature-section.reverse .feature-list{ order: 1; }
}

/* --- Celular chico (menos de 560px de ancho) --- */
@media (max-width: 560px){
  section{ padding: 64px 0; }
  .hero{ padding-top: 132px; }
  .services-nav a{ margin-right: 20px; }
  .local-band{ flex-direction: column; align-items: flex-start; }
  .foot-grid > div{ flex-basis: 100%; } /* cada columna del footer ocupa todo el ancho */
}