/*
Theme Name: SOS Archivos SAS
Theme URI: https://sosarchivos.com.co/
Author: SOS ARCHIVOS SAS
Description: Tema de bloques a la medida de SOS ARCHIVOS SAS, empresa colombiana de gestión documental. Diseño minimalista y corporativo con los colores del logo. Todo el contenido se edita desde Apariencia y Editor, sin tocar código.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sos-archivos
Tags: business, portfolio, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, wide-blocks
*/

/* ============================================================
   CAPA DE CONVIVENCIA CON LOS BLOQUES DE WORDPRESS
   WordPress mete sus propios márgenes y contenedores. Aquí se
   neutralizan para que el diseño se comporte igual que en la
   versión original, que ya estaba medida y probada.
   ============================================================ */

:where(.wp-site-blocks) > :where(*){margin-block-start:0;margin-block-end:0}
:where(.wp-block-group,.wp-block-columns,.wp-block-column){margin:0}
:where(.wp-block-heading){margin:0}
:where(.wp-site-blocks) :where(p,ul,ol,figure){margin:0}
:where(.wp-block-list){padding:0;list-style:none}
.alignfull{width:100%;max-width:none;margin-inline:0}
:where(.wp-block-html){display:contents}

/* La barra de administración de WordPress empuja la página hacia abajo */
.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){.admin-bar .hdr{top:46px}}

/* Los botones del editor toman el aspecto de los botones del diseño */
.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--accent);color:#fff;box-shadow:0 6px 20px -8px rgba(225,1,1,.55);
  transition:transform .28s var(--ease),background-color .28s var(--ease),
             border-color .28s var(--ease),box-shadow .28s var(--ease),color .28s var(--ease);
}
.wp-block-button__link:hover{transform:translateY(-2px);background:var(--accent-hover);color:#fff}
.wp-block-button.btn--lg .wp-block-button__link{padding:17px 28px;font-size:16px}
.wp-block-button.btn--sm .wp-block-button__link{padding:10px 16px;font-size:14px}
.wp-block-button.btn--ghost .wp-block-button__link{
  background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.wp-block-button.btn--ghost .wp-block-button__link:hover{
  color:var(--brand);border-color:var(--brand);background:var(--brand-tint)}
.wp-block-button.btn--out .wp-block-button__link{
  background:var(--panel);color:var(--brand);border-color:var(--line-strong);box-shadow:none}
.wp-block-button.btn--out .wp-block-button__link:hover{
  color:#fff;background:var(--brand);border-color:var(--brand)}
.wp-block-button.btn--full,.wp-block-button.btn--full .wp-block-button__link{width:100%}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.sec--night .wp-block-button.btn--ghost .wp-block-button__link{
  color:var(--on-night);border-color:rgba(159,182,210,.45)}
@media (pointer:coarse){.wp-block-button__link{min-height:44px}}

/* En el editor, lo que normalmente aparece al hacer scroll debe verse siempre */
.editor-styles-wrapper .rv,.editor-styles-wrapper [data-ed]{opacity:1!important;transform:none!important}
.editor-styles-wrapper .res[hidden]{display:block!important}

/* Aviso dentro del editor sobre los bloques que no se deben tocar por dentro */
.editor-styles-wrapper .sos-fijo{outline:2px dashed rgba(7,90,181,.4);outline-offset:6px;position:relative}


/* ============================================================
   EL DISENO, IDENTICO AL DE LA VERSION ORIGINAL YA PROBADA
   ============================================================ */

/* ============================================================
   SOS ARCHIVOS SAS
   Paleta muestreada pixel a pixel del logo real:
   azul #075AB5  ·  rojo #E10101
   ============================================================ */

:root{
  /* superficies */
  --canvas:#F2F5FA;
  --canvas-deep:#E8EDF6;
  --panel:#FFFFFF;
  --night:#061A33;
  --night-2:#0A2647;

  /* tinta */
  --ink:#0A1A30;
  --ink-2:#46586F;
  --ink-3:#5E6E85;
  --on-night:#EAF1FA;
  --on-night-2:#9FB6D2;

  /* filetes */
  --line:#D5DEEA;
  --line-strong:#A9BAD0;
  --line-night:rgba(159,182,210,.22);

  /* marca */
  --brand:#075AB5;
  --brand-deep:#04407F;
  --brand-tint:#E4EDFA;
  --accent:#E10101;
  --accent-hover:#B00000;
  --accent-tint:#FDE8E8;

  /* tipografía */
  --f-display:"Zilla Slab","Bookman Old Style",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  /* movimiento */
  --ease:cubic-bezier(.22,.68,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* medidas */
  --wrap:1200px;
  --pad:clamp(20px,5vw,40px);
  --r:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(10,26,48,.05),0 8px 24px -12px rgba(10,26,48,.18);
  --shadow-lift:0 2px 6px rgba(10,26,48,.06),0 22px 48px -20px rgba(7,90,181,.28);
}

*,*::before,*::after{box-sizing:border-box}

html{
  overflow-x:hidden;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,.42vw + 15px,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%}
a{color:var(--brand);text-decoration-color:rgba(7,90,181,.35);text-underline-offset:3px}
a:hover{color:var(--brand-deep)}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.1;letter-spacing:-.015em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
  font-weight:600;text-decoration:none;transition:top .25s var(--ease);
}
.skip:focus{top:0;color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:840px}

/* ── capa de ambiente: una sola, fija, detrás de todo ───────── */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env__grid{
  position:absolute;inset:-10%;
  background-image:linear-gradient(rgba(7,90,181,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(7,90,181,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%);
  animation:drift 90s linear -20s infinite;
}
.env__glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.32}
.env__glow--a{width:46vw;height:46vw;top:-14vw;right:-10vw;background:radial-gradient(circle,rgba(7,90,181,.22),transparent 70%)}
.env__glow--b{width:38vw;height:38vw;bottom:-12vw;left:-8vw;background:radial-gradient(circle,rgba(225,1,1,.08),transparent 70%)}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-64px,-64px,0)}}

/* ── encabezado ─────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:100;background:rgba(242,245,250,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.hdr.stuck{background:rgba(242,245,250,.94);box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(10,26,48,.5)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:74px}
.hdr__rule{height:2px;background:var(--accent);width:0;transition:width .12s linear;transform-origin:left}

.brand{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand__mark{width:34px;height:14px;color:var(--accent);flex:0 0 auto;shape-rendering:crispEdges}
.brand__word{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--brand);line-height:1}
.brand__sas{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--ink-3);margin-left:6px;vertical-align:super}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}
/* :not(.btn) es obligatorio: sin él estas reglas le ganan al botón por
   especificidad y lo dejan con el texto rojo sobre fondo rojo y sin relleno. */
.nav a:not(.btn){color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:600;position:relative;padding:6px 0;transition:color .25s var(--ease)}
.nav a.btn{text-decoration:none}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a:not(.btn):hover::after,.nav a:not(.btn).cur::after{transform:scaleX(1);transform-origin:left}
.nav a:not(.btn).cur{color:var(--brand)}

.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line-strong);background:var(--panel);border-radius:var(--r-sm);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── botones ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .28s var(--ease),background-color .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease),color .28s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.btn--sm{padding:10px 16px;font-size:14px}
.btn.btn--lg{padding:17px 28px;font-size:16px}
.btn.btn--full{width:100%}
.btn .ico{width:19px;height:19px;flex:0 0 auto}

.btn.btn--accent{background:var(--accent);color:#fff;box-shadow:0 6px 20px -8px rgba(225,1,1,.55)}
.btn.btn--accent:hover{background:var(--accent-hover);color:#fff;box-shadow:0 14px 30px -10px rgba(225,1,1,.5)}
.btn.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.btn--ghost:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-tint)}
.btn.btn--out{background:var(--panel);color:var(--brand);border-color:var(--line-strong)}
.btn.btn--out:hover{color:#fff;background:var(--brand);border-color:var(--brand)}

.sec--night .btn.btn--ghost{color:var(--on-night);border-color:rgba(159,182,210,.45)}
.sec--night .btn.btn--ghost:hover{background:rgba(234,241,250,.1);color:#fff;border-color:var(--on-night)}

/* ── tipografía de sección ──────────────────────────────────── */
.sec{position:relative;padding:clamp(72px,9vw,128px) 0}
.sec--tint{background:var(--canvas-deep)}
.sec--night{background:var(--night);color:var(--on-night)}
.sec--night h2,.sec--night h3{color:#fff}
.sec--night .lede{color:var(--on-night-2)}

.kicker{
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin:0 0 18px;
}
.kicker i{font-style:normal;color:var(--line-strong)}
.sec--night .kicker{color:var(--on-night-2)}
.shead .kicker{justify-content:center}
.shead--left .kicker,.about .kicker,.cta .kicker,.loc .kicker,.proc .kicker{justify-content:flex-start}

.sig{
  display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:500;
}
.sig::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blip 6s var(--ease) -1.5s infinite}
@keyframes blip{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.sec:not(.onscreen) .sig::after{animation-play-state:paused}

.shead{max-width:760px;margin:0 auto clamp(44px,5vw,64px);text-align:center}
.shead--left{margin-inline:0;text-align:left}
.shead h2,.about h2,.cta h2{font-size:clamp(30px,4.1vw,50px)}
.lede{color:var(--ink-2);font-size:clamp(16.5px,1.05vw,19px);margin-top:18px;max-width:62ch}
.shead .lede{margin-inline:auto}

/* ── sistema de aparición ───────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);transition-delay:var(--d,0ms)}
.js .reveal.in .rv{opacity:1;transform:none}
.js .reveal.done .rv{transition-delay:0ms!important}

/* ══ 1. HÉROE ══════════════════════════════════════════════════ */
.hero{position:relative;padding:clamp(48px,7vw,88px) 0 clamp(72px,8vw,110px)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,66px);letter-spacing:-.028em}
.hero h1 em{font-style:normal;color:var(--brand);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--accent);opacity:.9;border-radius:2px}
.hero .lede{font-size:clamp(17px,1.15vw,19.5px);max-width:54ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.hero__trust li{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);
  border:1px solid var(--line);background:rgba(255,255,255,.6);border-radius:999px;padding:6px 13px;
}

.hero__art{position:relative}
/* overflow:hidden recorta el barrido del escáner contra el marco del dibujo.
   Con visible, la franja azul se pasea por encima del titular. */
.art{display:block;width:100%;height:auto;overflow:hidden}
.shelf{fill:none;stroke:var(--line-strong);stroke-width:1.8;stroke-linecap:round}
.js .shelf{stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.2s var(--ease-out);transition-delay:var(--d,0ms)}
.js .art.in .shelf{stroke-dashoffset:0}

.art__boxes .hb{--o:.55;color:var(--brand)}
.art__boxes .hb:nth-child(-n+9){--o:.3}
.art__boxes .hb:nth-child(n+10):nth-child(-n+18){--o:.6}
.art__boxes .hb:nth-child(n+19):nth-child(-n+27){--o:.82}
.art__boxes .hb:nth-child(n+28){--o:.42}
.art__boxes .hb--hit{--o:1!important;color:var(--accent)!important}
.js .art__boxes .hb{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--d,0ms)}
.js .art.in .hb{opacity:var(--o);transform:none}

.art__hit .ret{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.art__hit .lead{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.6;stroke-dasharray:3 4}
.coord{font-family:var(--f-mono);font-size:15px;font-weight:500;fill:var(--accent);letter-spacing:.04em}
.js .art__hit{opacity:0;transition:opacity .8s var(--ease-out) 1.35s}
.js .art.in .art__hit{opacity:1}

.beam{animation:beam 9s linear -3s infinite}
@keyframes beam{0%{transform:translateX(0);opacity:0}6%{opacity:1}30%{transform:translateX(820px);opacity:1}38%{opacity:0}100%{transform:translateX(820px);opacity:0}}
.hero:not(.onscreen) .beam{animation-play-state:paused}

.art__cap{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 15px;box-shadow:var(--shadow);
}
.art__cap .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.js .art__cap{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out) 1.7s,transform .6s var(--ease-out) 1.7s}
.js .art.in ~ .art__cap{opacity:1;transform:none}

/* ══ 2. DOLOR ══════════════════════════════════════════════════ */
.quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.quote{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow);position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.quote:nth-child(even){margin-top:26px}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--brand-tint)}
.quote::before{
  content:"";position:absolute;left:clamp(22px,2.4vw,30px);top:0;width:34px;height:3px;
  background:var(--accent);border-radius:0 0 3px 3px;
}
.quote p{font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.35vw,20px);line-height:1.35;color:var(--ink)}

.turn{margin-top:clamp(44px,5vw,68px);text-align:center}
.turn span{
  display:inline-block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.9vw,36px);line-height:1.24;letter-spacing:-.02em;max-width:22ch;
}

/* ══ 3. LOCALIZADOR ════════════════════════════════════════════ */
.loc__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,64px);align-items:center}
.loc__panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.8vw,36px);box-shadow:var(--shadow-lift);
}
.loc__label{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--ink-2);
  background:var(--canvas);border:1.5px solid var(--line-strong);border-radius:999px;
  padding:9px 16px;cursor:pointer;
  transition:background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
.chip:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.chip--on,.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip--on:hover,.chip[aria-pressed="true"]:hover{color:#fff;background:var(--brand-deep);border-color:var(--brand-deep)}

.loc__out{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.levels{display:grid;gap:8px}
.lvl{
  display:grid;grid-template-columns:110px 1fr;align-items:baseline;gap:14px;
  padding:11px 14px;border-radius:var(--r-sm);background:var(--canvas);
  border-left:3px solid var(--line-strong);
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.lvl__k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lvl__v{font-family:var(--f-mono);font-size:clamp(16px,1.5vw,21px);font-weight:500;color:var(--ink-3);letter-spacing:.04em}
.lvl.on{background:var(--brand-tint);border-left-color:var(--brand)}
.lvl.on .lvl__v{color:var(--brand-deep)}
.lvl.on:last-child{background:var(--accent-tint);border-left-color:var(--accent)}
.lvl.on:last-child .lvl__v{color:var(--accent)}
.js .lvl__v{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.js .lvl.pop .lvl__v{animation:pop .42s var(--ease-out)}
@keyframes pop{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

.loc__meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-top:20px}
.loc__serie{font-size:14.5px;color:var(--ink-2)}
.loc__serie b{color:var(--ink);font-weight:600}
.loc__timer{font-family:var(--f-mono);font-size:clamp(28px,3.4vw,42px);font-weight:500;color:var(--accent);line-height:1;letter-spacing:-.02em}
.loc__timer i{font-style:normal;font-size:.45em;color:var(--ink-3);margin-left:3px}
.loc__foot{margin-top:20px;font-size:14.5px;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:16px}
.loc__foot b{color:var(--ink);font-weight:600}

/* ══ 4. SERVICIOS ══════════════════════════════════════════════ */
.grid{display:grid;gap:clamp(16px,1.8vw,24px)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card__n{position:absolute;top:22px;right:24px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--line-strong)}
.card__ico{width:44px;height:44px;color:var(--brand);margin-bottom:18px}
.card h3{font-size:clamp(19px,1.5vw,22px);margin-bottom:10px}
.card>p{color:var(--ink-2);font-size:15.5px}

.tick{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:9px}
.tick li{position:relative;padding-left:24px;font-size:14.5px;color:var(--ink-2)}
.tick li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:7px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);border-radius:1px;
}

/* ══ 5. PROCESO ════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:26px;height:1px;background:var(--line-strong);opacity:.6}
.step{position:relative;padding-top:0}
.step__hd{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;z-index:1}
.step__n{
  width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--panel);border:1.5px solid var(--line-strong);
  font-family:var(--f-mono);font-size:15px;font-weight:500;color:var(--brand);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.step:hover .step__n{background:var(--brand);border-color:var(--brand);color:#fff}
.step__tag{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--accent);border-radius:999px;padding:5px 11px;
}
.step h3{font-size:clamp(18px,1.4vw,21px);margin-bottom:9px}
.step p{color:var(--ink-2);font-size:15px}
.proc__cta{margin-top:clamp(40px,4.5vw,60px)}

/* ══ 6. EL RESULTADO: COMPARADOR ANTES Y DESPUÉS ═══════════════ */
.res[hidden]{display:none}
.ba{margin-top:clamp(28px,3vw,40px)}
.ba__box{
  position:relative;--p:50%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--canvas-deep);box-shadow:var(--shadow-lift);
  touch-action:pan-y;
}
.ba__box:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
         user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.ba__bar{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;
         background:#fff;box-shadow:0 0 0 1px rgba(10,26,48,.28);pointer-events:none}
.ba__grip{
  position:absolute;top:50%;left:50%;translate:-50% -50%;width:48px;height:48px;border-radius:50%;
  background:var(--accent);box-shadow:0 8px 24px -6px rgba(10,26,48,.65);
}
.ba__grip::before,.ba__grip::after{content:"";position:absolute;top:50%;translate:0 -50%;
  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
.ba__grip::before{border-right:7px solid #fff;left:12px}
.ba__grip::after{border-left:7px solid #fff;right:12px}
.ba__tag{
  position:absolute;top:16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(6,26,51,.74);border-radius:999px;
  padding:7px 14px;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ba__tag--a{left:16px}
.ba__tag--d{right:16px;background:rgba(225,1,1,.88)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100vh;cursor:ew-resize}
.ba__range::-moz-range-thumb{width:48px;height:100vh;border:0;cursor:ew-resize}
.ba__foot{margin-top:16px;font-size:14.5px;color:var(--ink-2)}

/* Una foto real reemplaza el dibujo vectorial del producto en cuanto exista */
.prod__art img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.prod__art.tiene-foto{padding:0;background:none}

/* ══ 7. PRODUCTOS ══════════════════════════════════════════════ */
.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:clamp(28px,3vw,40px)}
.prods .prod{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(20px,2.2vw,28px);box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .35s var(--ease);
}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.prod[hidden]{display:none}
.prod__art{
  background:linear-gradient(160deg,var(--brand-tint),rgba(228,237,250,.35));
  border-radius:var(--r-sm);padding:18px;margin-bottom:18px;color:var(--brand);
}
.prod__art svg{display:block;width:100%;height:auto}
.prod__ref{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.prod__ref b{color:var(--accent);font-weight:500}
.prod h3{font-size:clamp(18px,1.35vw,20px);margin-bottom:9px}
.prod__d{color:var(--ink-2);font-size:14.5px}

.spec{margin:18px 0;display:grid;gap:0;border-top:1px solid var(--line)}
.spec li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.spec span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.spec b{color:var(--ink);font-weight:600;text-align:right}
.prod .btn{margin-top:auto}

.prods__note{margin-top:clamp(28px,3vw,40px);text-align:center;color:var(--ink-2);font-size:15px}
.prods__note span{display:inline-block;max-width:76ch}

/* ══ 7. NORMA ══════════════════════════════════════════════════ */
.laws{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.law{
  background:linear-gradient(165deg,rgba(234,241,250,.07),rgba(234,241,250,.02));
  border:1px solid var(--line-night);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease);
}
.law:hover{transform:translateY(-5px);border-color:rgba(159,182,210,.5)}
.law__id{font-family:var(--f-mono);font-size:clamp(17px,1.6vw,21px);font-weight:500;color:var(--accent);margin-bottom:12px;letter-spacing:-.01em}
.law__id i{font-style:normal;color:var(--on-night-2);font-size:.72em;letter-spacing:.06em}
.law h3{font-size:clamp(17px,1.3vw,19.5px);margin-bottom:9px}
/* :not(.law__id) es obligatorio: .law p le gana por especificidad al
   identificador de la norma y le borra el rojo y el tamaño. */
.law p:not(.law__id){color:var(--on-night-2);font-size:14.5px}

.norma__cta{
  margin-top:clamp(40px,4.5vw,60px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:20px;
  border-top:1px solid var(--line-night);padding-top:clamp(28px,3vw,40px);
}
.norma__cta p{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.7vw,24px);color:#fff;line-height:1.3;max-width:34ch}

/* ══ 8. NOSOTROS ═══════════════════════════════════════════════ */
.about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,4vw,64px);align-items:start}
.about__mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,3vw,40px)}
.about__mv .kicker{margin-bottom:10px}
.about__mv p:last-child{color:var(--ink-2);font-size:15px}

.about__stats{display:grid;gap:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);display:flex;align-items:baseline;gap:18px}
.stat__n{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,3.6vw,46px);line-height:1;color:var(--brand);letter-spacing:-.03em;flex:0 0 auto}
.stat__n i{font-style:normal;color:var(--accent)}
.stat__l{font-size:14px;color:var(--ink-2);line-height:1.45}
.stat--flat{display:block}
.stat--flat .stat__l{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.stat__t{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.35;color:var(--ink)}

.clients{margin-top:clamp(48px,5vw,72px);text-align:center}
.clients__row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3vw,44px);margin-top:20px}
.clients__row li{font-family:var(--f-display);font-weight:600;font-size:clamp(15px,1.4vw,19px);color:var(--ink-3);opacity:.75;transition:opacity .3s var(--ease),color .3s var(--ease)}
.clients__row li:hover{opacity:1;color:var(--brand)}

/* ══ 9. FAQ ════════════════════════════════════════════════════ */
.faq{display:grid;gap:10px}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.qa[open]{border-color:var(--brand-tint);box-shadow:var(--shadow)}
.qa summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:18px clamp(18px,2vw,26px);font-family:var(--f-display);font-weight:600;
  font-size:clamp(16px,1.25vw,18.5px);color:var(--ink);line-height:1.35;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
.qa summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;border-right:2.2px solid var(--brand);
  border-bottom:2.2px solid var(--brand);transform:rotate(45deg) translateY(-3px);
  transition:transform .32s var(--ease);border-radius:1px;
}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa summary:hover{color:var(--brand)}
.qa__b{padding:0 clamp(18px,2vw,26px) 22px}
.qa__b p{color:var(--ink-2);font-size:15.5px;max-width:70ch}
.js .qa[open] .qa__b{animation:slideIn .38s var(--ease-out)}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ══ 10. CONTACTO ══════════════════════════════════════════════ */
.cta__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:start}
.contact{margin-top:clamp(28px,3vw,40px);display:grid;gap:2px}
.contact li{display:grid;grid-template-columns:182px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.contact__k{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.contact__v{font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.3vw,19px);color:var(--ink);text-decoration:none;word-break:break-word}
a.contact__v:hover{color:var(--accent)}

.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.8vw,36px);box-shadow:var(--shadow-lift)}
.form__hd{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,1.8vw,25px);margin-bottom:22px;color:var(--ink)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin:0 0 14px;display:block}
.field label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:15.5px;color:var(--ink);
  background:var(--canvas);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{resize:vertical;min-height:88px;line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--brand)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);background:var(--panel);
  box-shadow:0 0 0 4px rgba(7,90,181,.14);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field .bad{border-color:var(--accent)}
.field input.bad,.field select.bad,.field textarea.bad{border-color:var(--accent);background:var(--accent-tint)}

.form__err{margin:2px 0 14px;color:var(--accent);font-size:14px;font-weight:600}
.form__btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.form__note{margin-top:16px;font-size:13px;color:var(--ink-3);line-height:1.5}
.form__ok{
  margin-top:18px;display:flex;align-items:flex-start;gap:12px;padding:16px 18px;
  border-radius:var(--r-sm);background:var(--brand-tint);border:1px solid rgba(7,90,181,.28);color:var(--brand-deep);
}
.form__ok[hidden]{display:none}
.form__ok svg{width:24px;height:24px;flex:0 0 auto;color:var(--brand)}
.form__ok p{font-size:14.5px;font-weight:600}

/* ══ PIE ═══════════════════════════════════════════════════════ */
.ftr{background:var(--night);color:var(--on-night-2);padding:clamp(52px,6vw,80px) 0 0}
.ftr__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(32px,4vw,64px)}
.ftr .brand__word{color:#fff}
.ftr .brand__sas{color:var(--on-night-2)}
.ftr__brand p{margin-top:16px;font-size:14.5px;max-width:44ch;line-height:1.6}
.ftr__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.ftr__nav div{display:grid;gap:9px;align-content:start}
.ftr__h{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:5px}
.ftr__nav a{color:var(--on-night-2);text-decoration:none;font-size:14.5px;transition:color .25s var(--ease),transform .25s var(--ease);width:fit-content}
.ftr__nav a:hover{color:#fff;transform:translateX(3px)}
.ftr__legal{
  margin-top:clamp(40px,4.5vw,60px);border-top:1px solid var(--line-night);
  padding-block:22px clamp(22px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:12px;
  align-items:baseline;justify-content:space-between;font-size:13.5px;
}
.ftr__legal i{font-style:normal;color:rgba(159,182,210,.45);margin-inline:4px}
.ftr__sig{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:rgba(159,182,210,.55)}

/* ══ WHATSAPP FLOTANTE ═════════════════════════════════════════ */
.wa{
  position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;box-shadow:0 10px 30px -8px rgba(225,1,1,.6);
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.wa:hover{transform:scale(1.08) translateY(-2px);background:var(--accent-hover);color:#fff}
.wa svg{width:28px;height:28px}
.wa::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);
  animation:halo 3.4s var(--ease) -1s infinite;
}
@keyframes halo{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.55);opacity:0}}

/* ══ RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width:1080px){
  .quotes{grid-template-columns:repeat(2,1fr)}
  .quote:nth-child(even){margin-top:0}
  .quote:nth-child(3),.quote:nth-child(4){margin-top:0}
  .grid--3,.laws{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .steps::before{display:none}
  .about{grid-template-columns:1fr}
  .about__stats{grid-template-columns:repeat(2,1fr)}
  .ftr__in{grid-template-columns:1fr}
}

@media (max-width:900px){
  .hero__in,.loc__in,.cta__in{grid-template-columns:1fr}
  .hero__art{order:-1;max-width:600px}
  .nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--panel);border-bottom:1px solid var(--line);
    padding:12px var(--pad) 24px;box-shadow:0 24px 40px -24px rgba(10,26,48,.5);
    transform:translateY(-120%);opacity:0;pointer-events:none;
    transition:transform .4s var(--ease),opacity .3s var(--ease);
    max-height:calc(100dvh - 74px);overflow-y:auto;
  }
  .nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:16.5px}
  .nav a:not(.btn)::after{display:none}
  .nav__cta{margin-top:16px;border-bottom:none;justify-content:center}
  .burger{display:flex}
}

@media (max-width:720px){
  html{scroll-padding-top:86px}
  .hdr__in{min-height:66px}
  .nav{inset:66px 0 auto;max-height:calc(100dvh - 66px)}
  .quotes,.grid--3,.laws,.steps,.about__stats{grid-template-columns:1fr}
  .f2,.form__btns,.about__mv{grid-template-columns:1fr}
  .ftr__nav{grid-template-columns:1fr 1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .lvl{grid-template-columns:1fr;gap:2px}
  .contact li{grid-template-columns:1fr;gap:3px}
  .norma__cta{flex-direction:column;align-items:flex-start}
  .norma__cta .btn{width:100%}
  .loc__meta{flex-direction:row;align-items:center}
}

@media (max-width:420px){
  .ftr__nav{grid-template-columns:1fr}
  .chips{gap:7px}
  .chip{font-size:13.5px;padding:9px 13px}
}

/* pantallas bajas: el botón flotante se achica para no tapar contenido */
@media (max-height:560px){.wa{width:46px;height:46px}.wa svg{width:23px;height:23px}}

/* objetivos táctiles reales, sin cambiar el layout */
@media (pointer:coarse){
  .btn{min-height:44px}
  .chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav a:not(.btn){min-height:44px;display:flex;align-items:center}
  .qa summary{min-height:52px}
  .ftr__nav a{min-height:34px;display:flex;align-items:center}
}

/* ══ MOVIMIENTO REDUCIDO: honrado por completo ═════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .js .rv{opacity:1;transform:none}
  .js .art__boxes .hb{opacity:var(--o);transform:none}
  .js .shelf{stroke-dashoffset:0}
  .js .art__hit,.js .art__cap{opacity:1;transform:none}
  .beam{opacity:0}
  .wa::before{display:none}
}

/* misma pinta cuando el visitante lo pide en caliente */
.rm .rv{opacity:1!important;transform:none!important}
.rm .beam{opacity:0}
.rm .art__hit,.rm .art__cap{opacity:1!important;transform:none!important}
.rm .shelf{stroke-dashoffset:0!important}
.rm .art__boxes .hb{opacity:var(--o)!important;transform:none!important}

/* pausa global cuando la pestaña se esconde */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media print{
  .hdr,.wa,.env,.form__btns{display:none}
  body{background:#fff;color:#000}
  .rv{opacity:1!important;transform:none!important}
  .qa__b{display:block!important}
  .prod[hidden]{display:flex!important}
}


/* ============================================================
   AJUSTES DEL PASO A BLOQUES
   Tres cosas del diseño original dependían de etiquetas que el
   editor de WordPress borra al escribir encima. Aquí se resuelven
   sin depender de ellas, para que nada se rompa al editar.
   ============================================================ */

/* ── 1. Los números de sección se cuentan solos ──────────────
   Antes iban escritos a mano dentro de un <span>. Ahora los pone
   CSS, así que si usted borra o mueve una sección, la numeración
   se corrige sola y nunca queda un salto. */
.sos-main{counter-reset:seccion 1}
.sos-main .sec{counter-increment:seccion}
.sos-main .sec .kicker::before{
  content:counter(seccion,decimal-leading-zero);
  color:var(--accent);font-weight:500;
  padding-right:12px;border-right:1px solid var(--line-strong);
}
.sos-main .sec--night .kicker::before{border-right-color:rgba(159,182,210,.35)}
.sos-main .about__mv .kicker::before{content:none;padding:0;border:0}
.sig{display:none}

/* ── 2. Fichas técnicas de producto ──────────────────────────
   La etiqueta va en negrita y el valor es el texto que sigue. */
.spec{margin:18px 0;display:block;border-top:1px solid var(--line)}
.spec li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--ink);font-weight:600;text-align:right;
}
.spec li strong,.spec li b{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;text-align:left;flex:0 0 auto;
}

/* ── 3. Datos de contacto ────────────────────────────────── */
.contact{margin-top:clamp(28px,3vw,40px);display:block}
.contact li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
  padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(16px,1.3vw,19px);color:var(--ink);
}
.contact li strong,.contact li b{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;flex:0 0 182px;
}
.contact li a{color:var(--ink);text-decoration:none;word-break:break-word}
.contact li a:hover{color:var(--accent)}
@media (max-width:720px){.contact li strong,.contact li b{flex:0 0 100%}}

/* ── 4. Las preguntas frecuentes, con el bloque Detalles ──── */
.qa.wp-block-details{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;padding:0;margin:0;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.qa.wp-block-details[open]{border-color:var(--brand-tint);box-shadow:var(--shadow)}
.qa.wp-block-details summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;list-style:none;padding:18px clamp(18px,2vw,26px);
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(16px,1.25vw,18.5px);color:var(--ink);line-height:1.35;
}
.qa.wp-block-details summary::-webkit-details-marker{display:none}
.qa.wp-block-details summary::marker{content:""}
.qa.wp-block-details summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;
  border-right:2.2px solid var(--brand);border-bottom:2.2px solid var(--brand);
  transform:rotate(45deg) translateY(-3px);transition:transform .32s var(--ease);border-radius:1px;
}
.qa.wp-block-details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa.wp-block-details summary:hover{color:var(--brand)}
.qa.wp-block-details > :not(summary){
  padding:0 clamp(18px,2vw,26px) 22px;
  color:var(--ink-2);font-size:15.5px;
}
.js .qa.wp-block-details[open] > :not(summary){animation:slideIn .38s var(--ease-out)}

/* ── 5. El comparador antes y después ────────────────────────
   Se arma con dos bloques de Imagen normales. Antes de que el
   guion los una, se ven apilados, que es una caída digna. */
.sos-comparador{display:grid;gap:12px;margin-top:clamp(28px,3vw,40px)}
.sos-comparador .wp-block-image{margin:0}
.sos-comparador .wp-block-image img{width:100%;height:auto;display:block;border-radius:var(--r)}
.sos-comparador.ba{display:block;gap:0}
.sos-comparador.ba .ba__box img{border-radius:0}
.res .ba__foot{margin-top:16px}

/* ── 6. Detalles del encabezado dentro de WordPress ───────── */
.hdr{position:sticky}
.wp-site-blocks{overflow:visible}
.sos-main{position:relative}