/* Quaxel Digifab · base compartida por las tres opciones.
   Fichas de la guía de estilo. Contrastes medidos en BRIEFING.md:
   - magenta como texto sobre --fondo da 4,39:1 → solo texto grande, iconos y bordes;
   - botón magenta lleva texto oscuro (6,7:1), nunca blanco (3,14:1);
   - sobre fondo claro el acento de texto es el morado (6,9:1). */
:root{
  --fondo:#2C2C2C; --fondo-2:#232325; --fondo-3:#1B1B1D; --negro:#0A0A0B;
  --claro:#E0E0E0; --claro-2:#F4F4F5;
  --tinta:#F4F4F5; --tinta-2:#C9C9CE; --tinta-3:#A3A3AB;
  --tinta-oscura:#2C2C2C; --tinta-oscura-2:#4A4A4F;
  --magenta:#FF00FF; --azul:#00569C; --morado:#7A009C;
  --sobre-magenta:#141416;
  --linea:rgba(255,255,255,.09); --linea-fuerte:rgba(255,255,255,.18);
  --radio:6px; --radio-g:14px;
  --ancho:1200px; --lado:clamp(20px,4vw,48px);
  --sep:clamp(72px,10vw,128px);
  --curva:cubic-bezier(.22,1,.36,1);
  --alto-cab:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 16px/1.6 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:20px;letter-spacing:-.01em;line-height:1.25}
.cont{width:min(100% - 2*var(--lado),var(--ancho));margin-inline:auto}
.sec{padding-block:var(--sep)}
.bajada{color:var(--tinta-2);font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:62ch}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}

/* Botones: un radio para todo el sitio (--radio), altura 52 px, sin envoltura de línea */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:0 26px;border-radius:var(--radio);font-weight:600;font-size:16px;line-height:1.1;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;transition:transform .18s var(--curva),background-color .18s var(--curva),border-color .18s var(--curva),color .18s var(--curva)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .ico{width:1.1em;height:1.1em}
.btn--magenta{background:var(--magenta);color:var(--sobre-magenta)}
.btn--magenta:hover{background:#FF4DFF}
.btn--borde{border-color:var(--linea-fuerte);color:var(--tinta)}
.btn--borde:hover{border-color:var(--azul);background:rgba(0,86,156,.18)}
.btn--blanco{background:#fff;color:var(--morado)}
.btn--blanco:hover{background:var(--claro-2)}
.btn--chico{min-height:44px;padding:0 18px;font-size:15px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
/* Bajo 420 px el botón más largo del sitio («Hablemos de tu Proyecto Ahora», 342 px)
   se salía 2 px del ancho. Se aprieta el botón, no se parte la etiqueta en dos líneas. */
@media (max-width:419px){.btn{font-size:15px;padding:0 16px;gap:.4em}}

/* Cabecera fija. data-solape declarado en el HTML: tapa el contenido al desplazarse. */
.cab{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--alto-cab);display:flex;align-items:center;transition:background-color .25s var(--curva),border-color .25s var(--curva)}
.cab--fija{background:rgba(28,28,30,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
@media (prefers-reduced-transparency:reduce){.cab--fija{background:#1C1C1E}}
.cab .cont{display:flex;align-items:center;gap:24px}
.cab__logo,.marca{margin-right:auto}
.cab__logo{display:flex;align-items:center;gap:12px;min-height:44px}
.cab__logo img{height:38px;width:auto}
.cab__marca{display:flex;flex-direction:column;line-height:1;letter-spacing:.28em;text-transform:uppercase}
.cab__marca b{font-size:15px;font-weight:700}
.cab__marca small{font-size:8.5px;font-weight:500;letter-spacing:.4em;color:var(--tinta-2);margin-top:4px}
.cab__nav{display:flex;gap:6px}
.cab__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radio);font-size:15px;font-weight:500;color:var(--tinta-2);transition:color .15s,background-color .15s}
.cab__nav a:hover{color:var(--tinta);background:rgba(255,255,255,.06)}
.cab__hamb{display:none;width:44px;height:44px;border:1px solid var(--linea-fuerte);border-radius:var(--radio);background:transparent;color:var(--tinta);align-items:center;justify-content:center;font-size:24px;cursor:pointer}
.cab__hamb .ico--x{display:none}
@media (max-width:1023px){
  .cab__nav{position:fixed;inset:var(--alto-cab) 0 auto 0;flex-direction:column;gap:0;padding:12px var(--lado) 20px;background:#1C1C1E;border-bottom:1px solid var(--linea);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--curva),transform .2s var(--curva),visibility 0s .2s}
  .cab__nav a{min-height:52px;font-size:17px;padding:0 8px}
  .cab--abierta .cab__nav{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--curva),transform .2s var(--curva),visibility 0s}
  .cab--abierta{background:#1C1C1E}
  .cab--abierta .cab__hamb .ico--menu{display:none}.cab--abierta .cab__hamb .ico--x{display:block}
  .cab__hamb{display:inline-flex}
  .cab__cta{display:none}
  @media (prefers-reduced-motion:reduce){.cab__nav{transition:none;transform:none}}
}
@media (max-width:479px){.cab__marca{display:none}}

/* Pie: negro sólido, tres columnas */
.pie{background:var(--negro);color:var(--tinta-2);padding:var(--sep) 0 32px;border-top:1px solid var(--linea)}
.pie__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:48px}
.pie h3{color:var(--tinta);font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.pie__marca img{width:120px;height:auto;margin-bottom:20px}
.pie__marca p{max-width:34ch;line-height:1.6}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pie li a,.pie li span{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--tinta-2)}
.pie li a:hover{color:var(--tinta)}
.pie li .ico{color:var(--magenta);font-size:20px}
.pie__redes{display:flex;gap:10px;margin:22px 0 14px}
.pie__redes a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--linea-fuerte);border-radius:var(--radio);color:var(--tinta);font-size:22px;transition:border-color .15s,background-color .15s}
.pie__redes a:hover{border-color:var(--magenta);background:rgba(255,0,255,.1)}
.pie__tags{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:16px;color:var(--tinta-3)}
.pie__abajo{margin-top:56px;padding-top:22px;border-top:1px solid var(--linea);font-size:16px;color:var(--tinta-3);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
@media (max-width:899px){.pie__grid{grid-template-columns:1fr 1fr}.pie__marca{grid-column:1/-1}}
@media (max-width:599px){.pie__grid{grid-template-columns:1fr;gap:36px}}

/* Banner CTA con degradado azul→morado (texto blanco: 7,5:1 y 9,1:1).
   Alineado a la izquierda, boton a la derecha: la composicion centrada
   con titulo+bajada+boton apilados es la plantilla generica de CTA,
   ver .claude/rules/sin-sellos-de-ia-en-interfaces.md */
.banner{background:linear-gradient(105deg,var(--azul) 0%,var(--morado) 100%);color:#fff;padding:var(--sep) 0}
.banner__fila{display:flex;align-items:center;justify-content:space-between;gap:40px;text-align:left}
.banner h2{font-size:clamp(28px,3.6vw,44px);max-width:20ch;color:#fff}
.banner p{margin-top:16px;max-width:46ch;font-size:clamp(17px,1.2vw,19px);color:rgba(255,255,255,.9)}
.banner .btn{flex:none}
@media (max-width:767px){.banner__fila{flex-direction:column;align-items:flex-start;text-align:left}}