/* ── Grupo Cahos · hoja de estilos compartida ──────────────
   Extraída del <style> de index-v2.html para poder reutilizarla
   en blog.html y en cada artículo sin duplicar ~600 líneas de CSS
   por página. Al ser un fichero externo cacheable, la segunda
   página que visite un usuario carga más rápido todavía. */

:root {
  --gold:       #C9A84C;
  --gold-light: #E2C576;
  --navy:       #0a0f1e;
  --card:       #111827;
  --card2:      #1a2234;
  --muted:      #9ca3af;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x en html (no solo en body): en iOS Safari, cuando el <body>
   fija su propio overflow pero <html> no dice nada, la propagación al
   viewport puede dejar huecos donde un elemento con position:fixed (que
   se posiciona respecto al viewport, no a body) se escapa del recorte de
   body. Fijándolo también en html se cierra esa vía de escape. */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
/* Compensa la navbar fija (~80px) al saltar a un ancla, para que el
   contenido de destino no quede tapado debajo del nav. */
[id] { scroll-margin-top: 90px; }

body {
  background: var(--navy);
  color: #fff;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* Ningún <img> debería poder ser más ancho que su contenedor, incluso
   si faltan los atributos width/height o el CSS específico del bloque. */
img { max-width: 100%; height: auto; }

/* ── GRID / UTILITIES (reemplaza Bootstrap) ──────────── */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
/* Flexbox, no CSS Grid: en pruebas con Chrome (headless y confirmado por
   captura real en iPhone) un .row en display:grid con columnas grid-column:
   span N calculaba mal el ancho de las pistas en este layout concreto —
   un hijo con grid-column:span 12 se renderizaba ~530px en un contenedor
   de 342px, aunque grid-template-columns diera valores correctos sobre el
   papel. display:flex + flex-basis en % es el sistema real que usa
   Bootstrap y no reproduce ese problema.

   El espaciado NO usa la propiedad `gap`: con flex-basis en % fijo,
   N columnas iguales MÁS los gaps entre ellas suman más del 100% del
   contenedor, así que la última se iba a la siguiente fila (el bug de
   "3 tarjetas se convirtieron en 2 por fila" en líneas de negocio).
   Cambiar a flex-grow para que el gap se reste antes de repartir tampoco
   sirve: sin una base en %, flex-wrap ya no sabe cuántas columnas caben
   por fila y las mete todas en una sola línea.
   La solución robusta (la técnica real de Bootstrap, anterior a `gap`):
   margen negativo en la fila + padding en cada columna. El espacio visual
   sale del padding — que resta espacio DENTRO del propio N%, no se suma
   aparte — así que los porcentajes de flex-basis siempre cuadran en 100%. */
.row {
  display: flex; flex-wrap: wrap;
  --gc-gap: 0px;
  margin-left: calc(var(--gc-gap) / -2); margin-right: calc(var(--gc-gap) / -2);
  row-gap: var(--gc-gap);
}
.g-2 { --gc-gap: .5rem; } .g-3 { --gc-gap: 1rem; } .g-4 { --gc-gap: 1.5rem; } .g-5 { --gc-gap: 3rem; }
/* min-width:0 también en flexbox: por defecto, un hijo flex tiene
   min-width:auto (nunca se encoge más allá de su contenido más ancho sin
   partir), así que un solo número o nombre largo dentro de una fila puede
   forzar toda la fila a desbordar la pantalla en móvil. */
.col-12, .col-6, .col-md-3, .col-md-6, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-7, .col-lg-8, .col-xl-4, .col-xl-fifth {
  min-width: 0;
  padding-left: calc(var(--gc-gap, 0px) / 2); padding-right: calc(var(--gc-gap, 0px) / 2);
}
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6  { flex: 0 0 50%;  max-width: 50%; }
@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-3 { flex: 0 0 25%;      max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}
@media (min-width: 1200px) {
  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  /* Las 5 líneas de negocio en una sola fila a partir de escritorio grande. */
  .col-xl-fifth { flex: 0 0 20%; max-width: 20%; }
}
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-between { justify-content: space-between; }
.text-center { text-align: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-1 { margin-top: .25rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.me-2 { margin-right: .5rem; }
.py-5 { padding-block: 3rem; }
.d-inline { display: inline; }

/* ── ICONOS SVG (reemplaza Font Awesome) ─────────────── */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-fill { fill: currentColor; stroke: none; }

/* ── NAVBAR ───────────────────────────────────────────── */
/* Transparente al tope de la página, para integrarse con la foto/degradado
   del hero de abajo; se vuelve sólida al hacer scroll (clase .scrolled,
   aplicada por JS) para seguir siendo legible sobre el resto de secciones. */
.navbar-gc {
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: .9rem 0;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.navbar-gc.scrolled {
  background: rgba(10,15,30,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,168,76,.18);
}
.navbar-gc .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  transition: opacity .25s;
}
.nav-logo:hover { opacity: .85; }
.nav-logo img {
  height: 38px;
  width: auto;
  border-radius: 6px;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.1;
}
.nav-logo-text span {
  color: var(--gold);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.nav-logo-text strong {
  color: #fff;
  font-size: 1.05rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  color: #ccc;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .25s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

.lang-wrap { display: flex; gap: .4rem; }
.lang-btn {
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  padding: .22rem .7rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
}
.lang-btn.active,
.lang-btn:hover { background: var(--gold); color: #000; }

.nav-right { display: flex; align-items: center; gap: 1.2rem; }
.nav-cta {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .55rem 1.3rem;
  border-radius: 50px;
  transition: all .25s;
}
.nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }

/* ── Dropdowns del nav (Negocios / Para ti) ────────────── */
.has-dropdown { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit;
  color: #ccc;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s;
}
.nav-drop-btn:hover { color: var(--gold); }
.nav-caret { font-size: .55rem; transform: rotate(180deg); transition: transform .25s; }
.has-dropdown:hover .nav-caret,
.has-dropdown.open .nav-caret { transform: rotate(0deg); }
.dropdown-menu {
  list-style: none; margin: 0; padding: .6rem;
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--card);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 12px;
  min-width: 210px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 1001;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.open .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 8px;
  color: #ccc;
  font-size: .82rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.dropdown-menu a:hover { background: rgba(201,168,76,.12); color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: .2rem;
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--navy);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(201,168,76,.18);
  }
  .nav-links.open { display: flex; }
  .navbar-gc .container { flex-wrap: wrap; position: relative; }
  .nav-right { width: 100%; justify-content: space-between; }
  .has-dropdown { width: 100%; }
  .nav-drop-btn { width: 100%; justify-content: space-between; }
  .dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: none;
    background: transparent; border: none; box-shadow: none;
    padding: .3rem 0 .3rem 1rem; margin-top: .3rem;
    min-width: 0;
  }
  .has-dropdown.open .dropdown-menu { display: block; }
}

/* ── HERO ─────────────────────────────────────────────── */
#inicio {
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  max-width: 100vw;
  background-color: #0a0f1e;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse 60% 55% at 15% 20%, rgba(201,168,76,.20) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 85% 75%, rgba(201,168,76,.14) 0%, transparent 60%),
    linear-gradient(100deg, #0a0f1e 0%, #0a0f1e 42%, rgba(10,15,30,.78) 58%, rgba(10,15,30,.3) 78%, rgba(10,15,30,.05) 100%),
    url('hero-skyline.jpg');
  background-size: 200% 200%, 200% 200%, 100% 100%, cover;
  background-position: 0% 0%, 100% 100%, 0 0, right center;
  animation: gcHeroShift 22s ease-in-out infinite;
}
@keyframes gcHeroShift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0, right center; }
  50%      { background-position: 25% 15%, 75% 85%, 0 0, right center; }
}
#inicio .container { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 6px;
  padding: .35rem 1rem;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.8rem;
  opacity: 0; transform: translateY(16px); animation: gcIn .7s ease-out .2s forwards;
}
.hero-badge strong { color: var(--gold); }
.hero-tag {
  color: var(--gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: .6rem;
  opacity: 0; transform: translateY(16px); animation: gcIn .7s ease-out .35s forwards;
}
.hero-title {
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  font-weight: 900;
  line-height: 1.12;
  margin-bottom: 1rem;
  opacity: 0; transform: translateY(20px); animation: gcIn .8s ease-out .5s forwards;
}
.hero-title em {
  font-style: normal;
  color: var(--gold);
}
.hero-sub {
  color: var(--muted);
  font-size: .98rem;
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 1.6rem;
  opacity: 0; transform: translateY(20px); animation: gcIn .8s ease-out .65s forwards;
}
.hero-actions { opacity: 0; transform: translateY(20px); animation: gcIn .8s ease-out .8s forwards; }
.hero-actions .btn-gold,
.hero-actions .btn-outline { padding: .62rem 1.6rem; font-size: .8rem; }
@keyframes gcIn { to { opacity: 1; transform: translateY(0); } }
.hero-values {
  display: flex; flex-wrap: wrap;
  gap: .9rem 1.6rem;
  margin-top: 1.7rem;
  opacity: 0; transform: translateY(16px); animation: gcIn .8s ease-out .95s forwards;
}
.hero-value-item {
  display: flex; align-items: center; gap: .5rem;
  color: var(--muted); font-size: .74rem; font-weight: 600;
  line-height: 1.25;
  max-width: 150px;
}
.hero-value-item .ic { color: var(--gold); font-size: 1.15rem; flex-shrink: 0; }
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font-weight: 800;
  font-size: .88rem;
  padding: .82rem 2.2rem;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid var(--gold);
  letter-spacing: .04em;
  transition: all .3s;
}
.btn-gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(201,168,76,.35);
}
.btn-blue {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  font-size: .88rem;
  padding: .82rem 2.2rem;
  border-radius: 50px;
  text-decoration: none;
  border: 2px solid var(--gold);
  letter-spacing: .04em;
  transition: all .3s;
}
.btn-blue:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(201,168,76,.35);
}
.btn-outline {
  display: inline-block;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 800;
  font-size: .88rem;
  padding: .82rem 2.2rem;
  border-radius: 50px;
  text-decoration: none;
  background: transparent;
  letter-spacing: .04em;
  transition: all .3s;
}
.btn-outline:hover {
  background: var(--gold);
  color: #000;
}
.hero-scroll {
  margin-top: 2.2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 0; animation: gcFade 1s ease-out 1.1s forwards;
}
@keyframes gcFade { to { opacity: 1; } }
.hero-scroll::before {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--gold);
}

/* ── REVEAL ON SCROLL (reemplaza GSAP/ScrollTrigger) ────
     Oculto solo si hay JS (.js en <html>, seteado antes del primer
     pintado). Sin JS, o si el observer no llega a disparar, el
     contenido es visible por defecto: nunca depende de JS para
     existir — solo para animarse. */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.js .reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal-left.in-view { opacity: 1; transform: translateX(0); }
.js .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal-right.in-view { opacity: 1; transform: translateX(0); }
.js .reveal-scale { opacity: 0; transform: scale(.9); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }
.js .reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: .00s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: .40s; }
.gold-bar { width: 56px; height: 3px; background: var(--gold); border-radius: 2px; margin-top: 1.2rem; transform-origin: left center; transition: transform .6s ease-out .15s; }
.js .gold-bar { transform: scaleX(0); }
.gold-bar.mx { margin-left: auto; margin-right: auto; }
.reveal.in-view .gold-bar, .in-view .gold-bar { transform: scaleX(1); }

/* ── SHARED SECTION ───────────────────────────────────── */
section { scroll-margin-top: 80px; }
.sec-label {
  color: var(--gold);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.sec-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 900;
  margin-top: .5rem;
}

/* ── SOBRE NOSOTROS ───────────────────────────────────── */
/* ── LÍNEAS ───────────────────────────────────────────── */
#lineas { padding: 7rem 0; background: #f8f9fa; }
#lineas .sec-title { color: #111827; }
.linea-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  /* .linea-card no es un ítem directo del grid (va anidado dentro de
     .col-xl-4, que sí se estira por defecto a la altura de su fila), así
     que necesita height:100% explícito para heredar esa altura y que el
     flex-grow de .lc-body pueda igualar las tarjetas de una misma fila. */
  height: 100%;
  box-shadow: 0 2px 20px rgba(0,0,0,.09);
  transition: transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s;
}
.linea-card:hover { transform: translateY(-10px); box-shadow: 0 36px 72px rgba(0,0,0,.16); }
/* flex-grow deja que .lc-body llene el resto de la tarjeta bajo la imagen
   (altura fija), así todas las tarjetas de una misma fila quedan parejas
   aunque el texto de cada línea tenga distinto largo. */
.lc-body { padding: 2.2rem 1.3rem 1.3rem; flex-shrink: 0; flex-grow: 1; min-height: 170px; display: flex; flex-direction: column; }
.lc-badge {
  position: absolute; left: 1.3rem; top: 149px;
  width: 42px; height: 42px;
  background: var(--navy);
  border: 3px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  z-index: 3;
}
.lc-tag { font-size: .68rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .8rem; }
.linea-card h4 { font-size: 1.02rem; font-weight: 900; margin-bottom: .5rem; color: #111827; line-height: 1.2; }
.linea-card p { color: #6b7280; line-height: 1.55; font-size: .8rem; margin-bottom: .9rem; }
.badge-new {
  display: inline-block; background: var(--gold); color: #000; font-size: .62rem; font-weight: 800;
  padding: .15rem .5rem; border-radius: 20px; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: middle; margin-left: .4rem;
}
.linea-cta { display: inline-block; color: var(--gold); font-size: .78rem; font-weight: 700; text-decoration: none; margin-top: auto; }
.linea-cta:hover { color: #a07830; }
.lc-visual { height: 170px; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex-shrink: 0; background: #111827; }
.lc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; transition: transform .5s cubic-bezier(.25,.8,.25,1); }
.linea-card:hover .lc-img { transform: scale(1.06); }
.lc-vis-glow { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 55%); }

/* ── BACK TO TOP ──────────────────────────────────────── */
#gc-top {
  position: fixed; bottom: 7rem; right: 2rem;
  width: 44px; height: 44px;
  background: var(--gold); color: #000;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(201,168,76,.45);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  z-index: 9997;
}
#gc-top.visible { opacity: 1; transform: translateY(0); }

/* ── STATS BAR ────────────────────────────────────────── */
#stats { padding: 1.7rem 0; background: linear-gradient(160deg, var(--navy), var(--card2)); }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-ic { color: var(--gold); font-size: 1.4rem; margin-bottom: .4rem; }
.stat-num { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 900; color: #fff; line-height: 1; }
.stat-lbl { color: rgba(255,255,255,.6); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: .35rem; max-width: 150px; }

/* ── ECOSISTEMA ───────────────────────────────────────────
   Diagrama tipo organigrama: cada nodo cuelga una línea punteada
   corta hacia abajo (::after) hacia el logo central. Dibujado con
   CSS (repeating-linear-gradient), sin SVG — así no depende de
   coordenadas fijas que se descuadren en cada breakpoint. Por
   debajo de 992px se oculta el hub: 4 tarjetas simples en su lugar. */
#ecosistema { padding: 6rem 0; background: #f8f9fa; }
#ecosistema .sec-title { color: #111827; }
.eco-diagram { position: relative; }
.eco-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 1.5rem; position: relative; }
.eco-node { flex: 1 1 200px; max-width: 230px; text-align: center; position: relative; }
.eco-ic {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.eco-node h4 { font-size: 1.05rem; font-weight: 900; color: #111827; margin-bottom: .5rem; }
.eco-node p { color: #6b7280; font-size: .85rem; line-height: 1.6; }
.eco-hub {
  position: relative; z-index: 2;
  width: 300px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--gold);
  margin: 4rem auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.eco-hub:hover {
  transform: scale(1.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
}
.eco-hub img { display: block; width: 100%; height: auto; }
@media (max-width: 991px) {
  .eco-hub { display: none; }
}

/* ── FAQ ──────────────────────────────────────────────── */
#faq { padding: 7rem 0; background: #fff; }
#faq .sec-title { color: #111827; }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: .9rem;
  overflow: hidden;
  background: #f8f9fa;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { flex-shrink: 0; color: var(--gold); transition: transform .25s; }
.faq-item[open] summary .ic { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 1.4rem 1.2rem; color: #4b5563; line-height: 1.7; font-size: .95rem; }

/* ── CONTACTO ─────────────────────────────────────────── */
#contacto { padding: 7rem 0; background: #f8f9fa; }
#contacto .sec-title { color: #111827; }
.contact-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; }
.c-icon {
  width: 50px; height: 50px; background: var(--navy); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.15rem; flex-shrink: 0;
}
.c-lbl { color: #6b7280; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.c-val { font-weight: 700; font-size: 1rem; color: #111827; text-decoration: none; }
.c-val:hover { color: var(--gold); }

.form-gc { background: #fff; border: 1px solid rgba(201,168,76,.2); border-radius: 14px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.form-gc input, .form-gc select, .form-gc textarea {
  background: #f8f9fa; border: 1px solid #e5e7eb; color: #111827; border-radius: 8px; padding: .8rem 1rem;
  width: 100%; font-family: inherit; font-size: .93rem; margin-bottom: 1rem; outline: none;
  transition: border-color .25s, box-shadow .25s; appearance: none;
}
/* .form-gc input de arriba aplica appearance:none + fondo + padding
   pensado para campos de texto, pero el selector también atrapaba al
   checkbox de consentimiento, dejándolo como una cajita en blanco que
   nunca mostraba el visto ✓ al marcarlo (aunque sí quedaba "checked" por
   dentro). Se revierte con un selector más específico. */
.form-gc input[type="checkbox"] {
  all: revert;
  width: 18px; height: 18px; margin: 0; flex-shrink: 0; cursor: pointer;
  accent-color: var(--gold);
}
.form-gc input::placeholder, .form-gc textarea::placeholder { color: #9ca3af; }
.form-gc input:focus, .form-gc select:focus, .form-gc textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.13); }
.form-gc select option { background: #fff; color: #111827; }
.form-gc .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .form-gc .row-2 { grid-template-columns: 1fr; } }

/* ── TESTIMONIOS ──────────────────────────────────────── */
#testimonios { padding: 6rem 0; background: #f8f9fa; }
#testimonios .sec-title { color: #111827; }
.testi-carousel { max-width: 640px; margin: 0 auto; }
.testi-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card { flex: 0 0 100%; scroll-snap-align: center; background: #fff; border-radius: 20px; padding: 2.6rem 2.2rem; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
.testi-stars { color: var(--gold); font-size: 1.15rem; letter-spacing: .25rem; margin-bottom: 1.3rem; }
.testi-quote { color: #374151; font-size: 1.05rem; line-height: 1.7; font-style: italic; margin: 0 0 1.6rem; }
.testi-author { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.05rem; flex-shrink: 0; }
.testi-name { font-weight: 800; color: #111827; font-size: .92rem; text-align: left; }
.testi-city { color: #9ca3af; font-size: .8rem; text-align: left; }
.testi-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.8rem; }
.testi-dot { width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.testi-dot.active { background: var(--gold); transform: scale(1.3); }

/* ── SOCIOS ESTRATÉGICOS ──────────────────────────────── */
#socios { padding: 5rem 0; background: #fff; }
#socios .sec-title { color: #111827; }
.socios-intro { color: #6b7280; max-width: 560px; margin: 1.2rem auto 0; line-height: 1.7; font-size: .95rem; }
.socios-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3rem; }
.socios-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  padding: 1.2rem 1.8rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: box-shadow .3s, transform .3s;
}
.socios-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.1); transform: translateY(-3px); }
.socios-card img {
  height: 34px; width: auto; max-width: 140px; object-fit: contain;
  filter: grayscale(1);
  transition: filter .6s ease;
}
/* al llegar (scroll) a la sección, se revela el color automáticamente,
   sin necesidad de pasar el mouse */
.socios-card:hover img, .socios-row.in-view .socios-card img { filter: grayscale(0); }
@media (max-width: 480px) {
  .socios-row { gap: .9rem; }
  .socios-card { padding: .9rem 1.3rem; }
  .socios-card img { height: 26px; }
}

/* ── FOOTER ───────────────────────────────────────────── */
footer { background: #060a14; border-top: 1px solid rgba(201,168,76,.18); padding: 3.5rem 0 1.5rem; }
.footer-brand { font-size: 1.2rem; font-weight: 900; letter-spacing: .06em; color: var(--gold); margin-bottom: .6rem; }
.footer-desc { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.footer-h { color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-link { display: block; color: var(--muted); text-decoration: none; font-size: .88rem; margin-bottom: .55rem; transition: color .25s; }
.footer-link:hover { color: var(--gold); }
.soc-link {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid rgba(201,168,76,.3); border-radius: 50%; color: var(--gold); text-decoration: none;
  margin-right: .4rem; transition: all .25s;
}
.soc-link:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.footer-hr { border-color: rgba(201,168,76,.15); margin: 2rem 0 1rem; }
.footer-copy { color: var(--muted); font-size: .82rem; }

/* ── PANELES DESTACADOS ───────────────────────────────── */

/* ── PROGRESS BAR ─────────────────────────────────────── */
#gc-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold-light), var(--gold)); z-index: 9999; box-shadow: 0 0 8px rgba(201,168,76,.6); }

/* ── CHAT BOT ─────────────────────────────────────────── */
#gc-chat-btn {
  position: fixed; bottom: 2rem; right: 2rem; width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #000;
  cursor: pointer; box-shadow: 0 6px 24px rgba(201,168,76,.5); z-index: 9999; border: none;
  transition: transform .3s, box-shadow .3s;
}
#gc-chat-btn:hover { transform: scale(1.1); box-shadow: 0 10px 32px rgba(201,168,76,.65); }
#gc-chat-btn .gc-notif {
  position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; background: #ef4444;
  border-radius: 50%; border: 2px solid #fff; animation: gc-pulse 1.8s infinite;
}
@keyframes gc-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .7; } }

#gc-chat-box {
  position: fixed; bottom: 6rem; right: 2rem; width: 360px; max-width: calc(100vw - 2rem); max-height: 600px; background: #fff;
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.18); display: flex; flex-direction: column;
  z-index: 9998; overflow: hidden; transform: scale(.85) translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .3s, opacity .3s;
}
#gc-chat-box.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
@media (max-width: 420px) {
  #gc-chat-box { width: calc(100vw - 2rem); right: 1rem; bottom: 5.5rem; }
  #gc-chat-btn { bottom: 1.2rem; right: 1rem; }
}

.gc-topbar { background: #0a0f1e; padding: .6rem .9rem; display: flex; align-items: center; gap: .6rem; }
.gc-mini-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.gc-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gc-topbar .gc-header-status { flex: 1; }
.gc-close { background: none; border: none; color: #9ca3af; font-size: 1.1rem; cursor: pointer; padding: .2rem; line-height: 1; transition: color .2s; }
.gc-close:hover { color: #fff; }

/* ── Saludo grande (imagen de Fer + texto) ────────────── */
.gc-welcome {
  background: linear-gradient(135deg, #0a0f1e 0%, #1a2234 100%);
  padding: .3rem 1.2rem 1rem;
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 2px solid var(--gold);
}
.gc-welcome-img { width: 92px; height: 92px; border-radius: 16px; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.gc-welcome-img img { width: 100%; height: 100%; object-fit: cover; }
.gc-welcome-text h3 { color: #fff; font-weight: 800; font-size: 1.05rem; margin: 0; }
.gc-header-sub { color: rgba(255,255,255,.55); font-size: .78rem; margin: .2rem 0 0; }
.gc-header-status { color: var(--gold); font-size: .72rem; display: flex; align-items: center; gap: .35rem; }
.gc-status-dot { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; }
.gc-welcome-msg {
  background: linear-gradient(135deg, #0a0f1e 0%, #1a2234 100%);
  color: rgba(255,255,255,.75);
  font-size: .82rem; line-height: 1.55;
  margin: 0; padding: 0 1.2rem 1.1rem;
}

.gc-messages { display: flex; flex-direction: column; gap: .6rem; scroll-behavior: smooth; }
.gc-back-btn {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer;
  color: var(--gold); font-size: .78rem; font-weight: 700;
  padding: 0 0 .8rem; margin: 0;
  align-self: flex-start;
}
.gc-back-btn .ic { font-size: .8rem; transform: rotate(-90deg); }
.gc-back-btn:hover { color: #a07830; }
.gc-messages::-webkit-scrollbar { width: 4px; }
.gc-messages::-webkit-scrollbar-thumb { background: rgba(201,168,76,.3); border-radius: 4px; }

.gc-msg { max-width: 85%; padding: .65rem .9rem; border-radius: 14px; font-size: .875rem; line-height: 1.55; animation: gc-msg-in .25s ease; }
@keyframes gc-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.gc-msg.bot { background: #fff; color: #111827; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; align-self: flex-start; }
.gc-msg.user { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #000; font-weight: 600; border-bottom-right-radius: 4px; align-self: flex-end; }
.gc-options { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; align-self: flex-start; max-width: 100%; }
.gc-opt-btn { background: #fff; border: 1.5px solid var(--gold); color: #111827; font-size: .78rem; font-weight: 700; padding: .35rem .85rem; border-radius: 20px; cursor: pointer; transition: all .2s; white-space: nowrap; }
.gc-opt-btn:hover { background: var(--gold); color: #000; }

.gc-body { background: #f8f9fa; padding: 1rem; display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.gc-notice {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .8rem; padding: .7rem .8rem;
  background: #eef2ff; border-radius: 10px;
  color: #4b5563; font-size: .74rem; line-height: 1.5;
}
.gc-notice .ic { color: #6366f1; font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }

/* ── Grid de accesos rápidos (menú inicial del chat) ──── */
.gc-quick-wrap { align-self: stretch; width: 100%; margin-top: .2rem; }
.gc-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gc-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px;
  padding: .7rem .4rem; cursor: pointer; transition: all .2s;
  font-size: .74rem; font-weight: 700; color: #111827; text-align: center;
}
.gc-quick-btn .ic { font-size: 1.3rem; color: var(--gold); }
.gc-quick-btn:hover { border-color: var(--gold); background: #fffbeb; }
.gc-quick-wide {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; margin-top: .5rem;
  background: var(--navy); border: none; border-radius: 12px;
  padding: .7rem .5rem; cursor: pointer; transition: background .2s;
  font-size: .78rem; font-weight: 700; color: #fff;
}
.gc-quick-wide .ic { color: var(--gold); font-size: 1.1rem; }
.gc-quick-wide:hover { background: var(--card2); }
.gc-typing { display: flex; gap: 4px; align-items: center; padding: .65rem .9rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; border-bottom-left-radius: 4px; align-self: flex-start; width: fit-content; }
.gc-typing span { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; animation: gc-bounce .9s infinite; }
.gc-typing span:nth-child(2) { animation-delay: .15s; }
.gc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes gc-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

.gc-input-area { padding: .75rem 1rem; display: flex; gap: .5rem; background: #fff; border-top: 1px solid #e5e7eb; }
.gc-input { flex: 1; border: 1px solid #e5e7eb; border-radius: 20px; padding: .5rem 1rem; font-size: .88rem; outline: none; font-family: inherit; color: #111827; background: #f8f9fa; transition: border-color .2s; }
.gc-input:focus { border-color: var(--gold); }
.gc-send { width: 38px; height: 38px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); border: none; border-radius: 50%; color: #000; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s; flex-shrink: 0; }
.gc-send:hover { transform: scale(1.1); }

/* ── BLOG ─────────────────────────────────────────────── */
.blog-hero { padding: 9rem 0 4rem; background: var(--navy); }
.blog-hero .sec-title { color: #fff; }
#blog-listado { padding: 4rem 0 7rem; background: #f8f9fa; }
#blog-home { padding: 6rem 0; background: #fff; }
#blog-home .sec-title { color: #111827; }

/* ── NEWSLETTER + CTA PROVEEDORES ─────────────────────── */
#newsletter-proveedores { padding: 0 0 6rem; background: #fff; }
.promo-card {
  height: 100%;
  display: flex; flex-direction: column;
  padding: 2rem 1.7rem;
  border-radius: 20px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
}
.promo-card-dark {
  background: linear-gradient(160deg, var(--navy), var(--card2));
  border: none;
}
.promo-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.1rem; flex-shrink: 0;
}
.promo-card-dark .promo-ic { background: rgba(255,255,255,.1); }
.promo-card h3 { font-size: 1.1rem; font-weight: 900; color: #111827; margin-bottom: .6rem; }
.promo-card-dark h3 { color: #fff; }
.promo-card p { color: #6b7280; font-size: .88rem; line-height: 1.55; margin-bottom: 1.3rem; }
.promo-card-dark p { color: rgba(255,255,255,.65); }
.promo-list { list-style: none; margin: 0 0 1.4rem; padding: 0; flex-grow: 1; }
.promo-list li {
  position: relative; padding-left: 1.3rem;
  color: rgba(255,255,255,.8); font-size: .85rem; font-weight: 600;
  margin-bottom: .6rem;
}
.promo-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 900; font-size: .8rem;
}
.newsletter-form { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: auto; }
.newsletter-form input {
  flex: 1 1 200px;
  padding: .8rem 1.1rem;
  border-radius: 50px;
  border: 1px solid #d1d5db;
  font-size: .9rem;
  font-family: inherit;
}
.newsletter-form input:focus { outline: none; border-color: var(--gold); }
.newsletter-form .btn-gold { border: none; cursor: pointer; flex-shrink: 0; }
.promo-disclaimer { color: #9ca3af; font-size: .78rem; margin: .9rem 0 0; }
.promo-card-dark .btn-gold { display: inline-block; }
.promo-card .btn-gold { margin-top: auto; }
.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  text-decoration: none;
  color: inherit;
  transition: transform .3s, box-shadow .3s;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,.14); }
.blog-card-visual {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(160deg, #0f2044, #1a3a6b);
  flex-shrink: 0;
  overflow: hidden;
}
.blog-card-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 1.6rem 1.6rem 1.8rem; }
.blog-card-tag { font-size: .68rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .6rem; }
.blog-card h3 { font-size: 1.1rem; font-weight: 900; color: #111827; margin: 0 0 .6rem; line-height: 1.3; }
.blog-card p { color: #6b7280; font-size: .88rem; line-height: 1.65; margin: 0 0 1rem; }
.blog-card-meta { font-size: .75rem; color: #9ca3af; }
.blog-empty {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px dashed rgba(201,168,76,.4); border-radius: 16px;
  padding: 3rem 2rem; color: #4b5563;
}

/* ── ARTÍCULO ─────────────────────────────────────────── */
.article-hero { padding: 9rem 0 3rem; background: var(--navy); }
.article-hero .container { max-width: 820px; }
.article-related { background: #f8f9fa; padding: 4rem 0 5rem; }
.article-related h3 { text-align: center; color: #111827; font-weight: 900; font-size: 1.3rem; margin-bottom: 2.2rem; }
.article-breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: 1.2rem; }
.article-breadcrumb a { color: var(--muted); text-decoration: none; }
.article-breadcrumb a:hover { color: var(--gold); }
.article-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 900; color: #fff; line-height: 1.2; margin: 0 0 1rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: .85rem; }
.article-body { padding: 4rem 0 6rem; background: #fff; }
.article-content { max-width: 760px; margin: 0 auto; color: #374151; font-size: 1.05rem; line-height: 1.85; }
.article-content h2 { color: #111827; font-size: 1.5rem; font-weight: 900; margin: 2.2rem 0 1rem; }
.article-content h3 { color: #111827; font-size: 1.2rem; font-weight: 800; margin: 1.8rem 0 .8rem; }
.article-content p { margin: 0 0 1.2rem; }
.article-content ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.article-content li { margin-bottom: .5rem; }
.article-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0; }
.article-cta {
  max-width: 760px; margin: 3rem auto 0; padding: 2rem; border-radius: 16px;
  background: #f8f9fa; border: 1px solid rgba(201,168,76,.25); text-align: center;
}
.article-notice {
  max-width: 760px; margin: 0 auto 2rem; padding: 1rem 1.4rem; border-radius: 10px;
  background: #fef3c7; border: 1px solid #f5d78e; color: #92400e; font-size: .88rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}