@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Poppins:wght@400;500;600;700&display=swap");

/* Druk Wide Bold — fuente display real del manual de marca. Ya es ancha y
   bold por sí misma: no se le aplica font-stretch ni síntesis de peso. */
@font-face{font-family:"Druk Wide Bold";src:url("assets/fonts/DrukWideBold.ttf") format("truetype");font-weight:normal;font-style:normal;font-stretch:normal;font-display:swap}

/* ============ TOKENS ============ */
:root{
  --ret-teal:#10AABE;--ret-negro:#030304;--ret-verde:#35A877;--ret-blanco:#FDFDFC;

  --teal-100:#DCF3F6;--teal-200:#AEE4EA;--teal-300:#74D2DC;--teal-400:#2BB7C0;
  --teal-500:#10AABE;--teal-600:#0C8998;--teal-700:#0A6874;--teal-800:#074750;--teal-900:#053138;

  --verde-100:#D3EFE1;--verde-300:#8AD5B2;--verde-500:#35A877;--verde-700:#1E7052;--verde-900:#0F3D2D;

  --ink-1000:#000000;--ink-950:#030304;--ink-900:#070A0B;--ink-850:#0B1113;
  --ink-800:#101719;--ink-750:#151E21;--ink-700:#1B262A;--ink-600:#28363C;
  --ink-500:#3B4C53;--ink-400:#5A6C74;--ink-300:#87979E;--ink-200:#B3BFC5;
  --ink-150:#CED7DB;--ink-100:#E2E8EA;--ink-050:#F1F4F5;--ink-000:#FDFDFC;

  --ambar-500:#E8A317;--ambar-900:#3A2A05;
  --rojo-500:#E5484D;--rojo-700:#B3282D;--rojo-900:#3B0F11;

  --font-display:"Druk Wide Bold","Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:"Helvetica Neue","Archivo",Helvetica,Arial,sans-serif;
  /* Antes JetBrains Mono (look "consola"); a pedido del cliente se cambió a
     Poppins para las etiquetas técnicas — se conserva el nombre de la
     variable para no reescribir cada referencia en el CSS/HTML. */
  --font-mono:"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;

  --display-weight:400;
  --display-stretch:normal;

  --fs-2xs:11px;--fs-xs:13px;--fs-sm:15px;--fs-base:17px;--fs-md:19px;
  --fs-lg:20px;--fs-xl:24px;--fs-2xl:clamp(20px,6.5vw,32px);
  --fs-3xl:clamp(18px,6vw,44px);--fs-4xl:clamp(20px,7.5vw,60px);--fs-5xl:clamp(22px,9.75vw,84px);--fs-6xl:clamp(24px,12vw,112px);

  --lh-tight:0.94;--lh-snug:1.08;--lh-heading:1.2;--lh-body:1.55;--lh-loose:1.7;

  --tracking-display:-0.01em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-label:0.14em;
  --weight-regular:400;--weight-medium:500;--weight-bold:700;--weight-black:900;

  --space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
  --space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;
  --space-11:64px;--space-12:80px;--space-13:96px;--space-14:128px;--space-15:160px;
  --header-h:80px;

  --container-max:1240px;--container-narrow:760px;
  --gutter:24px;--gutter-lg:40px;--section-y:96px;--section-y-lg:128px;
  --grid-unit:8px;--grid-cell:56px;

  --radius-0:0;--radius-1:2px;--radius-2:4px;--radius-3:6px;--radius-4:10px;--radius-pill:999px;
  --notch:14px;

  --border-dark:1px solid rgba(255,255,255,0.09);
  --border-dark-strong:1px solid rgba(255,255,255,0.16);
  --border-teal:1px solid rgba(16,170,190,0.45);

  --shadow-1:0 1px 2px rgba(0,0,0,0.35);
  --shadow-2:0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-3:0 24px 64px -24px rgba(0,0,0,0.7);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,0.05);

  --glow-1:0 0 0 1px rgba(16,170,190,0.5),0 0 24px -4px rgba(16,170,190,0.4);
  --glow-2:0 0 40px -8px rgba(16,170,190,0.55);
  --glow-3:0 0 120px -20px rgba(16,170,190,0.7);
  --focus-ring:0 0 0 2px rgba(43,183,192,0.7);

  --ease-out:cubic-bezier(0.215,0.61,0.355,1);
  --ease-out-strong:cubic-bezier(0.165,0.84,0.44,1);
  --ease-expo:cubic-bezier(0.19,1,0.22,1);
  --ease-in-out:cubic-bezier(0.645,0.045,0.355,1);
  --dur-1:180ms;--dur-2:280ms;--dur-3:440ms;--dur-4:700ms;--stagger:60ms;

  --mesh-line:rgba(16,170,190,0.14);
  --mesh:linear-gradient(var(--mesh-line) 1px,transparent 1px) 0 0/var(--grid-cell) var(--grid-cell),linear-gradient(90deg,var(--mesh-line) 1px,transparent 1px) 0 0/var(--grid-cell) var(--grid-cell);
  --veil-bottom:linear-gradient(to top,rgba(3,3,4,0.95) 0%,rgba(3,3,4,0.7) 40%,rgba(3,3,4,0) 80%);
  --veil-left:linear-gradient(to right,rgba(3,3,4,0.95) 0%,rgba(3,3,4,0.6) 45%,rgba(3,3,4,0) 85%);
  --veil-right:linear-gradient(to left,rgba(3,3,4,0.95) 0%,rgba(3,3,4,0.6) 45%,rgba(3,3,4,0) 85%);
  --veil-flat:rgba(3,3,4,0.62);

  /* Alias semánticos — modo oscuro por defecto */
  --surface-page:var(--ink-950);--surface-1:var(--ink-900);--surface-2:var(--ink-850);
  --surface-card:var(--ink-850);--surface-raised:var(--ink-800);--surface-inset:var(--ink-950);
  --surface-teal:var(--teal-900);--surface-invert:var(--ink-000);

  --text-1:var(--ink-000);--text-2:var(--ink-200);--text-3:var(--ink-300);--text-muted:var(--ink-400);
  --text-accent:var(--teal-300);--text-signal:var(--teal-300);--text-invert:var(--ink-1000);
  --text-link:var(--teal-300);--text-link-hover:var(--teal-300);

  --border-1:rgba(255,255,255,0.09);--border-2:rgba(255,255,255,0.16);--border-accent:rgba(16,170,190,0.45);

  --action-primary-bg:var(--teal-500);--action-primary-bg-hover:var(--teal-400);--action-primary-bg-active:var(--teal-600);
  --action-primary-fg:var(--ink-1000);--action-secondary-bg:transparent;--action-secondary-fg:var(--ink-000);
  --action-ghost-fg:var(--ink-200);--action-disabled-bg:var(--ink-700);--action-disabled-fg:var(--ink-400);

  --status-ok:var(--verde-500);--status-ok-bg:var(--verde-900);
  --status-warn:var(--ambar-500);--status-warn-bg:var(--ambar-900);
  --status-crit:var(--rojo-500);--status-crit-bg:var(--rojo-900);
  --status-info:var(--teal-400);--status-info-bg:var(--teal-900);
}

/* Modo claro del sistema de diseño (documentos/impresos originalmente;
   aquí se usa además para alternar bandas claras/oscuras en el sitio). */
.ret-light{
  --surface-page:var(--ink-000);--surface-1:var(--ink-050);--surface-2:var(--ink-100);
  --surface-card:var(--ink-000);--surface-raised:var(--ink-000);--surface-inset:var(--ink-050);
  --surface-invert:var(--ink-1000);
  --text-1:var(--ink-1000);--text-2:var(--ink-600);--text-3:var(--ink-400);--text-muted:var(--ink-400);
  --text-accent:var(--teal-600);--text-signal:var(--teal-500);--text-invert:var(--ink-000);
  --text-link:var(--teal-600);--text-link-hover:var(--teal-700);
  --border-1:rgba(0,0,0,0.10);--border-2:rgba(0,0,0,0.18);
  --action-primary-fg:var(--ink-000);--action-secondary-fg:var(--ink-1000);--action-ghost-fg:var(--ink-600);
  --action-disabled-bg:var(--ink-100);--action-disabled-fg:var(--ink-300);
  --status-ok-bg:var(--verde-100);--status-warn-bg:#FBEFD3;--status-crit-bg:#FBE0E1;--status-info-bg:var(--teal-100);
}

/* ============ RESET / BASE ============ */
*{box-sizing:border-box}
html{background:var(--surface-page)}
body{margin:0;background:var(--surface-page);color:var(--text-1);font-family:var(--font-text);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
strong{font-weight:var(--weight-bold);color:var(--text-1)}
.contact-link{color:inherit;transition:color var(--dur-1) var(--ease-out)}
.contact-link:hover{color:var(--teal-300)}
::selection{background:rgba(16,170,190,.25)}
button{font:inherit}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-lg);min-width:0}
@media (max-width:720px){.wrap{padding:0 var(--gutter)}}

.eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent)}
.eyebrow.muted{color:var(--text-muted)}
.eyebrow .idx{color:var(--text-muted)}

.spaced-title{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--fs-sm);letter-spacing:.42em;text-transform:uppercase;color:var(--text-accent)}
.spaced-title.sm{font-size:var(--fs-2xs)}
.spaced-title.lg{font-size:var(--fs-lg)}

.h-display{font-family:var(--font-display);font-weight:var(--display-weight);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);text-transform:uppercase;margin:0;color:var(--text-1)}
h1.h-display{font-size:var(--fs-4xl)}
h2.h-display{font-size:var(--fs-2xl);line-height:var(--lh-snug)}
.h-display.xl{font-size:var(--fs-3xl);line-height:var(--lh-snug)}

/* ============ BUTTON ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-text);font-weight:var(--weight-bold);font-size:var(--fs-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:11px 22px;border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;transition:background var(--dur-2) var(--ease-out-strong),color var(--dur-2) var(--ease-out-strong),border-color var(--dur-2) var(--ease-out-strong),transform var(--dur-1) var(--ease-out-strong);}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn.lg{padding:15px 26px;font-size:var(--fs-sm);gap:10px}
.btn{white-space:nowrap}
@media (max-width:380px){.btn.lg{padding:14px 16px;font-size:13px}}
.btn.sm{padding:7px 12px;font-size:var(--fs-2xs);gap:6px}
.btn.full{width:100%;display:flex}
.btn-primary{
  color:var(--ink-000);
  border:2px solid transparent;
  background:
    linear-gradient(var(--ink-950),var(--ink-950)) padding-box,
    linear-gradient(135deg,var(--teal-300) 0%,rgba(43,183,192,0) 65%) border-box;
  transition:box-shadow var(--dur-2) var(--ease-out),filter var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out-strong);
}
.btn-primary:hover{box-shadow:0 0 18px rgba(16,170,190,.5)}
.btn-primary:active{filter:brightness(.82)}
.btn-primary:disabled{background:var(--action-disabled-bg);color:var(--action-disabled-fg);border-color:transparent;box-shadow:none;filter:none}
.btn-secondary{background:transparent;color:var(--action-secondary-fg);border-color:var(--border-2)}
.btn-secondary:hover{border-color:var(--border-accent);background:rgba(16,170,190,.10)}
.btn-ghost{background:transparent;color:var(--action-ghost-fg);border-color:transparent}
.btn-ghost:hover{color:var(--text-1)}
.btn:disabled,.btn[disabled]{cursor:not-allowed;background:var(--action-disabled-bg);color:var(--action-disabled-fg);border-color:var(--border-1)}
.btn-secondary:disabled,.btn-ghost:disabled{background:transparent}

/* ============ CARD ============ */
.card{background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);transition:border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);display:flex;flex-direction:column}
.card .card-body{padding:var(--space-7);flex:1}
.card.pad-0 .card-body{padding:0}
.card.raised{background:var(--surface-raised)}
.card.hoverable{cursor:pointer}
.card.hoverable:hover{border-color:var(--border-accent);transform:translateY(-2px)}
.card.notch{clip-path:polygon(var(--notch) 0,100% 0,100% 100%,0 100%,0 var(--notch))}

/* ============ BADGE ============ */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-1);padding:3px 8px;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1.3;border:1px solid var(--border-1);background:rgba(255,255,255,.06);color:var(--text-2)}
.badge .dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor}
.badge-ok{background:var(--status-ok-bg);color:var(--status-ok);border-color:rgba(53,168,119,.35)}
.badge-warn{background:var(--status-warn-bg);color:var(--status-warn);border-color:rgba(232,163,23,.35)}
.badge-crit{background:var(--status-crit-bg);color:var(--status-crit);border-color:rgba(229,72,77,.4)}
.badge-info{background:var(--status-info-bg);color:var(--teal-300);border-color:rgba(16,170,190,.4)}
.badge-signal{background:rgba(16,170,190,.12);color:var(--teal-300);border-color:rgba(16,170,190,.45)}

/* ============ STAT ============ */
.stat .stat-value{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);color:var(--text-1)}
.stat.sm .stat-value{font-size:var(--fs-xl)}
.stat .stat-label{margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.stat .stat-note{margin-top:var(--space-2);font-size:var(--fs-xs);color:var(--text-muted)}
.stat-band-teal .stat{text-align:center}
.stat-band-teal .stat-value{color:var(--ink-000)}
.stat-band-teal .stat-label{color:var(--ink-000);opacity:.85;font-size:var(--fs-sm)}
.stat-band-teal .stat-note{color:var(--ink-000);opacity:.7;font-size:var(--fs-sm)}

/* ============ DIVIDER ============ */
.divider{border:none;border-top:1px solid var(--border-1);margin:0}
.divider-label{display:flex;align-items:center;gap:var(--space-4)}
.divider-label span:first-child{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.divider-label span:last-child{flex:1;height:1px;background:var(--border-1)}
@media (max-width:400px){.divider-label span:first-child{white-space:normal}}

/* ============ ICON ============ */
[data-lucide]{stroke-width:1.5;display:inline-flex;flex:0 0 auto}
.icon-13{width:13px;height:13px}.icon-15{width:15px;height:15px}.icon-16{width:16px;height:16px}.icon-20{width:20px;height:20px}.icon-28{width:28px;height:28px}.icon-36{width:36px;height:36px}.icon-60{width:60px;height:60px}
.icon-accent{color:var(--teal-400)}

/* ============ IMAGE PANEL ============ */
.image-panel{position:relative;overflow:hidden;background:var(--surface-page)}
.image-panel .image-panel-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.image-panel .image-panel-veil{position:absolute;inset:0}
.image-panel .image-panel-content{position:relative}
.veil-bottom{background-image:var(--veil-bottom)}
.veil-left{background-image:var(--veil-left)}
.veil-right{background-image:var(--veil-right)}
.veil-flat{background:var(--veil-flat)}

/* ============ STATUS DOT ============ */
.status-dot{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-3)}
.status-dot .dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--status-ok)}
.status-dot.live .dot{background:var(--teal-300)}
.status-dot.warn .dot{background:var(--status-warn)}
.status-dot.crit .dot{background:var(--status-crit)}
.status-dot.idle .dot{background:var(--ink-400)}
.status-dot.pulse .dot{box-shadow:0 0 0 3px rgba(255,255,255,.10);animation:pulse-ring 2.2s var(--ease-out) infinite}
.status-dot.pulse.live .dot{box-shadow:0 0 0 3px rgba(16,170,190,.22)}
.status-brand-logo{height:14px;width:auto;flex:0 0 auto}
.status-brand-badge{height:60px;width:auto;flex:0 0 auto}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(16,170,190,.35)}70%{box-shadow:0 0 0 8px rgba(16,170,190,0)}100%{box-shadow:0 0 0 0 rgba(16,170,190,0)}}

/* ============ TOOLTIP ============ */
.tooltip{position:relative;display:inline-flex}
.tooltip .tooltip-bubble{position:absolute;left:0;bottom:calc(100% + 8px);z-index:40;white-space:nowrap;background:var(--ink-800);border:1px solid var(--border-2);border-radius:var(--radius-1);padding:6px 9px;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-2);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease-out)}
.tooltip:hover .tooltip-bubble{opacity:1;visibility:visible}

/* ============ ALERT ============ */
.alert{display:flex;gap:var(--space-4);border-radius:var(--radius-2);padding:var(--space-5);border:1px solid var(--border-1)}
.alert svg{margin-top:1px}
.alert .alert-title{font-family:var(--font-text);font-weight:var(--weight-bold);font-size:var(--fs-sm);color:var(--text-1)}
.alert .alert-body{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-2)}
.alert-info{background:rgba(16,170,190,.08);border-color:rgba(16,170,190,.35);color:var(--teal-300)}
.alert-ok{background:rgba(53,168,119,.08);border-color:rgba(53,168,119,.3);color:var(--status-ok)}
.alert-warn{background:rgba(232,163,23,.08);border-color:rgba(232,163,23,.3);color:var(--status-warn)}
.alert-crit{background:rgba(229,72,77,.08);border-color:rgba(229,72,77,.35);color:var(--status-crit)}

/* ============ COOKIE BANNER ============ */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface-card);border-top:1px solid var(--border-1);box-shadow:var(--shadow-2);transform:translateY(100%);opacity:0;transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-3) var(--ease-out)}
.cookie-banner.is-visible{transform:translateY(0);opacity:1}
.cookie-banner-inner{max-width:1120px;margin:0 auto;padding:var(--space-6) var(--gutter-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap}
.cookie-banner-inner p{margin:0;flex:1 1 320px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-2)}
.cookie-banner-actions{display:flex;gap:var(--space-4);flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.cookie-banner{transition:opacity var(--dur-2) var(--ease-out);transform:none}}

/* ============ FORMS ============ */
.field{display:flex;flex-direction:column;gap:var(--space-3)}
.field label{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.field .hint{font-size:var(--fs-xs);color:var(--text-muted)}
.input,.textarea,.select{width:100%;box-sizing:border-box;background:var(--surface-inset);border:1px solid var(--border-1);border-radius:var(--radius-1);color:var(--text-1);font-family:var(--font-text);font-size:var(--fs-base);padding:10px 12px;outline:none;transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--border-accent);box-shadow:var(--focus-ring)}
.textarea{resize:vertical;line-height:var(--lh-body)}
.select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.select option{background:var(--ink-850)}

.checkbox{display:inline-flex;align-items:center;gap:var(--space-4);cursor:pointer;font-size:var(--fs-base);color:var(--text-2)}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox .box{width:16px;height:16px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-1);border:1px solid var(--border-2);background:transparent;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.checkbox .box svg{width:9px;height:7px;display:none;stroke:var(--ink-1000);stroke-width:2.5}
.checkbox input:checked ~ .box{border-color:var(--teal-500);background:var(--teal-500)}
.checkbox input:checked ~ .box svg{display:block}

/* ============ TABS ============ */
.tabs{display:flex;gap:var(--space-7);border-bottom:1px solid var(--border-1)}
.tabs button{background:none;border:none;cursor:pointer;padding:0 0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--text-3);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;transition:color var(--dur-1) var(--ease-out)}
.tabs button.active{color:var(--text-1);border-bottom-color:var(--teal-500)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ============ DATA TABLE ============ */
.data-table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-family:var(--font-text);font-size:var(--fs-sm)}
.data-table th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border-1);font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.data-table td{text-align:left;padding:12px 14px;color:var(--text-2);border-bottom:1px solid var(--border-1);white-space:nowrap}
.data-table td.mono{font-family:var(--font-mono);font-size:var(--fs-xs)}
.data-table th.right,.data-table td.right{text-align:right}

/* ============ METRIC TILE ============ */
.metric-tile{background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.metric-tile .metric-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.metric-tile .metric-label{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.metric-tile .metric-head svg{color:var(--text-muted)}
.metric-tile .metric-row{display:flex;align-items:baseline;gap:6px}
.metric-tile .metric-value{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--fs-2xl);line-height:1;color:var(--text-1)}
.metric-tile .metric-unit{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}
.metric-tile .metric-delta{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--status-ok)}
.metric-tile .metric-delta.warn{color:var(--status-warn)}
.metric-tile .metric-delta.crit{color:var(--status-crit)}
.metric-tile .metric-footer{font-size:var(--fs-xs);color:var(--text-muted)}

/* ============ PHASE FLOW ============ */
.phase-flow{display:grid;gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:var(--radius-2);overflow:hidden}
.phase-flow.horizontal{grid-template-columns:repeat(4,1fr)}
.phase-flow.vertical{grid-template-columns:1fr}
@media (max-width:820px){.phase-flow.horizontal{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.phase-flow.horizontal{grid-template-columns:1fr}}
.phase{position:relative;background:var(--surface-card);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);cursor:pointer;transition:background var(--dur-2) var(--ease-out)}
.phase.active{background:rgba(16,170,190,.10)}
.phase .phase-top{display:flex;align-items:center;justify-content:space-between}
.phase .phase-idx{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);color:var(--text-muted)}
.phase.active .phase-idx{color:var(--text-signal)}
.phase .phase-top svg{color:var(--text-3)}
.phase.active .phase-top svg{color:var(--teal-300)}
.phase .phase-title{font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--fs-sm);letter-spacing:.01em;text-transform:uppercase;color:var(--text-1)}
.phase .phase-body{font-family:var(--font-text);font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--text-3)}
.phase .phase-meta{margin-top:auto;padding-top:var(--space-4);font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-muted)}
.phase.active .phase-meta{color:var(--teal-300)}
.phase .phase-bar{position:absolute;left:0;top:0;width:0;height:2px;background:var(--teal-300);transition:width var(--dur-4) var(--ease-out)}
.phase.active .phase-bar{width:100%}

/* ============ CARD GRID (bento — IaaS "del agente a la recuperación") ============ */
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
.card-grid>*{min-width:0}
@media (min-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .card-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
  .card-grid .bento-feature-a{grid-column:span 2;grid-row:span 2}
  .card-grid .bento-feature-b{grid-column:1 / span 2;grid-row:2 / span 2}
  .card-grid .bento-wide{grid-column:3 / span 2;grid-row:3}
}
.flow-step{position:relative;min-width:0;min-height:168px;background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);padding:var(--space-5);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);transition:border-color var(--dur-2) var(--ease-out)}
.flow-step:hover{border-color:var(--border-accent)}
.bento-feature-a,.bento-feature-b{min-height:230px}
@media (min-width:1024px){.bento-feature-a,.bento-feature-b{min-height:100%}}
.flow-step-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.flow-step-head svg{color:var(--teal-400);flex:0 0 auto}
.flow-step-tag{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.flow-step-body{display:flex;flex-direction:column;gap:var(--space-2)}
.flow-step-title{margin:0;font-family:var(--font-display);font-weight:var(--display-weight);text-transform:uppercase;letter-spacing:var(--tracking-display);font-size:var(--fs-lg);color:var(--text-1);overflow-wrap:normal;hyphens:none}
.bento-feature-a .flow-step-title,.bento-feature-b .flow-step-title{font-size:clamp(18px,6vw,32px)}
.flow-step-desc{margin:0;font-family:var(--font-text);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-3)}
.bento-feature-a .flow-step-desc,.bento-feature-b .flow-step-desc{font-size:var(--fs-md);max-width:32em}
.flow-step-meta{margin-top:var(--space-2);font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-muted)}

/* ============ HEADER / FOOTER ============ */
main{padding-top:var(--header-h)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;background:linear-gradient(to bottom,rgba(3,3,4,.8) 0%,rgba(3,3,4,.45) 65%,rgba(3,3,4,0) 100%);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent;transition:background var(--dur-4) var(--ease-out),border-color var(--dur-4) var(--ease-out),backdrop-filter var(--dur-4) var(--ease-out)}
.site-header.scrolled{background:rgba(3,3,4,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom-color:var(--border-1)}
.site-header .wrap{height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:var(--space-7)}
.site-header .brand{grid-column:2;display:flex;align-items:center;justify-self:center}
.site-header .brand img{height:35px;width:auto}
.site-header-right{grid-column:3;display:flex;align-items:center;gap:var(--space-7);justify-self:end}
.site-nav{grid-column:1;display:flex;gap:var(--space-7);justify-self:start}
.site-nav a{padding:4px 0;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);border-bottom:1px solid transparent}
.site-nav a.active{color:var(--text-1);border-bottom-color:var(--teal-500)}
.site-header .phone{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--teal-400);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-2);transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out-strong)}
.site-header .phone svg{color:inherit}
.site-header .phone:hover{color:var(--ink-000);border-color:var(--border-accent)}
.site-header .phone:active{transform:scale(.97)}
@media (max-width:999px){.site-header .phone[href^="tel:"]{display:none}}
.nav-toggle{display:none}

/* ============ NAV DROPDOWN (Portafolio) ============ */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{display:block;background:none;border:none;cursor:pointer;padding:4px 0;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);border-bottom:1px solid transparent;transition:color var(--dur-1) var(--ease-out)}
.nav-dropdown.open .nav-dropdown-trigger,.nav-dropdown:hover .nav-dropdown-trigger,.nav-dropdown-trigger:focus{color:var(--text-1)}
.nav-dropdown-panel{position:absolute;top:calc(100% + 14px);left:0;min-width:190px;background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);box-shadow:var(--shadow-2);padding:var(--space-3);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),visibility var(--dur-1)}
.nav-dropdown.open .nav-dropdown-panel,.nav-dropdown:hover .nav-dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-panel a{padding:8px 10px;border-radius:var(--radius-1);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.nav-dropdown-panel a:hover{background:rgba(16,170,190,.08);color:var(--text-1)}
.nav-dropdown-panel a.active{color:var(--teal-300)}

@media (max-width:900px){
  .site-nav,.site-header .phone{display:none}
  .site-header .wrap{grid-template-columns:auto 1fr;gap:var(--space-5)}
  .site-header .brand{grid-column:1;justify-self:start}
  .site-header-right{grid-column:2}
  .site-header .btn.sm{display:none}
}

/* ============ STAGGERED MENU (mobile nav) ============ */
.nav-toggle.sm-toggle{display:none;align-items:center;gap:.55rem;background:none;border:1px solid var(--border-2);border-radius:var(--radius-pill);color:var(--text-1);padding:8px 14px;cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1;transition:border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out-strong)}
.nav-toggle.sm-toggle:hover{border-color:var(--border-accent)}
.nav-toggle.sm-toggle:active{transform:scale(.95)}
@media (max-width:900px){.nav-toggle.sm-toggle{display:inline-flex}}
.sm-toggle:focus-visible{outline:2px solid var(--teal-400);outline-offset:3px}
.sm-toggle-textWrap{position:relative;display:inline-block;height:1em;overflow:hidden;white-space:nowrap}
.sm-toggle-textInner{display:flex;flex-direction:column;line-height:1}
.sm-toggle-line{display:block;height:1em;line-height:1}
.sm-icon{position:relative;width:12px;height:12px;flex:0 0 12px;display:inline-flex;align-items:center;justify-content:center}
.sm-icon-line{position:absolute;left:50%;top:50%;width:100%;height:1.5px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}

.staggered-menu-wrapper{position:fixed;inset:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:60}
.sm-prelayers{position:fixed;top:0;right:0;bottom:0;width:100%;pointer-events:none;z-index:61}
[data-position='left'] .sm-prelayers{right:auto;left:0}
.sm-prelayer{position:absolute;top:0;right:0;height:100%;width:100%}
.staggered-menu-panel{position:fixed;top:0;right:0;bottom:0;width:100%;background:var(--ink-000);display:flex;flex-direction:column;padding:calc(var(--header-h) + var(--space-6)) var(--gutter-lg) var(--space-8);overflow-y:auto;z-index:62;pointer-events:auto}
[data-position='left'] .staggered-menu-panel{right:auto;left:0}
.sm-panel-inner{flex:1;display:flex;flex-direction:column;gap:var(--space-8)}
.sm-panel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sm-panel-itemWrap{position:relative;overflow:hidden;line-height:1;border-bottom:1px solid var(--ink-100)}
.sm-panel-item{position:relative;display:block;padding:var(--space-4) 2.2em var(--space-4) 0;text-decoration:none}
.sm-panel-itemLabel{display:inline-block;max-width:100%;overflow-wrap:normal;word-break:keep-all;hyphens:none;will-change:transform;transform-origin:50% 100%;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(18px,6vw,32px);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--ink-950)}
.sm-panel-item:hover .sm-panel-itemLabel{color:var(--sm-accent,var(--teal-600))}
.sm-panel-list[data-numbering]{counter-reset:smItem}
.sm-panel-list[data-numbering] .sm-panel-item::after{counter-increment:smItem;content:counter(smItem,decimal-leading-zero);position:absolute;top:1.1em;right:0;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--sm-accent,var(--teal-600));opacity:var(--sm-num-opacity,0)}
.sm-panel-item--parent{width:100%;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.sm-panel-caret{display:inline-block;width:.34em;height:.34em;margin-left:.32em;vertical-align:.28em;border-right:.085em solid currentColor;border-bottom:.085em solid currentColor;color:var(--sm-accent,var(--teal-600));transform:rotate(45deg);transform-origin:50% 50%;transition:transform var(--dur-1) var(--ease-out)}
.sm-panel-item--parent[aria-expanded='true'] .sm-panel-caret{transform:rotate(-135deg)}
.sm-panel-sublist{list-style:none;margin:0;padding:0 0 var(--space-4);overflow:hidden;display:flex;flex-direction:column;gap:2px}
.sm-panel-sublist[hidden]{display:none}
.sm-panel-subitemWrap{line-height:1}
.sm-panel-subitem{display:block;padding:var(--space-3) 0 var(--space-3) var(--space-5);text-decoration:none;font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-500);border-left:1px solid var(--ink-100);transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.sm-panel-subitem:hover{color:var(--ink-950);border-left-color:var(--sm-accent,var(--teal-600))}
.sm-panel-subitem.is-active{color:var(--sm-accent,var(--teal-600));border-left-color:var(--sm-accent,var(--teal-600))}
.sm-socials{margin-top:auto;padding-top:var(--space-6);border-top:1px solid var(--ink-100);display:flex;flex-direction:column;gap:var(--space-4)}
.sm-socials-title{margin:0;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--ink-500)}
.sm-socials-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:var(--space-6);flex-wrap:wrap}
.sm-socials-link{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-950);text-decoration:none;letter-spacing:var(--tracking-label);text-transform:uppercase;transition:color var(--dur-1) var(--ease-out)}
.sm-socials-link:hover{color:var(--sm-accent,var(--teal-600))}
@media (max-width:480px){.staggered-menu-panel{padding-left:var(--gutter);padding-right:var(--gutter)}}
@media (min-width:901px){.staggered-menu-wrapper,.sm-prelayers,.staggered-menu-panel{display:none}}

.site-footer{border-top:1px solid var(--border-1);background:var(--surface-1)}
.site-footer .wrap{padding:var(--space-11) var(--gutter-lg) var(--space-8)}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--space-9)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-about img{height:26px;width:auto}
.footer-about p{margin-top:var(--space-5);max-width:300px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-3)}
.footer-social{display:flex;gap:var(--space-5);margin-top:var(--space-6)}
.footer-social a{color:var(--text-3)}
.footer-social a:hover{color:var(--teal-300)}
.footer-col{display:flex;flex-direction:column;gap:var(--space-4)}
.footer-col .col-title{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.footer-col a{font-size:var(--fs-sm);color:var(--text-3)}
.footer-fabricantes{display:flex;flex-wrap:wrap;gap:6px 10px}
.footer-fabricantes a{font-size:var(--fs-xs)}

/* ============ LOGO LOOP (carrusel infinito de fabricantes) ============ */
/* El número de copias de .logo-loop-seq se calcula en script.js según el
   ancho de pantalla, para que siempre haya suficientes para cubrirlo sin
   que se note el corte (con solo 2 copias fijas, en pantallas anchas el set
   es más angosto que el viewport y se ve el final). */
.logo-loop{position:relative;overflow:hidden;width:100%;margin:var(--space-9) 0;padding:var(--space-4) 0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%)}
.logo-loop-track{display:flex;align-items:center;width:max-content;gap:var(--space-12);animation:logo-loop-scroll linear infinite}
@media (hover:hover){.logo-loop:hover .logo-loop-track{animation-play-state:paused}}
.logo-loop-seq{display:flex;align-items:center;gap:var(--space-12);flex:0 0 auto}
.logo-loop-track img{width:auto;flex:0 0 auto;filter:brightness(0) invert(1);opacity:.7;transition:opacity var(--dur-2) var(--ease-out)}
.logo-loop-track img:hover{opacity:1}
.logo-loop-track img.logo-color{filter:none;opacity:1}
.ret-light .logo-loop-track img{filter:brightness(0);opacity:.6}
.ret-light .logo-loop-track img.logo-color{filter:none;opacity:1}
/* Cada SVG trae un relleno interno distinto entre su viewBox y el trazo real
   (medido con getBBox): a igual alto de caja, el alto de letra visible no es
   el mismo. Se compensa por logo para que el peso visual quede parejo. */
.logo-loop-track img.logo-eset{height:26px}
.logo-loop-track img.logo-fortinet{height:24px}
.logo-loop-track img.logo-sophos{height:24px}
.logo-loop-track img.logo-acronis{height:37px}
.logo-loop-track img.logo-microsoft{height:22px}
.logo-loop-track img.logo-stellarcyber{height:26px}
.logo-loop-track img.logo-safetica{height:24px}
.logo-loop-track img.logo-trendmicro{height:24px}
.logo-loop-track img.logo-lumu{height:24px}
.logo-loop-track img.logo-google{height:24px}
@keyframes logo-loop-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--seq-width, 0px)))}}

/* ============ LOGO GRID (Aliados — cuadrícula estática con hover) ============ */
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5)}
.logo-grid-item{display:flex;align-items:center;justify-content:center;height:120px;background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.logo-grid-item:hover{border-color:var(--border-accent);box-shadow:0 8px 24px rgba(9,24,29,.08)}
.logo-grid-item img{width:auto;max-width:70%;transition:transform var(--dur-2) var(--ease-out)}
.logo-grid-item:hover img{transform:scale(1.12)}
.logo-grid-item img.logo-eset{height:30px}
.logo-grid-item img.logo-fortinet{height:28px}
.logo-grid-item img.logo-sophos{height:28px}
.logo-grid-item img.logo-acronis{height:42px}
.logo-grid-item img.logo-microsoft{height:26px}
.logo-grid-item img.logo-stellarcyber{height:30px}
.logo-grid-item img.logo-safetica{height:28px}
.logo-grid-item img.logo-trendmicro{height:28px}
.logo-grid-item img.logo-lumu{height:28px}
.logo-grid-item img.logo-google{height:28px}
@media (max-width:900px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.logo-grid{grid-template-columns:repeat(2,1fr)}.logo-grid-item{height:96px}}
@media (prefers-reduced-motion:reduce){.logo-loop-track{animation:none!important}}
.footer-bottom{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-muted);flex-wrap:wrap;gap:var(--space-3)}

/* ============ STEPS LIST (IaaS) ============ */
.steps-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:900px){.steps-list{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps-list{grid-template-columns:1fr}}
.step-card{position:relative;overflow:hidden;background:var(--surface-card);border:1px solid var(--border-1);border-radius:var(--radius-2);padding:var(--space-7);display:flex;flex-direction:column}
.step-card .step-idx{position:absolute;top:-.12em;right:var(--space-5);font-family:var(--font-display);font-weight:var(--display-weight);font-size:96px;line-height:1;color:var(--text-1);opacity:.05;letter-spacing:0;z-index:0;pointer-events:none}
.step-head{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-4)}
.step-head svg{color:var(--teal-400);flex:0 0 auto}
.step-title{margin:0;min-width:0;overflow-wrap:normal;hyphens:none;font-family:var(--font-display);font-weight:var(--display-weight);font-size:clamp(14px,4.8vw,var(--fs-md));text-transform:uppercase;color:var(--text-1)}
.step-body{position:relative;z-index:1;margin:var(--space-4) 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-3)}
.tag-list{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-4)}

/* ============ FEATURE LIST ============ */
.feature-list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.feature-list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-2)}
.feature-list svg{margin-top:2px;color:var(--teal-400);flex:0 0 auto}

/* ============ LAYOUT HELPERS ============ */
.section{padding-top:var(--section-y);padding-bottom:var(--space-11)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}

/* ============ SLA HERO (sección "Lo que firmamos" a pantalla completa) ============ */
.sla-hero{min-height:100vh;display:flex;align-items:center}
.sla-hero .wrap{width:100%;padding-top:var(--space-11);padding-bottom:var(--space-11)}
.sla-hero .card{background:none;border:none;box-shadow:none}
.sla-hero .data-table-wrap{overflow:visible}
.sla-hero .data-table{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:10px;width:100%;border-collapse:separate}
.sla-hero .data-table thead,.sla-hero .data-table tbody,.sla-hero .data-table tr{display:contents}
.sla-hero .data-table th{background:none;border:none;padding:0 4px 16px;font-family:var(--font-text);font-size:var(--fs-sm);font-weight:var(--weight-bold);color:var(--text-1);text-transform:none;letter-spacing:0;white-space:normal}
.sla-hero .data-table th:first-child{text-align:left}
.sla-hero .data-table th,.sla-hero .data-table td{min-width:0}
.sla-hero .data-table td{border:none;padding:24px 22px;font-size:var(--fs-md);border-radius:var(--radius-3)}
.sla-hero .data-table td:first-child{background:none;padding-left:4px;font-family:var(--font-text);font-weight:var(--weight-bold);color:var(--text-1);text-align:left}
.sla-hero .data-table td:not(:first-child){background:var(--surface-card);box-shadow:0 1px 2px rgba(9,24,29,.06)}
.sla-hero .data-table td.mono{font-size:var(--fs-base)}
.sla-hero .data-table tr{transition:background var(--dur-2) var(--ease-out)}
.sla-hero .data-table tr td{transition:background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.sla-hero .data-table tr.sev-critica:hover td:not(:first-child){background:rgba(229,72,77,.14);box-shadow:0 1px 2px rgba(9,24,29,.06),inset 0 0 0 1px rgba(229,72,77,.35)}
.sla-hero .data-table tr.sev-alta:hover td:not(:first-child){background:rgba(242,140,43,.18);box-shadow:0 1px 2px rgba(9,24,29,.06),inset 0 0 0 1px rgba(242,140,43,.4)}
.sla-hero .data-table tr.sev-media:hover td:not(:first-child){background:rgba(255,209,10,.22);box-shadow:0 1px 2px rgba(9,24,29,.06),inset 0 0 0 1px rgba(255,209,10,.5)}
.sla-hero .data-table tr.sev-baja:hover td:not(:first-child){background:rgba(53,168,119,.14);box-shadow:0 1px 2px rgba(9,24,29,.06),inset 0 0 0 1px rgba(53,168,119,.35)}
@media (min-width:641px){.sla-grid{grid-template-columns:1fr 1.3fr}}
@media (max-width:640px){.sla-hero{min-height:0}.sla-hero .data-table{grid-template-columns:1fr}}

/* ============ STEPPER (SLA "Lo que firmamos", solo mobile) ============ */
/* ponytail: el stepper reemplaza la tabla en todos los anchos; las reglas
   .sla-hero .data-table quedan hasta que el cliente apruebe el cambio en PC. */
.sla-hero .data-table-wrap{display:none}
.stepper-indicators{display:flex;align-items:center;padding:0 0 var(--space-6)}
.stepper-dot{--stepper-accent:var(--teal-500);flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink-150);background:var(--ink-000);color:var(--ink-400);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--weight-bold);transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.stepper-dot-inner{display:block;line-height:1}
.stepper-dot.is-active{border-color:var(--stepper-accent);background:var(--stepper-accent);color:var(--ink-000);transform:scale(1.08)}
.stepper-dot.is-complete{border-color:var(--stepper-accent);background:var(--ink-000);color:var(--stepper-accent)}
.stepper-connector{flex:1;height:2px;margin:0 6px;background:var(--ink-150);border-radius:2px;overflow:hidden}
.stepper-connector-fill{display:block;height:100%;width:0;background:var(--teal-500);transition:width var(--dur-3) var(--ease-out)}
.stepper-viewport{position:relative;overflow:hidden;min-height:220px}
.stepper-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transition:transform .38s cubic-bezier(.22,.68,.36,1),opacity .38s ease}
.stepper-slide.is-current{position:relative;opacity:1;transform:translateX(0)}
.stepper-slide-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:var(--display-weight);font-size:var(--fs-xl);text-transform:uppercase;color:var(--ink-950)}
.stepper-slide-badge::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--stepper-accent,var(--teal-500))}
.stepper-slide-rows{margin:var(--space-6) 0 0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-5)}
.stepper-slide-rows dt{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-400)}
.stepper-slide-rows dd{margin:0;font-family:var(--font-mono);font-size:var(--fs-md);font-weight:var(--weight-bold);color:var(--ink-950);text-align:right}
.stepper-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--ink-100)}
.stepper-nav-btn{background:none;border:1px solid var(--ink-150);border-radius:var(--radius-pill);padding:10px 20px;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-950);cursor:pointer;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.stepper-nav-btn:hover{border-color:var(--teal-500);color:var(--teal-600)}
.stepper-nav-btn.stepper-next{margin-left:auto;background:var(--ink-950);border-color:var(--ink-950);color:var(--ink-000)}
.stepper-nav-btn.stepper-next:hover{background:var(--teal-600);border-color:var(--teal-600);color:var(--ink-000)}
.stepper-nav-btn[hidden]{visibility:hidden}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ============ FEATURE SPLIT (nav angosto + panel grande) ============ */
.feature-split{display:grid;grid-template-columns:220px 1fr;gap:var(--space-9);align-items:start}
.feature-split-nav{display:flex;flex-direction:column;gap:var(--space-2);position:sticky;top:calc(var(--header-h) + var(--space-6))}
.feature-split-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-2);border:1px solid transparent;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--fs-sm);color:var(--text-2);transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.feature-split-item:hover{background:rgba(16,170,190,.08);border-color:var(--border-accent);color:var(--text-1)}
.feature-split-detail{padding:var(--space-7) 0;border-top:1px solid var(--border-1)}
.feature-split-detail:first-child{padding-top:0;border-top:none}
.feature-split-detail h3{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--fs-md);color:var(--text-1);margin:0 0 var(--space-3)}
.feature-split-detail p{margin:0;max-width:560px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-3)}
@media (max-width:900px){.feature-split{grid-template-columns:1fr}.feature-split-nav{flex-direction:row;flex-wrap:wrap;position:static}.feature-split-item{flex:1 1 auto;justify-content:center;text-align:center}}
@media (max-width:640px){.feature-split-nav{flex-direction:column}.feature-split-item{justify-content:flex-start;text-align:left}}

/* ============ ALLY HERO ============ */
.ally-hero-stats{display:flex;gap:var(--space-9);justify-content:center;margin-top:var(--space-9)}
.ally-hero-stats .stat{text-align:center}
@media (max-width:640px){.ally-hero-stats{gap:var(--space-7)}}

/* ============ FEATURE TRIO ============ */
.feature-trio{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-9)}
.feature-trio-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}

/* ============ ALLY CREDENTIAL ============ */
.ally-credential{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.ally-credential-avatars{display:flex}
.ally-avatar{width:192px;height:192px;border-radius:50%;object-fit:cover;border:3px solid var(--surface-page);margin-left:-44px;background:var(--surface-2)}
.ally-avatar:first-child{margin-left:0}
@media (max-width:640px){.ally-avatar{width:120px;height:120px;margin-left:-28px}}
.ally-credential-caption{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}

/* ============ PARTNER BADGES ============ */
.partner-badges{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--space-8);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 2px}
.partner-badges::-webkit-scrollbar{display:none}
.partner-badges img{display:block;height:48px;width:auto;flex:0 0 auto}
@media (max-width:640px){.partner-badges{flex-wrap:wrap;justify-content:center;overflow:visible;gap:var(--space-5) var(--space-6)}.partner-badges img{height:40px}}

/* ============ SHINE SWEEP (destello periódico sobre badges/logos) ============ */
.shine-badge{position:relative;display:inline-flex;overflow:hidden;line-height:0;flex:0 0 auto}
.shine-badge::after{content:'';position:absolute;inset:0;background:linear-gradient(75deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);background-size:220% 100%;background-position:-60% 0;mix-blend-mode:overlay;animation:shine-sweep 3.6s ease-in-out infinite;pointer-events:none}
.shine-badge:nth-child(2)::after{animation-delay:.3s}
.shine-badge:nth-child(3)::after{animation-delay:.6s}
.shine-badge:nth-child(4)::after{animation-delay:.9s}
@keyframes shine-sweep{0%,12%{background-position:-60% 0}70%,100%{background-position:160% 0}}
@media (prefers-reduced-motion:reduce){.shine-badge::after{animation:none;display:none}}

/* ============ FOLD TEXT (títulos display, entrada al hacer scroll) ============ */
.fold-text-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}
.fold-text-visual{display:inline}
.h-display .fold-text-word{display:inline-block;white-space:nowrap;overflow-wrap:anywhere;max-width:100%}
.h-display .fold-text-segment{display:inline-block;line-height:inherit;perspective:600px;transform-style:preserve-3d;vertical-align:baseline}
.h-display .fold-text-piece{position:relative;display:inline-block;color:inherit;line-height:inherit;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.h-display .fold-text-piece{transform:none!important}}

/* ============ STROKE TEXT (título del hero de Inicio) ============ */
.stroke-text{display:block;width:100%;line-height:0}
.stroke-text--hover{cursor:pointer}
.stroke-text__svg{display:block;width:100%;height:auto;aspect-ratio:var(--stroke-text-ratio, 6.5 / 1);overflow:visible}
.stroke-text__stroke,.stroke-text__fill{user-select:none}
.hero-title-stroke{display:flex;flex-direction:column;width:100%;align-self:stretch}
.hero-title-stroke .stroke-text{margin-top:-8px}
.hero-title-stroke .stroke-text:first-child{margin-top:0}
@media (max-width:640px){
  .hero-title-stroke .stroke-text{margin-top:-8px;padding:0 var(--space-4)}
}

/* ============ MAGIC BENTO (glow interactivo — sección IaaS) ============ */
.magic-bento-card{position:relative;--glow-x:50%;--glow-y:50%;--glow-intensity:0;--glow-radius:200px;--glow-color:16,170,190;overflow:hidden}
.magic-bento-card::after{content:'';position:absolute;inset:0;padding:2px;background:radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),rgba(var(--glow-color),calc(var(--glow-intensity)*.9)) 0%,rgba(var(--glow-color),calc(var(--glow-intensity)*.45)) 30%,transparent 60%);border-radius:inherit;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:2;transition:opacity var(--dur-2) var(--ease-out)}
.bento-particle{position:absolute;width:4px;height:4px;border-radius:var(--radius-pill);pointer-events:none;z-index:3}
.bento-ripple{position:absolute;border-radius:var(--radius-pill);pointer-events:none;z-index:3}
.global-spotlight{position:fixed;border-radius:var(--radius-pill);pointer-events:none;z-index:200;opacity:0;transform:translate(-50%,-50%);mix-blend-mode:screen}

/* ============ RET WAVE (fondo de puntos animado, canvas 2D) ============ */
.ret-wave{position:relative;width:100%;background:#000;overflow:hidden;isolation:isolate}
.ret-wave__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.ret-wave__content{position:relative;z-index:1}
.hero-figure{position:absolute;right:29%;top:0;height:100%;width:auto;max-width:42%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to left,#000 70%,transparent 100%);mask-image:linear-gradient(to left,#000 70%,transparent 100%)}
@media (max-width:900px){.hero-figure{display:none}}

/* ============ RET ORB (esfera de puntos deformada, canvas 2D) ============ */
.ret-orb{position:relative;width:100%;background:#000;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.ret-orb__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.ret-orb__content{position:relative;z-index:1;flex:1;display:flex;align-items:center}
.ret-orb__content>.wrap{width:100%}

/* ============ RET DATACENTER HOLOGRAM (racks de puntos, canvas 2D) ============ */
.ret-dc{position:relative;width:100%;min-height:clamp(520px,84vh,920px);background:#000;overflow:hidden;isolation:isolate}
.ret-dc__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.ret-dc__fade{position:absolute;left:0;right:0;bottom:0;height:min(220px,32%);background:linear-gradient(to bottom,transparent,#000 92%);z-index:0;pointer-events:none}
.ret-dc__content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column}

/* ============ SERVICE SHOWCASE (título + racks flanqueados por servicios) ============ */
.service-showcase-head{text-align:center;padding-top:var(--space-11)}
.service-showcase-head p{margin:var(--space-4) auto 0;max-width:520px;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text-2)}
.service-showcase-grid{flex:1;display:grid;grid-template-columns:1fr minmax(280px,420px) 1fr;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--gutter-lg) var(--space-11)}
.service-showcase-col{display:flex;flex-direction:column;gap:var(--space-9)}
.service-showcase-col.col-right{align-items:flex-end;text-align:right}
.service-showcase-item h3{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-3);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--fs-lg);text-transform:uppercase;letter-spacing:var(--tracking-display);color:var(--text-1)}
.service-showcase-col.col-right .service-showcase-item h3{flex-direction:row-reverse}
.service-showcase-item p{margin:0 0 var(--space-3);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-3);max-width:280px}
.service-showcase-item ul{margin:0;padding:0;list-style:none;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);display:flex;flex-direction:column;gap:6px}
@media (max-width:900px){
  .service-showcase-grid{grid-template-columns:1fr;text-align:center;padding-bottom:var(--space-9)}
  .service-showcase-col,.service-showcase-col.col-right{align-items:center;text-align:center}
  .service-showcase-col.col-right .service-showcase-item h3{flex-direction:row}
  .service-showcase-item p{max-width:420px;margin-left:auto;margin-right:auto}
}

/* ============ PRELOADER (logo con barrido teal, adaptado de un loader
   de Uiverse.io por dexter-st: se cambian las letras por el logo RET
   enmascarado, y el arcoíris por tonos de la rampa teal) ============ */
.site-preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--ink-950);transition:opacity .5s var(--ease-out),visibility .5s}
.site-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-logo{position:relative;width:180px;height:70px}
.preloader-logo-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.2}
.preloader-logo-shimmer{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:url('assets/logo-ret-blanco.png');mask-image:url('assets/logo-ret-blanco.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.preloader-logo-shimmer::after{
  content:'';position:absolute;inset:-60%;
  background-image:
    radial-gradient(circle at 50% 50%,#FDFDFC 0%,transparent 50%),
    radial-gradient(circle at 45% 45%,#74D2DC 0%,transparent 45%),
    radial-gradient(circle at 55% 55%,#2BB7C0 0%,transparent 45%),
    radial-gradient(circle at 45% 55%,#10AABE 0%,transparent 45%),
    radial-gradient(circle at 55% 45%,#0C8998 0%,transparent 45%);
  animation:preloader-sweep 1.7s infinite alternate cubic-bezier(.6,.8,.5,1),preloader-fade 1.7s infinite;
}
@keyframes preloader-sweep{0%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
@keyframes preloader-fade{0%,100%{opacity:0}20%{opacity:1}65%{opacity:0}}
@media (prefers-reduced-motion:reduce){.preloader-logo-shimmer::after{animation:none;opacity:.5}}

/* ============ LOGO SHIMMER (mismo brillo del preloader, al hacer hover
   sobre el logo del header/footer) ============ */
.logo-shimmer{position:relative;display:inline-flex}
.logo-shimmer-base{display:block}
.logo-shimmer-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity var(--dur-2) var(--ease-out);-webkit-mask-image:url('assets/logo-ret-blanco.png');mask-image:url('assets/logo-ret-blanco.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.logo-shimmer-fx::after{
  content:'';position:absolute;inset:-60%;
  background-image:
    radial-gradient(circle at 50% 50%,#FDFDFC 0%,transparent 50%),
    radial-gradient(circle at 45% 45%,#74D2DC 0%,transparent 45%),
    radial-gradient(circle at 55% 55%,#2BB7C0 0%,transparent 45%),
    radial-gradient(circle at 45% 55%,#10AABE 0%,transparent 45%),
    radial-gradient(circle at 55% 45%,#0C8998 0%,transparent 45%);
}
.logo-shimmer:hover .logo-shimmer-fx,.logo-shimmer:focus-visible .logo-shimmer-fx{opacity:1}
.logo-shimmer:hover .logo-shimmer-fx::after,.logo-shimmer:focus-visible .logo-shimmer-fx::after{animation:preloader-sweep 1.1s infinite alternate cubic-bezier(.6,.8,.5,1),preloader-fade 1.1s infinite}
@media (prefers-reduced-motion:reduce){.logo-shimmer:hover .logo-shimmer-fx{opacity:.5}.logo-shimmer:hover .logo-shimmer-fx::after{animation:none}}

/* ============ SPECULAR BUTTON (halo que sigue el cursor) ============ */
.btn{position:relative}
.specular-fx{position:absolute;inset:-20px;pointer-events:none;z-index:1;overflow:visible}
.specular-fx canvas{display:block;width:100%;height:100%}
.specular-label-wrap{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px}

/* ============ HERO CENTRADO + COLOR BENDS ============ */
.hero-colorbends{position:relative;display:flex;flex-direction:column}
.hero-colorbends .image-panel-content{position:absolute;top:var(--header-h);left:0;right:0;bottom:0;display:flex;align-items:center}
.hero-colorbends .image-panel-content>.wrap{width:100%}
.hero-colorbends .image-panel-bg{background:var(--surface-page)}
.hero-colorbends .veil-radial{background:radial-gradient(ellipse 60% 70% at 50% 55%,rgba(3,3,4,.88) 0%,rgba(3,3,4,.6) 45%,rgba(3,3,4,.18) 72%,rgba(3,3,4,0) 100%)}
.color-bends-container{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.color-bends-container canvas{width:100%!important;height:100%!important}
.hero-center{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-center .btn-row{display:flex;gap:var(--space-4);margin-top:var(--space-8);flex-wrap:wrap;justify-content:center}
.hero-center .status-row{display:flex;gap:var(--space-7);margin-top:var(--space-8);flex-wrap:wrap;justify-content:center}

/* ============ WHATSAPP (flotante; aparece al pasar el primer hero) ============ */
.wa{position:fixed;right:20px;bottom:20px;z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:var(--font-text);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.wa.is-shown{opacity:1;transform:none}
/* espera a que se responda el banner de cookies para no quedar debajo de él */
body:has(.cookie-banner.is-visible) .wa{opacity:0;transform:translateY(16px)}
body:has(.cookie-banner.is-visible) .wa *{pointer-events:none!important}
.wa.is-shown .wa-fab{pointer-events:auto}
.wa-card{width:min(300px,calc(100vw - 40px));background:#fff;color:#111b21;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden;transform-origin:bottom right;opacity:0;transform:scale(.92) translateY(8px);visibility:hidden;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
.wa.is-open .wa-card{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.wa-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:#075E54;color:#fff}
.wa-avatar{width:38px;height:38px;border-radius:50%;background:#0b0b0c;display:grid;place-items:center;flex:0 0 auto}
.wa-avatar img{width:26px;height:auto}
.wa-title{display:block;font-weight:var(--weight-bold);font-size:15px;line-height:1.2}
.wa-sub{display:block;font-size:12px;opacity:.8}
.wa-close{margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;padding:6px;border-radius:50%;opacity:.85;display:grid}
.wa-close:hover{opacity:1;background:rgba(255,255,255,.12)}
.wa-body{padding:16px;background:#efeae2;display:flex;flex-direction:column;gap:14px}
.wa-bubble{margin:0;align-self:flex-start;max-width:92%;background:#fff;border-radius:0 10px 10px 10px;padding:10px 12px;font-size:14px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa-cta{display:flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:var(--radius-pill);background:#25D366;color:#fff;font-weight:var(--weight-bold);font-size:14px;text-decoration:none}
.wa-cta:hover{background:#1ebe5a;color:#fff}
.wa-fab{width:58px;height:58px;border-radius:50%;border:0;background:#25D366;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none;transition:transform var(--dur-1) var(--ease-out)}
.wa-fab:hover{transform:scale(1.06)}
.wa-fab:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.wa,.wa-card{transition:none}}