/* VeNet · venet.mx — estilos del sitio (2026)
   Paleta del manual de identidad: azul PANTONE 299 C, navy, gris cálido */
:root{
  --navy:#0D1720; --navy-2:#16232F; --azul:#00A3E0; --azul-texto:#0C76BD;
  --tinta:#231F20; --texto:#4D4D4F; --claro:#F7F6F3; --calido:#EFEDE8;
  --gris-claro:#C9D3DA; --borde:#E2DFDA; --blanco:#FFFFFF;
  --titulos:'Barlow Semi Condensed','DIN Next LT Pro','Arial Narrow',Arial,sans-serif;
  --cuerpo:'Work Sans',Arial,sans-serif;
  --ancho:1200px; --radio:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--cuerpo);font-size:18px;line-height:1.55;color:var(--tinta);background:var(--claro)}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul-texto)}
a:hover{color:var(--navy)}
h1,h2,h3{font-family:var(--titulos);font-weight:700;line-height:1.08;margin:0}
h1{font-size:clamp(40px,6vw,72px)}
h2{font-size:clamp(32px,4.2vw,52px)}
h3{font-size:24px}
p{margin:0}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.seccion{padding:96px 0}
.seccion--oscura{background:var(--navy);color:var(--claro)}
.seccion--azul{background:var(--azul);color:var(--navy)}
.seccion--calida{background:var(--calido)}
.encabezado-seccion{display:flex;flex-direction:column;gap:12px;max-width:780px;margin-bottom:40px}
.etiqueta{font-family:var(--titulos);font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:15px;color:var(--azul-texto)}
.seccion--oscura .etiqueta{color:var(--azul)}
.seccion--azul .etiqueta{color:var(--navy)}
.subtitulo{font-size:20px;color:var(--texto)}
.seccion--oscura .subtitulo{color:var(--gris-claro)}
.rejilla{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:32px;display:flex;flex-direction:column;gap:12px}
.tarjeta p{color:var(--texto)}
.tarjeta--oscura{background:var(--navy-2);border:none}
.tarjeta--oscura p{color:var(--gris-claro)}
.boton{display:inline-block;font-family:var(--titulos);font-weight:700;font-size:19px;text-decoration:none;padding:15px 28px;border-radius:999px;border:2px solid transparent;transition:transform .15s,opacity .15s}
.boton:hover{transform:translateY(-1px);opacity:.92}
.boton--azul{background:var(--azul);color:var(--navy)}
.boton--azul:hover{color:var(--navy)}
.boton--navy{background:var(--navy);color:var(--claro)}
.boton--navy:hover{color:var(--claro)}
.boton--borde{border-color:var(--claro);color:var(--claro)}
.boton--borde:hover{color:var(--claro)}
.botones{display:flex;flex-wrap:wrap;gap:16px}

/* Encabezado */
.header{position:sticky;top:0;z-index:50;background:var(--navy)}
.header .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.header__logo img{height:52px;width:auto}
.menu{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.menu a{color:var(--claro);text-decoration:none;font-family:var(--titulos);font-weight:600;font-size:17px}
.menu a:hover{color:var(--azul)}
.menu .boton{padding:10px 20px;font-size:16px}
.menu-toggle{display:none;background:none;border:2px solid var(--claro);border-radius:10px;color:var(--claro);font-size:16px;padding:8px 12px;cursor:pointer;font-family:var(--titulos);font-weight:600}

/* Portada */
.hero{background:var(--navy);color:var(--claro);padding:72px 0 88px;overflow:hidden}
.hero__fila{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero__texto{flex:1 1 520px;display:flex;flex-direction:column;gap:24px}
.hero__texto .subtitulo{color:var(--gris-claro);max-width:620px}
.hero__grafico{flex:1 1 320px;display:flex;justify-content:center}
.hero__grafico svg{width:100%;max-width:460px;height:auto}
.indicadores{margin-top:64px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.indicador{border-top:2px solid var(--azul);padding-top:16px}
.indicador strong{display:block;font-family:var(--titulos);font-size:44px;color:var(--azul);line-height:1.1}
.indicador span{color:var(--gris-claro)}

/* Planes */
.plan__nombre{font-family:var(--titulos);font-weight:600;font-size:18px;color:var(--texto)}
.plan__velocidad{font-family:var(--titulos);font-weight:700;font-size:60px;line-height:1;color:var(--azul-texto)}
.plan__velocidad small{font-size:24px}
.plan__precio{font-size:30px;font-weight:600}
.plan__precio small{font-size:16px;font-weight:400;color:var(--texto)}
.tarjeta--destacada{background:var(--navy);border:none;color:var(--claro)}
.tarjeta--destacada .plan__nombre,.tarjeta--destacada p,.tarjeta--destacada .plan__precio small{color:var(--gris-claro)}
.tarjeta--destacada .plan__velocidad{color:var(--azul)}
.notas{margin-top:24px;background:var(--calido);border-radius:var(--radio);padding:32px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.notas h3{font-size:21px;margin-bottom:4px}
.notas p{color:var(--texto);font-size:17px}

/* VeNet Wifi */
.wifi__fila{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.wifi__texto{flex:1 1 480px;display:flex;flex-direction:column;gap:16px}
.wifi__datos{flex:1 1 300px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.dato{background:var(--navy);color:var(--claro);border-radius:var(--radio);padding:28px}
.dato strong{display:block;font-family:var(--titulos);font-size:40px;color:var(--azul);white-space:nowrap}
.dato span{color:var(--gris-claro)}

/* Red */
.paso strong{display:block;font-family:var(--titulos);font-size:52px;line-height:1;color:var(--azul)}
.paso h3{margin:8px 0}
.paso p{color:var(--texto)}

/* Íconos */
.icono{width:44px;height:44px;stroke:var(--azul);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Pagos */
.pago strong{font-family:var(--titulos);font-size:44px;color:var(--azul-texto);line-height:1.1}

/* Preguntas */
.preguntas{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.preguntas details{background:var(--blanco);border:1px solid var(--borde);border-radius:16px;padding:20px 24px}
.preguntas summary{cursor:pointer;font-family:var(--titulos);font-weight:700;font-size:21px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";color:var(--azul-texto);font-size:26px;line-height:1}
.preguntas details[open] summary::after{content:"−"}
.preguntas details p{margin-top:12px;color:var(--texto)}

/* Contacto y pie */
.contacto{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.contacto p{color:var(--texto);margin-top:10px}
.contacto__whats{font-family:var(--titulos);font-weight:700;font-size:30px;text-decoration:none}
.contacto__enlaces{display:flex;flex-direction:column;gap:14px;font-size:18px}
.footer{background:var(--navy);color:var(--gris-claro);padding:40px 0}
.footer .contenedor{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.footer img{height:46px;width:auto}
.footer nav{display:flex;flex-wrap:wrap;gap:20px;font-size:15px}
.footer a{color:var(--gris-claro)}

/* Botón flotante de WhatsApp */
.whats-flotante{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.whats-flotante svg{width:32px;height:32px;fill:#fff}

/* Páginas internas */
.legal{max-width:860px;margin:0 auto;padding:72px 24px}
.legal h1{font-size:44px;margin-bottom:24px}
.legal h2{font-size:28px;margin:32px 0 12px}
.legal p,.legal li{color:var(--texto)}
.pendiente{background:#FFF2CC;padding:0 4px;border-radius:4px}

/* Celular */
@media (max-width:900px){
  .menu-toggle{display:block}
  .menu{display:none;position:absolute;top:76px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:flex-start;padding:16px 24px 24px;gap:18px;border-top:1px solid var(--navy-2)}
  .menu.abierto{display:flex}
  .seccion{padding:72px 0}
  .hero{padding:48px 0 64px}
  .hero__grafico{display:none}
  .dato{padding:22px}
  .dato strong{font-size:32px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.boton{transition:none}}