/* ============================================
   GROWTHMARK — Carta de venta (secciones extra)
   Reusa variables/patrones de styles.css.
   Hero rediseñado según el flyer azul de marca.
   ============================================ */

:root {
  --h-blue:   #015df4;   /* azul del flyer (texto VENDER MÁS)  */
  --h-blue-2: #0a3fb0;   /* azul profundo intermedio          */
  --h-cobalt: #002fa4;   /* esfera / relleno profundo (flyer) */
  --h-ice:    #5aa2ff;   /* tono claro para el shimmer/movim. */
  --h-deep:   #030512;   /* fondo casi negro del flyer        */

  /* Tipografía de títulos: grotesca neutra premium (Space Grotesk), on-brand. */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
}

/* ============================================
   CURSOR normal (se quita el cursor personalizado)
   ============================================ */
html, body { overflow-x: clip; max-width: 100%; }
body { cursor: auto; }
/* El aurora original (blobs violeta/verde asimétricos) rompía la simetría del hero */
#aurora { display: none; }
a, button, summary, label,
.btn-primary, .btn-outline, .nav-cta, .cta-btn, .btn-submit,
.filter-btn, .slider-btn, .slider-dot, .mobile-cta,
.service-card, .faq-item summary, .hamburger { cursor: pointer; }
#cursor-dot, #cursor-ring { display: none !important; }

/* ============================================
   HEADER — enlaces centrados en el medio
   ============================================ */
#navbar .nav-links {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  gap: 28px;
}
#navbar .nav-cta { margin-left: auto; }
@media (max-width: 1099px) {
  #navbar .nav-links { gap: 18px; }
  #navbar .nav-links a { font-size: 13px; letter-spacing: 0.3px; }
}
/* Por debajo de 767px pasamos al menú móvil */
@media (max-width: 767px) {
  #navbar .nav-links { display: none; }
  #navbar .nav-cta { display: none; }
  #navbar .hamburger { display: flex; }
}

/* ============================================
   HERO — estilo flyer (azul profundo sobre negro)
   ============================================ */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 132px 60px 64px;
  position: relative;
  overflow: hidden;
  background: var(--h-deep);
}

/* --- fondo: spotlight / glow radial desde arriba-centro --- */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-spot {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 88% 82% at 50% -8%, rgba(1,93,244,0.50) 0%, rgba(1,93,244,0.16) 36%, transparent 64%),
    radial-gradient(circle 680px at 50% 0%, rgba(120,170,255,0.26), transparent 64%);
  animation: heroSpotMove 24s ease-in-out infinite alternate;
}
@keyframes heroSpotMove {
  0%   { opacity: 0.82; transform: translate(-20%, -8%) scale(1.03); }
  50%  { opacity: 1;    transform: translate(20%, 11%) scale(1.22); }
  100% { opacity: 0.9;  transform: translate(-9%, 5%) scale(1.10); }
}
/* viñeta inferior para fundir a negro, como en la plantilla */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 130% 82% at 50% 138%, rgba(0,0,0,0.6), transparent 55%);
}
@keyframes heroSpotPulse { from { opacity: 0.82; } to { opacity: 1; } }

/* grid de puntos que se desvanece hacia los bordes */
.hero-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(90,162,255,0.18) 1.2px, transparent 1.2px);
  background-size: 44px 44px;
  -webkit-mask: radial-gradient(ellipse 78% 68% at 50% 26%, #000 12%, transparent 74%);
          mask: radial-gradient(ellipse 78% 68% at 50% 26%, #000 12%, transparent 74%);
  opacity: 0.6;
}

/* En el hero, las capas de estrellas solo aportan puntos, no el glow violeta/verde */
#hero .stars-field { background: none !important; }
/* capas extra de estrellas (más densidad, posiciones distintas) */
.stars-field--2 { transform: scale(1.35) rotate(24deg); opacity: 0.95; }
.stars-field--3 { transform: scale(1.75) rotate(-18deg); opacity: 0.8; }
.stars-field--4 { transform: scale(2.1) rotate(48deg); opacity: 0.7; }

/* campo denso de estrellas: tileado = cientos de estrellas, brillantes */
.hero-stars { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; }
.hero-stars {
  background-image:
    radial-gradient(1.6px 1.6px at 15px 25px, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 55px 80px, #dbe8ff, transparent),
    radial-gradient(1.2px 1.2px at 100px 40px, #bcd4ff, transparent),
    radial-gradient(1.8px 1.8px at 140px 110px, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 190px 60px, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 30px 150px, #ffffff, transparent),
    radial-gradient(1.3px 1.3px at 170px 170px, #bcd4ff, transparent),
    radial-gradient(1.1px 1.1px at 90px 195px, #dbe8ff, transparent);
  background-size: 380px 380px;
  opacity: 0.85;
  animation: starTwinkle 4s ease-in-out infinite alternate;
}
.hero-stars--2 {
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 120px 30px, #cfe0ff, transparent),
    radial-gradient(2px 2px at 80px 130px, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 160px 90px, #bcd4ff, transparent),
    radial-gradient(1.3px 1.3px at 20px 110px, #dbe8ff, transparent),
    radial-gradient(1.1px 1.1px at 140px 165px, #ffffff, transparent);
  background-size: 300px 300px;
  opacity: 0.8;
  animation: starTwinkle 6s ease-in-out infinite alternate-reverse;
}
.hero-stars--3 {
  background-image:
    radial-gradient(2.4px 2.4px at 60px 50px, #ffffff, transparent),
    radial-gradient(1.6px 1.6px at 180px 140px, #cfe0ff, transparent),
    radial-gradient(1.4px 1.4px at 110px 205px, #ffffff, transparent),
    radial-gradient(1.9px 1.9px at 245px 80px, #dbe8ff, transparent);
  background-size: 360px 360px;
  opacity: 0.85;
  animation: starTwinkle 5s ease-in-out infinite alternate;
}
@keyframes starTwinkle { from { opacity: 0.45; } to { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .hero-stars { animation: none !important; } }

/* orbes de luz difusos que flotan lento */
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
/* orbe izquierdo, más pegado a la esquina para dejar negro entre él y el central */
.hero-orb--1 {
  width: 1240px; height: 1240px; bottom: -42%; left: -32%;
  background: radial-gradient(circle, rgba(1,93,244,0.34), transparent 56%);
  animation: orbDrift1 32s ease-in-out infinite alternate;
}
/* orbe derecho, más pegado a la esquina para dejar negro entre él y el central */
.hero-orb--2 {
  width: 1240px; height: 1240px; bottom: -42%; right: -32%;
  background: radial-gradient(circle, rgba(0,47,164,0.30), transparent 56%);
  animation: orbDrift2 32s ease-in-out infinite alternate;
}
@keyframes orbDrift1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(560px,-340px) scale(1.18); } 100% { transform: translate(240px,-480px) scale(1.08); } }
@keyframes orbDrift2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-560px,-340px) scale(1.18); } 100% { transform: translate(-240px,-480px) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .hero-square { animation: none; }
}
/* Contener las decoraciones absolutas de las secciones para que no invadan el hero */
#about, #incluye, #beneficios, #para-quien, #por-que { position: relative; }

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-eyebrow {
  font-family: var(--font);
  font-size: 12px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--h-ice); margin: 0 0 28px;
  opacity: 0; transform: translateY(20px);
  animation: revealUp 0.7s var(--ease) 0.2s forwards;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 28px;
}
/* Línea 1 (blanca): entra con fade + slide */
.hero-headline .hl-line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: heroLineUp 0.9s var(--ease) forwards;
}
.hero-headline .hl-1 { animation-delay: 0.35s; }
@keyframes heroLineUp {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* Línea 2 (azul): animación de movimiento del otro sitio (word reveal + shimmer) */
.hl-move { display: block; }
.hl-move .word { display: inline-block; overflow: hidden; margin-right: 0.14em; vertical-align: top; }
.hl-move .word > span {
  display: inline-block;
  transform: translateY(110%);
  background: linear-gradient(90deg,
    var(--h-blue) 0%, var(--h-blue) 38%, var(--h-ice) 50%, var(--h-blue) 62%, var(--h-blue) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hl-move .word:nth-child(1) > span { animation: wordReveal 0.8s var(--ease) 0.5s forwards, heroShimmer 6s ease-in-out 1.8s infinite; }
.hl-move .word:nth-child(2) > span { animation: wordReveal 0.8s var(--ease) 0.62s forwards, heroShimmer 6s ease-in-out 1.8s infinite; }
@keyframes wordReveal {
  from { transform: translateY(110%) skewY(6deg); }
  to   { transform: translateY(0)    skewY(0deg); }
}
@keyframes heroShimmer {
  0%   { background-position: 250% 0; }
  45%  { background-position: -250% 0; }
  100% { background-position: -250% 0; }
}

.hero-rule {
  width: 80px; height: 3px; border: 0;
  background: linear-gradient(90deg, var(--h-blue), var(--h-ice));
  box-shadow: 0 0 14px rgba(1,93,244,0.6);
  margin: 10px auto 28px;
  opacity: 0; transform: scaleX(0); transform-origin: center;
  animation: heroRule 0.7s var(--ease) 0.8s forwards;
}
@keyframes heroRule { to { opacity: 1; transform: scaleX(1); } }

.hero-sub {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  color: var(--text2);
  max-width: 560px;
  line-height: 1.65;
  margin: 0 auto 40px;
  opacity: 0; transform: translateY(20px);
  animation: revealUp 0.7s var(--ease) 0.72s forwards;
}
.hero-sub .hl-blue { color: var(--h-ice); font-weight: 500; }

.hero-ctas { justify-content: center; }

/* --- columna visual: laptop mejorado con glow del flyer --- */
.hero-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  animation: heroVisualIn 1s var(--ease) 2.7s forwards;
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translateY(-24px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(-52px); filter: blur(0); }
}
.hv-rings, .hv-rings::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(1,93,244,0.16);
  pointer-events: none;
}
.hv-rings {
  width: 560px; height: 560px;
  animation: orbSpin 34s linear infinite;
}
.hv-rings::before {
  inset: 80px;
  border-color: rgba(90,162,255,0.12);
  animation: orbSpin 24s linear infinite reverse;
}
/* halo azul detrás del laptop */
.hv-halo {
  position: absolute; width: 120%; height: 120%;
  background: radial-gradient(ellipse 46% 40% at 55% 55%, rgba(1,93,244,0.30), rgba(0,47,164,0.12) 45%, transparent 70%);
  filter: blur(40px); pointer-events: none;
}

/* laptop en perspectiva 3/4 (como el flyer) */
.laptop {
  position: relative;
  width: min(100%, 500px);
  transform: perspective(1800px) rotateY(-17deg) rotateX(7deg);
  transform-style: preserve-3d;
}
.laptop-lid {
  position: relative;
  aspect-ratio: 16 / 10.2;
  background: linear-gradient(155deg, #0a1730, #060b18 60%);
  border: 1px solid rgba(1,93,244,0.35);
  border-radius: 14px 14px 4px 4px;
  box-shadow:
    inset 0 1px 0 rgba(90,162,255,0.25),
    0 0 0 1px rgba(1,93,244,0.12),
    0 26px 70px rgba(0,30,120,0.5),
    0 0 120px rgba(1,93,244,0.22);
  overflow: hidden;
  transform-origin: bottom center;
  transform: rotateX(-3deg);
}
.scr-top {
  height: 38px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: #0a1428;
  border-bottom: 1px solid rgba(1,93,244,0.18);
}
.scr-dots { display: inline-flex; gap: 7px; }
.scr-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(1,93,244,0.55); }
.scr-url {
  font-family: var(--font-mono, monospace);
  font-size: 11px; color: var(--text2);
  background: rgba(0,0,0,0.35); padding: 4px 16px; border-radius: 20px; margin: 0 auto;
}
.scr-ui { position: relative; height: calc(100% - 38px); overflow: hidden; background: linear-gradient(160deg, #0a1526, #070d1a); }
/* onda azul fluida a la derecha */
.scr-wave {
  position: absolute; right: -8%; top: -12%; width: 66%; height: 130%;
  background:
    radial-gradient(58% 40% at 70% 38%, rgba(1,93,244,0.55), transparent 62%),
    radial-gradient(52% 60% at 86% 72%, rgba(0,47,164,0.5), transparent 66%),
    conic-gradient(from 120deg at 62% 50%, rgba(1,93,244,0), rgba(90,162,255,0.4), rgba(1,93,244,0) 62%);
  filter: blur(2px);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 42% 58%);
}
.scr-wave::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-radial-gradient(130% 80% at 92% 60%, transparent 0 13px, rgba(120,180,255,0.16) 13px 15px, transparent 15px 30px);
  mix-blend-mode: screen;
}
.scr-sphere {
  position: absolute; right: 13%; top: 15%;
  width: 32%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 36% 30%, #cfe1ff, #2f7bff 46%, #012a86 100%);
  box-shadow: 0 0 54px rgba(1,93,244,0.7), inset -6px -8px 26px rgba(0,0,0,0.5);
}
.scr-pad { position: relative; z-index: 2; padding: 20px 22px 22px; display: grid; gap: 14px; align-content: start; height: 100%; }
.scr-row-top { display: flex; align-items: center; justify-content: space-between; }
.scr-logo svg { width: 26px; height: 26px; }
.scr-dashes { display: inline-flex; gap: 8px; }
.scr-dashes i { width: 16px; height: 3px; border-radius: 2px; background: rgba(232,237,245,0.55); }
.scr-txt { display: grid; gap: 9px; max-width: 52%; margin-top: 6px; }
.scr-txt .tw { height: 11px; border-radius: 5px; background: #e8edf5; }
.scr-txt .tw.w2 { width: 68%; }
.scr-txt .tg { height: 8px; width: 82%; border-radius: 4px; background: rgba(232,237,245,0.4); }
.scr-cta { width: 34%; height: 22px; border-radius: 20px; background: var(--h-blue); box-shadow: 0 0 18px rgba(1,93,244,0.7); }
.scr-cards { margin-top: auto; display: flex; align-items: center; gap: 16px; max-width: 60%; }
.scr-pie {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--h-blue) 0 62%, rgba(90,162,255,0.35) 62% 100%);
  box-shadow: 0 0 16px rgba(1,93,244,0.4);
}
.scr-blines { display: grid; gap: 8px; flex: 1; }
.scr-blines span { height: 8px; border-radius: 4px; background: rgba(232,237,245,0.4); }
.scr-blines span:nth-child(2) { width: 80%; }
.scr-blines span:nth-child(3) { width: 60%; }
/* base / teclado del laptop, acostado en perspectiva */
.laptop-deck {
  position: absolute;
  top: 100%; left: -7%;
  width: 114%; height: 300px;
  transform-origin: top center;
  transform: rotateX(75deg);
  background:
    linear-gradient(180deg, #0e1a30 0%, #0a1120 40%, #070c18 100%);
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 2px 0 rgba(90,162,255,0.22), 0 0 60px rgba(1,93,244,0.15);
}
/* teclas (grilla simulada con gradientes) + hendidura */
.laptop-deck::before {
  content: '';
  position: absolute; inset: 12% 10% 34%;
  background-image:
    repeating-linear-gradient(90deg, rgba(90,162,255,0.14) 0 2.4%, transparent 2.4% 5.1%),
    repeating-linear-gradient(0deg, rgba(90,162,255,0.12) 0 15%, transparent 15% 21%);
  border-radius: 6px;
  opacity: 0.7;
}
/* trackpad */
.laptop-deck::after {
  content: '';
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  width: 26%; height: 20%;
  border: 1px solid rgba(90,162,255,0.22);
  border-radius: 8px;
  background: rgba(1,93,244,0.05);
}
/* borde frontal / bisagra del laptop */
.laptop-hinge {
  position: absolute; top: 100%; left: -3%;
  width: 106%; height: 10px;
  background: linear-gradient(180deg, #12203a, #060b16);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 40px rgba(0,30,120,0.5);
  z-index: 2;
}
.laptop-hinge::after {
  content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 14%; height: 3px; border-radius: 0 0 4px 4px; background: rgba(1,93,244,0.25);
}
/* reflejo debajo */
.hv-reflection {
  position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%);
  width: 66%; height: 90px;
  background: radial-gradient(ellipse 50% 50% at 50% 0, rgba(1,93,244,0.4), transparent 70%);
  filter: blur(26px); pointer-events: none;
}

/* ============================================
   GRID DE 3 COLUMNAS (reusa .service-card)
   ============================================ */
.services-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
}
/* Para "qué incluye": el service-icon vira a verde en hover igual que en
   "lo que hacemos mejor" (heredado). El check arranca en verde. */
#incluye .service-icon, #beneficios .benefit-icon { color: var(--accent2); }

/* Número grande para beneficios, dentro del patrón service-card */
.service-card .big-num {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 800; letter-spacing: -1px;
  color: var(--accent1); display: block; margin-bottom: 18px; line-height: 1;
  transition: color 0.4s var(--ease);
}
.service-card:hover .big-num { color: var(--accent2); }

/* ============================================
   NOSOTROS / ABOUT (ajustes)
   ============================================ */
#about .section-title { font-size: clamp(26px, 3vw, 46px); }
#about .about-right { overflow: visible; min-height: auto; }
#about .about-right::before { display: none; }

.about-cta {
  position: relative;
  display: grid; place-items: center;
  width: min(400px, 92%); aspect-ratio: 1; border-radius: 50%;
  margin: 0 auto;
  text-decoration: none;
  background: radial-gradient(circle at 50% 38%, rgba(123,47,255,0.14), var(--bg2) 70%);
  box-shadow: inset 0 0 40px rgba(123,47,255,0.1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.about-cta-ring {
  position: absolute; inset: 0; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, var(--accent1), var(--accent2), var(--accent1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: orbSpin 7s linear infinite;
}
.about-cta:hover { transform: scale(1.05); box-shadow: 0 0 50px rgba(123,47,255,0.35); }
.about-cta:hover .about-cta-ring { animation-duration: 2.5s; }
.about-cta:active { transform: scale(0.99); }
.about-cta-inner { text-align: center; width: 100%; padding: 0 6%; }
.about-cta-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(18px, 2vw, 26px); line-height: 1;
  letter-spacing: 0.5px; color: var(--text); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .about-cta-ring { animation: none; } }

/* ============================================
   POR QUÉ (problema → solución)
   ============================================ */
#por-que { background: var(--bg); position: relative; overflow: hidden; }
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  max-width: 1100px; margin: 0 auto; align-items: stretch;
}
.why-col { padding: 44px 40px; border-radius: 8px; border: 1px solid var(--border); }
.why-col--problem { background: var(--bg2); }
.why-col--solution {
  background: linear-gradient(160deg, rgba(123,47,255,0.12), rgba(0,255,148,0.05));
  border-color: rgba(123,47,255,0.35);
}
.why-tag { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; display: block; font-weight: 500; }
.why-col--problem .why-tag { color: var(--accent3); }
.why-col--solution .why-tag { color: var(--accent2); }
.why-col h3 {
  font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text); margin-bottom: 24px; line-height: 1.15;
}
.why-list { display: flex; flex-direction: column; gap: 16px; }
.why-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--text2); font-weight: 300; }
.why-list li svg { flex-shrink: 0; margin-top: 3px; }
.why-col--problem .why-list li svg { color: var(--accent3); }
.why-col--solution .why-list li svg { color: var(--accent2); }
.why-col--solution .why-list li { color: var(--text); }

/* --- CRM Sub --- */
.crm-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--text2);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* ============================================
   FAQ
   ============================================ */
#faq { background: var(--bg); position: relative; overflow: hidden; }
.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-header { margin-bottom: 56px; text-align: center; }
.faq-header .section-label { display: inline-block; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: none; padding: 28px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--font-display); font-size: clamp(17px, 2vw, 21px); font-weight: 600;
  color: var(--text); letter-spacing: -0.3px; transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent1); }
.faq-icon { flex-shrink: 0; width: 24px; height: 24px; position: relative; transition: transform 0.4s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--accent1); border-radius: 2px; top: 50%; left: 50%; }
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%,-50%); }
.faq-icon::after  { width: 2px; height: 14px; transform: translate(-50%,-50%); transition: transform 0.4s var(--ease); }
.faq-item[open] .faq-icon::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-answer { padding: 0 0 28px; font-size: 15px; line-height: 1.8; color: var(--text2); font-weight: 300; max-width: 90%; }
.faq-item[open] summary { color: var(--accent1); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1199px) {
  .services-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-wrap { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero-visual { order: 2; transform: none; max-width: 460px; }
  .hero-left { order: 1; }
}
@media (max-width: 767px) {
  #hero { padding: 116px 24px 48px; }
  .services-grid--3 { grid-template-columns: 1fr; }
  .why-col { padding: 32px 24px; }
  .hero-visual { max-width: 100%; }
}

/* SEO: dato NAP visible en el footer */
.footer-nap {
  display: block;
  font-style: normal;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text2);
  margin-bottom: 12px;
}