@charset "UTF-8";
/* ==========================================================================
   ZOI Grupo — Sistema de diseño
   Manual Maestro de Marca v2.0, sección 5.1 (identidad) y tabla 8 (UI).

   Norma: fondos blancos, tarjetas limpias, títulos negros, CTA naranja,
   mucha jerarquía y espacio. El naranja es acento, nunca fondo dominante.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía autoalojada (Inter Variable)
   Self-hosted a propósito: sin llamadas a CDN de terceros = sin transferencia
   de IP a Google Fonts. Relevante para el punto 21 (RGPD/consentimiento).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca. Naranja OFICIAL del manual (16/09/2026), tomado del SVG del
     logotipo: sustituye al #EA7D32 que estaba muestreado a ojo del logo
     rasterizado. La «O» del logotipo va en degradado del primario al
     secundario; el resto de la interfaz usa el primario sólido. */
  --zoi-orange:      #EB6831;
  --zoi-orange-2:    #EB9D36;   /* secundario: solo para el degradado de marca */
  --zoi-orange-600:  #CF6417;
  --zoi-orange-700:  #A94F11;
  --zoi-orange-50:   #FEF5EE;
  --zoi-orange-100:  #FBE4D2;

  /* Neutros */
  --ink-950: #0E1013;
  --ink-900: #16191F;
  --ink-800: #21262E;
  --ink-700: #333B45;
  --ink-600: #4C5661;
  --ink-500: #6B7684;
  --ink-400: #929CA9;
  --ink-300: #C2C9D2;
  --line:    #E3E8ED;
  --line-soft:#EEF1F5;
  --surface: #F7F9FB;
  --surface-2:#F1F4F8;
  --white:   #FFFFFF;

  /* Semánticos */
  --ok:   #1A7F5A;
  --warn: #B4690E;
  --risk: #B42318;

  /* Tipografía fluida */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-h2:      clamp(1.65rem, 1.3rem + 1.4vw, 2.35rem);
  --fs-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  --fs-lead:    clamp(1.06rem, 1rem + 0.35vw, 1.28rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Espaciado */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;

  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(14,16,19,.05);
  --shadow:    0 4px 16px -4px rgba(14,16,19,.08), 0 1px 3px rgba(14,16,19,.04);
  --shadow-lg: 0 24px 48px -16px rgba(14,16,19,.16), 0 2px 8px rgba(14,16,19,.05);

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --header-h: 64px;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* El atributo `hidden` tiene que ganar SIEMPRE (17/09/2026).
   Su `display:none` viene de la hoja del navegador, así que cualquier regla
   nuestra que fije `display` lo anula sin avisar. Pasó con el contador del
   carrito: `.header__carrito-num { display:inline-flex }` lo dejaba a la
   vista con un «0» permanente aunque el JS lo marcase como oculto. Todo lo
   que se muestra y se esconde desde JS usa este atributo, así que la regla
   va al reset y no se arregla caso por caso. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  color: var(--ink-950);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 650;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.014em; line-height: 1.3; }
p  { text-wrap: pretty; }

a { color: var(--ink-950); text-decoration-color: var(--ink-300); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--zoi-orange); }

:focus-visible {
  outline: 2px solid var(--zoi-orange-600);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--zoi-orange-100); color: var(--ink-950); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* Los portales ocupan todo el ancho (petición del 19/10/2026): el área de
   cliente lleva class="ancho-total" en el body (head.php, por la URL) y el
   panel lo hace en panel.css. La web comercial conserva su tope --wrap. */
.ancho-total .wrap { width: calc(100% - 2.5rem); max-width: none; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--soft { background: var(--surface); }
.section--ink { background: var(--ink-950); color: var(--ink-300); }
.section--ink h2, .section--ink h3 { color: var(--white); }

.grid { display: grid; gap: var(--sp-5); }

/* Un hijo de grid no baja de su tamaño mínimo de contenido salvo que se le
   diga. Los diagramas de inc/visuals.php llevan min-width:580px a propósito,
   así que sin esto un diagrama estira su columna y arrastra en horizontal a
   toda la página en el móvil, en vez de desplazarse dentro de su contenedor. */
.grid > *, .hero__inner > *, .split > * { min-width: 0; }

@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-950); color: var(--white);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   5. Tipografía de apoyo
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--zoi-orange-700);
}
.eyebrow::before {
  content: ''; width: 18px; height: 2px;
  background: var(--zoi-orange); border-radius: 2px;
}
.section--ink .eyebrow { color: var(--zoi-orange); }

.lead { font-size: var(--fs-lead); color: var(--ink-600); line-height: 1.6; }
.section--ink .lead { color: var(--ink-300); }
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.5rem;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.005em;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }

/* Texto casi negro sobre naranja, no blanco.
   Blanco sobre el naranja oficial #EB6831 da 3,2:1 y no alcanza el mínimo
   AA de 4,5:1. Con --ink-950 sube a 5,9:1 y el naranja se conserva intacto. */
.btn--primary { background: var(--zoi-orange); color: var(--ink-950); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--zoi-orange-600); color: var(--ink-950); }

.btn--ink { background: var(--ink-950); color: #fff; }
.btn--ink:hover { background: var(--ink-800); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink-950); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-400); background: var(--surface); }

.section--ink .btn--ghost { color: #fff; border-color: rgba(255,255,255,.24); }
.section--ink .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }

.btn--lg { padding: 1rem 1.9rem; font-size: var(--fs-body); }
.btn--sm { padding: .55rem 1rem; font-size: var(--fs-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--ink-950); text-decoration: none;
}
.link-arrow::after {
  content: '→'; transition: transform .18s ease; color: var(--zoi-orange);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Cabecera
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
.header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  height: var(--header-h);
}
.header__logo { color: var(--ink-950); flex-shrink: 0; }
.header__logo svg { height: 26px; width: auto; }

/* Cabecera a dieta (15/09/2026, petición del usuario: «un pelín más
   pequeño, salen demasiadas cosas»): 64px de alto, tipografía un punto
   menor y menos aire entre elementos. El teléfono sale del escritorio
   (sigue en el menú móvil, el pie y /contacto). */
.header__nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; }
.nav-link {
  display: block; padding: .45rem .65rem;
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-700);
  text-decoration: none; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover, .nav-link[aria-current] { background: var(--surface-2); color: var(--ink-950); }

/* Megamenú */
.has-menu { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer;
  padding: .45rem .65rem; border-radius: 8px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-700);
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { background: var(--surface-2); color: var(--ink-950); }
.nav-trigger svg { width: 12px; transition: transform .2s ease; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Se abre hacia la derecha desde el botón que lo dispara. Con `right: 0` los
   640 px del panel crecían hacia la izquierda y se salían de la ventana: el
   disparador está en el centro de la cabecera, no pegado al borde derecho.
   A la derecha sí cabe, porque la barra de escritorio solo existe a partir
   de 1100 px; el max-width es una red por si la cabecera crece. */
/* Persiana a dieta (15/09/2026, petición del usuario: la veía grande):
   ancho contenido, menos relleno y elementos más prietos. */
.megamenu {
  position: absolute; top: calc(100% + 8px); left: 0; right: auto;
  width: min(92vw, 520px);
  max-width: calc(100vw - 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  display: none;
}
.megamenu[data-open="true"] { display: block; }
/* Panel de cuatro entradas: con el ancho de Empresas quedaría medio vacío. */
.megamenu--corto { width: min(92vw, 400px); }

/* Menú móvil. Cuelga de la cabecera, que es pegajosa: abierto, la cabecera
   medía 1.200 px y el panel quedaba clavado arriba, de modo que para llegar a
   sus últimas entradas había que recorrer la página entera por detrás. Se
   despega en un panel fijo bajo la cabecera, con desplazamiento propio y
   ocupando lo que queda de pantalla. */
.megamenu--movil {
  position: static; width: auto; max-width: none; border-radius: 0;
  border-inline: 0; border-top: 1px solid var(--line); box-shadow: none;
}
@media (max-width: 1099px) {
  .megamenu--movil[data-open="true"] {
    position: fixed; left: 0; right: 0;
    top: var(--header-h); bottom: 0;
    width: auto; overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--white);
  }
}
/* Con el panel abierto la página de detrás no se mueve. */
body.menu-abierto { overflow: hidden; }

/* CUIDADO: el panel es hijo de .header y `backdrop-filter` convierte a la
   cabecera en bloque contenedor de sus descendientes `fixed`. Con el filtro
   puesto, `top/bottom` del panel se medían contra la cabecera —que a su vez
   crece con el panel— y el resultado eran 34 px de alto. Mientras el menú
   está abierto se quita: el panel tapa la página entera, así que no hay nada
   que desenfocar. No añadir transform, filter ni perspective a .header sin
   volver a comprobar esto. */
body.menu-abierto .header {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--white);
}
.megamenu__grid { display: grid; gap: 2px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .megamenu__grid { grid-template-columns: 1fr 1fr; } }
.megamenu__item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .6rem; border-radius: 8px; text-decoration: none;
  transition: background-color .15s ease;
}
.megamenu__item:hover { background: var(--surface); }
.megamenu__item .icon { color: var(--zoi-orange); flex-shrink: 0; margin-top: 2px; }
.megamenu__title { font-weight: 600; color: var(--ink-950); font-size: var(--fs-sm); display: block; }
.megamenu__desc { font-size: 0.75rem; color: var(--ink-500); line-height: 1.35; display: block; margin-top: 1px; }

.header__cta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.header__burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }

/* La barra de escritorio completa (logo + siete enlaces + teléfono + botón)
   necesita unos 1.096 px. Estaba cortada en 1023, así que en una tableta
   apaisada de 1024 se salía 72 px por la derecha y arrastraba toda la página.
   El corte va por encima de ese ancho, no por el número redondo. */
@media (max-width: 1099px) {
  .header__nav, .header__cta .btn--ghost { display: none; }
  .header__burger { display: block; margin-left: auto; }
  .header__inner { gap: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--white); }
.hero__inner {
  display: grid; gap: var(--sp-8); align-items: center;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
}
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1.02fr .98fr; } }

.hero h1 { font-size: var(--fs-display); font-weight: 680; }
.hero__copy > * + * { margin-top: var(--sp-5); }

/* Malla técnica de fondo — sustituye a la foto de stock */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 30%, #000 20%, transparent 75%);
}
.hero > * { position: relative; z-index: 1; }

.trustbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.trustbar__item { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--ink-600); }
.trustbar__item svg { color: var(--zoi-orange); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   9. Tarjetas
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card--link:hover { border-color: var(--ink-300); box-shadow: var(--shadow); transform: translateY(-2px); }
.card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: var(--sp-4);
  border-radius: 11px;
  background: var(--zoi-orange-50); color: var(--zoi-orange-700);
  border: 1px solid var(--zoi-orange-100);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-sm); color: var(--ink-600); }
.card__link::after { content: ''; position: absolute; inset: 0; }

.card--ink { background: var(--ink-900); border-color: var(--ink-800); }
.card--ink h3 { color: var(--white); }
.card--ink p { color: var(--ink-400); }

.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--sp-4); list-style: none; padding: 0; }
.tag {
  font-size: var(--fs-xs); color: var(--ink-600);
  padding: .25rem .6rem; border-radius: 6px;
  background: var(--surface-2);
}

/* Lista de checks */
.checks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); }
.checks li::before {
  content: ''; flex-shrink: 0; margin-top: .45rem;
  width: 7px; height: 7px; border-radius: 2px; background: var(--zoi-orange);
}

/* --------------------------------------------------------------------------
   10. Selector Empresas / Particulares
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--sp-4); }
@media (min-width: 800px) { .split { grid-template-columns: 1fr 1fr; } }
.split__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  border-radius: var(--radius-xl); border: 1px solid var(--line);
  background: var(--white); text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.split__card:hover { border-color: var(--ink-300); box-shadow: var(--shadow); }
.split__card--ink { background: var(--ink-950); border-color: var(--ink-800); }
.split__card--ink h3, .split__card--ink .split__num { color: var(--white); }
.split__card--ink p { color: var(--ink-400); }
.split__num { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   11. Tablas y comparativas
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* Diagramas de inc/visuals.php. Al escalar por debajo de unos 600 px el texto
   del SVG se vuelve ilegible, así que se conserva un ancho mínimo y desplaza
   el contenedor. Depende del hueco disponible, no del ancho de pantalla: en
   una columna estrecha de escritorio el problema es el mismo. */
.visual-scroll { overflow-x: auto; }

/* Aviso de que aún queda contenido a los lados. Las dos primeras capas son
   tapaderas que viajan con el contenido (background-attachment: local) y las
   dos siguientes son sombras fijas al contenedor: la sombra solo asoma cuando
   la tapadera se ha desplazado, es decir, cuando de verdad se puede seguir
   desplazando. Sin JavaScript y sin marcado extra.
   En el móvil, además, la barra de desplazamiento se deja siempre visible:
   en táctil solo aparece al arrastrar, que es justo cuando ya no hace falta. */
.table-wrap, .visual-scroll, .lic-tabla-scroll {
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--white) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(14, 16, 19, .17), rgba(14, 16, 19, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(14, 16, 19, .17), rgba(14, 16, 19, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* La barra fina va en TODOS los anchos: en Windows de escritorio la barra
   del sistema es un pedrusco gris que ensucia cualquier diagrama (visto en
   la auditoría visual del 15/09). El aviso de sombras de arriba ya dice
   cuándo queda contenido; la barra solo confirma. */
.table-wrap, .visual-scroll, .lic-tabla-scroll {
  scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent;
}
.table-wrap::-webkit-scrollbar,
.visual-scroll::-webkit-scrollbar,
.lic-tabla-scroll::-webkit-scrollbar { -webkit-appearance: none; height: 7px; }
.table-wrap::-webkit-scrollbar-thumb,
.visual-scroll::-webkit-scrollbar-thumb,
.lic-tabla-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-300); border-radius: 999px;
}
.table-wrap::-webkit-scrollbar-track,
.visual-scroll::-webkit-scrollbar-track,
.lic-tabla-scroll::-webkit-scrollbar-track { background: transparent; }
.visual { display: block; width: 100%; min-width: 580px; height: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th {
  text-align: left; font-weight: 600; color: var(--ink-950);
  background: var(--surface); padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Planes
   -------------------------------------------------------------------------- */
.plan { display: flex; flex-direction: column; }
.plan__price { display: flex; align-items: baseline; gap: .3rem; margin: var(--sp-4) 0; flex-wrap: wrap; }
.plan__amount { font-size: 2.5rem; font-weight: 680; color: var(--ink-950); letter-spacing: -.03em; }
.plan__period { font-size: var(--fs-sm); color: var(--ink-500); }
.plan__vat { width: 100%; font-size: var(--fs-xs); color: var(--ink-500); }
.plan .btn { margin-top: auto; }
.plan--featured { border-color: var(--ink-950); box-shadow: var(--shadow); }
.badge {
  position: absolute; top: -11px; left: var(--sp-5);
  font-size: var(--fs-xs); font-weight: 600;
  padding: .2rem .65rem; border-radius: 99px;
  background: var(--ink-950); color: #fff;
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink-950); font-size: var(--fs-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--zoi-orange);
  flex-shrink: 0; line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding-bottom: 1.35rem; color: var(--ink-600); font-size: var(--fs-sm); max-width: 72ch; }

/* --------------------------------------------------------------------------
   14. Cross-sell (sección 10) — módulo discreto, máximo 2 servicios
   -------------------------------------------------------------------------- */
.crosssell {
  border: 1px solid var(--line); border-left: 3px solid var(--zoi-orange);
  border-radius: var(--radius); background: var(--surface);
  padding: var(--sp-5);
}
.crosssell h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.crosssell__items { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) { .crosssell__items { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   15. Formularios
   -------------------------------------------------------------------------- */
.field { display: grid; gap: .4rem; margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-sm); font-weight: 550; color: var(--ink-800); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-500); }
.input, .select, .textarea {
  width: 100%; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); font-size: var(--fs-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Safari en iOS amplía la página al enfocar un campo con menos de 16 px y no
   la devuelve al sitio. En pantalla estrecha el campo va a 16 px. */
@media (max-width: 640px) {
  .input, .select, .textarea, .lic-tabla__qty { font-size: 1rem; }
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--zoi-orange);
  box-shadow: 0 0 0 3px var(--zoi-orange-50);
}
.textarea { min-height: 130px; resize: vertical; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-600); }
.consent input { margin-top: .25rem; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--zoi-orange); }
.form-error { color: var(--risk); font-size: var(--fs-xs); }
.alert { padding: var(--sp-4); border-radius: var(--radius); font-size: var(--fs-sm); }
.alert--ok { background: #ECFDF3; color: #05603A; border: 1px solid #ABEFC6; }
.alert--err { background: #FEF3F2; color: #912018; border: 1px solid #FECDCA; }
.alert--pendiente { background: #FFFAEB; color: #93370D; border: 1px solid #FEDF89; }

/* --------------------------------------------------------------------------
   16. Pie
   -------------------------------------------------------------------------- */
.footer { background: var(--ink-950); color: var(--ink-400); padding-block: var(--sp-8) var(--sp-6); font-size: var(--fs-sm); }
.footer a { color: var(--ink-300); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 700px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1.15fr 1fr 1fr; } }
.footer h4 { color: var(--white); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; margin-bottom: var(--sp-4); font-weight: 600; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer__logo { color: var(--white); }
.footer__logo svg { height: 28px; width: auto; }
.footer__legal {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-800);
  /* ink-500 sobre ink-950 da 3,8:1: insuficiente para texto pequeño. */
  font-size: var(--fs-xs); color: var(--ink-400);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
}
.footer__legal p { max-width: 70ch; }
.social { display: flex; gap: var(--sp-3); }
.social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--ink-800); }
.social a:hover { background: var(--ink-900); border-color: var(--ink-700); }

/* Formas de pago en el pie (26/10/2026): cada logotipo va sobre una pastilla
   blanca, porque los colores de marca no se leen sobre el fondo oscuro. */
.footer__pagos {
  margin-top: var(--sp-7); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.footer__pagos-titulo {
  color: var(--white); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 600;
}
/* .footer ul pinta las listas en rejilla vertical: aquí se anula a propósito. */
.footer ul.footer__pagos-lista { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.pago {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 34px; padding: 0 .7rem; background: var(--white); border-radius: 7px;
}
.pago img { display: block; height: auto; }
.pago--texto { color: var(--ink-900); font-size: var(--fs-xs); font-weight: 600; }

/* --------------------------------------------------------------------------
   17. Utilidades
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

.breadcrumb { font-size: var(--fs-xs); color: var(--ink-500); padding-top: var(--sp-5); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .4rem; color: var(--ink-300); }
.breadcrumb a { color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink-950); }

.env-banner {
  background: var(--warn); color: #fff; text-align: center;
  padding: .4rem 1rem; font-size: var(--fs-xs); font-weight: 600;
}

/* --------------------------------------------------------------------------
   Licencias y carrito
   -------------------------------------------------------------------------- */
.list-check { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.list-check li { padding-left: 1.6rem; position: relative; }
.list-check li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--zoi-orange-700); font-weight: 700;
}

.lic-subnav { border-bottom: 1px solid var(--line-soft); margin-top: var(--sp-4); }
.lic-subnav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-3);
}
.lic-subnav__links { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.lic-subnav__link {
  display: inline-block; padding: .35rem .8rem; border-radius: 999px;
  font-size: var(--fs-sm); color: var(--ink-500); text-decoration: none;
}
.lic-subnav__link:hover { background: var(--surface-2); color: var(--ink-950); }
.lic-subnav__link.is-activo { background: var(--ink-950); color: #fff; }

.lic-badge {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
  padding-inline: .3rem; border-radius: 999px; background: var(--zoi-orange);
  color: var(--ink-950); font-size: var(--fs-xs); font-weight: 700;
}

/* Ficha de producto: portada SVG a sangre (inc/licencias-visual.php) y cuerpo
   con el texto. El relleno pasa del .card al cuerpo para que la portada llegue
   hasta el borde. */
.lic-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lic-card__visual { background: var(--ink-950); border-bottom: 1px solid var(--line); }
.lic-card__visual svg { display: block; width: 100%; height: auto; }
.lic-card__visual.is-agotado { filter: grayscale(1); opacity: .5; }
/* Cabecera visual de las categorías del hub de licencias. */
.lic-cat-hero {
  display: flex; justify-content: center; align-items: center;
  margin-bottom: var(--sp-4); background: #fff;
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: var(--sp-4); min-height: 10.5rem;
}
.lic-cat-hero img { max-height: 8.75rem; max-width: 100%; width: auto; object-fit: contain; }

/* Foto sincronizada del producto: pastilla blanca, imagen entera sin recortar. */
.lic-card__visual--foto { background: #fff; }
.lic-card__visual--foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1; object-fit: contain;
  padding: var(--sp-4); box-sizing: border-box;
}
.lic-card__desc { color: var(--ink-700); }
.lic-card__mas summary {
  cursor: pointer; font-size: var(--fs-sm); color: var(--zoi-orange-700);
}
.lic-card__mas[open] summary { margin-bottom: var(--sp-2); }
.lic-card__cuerpo {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); flex: 1;
}
.lic-card__nombre { font-size: var(--fs-base); line-height: 1.35; }
.lic-card__precio { font-size: var(--fs-h3); }
.lic-card__precio strong { font-weight: 700; }
.lic-card__accion { margin-top: auto; padding-top: var(--sp-3); }
.lic-agotado { color: var(--ink-500); }

.lic-tabla-scroll { overflow-x: auto; }
.lic-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lic-tabla th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-500); padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
}
.lic-tabla td { padding: .65rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.lic-tabla__nombre { min-width: 16ch; }
.lic-tabla__precio { white-space: nowrap; text-align: right; }
.lic-tabla__qty { width: 4.5rem; padding: .35rem .5rem; }
.lic-tabla__quitar {
  border: 0; background: transparent; color: var(--ink-500); font-size: 1.2rem;
  cursor: pointer; line-height: 1; padding: .2rem .4rem; border-radius: var(--radius);
}
.lic-tabla__quitar:hover { background: var(--surface-2); color: var(--ink-950); }
.lic-tabla tfoot td { border-bottom: 0; text-align: right; padding-top: .5rem; }
.lic-tabla__total td { font-weight: 700; font-size: var(--fs-base); }

@media (max-width: 900px) {
  .lic-carrito { grid-template-columns: 1fr; }
}

/* Portales publicados con la Factoría Editorial. La marca de cada portal va
   sobre una placa neutra de altura fija: los cinco logotipos llegan en
   proporciones distintas y así la fila queda a la misma altura. */
.portal-card { display: flex; flex-direction: column; }
.portal-card__marca {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: var(--sp-4);
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.portal-card__marca img {
  display: block; width: auto; height: auto;
  max-width: 40px; max-height: 40px;
}
.portal-card__pie { margin-top: auto; padding-top: var(--sp-4); }
.portal-card__pie .link-arrow { font-size: var(--fs-sm); }

/* Banda «¿No encuentras lo que buscas?». Sale en todas las páginas desde
   inc/footer.php, justo antes del pie. Va contenida a propósito: la mayoría
   de las páginas ya cierran con su propia llamada a la acción y dos bloques
   grandes seguidos se restan fuerza. */
.ayuda {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--sp-6);
}
.ayuda__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-5);
}
.ayuda__titulo { font-weight: 650; color: var(--ink-950); }
.ayuda__texto {
  font-size: var(--fs-sm); color: var(--ink-600);
  margin-top: .25rem; max-width: 60ch;
}
.ayuda__acciones { flex-shrink: 0; }
.ayuda .btn svg { margin-right: .4rem; }

/* Etiqueta de estado. La usan el área de cliente y el panel; se define aquí
   para que no dependa de la hoja del panel, que la web pública no carga. */
.estado {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); font-weight: 650;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado--ok        { color: var(--ok);       background: #ECFDF3; }
.estado--pendiente { color: var(--warn);     background: #FFFAEB; }
.estado--error     { color: var(--risk);     background: #FEF3F2; }
.estado--manual    { color: var(--ink-600);  background: var(--surface-2); }

/* --- Burbuja del asistente abierto (enlace fijo, sin JS) ----------------- */
.burbuja-asistente {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--zoi-orange); color: var(--ink-950);
  font-size: var(--fs-sm); font-weight: 650; text-decoration: none;
  padding: .6rem .95rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(14, 16, 19, .22);
}
.burbuja-asistente:hover { background: var(--zoi-orange-700); color: #fff; }
@media (max-width: 640px) {
  .burbuja-asistente { right: .75rem; bottom: .75rem; padding: .55rem .8rem; }
}

/* --- Landings de campaña (17/09/2026) ------------------------------------
   Para tráfico de anuncios. Todo lo que no sea la decisión, fuera: cabecera
   sin menú, pie con lo que obliga la ley y nada más. */
.lp-head { border-bottom: 1px solid var(--line); background: var(--white); }
.lp-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px;
}
.lp-head__logo { color: var(--ink-950); flex-shrink: 0; }
.lp-head__logo svg { height: 24px; width: auto; }
.lp-head__tel {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; color: var(--ink-950); text-decoration: none;
}
.lp-head__tel:hover { color: var(--zoi-orange-700); }

.lp-hero { padding: var(--sp-8) 0 var(--sp-7); background: var(--surface); }
.lp-hero__inner {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--sp-7); align-items: start;
}
.lp-hero h1 { font-size: var(--fs-h1); margin: .4rem 0 var(--sp-4); }

.lp-pruebas { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: .9rem; }
.lp-pruebas li { display: grid; gap: .1rem; }
.lp-pruebas strong { color: var(--ink-950); }
.lp-pruebas span { font-size: var(--fs-sm); color: var(--ink-600); }

/* La tarjeta de oferta se queda a la vista mientras se lee la página: es la
   única acción que ofrece esta página y no debe haber que buscarla. */
.lp-oferta {
  position: sticky; top: calc(var(--sp-5));
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: var(--sp-6); box-shadow: var(--shadow);
  text-align: center;
}
.lp-oferta__nombre { font-weight: 650; color: var(--ink-950); }
.lp-oferta__precio { margin: .5rem 0 0; }
.lp-oferta__importe { font-size: 2.6rem; font-weight: 700; color: var(--ink-950); letter-spacing: -.02em; }
.lp-oferta__periodo { color: var(--ink-600); margin-left: .25rem; }
.lp-oferta__iva { font-size: var(--fs-sm); color: var(--ink-600); margin-bottom: var(--sp-5); }
.lp-oferta__cta { width: 100%; justify-content: center; font-size: var(--fs-body); padding: .85rem 1.2rem; }
.lp-oferta__nota { font-size: var(--fs-xs); color: var(--ink-600); margin-top: .7rem; }
.lp-oferta__otros { display: inline-block; margin-top: .9rem; font-size: var(--fs-sm); }

.lp-incluye { margin-top: var(--sp-5); }
.lp-cierre { margin-top: var(--sp-7); }

.lp-pie {
  border-top: 1px solid var(--line); padding: var(--sp-6) 0;
  font-size: var(--fs-xs); color: var(--ink-600); text-align: center;
}
.lp-pie__enlaces { margin-top: .6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .lp-hero__inner { grid-template-columns: 1fr; }
  /* En móvil la tarjeta va DESPUÉS del argumento, no antes: en una pantalla
     estrecha, abrir con un precio y sin contexto espanta. */
  .lp-oferta { position: static; order: 2; }
  .lp-head__tel span { display: none; }
}

/* --- Avisos de carrito (17/09/2026) --------------------------------------
   Confirmación al añadir y barra permanente mientras haya cesta. Las pinta
   assets/js/carrito.js; aquí solo viven los estilos.

   La barra tapa la burbuja del asistente, así que cuando está visible el JS
   pone `con-carrito-barra` en el body y la burbuja sube. Comprar manda sobre
   preguntar. */
.carrito-aviso {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  width: min(21rem, calc(100vw - 2rem));
  background: var(--white); color: var(--ink-950);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem; box-shadow: var(--shadow-lg);
  /* Fuera de pantalla hasta que hay algo que decir; nunca `display:none`,
     que se lleva por delante la transición. */
  opacity: 0; transform: translateY(.75rem); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.carrito-aviso--visible { opacity: 1; transform: none; pointer-events: auto; }
.carrito-aviso__cerrar {
  position: absolute; top: .35rem; right: .45rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--ink-500); padding: .25rem .4rem;
}
.carrito-aviso__cerrar:hover { color: var(--ink-950); }
.carrito-aviso__titulo {
  margin: 0; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--zoi-orange-700);
}
.carrito-aviso__que { margin: .3rem 0 0; font-weight: 650; }
.carrito-aviso__resumen { margin: .15rem 0 .9rem; font-size: var(--fs-sm); color: var(--ink-600); }
.carrito-aviso__acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.carrito-aviso__acciones .btn { flex: 1 1 auto; justify-content: center; }

.carrito-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--ink-950); color: var(--white);
  box-shadow: 0 -4px 18px rgba(14, 16, 19, .18);
}
.carrito-barra__texto { font-size: var(--fs-sm); font-weight: 600; }
body.con-carrito-barra .burbuja-asistente { bottom: 4.25rem; }
body.con-carrito-barra .carrito-aviso { bottom: 4.25rem; }

@media (max-width: 640px) {
  .carrito-barra { justify-content: space-between; }
  body.con-carrito-barra .burbuja-asistente { bottom: 4rem; }
}

/* --- Visual del héroe: a medida de su columna, jamás con scroll --------- */
.visual-hero { display: block; width: 100%; max-width: 470px; height: auto; margin-inline: auto; }

/* --- Carrito en la cabecera ---------------------------------------------
   Icono siempre visible, como en cualquier tienda; el número solo aparece
   cuando llevas algo (lo oculta y lo pinta assets/js/carrito.js). */
.header__carrito {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  color: var(--ink-700); text-decoration: none; flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}
.header__carrito:hover { background: var(--surface-2); color: var(--ink-950); }
.header__carrito-num {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zoi-orange); color: var(--ink-950);
  font-size: 11px; font-weight: 700; line-height: 1; border-radius: 999px;
}

/* ==========================================================================
   18. Capa visual v4 (23/10/2026)
   Revisión de diseño a petición del usuario («la veo un poco pobre»). Va al
   final a propósito: retoca el aspecto de los componentes existentes sin
   renombrar ni quitar clases, porque el área de cliente y el panel usan las
   mismas (.card, .btn, .input, .alert, .estado…). Todo lo que se mueve
   respeta prefers-reduced-motion (regla global de la sección 3).
   ========================================================================== */
:root {
  --grad-brand: linear-gradient(120deg, #EB6831 0%, #EB9D36 100%);
  /* Texto en degradado: arranca más oscuro para que el titular grande
     conserve contraste (≥3:1 en texto grande) sobre fondo claro. */
  --grad-text:  linear-gradient(100deg, #C2540F 0%, #DD5F27 55%, #D9781F 100%);
  --shadow-hover: 0 22px 44px -20px rgba(14,16,19,.26), 0 3px 8px rgba(14,16,19,.05);
  --shadow-glow:  0 10px 28px -10px rgba(235,104,49,.55);
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* --- Luz de marca en la cabecera de todas las páginas públicas ----------
   Un resplandor naranja muy suave detrás del primer bloque de cada página
   (el hero en la home, la portada de cada landing en el resto). Vive en
   main#main —el panel usa otro <main>— y en una capa por detrás del
   contenido: las secciones con fondo propio lo tapan sin más. */
main#main { position: relative; isolation: isolate; }
main#main::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 auto 0; height: min(900px, 120vh);
  background:
    radial-gradient(42rem 22rem at 88% -4%, rgba(235,157,54,.16), transparent 70%),
    radial-gradient(34rem 20rem at 4% 18%, rgba(235,104,49,.08), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, rgba(247,249,251,0) 100%);
}
.hero { background: transparent; }

/* --- Texto de apoyo ----------------------------------------------------- */
.texto-marca {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.eyebrow {
  padding: .32rem .75rem .32rem .65rem;
  background: rgba(254,245,238,.9);
  border: 1px solid var(--zoi-orange-100);
  border-radius: 999px; line-height: 1.2;
}
.eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand); }
.section--ink .eyebrow { background: rgba(235,104,49,.12); border-color: rgba(235,104,49,.32); }
.megamenu .eyebrow { background: none; border: 0; padding-inline: 0; }
.section-head { margin-bottom: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); }
.section-head h2 { letter-spacing: -.028em; }

/* --- Botones ------------------------------------------------------------ */
.btn { border-radius: 11px; }
.btn--primary {
  background: var(--grad-brand); color: var(--ink-950);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -8px rgba(235,104,49,.7);
}
.btn--primary:hover {
  background: linear-gradient(120deg, #E05C25 0%, #E8902C 100%);
  color: var(--ink-950); box-shadow: var(--shadow-glow); transform: translateY(-1px);
}
.btn--ghost { background: rgba(255,255,255,.7); }
.btn--ghost:hover { border-color: var(--ink-950); background: var(--white); transform: translateY(-1px); }
.btn--ink:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.section--ink .btn--ghost { background: transparent; }

/* --- Cabecera y megamenú ------------------------------------------------ */
.header { background: rgba(255,255,255,.84); border-bottom-color: rgba(227,232,237,.75); }
.nav-link, .nav-trigger { font-size: .84rem; font-weight: 550; }
.nav-link[aria-current] { background: var(--zoi-orange-50); color: var(--zoi-orange-700); }
.megamenu {
  border-radius: var(--radius-lg); padding: var(--sp-3);
  border-color: var(--line-soft);
  box-shadow: 0 30px 60px -24px rgba(14,16,19,.28), 0 4px 14px rgba(14,16,19,.06);
}
.megamenu[data-open="true"] { animation: zoiMenu .18s var(--ease-out); }
@keyframes zoiMenu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.megamenu--movil { border-radius: 0; box-shadow: none; }
.megamenu--movil[data-open="true"] { animation: none; }
.megamenu__item { padding: .55rem .6rem; border-radius: 12px; gap: .75rem; align-items: center; }
.megamenu__item > .icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; margin-top: 0; border-radius: 10px;
  background: var(--zoi-orange-50); color: var(--zoi-orange-700);
  box-shadow: inset 0 0 0 1px var(--zoi-orange-100);
  transition: background .18s ease, color .18s ease;
}
.megamenu__item:hover { background: var(--surface); }
.megamenu__item:hover > .icon { background: var(--grad-brand); color: var(--ink-950); box-shadow: none; }

/* Persianas con aire (23/10/2026, petición del usuario: «salen un poco
   empaquetadas», «que no salga acoplada»). Más anchas y con más relleno, Empresas
   a tres columnas, separadas de la cabecera y, si la pantalla tiene altura, se
   ven completas; solo en pantallas bajas desplazan por dentro en vez de cortarse.
   Recursos, la última, se abre hacia la izquierda para no salirse por la derecha
   en anchos cercanos a 1.100 px. */
@media (min-width: 1100px) {
  .megamenu:not(.megamenu--movil) {
    /* El li mide lo que el botón (centrado en la cabecera): +26 px deja la
       persiana unos 12 px por debajo del borde de la cabecera. */
    top: calc(100% + 26px);
    width: min(760px, calc(100vw - 2.5rem));
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    max-height: calc(100vh - var(--header-h) - 2rem);
    max-height: calc(100dvh - var(--header-h) - 2rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .megamenu--corto:not(.megamenu--movil) { width: min(540px, calc(100vw - 2.5rem)); }
  #menu-empresas > .megamenu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .megamenu:not(.megamenu--movil) .megamenu__grid { gap: var(--sp-1) var(--sp-2); }
  .megamenu:not(.megamenu--movil) .megamenu__item { padding: .8rem .85rem; align-items: flex-start; }
  .megamenu:not(.megamenu--movil) .megamenu__desc { margin-top: .2rem; font-size: .78rem; line-height: 1.4; }
  .megamenu:not(.megamenu--movil) > div[style] { margin-top: var(--sp-3) !important; padding-top: var(--sp-4) !important; }
  .nav-list > .has-menu:last-child > .megamenu { left: auto; right: 0; }
}
/* Entre 1.100 y 1.279 px la barra (con la letra de la v4) no cabía y el botón
   «Contactar» se salía por la derecha. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .header__inner { gap: var(--sp-4); }
  .nav-link, .nav-trigger { padding-inline: .45rem; font-size: .8rem; }
}

/* --- Hero de la home ---------------------------------------------------- */
.hero h1 { letter-spacing: -.035em; line-height: 1.04; }
.hero__copy > .lead { max-width: 54ch; }
.hero__visual { position: relative; }
.hero__visual::before {
  content: ''; position: absolute; inset: -4% -6%; z-index: -1;
  /* Degradado radial y no filter:blur: mismo halo sin capa costosa en móvil. */
  background: radial-gradient(closest-side, rgba(235,125,50,.22), rgba(235,157,54,.08) 60%, transparent);
}
.trustbar { border-top: 0; padding-top: var(--sp-2); gap: var(--sp-2); }
.trustbar__item {
  padding: .4rem .8rem .4rem .6rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: var(--fs-xs); color: var(--ink-700);
}

/* --- Tarjetas ----------------------------------------------------------- */
.card { box-shadow: var(--shadow-sm); }
.card--link {
  transition: border-color .25s ease, box-shadow .25s var(--ease-out), transform .25s var(--ease-out),
              background-color .25s ease;
}
.card--link::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.card--link:hover { border-color: var(--zoi-orange-100); box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.card--link:hover::before { transform: scaleX(1); }
.card__icon {
  width: 48px; height: 48px; border-radius: 13px; border: 0;
  background: linear-gradient(140deg, var(--zoi-orange-50) 0%, #FFFFFF 100%);
  box-shadow: inset 0 0 0 1px var(--zoi-orange-100), 0 4px 10px -6px rgba(235,104,49,.45);
  transition: background .25s ease, color .25s ease;
}
.card--link:hover .card__icon { background: var(--grad-brand); color: var(--ink-950); }
.card--link:hover .link-arrow::after { transform: translateX(5px); }
.card--ink { background: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-950) 100%); }
.card--ink.card--link:hover { border-color: rgba(235,104,49,.4); }
.tag { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: .22rem .65rem; }

/* Tarjeta destacada de la portada de cada landing («Qué cubre…»). */
.card--destacado {
  background: linear-gradient(165deg, var(--ink-900) 0%, var(--ink-950) 100%);
  border: 1px solid var(--ink-800); color: var(--ink-300);
  box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  overflow: hidden;
}
.card--destacado::after {
  content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px;
  background: radial-gradient(circle, rgba(235,104,49,.35), transparent 65%); pointer-events: none;
}
.card--destacado h2 { color: var(--white); position: relative; }
.card--destacado .checks { position: relative; }
.card--destacado .checks li { color: var(--ink-300); }

/* Número de cada punto de dolor de las landings. */
.num-pastilla {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 10px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--zoi-orange-700);
  background: var(--zoi-orange-50); box-shadow: inset 0 0 0 1px var(--zoi-orange-100);
}

/* Listas. .checks se usa en muchos sitios con sentido neutro (pasos,
   pros y contras), así que la viñeta base es un punto de marca; la marca
   de «sí» y la cruz de «no» son opcionales: .checks--si / .checks--no. */
.checks li::before {
  width: 8px; height: 8px; margin-top: .5rem; border-radius: 50%;
  background: var(--grad-brand); box-shadow: 0 0 0 3px var(--zoi-orange-50);
}
.section--ink .checks li::before, .card--destacado .checks li::before { box-shadow: 0 0 0 3px rgba(235,104,49,.18); }
.checks--si li::before, .checks--no li::before {
  width: 18px; height: 18px; margin-top: .15rem; border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--zoi-orange-100);
}
.checks--si li::before {
  background: var(--zoi-orange-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A94F11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.checks--no li::before {
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: inset 0 0 0 1px var(--line);
}
.section--ink .checks--si li::before, .card--destacado .checks--si li::before {
  background: rgba(235,104,49,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB9D36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(235,104,49,.35);
}

/* --- Ritmo de secciones ------------------------------------------------- */
.section--soft {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-block: 1px solid var(--line-soft);
}
.section--ink {
  position: relative;
  background:
    radial-gradient(46rem 22rem at 12% -8%, rgba(235,104,49,.22), transparent 65%),
    radial-gradient(36rem 20rem at 100% 108%, rgba(235,157,54,.14), transparent 65%),
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--ink-950);
}
.section--ink .card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.09); box-shadow: none; }
.section--ink .card h3 { color: var(--white); }
.section--ink .card p { color: var(--ink-400); }
.section--ink .card--link:hover { background: rgba(255,255,255,.06); border-color: rgba(235,104,49,.45); }
.section--ink .card__icon {
  background: rgba(235,104,49,.14); color: #F2A26B;
  box-shadow: inset 0 0 0 1px rgba(235,104,49,.3);
}
.section--ink .card--link:hover .card__icon { background: var(--grad-brand); color: var(--ink-950); }
.section--ink .tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: var(--ink-300); }
.section--ink .link-arrow { color: var(--white); }

/* Selector Empresas / Particulares */
.split__card { transition: border-color .25s ease, box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.split__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.split__card--ink {
  background:
    radial-gradient(28rem 16rem at 100% 0%, rgba(235,104,49,.28), transparent 65%),
    var(--ink-950);
}
.split__card--ink:hover { border-color: rgba(235,104,49,.5); }

/* Buscador de automatización de la home */
.buscador {
  padding: .6rem; border-radius: 18px;
  box-shadow: 0 24px 50px -28px rgba(14,16,19,.35), 0 2px 6px rgba(14,16,19,.05);
}
.buscador .input { border: 0; box-shadow: none; font-size: 1rem; padding: .9rem .6rem; background: transparent; }
.buscador .input:focus { box-shadow: none; }
.buscador:focus-within { border-color: var(--zoi-orange); box-shadow: 0 0 0 4px var(--zoi-orange-50), 0 24px 50px -28px rgba(14,16,19,.35); }
.buscador__icono { color: var(--zoi-orange-700); padding-left: .5rem; flex-shrink: 0; }
.ejemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: var(--sp-4); list-style: none; padding: 0; }
.ejemplos a {
  display: inline-block; font-size: var(--fs-xs); color: var(--ink-600); text-decoration: none;
  padding: .3rem .75rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line);
  transition: border-color .15s ease, color .15s ease;
}
.ejemplos a:hover { border-color: var(--zoi-orange); color: var(--zoi-orange-700); }

/* Rejilla de áreas de la home */
.area__marca { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: #F2A26B; font-weight: 650; margin-bottom: .2rem; }

/* --- FAQ, formularios y tablas ------------------------------------------ */
.faq summary { transition: color .15s ease; }
.faq summary:hover { color: var(--zoi-orange-700); }
.faq summary::after {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--zoi-orange-50); font-size: 1.1rem; color: var(--zoi-orange-700);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 4px var(--zoi-orange-50); }
.crosssell { border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--zoi-orange-50) 0%, var(--surface) 60%); }

/* --- Banda de ayuda y pie ----------------------------------------------- */
.ayuda { background: var(--white); border-top: 1px solid var(--line-soft); padding-block: var(--sp-7); }
.ayuda__inner {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-xl); border: 1px solid var(--zoi-orange-100);
  background:
    radial-gradient(30rem 12rem at 100% 0%, rgba(235,157,54,.18), transparent 70%),
    var(--zoi-orange-50);
}
.ayuda__titulo { font-size: var(--fs-h3); letter-spacing: -.015em; }

.footer {
  position: relative;
  background:
    radial-gradient(40rem 18rem at 85% 0%, rgba(235,104,49,.12), transparent 70%),
    var(--ink-950);
  padding-block: var(--sp-9) var(--sp-6);
}
.footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand);
}
.footer ul a { transition: color .15s ease; }
.footer ul a:hover { color: var(--white); text-decoration: none; }
.social a { color: var(--ink-300); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.social a:hover { background: var(--zoi-orange); border-color: var(--zoi-orange); color: var(--ink-950); }
.footer__contacto { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; gap: .6rem; }
.footer__contacto li { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contacto svg { color: var(--zoi-orange); flex-shrink: 0; margin-top: .2rem; }

/* --- Aparición al hacer scroll (site.js) --------------------------------
   Solo se oculta si el JS ha marcado <html class="reveal-on">: sin JS, o con
   movimiento reducido, todo se ve desde el principio. */
html.reveal-on .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.reveal-on .reveal.is-visible { opacity: 1; transform: none; }

/* --- Móvil -------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap, .wrap-narrow { width: min(100% - 2rem, var(--wrap)); }
  .ancho-total .wrap { width: calc(100% - 2rem); }
  .hero__inner { gap: var(--sp-6); }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .buscador { flex-direction: column; align-items: stretch !important; }
  .buscador .btn { width: 100%; }
  .buscador__icono { display: none; }
  /* Sin esto los dos botones no se partían y a 360 px ensanchaban TODA la web. */
  .ayuda__acciones { flex: 1 1 100%; min-width: 0; }
  .ayuda__acciones .btn { flex: 1 1 auto; }
  /* Texto gris sin borde: en el móvil no se leía como un menú. */
  .lic-subnav__link {
    padding: .5rem .85rem; background: var(--white);
    border: 1px solid var(--line); color: var(--ink-950); font-weight: 500;
  }
  .lic-subnav__link.is-activo { border-color: var(--ink-950); }
  .footer { padding-top: var(--sp-8); }
}

/* Licencias: texto enriquecido propio (descripción e instrucciones, 03/11/2026) */
.lic-rico h2 { font-size: var(--fs-h3); margin-top: var(--sp-6); }
.lic-rico h3 { font-size: var(--fs-lg, 1.15rem); margin-top: var(--sp-5); }
.lic-rico p, .lic-rico ul, .lic-rico ol, .lic-rico table { margin-top: var(--sp-3); }
.lic-rico ul, .lic-rico ol { padding-left: 1.4rem; }
.lic-rico li + li { margin-top: .3rem; }
.lic-rico table { border-collapse: collapse; width: 100%; max-width: 44rem; }
.lic-rico th, .lic-rico td { border: 1px solid var(--line); padding: .4rem .7rem; text-align: left; }
.lic-rico img { max-width: 100%; height: auto; border-radius: 8px; }
.lic-rico .lic-aviso { border-left: 4px solid var(--warn); background: #FFFAEB; padding: .6rem .9rem; margin-top: var(--sp-4); border-radius: 0 6px 6px 0; }
.lic-rico .lic-requisitos { border-left: 4px solid var(--ink-600); background: var(--surface-2); padding: .6rem .9rem; margin-top: var(--sp-4); border-radius: 0 6px 6px 0; }
.lic-card__rasgos { margin-top: .25rem; }
.lic-tecnica { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin-top: var(--sp-5); font-size: var(--fs-sm); }
.lic-tecnica dt { color: var(--ink-600); }
.lic-tecnica dd { margin: 0; color: var(--ink-950); }
.lic-filtros-pub { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-6); }
.lic-filtros-pub .field { margin: 0; }
.lic-filtros-pub select, .lic-filtros-pub .input { min-width: 9rem; }
.lic-clave-cliente { font-family: var(--font-mono, ui-monospace, monospace); background: var(--surface-2); padding: .4rem .6rem; border-radius: 6px; word-break: break-all; display: inline-block; }