/* ═════════════════════════════════════════════════════════════════════════
   gestiweb.com · diseño 2026 (29-10-2026), hermano de gestiwia.com
   Blanco, negro y el rojo de la marca; Raleway en todo y Montserrat en las cifras; esquinas
   rectas, líneas finas y movimiento. El efecto («futurista») va donde luce y no cansa: las
   cabeceras negras con su rejilla y su brillo rojo, la portada con la red de nodos, el pie.
   Esta hoja se carga la última (tema/default.tpl.php), encima de la de cada módulo: las clases
   y el marcado de las 158 fichas no cambian, y quitar esta línea devuelve el diseño de antes.
   Lo que se mueve se apaga con prefers-reduced-motion (al final).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes, servidas desde aquí (las mismas de gestiwia.com) ── */
@font-face {
  font-family: 'Raleway'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Raleway-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Raleway-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Las cifras, con Montserrat: las de Raleway son de estilo antiguo y bailan */
@font-face {
  font-family: 'Raleway'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Montserrat-Variable-latin.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Montserrat'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Montserrat-Variable-latin.woff2') format('woff2');
}

/* «Exo» e «Inter», otro nombre de Raleway: la web antigua los pide en unas 80 reglas (también en hojas
   que las fichas enlazan dentro del contenido, que se cargan después de esta) y ya no se descargan.
   Sin esto, esos textos salían con la letra de reserva del navegador. */
@font-face {
  font-family: 'Exo'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Raleway-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Raleway-Variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Montserrat-Variable-latin.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fuentes/Raleway-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens. Los de siempre (--colorppal…) apuntan a los nuevos: los 400 estilos en línea de las
      fichas que usan var(--colorppal) cambian solos. ── */
:root {
  --acento: #b90e2b;
  --acento-oscuro: #900b22;
  --acento-vivo: #ff3b55;        /* el rojo sobre negro: el de la marca no llega a 4,5:1 */
  --acento-suave: #fbe9ec;
  --negro: #0b0b0c;
  --noche: #111114;
  --tinta: #26262a;
  --tinta-suave: #5c5c64;
  --tinta-tenue: #8a8a92;
  --linea: #e4e4e8;
  --linea-fuerte: #c9c9cf;
  --linea-noche: rgba(255, 255, 255, .12);
  --panel: #f4f4f5;
  --blanco: #ffffff;
  --ok: #00a870;

  --letra: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cifras: 'Montserrat', 'Raleway', system-ui, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --rapido: .18s;
  --medio: .45s;
  --lento: .8s;

  --colorppal: var(--acento);
  --colorppal-hover: var(--acento-oscuro);
  --colorppal-texto: var(--tinta);
  --color-grey: var(--tinta-suave);
  --color-light: var(--panel);
  --color-border: var(--linea);
  --accent: var(--acento-oscuro);
  --shadow-sm: none;
  --shadow-md: 0 1px 0 var(--linea);
  --shadow-lg: 0 18px 40px -24px rgba(11, 11, 12, .35);
  --radius: 2px;

  /* La rejilla y el brillo de las zonas negras */
  --rejilla: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 44px 44px,
             linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 44px 44px;
}

/* ── Base ── */
body {
  font-family: var(--letra);
  font-weight: 450;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: var(--letra); letter-spacing: -.025em; }
.app-detail-page {
  font-family: var(--letra);
  --colorppal: var(--acento);
  --colorppal-hover: var(--acento-oscuro);
  --colorppal-texto: var(--tinta);
}
::selection { background: var(--acento); color: #fff; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* El punto rojo del final de los titulares, como en gestiwia.com */
.con-punto::after { content: '.'; color: var(--acento); }

/* El antetítulo: una línea roja y mayúsculas espaciadas */
.antetitulo {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .78rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento);
}
.antetitulo::before { content: ''; width: 28px; height: 2px; background: currentColor; }

/* ── Botones ── */
.btn-primary, .boton_encabezado, .cta-card .btn-primary, .boton, .gw-boton {
  border-radius: 0 !important;
  background: var(--acento);
  color: #fff;
  font-weight: 750;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background-color var(--rapido) var(--ease), transform var(--rapido) var(--ease), box-shadow var(--medio) var(--ease);
}
.btn-primary:hover, .cta-card .btn-primary:hover, .boton:hover, .gw-boton:hover {
  background: var(--acento-oscuro);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -12px rgba(185, 14, 43, .75);
}
.btn-secondary, .gw-boton-fantasma {
  border-radius: 0;
  border-width: 1.5px;
  font-weight: 750;
  transition: background-color var(--rapido) var(--ease), color var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.btn-secondary:hover { box-shadow: none; transform: translateY(-1px); }
input[type=submit], .button, .buttonsubmit, .buttonsubmit2 { border-radius: 0 !important; box-shadow: none !important; }

/* ═════════════ Cabecera ═════════════ */
header .encabezado {
  background-color: rgba(255, 255, 255, .82);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medio) var(--ease), background-color var(--medio) var(--ease);
}
header .encabezado.scrolled {
  background-color: rgba(255, 255, 255, .92);
  border-bottom-color: var(--linea);
  box-shadow: none;
}
header .titulo .logo-nombre {
  font-family: var(--letra);
  font-weight: 850;
  letter-spacing: -.045em;
  color: var(--negro);
}
header .titulo .logo-nombre::after,
ul.desplegable .mobile-logo span::after { content: '.'; color: var(--acento); }
.opciones > li > a {
  font-family: var(--letra);
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
  font-weight: 650;
  color: var(--negro);
  border-radius: 0;
  position: relative;
}
.opciones > li > a::before {
  content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .15rem; height: 2px;
  background: var(--acento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--medio) var(--ease);
}
.opciones > li:hover > a { background: none; color: var(--negro); }
.opciones > li:hover > a::before, .opciones > li > a:focus-visible::before { transform: scaleX(1); }
.descendencia_1 {
  border-radius: 0;
  border: 1px solid var(--linea);
  border-top: 2px solid var(--acento);
  box-shadow: 0 24px 48px -28px rgba(11, 11, 12, .45);
}
.descendencia_1 .ul_nivel_1 li a { border-radius: 0; font-family: var(--letra); font-weight: 600; color: var(--tinta); }
.descendencia_1 .ul_nivel_1 li a:hover { background: var(--panel); color: var(--acento); transform: none; box-shadow: inset 2px 0 0 var(--acento); }
.descendencia_1 .ul_nivel_1 li a .menu-titulo { font-weight: 750; }
.ul_nivel_2 { border-radius: 0; }
.boton_encabezado {
  padding: .7rem 1.2rem;
  font-family: var(--letra);
  text-transform: none;
  font-size: .92rem;
}
.boton_encabezado:hover { background: var(--acento-oscuro); }
#busqueda_open { border-radius: 0; }
.buscador_header input { border-radius: 0; font-family: var(--letra); }

/* El menú en las anchuras intermedias (29-10-2026). Entre 769 y 1180 px el menú completo no cabía
   junto al logo: «Casos de éxito» se partía en tres líneas y «Contáctanos» se salía de la pantalla
   (pasaba ya con el diseño anterior). Por debajo de 1100 px, el menú del móvil; entre 1100 y 1279,
   el completo pero más apretado; y ningún enlace se parte. */
.opciones > li > a { white-space: nowrap; }
@media (max-width: 1279px) {
  header .titulo { gap: .75rem; }
  header .titulo img { padding-right: .75rem; }
  header .titulo .logo-nombre { font-size: 34px; }
  .opciones { gap: .35rem; }
  .opciones > li > a { padding: .5rem .55rem; font-size: .9rem; }
  .boton_encabezado { padding: .65rem .9rem; }
}
@media (max-width: 1099px) {
  .opciones, .buscador_header { display: none !important; }
  #menu-container { display: block; }
  header .titulo { margin-right: auto; }
}

/* El cajón del móvil: blanco, con el rojo en lo activo */
ul.desplegable { font-family: var(--letra); }
ul.desplegable .mobile-logo span { font-family: var(--letra); font-weight: 850; letter-spacing: -.045em; color: var(--negro); }
ul.desplegable > .content-menumovil > ul > li > a { font-family: var(--letra); font-weight: 700; color: var(--negro); border-radius: 0; }
ul.desplegable > .content-menumovil > ul > li > a:hover { color: var(--acento); }
ul.desplegable .descendencia_1 .ul_nivel_1 > li > a { font-family: var(--letra); font-weight: 600; }
ul.desplegable .menu-movil-buscar { border-radius: 0; font-family: var(--letra); }

/* ═════════════ Cabecera de las fichas (.hero-sub): negra, con rejilla y brillo ═════════════
   El fondo azul con imagen venía en línea en 52 fichas: se sustituye desde aquí (!important gana
   al estilo en línea), sin tocarlas. */
/* Otras dos cabeceras de las mismas fichas: .hero-radical (comparativas, conectores) y .fondo (las
   fichas más antiguas, con el fondo en línea) */
.hero-sub, .hero-radical, .fondo {
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(185, 14, 43, .38), transparent 62%),
    radial-gradient(40% 70% at 5% 100%, rgba(185, 14, 43, .16), transparent 70%),
    var(--rejilla),
    var(--negro) !important;
  color: #fff;
  isolation: isolate;
}
.hero-sub::after {
  /* La línea roja que se enciende en el borde de abajo */
  height: 2px; opacity: 1; top: auto;
  background: linear-gradient(90deg, transparent, var(--acento) 30%, var(--acento-vivo) 50%, var(--acento) 70%, transparent);
  background-size: 200% 100%;
  animation: gw-barrido 6s linear infinite;
}
.hero-sub h1 {
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-shadow: none;
}
.hero-sub h1::after, .hero-radical h1::after { content: '.'; color: var(--acento-vivo); -webkit-text-fill-color: var(--acento-vivo); }
.hero-radical h1, .fondo h1 {
  background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important;
  font-weight: 850; letter-spacing: -.035em;
}
.hero-radical p, .fondo p, .fondo h3 { color: rgba(255, 255, 255, .78) !important; }
.fondo::before { display: none; }   /* la capa azul de encima del fondo */
.c-fondo h1 { text-shadow: none; font-weight: 850; letter-spacing: -.035em; }
.c-fondo h1::after { content: '.'; color: var(--acento-vivo); }
.hero-sub p { color: rgba(255, 255, 255, .78); font-weight: 450; }
.hero-sub a { color: #fff; text-decoration: underline; text-decoration-color: var(--acento-vivo); text-underline-offset: 3px; }
@keyframes gw-barrido { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Migas ── */
.breadcrumb { font-size: .85rem; font-weight: 600; letter-spacing: .01em; }
.breadcrumb a { color: var(--acento); }

/* ── Bloques de las fichas: rectos, con líneas, y una barra roja que se despliega ── */
.intro-section {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--linea);
  background: var(--blanco);
  animation: none;
  transition: border-color var(--medio) var(--ease);
}
.intro-section::before {
  top: 0; bottom: 0; width: 3px; border-radius: 0; box-shadow: none;
  background: var(--acento);
}
.intro-section::after { display: none; }
.intro-section:hover { transform: none; box-shadow: none; border-color: var(--linea-fuerte); }
.intro-text h2, .detail-content h3, .cta-card h2 { font-weight: 850; letter-spacing: -.03em; color: var(--negro); }
.intro-text p { color: var(--tinta-suave); }
.banner-card { border-radius: 0; box-shadow: none; border: 1px solid var(--linea); background: var(--panel); }
.tag {
  border-radius: 0;
  background: transparent;
  color: var(--acento);
  padding: .25rem 0 .25rem .9rem;
  border-left: 2px solid var(--acento);
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 800;
}
.detail-content ul li i { color: var(--acento); }
.premium-img { border-radius: 0; }
.premium-img:hover { transform: none; }
.highlight-card {
  border-radius: 0;
  border: 1px solid var(--linea);
  position: relative;
  overflow: hidden;
  transition: border-color var(--medio) var(--ease), transform var(--medio) var(--ease);
}
.highlight-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--acento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--medio) var(--ease);
}
.highlight-card:hover { box-shadow: none; transform: translateY(-3px); border-color: var(--linea-fuerte); }
.highlight-card:hover::before { transform: scaleX(1); }
.highlight-card i { background: none; -webkit-text-fill-color: currentColor; color: var(--acento); }
.highlight-card h4 { font-weight: 800; }

/* Preguntas frecuentes: <details>/<summary> intactos (de ahí sale el FAQPage), solo el aspecto */
.faq-item, .faq-block details, .ajusteqys details { border-radius: 0; box-shadow: none; }
.faq-item:hover, .faq-block details:hover { box-shadow: none; border-color: var(--linea-fuerte); }
.faq-item summary, .faq-block summary { font-weight: 750; color: var(--negro); }
.faq-item[open], .faq-block details[open] { border-color: var(--negro); }
.faq-item[open] summary, .faq-block details[open] summary { box-shadow: inset 3px 0 0 var(--acento); }

/* La llamada a la acción del final: negra, con su brillo */
.cta-card {
  border-radius: 0;
  border: 0;
  border-top: 0;
  background:
    radial-gradient(55% 120% at 100% 0%, rgba(185, 14, 43, .35), transparent 60%),
    var(--rejilla),
    var(--negro);
  color: #fff;
}
.cta-card h2 { color: #fff; }
.cta-card h2::after { content: '.'; color: var(--acento-vivo); }
.cta-card p { color: rgba(255, 255, 255, .75); }
.cta-card .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .55); }
.cta-card .btn-secondary:hover { background: #fff; color: var(--negro); }

/* Las fichas antiguas (dashboards, banner): mismo lenguaje */
.dashboard .card, .dashboard3 .card, .dashboard4 .card, .dashboard6 .card, .banner { border-radius: 0 !important; box-shadow: none !important; }
.dashboard .card, .dashboard3 .card, .dashboard4 .card, .dashboard6 .card { border: 1px solid var(--linea); }

/* ═════════════ Pie: negro, con su brillo ═════════════ */
.footer {
  position: relative;
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(185, 14, 43, .22), transparent 65%),
    var(--rejilla),
    var(--negro) !important;
  color: rgba(255, 255, 255, .72);
  font-family: var(--letra);
  border-top: 2px solid var(--acento);
}
.footer h3 {
  font-family: var(--letra);
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer h3::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--acento-vivo); vertical-align: middle; margin-right: .6em; }
.footer p, .footer li, .footer .footer-tagline { font-family: var(--letra); }
.footer a { color: rgba(255, 255, 255, .86) !important; transition: color var(--rapido) var(--ease); }
.footer a:hover { color: #fff !important; text-decoration: underline; text-decoration-color: var(--acento-vivo); text-underline-offset: 3px; }
.footer .footer-bottom { border-top-color: var(--linea-noche) !important; }
.footer .copyright, .footer .legal-links a { color: rgba(255, 255, 255, .6) !important; }
.gw-hecha-ia { display: inline-flex; align-items: center; gap: .55em; color: rgba(255, 255, 255, .72); font-size: .85rem; }
.gw-hecha-ia::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--acento-vivo);
  box-shadow: 0 0 0 0 rgba(255, 59, 85, .6); animation: gw-latido 2.4s ease-out infinite;
}
@keyframes gw-latido { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 85, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 59, 85, 0); } }

/* ═════════════ Gestito: su chat, con el estilo nuevo (el comportamiento no cambia) ═════════════ */
.gw-chat-container { font-family: var(--letra); border-radius: 0; }
.gw-chat-container::before { display: none; }
.gw-chat-header { background: var(--negro) !important; border-bottom: 2px solid var(--acento); border-radius: 0 !important; }
.gw-chat-title { font-family: var(--letra); font-weight: 800; letter-spacing: -.01em; }
.gw-chat-input { border-radius: 0 !important; border: 1.5px solid var(--linea-fuerte) !important; font-family: var(--letra); }
.gw-chat-input:focus { border-color: var(--negro) !important; }
.gw-chat-send { border-radius: 0 !important; background: var(--acento) !important; }
.gw-chat-send:hover { background: var(--acento-oscuro) !important; }
.mascot-message { font-family: var(--letra); font-weight: 600; }

/* ═════════════ Aparecer al hacer scroll (tema/js/animacion.js) ═════════════
   Sin JavaScript (sin la clase gw-js en <html>) todo se ve desde el principio. Nunca al H1 ni
   a la cabecera de la página: son lo primero que se pinta (LCP). */
.gw-js .gw-rv { opacity: 0; transform: translateY(18px); transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease); }
.gw-js .gw-rv.gw-visto { opacity: 1; transform: none; }

/* ═════════════ Menos movimiento ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-sub::after, .gw-hecha-ia::before { animation: none; }
  .gw-js .gw-rv { opacity: 1; transform: none; transition: none; }
  .btn-primary:hover, .highlight-card:hover, .btn-secondary:hover { transform: none; }
}