/* ============================================================
   IMPACTIQ · sistema de diseño
   Generado desde el render aprobado el 2 de septiembre de 2026.
   No editar a mano sin actualizar también el render: es la fuente
   de verdad del diseño y de aquí salen los tokens de color, la
   escala tipográfica y los componentes.
   ============================================================ */
/* ============================================================
   IMPACTIQ — Sistema de diseño
   Tokens heredados del prototipo impactiq-theme y elevados:
   contraste AA, modo oscuro, escala fluida, motion accesible.
   ============================================================ */
/* Tipografías autoalojadas (variables): un solo archivo por familia
   cubre todo el rango de peso vía el eje "wght". Sin esto el
   navegador no encuentra "Red Hat Display" / "Josefin Sans" / "Caveat"
   instaladas en el sistema y cae en la pila de respaldo (Helvetica/
   Arial), que es lo que se veía en el sitio hasta ahora. */
@font-face{
  font-family:"Red Hat Display";font-style:normal;font-weight:300 900;
  font-display:swap;src:url("../fonts/red-hat-display-var.woff2") format("woff2");
}
@font-face{
  font-family:"Josefin Sans";font-style:normal;font-weight:100 700;
  font-display:swap;src:url("../fonts/josefin-sans-var.woff2") format("woff2");
}
@font-face{
  font-family:"Caveat";font-style:normal;font-weight:400 700;
  font-display:swap;src:url("../fonts/caveat-var.woff2") format("woff2");
}

:root{
  color-scheme: light dark;

  /* Marca */
  --magenta:#fd058d;
  --magenta-deep:#c4006e;   /* texto/enlaces sobre claro — 5.4:1 */
  --magenta-ink:#8d004e;    /* hover */
  --magenta-soft:#ffe9f4;
  --magenta-mist:#fff4f9;
  --magenta-btn:#e0007d;    /* fondo de botón: blanco encima llega a 4,7:1 */
  --magenta-noche:#ff4da6;  /* magenta sobre superficie oscura fija — 5,5:1 */
  --sonrisa:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 8.6a7.4 7.4 0 0 0 14.8 0' fill='none' stroke='%23000' stroke-width='3.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --nube:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAOnklEQVR42t2caZBc1XXHf7e7Z0a7BAIkIWQWIUgQOGCBMUuwjZHNYmPAISFxkcSJK1VOJXYWvjkpO3Gl/CHLhyTlsgvHFW+EilMYHIOJYxNAEFnYIjiSELIkhAVo0ILQSBppZnr6/fPh/W90aHVPz4xGYka36lW/ft3vvnvPPed/1vsSb2GTlIAEkFIqfK0LOAOY7d8OA7tTSv1N9yilpOM9xvQWEqeSJympClwAXAVcBJwKTPf4BoH9wEvAGuDZlNKh3Ecm7ElFoDgxSRcC7/ZxHXBWm9v6gdXAD4H/Bp5JKQ2YozgR3HQixQpJVUnvkPQPkrarbMOSBiUN+XxYUt3X6v7PPknfkXS7pNmxz5OCOCZMkvQuSf8m6YAnXvhomBh1nw+H89wOS1ov6dckTXd/FX8edUw2IlQk1XxUw3lN0jT/52JJX5PUHyY9FM77JW2TtEXSnnC9boJlblsr6cOZQCOMKY+jMtb51CYYdLM2agecw5LmALcDHwJmAMNAHvjPgGeBjcBOoG7APh/4JeASYKbvKYB3AL8FvApskHSa++zyvQeBvpTSwVbK4YQSKGoTSfOsqucB3SZAHXjDmurD/m3IvxfWUN8CHgW2NPV3KnAt8FHgBhOtMKGuA14HngLOA04xkQ4Be4BeSVuAzcCOoBzSaIiUJpiDZgDLgA8AVwMLgWkm0JAHvNgTyYRrABuAPzdxGoCCCZCAqq//AvD7wG8Ds0ykwrbSkDmn5n4LL0od2AU8AXwVeC6lNDhaAh0rUTLgdku6VNJnJT0paYdxJIJrQ9JA0/fCOPOrGZ+atV2LZ75T0vclHXIfEbxHaq9L+qGkj0ta4L5qxxWMAyh/QNIDkl4OA4raaDh8xuv7Jf2TRZKRgDRPxovxu5J2+zmDJvxQG8IMhd8KSc9LukfS6XEex0tbdUt6t6TvNmmaTqta+HOHpLskTXN/lQ4mQl6UpZJWt+hzj7Xfz/y5NzxrOBBqk6SPSZp5XEDa8ltIuhy4B7jZsl7zkXGhz0dh7TMvuBANa6y1wGDAm3ZKQNL/Q8Yu4EHj21L3tdVAvxnYB8wFlgNXGBene2zD/v5xK40HJxyk7Tt1A58HPuHzRv7Z6vohuwT7Tbw5BtnbgQXAw8DXgQ0ppeFxiPd84Byr/wL4KbDDCzNswO6xQrgT+E1ruEzlAngA+BSwa0J9OovWR83KMgYUtorvl/Trks5uFhlJp0q60Rbw+RM0llmdREXShZI+J6nX4xwMovaRgG9pogi0SNIjxpuhQKSHJV3bpOWyFVttpwWPQYPWWljL1XB05edKWiLpK5L6gguzV9IXJc06ZgI1OZnvs3rOq1FIWmcHMgPumyYffKNK9psm0L9LnX438a73OKNr84ykpe3Mi7GouHxjt+V+rq91AXuNKY+llAZSSkVKqRENsZSSfBQ+JsRIy/12+t0494xBPLbFwDIH6o5q47EBuqw5ugPhdgCrUkp9x9W2OEbut0+21lowi/w0g313K8U1nol028/qCdd2Ai8GnJmUwSsTKjvCee5Vz6c2URzUbZVdC4Q4YK+5MZmjex7XAfttBAJNb0eL8RAotbGfCiZ5MwfNNEzEcQ+2G/94CJS95CJw0DRg2mQPfZqDLgBOD2MfBnqBohV2Vsa4AjlssdufmSBzbdkyWWPEVvXzgBUea7T8B4FDtqbHD9Lu4BDwmimfOzvTPk/XZCSMOafiyOQFTa5RD3ANcKWk7pRSIy5wZQwPyTK6kDKpVw0itxh4jwNmkzkFMy0satXcMwv4DeBzwEpJPVEKKqMEtmxFrwD+ErjRyJ8jeo0I1JNJxMJiFcDzwE+AgeDZywv7LuDTwErfUx2L546kS+zL9If4S3b6Dkj6i2bqT1JNdr2kb0naFTIkQ+H83yVdnedR6wTKlsmznT34iHGmYQp3OZzxtEMbw0zi5oVb5XFuNNe800qmsOJ5nwP9Lziu1NFjrkj6pKRXQwy4Ye7ZJukfHVWcN1UynMHTv1rSvzq+HR3Y5yXd1nE+Vo3LJX07hC2zaK2WdLekMyR1MwWbF3+F4+n9IbM7LOnvmxMJ7Tr4Y3OPQr78WUl3SpoxRQmTmmJJt0jaEJIAkvSYpGWdtNh82wiLLLdV+zIPAg+llA7l+M9UIpC1VCPEpZ6yl3/Yml02Z66otAsNuJ0PvC1YnKIMjn+XMo2cKAPuxVTjIhMpx5IOUQb891j9JwP3NZ1Wfhlwmm+oUea6VwNbM1FOhrqclFIdWEeZws5tBnBJpV3k0Nxxli3NfP0A8GOz4snWdpmTYhhkdicOmhsibZgw2ydrQOx4tNGAa8QkBffiZGtnZF/SrQHsr3QAsT6HAqKzt5gJLJuZJGq/Rll7ND9cPgSsb0WgKD47DMwKIncFMH2q1wVmJ9wmyhzgSiuk7MDuA1Z3ErGc58659Jm2i5ZkEZ1qNlAgTi2noCiLs1aECEWiDOyv6TS5rZT1yTmkUXHAaSUw00H6KQfYzpPVbSheTJm3P8dzycVaGzz3jk7dn0p6JVShDjsbeUPMlk4xNyMXfV0r6T7XKWVntZC0cSzO6kWSHgp+SmHvd42d1eltrPCxsPsJ9cEkXSHp817ofaHgKxdb3StpbseFD0UAf+DKiFwglYuS1kj6jKSbJJ3WabLuq1tSj3247vEUMIQcf7f76fFRG0We/lx76ntD8dVwKAn8nqTrsrPeSV1n/+sHxp6P2bKWg0srrB5/AnwJuD+EX1u184DLKKtUk1XpOmA9b07mjcY2Wwj8sjVPw2HUF2zpN5oJk3P0kq4BbqKsFTpMGbSv2pxZC3whpfSkI6nFaFYr185cKulfQvlI0fT5PUnnNotOU4XHLea6ustldkn621CjWBmNOJpz7jRW5ODdK5I+3arWp+n8b5rEKoeMn3RR+tiC9mE1/hf4a+AblBtLYoa1QlnxcVsoZnrTJhNP/lWvWs0rd7pV7JxgNowkbvn3WcCtdqYrHCkp3jkKrVoPkpHNl3XAXwGPNpcIV0ajEvPunJTSs8AXfOxp8cCBDmy5FdgWRKKw6N4paZ5LVGoh1BuPrpz7B95re6wSHOde4LlWz2+KOPyXRTEF16kf2GTiVMfqi+GCzaopu4GyIn5PExdt9cMHWljkuZ8Dti/22m3J1vnvALdKmpFSqru2qGg66ubCqygLyc/0M7r8zHXAiyOFX8x9T/u/RaDB6cDCVrgzFvulyNzkSeUsas2ruB7YnqtVWww0f3/METyFa8soi0FvtXrtjhjmAPt0yur9T1ImKfMWhpqf/YB9R0aIUyXvXOw1KCfTYA7Q01z0xRidzhQmNDPcm+yvvWRxG0lUq8ayh4G3O1qZq9QuA/7MovMk8JKkg8aqRcDltuAv8/OzeBw00R8bg1V/0Foz23C5IvaoNl6vvLuJ+4Yo82Od7Bk5z/YI5dbLPwn3d1PWNZ9pIr3hVa5RprrPciQh+f8ZnP8DuD+ldHAMFn0Xb86cqh12jpdA9SZbo5sjm0s6YllKqVfSffZ/3mubJPd7SvjeSqMmP2+AshD9y8Bz7rcxSsv9FGNgHu9AwE7Gi0EKn/s5kkWVWX5pU/SxLZZZK66l3OHzbcpymiLgWgzMxTqkvOr7gMeBz5qDGI1RZ8/9bOBcjlTIydx6sJXrM2YOMpbsDuq1ngPcFoHN0Xptl03w142UxRDrgbssYjNaiGoKorgd+A7wz8ALDrjTycUIz76ZciNeZpBB97k3AHkxZgI1TXY38LJxpOoJnAfcLOleE69Ki1x9qBap2O75uaRvmFhvBy70Ks83sTK+vUy5xWE9sDaltDX7d5kT4nkgbMUauJD0i5Sb+ZaYMD0WrafNRUeZJ+PFoANm8UsNqg1P6A5gTUrpR5R5s+aq15QHy5FSmWpKaTfwqKTVHvxi+2vTzKH7rZq3p5R2BsLQhDuNFrCQn3MO5QaWyz3vho/tnkt/K/NgvAQaAh4Brg8EygXmd0sqgJ+mlAbbsPw8P7svGIC4zrrPXNJOXCoRcySdYa7rArbYgB0MymOOufsmyi2dp5joPcayR4HN5rA0UQQSZTHSU45Rz/OAZwN3GwS/KOkHHmx86Nso952eBqyWtIny1RONUYp6EThokSd9lwn0BPB94BUv2gKbDCtNxLlNHL0BuI8R8nzj3UiSDNbLDbJ3BJularneZN/oRa9ULti+yMcMi80qO4qvZ4BsB7jB8U3mjHso65ZyjPwNJxr6woItsCuRQ6nD5p71wN8BXx/rdqzREik7lDc6VKAWAbVhV4ZskrS5aQ98bq94H2rqFDyLG1ckXRB2Hcb99K3acHhzQ67/+YSk+Z3meSz5rRhMm2lDcRlHUtV5VRZypGJCTe5IsnjeAryUUtplIh212SVrP3PYNMp3fSwwVxTBBitCZiJrsWg/vQrca+v7jeP6gpSwmnMlfdDVWq+Fmr+ixdEIgbYctNrmTXZd7bY3hWdVJF0p6YmmtzAMhfd+1MNetgEHyJ6X9CVJ78/VcKMJ9R5ThjSvckqpT9J/Gm/eb1vjshAIiwPJoJ33t1cM3L8H7EwpPR4yJfG+vMpLgT+0sZdtrZqx58c2EWYEF2KHQ6mrHJJ5bTTG5TGBdDvQ9vl8E2e5tczs4PcMWsPMt9pdzpHCrAHKV9884IluzmaCibXENszNwG22k7KT2wt8xRb2fI7UQ+eXGfw8pdTbxrI+/gQKk0hRXdveyRUiueS/19rsU8AfhbhOTtptMaH+J0QtZ1NuCL7BxinBNyuAbwKfSSltG0mpNBmqb2lirtK8/TJoqS7/7yrvez0c6q4boYiy36mmXgfV66FGMiYxfyTptpxgaBGqrUzJOgJP5lpX0NZDZrPR4YUE9UDMJyT9iqSZk/JdQWNI86YmGya+1uJ6Sd+UtFOjb/v8toc7chal1a7qiWhv6UvegttwsePM+S0Ji2xP1YITeoiyTG6btdLj9urrow2WTSkCtTD+eqzCV9oJXhKyuHWr61UOkG1MKR04ES94+z+/kzu0fg1GSQAAAABJRU5ErkJggg==");

  /* Superficies que SIEMPRE son oscuras, en los dos temas. No usar aquí
     --ink ni --paper: se invierten y el texto desaparece. */
  --noche:#0a0005;
  --noche-2:#150c11;
  --sobre-noche:#fff4f9;
  --sobre-noche-2:#d6c6d0;
  --sobre-noche-3:#a99aa4;

  /* Tinta y papel */
  --ink:#0a0005;
  --ink-2:#1c1419;
  --ink-3:#3a2f36;
  --ink-4:#645861;          /* texto secundario — 6.4:1 */
  --paper:#ffffff;
  --paper-2:#fbf8fa;
  --paper-3:#fff1f8;
  --line:#e7dfe4;
  --line-strong:#d6c8d0;
  --signal:#0b7a5c;         /* deltas positivos */

  /* Superficies compuestas */
  --surface:var(--paper);
  --surface-2:var(--paper-2);
  --surface-3:var(--paper-3);
  --card-shadow:0 1px 2px rgba(10,0,5,.04), 0 12px 32px -12px rgba(10,0,5,.14);
  --card-shadow-hover:0 2px 4px rgba(10,0,5,.06), 0 28px 60px -20px rgba(196,0,110,.28);
  --focus:#0a0005;

  /* Tipografía */
  --ff-display:"Red Hat Display","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Josefin Sans","Helvetica Neue",Arial,sans-serif;
  --ff-script:"Caveat","Brush Script MT",cursive;
  --ff-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-md:1.0625rem; --fs-lg:1.1875rem;
  --fs-xl:clamp(1.25rem,1.05rem + .7vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  --fs-3xl:clamp(1.85rem,1.4rem + 2vw,2.75rem);
  --fs-4xl:clamp(2.1rem,1.5rem + 2.4vw,3.4rem);
  --fs-5xl:clamp(2.5rem,1.5rem + 3.4vw,4.4rem);
  --fs-6xl:clamp(3.4rem,1.6rem + 7.6vw,7.5rem);

  /* Espacio */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:56px; --sp-9:72px; --sp-10:104px;
  --section-pad:clamp(56px,6vw,120px);
  --gutter:clamp(18px,4vw,40px);
  --max-w:1240px;
  --max-read:68ch;

  /* Formas */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.42s;

  --header-h:76px;
}
:root[data-theme="dark"],
:root:not([data-theme="light"]) .dark-probe{}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#fff4f9; --ink-2:#f3e6ee; --ink-3:#dbc9d5; --ink-4:#b2a0aa;
    --paper:#0a0005; --paper-2:#130a10; --paper-3:#1d0c16;
    --line:#2b1b23; --line-strong:#412c37;
    --magenta-deep:#ff5cb1; --magenta-ink:#ff8ac8;
    --magenta-soft:#2a0c1c; --magenta-mist:#1a070f;
    --signal:#3fd6a3;
    --noche:#180f15; --noche-2:#241722;
    --focus:#fff4f9;
    --card-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -16px rgba(0,0,0,.7);
    --card-shadow-hover:0 2px 6px rgba(0,0,0,.6), 0 32px 70px -22px rgba(253,5,141,.35);
  }
}
:root[data-theme="dark"]{
  --ink:#fff4f9; --ink-2:#f3e6ee; --ink-3:#dbc9d5; --ink-4:#b2a0aa;
  --paper:#0a0005; --paper-2:#130a10; --paper-3:#1d0c16;
  --line:#2b1b23; --line-strong:#412c37;
  --magenta-deep:#ff5cb1; --magenta-ink:#ff8ac8;
  --magenta-soft:#2a0c1c; --magenta-mist:#1a070f;
  --signal:#3fd6a3;
  --noche:#180f15; --noche-2:#241722;
  --focus:#fff4f9;
  --card-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -16px rgba(0,0,0,.7);
  --card-shadow-hover:0 2px 6px rgba(0,0,0,.6), 0 32px 70px -22px rgba(253,5,141,.35);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Ninguna sección debe poder empujar el ancho del documento. `clip` no crea
   contenedor de scroll, así que no afecta a la cabecera sticky, que además
   es hermana de <main> y queda fuera. */
main{overflow-x:clip}
@supports not (overflow:clip){main{overflow-x:hidden}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--ff-body);font-size:var(--fs-md);font-weight:400;
  line-height:1.65;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;-webkit-tap-highlight-color:rgba(253,5,141,.18);
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--ink);margin:0 0 .5em;
  font-weight:800;line-height:1.03;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--fs-5xl)}h2{font-size:var(--fs-4xl)}
h3{font-size:var(--fs-2xl);letter-spacing:-.02em}
h4{font-size:var(--fs-lg);letter-spacing:-.01em;line-height:1.2}
p{margin:0 0 1.15em;text-wrap:pretty}
a{color:var(--magenta-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--magenta-ink)}
ul,ol{padding-left:1.15em}
li{margin-bottom:.4em}
strong{font-weight:600;color:var(--ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--magenta);color:#fff}
[hidden]{display:none !important}

/* ---------- Utilidades ---------- */
.wrap{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px}
.section{padding-block:var(--section-pad);position:relative}
.eyebrow{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta-deep);
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 var(--sp-4)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--magenta);flex:none}
.lede{font-size:var(--fs-lg);color:var(--ink-3);max-width:var(--max-read)}
.muted{color:var(--ink-4)}
.script{font-family:var(--ff-script);font-size:1.5em;color:var(--magenta-deep);
  font-weight:700;line-height:1;display:inline-block;transform:rotate(-3deg)}
.mono{font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.02em}
.tnum{font-variant-numeric:tabular-nums}
.center{text-align:center}
.grid{display:grid;gap:var(--sp-5)}
.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}

/* ---------- Fondos decorativos ---------- */
.dotgrid{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  background-size:26px 26px;color:var(--line-strong);opacity:.35;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 82%);
  mask-image:linear-gradient(to bottom,#000,transparent 82%)}
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(0px);
  background:radial-gradient(circle at 32% 30%, #ff4fac 0%, var(--magenta) 45%, var(--magenta-deep) 100%)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--ff-display);
  font-weight:800;font-size:var(--fs-md);letter-spacing:-.01em;
  padding:.85em 1.5em;border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;text-decoration:none;touch-action:manipulation;
  transition:transform var(--dur) var(--ease-out), background-color .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Flecha desnuda, como en boostiqapp.com: sin círculo detrás */
.btn .arrow{display:inline-block;flex:none;line-height:1;
  transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow{transform:translateX(4px)}
/* Formato Boostiq: píldora, resplandor magenta en dos capas y elevación al pasar.
   El fondo baja a #e0007d para que el blanco encima llegue a 4,7:1 (AA). */
.btn-primary{background:var(--magenta-btn);color:#fff;border-radius:100px;
  box-shadow:0 10px 28px -10px rgba(224,0,125,.55), 0 2px 6px -2px rgba(224,0,125,.35);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s var(--ease),
             background-color .25s var(--ease)}
.btn-primary:hover{background:#c4006e;color:#fff;transform:translateY(-1px);
  box-shadow:0 14px 38px -10px rgba(224,0,125,.45), 0 2px 6px -2px rgba(224,0,125,.3)}
.btn-primary:active{transform:translateY(0) scale(.99)}
.btn-primary:focus-visible{outline:3px solid rgba(224,0,125,.45);outline-offset:3px}

/* Marca del botón: la sonrisa del logotipo —la que va bajo el «iQ»— y, en todo
   lo que habla de Boostiq, la nube de Boostiq. Va como máscara sobre
   currentColor, así que hereda el color del botón sin pedir ningún fichero. */
.btn-primary::before,.btn-inverse::before,.btn.nube::before{content:"";width:1.32em;height:1.32em;
  flex:none;background:currentColor;margin-right:-.12em;
  -webkit-mask:var(--marca,var(--sonrisa)) center/contain no-repeat;
          mask:var(--marca,var(--sonrisa)) center/contain no-repeat;
  transition:transform .3s var(--ease-out)}
/* En Boostiq, la nube */
.es-boostiq .btn-primary::before,.es-boostiq .btn-inverse::before,
.btn.nube::before{--marca:var(--nube)}
.sin-marca::before{display:none !important}

/* El guiño de la marca, igual que en boostiqapp.com */
@keyframes guino{0%,100%{transform:scale(1) rotate(0deg);opacity:1}
                 50%{transform:scale(1.25) rotate(20deg);opacity:.85}}
@media (prefers-reduced-motion: no-preference){
  .btn-primary:hover::before,.btn-inverse:hover::before,.btn.nube:hover::before{animation:guino .7s var(--ease) 1}
  /* Y un guiño de vez en cuando, sin que nadie pase por encima */
  .btn-mega::before{animation:guino 1s var(--ease) 3s 1}
}

/* Destello diagonal que cruza la llamada grande, como el original */
.btn-mega{position:relative;overflow:hidden;isolation:isolate}
.btn-mega::after{content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;
  z-index:1;pointer-events:none;transform:skewX(-20deg);
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.45) 50%,transparent 75%)}
@media (prefers-reduced-motion: no-preference){
  .btn-mega:hover::after{animation:destello .85s var(--ease) 1}
}
@keyframes destello{0%{left:-120%}55%,100%{left:130%}}

/* Llamada grande: mismo gesto, más presencia */
.btn-mega{font-size:var(--fs-lg);padding:.85em 1.6em;
  background:linear-gradient(135deg,#e0007d 0%,#c4006e 60%,#8a004d 100%);
  box-shadow:0 18px 50px -12px rgba(224,0,125,.55), 0 6px 14px -4px rgba(224,0,125,.35),
             inset 0 1px 0 rgba(255,255,255,.25)}
.btn-mega:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 26px 70px -14px rgba(224,0,125,.7), 0 10px 22px -6px rgba(224,0,125,.45),
             inset 0 1px 0 rgba(255,255,255,.3)}
.btn-mega:hover .arrow{transform:translateX(4px)}
.btn-inverse.btn-mega{box-shadow:0 18px 50px -14px rgba(8,0,4,.5)}
.btn-inverse.btn-mega:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 26px 70px -16px rgba(8,0,4,.6)}
.btn-inverse::before{background:var(--magenta-btn)}
@media (prefers-reduced-motion: reduce){
  .btn-primary,.btn-primary:hover,.btn-mega:hover{transform:none}
}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--magenta);color:var(--magenta-deep);background:var(--magenta-mist)}
.btn-ghost .arrow{color:var(--magenta-deep)}
.btn-inverse{background:var(--sobre-noche);color:var(--noche)}
.btn-inverse .arrow{color:#c4006e}   /* fijo: el fondo del botón también lo es */
.btn-inverse:hover{background:#fff;color:var(--noche)}
.btn-sm{font-size:var(--fs-sm);padding:.6em 1.1em}
.link-arrow{display:inline-flex;align-items:center;gap:.45em;font-family:var(--ff-display);
  font-weight:800;color:var(--magenta-deep);text-decoration:none;font-size:var(--fs-sm);
  letter-spacing:.01em}
.link-arrow span{transition:transform var(--dur) var(--ease-out)}
.link-arrow:hover span{transform:translateX(4px)}
.link-arrow::after{content:"";position:absolute;inset:0}

/* ---------- Cabecera ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--magenta),var(--magenta-deep));transition:width .1s linear}
.skip{position:fixed;top:8px;left:8px;z-index:200;background:var(--noche);color:var(--sobre-noche);
  padding:.7em 1.1em;border-radius:var(--r-pill);font-family:var(--ff-display);font-weight:800;
  transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip:focus{transform:translateY(0);color:var(--sobre-noche)}
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.site-header.scrolled{border-bottom-color:var(--line)}
/* Con la barra de administracion, la cabecera pegajosa se queda por debajo
   de ella y el logo aparece cortado. Solo lo ve quien ha iniciado sesion,
   pero es lo primero que ve quien revisa la web. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
.header-inner{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:.55em;font-family:var(--ff-display);
  font-weight:800;font-size:1.45rem;letter-spacing:-.035em;color:var(--ink);text-decoration:none;flex:none}
.logo:hover{color:var(--ink)}
.logo .dot{width:.62em;height:.62em;border-radius:50%;background:var(--magenta);flex:none;
  transition:transform .5s var(--ease-out)}
.logo:hover .dot{transform:scale(1.25)}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.nav-list{display:flex;align-items:center;gap:var(--sp-1);list-style:none;margin:0;padding:0}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .8em;border-radius:var(--r-sm);color:var(--ink-3);text-decoration:none;
  font-size:var(--fs-sm);font-weight:500;transition:color .2s var(--ease),background-color .2s var(--ease)}
.nav-link:hover{color:var(--ink);background:var(--magenta-mist)}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.15em;
  height:2px;border-radius:2px;background:var(--magenta)}
.has-menu{position:relative}
.caret{width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.has-menu[data-open="true"] .caret{transform:rotate(-135deg) translateY(-2px)}
.submenu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(560px,88vw);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--card-shadow);padding:var(--sp-4);list-style:none;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease-out),visibility .22s}
.has-menu[data-open="true"] .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* Puente invisible sobre el hueco entre el enlace y el panel: sin él, bajar el
   ratón hacia el submenú lo cerraba a medio camino. */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.submenu a{display:block;padding:.7em .8em;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2)}
.submenu a:hover{background:var(--magenta-mist);color:var(--ink)}
.submenu .sm-t{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-sm);display:block}
.submenu .sm-d{font-size:var(--fs-xs);color:var(--ink-4);display:block;line-height:1.35}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink-3);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.icon-btn:hover{background:var(--magenta-mist);color:var(--magenta-deep);border-color:var(--magenta-soft)}
.burger{display:none}
@media (max-width:1020px){
  .nav-list,.header-cta{display:none}
  .burger{display:grid}
}
/* El panel lateral se define en el bloque de movimiento, al final. */

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(48px,7vw,104px) var(--section-pad);overflow:hidden}
.hero .blob{width:min(60vw,720px);aspect-ratio:1;right:-14vw;top:-16vw;opacity:.14}
.hero-grid{position:relative;z-index:1;display:grid;gap:var(--sp-7);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.5rem,1.25rem + 4.3vw,4.5rem);font-weight:900;letter-spacing:-.045em;margin-bottom:.35em}
.hero h1 .fade{color:var(--ink-4)}
.rotator{position:relative;display:inline-grid;color:var(--magenta);vertical-align:top}
.rotator > span{grid-area:1/1;opacity:0;transform:translateY(.28em) rotateX(-40deg);
  transform-origin:top center;transition:opacity .5s var(--ease),transform .5s var(--ease-out)}
.rotator > span.on{opacity:1;transform:none}
.hero .lede{font-size:var(--fs-lg);margin-bottom:var(--sp-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.badge{display:inline-flex;align-items:center;gap:.6em;padding:.5em 1em;border-radius:var(--r-pill);
  background:var(--magenta-mist);border:1px solid var(--magenta-soft);color:var(--magenta-deep);
  font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:var(--sp-5)}
.badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--magenta);
  box-shadow:0 0 0 0 rgba(253,5,141,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(253,5,141,0)}100%{box-shadow:0 0 0 0 rgba(253,5,141,0)}}

/* Panel de métricas del hero */
.metrics{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-6);box-shadow:var(--card-shadow);position:relative;overflow:hidden}
.metrics::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--magenta),var(--magenta-deep),transparent)}
.metrics .m-head{display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  font-family:var(--ff-display);font-weight:800;margin-bottom:var(--sp-5)}
.m-live{display:inline-flex;align-items:center;gap:.5em;color:var(--signal)}
.m-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2.4s infinite}
.m-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--sp-4);
  padding:.85em 0;border-bottom:1px solid var(--line)}
.m-row:last-child{border-bottom:0}
.m-label{font-size:var(--fs-sm);color:var(--ink-3)}
.m-value{font-family:var(--ff-display);font-weight:900;font-size:var(--fs-2xl);
  color:var(--ink);letter-spacing:-.03em}
/* Todas las cifras del panel en magenta: el verde y el rosa mezclados no
   distinguían nada, sólo hacían ruido (feedback de Miguel). */
.m-value.up{color:var(--magenta-deep)}
.m-value.brand{color:var(--magenta-deep)}
.m-bar{grid-column:1/-1;height:5px;border-radius:99px;background:var(--magenta-soft);overflow:hidden}
.m-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--magenta),var(--magenta-deep));
  transition:width 1.4s var(--ease-out)}

/* ---------- Tira de datos ---------- */
.stats{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;position:relative;z-index:1}
.stat{display:inline-flex;align-items:baseline;gap:.5em;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.7em 1.3em;box-shadow:var(--card-shadow)}
.stat b{font-family:var(--ff-display);font-weight:900;font-size:var(--fs-lg);color:var(--magenta-deep);letter-spacing:-.03em}
.stat span{font-size:var(--fs-sm);color:var(--ink-3)}

/* ---------- Tarjetas y listas ---------- */
.card{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--card-shadow);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--magenta-soft)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.cards-3{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cards-2{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.cards-2.tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}

/* ---- Equipo ---- */
.team-grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
.team-rest{margin-top:var(--sp-5)}
@media (min-width:600px){
  .team-lead{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team-rest{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .team-rest{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.member{position:relative;margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--card-shadow);overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .3s var(--ease)}
.member::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--magenta),var(--magenta-deep));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.member:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--magenta-soft)}
.member:hover::after{transform:scaleX(1)}
.member-ph{position:relative;width:104px;height:104px;margin-bottom:var(--sp-4);border-radius:50%;
  overflow:hidden;background:var(--paper-3);
  box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--magenta-soft)}
.member-ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.96);transition:transform .5s var(--ease-out)}
.member:hover .member-ph img{transform:scale(1.05)}
.member figcaption h3{font-size:var(--fs-lg);margin:0 0 .15em;line-height:1.2}
.member-role{margin:0 0 .7em;font-size:.82rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--magenta-deep);font-weight:600}
.member-role em{display:block;font-style:normal;color:var(--ink-4);text-transform:none;
  letter-spacing:0;font-weight:500;font-size:.88rem;margin-top:.15em}
.member-bio{margin:0;color:var(--ink-4);font-size:.95rem;line-height:1.6}
.member figcaption{display:flex;flex-direction:column;flex:1 1 auto}
.member-links{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:var(--sp-5) 0 0;
  padding-top:var(--sp-4);border-top:1px solid var(--line)}
@media (min-width:521px){.member{display:flex;flex-direction:column}
  .member-links{margin-top:auto}}
.member-links a{font-size:.85rem;font-weight:600;letter-spacing:.01em;
  color:var(--magenta-deep);text-decoration:none;position:relative}
.member-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out)}
.member-links a:hover{color:var(--magenta-ink)}
.member-links a:hover::after{transform:scaleX(1)}
@media (max-width:520px){
  .member{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--sp-4);align-items:start}
  .member-ph{width:76px;height:76px;margin-bottom:0}}
/* ---------- Qué hacemos: lista con deslizador ----------
   En reposo sólo se ve el nombre. Al pasar el ratón —o al llegar con el
   teclado— un panel magenta recorre la fila de izquierda a derecha, el texto
   pasa a blanco y aparece la promesa del servicio. La altura de la fila no
   cambia, así que no hay desplazamiento de lo que viene debajo. */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
/* Sin margen entre filas: el `li{margin-bottom:.4em}` global dejaba un hueco
   blanco entre la línea separadora y el deslizador magenta en todas las filas
   menos la primera, que se apoya en el borde superior de la lista. */
.svc{border-bottom:1px solid var(--line);margin:0}
.svc-in{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:3.1em minmax(0,auto) minmax(0,1fr) 46px;
  gap:var(--sp-5);align-items:center;
  padding:clamp(15px,1.8vw,23px) var(--sp-4);
  text-decoration:none;color:inherit}
.svc-in::before{content:"";position:absolute;inset:0;z-index:-1;
  /* Paradas fijas: los tokens se invierten en oscuro y el blanco encima caía a 2,8:1 */
  background:linear-gradient(100deg,#e0007d 0%,#b30062 100%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease-out)}
.svc-in:hover::before,.svc-in:focus-visible::before{transform:scaleX(1)}
.svc-in:focus-visible{outline:2px solid var(--magenta-deep);outline-offset:-3px}

.svc-num{font-family:var(--ff-display);font-weight:900;font-size:var(--fs-sm);
  color:var(--magenta-deep);letter-spacing:.06em;transition:color .3s var(--ease)}
.svc-t{font-family:var(--ff-display);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.35rem,.85rem + 1.5vw,2.15rem);color:var(--ink);white-space:nowrap;
  transition:color .3s var(--ease)}
.svc-d{color:var(--ink-4);font-size:var(--fs-md);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0;transform:translateX(-14px);
  transition:opacity .35s var(--ease) .1s, transform .5s var(--ease-out) .1s, color .3s var(--ease)}
.svc-in:hover .svc-d,.svc-in:focus-visible .svc-d{opacity:1;transform:none}
.svc-in:hover .svc-num,.svc-in:hover .svc-t,.svc-in:hover .svc-d,
.svc-in:focus-visible .svc-num,.svc-in:focus-visible .svc-t,.svc-in:focus-visible .svc-d{color:#fff}

.svc-go{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--ink-3);flex:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),
             transform .3s var(--ease-out),border-color .3s var(--ease)}
.svc-in:hover .svc-go,.svc-in:focus-visible .svc-go{background:#fff;border-color:#fff;
  color:var(--magenta-deep);transform:translateX(4px)}

@media (max-width:900px){
  .svc-in{grid-template-columns:2.5em minmax(0,1fr) 40px;
    grid-template-areas:"n t g" ". d g";row-gap:.3em;column-gap:var(--sp-4)}
  .svc-num{grid-area:n}
  .svc-t{grid-area:t;white-space:normal;font-size:1.3rem}
  .svc-d{grid-area:d;opacity:1;transform:none;white-space:normal;overflow:visible}
  .svc-go{grid-area:g;width:40px;height:40px;align-self:center}
}
@media (prefers-reduced-motion: reduce){
  .svc-in::before{transition:none}
  .svc-d{transition:color .2s}
}
.tag{display:inline-block;padding:.3em .8em;border-radius:var(--r-pill);background:var(--magenta-soft);
  color:var(--magenta-deep);font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.09em;text-transform:uppercase}
.tick{list-style:none;padding:0;margin:0}
.tick li{position:relative;padding-left:1.9em;margin-bottom:.65em;color:var(--ink-3)}
.tick li::before{content:"";position:absolute;left:0;top:.5em;width:1.1em;height:.55em;
  border-left:2.5px solid var(--magenta);border-bottom:2.5px solid var(--magenta);
  transform:rotate(-45deg);border-radius:1px}
.cross li::before{content:"×";border:0;transform:none;font-family:var(--ff-display);
  font-weight:900;color:var(--ink-4);font-size:1.25em;line-height:1;top:.15em}

/* ---------- Bandas ---------- */
.band{position:relative;background:var(--noche);color:var(--sobre-noche-2);overflow:hidden}
.band h1,.band h2,.band h3,.band h4{color:var(--sobre-noche)}
.band .lede,.band p,.band li{color:var(--sobre-noche-2)}
.band .muted,.band .mono{color:var(--sobre-noche-3)}
/* Las tarjetas claras que se apoyan sobre una banda oscura recuperan la
   escala normal de tinta. Sin esto, el texto pensado para fondo oscuro cae
   sobre el fondo claro de la tarjeta y se queda en 2,7:1 — el mismo error
   de siempre: un color atado a la banda aplicado dentro de algo que no es
   la banda. */
/* Sólo .metrics: es la única tarjeta que fija su fondo a --paper pase lo que
   pase. Las .card de una banda pueden venir oscurecidas desde el contenido,
   y forzarles tinta oscura las rompe — comprobado. */
.band .metrics{color:var(--ink-2)}
.band .metrics .lede,.band .metrics p,.band .metrics li{color:var(--ink-3)}
.band .metrics .muted,.band .metrics .mono{color:var(--ink-4)}
.band .eyebrow{color:var(--magenta-noche)}
.band .btn-ghost{color:var(--sobre-noche);border-color:rgba(255,255,255,.34)}
.band .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:var(--sobre-noche);color:var(--sobre-noche)}
.band .dotgrid{color:var(--sobre-noche);opacity:.10;-webkit-mask-image:none;mask-image:none}
/* Paradas fijas, no tokens: --magenta y --magenta-deep se invierten con el tema
   y el blanco encima se quedaba en 2,8:1 en modo oscuro. Con #e0007d el blanco
   llega a 4,7:1 en las dos versiones. */
.band-magenta{background:linear-gradient(140deg,#e0007d 0%,#c4006e 55%,#9d0057 100%);color:#fff}
.band-magenta h2,.band-magenta p,.band-magenta .lede{color:#fff}
.band-soft{background:var(--paper-3)}
.band-magenta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.band-magenta .muted,.band-magenta .mono{color:rgba(255,255,255,.82)}
.curve-top,.curve-bottom{position:absolute;left:0;width:100%;height:clamp(40px,6vw,90px);
  color:var(--paper);pointer-events:none;z-index:2}
.curve-top{top:-1px}
.curve-bottom{bottom:-1px}

/* ---------- Marquesina de clientes ---------- */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:var(--sp-8);width:max-content;align-items:center;animation:slide 38s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.brandmark{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.1rem,2vw,1.6rem);
  letter-spacing:-.02em;color:var(--ink-4);opacity:.72;white-space:nowrap;
  transition:opacity .3s var(--ease),color .3s var(--ease)}
.marquee-track:hover .brandmark{opacity:.45}
.brandmark:hover{opacity:1;color:var(--magenta-deep)}

/* ---------- Proceso ---------- */
.steps{counter-reset:s;display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.step{position:relative;padding-top:var(--sp-6);border-top:2px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-.75em;left:0;
  background:var(--paper);padding-right:.6em;font-family:var(--ff-display);font-weight:900;
  font-size:var(--fs-sm);color:var(--magenta);letter-spacing:.08em}
.step.done{border-top-color:var(--magenta)}
.step h4{margin-bottom:.35em}
.step p{color:var(--ink-4);font-size:var(--fs-sm);margin:0}

/* ---------- Acordeón / FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.15em 2.5em 1.15em 0;position:relative;
  font-family:var(--ff-display);font-weight:800;font-size:var(--fs-lg);color:var(--ink);
  letter-spacing:-.015em;transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--magenta-deep)}
.faq summary::after{content:"";position:absolute;right:.4em;top:1.5em;width:.62em;height:.62em;
  border-right:2.5px solid var(--magenta);border-bottom:2.5px solid var(--magenta);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-body{padding:0 2.5em 1.4em 0;color:var(--ink-3);max-width:var(--max-read)}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- Blog ---------- */
.posts{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.post{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--card-shadow);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .3s}
.post:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--magenta-soft)}
.post-thumb{aspect-ratio:16/10;background:
  radial-gradient(circle at 78% 22%, rgba(253,5,141,.55), transparent 58%),
  linear-gradient(150deg,var(--paper-3),var(--magenta-soft));
  display:grid;place-items:center;border-bottom:1px solid var(--line);position:relative}
.post-thumb span{font-family:var(--ff-display);font-weight:900;font-size:2.4rem;
  color:var(--magenta-deep);opacity:.5;letter-spacing:-.04em}
.post-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.post h3{font-size:var(--fs-xl);margin:0;line-height:1.15}
.post .meta{font-size:var(--fs-xs);color:var(--ink-4);letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--ff-display);font-weight:800;display:flex;gap:.7em;align-items:center;flex-wrap:wrap}
.post p{font-size:var(--fs-sm);color:var(--ink-4);margin:0}
.post .post-foot{margin-top:auto}

/* Artículo */
.article{max-width:var(--max-read);margin-inline:auto}
.article h2{font-size:var(--fs-2xl);margin-top:1.6em;scroll-margin-top:calc(var(--header-h) + 20px)}
.article h3{font-size:var(--fs-xl);margin-top:1.4em;scroll-margin-top:calc(var(--header-h) + 20px)}
.article blockquote{margin:1.6em 0;padding:var(--sp-5) var(--sp-6);border-left:4px solid var(--magenta);
  background:var(--magenta-mist);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--ff-display);font-weight:600;font-size:var(--fs-lg);color:var(--ink);letter-spacing:-.01em}
.article blockquote p:last-child{margin:0}
.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);margin-bottom:var(--sp-7)}
.toc h2{margin:0 0 .5em;font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.12em;
  font-family:var(--ff-display);color:var(--ink-4)}
.toc ol{margin:0;padding-left:1.2em;font-size:var(--fs-sm)}

/* ---------- Formularios ---------- */
.form{display:grid;gap:var(--sp-4)}
.field{display:grid;gap:.4em}
.field label{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-sm);color:var(--ink)}
.field .hint{font-size:var(--fs-xs);color:var(--ink-4)}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:.8em 1em;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4);opacity:.85}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--magenta);box-shadow:0 0 0 4px var(--magenta-soft);outline:none}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none}
.field.err input,.field.err textarea{border-color:#c62828}
.err-msg{color:#c62828;font-size:var(--fs-xs);font-weight:600}
:root[data-theme="dark"] .err-msg{color:#ff8a80}
.check{display:flex;gap:.7em;align-items:flex-start;cursor:pointer;font-size:var(--fs-sm);color:var(--ink-3)}
.check input{width:1.15em;height:1.15em;margin-top:.28em;accent-color:var(--magenta);flex:none}
.form-note{font-size:var(--fs-xs);color:var(--ink-4)}

/* ---------- Pie ---------- */
.site-footer{background:var(--noche);color:var(--sobre-noche-2);padding-block:var(--section-pad) var(--sp-6);position:relative;overflow:hidden}
.site-footer h4{color:var(--sobre-noche);font-size:var(--fs-sm);letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.1em}
.site-footer a{color:#e9d9e2;text-decoration:none;font-size:var(--fs-sm)}
.site-footer a:hover{color:var(--magenta);text-decoration:underline}
.footer-grid{display:grid;gap:var(--sp-7);grid-template-columns:1.6fr 1fr 1fr 1.5fr;position:relative;z-index:1}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.footer-bottom{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;
  font-size:var(--fs-xs);color:#b9a1ad;position:relative;z-index:1}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.social{display:flex;gap:.6em;margin-top:var(--sp-4)}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);transition:background-color .25s var(--ease),border-color .25s}
.social a:hover{background:var(--magenta);border-color:var(--magenta)}
.site-footer .logo{color:var(--sobre-noche)}

/* ---------- Banner de consentimiento ---------- */
.consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:140;
  max-width:640px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -20px rgba(10,0,5,.4);padding:var(--sp-5);
  transform:translateY(140%);transition:transform .55s var(--ease-out)}
.consent[data-open="true"]{transform:translateY(0)}
.consent h4{margin-bottom:.4em}
.consent p{font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:var(--sp-4)}
.consent-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.consent-actions .btn{flex:1 1 auto;justify-content:center}

/* ---------- Revelado al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .badge .pulse,.m-live i{animation:none}
  .rotator > span{transition:none}
  *{scroll-behavior:auto !important}
}

/* ---------- Router ---------- */


@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){}

/* ---------- Barra de prototipo ---------- */




@media (max-width:560px){}

/* ============================================================
   AMPLIACIÓN — clientes, iconografía, Boostiq, empleo, casos
   ============================================================ */

/* Logotipo de marca */
.logo img,.logo svg{height:36px;width:auto;display:block}
.site-footer .logo img,.site-footer .logo svg{height:56px;filter:brightness(0) invert(1)}
:root[data-theme="dark"] .logo img,:root[data-theme="dark"] .logo svg{filter:brightness(0) invert(1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo img,:root:not([data-theme="light"]) .logo svg{filter:brightness(0) invert(1)}}
.logo:hover img,.logo:hover svg{opacity:.85}

/* Aurora de fondo */
.aurora{position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 40% at 78% 18%, rgba(253,5,141,.20), transparent 65%),
    radial-gradient(38% 34% at 12% 8%, rgba(196,0,110,.13), transparent 62%),
    radial-gradient(30% 40% at 55% 85%, rgba(255,140,200,.14), transparent 68%);
  filter:blur(6px);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
@media (prefers-reduced-motion: reduce){.aurora{animation:none}}

/* Iconos de servicio */
.svc-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none;
  background:var(--magenta-soft);color:var(--magenta-deep);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .45s var(--ease-out)}
.card:hover .svc-icon,.svc:hover .svc-icon{background:var(--magenta);color:#fff;transform:rotate(-6deg) scale(1.06)}
.svc-icon svg{width:26px;height:26px}

/* Empresas con las que trabajamos */
/* ---------- Clientes en carrusel ----------
   Dos pistas idénticas que se desplazan sin fin. Se detiene al pasar el ratón
   y al enfocar con el teclado, y con movimiento reducido se queda quieto y
   pasa a poder desplazarse a mano. */
.carrusel{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.carrusel-pista{display:flex;width:max-content;gap:2px;
  animation:desfile 46s linear infinite}
.carrusel:hover .carrusel-pista,
.carrusel:focus-within .carrusel-pista{animation-play-state:paused}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .carrusel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .carrusel-pista{animation:none}
}
.client{background:var(--paper);display:grid;place-items:center;gap:.7em;padding:var(--sp-6) var(--sp-5);min-height:132px;width:186px;flex:none;border:1px solid var(--line);border-radius:var(--r-md);grid-template-rows:1fr;
  text-align:center;transition:background-color .3s var(--ease)}
.client:hover{background:var(--magenta-mist)}
.client img{height:auto;max-height:50px;max-width:150px;width:auto;object-fit:contain;
  filter:grayscale(1) contrast(.85);opacity:.62;
  transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease-out)}
.client:hover img{filter:none;opacity:1;transform:scale(1.06)}
:root[data-theme="dark"] .client img{filter:grayscale(1) brightness(2.6) contrast(.6);opacity:.65}
:root[data-theme="dark"] .client:hover img{filter:brightness(1.9);opacity:1}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .client img{filter:grayscale(1) brightness(2.6) contrast(.6);opacity:.65}
  :root:not([data-theme="light"]) .client:hover img{filter:brightness(1.9);opacity:1}
}
.client small{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.chip{display:grid;place-items:center;background:var(--paper);border-radius:var(--r-md);
  padding:14px 22px;min-width:150px;height:76px;box-shadow:0 8px 22px -10px rgba(10,0,5,.35);
  transition:transform .35s var(--ease-out)}
.chip:hover{transform:translateY(-4px)}
.chip img{height:auto;max-height:44px;max-width:120px;width:auto;object-fit:contain}

/* Casos con métrica grande */
.case{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--card-shadow);overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease)}
.case:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.case .big{font-family:var(--ff-display);font-weight:900;font-size:clamp(2.6rem,1.4rem + 3.4vw,3.9rem);
  line-height:.95;letter-spacing:-.045em;color:var(--magenta-deep);margin-bottom:.15em;display:block}
.case .cap{font-size:var(--fs-sm);color:var(--ink-4);display:block;line-height:1.35}
.band .case,.photo-band .case{padding:var(--sp-5)}
.case .who{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);
  font-family:var(--ff-display);font-weight:800;font-size:var(--fs-sm);color:var(--ink)}

/* Tabla comparativa */
.compare{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.compare th,.compare td{padding:.85em 1em;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border-bottom:2px solid var(--line-strong)}
.compare tbody th{font-weight:600;color:var(--ink);width:34%}
.compare .yes{color:var(--signal);font-weight:600}
.compare .no{color:var(--ink-4)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}

/* Boostiq */
.modes{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.mode{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);border-radius:var(--r-lg);
  padding:var(--sp-5);transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease-out)}
.mode:hover{background:rgba(253,5,141,.14);border-color:var(--magenta);transform:translateY(-3px)}
.mode .tagm{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--magenta-noche);display:block;margin-bottom:.7em}
.mode h4{color:var(--sobre-noche);margin-bottom:.35em}
.mode p{font-size:var(--fs-sm);margin:0;color:#e2cfda}
.plans{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:start}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);
  box-shadow:var(--card-shadow);position:relative;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.plan.featured{border-color:var(--magenta);box-shadow:0 0 0 1px var(--magenta), var(--card-shadow-hover)}
.plan .flag{position:absolute;top:-11px;left:var(--sp-6);background:var(--magenta);color:#fff;
  font-family:var(--ff-display);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:.35em .8em;border-radius:var(--r-pill)}
.plan .price{font-family:var(--ff-display);font-weight:900;font-size:var(--fs-3xl);color:var(--ink);
  letter-spacing:-.04em;display:block;margin:.2em 0}
.plan .price small{font-size:var(--fs-sm);font-weight:600;color:var(--ink-4);letter-spacing:0}
.plan ul{margin:var(--sp-4) 0 var(--sp-5)}

/* Empleo */
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;
  padding:var(--sp-5) 0;border-bottom:1px solid var(--line);position:relative}
.job h4{margin:0 0 .25em}
.job .meta{font-size:var(--fs-xs);color:var(--ink-4);font-family:var(--ff-display);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;display:flex;gap:.7em;flex-wrap:wrap}
.ribbon{display:inline-flex;vertical-align:middle;align-items:center;gap:.5em;background:var(--noche);color:var(--sobre-noche);
  font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;padding:.45em .9em;border-radius:var(--r-pill);margin-bottom:var(--sp-4)}
.ribbon i{width:7px;height:7px;border-radius:50%;background:#ffd166}

/* Nota editorial */
.note{border-left:3px solid var(--magenta);background:var(--magenta-mist);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--ink-3)}
.note strong{color:var(--ink)}
.note p,.note li{color:inherit}   /* si no, .band p le gana dentro de una banda */
.note.warn{color:#4a3a17}
.note.warn strong,.note.warn .note-t{color:#3a2c10}
:root[data-theme="dark"] .note.warn{color:#e8d5b0}
:root[data-theme="dark"] .note.warn strong,:root[data-theme="dark"] .note.warn .note-t{color:#f0e0c0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .note.warn{color:#e8d5b0}
  :root:not([data-theme="light"]) .note.warn strong,
  :root:not([data-theme="light"]) .note.warn .note-t{color:#f0e0c0}}

/* Ticker superior */
.ticker{background:var(--noche);color:var(--sobre-noche);overflow:hidden;font-family:var(--ff-display);font-weight:800;
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}
.ticker-track{display:flex;gap:var(--sp-7);width:max-content;padding:.65em 0;animation:slide 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;color:#f4dfe9}
.ticker b{color:var(--magenta)}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}}

/* Panel de itinerarios de formación */
.course{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-6);align-items:center;
  padding:var(--sp-5) var(--sp-4);border-bottom:1px solid var(--line);transition:background-color .3s var(--ease)}
.course:hover{background:var(--magenta-mist)}
.course .hrs{font-family:var(--ff-display);font-weight:900;font-size:var(--fs-xl);color:var(--magenta-deep);
  letter-spacing:-.03em;min-width:3.4em;white-space:nowrap;flex:none}
.course h4{margin:0 0 .2em}
.course p{margin:0;font-size:var(--fs-sm);color:var(--ink-4)}
@media (max-width:700px){.course{grid-template-columns:auto minmax(0,1fr)}.course .tag{grid-column:2}}
/* Variante sin la columna de horas (resumen de formación en la home) */
.course--sin-horas{grid-template-columns:minmax(0,1fr) auto}

/* Aviso de contenido archivado */
.note.warn{border-left-color:#c9821a;background:#fff6e8}
:root[data-theme="dark"] .note.warn{background:#2a1c07}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .note.warn{background:#2a1c07}}
.note.warn .note-t{display:flex;align-items:center;gap:.55em;font-family:var(--ff-display);font-weight:800;
  color:var(--ink);margin-bottom:.35em}
.note.warn .note-t svg{width:18px;height:18px;color:#c9821a;flex:none}
:root[data-theme="dark"] .note.warn .note-t svg{color:#f0b64f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .note.warn .note-t svg{color:#f0b64f}}
.chip-arch{display:inline-flex;align-items:center;gap:.4em;padding:.25em .7em;border-radius:var(--r-pill);
  background:#fff2dd;color:#8a5b06;font-family:var(--ff-display);font-weight:800;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase}
:root[data-theme="dark"] .chip-arch{background:#2f2107;color:#f0c274}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip-arch{background:#2f2107;color:#f0c274}}

/* ============================================================
   AMPLIACIÓN 3 — fotografía, texturas y ritmo visual
   ============================================================ */

/* Uniones limpias entre bandas contiguas */
[data-flush="top"]{padding-top:0 !important}

/* Una sección sólo pierde el aire de arriba si continúa el mismo bloque y el
   mismo fondo. En cuanto cambia el fondo lo recupera, para que nada quede
   pegado a la junta entre bandas. */
.section.continua{padding-top:0}
.band + .continua, .band-soft + .continua, .band-magenta + .continua, .photo-band + .continua,
.continua.band, .continua.band-soft, .continua.band-magenta, .continua.photo-band{
  padding-top:var(--section-pad)}
[data-flush="bottom"]{padding-bottom:0 !important}

/* Grano sutil sobre las bandas oscuras */
.grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Marcos de fotografía */
.shot{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--paper-3);
  box-shadow:var(--card-shadow)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out)}
.shot:hover img{transform:scale(1.045)}
.shot.tall{aspect-ratio:4/5}
.shot.wide{aspect-ratio:16/10}
.shot.band-photo{aspect-ratio:21/9}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(253,5,141,.16),transparent 42%,rgba(10,0,5,.58))}
.shot .caption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--sp-7) var(--sp-5) var(--sp-5);
  color:#fff;font-family:var(--ff-display);font-weight:800;font-size:var(--fs-md);
  background:linear-gradient(transparent,rgba(8,0,4,.92));
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
.shot-stack{position:relative}
.shot-stack .badge-float{position:absolute;right:-14px;bottom:-18px;z-index:3;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--card-shadow-hover);max-width:230px}
.shot-stack .badge-float b{display:block;font-family:var(--ff-display);font-weight:900;
  font-size:var(--fs-2xl);color:var(--magenta-deep);letter-spacing:-.03em;line-height:1}
.shot-stack .badge-float span{font-size:var(--fs-xs);color:var(--ink-4)}
@media (max-width:640px){.shot-stack .badge-float{right:0;bottom:-10px;padding:var(--sp-3) var(--sp-4)}}

/* Banda con fotografía de fondo */
.photo-band{position:relative;overflow:hidden;background:var(--noche)}
.photo-band > .bg{position:absolute;inset:0;z-index:0}
.photo-band > .bg img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:grayscale(.35)}
.photo-band > .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,rgba(10,0,5,.94) 0%,rgba(10,0,5,.78) 45%,rgba(196,0,110,.55) 100%)}
.photo-band .wrap{position:relative;z-index:2}

/* Tarjetas de artículo con fotografía */
.post-thumb{position:relative;overflow:hidden}
.post-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out)}
.post:hover .post-thumb img{transform:scale(1.06)}
.post-thumb .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,0,5,.05),rgba(10,0,5,.42))}
.post-thumb .kicker{position:absolute;left:14px;top:14px;z-index:2;background:var(--paper);
  color:var(--magenta-deep);font-family:var(--ff-display);font-weight:800;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:.35em .75em;border-radius:var(--r-pill)}

/* Bento */
.bento{display:grid;gap:var(--sp-4);grid-template-columns:repeat(4,1fr)}
.bento > *{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--card-shadow);position:relative;overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .3s}
.bento > *:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--magenta-soft)}
.bento .w2{grid-column:span 2}
.bento .w4{grid-column:span 4}
.bento .photo{padding:0;border:0;box-shadow:none}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento .w4{grid-column:span 2}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bento .w2,.bento .w4{grid-column:span 1}}
.bento .huge{font-family:var(--ff-display);font-weight:900;font-size:clamp(2.4rem,1.4rem + 3vw,3.6rem);
  line-height:.9;letter-spacing:-.045em;color:var(--magenta-deep);display:block;margin-bottom:.15em}

/* Cita destacada */
.pull{position:relative;padding:var(--sp-8) 0;text-align:center;width:100%;max-width:none}
.pull q{display:block;font-family:var(--ff-display);font-weight:800;
  font-size:clamp(1.9rem,1.1rem + 2.9vw,3.6rem);letter-spacing:-.035em;
  line-height:1.06;color:var(--ink);quotes:"\00ab" "\00bb";text-wrap:balance;max-width:26ch;margin-inline:auto}
.pull q::before,.pull q::after{color:var(--magenta)}
.pull .who{display:block;margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--ink-4);
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--ff-display);font-weight:800}

/* ============================================================
   MOVIMIENTO — hilo conductor, cursor, panel lateral, arranque
   Todo bajo (prefers-reduced-motion: no-preference) o con
   apagado explícito. El contenido nunca depende del script.
   ============================================================ */

.iman{will-change:transform}
.paralaje{will-change:transform}
@media (prefers-reduced-motion: reduce){.iman,.paralaje{transform:none !important}}
@media (hover:none),(pointer:coarse){.iman,.paralaje{transform:none !important}}

/* ---------- 3. Panel lateral ---------- */
.velo{position:fixed;inset:0;z-index:125;background:color-mix(in srgb,var(--ink) 62%,transparent);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.velo[data-open="true"]{opacity:1;visibility:visible}

.drawer{position:fixed;inset:0 0 0 auto;width:min(460px,100%);max-width:100vw;z-index:130;
  background:var(--paper);padding:var(--gutter);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  transform:translateX(100%);
  /* Oculto del todo al terminar de salir: si no, en iOS el panel fuera de
     pantalla suma al ancho del documento y aparece scroll horizontal. */
  visibility:hidden;
  box-shadow:-30px 0 70px -30px rgba(10,0,5,.35);
  transition:transform .55s var(--ease-out), visibility 0s linear .55s}
.drawer[data-open="true"]{transform:translateX(0);visibility:visible;
  transition:transform .55s var(--ease-out), visibility 0s}
.drawer .wrap{padding:0;max-width:none}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer .d-top{display:flex;align-items:center;min-height:var(--header-h);margin-bottom:var(--sp-5)}
.drawer .d-top .logo{border:0;padding:0}
.drawer .d-rot{font-family:var(--ff-display);font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);margin:var(--sp-5) 0 var(--sp-3)}
.drawer ul a{display:block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);letter-spacing:-.02em;line-height:1.12;
  color:var(--ink);text-decoration:none;padding:.3em 0;border-bottom:1px solid var(--line);
  position:relative;transition:color .3s var(--ease),padding-left .35s var(--ease-out)}
.drawer ul a:hover,.drawer ul a:focus-visible{color:var(--magenta-deep);padding-left:.35em}
.drawer .d-sub a{font-size:var(--fs-md);font-weight:600;color:var(--ink-3);padding-left:1em}
.drawer .d-sub a:hover,.drawer .d-sub a:focus-visible{padding-left:1.3em}
/* entrada escalonada: parte de su sitio, el script sólo la retrasa */
.drawer li,.drawer .d-rot,.drawer .d-cta{transform:translateX(0);opacity:1}
.drawer[data-anim="true"] li,
.drawer[data-anim="true"] .d-rot,
.drawer[data-anim="true"] .d-cta{opacity:0;transform:translateX(26px)}
.drawer[data-anim="true"][data-open="true"] li,
.drawer[data-anim="true"][data-open="true"] .d-rot,
.drawer[data-anim="true"][data-open="true"] .d-cta{opacity:1;transform:translateX(0);
  transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease-out) var(--d,0s)}
.menu-btn{display:none}
@media (min-width:1021px){.menu-btn{display:grid}}
@media (prefers-reduced-motion: reduce){
  .drawer{transition:none;visibility:hidden}
  .drawer[data-open="true"]{visibility:visible}
  .drawer[data-anim="true"] li,.drawer[data-anim="true"] .d-rot,.drawer[data-anim="true"] .d-cta{
    opacity:1;transform:none;transition:none}
  .velo{transition:none}
}

/* ---------- 4. Telón de entrada ---------- */
/* Oculto salvo que el script lo active: sin JS no hay telón. */
.telon{position:fixed;inset:0;z-index:9999;display:none;overflow:hidden}
html[data-telon] .telon{display:block}
html[data-telon]{overflow:hidden}
html[data-telon] body{overflow:hidden}

/* Las dos hojas comparten un único degradado de 100vw, así no se ve la junta */
.telon-hoja{position:absolute;top:0;bottom:0;width:calc(50% + 1px);will-change:transform;
  background-image:linear-gradient(155deg,#ff2f9f 0%,#fd058d 42%,#c4006e 100%);
  background-size:100vw 100%;background-repeat:no-repeat}
.telon-hoja.izq{left:0;background-position:left top}
.telon-hoja.der{right:0;background-position:right top}
html[data-telon="abriendo"] .telon-hoja{transition:transform .85s cubic-bezier(.76,0,.24,1)}
html[data-telon="abriendo"] .telon-hoja.izq{transform:translateX(-100.5%)}
html[data-telon="abriendo"] .telon-hoja.der{transform:translateX(100.5%)}

.telon-centro{position:absolute;inset:0;display:grid;place-content:center;
  justify-items:center;gap:clamp(20px,4vh,34px);padding:var(--gutter)}
.telon-marca{position:relative;display:block;line-height:0}
.telon-logo,.telon-marca>svg,.telon-marca>img{display:block;width:min(58vw,264px);height:auto;
  filter:brightness(0) invert(1);
  clip-path:inset(0 100% 0 0);
  animation:telonEscribe .8s cubic-bezier(.16,1,.3,1) .2s forwards}
@keyframes telonEscribe{to{clip-path:inset(0 -3% 0 0)}}
.telon-marca>.logo-texto{color:#fff;font-family:var(--ff-display);font-weight:800;
  font-size:clamp(38px,9vw,72px);line-height:1;letter-spacing:-.02em;
  clip-path:inset(0 100% 0 0);animation:telonEscribe .8s cubic-bezier(.16,1,.3,1) .2s forwards}

.telon-barra{display:block;width:min(48vw,208px);height:2px;border-radius:2px;
  background:rgba(255,255,255,.26);overflow:hidden}
.telon-barra i{display:block;height:100%;background:#fff;transform:scaleX(0);
  transform-origin:0 50%;animation:telonCarga 1.5s cubic-bezier(.36,0,.16,1) .35s forwards}
@keyframes telonCarga{to{transform:scaleX(1)}}

html[data-telon="abriendo"] .telon-centro{opacity:0;transform:scale(1.05);
  transition:opacity .32s var(--ease),transform .6s var(--ease-out)}

@media (prefers-reduced-motion: reduce){.telon{display:none !important}}

/* ---------- 5. Composición del hero al abrirse el telón ---------- */
/* El titular sólo se desplaza: sin clip ni opacidad, para no retrasar el LCP. */
html[data-arranque="1"] .hero h1{animation:sube .7s var(--ease-out) both}
@keyframes sube{from{transform:translateY(16px)}to{transform:none}}

html[data-arranque="1"] .hero .badge{animation:asoma .7s var(--ease-out) both}
html[data-arranque="1"] .hero .lede{animation:asoma .7s var(--ease-out) .14s both}
html[data-arranque="1"] .hero .hero-actions{animation:asoma .7s var(--ease-out) .24s both}
html[data-arranque="1"] .hero .metrics{animation:asoma .8s var(--ease-out) .3s both}
@keyframes asoma{
  from{clip-path:inset(0 0 102% 0);transform:translateY(14px)}
  to{clip-path:inset(0 0 -14% 0);transform:none}
}
@media (prefers-reduced-motion: reduce){
  html[data-arranque="1"] .hero h1,html[data-arranque="1"] .hero .badge,
  html[data-arranque="1"] .hero .lede,html[data-arranque="1"] .hero .hero-actions,
  html[data-arranque="1"] .hero .metrics{animation:none !important}
}

/* ---------- Calculadora de ahorro ---------- */
.calc{display:grid;gap:var(--sp-6);align-items:start}
@media (min-width:960px){.calc{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-7)}}
.calc-caja{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--card-shadow)}
.calc-sal{text-align:center;padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.calc-sal .et{display:block;font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.5em}
.calc-cifra{font-family:var(--ff-display);font-weight:900;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.6rem,1.6rem + 3.4vw,4rem);color:var(--magenta-deep);
  font-variant-numeric:tabular-nums;display:block}
.calc-neto{margin:.7em 0 0;font-size:var(--fs-sm);color:var(--ink-4)}
.calc-neto b{color:var(--magenta-deep);font-variant-numeric:tabular-nums}

.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--magenta) var(--pos,50%),var(--line) var(--pos,50%));
  margin:var(--sp-5) 0 .4em;cursor:pointer}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--paper);border:3px solid var(--magenta);cursor:grab;
  box-shadow:0 3px 10px -2px rgba(224,0,125,.5)}
.calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:3px solid var(--magenta);cursor:grab}
.calc input[type=range]:focus-visible{outline:3px solid var(--magenta-soft);outline-offset:4px}
.calc-tope{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-4);
  font-variant-numeric:tabular-nums}

.calc-campos{display:grid;gap:var(--sp-4);margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.calc-campo{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);background:var(--paper-2)}
.calc-campo label{display:block;font-family:var(--ff-display);font-weight:800;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.5em}
.calc-campo .fila{display:flex;align-items:baseline;gap:.3em}
.calc-campo .eur{color:var(--ink-4);font-size:var(--fs-sm)}
.calc-campo input[type=number]{width:100%;border:0;background:transparent;padding:0;
  font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xl);color:var(--ink);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.calc-campo input[type=number]:focus{outline:none}
.calc-campo:focus-within{border-color:var(--magenta);box-shadow:0 0 0 3px var(--magenta-soft)}
.calc-campo small{display:block;margin-top:.5em;font-size:var(--fs-xs);color:var(--ink-4);line-height:1.35}

.calc-res{background:linear-gradient(150deg,#e0007d 0%,#c4006e 55%,#8a004d 100%);color:#fff;
  border-radius:var(--r-lg);padding:var(--sp-6);text-align:center}
.calc-res .et{display:block;font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.13em;text-transform:uppercase;opacity:.85;margin-bottom:.4em}
.calc-res .gran{font-family:var(--ff-display);font-weight:900;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.4rem,1.5rem + 3vw,3.6rem);display:block;font-variant-numeric:tabular-nums}
.calc-res .sub{margin:.6em 0 0;font-size:var(--fs-sm);opacity:.9}
.calc-res .chips{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;margin-top:var(--sp-5)}
.calc-res .chip{background:rgba(10,0,5,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:var(--r-pill);padding:.4em .9em;font-family:var(--ff-display);font-weight:800;
  font-size:var(--fs-xs);letter-spacing:.04em}

.calc-tabla{width:100%;border-collapse:collapse;margin-top:var(--sp-5);font-size:var(--fs-sm)}
.calc-tabla th,.calc-tabla td{padding:.7em .6em;border-bottom:1px solid var(--line);text-align:right}
.calc-tabla th:first-child,.calc-tabla td:first-child{text-align:left}
.calc-tabla thead th{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.calc-tabla td{font-variant-numeric:tabular-nums;color:var(--ink-3);text-wrap:nowrap;white-space:nowrap}
.calc-tabla td:first-child{white-space:normal}
.calc-tabla td:first-child{color:var(--ink-2)}
.calc-tabla tr.total td{font-family:var(--ff-display);font-weight:900;font-size:var(--fs-md);
  color:var(--ink);border-bottom:0;border-top:2px solid var(--ink)}
.calc-tabla .no{color:var(--ink-4);font-style:italic}
.calc-nota{margin:var(--sp-5) 0 0;font-size:var(--fs-xs);color:var(--ink-4);line-height:1.5}

/* ---------- Comparativa búsqueda / briefing (ChatGPT Ads) ---------- */
.compara{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.compara-lado{background:var(--paper);padding:var(--sp-5)}
.compara-lado.destaca{background:var(--magenta-mist)}
.compara-et{margin:0 0 .5em;font-family:var(--ff-display);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.compara-lado.destaca .compara-et{color:var(--magenta-deep)}
.compara-txt{margin:0;font-family:var(--ff-display);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;font-size:var(--fs-lg);color:var(--ink)}
.compara-lado.destaca .compara-txt{font-size:var(--fs-md);line-height:1.35}


/* ---------- Formulario: piezas que no estaban en el prototipo ---------- */
/* La trampa para bots. Fuera de pantalla y no display:none: hay bots que
   saltan los campos ocultos, y lectores de pantalla que anuncian los que no
   lo están. Con aria-hidden y tabindex -1 no molesta a nadie. */
.imp-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-aviso{background:var(--magenta-mist);border-left:3px solid var(--magenta);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);color:var(--ink-3);margin:0 0 var(--sp-4)}
.field .opt{color:var(--ink-4);font-weight:400}
.form button[aria-busy="true"]{opacity:.65;pointer-events:none}
.pagina-gracias .steps .step h4{margin-bottom:.35em}