:root{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Tipografias servidas desde el propio servidor.
   Descargadas de Google Fonts el 7-sep-2026, solo latin y latin-ext.
   Motivo: el pliego (apartado 14) recomienda lanzar sin peticiones a terceros. */

/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/00c371950b3b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/eddba2ef40ac.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/00c371950b3b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/eddba2ef40ac.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/00c371950b3b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/eddba2ef40ac.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/00c371950b3b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/eddba2ef40ac.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/521e24d1741e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/1dc044f4824f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/521e24d1741e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/1dc044f4824f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/521e24d1741e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/1dc044f4824f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/521e24d1741e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/1dc044f4824f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/0fd8012915bb.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/7e48d54b1df1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/0c1938956434.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fuentes/bba020c0fd04.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/b2accf62f0f2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/fffe793f5260.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/a83d28cf2a3d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/6af69d307c33.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ClowdWork.com — sistema visual v2
   Paleta y tipografias del clowdwork.com vivo.
   ============================================================ */

:root{
  --azul:        #00318b;
  --azul-hondo:  #00246a;
  --azul-claro:  #6b93d6;
  --azul-suave:  #e8f0fd;
  --azul-niebla: #f4f8fe;

  --tinta:       #1c2839;
  --tinta-media:    #2b2c50;
  --texto:          #4c4f6b;
  --texto-suave:    #74789a;
  --linea:          #e9e6f5;
  --linea-firme:    #d8d3ee;
  --blanco:         #ffffff;

  --verde:       #6ab23a;
  --ambar:          #f0a020;
  --coral:          #f0603c;

  --ancho:          1240px;
  --ancho-estrecho: 780px;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;

  --s1: 0 1px 2px rgba(14,15,43,.05);
  --s2: 0 4px 12px rgba(14,15,43,.06), 0 1px 3px rgba(14,15,43,.04);
  --s3: 0 18px 40px -12px rgba(14,15,43,.16), 0 4px 12px rgba(14,15,43,.05);
  --s4: 0 40px 90px -24px rgba(6,32,84,.30), 0 12px 30px -12px rgba(14,15,43,.14);

  --seccion: 116px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Figtree','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px; line-height:1.7;
  color:var(--texto); background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Poppins','Figtree',sans-serif;
  color:var(--tinta); line-height:1.14; letter-spacing:-.028em;
  margin:0 0 .55em; font-weight:600;
}
h1{ font-size:clamp(2.4rem,5vw,4rem); font-weight:700; letter-spacing:-.038em; }
h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:600; letter-spacing:-.032em; }
h3{ font-size:clamp(1.15rem,1.6vw,1.4rem); }
h4{ font-size:1rem; }

p{ margin:0 0 1.15em; } p:last-child{ margin-bottom:0; }
a{ color:var(--azul); text-decoration:none; }
a:hover{ text-decoration:underline; }
img,svg{ max-width:100%; }

/* ---------- estructura ---------- */
.envoltura{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 28px; }
.estrecho{ max-width:var(--ancho-estrecho); margin-left:auto; margin-right:auto; }
section{ padding:var(--seccion) 0; position:relative; }
section.apretada{ padding:72px 0; }
section.alt{ background:var(--azul-niebla); }
.centrado{ text-align:center; }

section.oscura{
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(120,72,255,.34), transparent 60%),
    radial-gradient(700px 460px at 8% 110%, rgba(0,49,139,.26), transparent 62%),
    var(--tinta);
  color:#b9bcdd;
}
section.oscura h1,section.oscura h2,section.oscura h3,section.oscura h4{ color:var(--blanco); }

.cintillo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Poppins',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--azul);
  margin-bottom:20px;
}
.cintillo::before{ content:''; width:20px; height:1.5px; background:var(--azul-claro); }
.centrado .cintillo::before{ display:none; }
.oscura .cintillo{ color:var(--azul-claro); }

.entradilla{ font-size:1.12rem; color:var(--texto); max-width:64ch; }
.centrado .entradilla{ margin-left:auto; margin-right:auto; }
.oscura .entradilla{ color:#a8abd0; }

/* ---------- botones ---------- */
.boton{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Poppins',sans-serif; font-size:.95rem; font-weight:600;
  padding:15px 28px; border-radius:var(--r-s);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.boton:hover{ text-decoration:none; transform:translateY(-2px); }
.boton-primario{
  background:linear-gradient(180deg,#0a44a8,var(--azul));
  color:var(--blanco); box-shadow:0 10px 24px -6px rgba(0,49,139,.5);
}
.boton-primario:hover{ background:linear-gradient(180deg,var(--azul),var(--azul-hondo)); color:var(--blanco); box-shadow:0 16px 32px -8px rgba(0,49,139,.55); }
.boton-secundario{ background:var(--blanco); color:var(--tinta); border-color:var(--linea-firme); box-shadow:var(--s1); }
.boton-secundario:hover{ border-color:var(--azul-claro); color:var(--azul); }
.oscura .boton-secundario{ background:rgba(255,255,255,.07); color:var(--blanco); border-color:rgba(255,255,255,.24); }
.oscura .boton-secundario:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.45); }

.enlace-flecha{ font-family:'Poppins',sans-serif; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.enlace-flecha:hover{ text-decoration:none; }
.enlace-flecha .f{ transition:transform .18s ease; display:inline-block; }
.enlace-flecha:hover .f{ transform:translateX(4px); }

.botonera{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; align-items:center; }
.centrado .botonera{ justify-content:center; }

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cabecera.pegada{ border-bottom-color:var(--linea); box-shadow:0 1px 20px rgba(14,15,43,.05); }
.cabecera .envoltura{ display:flex; align-items:center; gap:26px; height:76px; }

.marca{ display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.2rem; color:var(--tinta); letter-spacing:-.03em; }
.marca:hover{ text-decoration:none; }
.marca .punto{
  width:22px; height:22px; border-radius:7px; display:inline-block;
  background:linear-gradient(135deg,#1a55c9,var(--azul));
  box-shadow:0 4px 10px -2px rgba(0,49,139,.5);
  position:relative;
}
.marca .punto::after{ content:''; position:absolute; inset:6px 6px auto auto; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.9); }

.menu{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.menu a{ font-family:'Poppins',sans-serif; font-size:.92rem; font-weight:500; color:var(--tinta-media); padding:9px 13px; border-radius:8px; }
.menu a:hover{ text-decoration:none; background:var(--azul-suave); color:var(--azul); }
.menu a.activo{ color:var(--azul); font-weight:600; }

.acciones{ display:flex; align-items:center; gap:12px; }
.idiomas{ display:flex; gap:1px; border:1px solid var(--linea); border-radius:9px; padding:3px; background:var(--blanco); }
.idiomas button{ font-family:'Poppins',sans-serif; font-size:.76rem; font-weight:600; background:none; border:0; cursor:pointer; color:var(--texto-suave); padding:6px 10px; border-radius:6px; transition:.15s; }
.idiomas button.activo{ background:var(--azul); color:var(--blanco); }

.hamburguesa{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.hamburguesa span{ display:block; width:22px; height:2px; background:var(--tinta); margin:5px 0; border-radius:2px; }

/* ---------- hero ---------- */
.hero{
  padding:calc(var(--seccion) - 8px) 0 var(--seccion);
  background:
    radial-gradient(1200px 620px at 74% -14%, rgba(107,147,214,.30), transparent 58%),
    radial-gradient(820px 520px at -6% 6%,  rgba(0,49,139,.11), transparent 58%),
    linear-gradient(180deg,#fdfcff,var(--blanco) 62%);
  overflow:hidden;
}
.hero::after{
  content:''; position:absolute; inset:auto 0 -1px 0; height:1px; background:var(--linea);
}
.hero h1{ max-width:16ch; }
.hero.centrado h1{ max-width:22ch; margin-inline:auto; }
.hero .entradilla{ font-size:1.19rem; }

.confianza{
  margin-top:46px; padding-top:24px; border-top:1px solid var(--linea);
  font-size:.9rem; color:var(--texto-suave); display:flex; align-items:center; gap:10px;
}
.confianza .globo{ width:7px; height:7px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 4px rgba(106,178,58,.14); flex:none; }

/* ---------- rejillas ---------- */
.rejilla{ display:grid; gap:24px; }
.rejilla-2{ grid-template-columns:repeat(2,1fr); }
.rejilla-3{ grid-template-columns:repeat(3,1fr); }
.rejilla-4{ grid-template-columns:repeat(4,1fr); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.split.ancho-visual{ grid-template-columns:.92fr 1.08fr; }
.split.texto-derecha > *:first-child{ order:2; }

/* ---------- tarjetas ---------- */
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-m); padding:30px; box-shadow:var(--s1);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--s3); border-color:var(--linea-firme); }
.tarjeta h3{ font-size:1.1rem; margin-bottom:.5em; }
.tarjeta p{ font-size:.96rem; color:var(--texto-suave); margin:0; }
.oscura .tarjeta{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.13); box-shadow:none; backdrop-filter:blur(8px); }
.oscura .tarjeta:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.25); }
.oscura .tarjeta p{ color:#a8abd0; }
.tarjeta .marca-tiempo{
  font-family:'Poppins',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--azul);
  display:block; margin-bottom:10px;
}

.icono-caja{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--azul-suave),#e9e2ff);
  color:var(--azul); margin-bottom:20px; font-size:1.15rem;
  border:1px solid rgba(0,49,139,.12);
}
.oscura .icono-caja{ background:rgba(107,147,214,.16); border-color:rgba(107,147,214,.28); color:var(--azul-claro); }

.lista-check{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
.lista-check li{ position:relative; padding-left:31px; font-size:1rem; }
.lista-check li::before{
  content:''; position:absolute; left:0; top:.42em; width:19px; height:19px; border-radius:6px;
  background:var(--azul-suave); border:1px solid rgba(0,49,139,.2);
}
.lista-check li::after{
  content:''; position:absolute; left:6px; top:.72em; width:5px; height:9px;
  border:solid var(--azul); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.oscura .lista-check li::before{ background:rgba(107,147,214,.16); border-color:rgba(107,147,214,.3); }
.oscura .lista-check li::after{ border-color:var(--azul-claro); }

.etiquetas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.etiqueta{
  font-family:'Poppins',sans-serif; font-size:.86rem; font-weight:500;
  padding:9px 18px; border-radius:999px;
  background:var(--blanco); color:var(--tinta-media);
  border:1px solid var(--linea-firme); box-shadow:var(--s1);
}
.etiqueta.viva{ background:var(--azul-suave); color:var(--azul); border-color:rgba(0,49,139,.18); }

/* ---------- banda de cifras ---------- */
.banda{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-m); overflow:hidden; }
.banda > div{ background:var(--blanco); padding:32px 26px; }
.banda.cinco{ grid-template-columns:repeat(5,1fr); }
.banda.cinco > div{ padding:30px 20px; }
.banda.cinco .cifra{ font-size:1.75rem; }
.banda .cifra{ font-family:'Poppins',sans-serif; font-size:2.1rem; font-weight:700; color:var(--tinta); letter-spacing:-.04em; line-height:1.1; display:block; }
.banda .pie-cifra{ font-size:.9rem; color:var(--texto-suave); margin-top:6px; display:block; }

/* ---------- pasos (flujo numerado) ---------- */
.pasos{ list-style:none; padding:0; margin:40px 0 0; display:grid; gap:0; grid-auto-flow:column; grid-auto-columns:1fr; position:relative; }
.pasos li::after{
  content:''; position:absolute; top:21px; left:50%; width:100%; height:2px; z-index:0;
  background:linear-gradient(90deg,var(--linea-firme),var(--azul-claro));
}
.pasos li:last-child::after{ display:none; }
.pasos li{ position:relative; text-align:center; padding:0 10px; }
.pasos .n{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px;
  background:var(--blanco); border:2px solid var(--linea-firme); position:relative; z-index:1;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.9rem; color:var(--texto-suave);
  transition:.2s;
}
.pasos li:last-child .n{ background:linear-gradient(180deg,#0a44a8,var(--azul)); border-color:var(--azul); color:var(--blanco); box-shadow:0 8px 20px -6px rgba(0,49,139,.5); }
.pasos .t{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem; color:var(--tinta); display:block; }
.pasos .d{ font-size:.86rem; color:var(--texto-suave); display:block; margin-top:4px; }
.oscura .pasos li::after{ background:linear-gradient(90deg,rgba(255,255,255,.22),var(--azul-claro)); }
.oscura .pasos .n{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:#c9cbe8; }
.oscura .pasos .t{ color:var(--blanco); }
.oscura .pasos .d{ color:#a8abd0; }

/* flujo compacto en linea */
.flujo{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:30px 0 0; padding:0; list-style:none; }
.centrado .flujo{ justify-content:center; }
.flujo li{
  font-family:'Poppins',sans-serif; font-size:.86rem; font-weight:600; color:var(--tinta-media);
  background:var(--blanco); border:1px solid var(--linea-firme); border-radius:999px;
  padding:9px 17px; box-shadow:var(--s1); white-space:nowrap;
}
.flujo li.destacado{ background:linear-gradient(180deg,#0a44a8,var(--azul)); color:var(--blanco); border-color:transparent; box-shadow:0 8px 18px -6px rgba(0,49,139,.5); }
.flujo .paso-sep{ background:none; border:0; box-shadow:none; padding:0; color:var(--azul-claro); font-weight:700; }
.oscura .flujo li{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:var(--blanco); box-shadow:none; }
.oscura .flujo .paso-sep{ background:none; border:0; }

/* ============================================================
   PANELES DE PRODUCTO (maqueta ilustrativa, no capturas)
   ============================================================ */

.panel{
  position:relative; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--r-l);
  box-shadow:var(--s4); overflow:hidden;
}
.panel.flota{ transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg); }
.hero .panel{ transform:none; }

.panel-barra{
  display:flex; align-items:center; gap:9px;
  padding:13px 18px; border-bottom:1px solid var(--linea);
  background:linear-gradient(180deg,#fbfaff,#f6f4ff);
}
.panel-barra .luces{ display:flex; gap:6px; }
.panel-barra .luces i{ width:9px; height:9px; border-radius:50%; background:var(--linea-firme); display:block; }
.panel-barra .ruta{
  font-family:'Poppins',sans-serif; font-size:.76rem; font-weight:600; color:var(--texto-suave);
  background:var(--blanco); border:1px solid var(--linea); border-radius:6px; padding:4px 12px; margin-left:6px;
}
.panel-cuerpo{ padding:24px; display:grid; gap:20px; }

.sello-ilustrativo{
  position:absolute; top:14px; right:14px; z-index:3;
  font-family:'Poppins',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--azul); background:rgba(255,255,255,.92);
  border:1px solid var(--azul-claro); border-radius:999px; padding:4px 11px;
  backdrop-filter:blur(6px);
}

.panel-titulo{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.panel-titulo .t4{ margin:0; font-size:1.02rem; letter-spacing:-.02em; }
.panel-titulo .sub{ font-size:.8rem; color:var(--texto-suave); }

/* tejas de metrica */
.tejas{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.teja{ border:1px solid var(--linea); border-radius:var(--r-s); padding:15px 16px; background:var(--azul-niebla); }
.teja .et{ font-size:.73rem; color:var(--texto-suave); display:block; margin-bottom:5px; letter-spacing:.01em; }
.teja .vl{ font-family:'Poppins',sans-serif; font-size:1.45rem; font-weight:700; color:var(--tinta); letter-spacing:-.03em; line-height:1; }
.teja .dl{ font-size:.74rem; font-weight:600; margin-left:6px; }
.dl.sube{ color:var(--verde); } .dl.baja{ color:var(--coral); } .dl.igual{ color:var(--texto-suave); }

/* barras */
.barras{ display:flex; align-items:flex-end; gap:7px; height:96px; padding-top:6px; }
.barras i{ flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--azul-claro),rgba(107,147,214,.35)); display:block; }
.barras i.pico{ background:linear-gradient(180deg,#1a55c9,var(--azul)); }
.ejes{ display:flex; justify-content:space-between; font-size:.68rem; color:var(--texto-suave); margin-top:8px; }

/* filas de senal */
.senales{ display:grid; gap:0; border:1px solid var(--linea); border-radius:var(--r-s); overflow:hidden; }
.senal{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-bottom:1px solid var(--linea); font-size:.86rem; }
.senal:last-child{ border-bottom:0; }
.senal .punto{ width:8px; height:8px; border-radius:50%; flex:none; }
.senal .punto.alta{ background:var(--coral); box-shadow:0 0 0 3px rgba(240,96,60,.14); }
.senal .punto.media{ background:var(--ambar); box-shadow:0 0 0 3px rgba(240,160,32,.14); }
.senal .punto.baja{ background:var(--verde); box-shadow:0 0 0 3px rgba(106,178,58,.14); }
.senal .txt{ color:var(--tinta-media); flex:1; }
.senal .meta{ color:var(--texto-suave); font-size:.78rem; white-space:nowrap; }

/* barras de cobertura (talento) */
.cobertura{ display:grid; gap:14px; }
.cob{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; font-size:.86rem; }
.cob .nb{ color:var(--tinta-media); font-weight:500; }
.cob .vl{ color:var(--texto-suave); font-size:.78rem; }
.cob .pista{ grid-column:1/-1; height:8px; border-radius:99px; background:var(--azul-suave); overflow:hidden; }
.cob .relleno{ height:100%; border-radius:99px; background:linear-gradient(90deg,#1a55c9,var(--azul-claro)); display:block; }
.cob .relleno.riesgo{ background:linear-gradient(90deg,var(--coral),#f8a58c); }

/* chat de Ask Intelligence */
.chat{ display:grid; gap:12px; }
.burbuja{ max-width:86%; padding:13px 17px; border-radius:16px; font-size:.9rem; line-height:1.6; }
.burbuja.tu{ justify-self:end; background:linear-gradient(180deg,#0a44a8,var(--azul)); color:var(--blanco); border-bottom-right-radius:5px; }
.burbuja.ia{ justify-self:start; background:var(--azul-niebla); border:1px solid var(--linea); color:var(--tinta-media); border-bottom-left-radius:5px; }
.burbuja.ia b{ color:var(--tinta); }
.sugerencias{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.sugerencia{
  font-size:.8rem; font-family:'Figtree',sans-serif; color:var(--azul);
  background:var(--blanco); border:1px solid var(--linea-firme); border-radius:999px;
  padding:7px 14px; cursor:pointer; transition:.15s; text-align:left;
}
.sugerencia:hover{ border-color:var(--azul); background:var(--azul-suave); }
.sugerencia.activa{ background:var(--azul); color:var(--blanco); border-color:var(--azul); }

/* dispersion impacto / esfuerzo */
.disperso{ width:100%; height:auto; display:block; }

/* pestanas de Intelligence over time */
.pestanas{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:40px 0 34px;
  background:var(--blanco); border:1px solid var(--linea); border-radius:14px; padding:6px; width:fit-content; margin-inline:auto; box-shadow:var(--s2); }
.pestanas button{
  font-family:'Poppins',sans-serif; font-size:.87rem; font-weight:600; color:var(--texto-suave);
  background:none; border:0; cursor:pointer; padding:11px 22px; border-radius:9px; transition:.18s;
}
.pestanas button:hover{ color:var(--azul); background:var(--azul-suave); }
.pestanas button.activa{ background:linear-gradient(180deg,#0a44a8,var(--azul)); color:var(--blanco); box-shadow:0 8px 18px -8px rgba(0,49,139,.6); }
.hoja[hidden]{ display:none; }
.hoja{ animation:aparece .4s cubic-bezier(.2,.8,.3,1); }
@keyframes aparece{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- hueco (lo que sigue pendiente de verdad) ---------- */
.hueco{
  border:1.5px dashed var(--linea-firme); border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--azul-niebla),var(--blanco));
  min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:36px; gap:7px;
}
.hueco .icono{ width:42px; height:42px; border-radius:11px; background:var(--azul-suave); display:grid; place-items:center; color:var(--azul); font-size:1.2rem; margin-bottom:4px; }
.hueco .titulo{ font-family:'Poppins',sans-serif; font-weight:600; color:var(--tinta); font-size:1rem; }
.hueco .nota{ font-size:.84rem; color:var(--texto-suave); max-width:34ch; }
.hueco .sello{ font-family:'Poppins',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--azul); background:var(--blanco); padding:5px 12px; border-radius:999px; border:1px solid var(--azul-claro); margin-top:5px; }

/* ---------- aviso ---------- */
.aviso{ border-left:3px solid var(--azul); background:var(--azul-suave); padding:20px 24px; border-radius:0 var(--r-s) var(--r-s) 0; font-size:.98rem; color:var(--tinta-media); }
.aviso.pendiente{ border-color:var(--ambar); background:#fff8e9; color:#6b4e00; }
.oscura .aviso{ background:rgba(107,147,214,.12); border-color:var(--azul-claro); color:#d7d9f2; }

/* ---------- formulario ---------- */
.formulario{ display:grid; gap:18px; }
.campo{ display:grid; gap:7px; }
.campo label{ font-family:'Poppins',sans-serif; font-size:.87rem; font-weight:600; color:var(--tinta); }
.campo input,.campo textarea{
  font-family:inherit; font-size:1rem; color:var(--tinta);
  padding:14px 16px; border:1px solid var(--linea-firme); border-radius:var(--r-s);
  background:var(--blanco); width:100%; transition:.15s;
}
.campo input:focus,.campo textarea:focus{ outline:0; border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,49,139,.12); }
.consentimiento{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--texto-suave); }
.consentimiento input{ width:18px; height:18px; margin-top:3px; flex:none; accent-color:var(--azul); }
.obligatorio{ color:var(--azul); font-weight:700; }

/* ---------- pie ---------- */
.pie{ background:var(--tinta); color:#8f92b8; padding:80px 0 34px; font-size:.93rem; }
.pie a{ color:#c3c5e4; } .pie a:hover{ color:var(--blanco); }
.pie .pie-titulo{ color:var(--blanco); font-family:'Poppins',sans-serif; font-weight:600; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px; }
.pie-rejilla{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:44px; }
.pie ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.pie .marca{ color:var(--blanco); margin-bottom:16px; }
.pie-legal{ margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.09); display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; font-size:.85rem; color:#787ba3; }

/* ---------- tabla ---------- */
.tabla-datos{ width:100%; border-collapse:collapse; margin-top:24px; font-size:.96rem; }
.tabla-datos th,.tabla-datos td{ text-align:left; padding:15px 16px; border-bottom:1px solid var(--linea); vertical-align:top; }
.tabla-datos th{ font-family:'Poppins',sans-serif; font-weight:600; color:var(--tinta); width:34%; }

/* ---------- aparicion al hacer scroll ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.rv.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .hoja{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  :root{ --seccion:82px; }
  .split,.split.ancho-visual{ grid-template-columns:1fr; gap:44px; }
  .split.texto-derecha > *:first-child{ order:0; }
  .panel.flota{ transform:none; }
  .rejilla-4,.rejilla-3{ grid-template-columns:repeat(2,1fr); }
  .banda{ grid-template-columns:repeat(2,1fr); }
  .banda.cinco{ grid-template-columns:repeat(2,1fr); }
  .pasos{ grid-auto-flow:row; grid-auto-columns:auto; gap:26px; text-align:left; }
  .pasos li::after{ top:44px; left:21px; width:2px; height:calc(100% + 26px); background:linear-gradient(180deg,var(--linea-firme),var(--azul-claro)); }
  .oscura .pasos li::after{ background:linear-gradient(180deg,rgba(255,255,255,.22),var(--azul-claro)); }
  .pasos li{ display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; text-align:left; padding:0; }
  .pasos .n{ margin:0; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  :root{ --seccion:64px; }
  .menu{ display:none; position:absolute; top:76px; left:0; right:0; background:var(--blanco); border-bottom:1px solid var(--linea); flex-direction:column; align-items:stretch; padding:14px 20px 22px; gap:2px; box-shadow:var(--s3); }
  .menu.abierto{ display:flex; }
  .menu a{ padding:13px 12px; }
  .hamburguesa{ display:block; }
  .acciones .boton{ display:none; }
  .acciones{ order:3; }
  .cabecera .envoltura{ gap:12px; position:relative; }
  .rejilla-2,.rejilla-3,.rejilla-4{ grid-template-columns:1fr; }
  .banda{ grid-template-columns:1fr; }
  .banda.cinco{ grid-template-columns:1fr; }
  .pie-rejilla{ grid-template-columns:1fr; gap:32px; }
  .tejas{ grid-template-columns:1fr; }
  .flujo{ flex-direction:column; align-items:flex-start; gap:6px; }
  .centrado .flujo{ align-items:center; }
  .flujo li{ white-space:normal; }
  .flujo .paso-sep{ transform:rotate(90deg); }
  .pestanas{ width:100%; justify-content:stretch; }
  .pestanas button{ flex:1; padding:10px 8px; font-size:.8rem; }
  .boton{ width:100%; justify-content:center; }
  .botonera{ flex-direction:column; align-items:stretch; }
  .panel-cuerpo{ padding:18px; }
  .tabla-datos,.tabla-datos tbody,.tabla-datos tr,.tabla-datos th,.tabla-datos td{ display:block; width:auto; }
  .tabla-datos tr{ padding:16px 0; border-bottom:1px solid var(--linea); }
  .tabla-datos th,.tabla-datos td{ border:0; padding:0; }
  .tabla-datos th{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:5px; width:auto; }
  .tabla-datos td{ overflow-wrap:anywhere; }
}

/* ============================================================
   v3 — informes reales, seguridad y movimiento
   ============================================================ */

/* ---------- movimiento: barras, rellenos y cifras ---------- */
/* El estado final es el de por defecto. La animacion la ANADE .animar.
   Asi una captura, una pestana oculta o un observador que no dispara
   ensenan el grafico entero, nunca uno vacio. */
.barras.animar i{ animation:sube .9s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes sube{ from{ height:2%; } }
.cob.animar .relleno{ animation:crece 1.1s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes crece{ from{ width:0; } }
.disperso.animar circle{ animation:brota .6s cubic-bezier(.34,1.56,.64,1) backwards; }
@keyframes brota{ from{ opacity:0; r:0; } }
@media (prefers-reduced-motion:reduce){
  .barras.animar i,.cob.animar .relleno,.disperso.animar circle{ animation:none; }
}
.vl b{ font-weight:inherit; font-variant-numeric:tabular-nums; }

/* ---------- la familia de informes ---------- */
.informes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.informe{
  position:relative; background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-m); padding:28px 26px 26px; box-shadow:var(--s1);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
  display:flex; flex-direction:column; gap:14px;
}
.informe:hover{ transform:translateY(-4px); box-shadow:var(--s3); border-color:var(--azul-claro); }
.informe .cadencia{
  font-family:'Poppins',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--azul);
  background:var(--azul-suave); border:1px solid rgba(0,49,139,.16);
  border-radius:999px; padding:5px 12px; align-self:flex-start;
}
.informe h3{ margin:0; font-size:1.08rem; }
.informe .responde{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.informe .responde li{
  position:relative; padding-left:20px; font-size:.9rem; color:var(--texto-suave); line-height:1.5;
}
.informe .responde li::before{
  content:'?'; position:absolute; left:0; top:0;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.8rem; color:var(--azul-claro);
}
.informe .ruta{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--linea);
  font-family:'Poppins',sans-serif; font-size:.74rem; color:var(--texto-suave); letter-spacing:.02em;
}

/* ---------- seguridad: aviso ---------- */
.avisos{ display:grid; gap:12px; }
.aviso-fila{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start;
  border:1px solid var(--linea); border-left:3px solid var(--linea-firme);
  border-radius:var(--r-s); padding:15px 17px; background:var(--blanco);
}
.aviso-fila.rojo{ border-left-color:var(--coral); }
.aviso-fila.ambar{ border-left-color:var(--ambar); }
.aviso-fila.gris{ border-left-color:var(--texto-suave); }
.aviso-fila .grado{
  font-family:'Poppins',sans-serif; font-size:.63rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:4px 9px; border-radius:5px; white-space:nowrap;
}
.rojo .grado{ background:rgba(240,96,60,.12); color:#c93d1c; }
.ambar .grado{ background:rgba(240,160,32,.14); color:#8a5c00; }
.gris .grado{ background:var(--azul-suave); color:var(--texto-suave); }
.aviso-fila .cuerpo{ font-size:.9rem; color:var(--tinta-media); }
.aviso-fila .cuerpo small{ display:block; color:var(--texto-suave); font-size:.8rem; margin-top:3px; }
.aviso-fila .hora{ font-size:.78rem; color:var(--texto-suave); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* lo que NO hace */
.no-hace{ display:grid; gap:11px; list-style:none; padding:0; margin:26px 0 0; }
.no-hace li{ position:relative; padding-left:32px; font-size:1rem; color:var(--texto); }
.no-hace li::before{
  content:''; position:absolute; left:0; top:.42em; width:19px; height:19px; border-radius:50%;
  background:rgba(240,96,60,.1); border:1px solid rgba(240,96,60,.3);
}
.no-hace li::after{
  content:''; position:absolute; left:5.5px; top:.72em; width:8px; height:8px;
  background:
    linear-gradient(45deg,transparent 44%,var(--coral) 44%,var(--coral) 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,var(--coral) 44%,var(--coral) 56%,transparent 56%);
}
.oscura .no-hace li{ color:#b9bcdd; }

/* niveles de evidencia */
.niveles{ display:grid; gap:14px; counter-reset:niv; }
.nivel{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  border:1px solid var(--linea); border-radius:var(--r-m); padding:22px 24px; background:var(--blanco);
}
.nivel .num{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--azul-suave); color:var(--azul); border:1px solid rgba(0,49,139,.16);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.9rem;
}
.nivel.encendible .num{ background:rgba(240,160,32,.12); color:#8a5c00; border-color:rgba(240,160,32,.3); }
.nivel h3{ margin:0 0 5px; font-size:1rem; }
.nivel p{ margin:0; font-size:.93rem; color:var(--texto-suave); }

/* alcance por rol */
.roles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.rol{ border:1px solid var(--linea); border-radius:var(--r-m); padding:22px; background:var(--blanco); }
.rol .quien{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.97rem; color:var(--tinta); display:block; margin-bottom:6px; }
.rol .ve{ font-size:.88rem; color:var(--texto-suave); }
.oscura .rol{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.13); }
.oscura .rol .quien{ color:var(--blanco); }
.oscura .rol .ve{ color:#a8abd0; }

@media (max-width:1060px){
  .informes{ grid-template-columns:repeat(2,1fr); }
  .roles{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .informes{ grid-template-columns:1fr; }
  .roles{ grid-template-columns:1fr; }
  .aviso-fila{ grid-template-columns:1fr; gap:8px; }
  .aviso-fila .hora{ order:3; }
}

/* ============================================================
   Accesibilidad — foco visible y salto al contenido
   ============================================================ */

.salto{
  position:absolute; left:14px; top:-70px; z-index:99;
  font-family:'Poppins',sans-serif; font-size:.9rem; font-weight:600;
  background:var(--azul); color:var(--blanco);
  padding:13px 22px; border-radius:0 0 var(--r-s) var(--r-s);
  transition:top .18s ease;
}
.salto:focus{ top:0; text-decoration:none; outline:2px solid var(--blanco); outline-offset:-5px; }

:focus-visible{
  outline:3px solid var(--azul);
  outline-offset:3px;
  border-radius:4px;
}
.oscura :focus-visible,.pie :focus-visible{ outline-color:var(--azul-claro); }
.boton:focus-visible{ outline-offset:4px; }
:focus:not(:focus-visible){ outline:none; }

main:focus{ outline:none; }

/* ============================================================
   v4 — por rol, preguntas frecuentes y confianza
   ============================================================ */

/* ---------- por rol ---------- */
.roles-uso{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.rol-uso{
  position:relative; background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-m); padding:28px 26px; box-shadow:var(--s1);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
  display:block; text-decoration:none;
}
.rol-uso:hover{ transform:translateY(-4px); box-shadow:var(--s3); border-color:var(--azul-claro); text-decoration:none; }
.rol-uso .cargo{
  font-family:'Poppins',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--azul); display:block; margin-bottom:12px;
}
.rol-uso h3{ font-size:1.05rem; margin:0 0 8px; }
.rol-uso p{ font-size:.94rem; color:var(--texto-suave); margin:0; }
.rol-uso .flecha{
  margin-top:16px; display:inline-flex; align-items:center; gap:6px;
  font-family:'Poppins',sans-serif; font-size:.85rem; font-weight:600; color:var(--azul);
}
.rol-uso:hover .flecha .f{ transform:translateX(4px); }
.rol-uso .flecha .f{ transition:transform .18s ease; display:inline-block; }

/* ---------- preguntas frecuentes ---------- */
.faq{ display:grid; gap:12px; margin-top:44px; }
.faq details{
  border:1px solid var(--linea); border-radius:var(--r-m); background:var(--blanco);
  box-shadow:var(--s1); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease;
}
.faq details[open]{ border-color:var(--azul-claro); box-shadow:var(--s2); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 60px 22px 26px; position:relative;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:1.02rem; color:var(--tinta);
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--azul); }
.faq summary::after{
  content:''; position:absolute; right:26px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq .respuesta{ padding:0 26px 24px; font-size:1rem; color:var(--texto); }
.faq .respuesta p{ margin:0 0 .8em; } .faq .respuesta p:last-child{ margin:0; }
.faq details[open] .respuesta{ animation:aparece .32s cubic-bezier(.2,.8,.3,1); }

/* ---------- confianza: lo que sí y lo que no ---------- */
.dos-columnas{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.columna{ border:1px solid var(--linea); border-radius:var(--r-m); padding:30px; background:var(--blanco); }
.columna.si{ border-top:3px solid var(--verde); }
.columna.no{ border-top:3px solid var(--coral); }
.columna h3{ font-size:1.05rem; margin-bottom:18px; }
.columna ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.columna li{ position:relative; padding-left:29px; font-size:.97rem; color:var(--texto); }
.columna.si li::before{ content:''; position:absolute; left:2px; top:.5em; width:10px; height:6px; border:solid var(--verde); border-width:0 0 2.5px 2.5px; transform:rotate(-45deg); }
.columna.no li::before{
  content:''; position:absolute; left:1px; top:.42em; width:11px; height:11px;
  background:
    linear-gradient(45deg,transparent 42%,var(--coral) 42%,var(--coral) 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,var(--coral) 42%,var(--coral) 58%,transparent 58%);
}

/* ---------- plataformas ---------- */
.plataformas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }
.plataforma{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Poppins',sans-serif; font-size:.92rem; font-weight:600; color:var(--tinta);
  background:var(--blanco); border:1px solid var(--linea-firme); border-radius:var(--r-s);
  padding:13px 22px; box-shadow:var(--s1);
}
.plataforma .g{ font-size:1.1rem; color:var(--azul); }

@media (max-width:1060px){ .roles-uso{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .roles-uso{ grid-template-columns:1fr; }
  .dos-columnas{ grid-template-columns:1fr; }
  .faq summary{ padding:19px 52px 19px 20px; font-size:.98rem; }
  .faq .respuesta{ padding:0 20px 20px; }
}

/* ============================================================
   v5 — PANELES DE PRODUCTO CON EL LENGUAJE REAL
   Tokens sacados de clowdwork_reporte_02/styles.css:
   azul #1d5cf5 · verde #16a267 · violeta #7256d8 · ámbar #d87908
   Inter, radio 18/12, sombra 0 14px 35px rgba(32,52,88,.08)
   ============================================================ */

.app{
  --p-bg:#f4f7fb; --p-sup:#fff; --p-sup-suave:#f8faff;
  --p-tinta:#111827; --p-mudo:#667085; --p-linea:#e3e9f2;
  --p-azul:#1d5cf5; --p-azul-s:#edf3ff;
  --p-verde:#16a267; --p-verde-s:#eaf9f1;
  --p-violeta:#7256d8; --p-violeta-s:#f1edff;
  --p-ambar:#d87908; --p-ambar-s:#fff6e6;
  --p-rojo:#dc3f45; --p-rojo-s:#fff0f1;
  --p-r:18px; --p-rs:12px;

  position:relative;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--p-bg);
  border:1px solid var(--p-linea);
  border-radius:var(--r-l);
  box-shadow:var(--s4);
  overflow:hidden;
  display:grid; grid-template-columns:auto 1fr;
  font-size:13px; line-height:1.45; color:var(--p-tinta);
}
.app *{ box-sizing:border-box; }
.app.flota{ transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg); }
.hero .app.flota{ transform:none; }

/* ---------- barra lateral ---------- */
.app-lateral{ width:184px; background:var(--p-sup); border-right:1px solid var(--p-linea); padding:18px 14px; display:flex; flex-direction:column; gap:20px; }
.app-marca{ display:flex; align-items:center; gap:9px; padding:0 4px; }
.app-marca .cw{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,#1a55c9,var(--p-azul)); color:#fff;
  font-weight:700; font-size:11px; letter-spacing:.02em;
}
.app .t4,.app .t5,.app .t6,.panel .t4{ font-family:inherit; margin:0; }
.app-marca b{ font-size:13.5px; font-weight:700; color:var(--p-tinta); display:block; line-height:1.2; }
.app-marca span{ font-size:10.5px; color:var(--p-mudo); display:block; }
.app-nav{ display:grid; gap:2px; }
.app-nav a{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px;
  font-size:12.5px; color:var(--p-mudo); text-decoration:none; font-weight:500;
}
.app-nav a .p{ width:14px; text-align:center; opacity:.65; font-size:11px; }
.app-nav a.act{ background:var(--p-azul-s); color:var(--p-azul); font-weight:600; }
.app-nav a.act .p{ opacity:1; }
.app-promo{
  margin-top:auto; border:1px solid var(--p-linea); border-radius:var(--p-rs);
  padding:13px; background:var(--p-sup-suave);
}
.app-promo .et{ font-size:10.5px; font-weight:700; color:var(--p-violeta); display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.app-promo .et::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--p-violeta); }
.app-promo .t6{ margin:0 0 5px; font-size:12px; font-weight:700; color:var(--p-tinta); line-height:1.3; }
.app-promo p{ margin:0 0 10px; font-size:10.5px; color:var(--p-mudo); line-height:1.4; }
.app-promo .bt{ display:block; text-align:center; font-size:11px; font-weight:600; color:var(--p-violeta); border:1px solid var(--p-violeta); border-radius:8px; padding:6px; text-decoration:none; }

/* ---------- zona principal ---------- */
.app-main{ padding:20px 22px 24px; display:grid; gap:14px; align-content:start; }
.app-top{ display:flex; justify-content:space-between; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.app-top .ceja{ font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--p-mudo); display:block; margin-bottom:5px; }
.app-top .t5{ margin:0 0 4px; font-size:23px; font-weight:700; letter-spacing:-.025em; color:var(--p-tinta); line-height:1.15; }
.app-top p{ margin:0; font-size:12px; color:var(--p-mudo); max-width:34ch; }
.app-controles{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.app-campo{ display:grid; gap:4px; }
.app-campo .lb{ font-size:9.5px; color:var(--p-mudo); font-weight:600; }
.app-campo .sel{
  border:1px solid var(--p-linea); border-radius:8px; background:var(--p-sup);
  padding:6px 22px 6px 10px; font-size:11px; color:var(--p-tinta); white-space:nowrap; position:relative;
}
.app-campo .sel::after{ content:''; position:absolute; right:9px; top:44%; width:5px; height:5px; border-right:1.5px solid var(--p-mudo); border-bottom:1.5px solid var(--p-mudo); transform:translateY(-50%) rotate(45deg); }
.app-bt{ background:var(--p-sup); border:1px solid var(--p-azul); color:var(--p-azul); border-radius:8px; padding:8px 14px; font-size:11.5px; font-weight:600; white-space:nowrap; }

/* ---------- tira de calidad del dato ---------- */
.app-calidad{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  background:var(--p-verde-s); border:1px solid rgba(22,162,103,.2);
  border-radius:var(--p-rs); padding:10px 14px;
}
.app-calidad .izq{ display:flex; align-items:center; gap:9px; }
.app-calidad .tic{ width:17px; height:17px; border-radius:50%; background:var(--p-verde); color:#fff; display:grid; place-items:center; font-size:9px; flex:none; }
.app-calidad b{ font-size:11.5px; font-weight:600; display:block; color:var(--p-tinta); }
.app-calidad small{ font-size:10.5px; color:var(--p-mudo); display:block; }
.app-calidad .fecha{ font-size:10.5px; color:var(--p-mudo); white-space:nowrap; }

/* ---------- tarjetas de indicador ---------- */
.app-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kpi{
  position:relative; overflow:hidden;
  background:var(--p-sup); border:1px solid var(--p-linea); border-radius:var(--p-r);
  padding:16px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
}
.kpi.tono-azul{ background:linear-gradient(160deg,var(--p-azul-s),var(--p-sup) 62%); }
.kpi.tono-verde{ background:linear-gradient(160deg,var(--p-verde-s),var(--p-sup) 62%); }
.kpi.tono-violeta{ background:linear-gradient(160deg,var(--p-violeta-s),var(--p-sup) 62%); }
.kpi .ico{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:14px; flex:none; }
.kpi.tono-azul .ico{ background:var(--p-azul); }
.kpi.tono-verde .ico{ background:var(--p-verde); }
.kpi.tono-violeta .ico{ background:var(--p-violeta); }
.kpi .val{ font-size:25px; font-weight:700; letter-spacing:-.03em; line-height:1.05; color:var(--p-tinta); display:block; font-variant-numeric:tabular-nums; }
.kpi .nom{ font-size:12px; font-weight:600; color:var(--p-tinta); display:block; margin-top:3px; line-height:1.25; }
.kpi .det{ font-size:10.5px; color:var(--p-mudo); display:block; margin-top:5px; }
.kpi .pill{
  position:absolute; top:13px; right:13px;
  font-size:10px; font-weight:600; border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.pill.mejor{ background:var(--p-verde-s); color:var(--p-verde); }
.pill.peor{ background:var(--p-rojo-s); color:var(--p-rojo); }
.pill.neutro{ background:var(--p-sup-suave); color:var(--p-mudo); border:1px solid var(--p-linea); }

/* ---------- conclusión en una frase ---------- */
.app-frase{
  background:var(--p-verde-s); border:1px solid rgba(22,162,103,.22);
  border-radius:var(--p-r); padding:16px 18px;
  display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:start;
}
.app-frase .tic{ width:28px; height:28px; border-radius:50%; background:var(--p-verde); color:#fff; display:grid; place-items:center; font-size:13px; flex:none; }
.app-frase .ceja{ font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--p-verde); display:block; margin-bottom:4px; }
.app-frase .t6{ margin:0 0 5px; font-size:15px; font-weight:700; color:var(--p-tinta); letter-spacing:-.02em; }
.app-frase p{ margin:0; font-size:11.5px; color:var(--p-mudo); line-height:1.5; }
.app-frase .comolo{ font-size:11px; color:var(--p-azul); font-weight:600; white-space:nowrap; }

/* ---------- dos columnas: gráfico y lectura ---------- */
.app-dos{ display:grid; grid-template-columns:1.45fr 1fr; gap:12px; }
.app-caja{ background:var(--p-sup); border:1px solid var(--p-linea); border-radius:var(--p-r); padding:16px; }
.app-caja .ceja{ font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--p-mudo); display:block; margin-bottom:5px; }
.app-caja .t6{ margin:0 0 4px; font-size:15px; font-weight:700; color:var(--p-tinta); letter-spacing:-.02em; }
.app-caja .sub{ font-size:11px; color:var(--p-mudo); margin:0 0 12px; line-height:1.45; }
.leyenda{ display:flex; gap:14px; font-size:10px; color:var(--p-mudo); justify-content:flex-end; margin-top:-24px; }
.leyenda i{ display:inline-block; width:16px; height:0; border-top:2px solid var(--p-azul); vertical-align:middle; margin-right:5px; }
.leyenda .ref i{ border-top-style:dashed; border-color:var(--p-mudo); }

/* filas de lectura ejecutiva */
.lecturas{ display:grid; gap:9px; }
.lectura{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; border-radius:var(--p-rs); padding:11px 12px; }
.lectura.buena{ background:var(--p-verde-s); }
.lectura.cambio{ background:var(--p-ambar-s); }
.lectura.estable{ background:var(--p-azul-s); }
.lectura .ic{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:10px; background:var(--p-sup); flex:none; }
.lectura.buena .ic{ color:var(--p-verde); } .lectura.cambio .ic{ color:var(--p-ambar); } .lectura.estable .ic{ color:var(--p-azul); }
.lectura b{ font-size:11.5px; font-weight:700; display:block; color:var(--p-tinta); margin-bottom:2px; }
.lectura p{ margin:0; font-size:10.5px; color:var(--p-mudo); line-height:1.45; }
.lectura .ch{ color:var(--p-mudo); font-size:11px; }

/* barras de carga por área */
.cargas{ display:grid; gap:11px; }
.carga{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; font-size:11px; }
.carga .ar{ color:var(--p-tinta); font-weight:600; }
.carga .ar small{ color:var(--p-mudo); font-weight:400; margin-left:5px; }
.carga .pista{ grid-column:1/-1; height:7px; border-radius:99px; background:var(--p-sup-suave); border:1px solid var(--p-linea); overflow:hidden; }
.carga .rell{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#2fb47c,var(--p-verde)); }
.carga .rell.ojo{ background:linear-gradient(90deg,#eeab4a,var(--p-ambar)); }
.carga .et{ font-size:10px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--p-verde-s); color:var(--p-verde); white-space:nowrap; }
.carga .et.ojo{ background:var(--p-ambar-s); color:var(--p-ambar); }
.carga .mn{ font-size:10px; color:var(--p-mudo); white-space:nowrap; }

/* pestañas internas del panel */
.app-pest{ display:flex; gap:3px; background:var(--p-sup-suave); border:1px solid var(--p-linea); border-radius:9px; padding:3px; }
.app-pest span{ font-size:10.5px; font-weight:600; color:var(--p-mudo); padding:5px 12px; border-radius:6px; }
.app-pest span.act{ background:var(--p-sup); color:var(--p-azul); box-shadow:0 1px 3px rgba(32,52,88,.1); }

/* el sello sigue mandando: esto es una maqueta */
.app .sello-ilustrativo{ top:12px; right:12px; }

/* movimiento */
.carga .rell{ transition:width 1.1s cubic-bezier(.2,.8,.3,1); }
.carga.espera .rell{ width:0 !important; }
.linea-graf{ transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.3,1); }
.app.espera .linea-graf{ stroke-dashoffset:var(--largo) !important; }
@media (prefers-reduced-motion:reduce){
  .carga .rell,.linea-graf{ transition:none; }
  .carga.espera .rell{ width:revert !important; }
  .app.espera .linea-graf{ stroke-dashoffset:0 !important; }
}

@media (max-width:1060px){
  .app-lateral{ display:none; }
}
@media (max-width:760px){
  .app-kpis{ grid-template-columns:1fr; }
  .app-dos{ grid-template-columns:1fr; }
  .app-controles{ display:none; }
  .app-frase{ grid-template-columns:auto 1fr; }
  .app-frase .comolo{ display:none; }
}

/* ============================================================
   v5b — el panel se adapta a SU ancho, no al de la ventana.
   Así el mismo componente sirve en media columna y a todo lo ancho.
   ============================================================ */

.app{ container-type:inline-size; container-name:panel; }

@container panel (max-width: 860px){
  .app-lateral{ display:none; }
  .app-dos{ grid-template-columns:1fr; }
  .app-controles .app-campo:nth-child(n+3){ display:none; }
}
@container panel (max-width: 620px){
  .app-kpis{ grid-template-columns:1fr; }
  .kpi{ padding:13px 14px; }
  .kpi .val{ font-size:22px; }
  .kpi .pill{ position:static; display:inline-block; margin-top:7px; }
  .kpi{ grid-template-columns:auto 1fr; }
  .app-controles{ display:none; }
  .app-top .t5{ font-size:20px; }
  .app-frase{ grid-template-columns:auto 1fr; }
  .app-frase .comolo{ display:none; }
  .app-calidad{ flex-direction:column; align-items:flex-start; gap:7px; }
}
@container panel (max-width: 420px){
  .app-main{ padding:16px; }
  .carga{ grid-template-columns:1fr auto; }
  .carga .mn{ display:none; }
}

/* versión corta: solo cabecera, calidad e indicadores */
.app.compacto .app-dos,
.app.compacto .app-caja:last-child{ display:none; }

/* ============================================================
   v5c — el resto de paneles adopta el lenguaje del producto real.
   Fuera el cromo de ventana inventado: el producto no tiene
   semáforo de macOS, tiene una cabecera de informe.
   ============================================================ */

.panel{
  --p-bg:#f4f7fb; --p-sup:#fff; --p-sup-suave:#f8faff;
  --p-tinta:#111827; --p-mudo:#667085; --p-linea:#e3e9f2;
  --p-azul:#1d5cf5; --p-azul-s:#edf3ff;
  --p-verde:#16a267; --p-verde-s:#eaf9f1;
  --p-violeta:#7256d8; --p-violeta-s:#f1edff;
  --p-ambar:#d87908; --p-ambar-s:#fff6e6;
  --p-rojo:#dc3f45; --p-rojo-s:#fff0f1;

  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--p-bg);
  border-color:var(--p-linea);
  color:var(--p-tinta);
  container-type:inline-size; container-name:panel;
}

/* la barra deja de imitar una ventana y pasa a ser cabecera de informe */
.panel-barra{
  background:var(--p-sup); border-bottom:1px solid var(--p-linea);
  padding:12px 18px; gap:10px;
}
.panel-barra .luces{ display:none; }
.panel-barra .ruta{
  background:transparent; border:0; padding:0; margin:0;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--p-mudo);
}
.panel-cuerpo{ padding:18px; gap:14px; }
.panel-titulo .t4{ font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--p-tinta); }
.panel-titulo .sub{ font-size:11px; color:var(--p-mudo); }

/* tejas con el aire del producto */
.panel .teja{
  background:var(--p-sup); border:1px solid var(--p-linea); border-radius:12px; padding:13px 14px;
}
.panel .teja .et{ font-size:10.5px; color:var(--p-mudo); }
.panel .teja .vl{ font-family:inherit; font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--p-tinta); }
.panel .dl{ font-size:10.5px; }
.panel .dl.sube{ color:var(--p-verde); } .panel .dl.baja{ color:var(--p-rojo); } .panel .dl.igual{ color:var(--p-mudo); }

/* barras y ejes */
.panel .barras i{ background:linear-gradient(180deg,#9dbcff,#cfdeff); border-radius:4px 4px 2px 2px; }
.panel .barras i.pico{ background:linear-gradient(180deg,#1a55c9,var(--p-azul)); }
.panel .ejes{ font-size:10px; color:var(--p-mudo); }

/* filas de señal */
.panel .senales{ border:1px solid var(--p-linea); border-radius:12px; background:var(--p-sup); }
.panel .senal{ border-bottom-color:var(--p-linea); font-size:11.5px; padding:11px 13px; }
.panel .senal .txt{ color:var(--p-tinta); }
.panel .senal .meta{ color:var(--p-mudo); font-size:10.5px; }
.panel .senal .punto.alta{ background:var(--p-rojo); box-shadow:0 0 0 3px var(--p-rojo-s); }
.panel .senal .punto.media{ background:var(--p-ambar); box-shadow:0 0 0 3px var(--p-ambar-s); }
.panel .senal .punto.baja{ background:var(--p-verde); box-shadow:0 0 0 3px var(--p-verde-s); }

/* cobertura */
.panel .cob{ font-size:11.5px; }
.panel .cob .nb{ color:var(--p-tinta); font-weight:600; }
.panel .cob .vl{ color:var(--p-mudo); font-size:10.5px; }
.panel .cob .pista{ background:var(--p-sup-suave); border:1px solid var(--p-linea); height:7px; }
.panel .cob .relleno{ background:linear-gradient(90deg,#2fb47c,var(--p-verde)); }
.panel .cob .relleno.riesgo{ background:linear-gradient(90deg,#eeab4a,var(--p-ambar)); }

/* avisos de seguridad */
.panel .aviso-fila{ border-color:var(--p-linea); background:var(--p-sup); border-radius:12px; }
.panel .aviso-fila.rojo{ border-left-color:var(--p-rojo); }
.panel .aviso-fila.ambar{ border-left-color:var(--p-ambar); }
.panel .aviso-fila.gris{ border-left-color:var(--p-mudo); }
.panel .rojo .grado{ background:var(--p-rojo-s); color:var(--p-rojo); }
.panel .ambar .grado{ background:var(--p-ambar-s); color:var(--p-ambar); }
.panel .gris .grado{ background:var(--p-sup-suave); color:var(--p-mudo); }
.panel .aviso-fila .cuerpo{ font-size:11.5px; color:var(--p-tinta); }
.panel .aviso-fila .cuerpo small{ font-size:10.5px; color:var(--p-mudo); }
.panel .aviso-fila .hora{ font-size:10.5px; color:var(--p-mudo); }

/* chat */
.panel .burbuja{ font-size:11.5px; border-radius:12px; }
.panel .burbuja.tu{ background:var(--p-azul); border-bottom-right-radius:4px; }
.panel .burbuja.ia{ background:var(--p-sup); border-color:var(--p-linea); color:var(--p-tinta); border-bottom-left-radius:4px; }
.panel .burbuja.ia b{ color:var(--p-azul); }
.panel .sugerencia{ font-family:inherit; font-size:10.5px; color:var(--p-azul); border-color:var(--p-linea); background:var(--p-sup); }
.panel .sugerencia:hover{ border-color:var(--p-azul); background:var(--p-azul-s); }
.panel .sugerencia.activa{ background:var(--p-azul); color:#fff; border-color:var(--p-azul); }

/* dispersión */
.panel .disperso circle{ fill:var(--p-azul); }
.panel .disperso text{ font-family:Inter,sans-serif; }

@container panel (max-width: 560px){
  .panel .tejas{ grid-template-columns:1fr; }
}

/* ============================================================
   v6 — LOGO OFICIAL y CAPTURAS REALES de clowdwork.com
   ============================================================ */

.marca img{ height:34px; width:auto; display:block; }
.marca .punto{ display:none; }
.pie .marca img{ height:36px; }
/* el logo es verde-cian sobre blanco: en el pie oscuro necesita respirar */
.pie .marca{ background:#fff; padding:8px 12px; border-radius:10px; display:inline-flex; }

/* ---------- captura real ---------- */
.captura{
  position:relative; border:1px solid var(--linea); border-radius:var(--r-l);
  overflow:hidden; box-shadow:var(--s4); background:var(--blanco); display:block;
}
.captura img{ display:block; width:100%; height:auto; }
.captura.flota{ transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg); }
.captura .pie-captura{
  font-size:.82rem; color:var(--texto-suave); padding:13px 18px;
  border-top:1px solid var(--linea); background:var(--fondo-alt);
}
/* el sello vive en esta franja, a la derecha: se le reserva el sitio para que
   no se coma el final del pie. «CAPTURA REAL» es más largo que «REAL SCREENSHOT». */
.captura .pie-captura{ padding-right:160px; }
@media (max-width:560px){
  .captura .pie-captura{ padding-right:18px; padding-bottom:44px; }
}
.captura .sello-real{
  position:absolute; bottom:13px; right:14px; z-index:3;
  font-family:'Poppins',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--verde); background:rgba(255,255,255,.94);
  border:1px solid var(--verde); border-radius:999px; padding:4px 11px;
}

/* galería de capturas */
/* mosaico: las capturas tienen proporciones muy distintas y una rejilla
   deja huecos bajo la más corta. Con columnas se colocan solas. */
.galeria{ column-count:2; column-gap:22px; margin-top:48px; }
.galeria > *{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 22px; display:block; }
.galeria .captura{ box-shadow:var(--s3); }
.galeria .captura:hover{ box-shadow:var(--s4); }
.galeria .captura{ transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease; }
.galeria .captura:hover{ transform:translateY(-4px); }

@media (max-width:1060px){ .captura.flota{ transform:none; } }
@media (max-width:760px){ .galeria{ column-count:1; } .marca img{ height:28px; } }

/* ============================================================
   v7 — efectos, movimiento y detalles
   ============================================================ */

/* ---------- los anclajes ya no aterrizan bajo la cabecera ---------- */
html{ scroll-padding-top:96px; }
[id]{ scroll-margin-top:96px; }

/* ---------- barra de progreso de lectura ---------- */
.progreso{
  position:fixed; top:0; left:0; height:3px; z-index:70;
  width:0; background:linear-gradient(90deg,#1a55c9,var(--azul));
  transition:width .1s linear; pointer-events:none;
  box-shadow:0 0 12px rgba(0,49,139,.5);
}

/* ---------- brillo al pasar por el botón principal ---------- */
.boton-primario{ position:relative; overflow:hidden; isolation:isolate; }
.boton-primario::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .65s cubic-bezier(.2,.8,.3,1);
}
.boton-primario:hover::after{ transform:translateX(120%); }

/* ---------- subrayado del menú ---------- */
.menu a{ position:relative; }
.menu a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  background:var(--azul); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.menu a:hover::after{ transform:scaleX(1); }
.menu a.activo::after{ transform:scaleX(1); }

/* ---------- el cintillo dibuja su rayita ---------- */
.cintillo::before{ transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.8,.3,1) .15s; }
.rv.visible .cintillo::before,
.visible.cintillo::before{ transform:scaleX(1); }

/* ---------- tarjetas: el brillo sigue al cursor ---------- */
.tarjeta,.informe,.rol-uso{ position:relative; overflow:hidden; }
.tarjeta::before,.informe::before,.rol-uso::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(0,49,139,.07), transparent 60%);
  transition:opacity .3s ease;
}
.tarjeta:hover::before,.informe:hover::before,.rol-uso:hover::before{ opacity:1; }
.oscura .tarjeta::before{ background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(107,147,214,.16), transparent 60%); }

/* ---------- entrada del panel de producto ---------- */
.app,.captura{ transition:transform .8s cubic-bezier(.2,.8,.3,1), box-shadow .8s ease, opacity .8s ease; }
.rv .app,.rv .captura,.rv.captura{ opacity:0; transform:translateY(26px) scale(.985); }
.rv.visible .app,.rv.visible .captura,.rv.visible.captura{ opacity:1; transform:none; }
.rv.visible .app.flota,.rv.visible .captura.flota{ transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg); }

/* ---------- el deslizador de las pestañas ---------- */
.pestanas{ position:relative; }
.pestanas button{ position:relative; z-index:1; }
.pestanas .corredera{
  position:absolute; top:6px; bottom:6px; left:0; width:0; z-index:0;
  background:linear-gradient(180deg,#0a44a8,var(--azul));
  border-radius:9px; box-shadow:0 8px 18px -8px rgba(0,49,139,.6);
  transition:transform .34s cubic-bezier(.2,.8,.3,1), width .34s cubic-bezier(.2,.8,.3,1);
}
.pestanas button.activa{ background:transparent; box-shadow:none; color:var(--blanco); }

/* ---------- volver arriba ---------- */
.arriba{
  position:fixed; right:24px; bottom:24px; z-index:65;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--linea-firme);
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  color:var(--azul); font-size:1rem; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--s3);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1), border-color .2s ease;
}
.arriba.vista{ opacity:1; transform:none; pointer-events:auto; }
.arriba:hover{ border-color:var(--azul); transform:translateY(-2px); }

@media (prefers-reduced-motion:reduce){
  .progreso,.boton-primario::after,.menu a::after,.cintillo::before,
  .app,.captura,.pestanas .corredera,.arriba{ transition:none !important; }
  .rv .app,.rv .captura,.rv.captura{ opacity:1; transform:none; }
  .cintillo::before{ transform:scaleX(1); }
}
@media (max-width:760px){ .arriba{ right:14px; bottom:14px; width:42px; height:42px; } }


/* ---------- encabezado que solo leen los lectores de pantalla ---------- */
.solo-lectores{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ============================================================
   v10 — precios y preguntas frecuentes
   ============================================================ */

/* ---------- conmutador mensual / anual ---------- */
.conmutador{
  display:inline-flex; align-items:center; gap:3px; margin:34px auto 0;
  background:var(--blanco); border:1px solid var(--linea); border-radius:12px;
  padding:5px; box-shadow:var(--s2); position:relative;
}
.conmutador button{
  font-family:'Poppins',sans-serif; font-size:.88rem; font-weight:600; color:var(--texto-suave);
  background:none; border:0; cursor:pointer; padding:10px 20px; border-radius:8px;
  position:relative; z-index:1; transition:color .2s ease; white-space:nowrap;
}
/* el botón activo lleva su propio fondo: no depende de que exista la corredera */
.conmutador button.activa{
  color:var(--blanco);
  background:linear-gradient(180deg,#0a44a8,var(--azul));
  box-shadow:0 8px 18px -8px rgba(0,49,139,.6);
}
.conmutador button.activa .ahorro{ background:rgba(255,255,255,.22); color:var(--blanco); }
.conmutador button:not(.activa):hover{ color:var(--azul); background:var(--azul-suave); }
.ahorro{
  display:inline-block; margin-left:8px; font-size:.7rem; font-weight:700;
  letter-spacing:.06em; padding:3px 8px; border-radius:999px;
  background:rgba(106,178,58,.14); color:#4a7f28;
}

/* ---------- planes ---------- */
.planes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; align-items:start; }
.plan{
  position:relative; background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-l); padding:34px 30px; box-shadow:var(--s1);
  display:flex; flex-direction:column; gap:6px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--s3); }
.plan.destacado{ border-color:var(--azul); box-shadow:var(--s3); }
.plan.destacado::before{
  content:attr(data-etiqueta); position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font-family:'Poppins',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blanco); white-space:nowrap;
  background:linear-gradient(180deg,#0a44a8,var(--azul));
  padding:6px 16px; border-radius:999px; box-shadow:0 8px 18px -6px rgba(0,49,139,.5);
}
.plan .nombre{
  font-family:'Poppins',sans-serif; font-size:.76rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--azul);
}
.plan .lema{ font-size:.9rem; color:var(--texto-suave); min-height:1.4em; }
.plan .precio{
  font-family:'Poppins',sans-serif; font-size:2.9rem; font-weight:700;
  letter-spacing:-.045em; color:var(--tinta); line-height:1.05; margin-top:14px;
  font-variant-numeric:tabular-nums;
}
.plan .unidad{ font-size:.88rem; color:var(--texto-suave); margin-bottom:22px; }
.plan ul{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:10px; }
.plan li{ position:relative; padding-left:27px; font-size:.94rem; color:var(--texto); }
.plan li::before{
  content:''; position:absolute; left:2px; top:.48em; width:10px; height:6px;
  border:solid var(--verde); border-width:0 0 2.2px 2.2px; transform:rotate(-45deg);
}
.plan .boton{ margin-top:auto; width:100%; justify-content:center; }

/* ---------- preguntas por bloques ---------- */
.faq-grupo{ margin-top:44px; }
.faq-grupo > h2{ font-size:1.35rem; margin-bottom:18px; }

@media (max-width:1060px){ .planes{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
@media (max-width:760px){
  .conmutador{ width:100%; }
  /* flex:1 no encoge por debajo del contenido sin min-width:0 */
  .conmutador button{ flex:1 1 0; min-width:0; padding:11px 6px; font-size:.78rem; }
  .conmutador .ahorro{ display:block; margin:4px auto 0; font-size:.64rem; }
}

/* ---------- pie: datos societarios visibles (spec 00_GLOBAL) ---------- */
.pie-datos{ font-size:.84rem; color:#7c7fa6; margin-top:18px; line-height:1.7; }
.pie-datos a{ color:#7c7fa6; }
.pie-datos a:hover{ color:var(--blanco); }

/* ---------- aviso de privacidad del formulario ---------- */
.nota-privacidad{
  font-size:.84rem; color:var(--texto-suave); line-height:1.65;
  background:var(--azul-niebla); border:1px solid var(--linea);
  border-radius:var(--r-s); padding:15px 17px; margin:0;
}
.campo select{
  font-family:inherit; font-size:1rem; color:var(--tinta);
  padding:14px 16px; border:1px solid var(--linea-firme); border-radius:var(--r-s);
  background:var(--blanco); width:100%; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-suave) 50%),linear-gradient(135deg,var(--texto-suave) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1em + 4px),calc(100% - 15px) calc(1em + 4px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.campo select:focus{ outline:0; border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,49,139,.12); }

/* ============================================================
   Rótulos tipográficos de las sub-marcas.
   El paquete avisa: no existe lockup oficial para ClowdWork
   Intelligence, así que se usa texto hasta que exista.
   ============================================================ */

.rotulo{
  display:inline-flex; align-items:baseline; gap:.32em;
  font-family:'Poppins',sans-serif; font-weight:700;
  letter-spacing:-.03em; line-height:1.1; color:var(--tinta);
  font-size:1.35rem;
}
.rotulo .cw{ color:var(--tinta); }
.rotulo .sub{ font-weight:600; }
.rotulo.productivity .sub{ color:#0f8a6a; }
.rotulo.intelligence .sub{ color:var(--azul); }
.rotulo.plus .sub{ color:var(--azul); }
.rotulo .plus-chip{
  font-family:'Inter',sans-serif; font-size:.62em; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--azul); background:var(--azul-suave);
  border:1px solid rgba(0,49,139,.18); border-radius:99px; padding:.28em .7em;
  margin-left:.5em; align-self:center; line-height:1;
}
.oscura .rotulo .plus-chip{ color:var(--azul-claro); background:rgba(107,147,214,.14); border-color:rgba(107,147,214,.3); }
.rotulo.security .sub{ color:#b3620a; }
/* con imagen, baseline no vale: hay que centrar y fijar altura */
.rotulo.roubot{ gap:.45em; align-items:center; }
.rotulo.roubot img{ height:44px; width:auto; max-width:none; display:block; }
.rotulo.roubot .sub{ color:var(--verde); }
.centrado .rotulo{ justify-content:center; }
@media (max-width:760px){ .rotulo.roubot img{ height:34px; } }
.oscura .rotulo,.oscura .rotulo .cw{ color:var(--blanco); }
.oscura .rotulo.intelligence .sub{ color:var(--azul-claro); }
.oscura .rotulo.productivity .sub{ color:#5fd3ae; }
.oscura .rotulo.security .sub{ color:#f0a03c; }

.rotulo-nota{
  display:block; font-family:'Figtree',sans-serif; font-weight:400;
  font-size:.72rem; letter-spacing:0; color:var(--texto-suave); margin-top:6px;
}
@media (max-width:760px){ .rotulo{ font-size:1.15rem; } }

/* ============================================================
   v13 — acentos por producto y componentes de los mockups
   Cada producto tiene su color en los mockups aprobados:
   Productivity azul · Intelligence azul con acento violeta · Roubot violeta
   ============================================================ */

.acento-roubot{ --azul:#5b3df5; --azul-hondo:#4429c9; --azul-claro:#a08cfa; --azul-suave:#efeaff; --azul-niebla:#f8f6ff; }
.acento-intelligence{ --azul:#0b3f9e; --azul-claro:#6b93d6; }

/* ---------- barra apilada de categorías ---------- */
.apilada{ display:flex; height:26px; border-radius:8px; overflow:hidden; box-shadow:var(--s1); }
.apilada span{ display:block; }
.apilada .productivo{ background:#16a34a; }
.apilada .improductivo{ background:#ef4444; }
.apilada .privado{ background:#2563eb; }
.apilada .inactivo{ background:#8b5cf6; }
.apilada .sincat{ background:#a855f7; }
.apilada .manual{ background:#94a3b8; }
.apilada-cifras{ display:flex; margin-bottom:7px; font-family:'Poppins',sans-serif; font-size:.8rem; font-weight:600; color:var(--texto-suave); }
.apilada-cifras span{ text-align:left; }
.apilada-leyenda{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; font-size:.86rem; color:var(--texto); }
.apilada-leyenda i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:7px; vertical-align:-1px; }

/* ---------- matriz de continuidad ---------- */
.matriz{ width:100%; border-collapse:collapse; font-size:.92rem; margin-top:26px; }
.matriz th,.matriz td{ padding:13px 12px; border-bottom:1px solid var(--linea); text-align:center; }
.matriz th:first-child,.matriz td:first-child{ text-align:left; font-weight:600; color:var(--tinta); }
.matriz thead th{ font-family:'Poppins',sans-serif; font-size:.76rem; font-weight:600; color:var(--texto-suave); line-height:1.35; }
.matriz thead th small{ display:block; font-weight:400; font-size:.72rem; opacity:.85; }
.matriz .pt{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.pt.rojo{ background:var(--coral); } .pt.ambar{ background:var(--ambar); }
.pt.azul{ background:var(--azul); } .pt.verde{ background:var(--verde); }
.pt.vacio{ background:var(--linea-firme); }

/* ---------- banda de privacidad ---------- */
.banda-privacidad{
  display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:26px; align-items:start;
  background:var(--azul-suave); border:1px solid rgba(0,49,139,.14);
  border-radius:var(--r-l); padding:32px 34px; margin-top:48px;
}
.banda-privacidad .cabeza{ display:flex; gap:14px; align-items:flex-start; }
.banda-privacidad .escudo{
  width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--azul); color:#fff; font-size:1rem;
}
.banda-privacidad h3{ font-size:1.02rem; margin:0 0 6px; }
.banda-privacidad p{ font-size:.9rem; color:var(--texto-suave); margin:0; }
.banda-privacidad .punto-p{ display:flex; gap:11px; align-items:flex-start; }
.banda-privacidad .punto-p .ic{ width:26px; height:26px; border-radius:8px; background:var(--blanco); color:var(--azul); display:grid; place-items:center; font-size:.8rem; flex:none; }
.banda-privacidad b{ display:block; font-family:'Poppins',sans-serif; font-size:.9rem; color:var(--tinta); margin-bottom:3px; }

@media (max-width:1060px){ .banda-privacidad{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){
  .banda-privacidad{ grid-template-columns:1fr; padding:26px 22px; }
  .matriz{ font-size:.82rem; } .matriz th,.matriz td{ padding:10px 6px; }
  .apilada-cifras{ font-size:.7rem; }
}

/* ============================================================
   v14 — artículo de caso de uso
   ============================================================ */
.articulo{ display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start; }
.articulo-cuerpo h2{ font-size:clamp(1.35rem,2vw,1.7rem); margin-top:44px; }
.articulo-cuerpo h2:first-child{ margin-top:0; }
.articulo-cuerpo p{ font-size:1.02rem; }
.migas{ font-size:.86rem; color:var(--texto-suave); margin-bottom:22px; display:flex; gap:8px; flex-wrap:wrap; }
.migas a{ color:var(--texto-suave); } .migas a:hover{ color:var(--azul); }
.meta-articulo{ display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.meta-articulo .tipo{
  font-family:'Poppins',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul); background:var(--azul-suave);
  border:1px solid rgba(0,49,139,.16); border-radius:999px; padding:5px 13px;
}
.meta-articulo .lectura{ font-size:.86rem; color:var(--texto-suave); }

/* pasos numerados del caso */
.paso-caso{ display:grid; grid-template-columns:auto 1fr; gap:20px; margin-top:36px; }
.paso-caso .num{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--azul); color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:.92rem;
}
.paso-caso h3{ margin:4px 0 8px; font-size:1.12rem; color:var(--azul); }
.paso-caso .lista-check{ margin-top:14px; }
.paso-caso .lista-check li{ font-size:.95rem; }

/* barra lateral del artículo */
.lateral{ position:sticky; top:96px; display:grid; gap:18px; }
.lateral .caja{ border:1px solid var(--linea); border-radius:var(--r-m); padding:22px; background:var(--blanco); box-shadow:var(--s1); }
.lateral h3{ font-size:.95rem; margin:0 0 14px; }
.lateral ol{ list-style:none; padding:0; margin:0; display:grid; gap:9px; counter-reset:t; }
.lateral ol a{ font-size:.88rem; color:var(--texto); display:block; padding-left:12px; border-left:2px solid var(--linea); }
.lateral ol a:hover,.lateral ol a.act{ color:var(--azul); border-left-color:var(--azul); text-decoration:none; }
.lateral p{ font-size:.88rem; color:var(--texto-suave); }
.lateral .caja.viva{ background:var(--azul-suave); border-color:rgba(0,49,139,.16); }

@media (max-width:1060px){
  .articulo{ grid-template-columns:1fr; gap:36px; }
  .lateral{ position:static; grid-template-columns:1fr 1fr; display:grid; }
}
@media (max-width:760px){ .lateral{ grid-template-columns:1fr; } .paso-caso{ grid-template-columns:1fr; gap:12px; } }

/* ============================================================
   v16 — el informe anual, rehecho
   Tres tarjetas apiladas y cuatro barras planas no cuentan un año.
   ============================================================ */

.anual{ display:grid; gap:14px; }

/* ---------- cabecera: la cifra del año ---------- */
.anual-cabeza{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
  background:linear-gradient(135deg,#0f2f7a,#1d5cf5 58%,#3d7bff);
  border-radius:var(--p-r); padding:22px 26px; color:#fff; position:relative; overflow:hidden;
}
.anual-cabeza::after{
  content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:rgba(255,255,255,.08);
}
.anual-cabeza .grande{
  font-family:Inter,sans-serif; font-size:44px; font-weight:800; letter-spacing:-.045em;
  line-height:1; font-variant-numeric:tabular-nums; display:block;
}
.anual-cabeza .grande small{ font-size:20px; font-weight:600; margin-left:3px; opacity:.85; }
.anual-cabeza .et{ font-size:11.5px; opacity:.86; display:block; margin-top:6px; }
.anual-cabeza .resumen{ font-size:12.5px; line-height:1.55; opacity:.94; position:relative; z-index:1; }
.anual-cabeza .resumen b{ font-weight:700; }

/* ---------- dos columnas: evolución y radar ---------- */
.anual-dos{ display:grid; grid-template-columns:1.6fr 1fr; gap:14px; }
.anual-caja{ background:var(--p-sup); border:1px solid var(--p-linea); border-radius:var(--p-r); padding:16px 18px; }
.anual-caja .ceja{ font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--p-mudo); display:block; }
.anual-caja .tit{ font-family:Inter,sans-serif; font-size:14px; font-weight:700; color:var(--p-tinta); display:block; margin:4px 0 12px; letter-spacing:-.02em; }

/* Movimiento por fotogramas, no por «empezar escondido»: si el JS no llega
   a correr (captura, impresión, pestaña oculta), el gráfico se ve ENTERO. */
@keyframes dibujaLinea{ from{ stroke-dashoffset:var(--largo,1400); } to{ stroke-dashoffset:0; } }
@keyframes apareceRelleno{ from{ opacity:0; } to{ opacity:1; } }
@keyframes brotaPunto{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes abreRadar{ from{ transform:scale(.06); opacity:0; } to{ transform:scale(1); opacity:1; } }

.area-punto,.radar-forma,.hito .bolita{ transform-origin:center; transform-box:fill-box; }
.hito .bolita{ transform-box:border-box; }

.anual.animar .area-linea{ animation:dibujaLinea 1.5s cubic-bezier(.25,.8,.3,1) both; }
.anual.animar .area-relleno{ animation:apareceRelleno .9s ease .55s both; }
.anual.animar .area-punto{ animation:brotaPunto .5s cubic-bezier(.34,1.56,.64,1) both; }
.anual.animar .radar-forma{ animation:abreRadar 1.1s cubic-bezier(.34,1.4,.5,1) .25s both; }
.anual.animar .hito .bolita{ animation:brotaPunto .5s cubic-bezier(.34,1.56,.64,1) both; }

.radar-eje text{ font-family:Inter,sans-serif; font-size:8.5px; fill:var(--p-mudo); font-weight:600; }

/* ---------- hitos del año ---------- */
.hitos{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; padding-top:8px; }
.hito{ position:relative; padding:0 8px; text-align:center; }
.hito::before{
  content:''; position:absolute; top:9px; left:50%; width:100%; height:2px;
  background:linear-gradient(90deg,var(--p-azul),rgba(29,92,245,.25)); z-index:0;
}
.hito:last-child::before{ display:none; }
.hito .bolita{
  width:20px; height:20px; border-radius:50%; margin:0 auto 9px; position:relative; z-index:1;
  background:var(--p-sup); border:2.5px solid var(--p-azul); display:grid; place-items:center;
  font-family:Inter,sans-serif; font-size:8.5px; font-weight:800; color:var(--p-azul);
}
.hito:last-child .bolita{ background:var(--p-azul); color:#fff; }
.hito b{ display:block; font-family:Inter,sans-serif; font-size:11px; font-weight:700; color:var(--p-tinta); }
.hito span{ display:block; font-size:10px; color:var(--p-mudo); line-height:1.4; margin-top:2px; }

@container panel (max-width: 700px){
  .anual-dos{ grid-template-columns:1fr; }
  .anual-cabeza{ grid-template-columns:1fr; gap:14px; }
  .hitos{ grid-template-columns:1fr 1fr; gap:18px 0; }
  .hito::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .anual.animar .area-linea,.anual.animar .area-relleno,.anual.animar .area-punto,
  .anual.animar .radar-forma,.anual.animar .hito .bolita{ animation:none !important; }
}

/* ============================================================
   v17 — cada informe con su visual propio
   Hoy: la jornada hora a hora · Semana: desviación frente al hábito
   Mes: qué se está volviendo persistente · Trimestre: medido vs potencial
   ============================================================ */

/* ---------- tira de indicadores compactos ---------- */
.tira-kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--p-linea);
  border:1px solid var(--p-linea); border-radius:var(--p-r); overflow:hidden; }
.tira-kpi > div{ background:var(--p-sup); padding:14px 16px; }
.tira-kpi .v{ font-family:Inter,sans-serif; font-size:24px; font-weight:800; letter-spacing:-.035em;
  color:var(--p-tinta); line-height:1; font-variant-numeric:tabular-nums; }
.tira-kpi .v em{ font-style:normal; font-size:13px; font-weight:600; color:var(--p-mudo); margin-left:3px; }
.tira-kpi .n{ font-size:11px; color:var(--p-tinta); font-weight:600; display:block; margin-top:6px; }
.tira-kpi .d{ font-size:10px; color:var(--p-mudo); display:block; margin-top:2px; }
.tira-kpi .chip{ font-size:9.5px; font-weight:700; border-radius:999px; padding:2px 7px; margin-left:6px; }
.chip.sube{ background:var(--p-verde-s); color:var(--p-verde); }
.chip.baja{ background:var(--p-rojo-s); color:var(--p-rojo); }
.chip.plano{ background:var(--p-sup-suave); color:var(--p-mudo); }

/* ---------- HOY: la jornada hora a hora ---------- */
.jornada{ display:flex; align-items:flex-end; gap:5px; height:104px; }
.jornada i{ flex:1; border-radius:5px 5px 3px 3px; display:block; position:relative;
  background:linear-gradient(180deg,#9dbcff,#dbe7ff); transform-origin:bottom;
  animation:brotaBarra .6s cubic-bezier(.25,.9,.3,1) both; }
.jornada i.pico{ background:linear-gradient(180deg,#1d5cf5,#4b83ff); }
.jornada i.baja{ background:linear-gradient(180deg,#d7e2f5,#eef3fb); }
@keyframes brotaBarra{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.anual.animar .jornada i,.hoja .jornada i{ animation-play-state:running; }
.jornada-pie{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--p-mudo); margin-top:8px; }
.marca-pico{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:var(--p-azul); font-weight:700; margin-top:10px; }
.marca-pico::before{ content:''; width:9px; height:9px; border-radius:3px; background:var(--p-azul); }

/* ---------- SEMANA: desviación frente al hábito ----------
   Dos mitades en rejilla, no posicionamiento absoluto: así una barra
   hacia arriba y otra hacia abajo se comportan igual de bien. */
.desv{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.desv .dia{ display:grid; grid-template-rows:52px 1px 52px auto; }
.desv .sube{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.desv .baja{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.desv .eje{ background:var(--p-linea); }
.desv .b{
  width:58%; flex:none; border-radius:4px 4px 0 0; display:block;
  animation:creceDesv .7s cubic-bezier(.25,.9,.3,1) both;
}
.desv .sube .b{ background:linear-gradient(180deg,#16a267,#4cc494); transform-origin:bottom; }
.desv .baja .b{ background:linear-gradient(180deg,#dc3f45,#f2a2a5); transform-origin:top; border-radius:0 0 4px 4px; }
@keyframes creceDesv{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.desv .n{ font-size:9.5px; font-weight:800; text-align:center; line-height:1.4; }
.desv .n:empty{ display:none; }
.desv .et{ text-align:center; font-size:10px; color:var(--p-mudo); font-weight:600; padding-top:8px; }
.leyenda-desv{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:10px; color:var(--p-mudo); margin-top:14px; }
.leyenda-desv i{ width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; }

/* ---------- MES: qué se está volviendo persistente ---------- */
.persist{ display:grid; gap:11px; }
.persist .fila{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; font-size:11.5px; }
.persist .nb{ color:var(--p-tinta); font-weight:600; }
.persist .semanas{ display:flex; gap:5px; }
.persist .semanas span{ width:16px; height:16px; border-radius:5px; background:var(--p-sup-suave);
  border:1px solid var(--p-linea); display:block;
  animation:brotaPunto .4s cubic-bezier(.34,1.56,.64,1) both; }
.persist .semanas span.si{ background:var(--p-azul); border-color:var(--p-azul); }
.persist .semanas span.casi{ background:#9dbcff; border-color:#9dbcff; }
.persist .est{ font-size:9.5px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.est.firme{ background:var(--p-azul-s); color:var(--p-azul); }
.est.emerge{ background:var(--p-ambar-s); color:var(--p-ambar); }
.est.flojo{ background:var(--p-sup-suave); color:var(--p-mudo); }
.persist-cab{ display:grid; grid-template-columns:1fr auto auto; gap:12px; font-size:9.5px;
  color:var(--p-mudo); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
.persist-cab .semanas span{ width:16px; text-align:center; background:none; border:0; animation:none; }

/* ---------- TRIMESTRE: medido frente a potencial ---------- */
.contraste{ display:grid; gap:14px; }
.contraste .op{ display:grid; gap:6px; }
.contraste .cab{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; }
.contraste .cab b{ color:var(--p-tinta); font-weight:600; }
.contraste .cab .est{ font-size:9.5px; font-weight:700; border-radius:999px; padding:3px 9px; }
.contraste .par{ display:grid; gap:4px; }
.contraste .b{ height:11px; border-radius:99px; position:relative; background:var(--p-sup-suave); overflow:hidden; }
.contraste .b i{ position:absolute; inset:0 auto 0 0; border-radius:99px; display:block;
  animation:creceAncho .9s cubic-bezier(.25,.9,.3,1) both; transform-origin:left; }
@keyframes creceAncho{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.contraste .medido i{ background:linear-gradient(90deg,#1d5cf5,#4b83ff); }
.contraste .potencial i{ background:linear-gradient(90deg,#cbd9f2,#e4ecfa); }
.contraste .rot{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--p-mudo); }
.leyenda-contraste{ display:flex; gap:18px; font-size:10px; color:var(--p-mudo); margin-top:6px; }
.leyenda-contraste i{ width:14px; height:8px; border-radius:99px; display:inline-block; margin-right:6px; vertical-align:0; }

@container panel (max-width: 560px){
  .tira-kpi{ grid-template-columns:1fr; }
  .desv{ height:110px; }
}
@media (prefers-reduced-motion:reduce){
  .jornada i,.desv .b,.persist .semanas span,.contraste .b i{ animation:none !important; transform:none !important; }
}



/* ClowdWork · Luminous / editorial design, v26. All assets remain self-contained. */
:root {
  --azul:#2454df; --azul-hondo:#1640b8; --azul-claro:#8daaf8;
  --azul-suave:#edf2ff; --azul-niebla:#f7f9fc;
  --tinta:#152440; --tinta-media:#344562; --texto:#52617a; --texto-suave:#647189;
  --linea:#e4e9f1; --linea-firme:#cbd5e5;
  --ancho:1280px; --ancho-estrecho:800px; --seccion:96px;
  --r-s:12px; --r-m:20px; --r-l:24px; --r-xl:28px;
  --s1:0 2px 5px #15244004;
  --s2:0 8px 24px #15244007;
  --s3:0 20px 48px -16px #15244023;
  --s4:0 28px 70px -25px #15244035;
  --cw-green:#087760; --cw-violet:#6352bf; --cw-amber:#a86616;
}
body { background:#fff; font-family:'Figtree',sans-serif; font-size:17px; line-height:1.65; }
::selection { background:#d8e5ff; color:#152440; }
h1,h2,h3,h4 { font-family:'Figtree',sans-serif; letter-spacing:-.045em; text-wrap:balance; }
h1 { font-weight:600; line-height:1.04; font-size:clamp(42px,4.8vw,68px); }
h2 { font-weight:600; line-height:1.1; font-size:clamp(30px,3.35vw,46px); }
h3 { line-height:1.2; }
p { text-wrap:pretty; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
a,button { touch-action:manipulation; }
:focus-visible { outline:3px solid #2454df; outline-offset:5px; }
.oscura :focus-visible,.pie :focus-visible { outline-color:#a7c3ff; }
[hidden],.cw-pagina[hidden] { display:none!important; }
[id] { scroll-margin-top:106px; }
.envoltura { padding-inline:40px; }
.salto { z-index:1000; }
.cabecera { background:#ffffffeb; backdrop-filter:blur(20px); border-bottom:1px solid #e9edf580; }
.cabecera .envoltura { height:84px; gap:24px; }
.cabecera.pegada { box-shadow:0 4px 24px #17274606; }
.marca img { height:36px; width:auto; }
.menu { gap:0; }
.menu a { font-family:'Figtree',sans-serif; font-size:13.5px; padding:10px; color:#52617a; }
.menu a:hover { background:#f0f4fc; }
.menu a::after { display:none; }
.menu a.activo { color:var(--azul); background:#f0f4fc; }
.acciones { gap:16px; }
.idiomas { border:0; background:#f2f5fa; border-radius:8px; padding:3px; }
.idiomas button { font-family:'Figtree',sans-serif; font-size:11px; min-height:32px; padding:5px 8px; }
.idiomas button.activo { background:#fff; color:#203a66; box-shadow:0 1px 5px #15244012; }
.boton { font-family:'Figtree',sans-serif; padding:15px 24px; font-size:15px; border-radius:12px; min-height:52px; gap:16px; line-height:1.3; }
.boton-primario { background:var(--azul); box-shadow:0 4px 10px #2454df1a,inset 0 1px 1px #ffffff25; }
.boton-primario:hover { background:var(--azul-hondo); box-shadow:0 9px 20px #2454df22; transform:translateY(-2px); }
.boton-primario::after { content:'↗'; position:static; width:auto; height:auto; inset:auto; background:none; transform:none; font-size:19px; font-weight:400; transition:transform .2s; }
.boton-primario:hover::after { transform:translate(2px,-2px); }
.cabecera .boton { min-height:42px; padding:11px 18px; font-size:13px; border-radius:9px; white-space:nowrap; }
.boton-secundario { border-color:#dce3ef; background:#fff; box-shadow:none; }
.enlace-flecha { font-family:'Figtree',sans-serif; font-size:15px; gap:12px; }
.hero { background:radial-gradient(ellipse at 85% 10%,#eaf0ff 0,transparent 57%),#fcfdff; }
.hero h1 { max-width:19ch; }
.hero .entradilla { font-size:18px; line-height:1.7; }
.hero::after { display:none; }
.cw-hero-wave-bg,.cw-wave-footer,.cw-ai-vectors-section { display:none!important; }
.split { gap:64px; min-width:0; }
.split > * { min-width:0; }
.entradilla { font-size:17px; line-height:1.75; }
.cintillo { font-family:'Figtree',sans-serif; font-size:11px; letter-spacing:.16em; font-weight:700; margin-bottom:20px; }
.cintillo::before { width:7px; height:7px; border-radius:2px; background:currentColor; transform:none; }
.rotulo { font-family:'Figtree',sans-serif; font-size:17px; letter-spacing:-.025em; margin-bottom:22px; }
.rotulo.productivity .sub { color:var(--cw-green); }
.rotulo.security .sub { color:var(--cw-amber); }
.rotulo-nota { font-family:'Figtree',sans-serif; font-size:13px; }
.tarjeta,.informe,.rol-uso { box-shadow:none; border-color:var(--linea); }
.tarjeta { padding:28px; }
.tarjeta h3 { font-size:20px; letter-spacing:-.025em; }
.tarjeta p { color:#5d6c83; }
.tarjeta::before,.informe::before,.rol-uso::before { display:none; }
.tarjeta:hover { transform:translateY(-3px); box-shadow:var(--s2); }
.icono-caja { background:#f0f4fc; border:0; border-radius:12px; color:var(--azul); }
.icono-caja svg { width:23px; height:23px; }
.panel,.app,.captura { border:1px solid #e0e7f2; box-shadow:var(--s3); border-radius:20px; }
.panel.flota,.captura.flota,.rv.visible .app.flota,.rv.visible .captura.flota { transform:none; }
.cw-pagina .captura,.cw-report-frame { padding:8px; background:#fff; border-radius:20px; }
.cw-pagina .captura::before,.cw-pagina .captura::after { display:none; }
.cw-pagina .captura img { border-radius:13px; background:#fff; box-shadow:none; }
.cw-pagina .captura .pie-captura { padding:12px 14px; margin:0; background:#fff; color:#647189; border:0; font-size:11px; line-height:1.5; }
.cw-pagina .captura .sello-real { position:static; display:inline-flex; margin:0 12px 8px; }
.panel-barra { background:#f9fafc; }
section.oscura { background:#10213d; }
.oscura .entradilla,.oscura .tarjeta p { color:#b6c4dc; }
.oscura .aviso { background:#ffffff08; border-color:#789aff; color:#b6c4dc; }
.rv { opacity:1; transform:none; transition:opacity .4s,transform .4s; }
.rv .app,.rv .captura,.rv.captura { opacity:1; transform:none; }
.progreso { display:none; }
.arriba { box-shadow:0 4px 12px #15244014; }
.aviso { border-radius:12px; font-size:14px; line-height:1.7; border-left-width:2px; }

/* Home / first impression */
.cw-home { --cw-home-width:1200px; }
.cw-home section { padding:100px 0; }
.cw-home .cw-hero { padding:68px 0 0; overflow:hidden; isolation:isolate; background:#fcfdff; }
.cw-hero::before { content:''; position:absolute; z-index:-1; width:1000px; height:920px; left:50%; top:270px; transform:translateX(-50%); background:radial-gradient(ellipse,#c9dbff 0,#e8efff 38%,#f9fbff00 69%); pointer-events:none; }
.cw-hero-copy { text-align:center; max-width:1000px; margin:0 auto; position:relative; z-index:2; }
.cw-eyebrow { display:inline-flex; gap:10px; align-items:center; padding:6px 12px 6px 9px; border:1px solid #dfe7f6; border-radius:100px; background:#fff; font-size:11px; font-weight:600; color:#516582; letter-spacing:.02em; margin-bottom:27px; box-shadow:0 3px 8px #15244003; }
.cw-eyebrow svg { width:20px; height:20px; padding:3px; background:#edf2ff; color:var(--azul); border-radius:50%; }
.cw-hero h1 { max-width:none; font-size:clamp(44px,5.35vw,76px); font-weight:600; letter-spacing:-.055em; line-height:1.025; margin-bottom:15px; }
.cw-hero h1 > span { display:block; }
.cw-hero h1 .cw-accent { color:var(--azul); }
.cw-hero h1 .cw-purpose { margin-top:19px; color:#6b7b96; font-size:.35em; letter-spacing:-.03em; font-weight:400; line-height:1.3; }
.cw-hero-description { max-width:640px; margin:22px auto 0; font-size:17px; line-height:1.65; color:#66748b; }
.cw-hero .botonera { justify-content:center; margin-top:27px; gap:24px; }
.cw-hero .cw-secondary { color:#344562; font-weight:600; }
.cw-hero-stage { margin:98px auto 0; max-width:1050px; position:relative; }
.cw-hero-weave { position:absolute; z-index:0; width:152%; height:610px; top:-435px; left:-26%; pointer-events:none; opacity:.83; -webkit-mask-image:linear-gradient(transparent 14%,#000 37%,#000 90%,transparent); mask-image:linear-gradient(transparent 14%,#000 37%,#000 90%,transparent); }
.cw-living-wave { width:100%; height:100%; display:block; pointer-events:none; }
.cw-stage-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#60708a; font-size:11px; margin:0 15px 12px; }
.cw-stage-meta { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.cw-motion-toggle { flex:none; width:32px; height:32px; display:grid; place-items:center; font:600 12px 'Figtree',sans-serif; line-height:1; cursor:pointer; background:#ffffffd9; color:#566a8b; border:1px solid #d8e2f1; border-radius:50%; transition:background .2s,border-color .2s; }
.cw-motion-toggle:hover { border-color:#8ba7dc; background:#fff; }
.cw-motion-toggle:disabled { opacity:.55; cursor:default; }
.cw-live-label { display:inline-flex; gap:7px; align-items:center; }
.cw-live-label::before { content:''; width:5px; height:5px; background:#178c70; border-radius:50%; }
.cw-window { position:relative; z-index:1; border:1px solid #cfdcf0; border-radius:18px 18px 0 0; background:#fff; box-shadow:0 25px 95px -20px #4a69ad40,0 0 0 7px #ffffff65; overflow:hidden; text-align:left; }
.cw-window-bar { display:flex; align-items:center; gap:16px; padding:11px 17px; border-bottom:1px solid #e7ecf5; background:#fff; font-size:10px; color:#8290a6; }
.cw-window-lights { display:flex; gap:5px; }
.cw-window-lights i { width:6px; height:6px; border-radius:50%; border:1px solid #d4dce9; }
.cw-window-location { flex:1; text-align:center; letter-spacing:.015em; }
.cw-window-bar svg { width:12px; height:12px; }
.cw-screen { max-height:560px; position:relative; overflow:hidden; background:#f8fafc; }
.cw-screen img { display:block; width:100%; height:auto; }
.cw-zoom { padding:0; margin:0; border:0; width:100%; background:#fff; display:block; cursor:zoom-in; text-align:inherit; }
.cw-screen::after { content:''; position:absolute; left:0; right:0; bottom:0; height:48px; background:linear-gradient(transparent,#fff); pointer-events:none; }
.cw-screen .cw-expand { position:absolute; bottom:25px; right:24px; z-index:2; display:flex; align-items:center; gap:8px; padding:9px 13px; color:#fff; background:#203455; border:1px solid #ffffff22; border-radius:9px; font:500 11px 'Figtree',sans-serif; box-shadow:0 5px 15px #1524402b; }
.cw-expand svg { width:13px; height:13px; }
.cw-hero-float { position:absolute; top:98px; left:-62px; z-index:3; display:flex; align-items:center; gap:13px; padding:17px 20px; background:#fffffff5; border:1px solid #e2eaf7; border-radius:15px; box-shadow:0 14px 35px #30486f18; text-align:left; pointer-events:none; }
.cw-float-icon { width:36px; height:36px; display:grid; place-items:center; color:#087760; background:#eaf7f1; border-radius:11px; }
.cw-float-icon svg { width:19px; height:19px; }
.cw-hero-float strong { display:block; font-weight:600; font-size:13px; color:#263b5b; }
.cw-hero-float small { display:block; font-size:10px; color:#75849b; margin-top:2px; }
.cw-hero-float-right { left:auto; right:-42px; top:285px; }
.cw-hero-float-right .cw-float-icon { color:#6352bf; background:#f0edfc; }
.cw-home .cw-trust { padding:30px 0; background:#fff; border-block:1px solid #e7ecf4; }
.cw-trust-inner { display:flex; align-items:center; gap:28px; }
.cw-trust-number { font-size:43px; font-weight:600; letter-spacing:-.06em; line-height:1; color:#203657; white-space:nowrap; }
.cw-trust p { margin:0; max-width:270px; font-size:13px; line-height:1.65; color:#647189; }
.cw-trust-products { display:flex; flex:1; justify-content:flex-end; gap:32px; padding-left:35px; border-left:1px solid var(--linea); font-size:16px; letter-spacing:-.03em; font-weight:600; color:#718099; }
.cw-trust-products span { display:flex; gap:9px; align-items:center; }
.cw-trust-products svg { width:18px; height:18px; color:#8da1bd; }
.cw-section-heading { display:grid; grid-template-columns:1.35fr 1fr; gap:90px; align-items:end; margin-bottom:42px; }
.cw-section-heading h2 { max-width:630px; margin:0; }
.cw-section-heading p { font-size:15px; color:#647189; line-height:1.8; margin:0 0 3px; }
.cw-kicker { display:flex; align-items:center; gap:10px; color:#647189; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:20px; }
.cw-kicker::before { content:''; width:16px; height:1px; background:currentColor; }
.cw-home .cw-ecosystem { padding-top:94px; padding-bottom:76px; }
.cw-solution-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.cw-solution { --solution:#087760; --wash:#f0f8f5; position:relative; display:flex; flex-direction:column; padding:24px; border:1px solid #e6ebf1; border-radius:20px; color:inherit; background:linear-gradient(160deg,var(--wash),#fff 64%); transition:transform .22s,box-shadow .22s,border-color .22s; }
.cw-solution:hover { text-decoration:none; transform:translateY(-5px); box-shadow:0 14px 30px #20385d0a; border-color:var(--solution); }
.cw-solution-intelligence { --solution:#2454df; --wash:#eff3ff; }
.cw-solution-security { --solution:#a86616; --wash:#fff8ec; }
.cw-solution-roubot { --solution:#6552b8; --wash:#f4f0fe; }
.cw-solution-top { display:flex; align-items:center; justify-content:space-between; font-size:10px; color:#8b96a7; }
.cw-solution-top svg { width:18px; height:18px; color:var(--solution); }
.cw-solution-art { height:115px; display:flex; justify-content:center; align-items:center; color:var(--solution); }
.cw-solution-art svg { width:160px; height:100px; overflow:visible; }
.cw-solution h3 { font-size:23px; font-weight:600; margin:8px 0 12px; letter-spacing:-.045em; }
.cw-solution p { font-size:13px; line-height:1.75; margin:0 0 24px; color:#647189; }
.cw-solution-link { margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:600; color:var(--solution); padding-top:17px; border-top:1px solid #e6ebf1; }
.cw-solution-link svg { width:15px; height:15px; }
.cw-core-note { display:flex; align-items:flex-start; justify-content:center; gap:10px; margin:24px auto 0; max-width:830px; font-size:12px; text-align:center; color:#647189; }
.cw-core-note svg { width:15px; height:15px; flex:none; margin-top:3px; }

/* An interactive product workbench, not an abstract animation. */
.cw-home .cw-workbench { padding:80px 0; background:#f7f9fc; border-block:1px solid #edf0f5; }
.cw-workbench-head { text-align:center; max-width:760px; margin:0 auto 32px; }
.cw-workbench-head .cw-kicker { justify-content:center; }
.cw-tabs { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px; width:max-content; max-width:100%; margin:0 auto 44px; background:#e9edf5; border:1px solid #e1e7f1; border-radius:13px; }
.cw-tabs button { display:flex; align-items:center; justify-content:center; gap:9px; padding:11px 20px; min-height:44px; border:0; border-radius:9px; background:none; font:600 13px 'Figtree',sans-serif; color:#67748a; cursor:pointer; }
.cw-tabs button svg { width:16px; height:16px; }
.cw-tabs button[aria-selected=true] { background:#fff; color:#243d68; box-shadow:0 2px 6px #20375c10; }
.cw-home .cw-feature-panel { padding:0; background:none; }
.cw-feature-panel .envoltura { padding:0; }
.cw-feature-panel .split,.cw-feature-panel .split.ancho-visual { grid-template-columns:.77fr 1.23fr; gap:54px; }
.cw-feature-panel h2 { font-size:34px; letter-spacing:-.045em; }
.cw-feature-panel .entradilla { font-size:15px; line-height:1.8; }
.cw-feature-panel .rotulo { font-size:13px; margin-bottom:20px; }
.cw-feature-panel .botonera { margin-top:24px; }
.cw-feature-panel .captura { border-radius:18px; padding:8px; box-shadow:0 15px 40px #20375c0e; }
.cw-feature-panel .captura img { border-radius:10px; }
.cw-feature-panel .enlace-flecha,.cw-feature-panel .boton { font-size:13px; }
.cw-feature-panel .boton-secundario { padding:10px 15px; min-height:42px; }

/* Secondary capabilities / asymmetrical visual details. */
.cw-capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cw-capability { padding:38px; border:1px solid #e2e8f2; border-radius:24px; background:#fbfcff; overflow:hidden; display:flex; flex-direction:column; }
.cw-capability-security { background:#fffcf7; border-color:#eee8dd; }
.cw-capability .rotulo { margin-bottom:20px; font-size:16px; flex-wrap:wrap; row-gap:6px; }
.cw-capability h2 { font-size:33px; line-height:1.14; }
.cw-capability .entradilla { font-size:14px; line-height:1.8; color:#5e6b81; }
.cw-capability .rotulo-nota { font-size:12px; }
.cw-capability .panel { margin-top:auto; box-shadow:0 12px 30px #20375c08; border-radius:15px; }
.cw-capability .panel-cuerpo { padding:24px; }
.cw-capability .panel-barra { padding:11px 15px; }
.cw-capability .panel-barra .ruta { font-family:'Figtree',sans-serif; font-size:11px; }
.cw-capability .panel-titulo .t4 { font-family:'Figtree',sans-serif; font-size:14px; }
.cw-capability .panel-titulo .sub { font-size:10px; }
.cw-capability .sello-ilustrativo { font-family:'Figtree',sans-serif; font-size:8px; padding:2px 6px; }
.cw-capability .senal { gap:9px; font-size:12px; }
.cw-capability .senal .meta { font-size:10px; }
.cw-capability .botonera { margin:8px 0 30px; }
.cw-capability .boton { font-size:13px; min-height:42px; padding:10px 16px; }
.cw-capability .enlace-flecha { font-size:13px; }
.cw-capability .aviso-fila { grid-template-columns:48px 1fr auto; gap:9px; padding:11px; }
.cw-capability .aviso-fila .cuerpo { font-size:12px; }
.cw-capability .aviso-fila .hora { font-size:10px; }
.cw-capability .aviso-fila .grado { font-size:9px; }

/* Automation / a single cinematic dark section. */
.cw-home .cw-automation { position:relative; margin:0 24px; border-radius:28px; padding:76px 0 54px; background:#10213d; color:#b5c3da; overflow:hidden; isolation:isolate; }
.cw-automation::before { content:''; position:absolute; z-index:-1; width:1000px; height:1000px; left:calc(50% - 500px); top:70px; border-radius:50%; background:radial-gradient(circle,#34549466,transparent 65%); }
.cw-automation::after { content:''; position:absolute; z-index:-1; width:1100px; height:740px; left:calc(50% - 550px); top:175px; border:1px solid #ffffff0d; border-radius:50%; box-shadow:0 0 0 90px #ffffff03,0 0 0 180px #ffffff02; pointer-events:none; }
.cw-automation-copy { max-width:820px; text-align:center; margin:0 auto; }
.cw-automation .cw-kicker { justify-content:center; color:#92a9cf; }
.cw-automation h2 { color:#fff; font-size:clamp(34px,3.75vw,52px); }
.cw-automation p { color:#a8bbd8; font-size:15px; max-width:670px; margin:22px auto; }
.cw-automation .botonera { justify-content:center; margin-top:28px; }
.cw-automation .boton { background:#e9f0ff; border:1px solid #fff; color:#183762; box-shadow:0 4px 15px #0001; }
.cw-automation .boton:hover { background:#fff; }
.cw-journey { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:60px auto 38px; padding:0; list-style:none; max-width:980px; }
.cw-journey li { text-align:center; position:relative; padding:0 10px; }
.cw-journey li:not(:last-child)::after { content:''; position:absolute; top:28px; height:1px; left:calc(50% + 38px); width:calc(100% - 76px); background:#ffffff23; }
.cw-journey-icon { margin:0 auto 16px; display:grid; place-items:center; width:57px; height:57px; border:1px solid #ffffff26; border-radius:17px; background:#203755; box-shadow:inset 0 1px 0 #ffffff0a; color:#b8ceef; }
.cw-journey-icon svg { width:23px; height:23px; }
.cw-journey li:last-child .cw-journey-icon { background:#bddccf; color:#123f3b; border-color:#d8ede5; }
.cw-journey strong { display:block; font-size:14px; font-weight:500; color:#e6eefb; }
.cw-journey small { display:block; font-size:10px; color:#91a8cb; margin-top:5px; }
.cw-automation .cw-dependency { text-align:center; max-width:750px; border-top:1px solid #ffffff15; padding-top:24px; margin:0 auto; font-size:11px; line-height:1.85; color:#8fa6ca; }
.cw-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:42px; padding-top:12px; }
.cw-value { border-top:1px solid #e3e9f1; padding-top:24px; }
.cw-value .icono-caja { margin-bottom:22px; width:40px; height:40px; border-radius:12px; background:#f2f5fb; }
.cw-value h3 { font-size:19px; font-weight:600; letter-spacing:-.025em; margin:0 0 13px; }
.cw-value p { font-size:13px; color:#647189; line-height:1.8; }
.cw-home .cw-final { padding:72px 0 90px; background:linear-gradient(#fff,#f2f6ff); border-top:1px solid #eff2f7; }
.cw-final .cw-kicker { justify-content:center; }
.cw-final h2 { font-size:clamp(36px,4.25vw,58px); max-width:800px; margin:0 auto 24px; }
.cw-final p { max-width:570px; margin:0 auto; font-size:16px; color:#647189; }
.cw-final .botonera { justify-content:center; margin-top:28px; }
.pie { position:relative; overflow:hidden; background:#10213d; padding:24px 0 28px; font-size:13px; color:#8ca1bf; }
.pie-rejilla { grid-template-columns:2fr 1fr 1fr 1fr; gap:65px; }
.pie-rejilla p { font-size:12px; line-height:1.85; max-width:340px; }
.pie .marca { margin-bottom:23px; }
.pie .marca img { height:32px; }
.pie-titulo { font-family:'Figtree',sans-serif; font-size:12px; font-weight:500; letter-spacing:.03em; color:#e6eefb; }
.pie a { color:#9db0cd; }
.pie a:hover { color:#fff; }
.pie ul { font-size:12px; }
.pie-legal { margin-top:38px; border-color:#ffffff12; padding-top:20px; font-size:10px; line-height:1.7; color:#91a4c0; }
.cw-footer-wordmark { display:block; font-size:clamp(64px,17.7vw,248px); font-family:'Figtree',sans-serif; font-weight:600; letter-spacing:-.065em; line-height:1; margin:44px 0 -18px; text-align:center; color:#ffffff06; -webkit-text-stroke:1px #ffffff16; user-select:none; }
.cw-footer-signature { position:relative; isolation:isolate; min-height:170px; margin:0 0 48px; }
.cw-footer-signature .cw-footer-wordmark { position:relative; z-index:0; margin:0; padding:24px 0 8px; color:#ffffff03; -webkit-text-stroke-color:#ffffff10; }
.cw-footer-weave { position:absolute; z-index:1; left:-40px; right:-40px; top:0; bottom:0; pointer-events:none; }
.cw-footer-signature .cw-motion-toggle { position:absolute; right:0; top:0; z-index:2; background:#152c49; color:#aec3e1; border-color:#ffffff26; }
.cw-footer-signature .cw-motion-toggle:hover { background:#223d60; border-color:#ffffff50; }

/* Accessible, local-only full-screen product preview. */
.cw-lightbox { width:min(1200px,95vw); max-width:95vw; max-height:92dvh; padding:0; border:1px solid #d9e3f4; border-radius:18px; color:#233856; background:#fff; box-shadow:0 25px 90px #0d19375c; }
.cw-lightbox::backdrop { background:#0d1937b8; backdrop-filter:blur(8px); }
.cw-lightbox-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid #e5ebf5; background:#fff; }
.cw-lightbox-head span { font-size:13px; }
.cw-lightbox-actions { display:flex; gap:5px; }
.cw-lightbox button { display:grid; place-items:center; width:38px; height:38px; border:1px solid #e2e8f2; border-radius:9px; font-size:22px; cursor:pointer; background:#f6f8fc; color:#233856; }
.cw-lightbox button:disabled { opacity:.4; cursor:default; }
.cw-lightbox-scroller { overflow:auto; max-height:calc(92dvh - 73px); background:#f6f8fc; }
.cw-lightbox-image { display:block; max-width:none; width:100%; height:auto; }
.cw-zoom-note { font-size:10px; color:#6b7b94; }

/* Navigation collapses before links run out of room. */
@media (max-width:1180px) {
  .cabecera .envoltura { gap:18px; }
  .hamburguesa { display:block; margin-left:auto; }
  .menu { display:none; position:absolute; top:84px; left:0; right:0; margin:0; padding:18px 35px; background:#fff; border-bottom:1px solid #e2e8f2; flex-direction:column; align-items:stretch; box-shadow:0 18px 25px #1524400c; }
  .menu.abierto { display:flex; }
  .menu a { padding:13px; font-size:15px; }
  .acciones { order:3; }
  .cw-trust-products { gap:20px; font-size:14px; }
  .cw-hero-float { left:-12px; }
  .cw-hero-float-right { left:auto; right:-12px; }
}
@media (max-width:1060px) {
  :root { --seccion:76px; }
  .split,.split.ancho-visual { grid-template-columns:1fr; gap:36px; }
  .cw-home section { padding:76px 0; }
  .cw-home .cw-hero { padding-top:52px; }
  .cw-trust-inner { gap:20px; }
  .cw-trust-products { flex-wrap:wrap; justify-content:center; gap:12px 20px; }
  .cw-section-heading { gap:48px; }
  .cw-solution-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .cw-solution { padding:26px; }
  .cw-solution p { max-width:37ch; }
  .cw-feature-panel .split,.cw-feature-panel .split.ancho-visual { grid-template-columns:1fr; gap:32px; }
  .cw-feature-panel h2 { max-width:640px; }
  .cw-feature-panel .entradilla { max-width:720px; }
  .cw-capability { padding:28px; }
  .cw-capability h2 { font-size:29px; }
  .cw-capability .panel-cuerpo { padding:18px; }
  .cw-capability .aviso-fila { grid-template-columns:1fr; gap:5px; }
  .cw-capability .aviso-fila .grado { justify-self:start; }
  .cw-values { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; }
  .pie-rejilla { gap:36px; }
}
@media (max-width:760px) {
  :root { --seccion:60px; }
  body { font-size:16px; }
  .envoltura { padding-inline:24px; }
  .cabecera .envoltura { height:68px; gap:10px; }
  .marca img { height:29px; }
  .acciones { gap:0; }
  .acciones .boton { display:none; }
  .idiomas button { min-width:32px; min-height:34px; }
  .menu { top:68px; padding:14px 20px 22px; }
  .hamburguesa { padding:10px; }
  [id] { scroll-margin-top:85px; }
  .cw-home section { padding:64px 0; }
  .cw-home .cw-hero { padding:42px 0 0; }
  .cw-eyebrow { font-size:10px; margin-bottom:25px; }
  .cw-hero h1 { font-size:clamp(34px,7.7vw,56px); letter-spacing:-.055em; line-height:1.05; }
  .cw-hero h1 .cw-purpose { font-size:.48em; margin-top:17px; }
  .cw-hero-description { font-size:14px; line-height:1.8; max-width:440px; margin-top:20px; }
  .cw-hero .botonera { flex-direction:row; gap:18px; margin-top:25px; }
  .cw-hero .boton { width:auto; min-height:48px; padding:13px 18px; font-size:13px; }
  .cw-hero .cw-secondary { font-size:12px; gap:6px; }
  .cw-hero-stage { margin-top:78px; }
  .cw-hero-weave { top:-290px; height:400px; width:180%; left:-40%; opacity:.72; }
  .cw-stage-top { margin-inline:2px; font-size:9px; }
  .cw-stage-meta { gap:8px; }
  .cw-motion-toggle { width:34px; height:34px; }
  .cw-hero-float { display:none; }
  .cw-window { border-radius:12px 12px 0 0; box-shadow:0 18px 60px #4a69ad22,0 0 0 4px #ffffff75; }
  .cw-window-bar { padding:8px 10px; font-size:8px; }
  .cw-window-lights { gap:3px; }
  .cw-window-lights i { width:4px; height:4px; }
  .cw-screen { max-height:none; }
  .cw-screen::after { display:none; }
  .cw-screen .cw-expand { right:8px; bottom:8px; padding:7px 9px; font-size:9px; gap:5px; }
  .cw-home .cw-trust { padding:26px 0; }
  .cw-trust-inner { flex-wrap:wrap; gap:16px; }
  .cw-trust-number { font-size:40px; }
  .cw-trust p { font-size:12px; max-width:230px; flex:1; }
  .cw-trust-products { width:100%; flex:auto; border:0; border-top:1px solid #edf0f5; padding:21px 0 0; margin-top:3px; justify-content:space-between; gap:14px 10px; }
  .cw-trust-products span { font-size:11px; gap:5px; }
  .cw-trust-products svg { width:13px; height:13px; }
  .cw-home .cw-ecosystem { padding:60px 0; }
  .cw-section-heading { grid-template-columns:1fr; gap:20px; margin-bottom:30px; }
  .cw-section-heading h2 { font-size:36px; max-width:540px; }
  .cw-section-heading p { font-size:14px; max-width:520px; }
  .cw-kicker { font-size:9px; letter-spacing:.15em; margin-bottom:15px; }
  .cw-solution-grid { gap:12px; }
  .cw-solution { border-radius:17px; padding:17px; }
  .cw-solution-art { height:88px; }
  .cw-solution-art svg { width:125px; height:82px; }
  .cw-solution h3 { font-size:20px; margin:10px 0; }
  .cw-solution p { font-size:12px; line-height:1.7; margin-bottom:20px; }
  .cw-solution-link { font-size:10px; padding-top:13px; }
  .cw-core-note { font-size:11px; text-align:left; }
  .cw-home .cw-workbench { padding:58px 0; }
  .cw-workbench-head h2 { font-size:34px; }
  .cw-tabs { margin-bottom:32px; }
  .cw-tabs button { padding:11px 14px; font-size:12px; }
  .cw-feature-panel h2 { font-size:28px; }
  .cw-feature-panel .entradilla { font-size:14px; }
  .cw-feature-panel .boton { width:max-content; }
  .cw-feature-panel .captura { border-radius:13px; padding:5px; }
  .cw-feature-panel .captura img { border-radius:9px; }
  .cw-feature-panel .captura .pie-captura { font-size:10px; padding:10px; }
  .cw-capability-grid { grid-template-columns:1fr; gap:20px; }
  .cw-capability { padding:26px; border-radius:20px; }
  .cw-capability h2 { font-size:30px; }
  .cw-capability .boton { width:max-content; }
  .cw-capability .aviso-fila { grid-template-columns:42px 1fr; }
  .cw-capability .aviso-fila .hora { grid-column:2; }
  .cw-home .cw-automation { margin:0 12px; border-radius:22px; padding:52px 0 38px; }
  .cw-automation .envoltura { padding-inline:24px; }
  .cw-automation h2 { font-size:34px; }
  .cw-automation p { font-size:14px; }
  .cw-automation .boton { width:max-content; margin:0 auto; }
  .cw-journey { grid-template-columns:1fr; gap:22px; max-width:290px; margin:40px auto 30px; }
  .cw-journey li { display:grid; grid-template-columns:50px 1fr; gap:17px; align-items:center; text-align:left; padding:0; }
  .cw-journey-icon { width:50px; height:50px; margin:0; border-radius:14px; }
  .cw-journey li:not(:last-child)::after { top:56px; height:10px; left:24px; width:1px; }
  .cw-journey strong { font-size:15px; }
  .cw-journey small { font-size:11px; }
  .cw-values { gap:30px 22px; }
  .cw-value h3 { font-size:18px; }
  .cw-value p { font-size:12px; }
  .cw-home .cw-final { padding:60px 0; }
  .cw-final h2 { font-size:39px; }
  .cw-final p { font-size:14px; }
  .cw-final .boton { width:max-content; margin:0 auto; }
  .pie { padding-top:18px; }
  .pie-rejilla { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 16px; }
  .pie-rejilla > div:first-child { grid-column:1 / -1; }
  .pie-rejilla p { max-width:450px; }
  .pie-legal { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:26px; font-size:9px; }
  .cw-footer-wordmark { font-size:17.5vw; margin:30px 0 -8px; }
  .cw-footer-signature { margin:0 0 32px; min-height:145px; }
  .cw-footer-signature .cw-footer-wordmark { padding-top:46px; }
  .cw-footer-weave { left:-90px; right:-90px; top:15px; bottom:0; }
  .cw-lightbox-head { padding:10px 12px; }
  .cw-lightbox-head span { font-size:11px; }
  .cw-lightbox { border-radius:12px; }
  .cw-lightbox-image { min-width:650px; }
  .cw-zoom-note { display:none; }
}
@media (max-width:420px) {
  .envoltura { padding-inline:20px; }
  .cw-hero h1 { font-size:clamp(29px,8vw,34px); }
  .cw-hero h1 .cw-purpose { font-size:18px; }
  .cw-hero .botonera { gap:17px; }
  .cw-hero .boton { font-size:12px; padding-inline:15px; }
  .cw-hero .cw-secondary { font-size:11px; }
  .cw-section-heading h2 { font-size:32px; }
  .cw-solution-grid { grid-template-columns:1fr; }
  .cw-solution { padding:24px; }
  .cw-solution-art { position:absolute; top:18px; right:12px; width:116px; height:80px; opacity:.65; }
  .cw-solution-top { justify-content:flex-start; gap:10px; }
  .cw-solution h3 { font-size:24px; margin:28px 0 12px; }
  .cw-solution p { max-width:none; font-size:13px; }
  .cw-solution-link { font-size:11px; }
  .cw-trust-products { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding-top:18px; }
  .cw-trust-products span { font-size:13px; }
  .cw-trust-products svg { width:16px; height:16px; }
  .cw-stage-top { align-items:flex-start; gap:10px; }
  .cw-stage-top .cw-live-label { max-width:47%; line-height:1.6; }
  .cw-stage-meta { max-width:53%; }
  .cw-stage-meta > span { text-align:right; line-height:1.6; }
  .cw-capability { padding:23px; }
  .cw-capability .panel-cuerpo { padding:15px; }
  .cw-capability .senal { align-items:flex-start; }
  .cw-capability h2 { font-size:28px; }
  .cw-values { grid-template-columns:1fr; }
  .cw-value p { max-width:46ch; font-size:14px; }
  .cw-automation h2 { font-size:30px; }
  .cw-final h2 { font-size:34px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .rv,.rv .app,.rv .captura { opacity:1!important; transform:none!important; }
}



/* ---------- añadido al publicar (construir.py) ---------- */
.cw-trampa { position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.cw-envio { margin-top:14px; font-weight:600; }
.cw-envio.ok { color:#087760; }
.cw-envio.error { color:#b42318; }
@media (max-width: 1100px) { .cabecera .cw-prueba { display:none; } }