/* =============================================================
   IA-ESTRATÉGICA™ — styles.css
   Archetype: Vidrio y aurora — glassmorphism oscuro con glow
   Acento: verde esmeralda de marca (logo/favicon), sin cambios de hue
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------- */
:root{
  --bg:        #0A0912;   /* casi negro, tinte violeta — base del sistema de vidrio */
  --bg-2:      #14121F;   /* paneles */
  --bg-3:      #1C1A2B;   /* paneles elevados / hover */
  --cream:     #F1F0F7;   /* texto sobre oscuro */
  --cream-2:   #C7C5D6;
  --cream-3:   #86839C;   /* metadata */
  --emerald:       #23A06A;
  --emerald-bright:#3CC98A;
  --emerald-deep:  #0E6B4C;
  --sage:      #8FA38F;
  --line:      rgba(241,240,247,.12);
  --line-strong: rgba(241,240,247,.22);

  /* Superficie de vidrio — blur + relleno/borde translúcidos, la firma
     visual del sistema. Se aplica a tarjetas, header, formularios.
     Valores de opacidad/blur según especificación de glassmorphism
     (backdrop-filter 10-20px, relleno blanco 15-30%, borde 1px ~20%). */
  --glass-fill:   rgba(255,255,255,.09);
  --glass-fill-hover: rgba(255,255,255,.13);
  --glass-border: rgba(255,255,255,.18);
  --glass-blur: blur(18px);
  --glow-shadow: 0 8px 32px -8px rgba(35,160,106,.5), 0 2px 8px rgba(0,0,0,.35);

  --serif: 'Fraunces', 'Georgia', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Antes era un número fijo (1200px) — en monitores anchos (27" en
     adelante) eso dejaba hasta ~26% de la pantalla vacía a cada lado.
     Ahora escala con el viewport, con un techo para que el texto no se
     estire de forma ilegible en 4K/ultrawide. */
  --container: min(1600px, 92vw);
  --pad: clamp(22px, 5vw, 64px);
  --section-pad: clamp(64px, 10vw, 140px);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-lift: 0 26px 60px -18px rgba(0,0,0,.55), 0 10px 24px -10px rgba(35,160,106,.18);
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; margin: 0; }
html{ -webkit-text-size-adjust:100%; tab-size:2; scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
/* Pie de página "sticky" — en páginas cortas (servicios, contacto…) el
   footer se pega al fondo de la ventana en vez de dejar un bloque de
   fondo vacío después de él cuando el contenido no llena la pantalla.
   Se excluye panel-interno (body.panel-body), que tiene su propio layout. */
body:not(.panel-body){
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }
.site-footer{ flex-shrink: 0; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap: pretty; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight:500; text-wrap:balance; line-height:1.05; letter-spacing:-0.01em; margin-bottom:.5em; }
ul{ list-style:none; padding:0; }
::selection{ background: var(--emerald); color: var(--bg); }
:focus-visible{ outline: 2px solid var(--emerald-bright); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* Grano de película sutil — textura premium sobre todo el sitio */
body::after{
  content:"";
  position: fixed; inset:0; z-index:3000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Insinuación muy leve detrás de encabezados de sección — apenas se nota,
   no es el glow difuminado grande que usan las plantillas genéricas. */
.section-halo{ position:relative; }
.section-halo::before{
  /* Alto fijo, no un inset en % — la sección del pre-análisis mide varios
     miles de píxeles (todo el formulario), así que un -70% de "bottom"
     estiraba este brillo decorativo mucho más abajo del pie de página real,
     dejando un vacío enorme y desplazable después del footer sin que se
     viera nada ahí (el brillo ya se difumina a transparente mucho antes). */
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-10%; left:-10%; right:-10%; height: 420px;
  background: radial-gradient(30% 24% at 18% 12%, rgba(35,160,106,.07), transparent 72%);
  filter: blur(70px);
}

/* -------------------------------------------------------------
   3. Utilities
   ------------------------------------------------------------- */
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.7rem 1.1rem; background:var(--cream); color:var(--bg);
  border-radius:4px; font-weight:600; font-size:14px;
  transition: top .3s var(--ease-out);
}
.skip-link:focus{ top:1rem; }
/* width:100% es necesario para el .hero (display:flex) — un hijo de flex
   con ancho "auto" se encoge a su contenido en vez de estirarse hasta su
   propio max-width, dejando la mitad del espacio disponible sin usar.
   En flujo normal (no flex) este 100% no cambia nada, ya se comportaba así. */
.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 var(--pad); }
section{ padding: var(--section-pad) 0; position:relative; }
/* Dos secciones seguidas suman su padding completo (hasta 280px de vacío
   entre ellas sin ningún quiebre visual que lo justifique) — se recorta el
   de arriba cuando una sección viene inmediatamente después de otra, a un
   valor fijo y modesto en vez de proporcional al --section-pad completo. */
section + section{ padding-top: clamp(32px, 4vw, 56px); }

/* Offset para anclas de sección (ej. #formulario) — el header es fixed,
   así que sin esto el salto deja el contenido tapado detrás de él. */
#formulario{ scroll-margin-top: 100px; }

/* -------------------------------------------------------------
   4. Typography components
   ------------------------------------------------------------- */
/* Kicker editorial — texto y una regla corta, sin caja ni pastilla.
   Es la etiqueta de una revista, no el badge de una landing de SaaS. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--emerald);
  margin-bottom: 22px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:currentColor; display:inline-block; flex-shrink:0;
}
.lede{ font-size: clamp(17px,1.5vw,20px); color: var(--cream-2); max-width:600px; }
.section-head{ max-width:760px; margin-bottom: clamp(40px,6vw,72px); }
.section-head h2{ font-size: clamp(28px,3.8vw,46px); }

/* -------------------------------------------------------------
   5. Components
   ------------------------------------------------------------- */

/* Buttons — pill, con glow esmeralda en el primario */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:999px;
  font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
  white-space:nowrap;
}
.btn-primary{ background: linear-gradient(135deg, var(--emerald-bright), var(--emerald)); color: #05170F; box-shadow: var(--glow-shadow); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 40px -6px rgba(60,201,138,.6), 0 2px 8px rgba(0,0,0,.35); }
.btn-ghost{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border); color: var(--cream);
}
.btn-ghost:hover{ border-color: var(--emerald-bright); color: var(--emerald-bright); background: var(--glass-fill-hover); transform: translateY(-2px); }
.btn svg{ width:14px; height:14px; transition: transform .35s var(--ease-out); }
.btn:hover svg{ transform: translateX(4px); }

/* Magnetic wrapper (JS adds .has-magnetic + .magnetic-inner) */
.has-magnetic{ display:inline-flex; position:relative; isolation:isolate; }
.magnetic-inner{ display:inline-flex; align-items:center; gap:inherit; will-change:transform; transition: transform .8s var(--ease-soft); }

/* -------------------------------------------------------------
   6. Header
   ------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding: 22px 0;
  transition: background .4s var(--ease-out), padding .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(10,9,18,.62);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 14px 0; border-bottom-color: var(--glass-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ font-family:var(--serif); font-size:19px; font-weight:600; display:flex; align-items:center; gap:10px; letter-spacing:-0.01em; }
.logo .mark{ width:26px; height:26px; flex-shrink:0; }
.logo sup{ font-size:10px; font-weight:500; opacity:.7; }
.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav ul{ display:flex; gap:32px; }
.nav-link{ font-size:13.5px; font-weight:500; letter-spacing:.02em; position:relative; padding:4px 0; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--emerald-bright); transition: right .3s var(--ease-out); }
.nav-link:hover::after, .nav-link.active::after{ right:0; }
.nav-link.active{ color: var(--emerald-bright); }
.header-cta .btn{ padding:11px 22px; font-size:13px; }
.menu-toggle{ display:flex; flex-direction:column; gap:5px; padding:6px; }
.menu-toggle span{ width:22px; height:1.5px; background:currentColor; transition: all .3s var(--ease-out); }

@media (min-width: 960px){
  .menu-toggle{ display:none; }
}
@media (max-width: 959px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
    background: var(--bg-2);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding: 40px var(--pad); gap:40px;
    transform: translateX(100%); transition: transform .5s var(--ease-out); z-index:999;
    border-left: 1px solid var(--line);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap:22px; }
  .nav-link{ font-size:22px; font-family:var(--serif); }
  .header-cta{ display:none; }
  .main-nav .header-cta{ display:flex; }
}

/* -------------------------------------------------------------
   7. Hero — sin tarjeta, sin diagrama: el texto directo sobre el
   glow, simple y bien anclado a la izquierda.
   ------------------------------------------------------------- */
.hero{
  min-height: 92svh;
  display:flex; align-items:center;
  padding: clamp(140px,10vw,168px) 0 72px;
  position: relative; overflow: clip; isolation: isolate;
}
/* Glow radiando desde la esquina superior — la firma del sistema. */
.hero::before{
  content:""; position:absolute; z-index:-2;
  inset: -20% -10% auto auto; width:65%; height:85%;
  background: radial-gradient(circle at 100% 0%, rgba(35,160,106,.32), transparent 65%);
  filter: blur(90px);
}

/* Fondo ambiental por código — red de partículas que respira detrás del
   texto, muy tenue (no un "mesh" vistoso: eso ya se probó y se quitó antes
   por distractor). Solo textura, sin nodos etiquetados ni figuras. */
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  opacity:.85;
  pointer-events:none;
}
@media (max-width: 767px){ .hero-bg{ display:none; } }

/* Vela que protege la legibilidad del texto — antes usaba porcentajes del
   ancho total del hero, que con el contenedor fluido (hasta 1600px) dejaba
   una franja muerta enorme antes de que la animación se viera. Ahora son
   anchos fijos, atados al ancho real de la columna de texto (680px), así
   que la animación aprovecha todo el resto del espacio sin importar qué
   tan ancha sea la pantalla. */
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, var(--bg) 0px, rgba(10,9,18,.72) 560px, transparent 860px);
  pointer-events:none;
}
@media (max-width: 767px){ .hero-scrim{ display:none; } }

.hero-inner{ max-width:680px; }
/* En las páginas internas, "hero-inner" se combina con "container" en el mismo
   div (no anidado como en el home) — si se le aplica el max-width de 680px ahí,
   hereda el margin:auto de .container y queda una columna angosta centrada con
   mucho espacio a los lados. Se anula para que ocupe el ancho normal del
   container y el texto quede anclado a la izquierda, igual que el home. */
.container.hero-inner{ max-width: var(--container); }
/* Texto con gradiente sutil (blanco → 75% blanco) — detalle de precisión típico
   de dashboards/producto de IA premium, según guía de tipografía del skill
   ui-ux-pro-max ("Modern Dark Cinema"). */
.hero h1{
  font-size: clamp(38px, 6vw, 72px); margin-bottom:.35em; letter-spacing:-0.025em;
  background: linear-gradient(180deg, var(--cream), rgba(241,240,247,.72));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 em{ font-style: italic; color: var(--emerald-bright); }
.hero .lede{ max-width:560px; margin-bottom: 2.2em; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 3em; }
.hero-signature{
  display:flex; align-items:center; gap:16px;
  padding-top:26px; border-top:1px solid var(--glass-border);
  max-width: 600px; font-size:14.5px; color: var(--cream-3);
}
.hero-signature strong{ color: var(--cream); font-weight:600; }
.hero-avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border: 1px solid var(--glass-border); background: var(--bg-2);
}
.hero-avatar img{ width:100%; height:100%; object-fit:cover; object-position: center 15%; filter: grayscale(35%) contrast(1.08); }

/* -------------------------------------------------------------
   8. Reveal on scroll
   ------------------------------------------------------------- */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }
.reveal[data-delay="4"]{ transition-delay:.4s; }

/* -------------------------------------------------------------
   9. Manifesto
   ------------------------------------------------------------- */
/* Panel de vidrio flotando sobre un glow esmeralda radiando detrás — la cita
   como el momento de mayor peso visual, consistente con el resto del sistema. */
.manifesto{ text-align:center; position:relative; overflow:visible; }
.manifesto::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset: -30% 8% -30% 8%;
  background: radial-gradient(circle at 50% 50%, rgba(35,160,106,.3), transparent 70%);
  filter: blur(90px);
}
.manifesto blockquote{
  font-family:var(--serif); font-size: clamp(23px,3.4vw,40px); line-height:1.35;
  max-width:900px; margin:0 auto; color: var(--cream); position:relative; z-index:1;
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:28px;
  padding: clamp(32px,5vw,64px);
}
.manifesto blockquote em{ color: var(--emerald-bright); font-style:italic; }
.manifesto blockquote::before{
  content:"“"; position:absolute; top:-.1em; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size: clamp(90px,14vw,180px); line-height:1;
  color: var(--emerald-bright); opacity:.2; z-index:0; pointer-events:none;
}

/* -------------------------------------------------------------
   11. Grid cards — tarjetas elevadas, no rejilla de líneas
   ------------------------------------------------------------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; }
@media (max-width: 720px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }
.card{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 40px 34px; border:1px solid var(--glass-border); border-radius:20px;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s var(--ease-out);
}
/* El dinamismo vive en el numeral, no en un glow que sigue el cursor: la
   regla bajo el "01" se estira y se enciende, como si el folio reaccionara. */
.card:hover{ transform: translateY(-8px); border-color: rgba(60,201,138,.45); background: var(--glass-fill-hover); box-shadow: var(--shadow-lift), var(--glow-shadow); }
.card .num{
  font-family:var(--serif); font-size:26px; color:var(--emerald); display:block;
  margin-bottom:18px; padding-bottom:16px; width:42px; border-bottom:1px solid var(--line-strong);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), width .4s var(--ease-out);
}
.card:hover .num{ color: var(--emerald-bright); border-color: var(--emerald-bright); width:64px; }
.card h3{ font-size:20px; margin-bottom:.5em; }
.card p{ color: var(--cream-2); font-size:15px; margin-bottom:0; }

/* -------------------------------------------------------------
   12. Audience chips
   ------------------------------------------------------------- */
/* Índice de términos, no badges de audiencia — palabras separadas por un
   punto medio, como una lista de temas al pie de un artículo. */
.chip-cloud{ display:flex; flex-wrap:wrap; justify-content:center; row-gap:10px; column-gap:0; max-width:760px; margin:0 auto; }
.chip{
  padding:6px 18px; font-size:14.5px; font-weight:500; color:var(--cream-2);
  position:relative; transition: color .3s var(--ease-out);
}
.chip:not(:last-child)::after{
  content:"·"; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  color: var(--line-strong); font-size:16px;
}
.chip:hover{ color: var(--emerald-bright); }
@media (max-width:600px){ .chip{ padding:5px 12px; font-size:13.5px; } }

/* -------------------------------------------------------------
   13. Methodology steps
   ------------------------------------------------------------- */
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns: 84px 1fr; gap:28px; padding:36px 0; border-top:1px solid var(--line); align-items:start; }
.steps .step:last-child{ border-bottom:1px solid var(--line); }
.step .step-num{ font-family:var(--serif); font-size:40px; color:var(--emerald-bright); line-height:1; }
.step h3{ font-size:22px; margin-bottom:.4em; }
.step p{ color: var(--cream-2); max-width:620px; margin-bottom:0; }
@media (max-width: 600px){ .step{ grid-template-columns:1fr; gap:10px; } }

/* -------------------------------------------------------------
   14. Insight cards
   ------------------------------------------------------------- */
.insights-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:26px; }
@media (max-width: 760px){ .insights-grid{ grid-template-columns:1fr; } }
.insight-card{
  border:1px solid var(--glass-border); background: var(--glass-fill); padding:32px; border-radius:20px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s var(--ease-out);
}
.insight-card:hover{ transform: translateY(-8px); border-color: rgba(60,201,138,.45); background: var(--glass-fill-hover); box-shadow: var(--shadow-lift), var(--glow-shadow); }
.insight-card .tag{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald-bright); font-weight:600; margin-bottom:14px; display:block; transition: letter-spacing .4s var(--ease-out); }
.insight-card:hover .tag{ letter-spacing:.16em; }
.insight-card p{ font-family:var(--serif); font-size:18px; line-height:1.5; color: var(--cream); margin-bottom:0; }

/* -------------------------------------------------------------
   15. About split + credentials
   ------------------------------------------------------------- */
.split{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,6vw,90px); align-items:start; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; } }
.about-photo{
  aspect-ratio: 4/5; border-radius:3px; overflow:hidden; position:relative;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}
/* Duotono cálido tono tinta — no un degradado de color de marca encima del
   rostro. El tratamiento vive en el filtro de la imagen, no en una capa. */
.about-photo img{
  width:100%; height:100%; object-fit:cover; object-position: center 12%;
  filter: grayscale(100%) sepia(16%) contrast(1.1) brightness(.92);
}
.about-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, transparent 60%, rgba(18,16,13,.55) 100%);
  pointer-events:none;
}
.about-photo-caption{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px;
  font-size:12px; letter-spacing:.05em; color: var(--cream-3);
}
.credential-list{ margin-top:28px; display:flex; flex-direction:column; gap:0; }
.credential{ padding:16px 0; border-top:1px solid var(--line); font-size:14.5px; color: var(--cream-2); }
.credential:last-child{ border-bottom:1px solid var(--line); }
.credential strong{ color: var(--cream); display:block; font-size:15.5px; margin-bottom:2px; font-family: var(--serif); font-weight:500; }

/* -------------------------------------------------------------
   16. Showcase — carrusel de un solo frente (servicios)
   ------------------------------------------------------------- */
/* La tarjeta que se está leyendo queda siempre al frente, centrada y
   completa — nunca a medio cortar contra un borde. Las demás se apilan
   detrás, giradas en 3D y más pequeñas, como si se dieran vuelta al
   pasarlas con la flecha (ver initShowcaseCarousel en main.js, que calcula
   el transform de cada tarjeta según su distancia a la activa). */
.showcase{ overflow: visible; }
.showcase-viewport{ position:relative; perspective: 1600px; }
.showcase-track{ position:relative; padding: 8px 0 28px; }
.showcase-card{
  position:absolute; top:0; left:50%;
  width: min(420px, 86vw);
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:20px; padding:36px 30px;
  transition: transform .6s var(--ease-out), opacity .5s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background .4s var(--ease-out);
  will-change: transform, opacity;
}
/* Mismo motivo de folio que .card/.step — numeral grande con regla debajo,
   no la etiqueta pequeña y gris que tenía antes esta tarjeta. */
.showcase-card .num{
  font-family:var(--serif); font-size:26px; color:var(--emerald); display:block;
  margin-bottom:18px; padding-bottom:16px; width:42px; border-bottom:1px solid var(--line-strong);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), width .4s var(--ease-out);
}
.showcase-card:hover{ border-color: rgba(60,201,138,.4); background: var(--glass-fill-hover); }
.showcase-card:hover .num{ color: var(--emerald-bright); border-color: var(--emerald-bright); width:64px; }

/* Tarjeta "activa" — la que el visitante está leyendo ahora mismo.
   JS mueve esta clase con las flechas / puntos (ver initShowcaseCarousel). */
.showcase-card.is-active{ border-color: rgba(60,201,138,.5); box-shadow: var(--shadow-lift), var(--glow-shadow); }
.showcase-card.is-active .num{ color: var(--emerald-bright); border-color: var(--emerald-bright); width:64px; }

/* Enlace opcional dentro de una tarjeta, para el servicio que tiene su
   propia página aparte (ej. auditoría). El resto de las tarjetas no lo usan. */
.showcase-more{
  display:inline-block; margin-top:14px; font-size:14px; font-weight:600;
  color: var(--emerald-bright); text-decoration:none;
}
.showcase-more:hover{ text-decoration:underline; }

.showcase-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); color: var(--cream);
  cursor:pointer; z-index:10;
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out), background .3s var(--ease-out), opacity .3s var(--ease-out);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
}
.showcase-arrow svg{ width:19px; height:19px; }
.showcase-arrow--prev{ left:clamp(4px, 2vw, 32px); }
.showcase-arrow--next{ right:clamp(4px, 2vw, 32px); }
.showcase-arrow:hover{ border-color: var(--emerald-bright); color: var(--emerald-bright); background: var(--glass-fill-hover); }
.showcase-arrow:disabled{ opacity:.28; pointer-events:none; }
@media (max-width: 640px){
  .showcase-arrow{ width:42px; height:42px; }
}

.showcase-meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px; }
.showcase-counter{ font-family:var(--serif); font-size:14px; color: var(--cream-3); letter-spacing:.02em; }
.showcase-dots{ display:flex; gap:8px; }
.showcase-dots button{
  width:7px; height:7px; border-radius:50%; background: var(--line-strong); border:none; padding:0; cursor:pointer;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.showcase-dots button.is-active{ background: var(--emerald-bright); transform: scale(1.35); }

/* -------------------------------------------------------------
   17. Stat strip
   ------------------------------------------------------------- */
.stat-strip{ display:flex; flex-wrap:wrap; gap:44px; padding: 32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat .n{ font-family:var(--serif); font-size:30px; color: var(--emerald-bright); display:block; font-variant-numeric: tabular-nums; }
.stat .l{ font-size:12.5px; color: var(--cream-3); letter-spacing:.02em; }

/* -------------------------------------------------------------
   18. CTA band
   ------------------------------------------------------------- */
/* Panel de vidrio con glow radiando desde una esquina — el mismo lenguaje
   del hero, cerrando cada página con la firma visual del sistema. */
.cta-band{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:28px;
  padding: clamp(36px,6vw,76px); overflow:clip;
  display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap;
  position: relative;
}
.cta-band::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset: -20% -10% auto auto; width:55%; height:140%;
  background: radial-gradient(circle at 100% 0%, rgba(35,160,106,.35), transparent 68%);
  filter: blur(70px);
}
.cta-band h2{ color: var(--cream); font-size: clamp(24px,3vw,36px); max-width:560px; margin-bottom:0; }

/* -------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------- */
.site-footer{ background: var(--bg-2); padding: 76px 0 30px; border-top: 1px solid var(--line); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid var(--line); }
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{ max-width:320px; font-size:14px; color: var(--cream-3); }
.footer-brand .footer-tagline{ margin-top:10px; color: var(--cream-2); }
.footer-col h4{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--cream); margin-bottom:18px; font-weight:600; }
.footer-col a, .footer-col span.static-line{ display:block; padding:6px 0; font-size:14.5px; color: var(--cream-2); transition: color .25s; }
.footer-col a:hover{ color: var(--emerald-bright); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; padding-top:26px; font-size:12.5px; color: var(--cream-3); }
.footer-bottom a{ color: var(--cream-3); transition: color .25s; }
.footer-bottom a:hover{ color: var(--emerald-bright); }
.footer-legal-links a{ text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.footer-legal-links a:hover{ text-decoration-color: var(--emerald-bright); }
.footer-legal-links span{ color: var(--cream-3); padding:0 2px; }

/* -------------------------------------------------------------
   20. Páginas legales (términos, privacidad)
   ------------------------------------------------------------- */
.legal-content{ max-width:740px; }
.legal-content .legal-updated{ color: var(--cream-3); font-size:13px; margin-bottom:2.6em; }
.legal-content h2{ font-size: clamp(21px,2.6vw,26px); margin-top:2.2em; margin-bottom:.6em; }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{ color: var(--cream-2); line-height:1.7; margin-bottom:1.1em; }
.legal-content ul{ margin:0 0 1.1em; padding-left:1.25em; color: var(--cream-2); line-height:1.7; }
.legal-content li{ margin-bottom:.5em; }
.legal-content strong{ color: var(--cream); font-weight:600; }
.legal-content a{ color: var(--emerald-bright); text-decoration: underline; }
.legal-content a:hover{ color: var(--emerald); }

/* -------------------------------------------------------------
   20. Contact page
   ------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,80px); align-items:center; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-method{ display:flex; align-items:center; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.contact-method:last-child{ border-bottom:1px solid var(--line); }
.contact-method .icon{ width:40px; height:40px; border:1px solid var(--line-strong); border-radius:2px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-method .icon svg{ width:18px; height:18px; }
.contact-method .label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--cream-3); margin-bottom:2px; display:block; }
.contact-method .value{ font-size:16.5px; font-weight:500; }
.contact-method:hover .value{ color: var(--emerald-bright); }

/* -------------------------------------------------------------
   21. Splash loader — primera impresión de credibilidad, no solo
   el logo cargando (solo en index)
   ------------------------------------------------------------- */
.splash{
  position:fixed; inset:0; z-index:10000; background: var(--bg);
  display:grid; place-content:center; justify-items:center; gap:28px; pointer-events:auto;
  transition: opacity .8s var(--ease-out), clip-path 1s var(--ease-out);
  animation: splashSafety .01s 4.2s forwards; /* red de seguridad si JS falla */
}
.splash-mark{
  width:64px; height:64px; opacity:0; transform:scale(.8);
  animation: splashFade .6s var(--ease-out) .1s forwards, splashPop 1.1s var(--ease-bounce) .1s forwards;
}
.splash-stat{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation: splashFade .6s var(--ease-out) .5s forwards;
}
.splash-stat-num{ font-family:var(--serif); font-size:clamp(38px,6vw,52px); color:var(--emerald-bright); line-height:1; font-variant-numeric:tabular-nums; }
.splash-stat-label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-3); }
.splash.is-out{ opacity:0; pointer-events:none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety{ to{ opacity:0; pointer-events:none; clip-path: inset(0 0 100% 0); } }
@keyframes splashFade{ to{ opacity:1; } }
@keyframes splashPop{ to{ transform:scale(1); } }
.no-splash .splash{ display:none; }

/* -------------------------------------------------------------
   22. Cursor personalizado (desktop, hover fino)
   ------------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  display:none; mix-blend-mode:difference; opacity:0;
  transition: opacity .25s var(--ease-out);
}
.cursor.is-ready{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } }
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; will-change:transform; }
.cursor-dot{ width:4px; height:4px; margin:-2px; background: var(--cream); border-radius:50%; }
.cursor-ring{
  width:18px; height:18px; margin:-9px; border:1px solid var(--cream); border-radius:50%;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out);
}
.cursor.is-interactive .cursor-ring{ width:22px; height:22px; margin:-11px; }
.has-cursor, .has-cursor a, .has-cursor button{ cursor:none; }

/* -------------------------------------------------------------
   23. Página Análisis IA — métricas del kit de auditoría
   ------------------------------------------------------------- */
.score-pair{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; margin-bottom:56px; }
@media (max-width: 720px){ .score-pair{ grid-template-columns:1fr; } }
.score-card{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:20px; padding: 36px 32px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.score-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift), var(--glow-shadow); border-color: rgba(60,201,138,.4); background: var(--glass-fill-hover); }
.score-card .score-label{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--cream-3); margin-bottom:12px; display:block; }
.score-card .score-value{ font-family:var(--serif); font-size:52px; color: var(--emerald-bright); line-height:1; margin-bottom:10px; }
.score-card .score-value small{ font-size:20px; color: var(--cream-3); font-family:var(--sans); }
.score-card p{ color: var(--cream-2); font-size:14.5px; margin-bottom:0; }

.dim-table{ width:100%; border-collapse:collapse; }
.dim-table th, .dim-table td{ text-align:left; padding:14px 12px; border-top:1px solid var(--line); font-size:14.5px; }
.dim-table th{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--cream-3); font-weight:600; }
.dim-table td:last-child, .dim-table th:last-child{ text-align:right; }
.dim-table tbody tr:last-child td{ border-bottom:1px solid var(--line); }

.cross-example{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:20px; padding: 30px 28px;
  display:grid; grid-template-columns: 1fr 1fr; gap:24px;
}
@media (max-width: 700px){ .cross-example{ grid-template-columns:1fr; } }
.cross-example .side .k{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--emerald-bright); font-weight:600; margin-bottom:8px; display:block; }
.cross-example .side p{ font-family:var(--serif); font-style:italic; color: var(--cream); font-size:16px; margin-bottom:0; }

/* -------------------------------------------------------------
   24. Pre-análisis — quiz de 6 preguntas (cliente, sin backend)
   ------------------------------------------------------------- */
.quiz{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:24px;
  padding: clamp(28px,4vw,52px); box-shadow: var(--shadow-lift);
}
.quiz-progress{ display:flex; gap:6px; margin-bottom:36px; }
.quiz-progress span{ height:3px; flex:1; background: var(--line-strong); border-radius:2px; }
.quiz-q{ margin-bottom:34px; }
.quiz-q:last-of-type{ margin-bottom:0; }
.quiz-q .q-label{ display:block; font-family:var(--serif); font-size:19px; color:var(--cream); margin-bottom:16px; }
.quiz-options{ display:grid; gap:10px; }
.quiz-option{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:1px solid var(--glass-border); border-radius:14px;
  background: var(--glass-fill);
  cursor:pointer; transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
  font-size:14.5px; color: var(--cream-2);
}
.quiz-option:hover{ border-color: rgba(60,201,138,.4); }
.quiz-option input{ accent-color: var(--emerald-bright); width:16px; height:16px; flex-shrink:0; }
.quiz-option:has(input:checked){ border-color: var(--emerald-bright); background: rgba(60,201,138,.06); color: var(--cream); }
.quiz-actions{ margin-top:36px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.quiz-hint{ font-size:13px; color: var(--cream-3); }

.quiz-loading{ display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color: var(--cream-2); }
.quiz-loading-dot{ width:8px; height:8px; border-radius:50%; background: var(--emerald-bright); flex-shrink:0; animation: quiz-loading-pulse 1.1s ease-in-out infinite; }
@keyframes quiz-loading-pulse{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1); } }

.quiz-result{ display:none; margin-top: 40px; padding-top:40px; border-top:1px solid var(--line); }
.quiz-result.is-visible{ display:block; }
.quiz-result .band-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border:1px solid rgba(60,201,138,.35); background: rgba(60,201,138,.08);
  border-radius:100px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--emerald-bright); margin-bottom:18px;
}
.quiz-result h3{ font-size: clamp(22px,3vw,30px); margin-bottom:.5em; }
.quiz-result .insight-list{ display:flex; flex-direction:column; gap:12px; margin: 20px 0 28px; }
.quiz-result .insight-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color: var(--cream-2); }
.quiz-result .insight-list li::before{ content:"—"; color: var(--emerald-bright); flex-shrink:0; }
.quiz-result .fine-print{ font-size:12.5px; color: var(--cream-3); margin-top: 22px; }
.quiz-result .result-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }

.quiz-field{ margin-bottom:22px; }
.quiz-field label{ display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--cream-3); margin-bottom:8px; }
.quiz-field input[type="text"], .quiz-field input[type="email"], .quiz-field input[type="tel"], .quiz-field textarea, .quiz-field select{
  width:100%; background: var(--glass-fill); border:1px solid var(--glass-border); border-radius:14px;
  padding:13px 16px; font-family:var(--sans); font-size:15px; color: var(--cream);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.quiz-field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7C5D6' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position: right 16px center; background-size:16px;
  padding-right:44px;
}
.quiz-field select:invalid{ color: var(--cream-3); }
.quiz-field textarea{ resize:vertical; min-height:120px; }
.quiz-field input:focus, .quiz-field textarea:focus, .quiz-field select:focus{ outline:none; border-color: var(--emerald-bright); }
.quiz-fields-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.quiz-fields-row .quiz-field.full{ grid-column: 1 / -1; }
@media (max-width:600px){ .quiz-fields-row{ grid-template-columns:1fr; } }

/* Formulario de contacto */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-error{ color:#e8846a; font-size:13.5px; margin:-6px 0 18px; }
.form-error a{ color:inherit; text-decoration:underline; }
.form-success{ padding:28px 0; }

.recommend-services{ margin: 24px 0 28px; display:grid; gap:14px; }
.recommend-service{
  display:block; padding:18px 20px; border:1px solid var(--glass-border); border-radius:14px;
  background: var(--glass-fill);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), background .3s var(--ease-out);
}
.recommend-service:hover{ border-color: var(--emerald-bright); background: var(--glass-fill-hover); transform: translateX(4px); }
.recommend-service .rs-title{ font-family:var(--serif); font-size:16.5px; color: var(--cream); display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.recommend-service .rs-title svg{ width:14px; height:14px; color: var(--emerald-bright); flex-shrink:0; }
.recommend-service .rs-desc{ font-size:13.5px; color: var(--cream-3); display:block; margin-bottom:6px; }
.recommend-service .rs-reason{ font-size:12px; color: var(--sage); font-style:italic; display:block; }

/* -------------------------------------------------------------
   24b. Resultado del pre-análisis — cabecera, diagnóstico, horas, cierre
   ------------------------------------------------------------- */
.report-exec-summary{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-left:3px solid var(--emerald-bright);
  border-radius:16px; padding:22px 26px; margin: 0 0 26px;
}
.report-exec-label{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--emerald-bright); margin-bottom:10px; font-weight:600; }
.report-exec-summary p{ font-size:15.5px; line-height:1.7; color: var(--cream-2); margin:0; }

.score-chart{ margin: 4px 0 30px; }
.chart-bar-row{ margin-bottom:14px; }
.chart-bar-row:last-child{ margin-bottom:0; }
.chart-bar-head{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color: var(--cream-3); margin-bottom:6px; }
.chart-bar-head strong{ color: var(--cream-2); font-weight:500; }
.chart-bar-track{ height:8px; background: var(--bg-2); border:1px solid var(--line-strong); border-radius:100px; overflow:hidden; }
.chart-bar-fill{ height:100%; background: var(--emerald-bright); border-radius:100px; }

.quiz-result .result-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.score-preview{ text-align:right; }
.score-preview span[data-score]{ font-family:var(--serif); font-size:34px; color: var(--emerald-bright); line-height:1; }
.score-preview .score-max{ font-size:16px; color: var(--cream-3); font-family:var(--sans); margin-left:2px; }
.score-preview .score-caption{ display:block; font-size:11.5px; color: var(--cream-3); max-width:220px; margin-top:4px; }
@media (max-width:600px){ .quiz-result .result-head{ flex-direction:column; } .score-preview{ text-align:left; } }

.diagnosis-note{
  font-family:var(--serif); font-style:italic; font-size:16.5px; color: var(--cream);
  border-left:2px solid var(--emerald-bright); padding-left:16px; margin: 4px 0 28px;
}

.hours-box{
  background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:16px;
  padding:24px 26px; margin: 8px 0 30px;
}
.hours-box .hours-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--cream-3); display:block; margin-bottom:10px; }
.hours-box .hours-figure{ font-family:var(--serif); font-size:30px; color: var(--emerald-bright); line-height:1; margin-bottom:6px; }
.hours-box .hours-op{ font-size:12.5px; color: var(--cream-3); margin-bottom:12px; }
.hours-box .hours-note{ font-size:13px; color: var(--cream-2); margin-bottom:0; }

.closing-note{
  font-size:15px; color: var(--cream-2); line-height:1.7;
  background: rgba(60,201,138,.08); border:1px solid rgba(60,201,138,.25); border-radius:16px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding:20px 22px; margin: 4px 0 26px;
}

/* -------------------------------------------------------------
   26. Impresión / PDF de respaldo (window.print)
   ------------------------------------------------------------- */
@media print{
  .site-header, .menu-toggle, .cursor, .footer-top, .footer-bottom,
  .hero canvas, .hero::before, .quiz-actions, .quiz-progress, .no-print,
  .quiz-fields-row, form#pre-analisis-form > .quiz-q, .site-footer{ display:none !important; }
  body{ background:#fff; color:#111; }
  .quiz-result{ display:block !important; border:none; padding:0; }
  .quiz-result .band-badge{ border-color:#0E6B4C; color:#0E6B4C; background:none; }
  .quiz-result h3, .band-badge{ color:#0E6B4C !important; }
  .diagnosis-note{ border-color:#0E6B4C; color:#111; }
  .score-preview span[data-score]{ color:#0E6B4C; }
  .hours-box, .closing-note{ background:none; border-color:#ccc; }
  .hours-box .hours-figure{ color:#0E6B4C; }
  .recommend-service{ border-color:#ccc; }
  .recommend-service .rs-title, .recommend-service .rs-title svg{ color:#0E6B4C; }
  a{ color:#0E6B4C; }
  .report-exec-summary{ background:none; border-color:#ccc; border-left-color:#0E6B4C; }
  .report-exec-label{ color:#0E6B4C; }
  .report-exec-summary p{ color:#111; }
  .chart-bar-fill{ background:#0E6B4C; }
  .chart-bar-track{ border-color:#ccc; }
  .chart-bar-head strong{ color:#111; }
}

/* -------------------------------------------------------------
   25. Responsive base
   ------------------------------------------------------------- */
@media (max-width: 539px){
  :root{ --section-pad: 60px; }
}