/* =========================================================
   SAMU · flowedits.com
   Dirección: "La sala de edición de noche"
   Tokens del manual SAMU v2. Valores técnicos en LEEME.md
   ========================================================= */

@font-face{font-family:"Host Grotesk";src:url(../fonts/host-grotesk-var.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* Color */
  --fondo:#0E0C0B; --superficie:#1A1614; --linea:#2E2724;
  --texto:#F2EDE6; --apoyo:#9A928A; --apoyo-claro:#CFC7BE;
  --naranja:#FF6B2C; --ambar:#FFA24D; --luz-profunda:#9A2E0C; --sobre-naranja:#170A04;
  --cta:var(--naranja); --cta-ink:var(--sobre-naranja);
  --vidrio:rgba(255,255,255,.10); --vidrio-calido:rgba(255,140,80,.22);
  --vidrio-borde:rgba(255,255,255,.22); --vidrio-brillo:rgba(255,255,255,.55);
  --sombra-vidrio:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.10),0 18px 40px rgba(0,0,0,.45);
  --brillo-ambar:0 0 12px rgba(255,162,77,.9);
  --marcador:#FFE15A;
  /* Tipografía */
  --f-display:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --f-fuerte:"Archivo","Host Grotesk",Arial,sans-serif; --w-fuerte:760; /* solo para palabras resaltadas */
  /* Forma */
  --r-chip:14px; --r-tarjeta:28px; --r-panel:32px; --r-pildora:999px;
  /* Movimiento */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --ease-pop:var(--ease);
  --dur:.7s; --dist:20px; --t-hover:.45s;
  /* Espacio */
  --gutter:clamp(16px,4vw,56px);
  --maxw:1360px;
  --section-y:clamp(88px,11vw,152px);
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--fondo);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--f-display);font-size:17px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ambar);outline-offset:2px;border-radius:6px}
::selection{background:var(--naranja);color:var(--sobre-naranja)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;z-index:100;left:12px;top:-60px;padding:10px 16px;border-radius:var(--r-pildora);background:var(--texto);color:var(--fondo);text-decoration:none}
.saltar:focus{top:12px}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

.mono{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-variant-numeric:tabular-nums;font-size:12px;line-height:1.3}
.contenedor{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.seccion{position:relative;padding:var(--section-y) 0}
.ante{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--apoyo)}
.ante svg{width:12px;height:12px;flex:none}
.h2{margin:0;font-weight:500;text-transform:uppercase;font-size:clamp(40px,7.4vw,96px);line-height:.94;letter-spacing:-.04em}
.h2 .gris{color:var(--apoyo)}
.h2 em{font-style:normal;color:var(--naranja)}
.h3{margin:0;font-weight:600;font-size:clamp(26px,3.2vw,40px);line-height:1.05;letter-spacing:-.03em}
.entradilla{margin:0;font-weight:500;font-size:clamp(19px,2vw,25px);line-height:1.3;letter-spacing:-.015em}
.entradilla .gris{color:var(--apoyo)}
.texto-apoyo{color:var(--apoyo-claro)}
.linea-mask,.palabra-mask{padding:.12em .12em .12em 0;margin:-.12em -.12em -.12em 0}

/* Marcadores de datos pendientes (se quitan al completar) */
.falta{display:inline-block;padding:.1em .45em;border-radius:6px;background:var(--marcador);color:#1a1400;font-family:var(--f-mono);font-size:.72em;font-weight:500;letter-spacing:.04em;text-transform:none;line-height:1.35;vertical-align:.1em}

/* ===== Luz tungsteno + grano ===== */
.luz{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.luz__foco{position:absolute;inset:0;background:radial-gradient(60% 75% at 78% 112%,var(--ambar) 0%,var(--naranja) 26%,var(--luz-profunda) 50%,rgba(14,12,11,0) 78%);transform-origin:78% 100%}
.luz--arriba .luz__foco{background:radial-gradient(70% 62% at 50% -16%,var(--naranja) 0%,var(--luz-profunda) 42%,rgba(14,12,11,0) 76%);transform-origin:50% 0}
.luz--abajo .luz__foco{background:radial-gradient(70% 60% at 50% 118%,var(--ambar) 0%,var(--naranja) 24%,var(--luz-profunda) 48%,rgba(14,12,11,0) 76%);transform-origin:50% 100%}
.luz--izq .luz__foco{background:radial-gradient(55% 70% at -10% 60%,var(--naranja) 0%,var(--luz-profunda) 40%,rgba(14,12,11,0) 74%);transform-origin:0 60%}
.luz--suave .luz__foco{opacity:.55}
/* Las luces de sección se funden en sus bordes para que no haya cortes entre secciones */
.luz--abajo{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
.luz--arriba{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
.clientes .luz--abajo{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%,transparent 100%)}
.grano{position:relative}
.grano::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.25;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}
.seccion>.contenedor{position:relative;z-index:2}

/* ===== Vidrio ===== */
.vidrio{position:relative;isolation:isolate;background:var(--vidrio);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:var(--sombra-vidrio);color:var(--texto);--mx:20%;--my:0%}
.vidrio::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:radial-gradient(160px 120px at var(--mx) var(--my),rgba(255,255,255,.75),transparent 70%),linear-gradient(145deg,var(--vidrio-brillo),var(--vidrio-borde) 35%,var(--vidrio-borde) 60%,var(--vidrio-calido));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.vidrio::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(120% 60% at 20% -10%,var(--vidrio-borde),transparent 45%)}
.vidrio--calido{background:var(--vidrio-calido)}
.vidrio--oscuro{background:rgba(14,12,11,.42)}

/* ===== Botones ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r-pildora);font:500 15px/1.2 var(--f-display);text-decoration:none;cursor:pointer;color:var(--texto);white-space:nowrap;
  transition:transform var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.btn:active{transform:scale(.97)}
.btn--cta{background:var(--cta);color:var(--cta-ink);overflow:hidden;box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 10px 30px rgba(255,107,44,.28)}
.btn--cta::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(90px 60px at var(--bx,50%) var(--by,0%),rgba(255,162,77,.95),transparent 70%);opacity:0;transition:opacity var(--t-hover) var(--ease)}
.btn--cta:hover::before{opacity:1}
.btn--cta:hover{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 14px 38px rgba(255,107,44,.42)}
.btn--cta>*{position:relative}
.flecha{display:inline-block;transition:transform var(--t-hover) var(--ease)}
.btn:hover .flecha{transform:translateX(4px)}
.btn--vidrio:hover{background:rgba(255,255,255,.16)}
.btn--grande{min-height:56px;padding:0 28px;font-size:16px}

/* ===== Separador "corte" ===== */
.corte{position:relative;z-index:3;display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.corte__linea{flex:1;height:1px;background:var(--linea);transform-origin:var(--o,right)}
.corte__linea:last-child{--o:left}
.corte svg{width:18px;height:18px;flex:none}

/* ===== MENÚ ===== */
.menu{position:fixed;z-index:50;top:12px;left:0;right:0;padding:0 var(--gutter);pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 8px 0 22px;border-radius:var(--r-pildora);max-width:var(--maxw);margin:0 auto;transition:background-color .5s var(--ease)}
.menu.scrolled .nav{background:rgba(26,22,20,.55)}
.nav__logo{display:flex;align-items:center;min-height:44px}
.logo{height:18px;width:auto;color:var(--texto)}
.nav__links{display:none;gap:28px;font-size:15px;margin:0;padding:0;list-style:none}
.nav__links a{position:relative;text-decoration:none;opacity:.82;transition:opacity .3s}
.nav__links a:hover,.nav__links a[aria-current="true"]{opacity:1}
@media not all and (hover:hover){.nav__links a[aria-current="true"]::after{content:"";position:absolute;left:50%;bottom:-8px;width:5px;height:5px;background:var(--naranja);transform:translateX(-50%) rotate(45deg)}}
.nav__der{display:flex;align-items:center;gap:6px}
.nav .btn--cta{min-height:44px;padding:0 18px;font-size:14px}
.nav .btn--cta .largo{display:none}
.nav__toggle{position:relative;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.nav__toggle span{position:absolute;left:13px;top:21px;width:18px;height:1.5px;background:var(--texto);transition:transform .4s var(--ease)}
.nav__toggle span:first-child{transform:translateY(-4px)}
.nav__toggle span:last-child{transform:translateY(4px)}
.nav__toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
.desplegable{pointer-events:auto;max-width:var(--maxw);margin:8px auto 0;border-radius:var(--r-tarjeta);padding:10px;background:rgba(26,22,20,.7)}
.desplegable[hidden]{display:none}
.desplegable ul{list-style:none;margin:0;padding:0}
.desplegable a{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 14px;text-decoration:none;font-size:20px;font-weight:500;letter-spacing:-.01em;border-radius:var(--r-chip)}
.desplegable a:hover{background:rgba(255,255,255,.06)}
.desplegable a .mono{color:var(--apoyo)}

/* ===== PORTADA ===== */
.portada{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:96px var(--gutter) 28px}
.foto{position:absolute;z-index:1;margin:0;top:60px;left:50%;transform:translateX(-42%);height:62svh;aspect-ratio:762/1024;
  -webkit-mask-image:radial-gradient(closest-side at 50% 42%,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 42%,#000 58%,transparent 100%)}
.foto img{width:100%;height:100%;object-fit:cover}
.portada__cuerpo{position:relative;z-index:3;margin-top:auto;max-width:var(--maxw);width:100%;margin-inline:auto;display:grid;gap:18px}
.titular{margin:0;font-weight:500;text-transform:uppercase;font-size:clamp(42px,12vw,132px);line-height:.9;letter-spacing:-.045em}
.titular .linea{display:block;padding:.06em .1em .04em 0}
.titular .gris{color:var(--apoyo)}
.titular em{font-style:normal;color:var(--naranja)}
.tarjeta{border-radius:var(--r-tarjeta);padding:22px 22px 20px}
.portada .tarjeta{max-width:440px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(28px) saturate(70%) brightness(.62);backdrop-filter:blur(28px) saturate(70%) brightness(.62)}
.portada .tarjeta .texto-apoyo{color:#E6DFD7}
.tarjeta__in>p{margin:0}
.tarjeta__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tarjeta__texto{margin-top:8px!important;font-size:15px;line-height:1.5}
.portada .tarjeta .tarjeta__acciones{margin-top:14px}
.cabezal{position:absolute;z-index:4;top:88px;bottom:0;left:0;width:2px;pointer-events:none;opacity:0}
.cabezal__linea{position:absolute;inset:0;background:var(--texto);box-shadow:var(--brillo-ambar)}
.cabezal__asa{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:14px;height:16px;border-radius:5px;background:var(--texto);box-shadow:var(--brillo-ambar)}
.cabezal__tc{position:absolute;top:-12px;left:14px;padding:4px 8px;border-radius:8px;background:rgba(14,12,11,.6);font-size:10px;white-space:nowrap}

/* ===== CLIENTES ===== */
.clientes{padding:clamp(56px,8vw,96px) 0;overflow:hidden}
.clientes .ante{justify-content:center;text-align:center}
.cinta{position:relative;z-index:2;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta__pista{display:flex;width:max-content;gap:14px;padding:10px 0 26px;animation:cinta 46s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(calc(-50% - 7px))}}
.cliente{display:flex;align-items:center;color:var(--texto);gap:14px;padding:12px 12px 12px 12px;border-radius:var(--r-chip);min-width:250px}
.cliente__redes{display:flex;gap:6px;margin-left:auto;padding-left:6px}
.cliente__red{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(14,12,11,.35);color:var(--texto);transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .4s var(--ease)}
.cliente__red svg{width:17px;height:17px}
.cliente__red:hover{background:var(--naranja);border-color:var(--naranja);color:var(--sobre-naranja);transform:translateY(-2px)}
.cliente__ini{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--superficie);font-weight:600;font-size:15px;letter-spacing:-.02em}
.cliente b{display:block;font-weight:600;font-size:15px;line-height:1.25}
.cliente div>span{display:block;font-size:13px;color:var(--apoyo-claro);line-height:1.35}
.cliente .dato{color:var(--ambar);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}

/* ===== TRABAJOS ===== */
.trabajos__cab{display:grid;gap:22px;margin-bottom:clamp(32px,4vw,56px)}
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtro{min-height:44px;padding:0 18px;border-radius:var(--r-pildora);border:1px solid var(--linea);background:transparent;cursor:pointer;font-size:14px;transition:background-color .3s,border-color .3s,color .3s}
.filtro:hover{border-color:var(--apoyo)}
.filtro[aria-pressed="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
.pieza{position:relative;grid-column:span 2;border-radius:var(--r-chip);overflow:hidden;background:var(--superficie);border:1px solid var(--linea);cursor:pointer;text-align:left;padding:0;display:block;width:100%;
  transition:transform var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.pieza[hidden]{display:none}
.pieza--vertical{grid-column:span 1}
.pieza__medio{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,#241e1b,#120f0e)}
.pieza--vertical .pieza__medio{aspect-ratio:9/16}
.pieza__medio img,.pieza__medio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .4s}
.pieza__medio video{opacity:0}
.pieza.reproduciendo video{opacity:1}
.pieza:hover{border-color:rgba(255,255,255,.22);transform:translateY(-4px)}
.pieza:hover .pieza__medio img{transform:scale(1.04)}
.pieza__vacio{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:var(--apoyo);font-size:13px;line-height:1.4}
.pieza__info{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:14px 16px 16px}
.pieza__info b{display:block;font-weight:500;font-size:16px;line-height:1.25;letter-spacing:-.01em}
.pieza__info span{display:block;margin-top:4px;color:var(--apoyo)}
.pieza__ver{flex:none;color:var(--apoyo);transition:color .3s}
.pieza:hover .pieza__ver{color:var(--naranja)}
.pieza__chip{position:absolute;z-index:2;left:10px;bottom:10px;padding:8px 12px;border-radius:var(--r-chip);font-size:11px}
.pieza__marca{position:absolute;z-index:2;top:12px;right:12px;width:18px;height:18px}

/* Visor */
.visor{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(8,7,6,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.visor[hidden]{display:none}
.visor__caja{position:relative;width:min(1100px,100%);max-height:calc(100svh - 32px);display:grid;gap:12px}
.visor__medio{position:relative;border-radius:var(--r-chip);overflow:hidden;background:#000;aspect-ratio:16/9;max-height:calc(100svh - 120px);margin:0 auto;width:100%}
.visor__medio.vertical{aspect-ratio:9/16;width:auto;height:calc(100svh - 120px);max-width:100%}
.visor__medio iframe,.visor__medio video{position:absolute;inset:0;width:100%;height:100%;border:0}
.visor__barra{display:flex;justify-content:space-between;align-items:center;gap:12px}
.visor__barra p{margin:0}
.visor__cerrar{min-height:44px;padding:0 18px;border-radius:var(--r-pildora);border:1px solid var(--linea);background:var(--superficie);cursor:pointer}
.visor__fuera{padding:28px;text-align:center;display:grid;place-items:center;gap:16px;position:absolute;inset:0}

/* ===== FLOW 360° ===== */
.flow{overflow:hidden}
.flow__cab{display:grid;gap:24px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.flow__titulo{display:flex;align-items:flex-start;gap:14px}
.rueda{width:clamp(34px,4vw,54px);height:auto;flex:none;margin-top:.15em}
.flow__lado .entradilla b{font-weight:500}
.tl{position:relative}
.tl__cols{display:none}
.tl__clips{position:relative;display:grid;gap:10px}
.clip{border-radius:var(--r-chip);padding:12px 16px;width:86%;margin-left:calc(var(--l) * .14%);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:background-color .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease)}
.clip small{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--apoyo)}
.clip>strong{display:block;margin-top:2px;font-weight:500;font-size:16px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2}
.clip p{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--apoyo-claro)}
.clip.on{background:var(--vidrio-calido);border-color:rgba(255,162,77,.55);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 10px 30px rgba(255,107,44,.25)}
.clip.on small{color:var(--texto)}
.tl__cabezal{position:absolute;z-index:3;left:-8px;right:-8px;top:0;height:2px;background:var(--texto);box-shadow:var(--brillo-ambar);pointer-events:none}
.tl__cabezal::before{content:"";position:absolute;left:-2px;top:-6px;width:12px;height:14px;border-radius:4px;background:var(--texto);box-shadow:var(--brillo-ambar)}
.flow__cierre{display:grid;gap:24px;justify-items:start;margin-top:clamp(40px,6vw,72px)}
.flow__lema{margin:0;font-weight:500;font-size:clamp(26px,3.6vw,44px);line-height:1.08;letter-spacing:-.03em;max-width:20ch}
.flow__lema span{color:var(--apoyo)}
.flow__nota{color:var(--apoyo);margin:0}

/* ===== PARA QUIÉN ===== */
.quien__sub{margin-top:22px;max-width:40ch}
.dolores{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;gap:10px}
.dolor{display:grid;gap:10px;padding:18px 20px;border-radius:var(--r-tarjeta);border:1px solid var(--linea);background:rgba(255,255,255,.03);transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease)}
.dolor p{margin:0;line-height:1.4}
.dolor .mono{display:block;margin-bottom:6px;font-size:10px}
.dolor__p{font-size:clamp(18px,1.7vw,21px);font-weight:500;letter-spacing:-.01em;color:var(--apoyo-claro)}
.dolor__p .mono{color:var(--apoyo)}
.dolor__p strong{font-family:var(--f-fuerte);font-weight:var(--w-fuerte);color:var(--texto);letter-spacing:-.015em}
.dolor__s{color:var(--texto);font-size:15px}
.dolor__s .mono{color:var(--naranja)}
.dolor__flecha{color:var(--naranja);font-size:20px;line-height:1;transform:rotate(90deg);justify-self:start;transition:transform var(--t-hover) var(--ease)}
.quien__rejilla{display:grid;gap:14px;margin-top:clamp(32px,4vw,56px)}
.quien__accion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(28px,4vw,44px)}
.quien__accion p{margin:0;font-size:clamp(18px,1.8vw,22px);line-height:1.35;letter-spacing:-.01em}
.quien__accion .gris{color:var(--apoyo)}
.quien__tarjeta{border-radius:var(--r-tarjeta);padding:clamp(24px,3vw,36px)}
.quien__tarjeta .h3{margin-bottom:18px}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista li{display:flex;gap:14px;align-items:flex-start}
.lista svg{flex:none;width:14px;height:14px;margin-top:7px}
.quien__tarjeta--no{background:rgba(255,255,255,.05)}
.quien__tarjeta--no .lista li{color:var(--apoyo-claro)}

/* ===== SOBRE MÍ ===== */
.sobre__rejilla{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
.sobre__foto{position:relative;margin:0;border-radius:var(--r-tarjeta);overflow:hidden;aspect-ratio:4/5;background:var(--superficie)}
.sobre__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sobre__foto figcaption{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:var(--r-pildora)}
.cita{position:relative;margin:24px 0 0;padding:0 34px;font-weight:500;font-size:clamp(21px,2.4vw,30px);line-height:1.3;letter-spacing:-.02em}
.cita svg{position:absolute;top:.2em;width:22px;height:22px}
.cita .in{left:0}
.cita .out{right:0;transform:scaleX(-1)}
.cita svg path{fill:var(--naranja)}
.sobre__texto{margin:22px 0 0;color:var(--apoyo-claro);max-width:56ch}
.sobre__nota{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 14px;border-radius:var(--r-pildora);border:1px solid rgba(255,162,77,.4);color:var(--ambar);font-size:11px}
.sobre__nota svg{width:11px;height:11px;flex:none}
.pistas{position:relative;margin-top:26px;border-radius:var(--r-tarjeta);padding:16px 16px 8px;overflow:hidden}
.pistas__cab{display:flex;justify-content:space-between;gap:12px;color:var(--apoyo);font-size:11px;margin-bottom:6px}
.pista{display:grid;gap:8px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.pista__id{color:var(--apoyo);font-size:10px}
.pista__clips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pclip{padding:9px 14px;border-radius:10px;font-weight:600;font-size:14px;line-height:1.2;letter-spacing:-.005em;background:var(--vidrio-calido);border:1px solid rgba(255,162,77,.5);box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.pclip--ia{background:linear-gradient(120deg,rgba(255,107,44,.5),rgba(255,162,77,.2))}
.pclip--b{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 7px)}
.pistas__cabezal{position:absolute;z-index:2;top:0;bottom:0;left:0;width:2px;background:var(--texto);box-shadow:var(--brillo-ambar);opacity:0;pointer-events:none}
.datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.dato-chip{padding:14px 18px;border-radius:var(--r-chip);min-width:140px}
.dato-chip b{display:block;font-weight:500;font-size:28px;letter-spacing:-.03em;line-height:1.1}
.dato-chip>span{display:block;margin-top:6px;color:var(--apoyo-claro);font-size:11px}

/* ===== CIERRE ===== */
.cierre{overflow:hidden;min-height:92svh;display:flex;align-items:center}
.cierre .contenedor{width:100%}
.cierre__titulo{margin:0;font-weight:500;text-transform:uppercase;font-size:clamp(34px,8vw,104px);line-height:.92;letter-spacing:-.045em}
.cierre__titulo .gris{color:var(--apoyo)}
.cierre__titulo em{font-style:normal;color:var(--naranja)}
.cierre__texto{margin:24px 0 0;max-width:34ch}
.contacto{display:grid;gap:12px;margin-top:36px;max-width:720px}
.contacto__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-radius:var(--r-tarjeta)}
.contacto__dato{display:grid;gap:2px;min-width:0}
.contacto__dato .mono{color:var(--apoyo);font-size:11px}
.contacto__dato b{font-weight:500;font-size:clamp(17px,2vw,20px);letter-spacing:-.01em;overflow-wrap:anywhere}
.contacto__acciones{display:flex;gap:8px;flex-wrap:wrap}
.copiar{min-height:44px;padding:0 16px;border-radius:var(--r-pildora);border:1px solid rgba(255,255,255,.18);background:rgba(14,12,11,.35);cursor:pointer;font-size:14px}
.copiar.ok{border-color:var(--ambar)}

/* ===== TIENDA (próximamente) ===== */
.tienda{overflow:hidden}
.tienda__cab{display:grid;gap:22px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.estado{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px;border-radius:var(--r-pildora);justify-self:start}
.estado svg{width:12px;height:12px}
.productos{display:grid;gap:12px}
.producto{position:relative;border-radius:var(--r-tarjeta);padding:24px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.producto__velo{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 28px)}
.producto small{color:var(--apoyo)}
.producto strong{display:block;font-weight:500;font-size:24px;letter-spacing:-.02em;margin-top:6px}
.producto p{margin:8px 0 0;color:var(--apoyo-claro);font-size:15px}
.producto .mono{color:var(--apoyo)}
.tienda__accion{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.tienda__accion p{margin:0;color:var(--apoyo)}

/* ===== PIE ===== */
.pie{position:relative;padding:clamp(56px,8vw,96px) 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);overflow:hidden}
.pie__logo{position:relative;width:min(560px,78vw);color:var(--texto)}
.pie__logo svg{width:100%;height:auto}
.pie__cabezal{position:absolute;top:-10%;bottom:-10%;left:0;width:2px;background:var(--texto);box-shadow:var(--brillo-ambar);opacity:0}
.pie__rejilla{display:grid;gap:28px;margin-top:40px}
.pie__rejilla p{margin:0}
.pie__redes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pie__redes a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pildora);border:1px solid var(--linea);text-decoration:none;font-size:14px}
.pie__redes a:hover{border-color:var(--apoyo)}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;color:var(--apoyo)}

/* ===== Barra fija en celular ===== */
.barra{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;transform:translateY(160%);transition:transform .6s var(--ease)}
.barra.visible{transform:none}
.barra .btn{flex:1;min-height:52px}

/* ===== Escritorio ===== */
@media (min-width:760px){
  .rejilla{grid-template-columns:repeat(4,1fr);gap:16px}
  .quien__rejilla{grid-template-columns:1.15fr .85fr;align-items:start}
  .dolor{grid-template-columns:1fr 40px 1.1fr;align-items:center;gap:20px;padding:20px 26px}
  .dolor__flecha{transform:none;justify-self:center}
  .productos{grid-template-columns:repeat(3,1fr)}
  .pie__rejilla{grid-template-columns:1.2fr 1fr 1fr}
}
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .nav .btn--cta .largo{display:inline}
  .nav .btn--cta .corto{display:none}
  .desplegable{display:none!important}
  .barra{display:none}
  .foto{top:auto;bottom:0;left:auto;right:calc(var(--gutter) + 18vw);transform:none;height:min(88svh,980px)}
  .portada__cuerpo{grid-template-columns:1fr auto;align-items:end}
  .titular{grid-column:1;grid-row:1 / span 2;font-size:clamp(64px,9vw,136px)}
  .portada .tarjeta{grid-column:2;grid-row:2;justify-self:end;align-self:end;width:330px;padding:18px 18px 16px}
  .portada .tarjeta .entradilla{font-size:20px}
  .portada .tarjeta .btn{min-height:44px;padding:0 16px;font-size:14px}
  .trabajos__cab,.flow__cab,.tienda__cab{grid-template-columns:1fr auto;align-items:end}
  .filtros{align-items:center}
  .flow__cab{grid-template-columns:1.1fr .9fr}
  .sobre__rejilla{grid-template-columns:.85fr 1.15fr;align-items:start}
  .sobre__foto{position:sticky;top:96px}
  .pista{grid-template-columns:118px 1fr;align-items:center}
  .tl{height:auto}
  .tl__cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
  .tl__cols div{border-left:1px solid rgba(255,255,255,.12);position:relative}
  .tl__cols div:last-child{border-right:1px solid rgba(255,255,255,.12)}
  .tl__cols b{position:absolute;bottom:8px;right:10px;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--apoyo)}
  .tl__clips{position:relative;display:grid;grid-template-columns:repeat(100,1fr);grid-auto-rows:auto;row-gap:14px;padding:26px 0 48px}
  .clip{grid-row:var(--row);grid-column:calc(var(--l) + 1) / span var(--w);width:auto;margin:0 6px}
  .clip p{font-size:13px}
  .tl__cabezal{left:0;right:auto;top:-12px;bottom:0;width:2px;height:auto}
  .tl__cabezal::before{left:-6px;top:-2px}
  .flow__cierre{grid-template-columns:1fr auto;align-items:end}
}

/* ===== Estados ocultos para animar: solo con JS, con rescate por tiempo ===== */
.js [data-corte]{visibility:hidden;animation:rescate 0s 5s forwards}
.js [data-wipe]{clip-path:inset(-.2em 100% -.2em 0);animation:rescateWipe 0s 5s forwards}
.js .luz__foco[data-lampara]{opacity:0;animation:rescateOp 0s 5s forwards}
@keyframes rescate{to{visibility:visible}}
@keyframes rescateWipe{to{clip-path:inset(-.2em 0 -.2em 0)}}
@keyframes rescateOp{to{opacity:1}}

/* ===== Menos movimiento y menos transparencia ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-corte]{visibility:visible}
  .js [data-wipe]{clip-path:none}
  .js .luz__foco[data-lampara]{opacity:1}
  .cinta__pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .cinta__pista [aria-hidden="true"]{display:none}
  .cinta{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-transparency:reduce){
  .vidrio,.visor{-webkit-backdrop-filter:none;backdrop-filter:none}
  .vidrio{background:var(--superficie)}
}

/* =========================================================
   Resaltados: letra más gruesa
   ========================================================= */
strong,b{font-weight:700}
/* Palabras y frases resaltadas: Archivo Black, mucho más gruesa que la letra base */
.titular em,.h2 em,.cierre__titulo em{font-family:var(--f-fuerte);font-weight:var(--w-fuerte);letter-spacing:-.035em}
.entradilla strong,.entradilla b,.flow__lema strong,.lista strong,.cita strong,.clip p strong,.texto-apoyo strong,.sobre__texto strong,.quien__accion strong{font-family:var(--f-fuerte);font-weight:var(--w-fuerte);letter-spacing:-.015em;color:var(--texto)}
.quien__tarjeta--no .lista strong{color:var(--apoyo-claro)}
.cliente b,.pieza__info b{font-weight:700}

/* =========================================================
   Hover: todo lo que toca el mouse responde
   (solo con mouse; en táctil no existe)
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  /* Elementos que se elevan */
  .cliente,.clip,.quien__tarjeta,.dato-chip,.contacto__fila,.producto,.simbolo,.portada .tarjeta,.estado,.sobre__foto figcaption,.pclip{
    transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
  .cliente:hover,.quien__tarjeta:hover,.dato-chip:hover,.producto:hover,.contacto__fila:hover,.estado:hover{transform:translateY(-4px);box-shadow:var(--sombra-vidrio),0 0 0 1px rgba(255,162,77,.18),0 22px 50px rgba(255,107,44,.16)}
  .portada .tarjeta:hover{transform:translateY(-3px)}

  /* Logo: las letras se levantan una tras otra */
  .logo use,.pie__logo use{transition:transform .5s var(--ease)}
  .nav__logo:hover .logo use{transform:translateY(-8px)}
  .nav__logo:hover .logo use:nth-child(2){transition-delay:.04s}
  .nav__logo:hover .logo use:nth-child(3){transition-delay:.08s}
  .nav__logo:hover .logo use:nth-child(4){transition-delay:.12s}
  .pie__logo:hover use{transform:translateY(-6px)}
  .pie__logo:hover use:nth-child(2){transition-delay:.05s}
  .pie__logo:hover use:nth-child(3){transition-delay:.1s}
  .pie__logo:hover use:nth-child(4){transition-delay:.15s}

  /* Enlaces del menú: el keyframe aparece debajo */
  .nav__links a::after{content:"";position:absolute;left:50%;bottom:-8px;width:5px;height:5px;background:var(--naranja);transform:translateX(-50%) rotate(45deg) scale(0);transition:transform .4s var(--ease)}
  .nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:translateX(-50%) rotate(45deg) scale(1)}

  /* Botones de vidrio y filtros */
  .btn--vidrio:hover{transform:translateY(-2px);box-shadow:var(--sombra-vidrio),0 12px 28px rgba(0,0,0,.35)}
  .filtro{transition:background-color .3s,border-color .3s,color .3s,transform .4s var(--ease)}
  .filtro:hover{transform:translateY(-2px);border-color:var(--naranja)}
  .copiar{transition:transform .4s var(--ease),border-color .3s,background-color .3s}
  .copiar:hover{transform:translateY(-2px);border-color:var(--ambar);background:rgba(255,162,77,.1)}
  .visor__cerrar{transition:transform .4s var(--ease),border-color .3s}
  .visor__cerrar:hover{transform:translateY(-2px);border-color:var(--apoyo)}

  /* Clientes: la inicial se calienta */
  .cliente__ini{transition:background-color .4s var(--ease),color .4s var(--ease)}
  .cliente:hover .cliente__ini{background:var(--naranja);color:var(--sobre-naranja)}

  /* Trabajos: el chip y el marcador reaccionan */
  .pieza__marca{transition:transform .5s var(--ease)}
  .pieza:hover .pieza__marca{transform:translateY(4px)}
  .pieza__chip{transition:transform .5s var(--ease)}
  .pieza:hover .pieza__chip{transform:translateY(-4px)}
  .pieza:hover{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,162,77,.2)}

  /* FLOW 360°: un clip se enciende al pasar el mouse aunque la barra no haya llegado */
  .clip:hover{transform:translateY(-4px);background:var(--vidrio-calido);border-color:rgba(255,162,77,.55)}
  .rueda{transition:transform 1.2s var(--ease)}
  .flow__titulo:hover .rueda{transform:rotate(360deg)}

  /* Viñetas keyframe: giran al pasar por su renglón */
  .lista svg,.ante svg{transition:transform .5s var(--ease)}
  .lista li:hover svg{transform:rotate(90deg) scale(1.25)}
  .ante:hover svg{transform:rotate(90deg)}
  .lista li{transition:transform .4s var(--ease)}
  .lista li:hover{transform:translateX(4px)}

  /* Sobre mí: la foto se acerca; la cita abre sus corchetes */
  .sobre__foto img{transition:transform 1.2s var(--ease)}
  .sobre__foto:hover img{transform:scale(1.05)}
  .cita svg{transition:transform .5s var(--ease)}
  .cita:hover .in{transform:translateX(-6px)}
  .cita:hover .out{transform:scaleX(-1) translateX(-6px)}

  .dolor:hover{border-color:rgba(255,162,77,.45);background:rgba(255,107,44,.06);transform:translateX(4px)}
  .dolor:hover .dolor__flecha{transform:translateX(6px)}
  /* Herramientas: el clip se levanta y se enciende */
  .pclip:hover{transform:translateY(-3px);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 10px 24px rgba(255,107,44,.25);border-color:var(--ambar)}

  /* Tienda: las pistas se recorren */
  .producto__velo{transition:transform 1.2s var(--ease)}
  .producto:hover .producto__velo{transform:translateX(28px)}

  /* Pie y separador */
  .pie__redes a{transition:border-color .3s,transform .4s var(--ease),color .3s}
  .pie__redes a:hover{border-color:var(--naranja);transform:translateY(-2px)}
  .corte svg{transition:transform .6s var(--ease)}
  .corte:hover svg{transform:scaleX(1.4)}

  /* Palabras naranja de los titulares: se encienden */
  .titular em,.h2 em,.cierre__titulo em{transition:text-shadow .5s var(--ease)}
  .titular em:hover,.h2 em:hover,.cierre__titulo em:hover{text-shadow:0 0 28px rgba(255,107,44,.55)}

  /* Enlaces de texto */
  .desplegable a{transition:background-color .3s,transform .4s var(--ease)}
}

/* =========================================================
   Trabajos v2: grupos, carril de reels y portadas de marca
   ========================================================= */
.pieza,.pieza--vertical{grid-column:auto}
.grupo{margin-top:clamp(40px,5vw,72px)}
.grupo:first-of-type{margin-top:0}
.grupo[hidden]{display:none!important}
.grupo__cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grupo__t{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--texto)}
.grupo__t svg{width:12px;height:12px}
.grupo__t span{color:var(--apoyo)}
.rejilla--2,.rejilla--3{grid-template-columns:1fr}
.pieza__info b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.carril{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
  margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;scrollbar-width:thin;scrollbar-color:var(--linea) transparent}
.carril::-webkit-scrollbar{height:6px}
.carril::-webkit-scrollbar-thumb{background:var(--linea);border-radius:6px}
.carril .pieza{flex:none;width:clamp(170px,56vw,236px);scroll-snap-align:start}
.carril__flechas{display:none;gap:8px;margin-bottom:16px}
.carril__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:transparent;cursor:pointer;font-size:16px;transition:border-color .3s,transform .4s var(--ease),background-color .3s}
.carril__btn:hover{border-color:var(--naranja);transform:translateY(-2px)}
.carril__btn:disabled{opacity:.35;cursor:default;transform:none}

/* Portada de marca para reels sin miniatura (Instagram, Drive) */
.pieza__portada{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;overflow:hidden;background:var(--fondo)}
.pieza__portada .luz{position:absolute;inset:0;z-index:0;-webkit-mask-image:none;mask-image:none}
.pieza__portada .luz__foco{background:radial-gradient(90% 60% at 70% 105%,var(--ambar) 0%,var(--naranja) 28%,var(--luz-profunda) 55%,rgba(14,12,11,0) 85%);transition:transform 1.2s var(--ease)}
.pieza__portada svg{position:absolute;z-index:1;top:16px;left:16px;width:16px;height:16px}
.pieza__portada b{position:relative;z-index:1;font-weight:700;font-size:26px;line-height:.95;letter-spacing:-.04em;text-transform:uppercase}
.pieza__portada .mono{position:relative;z-index:1;color:var(--texto);opacity:.8;font-size:10px}
.pieza:hover .pieza__portada .luz__foco{transform:scale(1.15)}

/* Vista previa de YouTube al pasar el mouse */
.pieza__vista{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.pieza--vertical .pieza__vista{inset:auto;top:50%;left:50%;width:316%;height:100%;transform:translate(-50%,-50%)}
.pieza--vertical[data-src][data-tipo="youtube"] .pieza__vista{width:100%;height:100%}
.pieza.reproduciendo .pieza__vista{opacity:1}

/* Visor: Instagram y Drive */
.visor__medio.instagram{aspect-ratio:auto;width:min(420px,100%);height:min(calc(100svh - 120px),760px);background:var(--superficie)}
.visor__barra a{color:var(--apoyo);text-decoration:none}
.visor__barra a:hover{color:var(--texto)}
.visor__acciones{display:flex;align-items:center;gap:16px}

@media (min-width:760px){
  .rejilla--2{grid-template-columns:repeat(2,1fr)}
  .rejilla--3{grid-template-columns:repeat(3,1fr)}
  .carril__flechas{display:flex}
}
.trabajos__sub{margin-top:22px;max-width:34ch}
.trabajos__sub strong{color:var(--texto)}
.pieza__portada--h b{font-size:clamp(30px,4vw,52px);max-width:12ch}
.pieza__portada--h .luz__foco{background:radial-gradient(70% 90% at 78% 115%,var(--ambar) 0%,var(--naranja) 26%,var(--luz-profunda) 52%,rgba(14,12,11,0) 82%)}

/* =========================================================
   Antes / después
   ========================================================= */
.comparador__cab{display:grid;gap:22px;margin-bottom:clamp(28px,4vw,48px)}
.comparador__sub{max-width:34ch}
.comparar{--pos:50%;position:relative;aspect-ratio:16/9;border-radius:var(--r-tarjeta);overflow:hidden;background:var(--superficie);border:1px solid var(--linea);touch-action:pan-y}
.comparar video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparar__antes{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.comparar__linea{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--texto);box-shadow:var(--brillo-ambar);pointer-events:none}
.comparar__asa{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--texto);color:var(--fondo);font-size:20px;box-shadow:var(--brillo-ambar),0 8px 24px rgba(0,0,0,.4);transition:transform .4s var(--ease)}
.comparar__etiqueta{position:absolute;z-index:2;top:14px;padding:8px 12px;border-radius:var(--r-pildora);font-size:11px;pointer-events:none}
.comparar__etiqueta--a{left:14px}
.comparar__etiqueta--b{right:14px;background:var(--vidrio-calido)}
.comparar__rango{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.comparar__rango:focus-visible~.comparar__linea .comparar__asa{outline:2px solid var(--ambar);outline-offset:3px}
.comparar__play{position:absolute;z-index:4;right:14px;bottom:14px;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-pildora);font-size:11px;cursor:pointer}
.comparar:hover .comparar__asa{transform:translate(-50%,-50%) scale(1.08)}

/* =========================================================
   Testimonios: mensajes de WhatsApp
   ========================================================= */
.chats{columns:1;column-gap:14px;margin-top:clamp(32px,4vw,56px)}
.chat{break-inside:avoid;margin:0 0 14px;padding:16px;border-radius:var(--r-tarjeta);display:grid;gap:8px;justify-items:start}
.chat__cab{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.chat__av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--superficie);font-size:13px;font-weight:600}
.chat__cab b{display:block;font-size:15px;line-height:1.2}
.chat__cab small{display:block;color:var(--apoyo);font-size:10px}
.chat__resp{display:grid;gap:2px;padding:8px 12px;border-left:3px solid #4FBF9F;border-radius:8px;background:rgba(255,255,255,.06);font-size:13px}
.chat__resp b{color:#4FBF9F;font-size:13px}
.chat__resp span{display:flex;align-items:center;gap:6px;color:var(--apoyo-claro)}
.chat__resp svg{width:12px;height:12px}
.burbuja{position:relative;margin:0;max-width:100%;padding:9px 12px 8px;border-radius:4px 16px 16px 16px;background:#262220;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.burbuja__hora{display:inline-block;margin-left:10px;color:var(--apoyo);font-size:11px;white-space:nowrap;vertical-align:-1px}
.chat__reac{position:absolute;left:8px;bottom:-14px;padding:2px 6px;border-radius:999px;background:#262220;border:2px solid #121010;font-size:12px;line-height:1.2}
.burbuja:has(.chat__reac){margin-bottom:12px}

/* =========================================================
   Preguntas frecuentes
   ========================================================= */
.faq__rejilla{display:grid;gap:clamp(28px,4vw,64px);align-items:start}
.faq__lista{display:grid;gap:10px}
.faq__item{border:1px solid var(--linea);border-radius:var(--r-tarjeta);background:rgba(255,255,255,.03);transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.faq__item[open]{border-color:rgba(255,162,77,.45);background:rgba(255,107,44,.06)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:18px 22px;cursor:pointer;list-style:none;font-weight:500;font-size:clamp(17px,1.6vw,20px);line-height:1.3;letter-spacing:-.01em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary svg{flex:none;width:14px;height:14px;transition:transform .5s var(--ease)}
.faq__item[open] summary svg{transform:rotate(135deg) scale(1.15)}
.faq__r{padding:0 22px 20px}
.faq__r p{margin:0;color:var(--apoyo-claro);max-width:62ch}
.faq__r strong{font-family:var(--f-fuerte);font-weight:var(--w-fuerte);color:var(--texto)}

/* =========================================================
   Agenda: 3 preguntas antes del calendario
   ========================================================= */
.agenda{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;overflow-y:auto;background:rgba(8,7,6,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.agenda__caja{width:min(560px,100%);border-radius:var(--r-panel);padding:22px 22px 24px;background:rgba(26,22,20,.82);margin:auto}
.agenda__cab{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--apoyo)}
.agenda__cab p{margin:0}
.agenda__cerrar{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:transparent;cursor:pointer}
.agenda__t{margin:6px 0 0;font-weight:500;text-transform:uppercase;font-size:clamp(30px,6vw,44px);line-height:.95;letter-spacing:-.04em}
.agenda__t em{font-style:normal;color:var(--naranja);font-family:var(--f-fuerte);font-weight:var(--w-fuerte)}
.agenda__sub{margin:10px 0 18px;color:var(--apoyo-claro);font-size:15px}
.campo{display:grid;gap:6px;margin:0 0 14px;padding:0;border:0;min-width:0}
.campo>span,.campo legend{font-size:14px;color:var(--apoyo-claro);padding:0;margin-bottom:6px}
.campo input[type=text],.campo input[type=url]{min-height:48px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(14,12,11,.5);color:var(--texto);font:500 16px var(--f-display)}
.campo input:focus-visible{outline:2px solid var(--ambar);outline-offset:1px}
.campo--opciones{display:flex;flex-wrap:wrap;gap:8px}
.campo--opciones legend{width:100%}
.campo--opciones label{position:relative}
.campo--opciones input{position:absolute;opacity:0;inset:0;cursor:pointer}
.campo--opciones span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pildora);border:1px solid var(--linea);font-size:14px;transition:background-color .3s,border-color .3s,color .3s}
.campo--opciones input:checked+span{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.campo--opciones input:focus-visible+span{outline:2px solid var(--ambar);outline-offset:2px}
.agenda__error{margin:0 0 12px;color:var(--ambar);font-size:14px}
.agenda__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:6px}
.agenda__wa{color:var(--apoyo-claro);font-size:14px;text-underline-offset:3px}
.agenda__wa:hover{color:var(--texto)}

@media (min-width:760px){
  .chats{columns:2}
}
@media (min-width:900px){
  .comparador__cab{grid-template-columns:1fr auto;align-items:end}
  .faq__rejilla{grid-template-columns:.8fr 1.2fr}
  .faq__rejilla>div:first-child{position:sticky;top:110px}
}
@media (min-width:1100px){ .chats{columns:3} }
@media (hover:hover) and (pointer:fine){
  .chat{transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
  .chat:hover{transform:translateY(-4px);box-shadow:var(--sombra-vidrio),0 0 0 1px rgba(255,162,77,.18),0 22px 50px rgba(255,107,44,.14)}
  .faq__item:hover{border-color:rgba(255,162,77,.35)}
  .faq__item summary:hover svg{transform:rotate(90deg)}
  .campo--opciones span:hover{border-color:var(--naranja)}
}