/* =============================================================================
   andproducciones.com — hoja única del sitio.

   La identidad no cambia: fondo medianoche, azul cobalto, Sora para titulares y
   Manrope para el texto. Lo que cambia es el registro: de agencia de webs a
   empresa de software. Por eso hay una tercera voz tipográfica, la monoespaciada
   del sistema, reservada a lo que en un producto de software también lo sería:
   dominios, estados, etiquetas técnicas y números de paso. Nada de decorado.
   ============================================================================= */

:root{
  --fondo:#0B1220;
  --fondo-2:#0E1526;
  --superficie:#111A2E;
  --superficie-2:#16213A;
  --linea:rgba(250,250,248,.08);
  --linea-2:rgba(250,250,248,.14);
  --texto:#FAFAF8;
  /* Contrastes sobre --fondo: texto-2 12.8:1, texto-3 7.1:1. Por debajo de
     .62 el secundario deja de llegar al 4.5:1 de WCAG AA. */
  --texto-2:#C9CFDA;
  --texto-3:rgba(250,250,248,.62);
  /* El cobalto da 3.4:1 sobre el fondo: vale para superficies, botones y
     titulares grandes, no para texto pequeño. Para eso está --cobalto-txt (8.6:1). */
  --cobalto:#1557FF;
  --cobalto-hover:#3A6BFF;
  --cobalto-suave:rgba(21,87,255,.14);
  --cobalto-borde:rgba(21,87,255,.45);
  --cobalto-txt:#8FB4FF;
  /* El verde es el único verde del sitio y solo significa una cosa: responde. */
  --verde:#34D399;
  --radio:14px;
  --radio-g:20px;
  --ancho:1180px;
  --gutter:clamp(16px,5vw,32px);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --display:'Sora',system-ui,sans-serif;
  --cuerpo:'Manrope',system-ui,sans-serif;
  --alto-cabecera:68px;
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--alto-cabecera) + 16px);}
/* Nada de overflow-x:hidden en body: con html en clip, el body pasa a ser un
   contenedor de scroll propio y la cabecera sticky deja de pegarse arriba.
   El recorte horizontal ya lo hace html con clip, que no crea contenedor. */
body{font-family:var(--cuerpo);font-size:16px;line-height:1.6;background:var(--fondo);color:var(--texto);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;}
p{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--cobalto);color:var(--texto);}
:focus-visible{outline:2px solid var(--cobalto-txt);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.salto{position:absolute;left:-9999px;top:0;z-index:300;background:var(--cobalto);color:var(--texto);padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;font-size:14px;}
.salto:focus{left:0;}

/* ---- Tipografía utilitaria ---------------------------------------------- */
/* Doble clase a propósito: las reglas de párrafo de cada bloque (.proyecto p,
   .cabeza p...) ganaban por especificidad y dejaban los rótulos grises y a
   tamaño de texto. Así el rótulo manda siempre sobre la tipografía, y cada
   bloque solo decide su margen. */
.etiqueta.etiqueta{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--cobalto-txt);max-width:none;}
.etiqueta.etiqueta-gris{color:var(--texto-3);}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--texto-2);}
.enlace{color:var(--cobalto-txt);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.enlace:hover{color:var(--texto);}
.enlace svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.enlace:hover svg{transform:translateX(3px);}
.texto-enlace{color:var(--cobalto-txt);text-decoration:underline;text-underline-offset:3px;}
.texto-enlace:hover{color:var(--texto);}

/* ---- Botones ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:100px;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,transform .2s,color .2s;}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.btn-primario{background:var(--cobalto);color:var(--texto);}
.btn-primario:hover{background:var(--cobalto-hover);transform:translateY(-1px);}
.btn-secundario{border-color:var(--linea-2);color:var(--texto);background:transparent;}
.btn-secundario:hover{border-color:var(--cobalto-txt);background:var(--cobalto-suave);}
.btn-pequeno{min-height:40px;padding:9px 16px;font-size:14px;}
.botones{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:520px){
  .botones .btn{flex:1 1 100%;white-space:normal;text-align:center;}
}

/* ---- Cabecera ------------------------------------------------------------ */
.cabecera{position:sticky;top:0;z-index:200;background:rgba(11,18,32,.82);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--linea);}
.cabecera-in{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);height:var(--alto-cabecera);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.marca{display:flex;align-items:center;gap:10px;flex:none;min-height:44px;}
.marca svg{width:32px;height:32px;flex:none;}
.marca-texto{display:flex;flex-direction:column;line-height:1.1;}
.marca-texto b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;}
.marca-texto span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--texto-3);text-transform:uppercase;margin-top:3px;}
@media (max-width:380px){ .marca-texto span{display:none;} }

.nav{display:flex;align-items:center;gap:4px;}
.nav > a,.nav-sub > button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--texto-2);background:none;border:0;cursor:pointer;transition:color .2s,background .2s;}
.nav > a:hover,.nav-sub > button:hover,.nav-sub[data-abierto="true"] > button{color:var(--texto);background:rgba(250,250,248,.05);}
.nav > a[aria-current="page"],.nav-sub.activo > button{color:var(--texto);}
.nav-sub{position:relative;}
.nav-sub > button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.nav-sub[data-abierto="true"] > button svg{transform:rotate(180deg);}
.submenu{position:absolute;top:calc(100% + 8px);left:-8px;width:340px;padding:8px;background:var(--superficie);border:1px solid var(--linea-2);border-radius:var(--radio);box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s;}
/* Con JS lo abre y lo cierra el botón (y Escape). Sin JS sigue siendo usable:
   se abre al pasar el ratón o al llegar con el teclado. */
.nav-sub[data-abierto="true"] .submenu,
html:not(.js) .nav-sub:hover .submenu,
html:not(.js) .nav-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none;}
.submenu a{display:block;padding:10px 12px;border-radius:10px;transition:background .15s;}
.submenu a:hover,.submenu a[aria-current="page"]{background:rgba(250,250,248,.05);}
.submenu b{display:block;font-size:14px;font-weight:600;color:var(--texto);}
.submenu span{display:block;font-size:13px;color:var(--texto-3);line-height:1.4;margin-top:2px;}
.cabecera-acciones{display:flex;align-items:center;gap:10px;}

.menu-boton{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--linea-2);background:none;cursor:pointer;align-items:center;justify-content:center;flex:none;}
.menu-boton span{position:relative;display:block;width:18px;height:2px;background:var(--texto);border-radius:2px;transition:background .2s;}
.menu-boton span::before,.menu-boton span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--texto);border-radius:2px;transition:transform .25s;}
.menu-boton span::before{top:-6px;}
.menu-boton span::after{top:6px;}
.menu-boton[aria-expanded="true"] span{background:transparent;}
.menu-boton[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.menu-boton[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}
.panel-movil{display:none;}

@media (max-width:1079px){
  .nav{display:none;}
  .menu-boton{display:inline-flex;}
  .panel-movil{display:block;max-height:0;overflow:hidden;transition:max-height .3s ease;border-top:1px solid transparent;}
  .panel-movil[data-abierto="true"]{max-height:calc(100dvh - var(--alto-cabecera));overflow-y:auto;overscroll-behavior:contain;border-top-color:var(--linea);}
  .panel-movil-in{max-width:var(--ancho);margin:0 auto;padding:8px var(--gutter) 24px;}
  .panel-movil a{display:flex;align-items:center;min-height:48px;font-size:16px;font-weight:600;color:var(--texto-2);border-bottom:1px solid var(--linea);}
  .panel-movil a:hover,.panel-movil a[aria-current="page"]{color:var(--texto);}
  .panel-movil .grupo{padding:6px 0 8px;border-bottom:1px solid var(--linea);}
  .panel-movil .grupo p{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);padding:12px 0 4px;}
  .panel-movil .grupo a{min-height:44px;padding-left:14px;font-weight:500;font-size:15px;border-bottom:0;}
  .panel-movil .btn{margin-top:18px;width:100%;border-bottom:0;color:var(--texto);}
}
@media (max-width:560px){ .cabecera-acciones .btn{display:none;} }
/* Sin JS no hay botón de menú: los enlaces del pie cubren la navegación. El
   panel se quita del todo, o sus enlaces invisibles seguirían recibiendo el
   foco del teclado. */
html:not(.js) .menu-boton,html:not(.js) .panel-movil{display:none;}

/* ---- Migas --------------------------------------------------------------- */
.migas{padding-top:28px;}
.migas ol{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--texto-3);}
.migas li{display:flex;align-items:center;gap:6px;}
.migas li+li::before{content:"/";color:var(--linea-2);}
.migas a:hover{color:var(--texto);}
.migas [aria-current]{color:var(--texto-2);}

/* ---- Secciones ------------------------------------------------------------ */
.seccion{padding:clamp(64px,9vw,120px) 0;}
.seccion-compacta{padding:clamp(48px,6vw,80px) 0;}
.seccion + .seccion{border-top:1px solid var(--linea);}
.seccion-alterna{background:var(--fondo-2);}
.cabeza{max-width:720px;margin-bottom:clamp(32px,4vw,52px);}
.cabeza .etiqueta{display:block;margin-bottom:14px;}
.cabeza h2{font-size:clamp(28px,3.6vw,44px);}
.cabeza > p:not(.etiqueta){margin-top:14px;font-size:17px;color:var(--texto-2);max-width:620px;}
@media (min-width:1000px){
  .cabeza-doble{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end;max-width:none;}
  .cabeza-doble > p{margin-top:0;padding-bottom:6px;}
}

/* Revelado al hacer scroll: solo lo que empieza fuera de la pantalla, así que
   nada visible parpadea al cargar, y sin JS todo se ve desde el principio. */
.js .revelar-pendiente{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.js .revelar-pendiente.visible{opacity:1;transform:none;}

/* ---- Hero ------------------------------------------------------------------ */
.hero{position:relative;padding:clamp(48px,7vw,96px) 0 clamp(56px,7vw,96px);overflow:hidden;}
/* Retícula de fondo: papel de plano, no adorno. Se desvanece hacia los bordes. */
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 70%);opacity:.55;pointer-events:none;}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,5vw,72px);align-items:center;}
.hero .etiqueta.etiqueta{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--texto-2);}
.hero .etiqueta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cobalto);box-shadow:0 0 0 4px var(--cobalto-suave);}
.hero h1{font-size:clamp(40px,6.2vw,76px);font-weight:700;line-height:1.02;letter-spacing:-.035em;max-width:12ch;}
.hero h1 em{font-style:normal;color:var(--cobalto);}
.hero .lead{margin-top:22px;max-width:34em;}
.hero .botones{margin-top:32px;}
.lineas-negocio{margin-top:36px;display:flex;flex-wrap:wrap;gap:6px;}
/* Cuatro líneas de negocio: en 2x2 a propósito, no tres y una huérfana. */
@media (min-width:400px){ .lineas-negocio{display:grid;grid-template-columns:repeat(2,max-content);} }
.lineas-negocio a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:7px 12px;border:1px solid var(--linea-2);border-radius:100px;font-size:13.5px;font-weight:500;color:var(--texto-2);transition:border-color .2s,color .2s,background .2s;}
.lineas-negocio a:hover{border-color:var(--cobalto-txt);color:var(--texto);background:var(--cobalto-suave);}
.lineas-negocio svg{width:15px;height:15px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:959px){
  .hero-in{grid-template-columns:1fr;}
  .hero h1{max-width:14ch;}
}

/* Consola de sistemas en producción: la firma de la portada. En lugar de un
   mockup, lo que de verdad está funcionando, comprobado al publicar. */
.consola{background:linear-gradient(180deg,rgba(21,87,255,.06),transparent 40%),var(--superficie);border:1px solid var(--linea-2);border-radius:var(--radio-g);box-shadow:0 40px 100px rgba(0,0,0,.35);overflow:hidden;}
.consola-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--linea);}
.consola-cab span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--texto-3);text-transform:uppercase;}
.consola-cab .estado{display:inline-flex;align-items:center;gap:8px;color:var(--texto-2);}
.pulso{position:relative;width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none;}
.pulso::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--verde);animation:pulso 2.2s ease-out infinite;}
@keyframes pulso{from{transform:scale(1);opacity:.6;}to{transform:scale(2.6);opacity:0;}}
.en-linea-lista li + li{border-top:1px solid var(--linea);}
.en-linea-lista a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;padding:15px 18px;transition:background .15s;}
.en-linea-lista a:hover{background:rgba(250,250,248,.03);}
.en-linea-lista .dominio{font-family:var(--mono);font-size:13.5px;color:var(--texto);overflow-wrap:anywhere;}
.en-linea-lista .tipo{grid-column:2 / 3;font-size:13px;color:var(--texto-3);}
.en-linea-lista .pulso{grid-row:1 / 3;}
.en-linea-lista .ir{grid-row:1 / 3;grid-column:3;width:16px;height:16px;fill:none;stroke:var(--texto-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s;}
.en-linea-lista a:hover .ir{stroke:var(--texto);transform:translate(2px,-2px);}
/* Un solo latido: el de la cabecera. Seis puntos latiendo a la vez distraen. */
.en-linea-lista .pulso::after,.estado-prod .pulso::after{display:none;}
.consola-pie{padding:12px 18px;border-top:1px solid var(--linea);font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--texto-3);}

/* ---- Franja de capacidades ------------------------------------------------ */
.franja{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--fondo-2);}
.franja-in{display:flex;align-items:center;gap:18px 32px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap;}
.franja .etiqueta.etiqueta{flex:none;color:var(--texto-3);}
.franja ul{display:flex;flex-wrap:wrap;gap:10px 26px;flex:1 1 520px;}
.franja li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--texto-2);white-space:nowrap;}
.franja li svg{width:15px;height:15px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* ---- Soluciones ------------------------------------------------------------ */
.soluciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (max-width:760px){ .soluciones{grid-template-columns:1fr;} }
.solucion{position:relative;display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-g);padding:clamp(24px,3vw,34px);transition:border-color .25s,transform .25s,background .25s;}
.solucion:hover{border-color:var(--cobalto-borde);transform:translateY(-2px);}
.solucion-ic{width:44px;height:44px;border-radius:12px;background:var(--cobalto-suave);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.solucion-ic svg{width:22px;height:22px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.solucion h3{font-size:22px;margin-bottom:10px;}
.solucion > p{color:var(--texto-2);font-size:15.5px;}
.solucion ul{margin:20px 0 24px;display:flex;flex-direction:column;gap:8px;}
.solucion li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--texto-3);}
.solucion li::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--cobalto);flex:none;}
.solucion .enlace{margin-top:auto;font-size:14px;}
/* Toda la tarjeta es clicable sin anidar enlaces: el enlace estira su área. */
.solucion .enlace::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.otros-servicios{margin-top:22px;font-size:15px;color:var(--texto-3);}
.otros-servicios b{color:var(--texto-2);font-weight:600;}

/* ---- Marcos de dispositivo ------------------------------------------------- */
.navegador{background:var(--superficie-2);border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4);}
.navegador-barra{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--linea);background:rgba(11,18,32,.6);}
.navegador-barra span{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--texto-3);background:rgba(250,250,248,.05);border-radius:6px;padding:4px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.navegador-barra svg{width:11px;height:11px;fill:none;stroke:var(--verde);stroke-width:2.2;flex:none;}
.navegador img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;}
.telefono{width:clamp(120px,24%,190px);border-radius:26px;padding:7px;background:#05080F;border:1px solid var(--linea-2);box-shadow:0 30px 70px rgba(0,0,0,.55);}
.telefono img{width:100%;aspect-ratio:375/812;object-fit:cover;object-position:top;border-radius:20px;}
.dispositivos{position:relative;padding-bottom:clamp(28px,5vw,48px);padding-right:clamp(28px,6vw,64px);}
.dispositivos .telefono{position:absolute;right:0;bottom:0;}

/* ---- Casos destacados (inicio) ------------------------------------------- */
.caso{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,5vw,72px);align-items:center;}
.caso.invertido{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);}
.caso.invertido .caso-texto{order:2;}
@media (max-width:959px){
  .caso,.caso.invertido{grid-template-columns:1fr;}
  .caso.invertido .caso-texto{order:0;}
}
.caso-texto .etiqueta{display:block;margin-bottom:14px;}
.caso-texto h2{font-size:clamp(30px,3.8vw,46px);}
.caso-texto .lead{margin-top:12px;}
.ficha{margin-top:28px;display:grid;gap:18px;}
.ficha dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);margin-bottom:6px;}
.ficha dd{font-size:15.5px;color:var(--texto-2);}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chips li{font-size:13px;font-weight:500;padding:5px 11px;border-radius:100px;border:1px solid var(--linea-2);color:var(--texto-2);background:rgba(250,250,248,.02);}
.estado-prod{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--texto);}
.caso .botones{margin-top:30px;}
.caso + .caso{margin-top:clamp(72px,9vw,120px);}
.mas-proyectos{margin:clamp(72px,9vw,112px) 0 20px;}

/* ---- Proyectos ------------------------------------------------------------- */
.proyectos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;}
.proyecto{position:relative;display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-g);overflow:hidden;transition:border-color .25s,transform .25s;}
.proyecto:hover{border-color:var(--linea-2);}
.proyecto-img{border-bottom:1px solid var(--linea);background:var(--superficie-2);}
.proyecto-img img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;}
.proyecto-cuerpo{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px;}
.proyecto .etiqueta{margin-bottom:10px;}
.proyecto h3{font-size:20px;margin-bottom:8px;}
.proyecto p{font-size:14.5px;color:var(--texto-2);}
.proyecto p + p{margin-top:8px;}
.proyecto p b{color:var(--texto);font-weight:600;}
.proyecto .chips{margin:16px 0 18px;}
.proyecto-pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--linea);font-size:14px;}
.proyecto-pie .enlace{font-size:14px;}
.proyecto-pie .nota{font-size:13px;color:var(--texto-3);}
/* ARGOS: sin captura a propósito. El panel dice lo único publicable. */
.proyecto-reservado{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:repeating-linear-gradient(135deg,rgba(250,250,248,.025) 0 10px,transparent 10px 20px),var(--superficie-2);color:var(--texto-3);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
/* Con el sello del Ministerio el panel deja de ser "confidencial": el texto se
   lee como sello, en el azul de los rótulos y sin mayúsculas forzadas. */
.proyecto-sello{text-transform:none;letter-spacing:.02em;font-size:13px;line-height:1.5;text-align:center;color:var(--cobalto-txt);background:radial-gradient(80% 90% at 50% 40%,rgba(21,87,255,.16),transparent 70%),var(--superficie-2);}
.proyecto-reservado svg{width:30px;height:30px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.proyecto-logo{height:120px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--linea);background:var(--superficie-2);padding:24px;}
.proyecto-logo img{max-height:56px;width:auto;}
.proyecto-logo svg{width:40px;height:40px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ver-todos{margin-top:28px;}

.destacados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px;}
@media (max-width:860px){ .destacados{grid-template-columns:1fr;} }
.destacado .proyecto-cuerpo{padding:26px;}
.destacado h3{font-size:24px;}

.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:12px;}
.demo{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--linea);border-radius:var(--radio);transition:border-color .2s,background .2s;}
.demo:hover{border-color:var(--linea-2);background:rgba(250,250,248,.02);}
.demo b{font-size:15px;}
.demo span{font-size:13.5px;color:var(--texto-3);}
.demo em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--cobalto-txt);margin-top:6px;}

/* ---- Cómo trabajamos --------------------------------------------------------
   Aquí la numeración sí dice algo: el orden de los pasos es el orden real. */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--linea);border-radius:var(--radio-g);overflow:hidden;counter-reset:paso;}
.paso{position:relative;padding:28px 26px 30px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.paso:nth-child(3n){border-right:0;}
.paso:nth-last-child(-n+3){border-bottom:0;}
.paso-num{font-family:var(--mono);font-size:13px;color:var(--cobalto-txt);letter-spacing:.06em;}
.paso h3{font-size:19px;margin:14px 0 6px;}
.paso p{font-size:14.5px;color:var(--texto-3);}
@media (max-width:860px){
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .paso{border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);}
  .paso:nth-child(3n){border-right:1px solid var(--linea);}
  .paso:nth-child(2n){border-right:0;}
  .paso:nth-last-child(-n+3){border-bottom:1px solid var(--linea);}
  .paso:nth-last-child(-n+2){border-bottom:0;}
}
@media (max-width:540px){
  .pasos{grid-template-columns:1fr;}
  .paso,.paso:nth-child(3n){border-right:0;}
  .paso:nth-last-child(-n+2){border-bottom:1px solid var(--linea);}
  .paso:last-child{border-bottom:0;}
  .paso{padding:22px 20px;}
}

/* ---- Web para negocios (aviso en el inicio) ------------------------------- */
.aviso-web{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px 48px;align-items:center;padding:clamp(28px,4vw,44px);border:1px solid var(--linea-2);border-radius:var(--radio-g);background:radial-gradient(90% 140% at 100% 0%,rgba(21,87,255,.14),transparent 60%),var(--superficie);}
.aviso-web h2{font-size:clamp(24px,3vw,34px);margin-top:12px;}
.aviso-web p:not(.etiqueta){margin-top:10px;color:var(--texto-2);max-width:40em;}
.aviso-web-datos{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.aviso-web-datos .precio{font-family:var(--display);font-size:15px;color:var(--texto-3);}
.aviso-web-datos .precio b{font-size:30px;color:var(--texto);letter-spacing:-.02em;margin:0 4px;}
@media (max-width:760px){ .aviso-web{grid-template-columns:1fr;} }

/* ---- Confianza ------------------------------------------------------------- */
.confianza{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px;}
@media (max-width:900px){ .confianza{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .confianza{grid-template-columns:1fr;gap:26px;} }
.confianza li{padding-top:20px;border-top:1px solid var(--linea-2);}
.confianza svg{width:22px;height:22px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;}
.confianza h3{font-size:17px;margin-bottom:6px;}
.confianza p{font-size:14.5px;color:var(--texto-3);}

/* ---- CTA final -------------------------------------------------------------- */
.cierre{text-align:center;}
.cierre h2{font-size:clamp(32px,4.6vw,56px);font-weight:700;letter-spacing:-.03em;max-width:16ch;margin:0 auto;}
.cierre p{margin:16px auto 0;max-width:34em;color:var(--texto-2);font-size:17px;}
.cierre .botones{justify-content:center;margin-top:32px;}

/* ---- Páginas interiores ------------------------------------------------------ */
.portada{padding:clamp(28px,4vw,48px) 0 clamp(44px,5vw,64px);}
.portada + .seccion{border-top:1px solid var(--linea);}
.portada .etiqueta{display:block;margin:28px 0 16px;}
.portada h1{font-size:clamp(36px,5.2vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1.04;max-width:18ch;}
.portada .lead{margin-top:20px;max-width:40em;}
.portada .botones{margin-top:30px;}

.lista-doble{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;}
@media (max-width:760px){ .lista-doble{grid-template-columns:1fr;} }
.lista-doble li{padding:22px 0;border-top:1px solid var(--linea);display:grid;grid-template-columns:auto 1fr;gap:4px 16px;}
.lista-doble li svg{grid-row:1 / 3;width:20px;height:20px;margin-top:3px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.lista-doble h3{font-size:17px;}
.lista-doble p{font-size:15px;color:var(--texto-3);}

.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media (max-width:900px){ .tres{grid-template-columns:1fr;} }
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-g);padding:clamp(22px,3vw,30px);}
.tarjeta .etiqueta{display:block;margin-bottom:12px;}
.tarjeta h3{font-size:19px;margin-bottom:8px;}
.tarjeta p{font-size:15px;color:var(--texto-2);}

.relacionados{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;}
.relacionado{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--linea);border-radius:var(--radio);transition:border-color .2s,background .2s;}
.relacionado:hover{border-color:var(--cobalto-borde);background:rgba(21,87,255,.04);}
.relacionado b{font-family:var(--display);font-size:17px;}
.relacionado span{font-size:14px;color:var(--texto-3);}
.relacionado em{font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalto-txt);}

.banda{padding:clamp(28px,4vw,44px);border:1px solid var(--linea-2);border-radius:var(--radio-g);background:var(--superficie);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;}
.banda h2{font-size:clamp(22px,2.6vw,30px);max-width:24ch;}
.banda p{margin-top:8px;color:var(--texto-2);max-width:40em;}

/* ---- Caso de estudio ---------------------------------------------------------- */
.caso-portada .dispositivos{margin-top:clamp(40px,5vw,64px);}
.datos-caso{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:36px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.datos-caso > div{padding:18px 20px 18px 0;}
.datos-caso > div + div{padding-left:20px;border-left:1px solid var(--linea);}
.datos-caso dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);margin-bottom:6px;}
.datos-caso dd{font-size:15px;color:var(--texto);overflow-wrap:anywhere;}
/* Área táctil de ~40px sin mover la fila: el relleno se compensa con margen negativo. */
.datos-caso a{color:var(--cobalto-txt);display:inline-block;padding:10px 0;margin:-10px 0;}
@media (max-width:760px){
  .datos-caso{grid-template-columns:repeat(2,minmax(0,1fr));}
  .datos-caso > div:nth-child(3){padding-left:0;border-left:0;}
  .datos-caso > div:nth-child(n+3){border-top:1px solid var(--linea);}
}
.prosa{max-width:680px;}
.prosa p{font-size:17px;color:var(--texto-2);}
.prosa p + p{margin-top:16px;}
.dos-col{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);}
@media (max-width:860px){ .dos-col{grid-template-columns:1fr;} }
.dos-col h2{font-size:clamp(26px,3vw,36px);}
.modulos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
@media (max-width:960px){ .modulos{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .modulos{grid-template-columns:1fr;} }

/* Diagrama de arquitectura: cajas y líneas en HTML, sin imagen. Se lee igual
   con lector de pantalla porque es una lista. */
.diagrama{border:1px solid var(--linea);border-radius:var(--radio-g);padding:clamp(20px,3vw,32px);background:var(--fondo-2);}
.diagrama-fila{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.diagrama-fila li{font-family:var(--mono);font-size:12.5px;padding:9px 14px;border:1px solid var(--linea-2);border-radius:10px;background:var(--superficie);color:var(--texto-2);}
.diagrama-nucleo{display:flex;justify-content:center;}
.diagrama-nucleo li{font-family:var(--mono);font-size:13px;padding:12px 18px;border:1px solid var(--cobalto-borde);border-radius:12px;background:var(--cobalto-suave);color:var(--texto);}
.diagrama-conector{height:34px;width:1px;margin:0 auto;background:linear-gradient(var(--linea-2),var(--cobalto-borde));position:relative;}
.diagrama-conector::after{content:"";position:absolute;left:-3px;bottom:-1px;width:7px;height:7px;border-right:1px solid var(--cobalto-borde);border-bottom:1px solid var(--cobalto-borde);transform:rotate(45deg);}
.prosa + .diagrama{margin-top:28px;}
.tecnologia-titulo{display:block;margin:28px 0 12px;}
.diagrama-nota{margin-top:18px;text-align:center;font-size:13.5px;color:var(--texto-3);}

/* ---- Planes -------------------------------------------------------------------- */
.prueba{display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;padding:clamp(22px,3vw,30px);border:1px solid var(--cobalto-borde);border-radius:var(--radio-g);background:linear-gradient(150deg,rgba(21,87,255,.12),transparent 65%),var(--superficie);margin-bottom:24px;}
.prueba-ic{width:48px;height:48px;border-radius:13px;background:var(--cobalto-suave);display:flex;align-items:center;justify-content:center;flex:none;}
.prueba-ic svg{width:24px;height:24px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.prueba-txt{flex:1 1 320px;min-width:0;}
.prueba-txt h2{font-size:clamp(19px,2.2vw,22px);margin-bottom:6px;}
.prueba-txt p{font-size:15px;color:var(--texto-2);}
@media (max-width:560px){ .prueba .btn{width:100%;} }

.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;}
@media (max-width:960px){ .planes{grid-template-columns:1fr;max-width:520px;} }
.plan{position:relative;display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-g);padding:clamp(24px,3vw,30px);}
.plan.recomendado{border-color:var(--cobalto);}
.plan-insignia{position:absolute;top:0;right:22px;transform:translateY(-50%);background:var(--cobalto);color:var(--texto);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:100px;}
.plan h3{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalto-txt);}
.plan-precio{font-family:var(--display);font-size:clamp(34px,4vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1;margin-top:14px;}
.plan-precio small{font-size:14px;font-weight:600;color:var(--texto-3);letter-spacing:0;margin-left:4px;}
.plan-para{font-size:15px;color:var(--texto-2);margin:14px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--linea);}
.plan ul{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
.plan li{position:relative;padding-left:20px;font-size:14.5px;color:var(--texto-2);}
.plan li::before{content:"";position:absolute;left:1px;top:9px;width:6px;height:6px;border-radius:2px;background:var(--cobalto);}
.plan-incluye{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea);font-size:13px;color:var(--texto-3);}
.plan-incluye b{color:var(--texto-2);font-weight:600;}
.plan .btn{margin-top:18px;width:100%;}
.nota-planes{margin-top:20px;padding:16px 20px;border:1px dashed var(--linea-2);border-radius:12px;font-size:14px;color:var(--texto-2);}
.nota-planes b{color:var(--texto);}

details.desplegable{margin-top:20px;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--superficie);}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-family:var(--display);font-weight:600;font-size:16px;min-height:44px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-family:var(--cuerpo);font-size:22px;font-weight:400;color:var(--texto-3);transition:transform .25s;flex:none;}
details[open] > summary::after{transform:rotate(45deg);}
details[open] > summary{border-bottom:1px solid var(--linea);}
.desplegable-cuerpo{padding:clamp(18px,2.6vw,26px);background:var(--fondo);}
.desplegable-cuerpo h3{font-size:18px;margin-bottom:12px;}
.desplegable-cuerpo h3:not(:first-child){margin-top:28px;}

.tabla-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);-webkit-overflow-scrolling:touch;}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--linea);white-space:nowrap;}
thead th{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);background:var(--fondo-2);}
tbody th{font-weight:500;color:var(--texto-2);white-space:normal;}
td{color:var(--texto-3);}
td.si{color:var(--texto);font-weight:600;}
tr:last-child th,tr:last-child td{border-bottom:0;}
.tabla-nota{margin-top:12px;font-size:14px;color:var(--texto-3);max-width:60em;}
.tabla-pista{display:none;margin-top:8px;font-size:12.5px;color:var(--texto-3);}
@media (max-width:620px){ .tabla-pista{display:block;} }

.preguntas{border:1px solid var(--linea);border-radius:var(--radio-g);overflow:hidden;}
.preguntas details{background:var(--superficie);}
.preguntas details + details{border-top:1px solid var(--linea);}
.preguntas .respuesta{padding:4px 24px 22px;font-size:15px;color:var(--texto-2);max-width:760px;}
.preguntas details[open] > summary{border-bottom:0;}

/* ---- Contacto ------------------------------------------------------------------- */
.contacto{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4vw,56px);align-items:start;}
@media (max-width:900px){ .contacto{grid-template-columns:1fr;} }
.formulario{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-g);padding:clamp(22px,3.4vw,36px);}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media (max-width:600px){ .campos{grid-template-columns:1fr;} }
.campo{display:flex;flex-direction:column;gap:7px;}
.campo.ancho{grid-column:1 / -1;}
.campo label{font-size:14px;font-weight:600;color:var(--texto);}
.campo label span{font-weight:400;color:var(--texto-3);}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:10px;border:1px solid var(--linea-2);background:var(--fondo);font-size:16px;transition:border-color .2s,box-shadow .2s;}
.campo textarea{min-height:140px;resize:vertical;line-height:1.5;}
.campo select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--texto-3) 50%),linear-gradient(135deg,var(--texto-3) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--cobalto-txt);box-shadow:0 0 0 3px var(--cobalto-suave);}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(250,250,248,.38);}
.campo [aria-invalid="true"]{border-color:#F87171;}
.campo .error{font-size:13px;color:#FCA5A5;min-height:0;}
.campo .ayuda{font-size:13px;color:var(--texto-3);}
.formulario .botones{margin-top:26px;}
.formulario-nota{margin-top:16px;font-size:13.5px;color:var(--texto-3);}
.formulario-estado{margin-top:14px;font-size:14px;color:var(--cobalto-txt);}
.canales{display:flex;flex-direction:column;gap:12px;}
.canal{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);transition:border-color .2s;}
.canal:hover{border-color:var(--cobalto-borde);}
.canal .ic{width:42px;height:42px;border-radius:11px;background:var(--cobalto-suave);display:flex;align-items:center;justify-content:center;flex:none;}
.canal .ic svg{width:20px;height:20px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.canal b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);}
.canal span{display:block;font-weight:600;font-size:15px;overflow-wrap:anywhere;}
.canales-nota{font-size:14px;color:var(--texto-3);margin-top:6px;}

/* ---- Texto legal ------------------------------------------------------------------ */
.legal{max-width:720px;}
.legal h2{font-size:22px;margin:36px 0 10px;}
.legal p,.legal li{font-size:16px;color:var(--texto-2);}
.legal p + p{margin-top:12px;}
.legal ul{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.legal li{padding-left:18px;position:relative;}
.legal li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:1px;background:var(--cobalto);}
.legal .actualizado{font-family:var(--mono);font-size:12px;color:var(--texto-3);margin-top:36px;}

/* ---- Pie ---------------------------------------------------------------------------- */
.pie{border-top:1px solid var(--linea);background:var(--fondo-2);padding:clamp(48px,6vw,72px) 0 28px;}
.pie-rejilla{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:36px 28px;}
@media (max-width:980px){ .pie-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));} .pie-marca{grid-column:1 / -1;} }
.pie-marca .marca{margin-bottom:16px;}
.pie-marca > p:not(.pie-legal){font-size:14.5px;color:var(--texto-3);max-width:30em;}
.pie h2{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin-bottom:14px;}
.pie ul{display:flex;flex-direction:column;gap:0;}
.pie ul a{display:inline-flex;align-items:center;min-height:40px;font-size:14.5px;color:var(--texto-2);transition:color .2s;}
.pie ul a:hover{color:var(--texto);}
.pie-legal{display:flex;align-items:flex-start;gap:8px;margin-top:18px;font-size:13px;color:var(--texto-3);max-width:34em;}
.pie-legal svg{width:15px;height:15px;flex:none;margin-top:3px;fill:none;stroke:var(--cobalto-txt);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.pie-base{margin-top:48px;padding-top:22px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13.5px;color:var(--texto-3);}
.pie-base a:hover{color:var(--texto);}

/* ---- 404 ---------------------------------------------------------------------------- */
.no-encontrada{min-height:calc(70vh - var(--alto-cabecera));display:flex;align-items:center;}
.no-encontrada .etiqueta{display:block;margin-bottom:18px;}
.no-encontrada h1{font-size:clamp(34px,5vw,56px);}
.no-encontrada p{margin-top:14px;color:var(--texto-2);font-size:17px;max-width:32em;}
.no-encontrada .botones{margin-top:28px;}

.portada + .seccion-compacta{padding-top:0;}

/* ---- WhatsApp flotante ---------------------------------------------------------------
   El verde de WhatsApp es la única excepción a la regla del verde: es su marca y
   así lo reconoce todo el mundo. Se retira (en-reposo) mientras se ve la portada
   de la página o el pie, que ya tienen WhatsApp a la vista: así nunca tapa sus
   botones. visibility y no solo opacity: un enlace transparente seguiría
   recibiendo el foco del teclado y el toque. */
.wa-flotante{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:150;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s,opacity .25s,visibility .25s;}
.wa-flotante:hover{transform:scale(1.06);}
.wa-flotante:focus-visible{outline-color:#fff;}
.wa-flotante svg{width:28px;height:28px;fill:#fff;}
.js .wa-flotante.en-reposo{opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);pointer-events:none;}