/* ============================================================
   SECTIONS.CSS · Layout y estilo de cada sección + header/footer.
   Mobile-first; las mejoras por breakpoint van en responsive.css.
   ============================================================ */

/* ============================================================
   HEADER / NAV (fijo)
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

/* Wordmark (logo de texto aislado, reemplazable por SVG) */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .15rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.brand .brand__dot { color: var(--c-accent); }

/* Navegación de anclas */
.nav { display: none; align-items: center; gap: .35rem; }
.nav a {
  padding: .55rem .85rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--text); }
.nav a.is-active { color: var(--text); background: rgba(255, 255, 255, .08); }

.header__actions { display: flex; align-items: center; gap: .6rem; }
.header .btn { padding: .7rem 1.15rem; }

/* Botón hamburguesa (móvil) */
.nav-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Menú móvil desplegable */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: rgba(10, 10, 10, .98);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 1rem clamp(1rem, 5vw, 2rem) 1.5rem;
  display: grid;
  gap: .25rem;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 999;
}
.mobile-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a {
  padding: .9rem .6rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 500;
}
.mobile-menu .btn { margin-top: 1rem; }

/* ============================================================
   HERO · centrado, dark B/N con fondo animado
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) 0 4.5rem;
  overflow: hidden;
  background: var(--bg-deep);
}

/* ----- Fondo animado en blanco y negro ----- */
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Video opcional (loop, muted) · se ve en B/N y atenuado */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.9);
  opacity: .5;
}
/* Foco de luz fuerte arriba a la izquierda + un realce suave a la derecha */
.hero__beam {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 48% at 16% -4%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(42% 40% at 84% 8%, rgba(255, 255, 255, .06), transparent 70%);
}
/* Estelas horizontales de luz que cruzan la escena lentamente */
.hero__streaks { position: absolute; inset: 0; opacity: .55; }
.hero__streaks::before,
.hero__streaks::after {
  content: "";
  position: absolute; left: -30%;
  width: 160%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  filter: blur(2px);
  animation: hero-streak 11s linear infinite;
}
.hero__streaks::before { top: 38%; animation-delay: -1s; }
.hero__streaks::after  { top: 67%; height: 1px; opacity: .6; animation-duration: 15s; animation-delay: -6s; }
@keyframes hero-streak {
  0%   { transform: translateX(-22%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(22%); opacity: 0; }
}
/* Piso con reflejo brillante */
.hero__bg::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(255, 255, 255, .06), transparent);
}
/* Viñeta oscura para que el texto se lea bien */
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(125% 100% at 50% 38%, transparent 52%, rgba(0, 0, 0, .72));
}

/* ----- Contenido centrado ----- */
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.4rem + 6vw, 6rem);
  line-height: .96;
  letter-spacing: .005em;
  text-wrap: balance;
}
.hero__title .accent { color: var(--c-accent); }

/* ----- Caja central tipo input de vidrio con texto autoescrito ----- */
.hero__prompt {
  width: min(560px, 100%);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .5rem .5rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sh-md);
}
.hero__prompt-ic { color: var(--text-dim); flex: none; display: grid; }
.hero__prompt-ic svg { width: 20px; height: 20px; }
.hero__prompt-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  text-align: left;
  font-size: var(--fs-lg);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.hero__prompt-text { overflow: hidden; text-overflow: ellipsis; }
/* Cursor de escritura · ÚNICO detalle rojo permitido aquí */
.hero__caret {
  display: inline-block;
  width: 2px; height: 1.2em;
  margin-left: 3px;
  background: var(--c-cta);
  animation: hero-caret 1s steps(1) infinite;
}
@keyframes hero-caret { 50% { opacity: 0; } }
/* Botón circular de enviar (rojo, flecha arriba) */
.hero__prompt-send {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--grad-cta);
  color: var(--c-cta-ink);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px -6px var(--glow-cta);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.hero__prompt-send:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 30px -8px var(--glow-cta); }
.hero__prompt-send svg { width: 22px; height: 22px; }

/* ----- Pills: secundario con borde + primario rojo ----- */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}

/* ----- Barra inferior: credenciales (B/N) + indicador de scroll ----- */
.hero__clients { margin-top: .6rem; display: grid; gap: .9rem; justify-items: center; }
.hero__clients-label {
  font-family: var(--font-head);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-dim);
}
.hero__logos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, .5rem + 2.2vw, 2.6rem);
}
.hero__logos li {
  font-family: var(--font-head);
  font-weight: 600; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  opacity: .78;
}
/* Indicador sutil de scroll */
.hero__scroll {
  position: absolute; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 42px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  display: grid; justify-items: center;
  padding-top: 7px;
}
.hero__scroll-dot {
  width: 4px; height: 8px; border-radius: 2px;
  background: var(--text-muted);
  animation: hero-scroll 1.8s var(--ease-soft) infinite;
}
@keyframes hero-scroll {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(13px); opacity: 0; }
  100% { opacity: 0; }
}

/* Si el visitante prefiere menos movimiento, calmamos los bucles del fondo */
@media (prefers-reduced-motion: reduce) {
  .hero__streaks::before,
  .hero__streaks::after,
  .hero__scroll-dot { animation: none; }
}

/* ============================================================
   SOBRE MÍ
   ============================================================ */
.about__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
.about__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }

/* ============================================================
   SERVICIO
   ============================================================ */
.service__grid { display: grid; gap: var(--gap); }
.service-card { display: flex; flex-direction: column; }
.service-card .price-note {
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.service-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
}
.service-feature:first-of-type { border-top: 0; }
.service-feature h4 { font-family: var(--font-head); font-size: var(--fs-lg); }
.service-feature p { color: var(--text-muted); margin-top: .3rem; font-size: var(--fs-sm); }

/* ============================================================
   BENEFICIOS / RESULTADOS
   ============================================================ */
.benefits__grid { display: grid; gap: var(--gap); }
.benefit { display: flex; flex-direction: column; }
.benefit .num {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: .1em;
  margin-bottom: .75rem;
}

/* ============================================================
   METODOLOGÍA (cómo trabajo)
   ============================================================ */
.method__grid { display: grid; gap: var(--gap); }
.method-card { position: relative; overflow: hidden; }
.method-card .tag {
  display: inline-flex;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: var(--grad-accent-soft);
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ============================================================
   VIDEO DE VENTAS
   ============================================================ */
.showreel__wrap { max-width: 920px; margin-inline: auto; }
/* Marco de cristal oscuro que enmarca el VSL (border-radius muy redondeado). */
.showreel__frame {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: clamp(.55rem, .3rem + 1vw, .9rem);
  box-shadow: var(--sh-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.showreel__frame:hover { border-color: var(--glass-border-strong); }
/* CTA principal justo debajo del video. */
.showreel__cta {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  text-align: center;
}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testi__grid { display: grid; gap: var(--gap); }
.testi-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.testi-card .quote-mark {
  font-family: var(--font-head);
  font-size: 3rem;
  line-height: .6;
  color: var(--c-accent);
  height: 1.4rem;
}
.testi-card blockquote { color: var(--text); font-size: var(--fs-lg); }
.testi-card .testi-author { margin-top: auto; }
.testi-card .testi-author strong { font-family: var(--font-head); display: block; }
.testi-card .testi-author span { color: var(--c-accent); font-size: var(--fs-sm); }

/* ---------- Tarjeta antes/después + video ---------- */
.testi-card--ba {
  padding: 0;
  gap: 0;
  overflow: hidden;
  cursor: pointer;
}
.testi-card--ba .ba {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 12px 0;          /* las fotos quedan "enmarcadas" en la tarjeta */
}
.ba__fig {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ba__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transition: transform var(--t-base);
}
.testi-card--ba:hover .ba__img { transform: scale(1.045); }
.ba__tag {
  position: absolute;
  left: .55rem;
  top: .55rem;
  padding: .3rem .6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(5, 5, 5, .62);
  border: 1px solid var(--border);
  color: var(--text);
  backdrop-filter: blur(4px);
}
.ba__tag--after {
  background: var(--grad-cta);
  border-color: transparent;
  color: var(--c-cta-ink);
}
/* Degradado inferior en CADA foto (profundidad + legibilidad de etiquetas). */
.ba__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(5, 5, 5, .5), transparent 46%);
}
.testi-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.05rem clamp(1.1rem, .8rem + 1vw, 1.4rem) 1.2rem;
}
.testi-card__foot .testi-author { margin: 0; }
.testi-card__btn {
  padding: .68rem 1.1rem;
  font-size: var(--fs-sm);
}
.testi-card__btn .btn__icon { width: 16px; height: 16px; }

/* ---------- Entrada atractiva de las tarjetas de testimonio ----------
   Las fotos antes/después se revelan con un barrido vertical (clip-path)
   + un leve zoom. El "después" entra un instante más tarde para dar ritmo.
   El observer sigue mirando la TARJETA (.reveal), que no lleva clip-path,
   así que esto no afecta a la detección al hacer scroll. */
.testi-card--ba .ba__fig { clip-path: inset(0 0 103% 0); }
.testi-card--ba .ba__img { transform: scale(1.12); }

.testi-card--ba.is-visible .ba__fig {
  clip-path: inset(0 0 0 0);
  transition: clip-path .75s var(--ease-soft);
}
.testi-card--ba.is-visible .ba__fig:nth-child(2) { transition-delay: .14s; }

/* Zoom de entrada que se asienta (y no pisa el zoom del hover). */
.testi-card--ba.is-visible:not(:hover) .ba__img {
  transform: scale(1);
  transition: transform 1s var(--ease-soft);
}
.testi-card--ba.is-visible:not(:hover) .ba__fig:nth-child(2) .ba__img { transition-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .testi-card--ba .ba__fig { clip-path: none; }
  .testi-card--ba .ba__img { transform: none; }
}

/* ---------- Modal de video (lightbox de testimonios) ---------- */
html.is-modal-open { overflow: hidden; }
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2vw, 2rem);
}
.vmodal[hidden] { display: none; }
.vmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(6px);
  animation: vmodal-fade .25s ease;
}
.vmodal__dialog {
  position: relative;
  width: min(900px, 100%);
  animation: vmodal-pop .35s var(--ease-soft);
}
.vmodal__video {
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
}
.vmodal__video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
}
.vmodal__caption {
  margin: .9rem 0 0;
  text-align: center;
  font-family: var(--font-head);
  letter-spacing: .02em;
  color: var(--text);
}
.vmodal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-base), border-color var(--t-base);
}
.vmodal__close:hover {
  background: var(--c-cta);
  border-color: transparent;
  color: var(--c-cta-ink);
  transform: scale(1.06);
}
.vmodal__close svg { width: 22px; height: 22px; }
@keyframes vmodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmodal-pop {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
  .vmodal__close { top: 8px; right: 8px; background: rgba(5, 5, 5, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .vmodal__backdrop, .vmodal__dialog { animation: none; }
  .ba__img, .testi-card--ba:hover .ba__img { transition: none; transform: none; }
}

/* ============================================================
   CERTIFICACIONES
   ============================================================ */
.certs__list {
  display: grid;
  gap: 1rem;
}
.cert-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cert-item .icon-badge { width: 44px; height: 44px; }
.cert-item .icon-badge svg { width: 22px; height: 22px; }

/* ============================================================
   CTA FINAL (bloque + formulario)
   ============================================================ */
.finalcta {
  position: relative;
  overflow: hidden;
}
.finalcta__mesh {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 58% at 22% 12%, rgba(255,255,255,.1), transparent 70%);
}
.finalcta__grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
  align-items: start;
}
.finalcta__pitch .btn { margin-top: 1.75rem; }
.finalcta__pitch .wa-note {
  margin-top: 1rem;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  display: flex; align-items: center; gap: .5rem;
}
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
}
.form-card h3 { font-size: var(--fs-xl); margin-bottom: 1.25rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
}
.footer__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
  text-align: center;            /* texto centrado en todo el footer */
}
.footer__brand .brand { font-size: 1.5rem; }
.footer__brand p { color: var(--text-muted); margin-top: .9rem; max-width: 40ch; margin-inline: auto; }
.footer h4 {
  font-family: var(--font-head);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.1rem;
}
.footer__links { display: grid; gap: .7rem; justify-items: center; }
.footer__links a { color: var(--text-muted); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--c-accent); }
.footer__social { display: flex; gap: .7rem; justify-content: center; }
.footer__social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.footer__social a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.footer__social svg { width: 20px; height: 20px; }
.footer__disclaimer {
  max-width: 70ch;
  margin: 0 auto 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.footer__disclaimer + .footer__bottom { border-top: 0; padding-top: 0; }

.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  text-align: center;
  align-items: center;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ============================================================
   TL;DR · Resumen rápido
   ============================================================ */
.tldr { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.tldr__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.tldr__title {
  font-size: .85rem;
  font-family: var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.tldr__title .accent { color: var(--c-accent); }
.tldr__list { display: grid; gap: .85rem; margin-bottom: 1.75rem; }
.tldr__list li {
  position: relative;
  padding-left: 1.6rem;              /* hueco para el punto */
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
/* Punto como marcador absoluto: el texto fluye normal (no se parte en columnas) */
.tldr__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--grad-accent);
}
.tldr__list strong { color: var(--text); font-weight: 600; }

/* ============================================================
   FAQ · Acordeón accesible
   ============================================================ */
.faq__list { display: grid; gap: .8rem; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.faq__item.is-open { border-color: var(--border-strong); }
.faq__q { margin: 0; }
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.15rem 1.3rem;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}
.faq__icon {
  width: 22px; height: 22px; flex: none;
  color: var(--c-accent);
  transition: transform var(--t-base);
}
.faq__trigger[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }

/* Panel: cerrado por defecto (animación de altura con max-height) */
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-soft);
}
.faq__a.is-open { max-height: 320px; }
.faq__a p {
  padding: 0 1.3rem 1.3rem;
  color: var(--text-muted);
}
/* Sin JS → los paneles se ven abiertos (contenido siempre legible) */
.no-js .faq__a { max-height: none; }

/* ============================================================
   CTA FIJO EN MÓVIL (barra inferior · llamar + WhatsApp)
   Se muestra solo en móvil (ver responsive.css).
   ============================================================ */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  display: none;                 /* oculto por defecto; visible en móvil */
  gap: .6rem;
  padding: .6rem;
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.mobile-cta__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem;
  border-radius: var(--r-md);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-base);
}
.mobile-cta__btn svg { width: 20px; height: 20px; }
.mobile-cta__btn--call { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); }
.mobile-cta__btn--wa { background: #25D366; color: #fff; }

/* ============================================================
   PANEL DE MARCA DEL HERO (mientras no haya foto)
   Monograma diseñado en vez de una caja vacía.
   ============================================================ */
.hero__brandpanel {
  position: absolute; inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  overflow: hidden;
}
.brandpanel__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 44%, #000 38%, transparent 85%);
  mask-image: radial-gradient(72% 72% at 50% 44%, #000 38%, transparent 85%);
}
.brandpanel__mark {
  position: relative;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(6rem, 4rem + 13vw, 12rem);
  line-height: .85;
  letter-spacing: -.04em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 12px 44px var(--glow));
}
.brandpanel__label {
  position: relative;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.brandpanel__hint {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  font-size: .68rem;
  white-space: nowrap;
}

/* ============================================================
   BANDA DE DECLARACIÓN (momento tipográfico grande)
   ============================================================ */
.statement {
  position: relative;
  overflow: hidden;
  /* Fondo corrido (se desvanece en los bordes a la base, sin costura). */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 15%,
    rgba(0, 0, 0, 0.55) 85%,
    transparent 100%);
  padding-block: clamp(4rem, 2.5rem + 7vw, 9rem);
  text-align: center;
}
.statement__mesh {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 62% at 32% 8%, rgba(255, 255, 255, .12), transparent 72%);
}
.statement__text {
  position: relative;
  max-width: 980px;
  margin: 0 auto 2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.1rem + 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: .005em;
  text-wrap: balance;
}
.statement__text .accent { color: var(--c-accent); }

/* ============================================================
   BENTO DE BENEFICIOS (rompe la rejilla uniforme)
   Tarjetas "feature" (1ª y 6ª) con tono de acento + tamaños
   distintos para dar jerarquía y variedad.
   ============================================================ */
.benefit--feature {
  /* Acento diagonal algo más marcado SOBRE el mismo cristal translúcido. */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    var(--glass-base);
  border-color: var(--border-strong);
}
.benefit--feature h3 { font-size: var(--fs-xl); }

@media (min-width: 640px) and (max-width: 959px) {
  .benefits__grid .benefit:nth-child(1),
  .benefits__grid .benefit:nth-child(6) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .benefits__grid .benefit:nth-child(1) { grid-column: span 2; }
  .benefits__grid .benefit:nth-child(6) { grid-column: 1 / -1; }
}
/* La 6ª (ancha) se compone centrada como cierre de la sección */
@media (min-width: 640px) {
  .benefits__grid .benefit:nth-child(6) {
    text-align: center;
    align-items: center;
  }
  .benefits__grid .benefit:nth-child(6) .icon-badge { margin-inline: auto; }
  .benefits__grid .benefit:nth-child(6) h3 { font-size: var(--fs-2xl); }
  .benefits__grid .benefit:nth-child(6) p { max-width: 54ch; margin-inline: auto; }
}

/* ============================================================
   TEST DE NIVEL (cuestionario interactivo)
   Usa el acento de la marca (rojo) vía --c-accent / --grad-accent.
   ============================================================ */
.test__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.test__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-accent);
}
.test__fallback { text-align: center; }
.test__fallback p { color: var(--text-muted); margin-bottom: 1.5rem; }

.test__progress {
  height: 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden; margin-bottom: 0.75rem;
}
.test__progress span {
  display: block; height: 100%; width: 0;
  background: var(--grad-accent); border-radius: inherit;
  transition: width var(--t-base);
}
.test__step {
  font-family: var(--font-head); font-size: var(--fs-sm);
  color: var(--text-dim); margin-bottom: 1.5rem;
}

.test__stage { transition: opacity var(--t-base), transform var(--t-base); outline: none; }
.test__stage.is-leaving { opacity: 0; transform: translateY(10px); }

.test__question { font-size: var(--fs-xl); margin-bottom: 1.5rem; }

.test__options { display: grid; gap: 0.75rem; }
.test__option {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.5rem;
  color: var(--text); font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.test__option:hover { border-color: var(--border-strong); transform: translateX(2px); }
.test__option:focus-visible { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
.test__option[aria-checked="true"] {
  border-color: var(--c-accent);
  box-shadow: 0 12px 34px -12px var(--glow);
}
.test__option-mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.test__option[aria-checked="true"] .test__option-mark {
  border-color: var(--c-accent); background: var(--grad-accent);
}

.test__result { text-align: center; }
.test__result-badge {
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-accent);
  background: var(--grad-accent-soft);
  border: 1px solid var(--border-strong);
  padding: 0.4em 1em; border-radius: var(--r-pill);
}
.test__result-title { font-size: var(--fs-2xl); margin-bottom: 0.75rem; }
.test__result-desc {
  color: var(--text-muted); font-size: var(--fs-lg);
  max-width: 54ch; margin: 0 auto 2rem;
}
.test__reset {
  display: block; margin: 1.5rem auto 0;
  color: var(--text-muted); font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-fast);
  background: none; border: none; cursor: pointer;
}
.test__reset:hover { color: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .test__stage { transition: none; }
  .test__option:hover { transform: none; }
}

/* ============================================================
   GLASS · superficies tipo tarjeta que NO usan .card
   Mismo cristal translúcido/gris para unificar TODA la landing
   (TL;DR, test de nivel, formulario, FAQ y certificaciones).
   Se declara al final para ganar al background sólido original.
   ============================================================ */
.tldr__card,
.test__card,
.form-card,
.faq__item,
.cert-item {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
/* La tarjeta TL;DR conserva su filo de acento a la izquierda. */
.tldr__card { border-left: 3px solid var(--c-accent); }

.tldr__card:hover,
.test__card:hover,
.form-card:hover,
.faq__item:hover,
.cert-item:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-sh-hover);
}
/* FAQ abierta: mantiene el borde iluminado aunque no haya hover. */
.faq__item.is-open { border-color: var(--glass-border-strong); }

@media (prefers-reduced-motion: reduce) {
  .tldr__card, .test__card, .form-card, .faq__item, .cert-item { transition: none; }
}

/* ============================================================
   AURORA · luz de marca (roja) CONTINUA en toda la página
   Un ÚNICO lienzo FIJO detrás de todo el contenido (no una aurora
   por sección recortada), para que el resplandor rojo fluya sin
   cortes ni costuras entre módulos. El cristal translúcido de las
   tarjetas deja traslucir esta luz.
   ============================================================ */
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;                 /* sobre el fondo del body, detrás del contenido */
  pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 15% 14%, rgba(212, 21, 43, 0.24), transparent 62%),
    radial-gradient(40vw 40vw at 88% 58%, rgba(225, 29, 54, 0.19), transparent 62%),
    radial-gradient(46vw 46vw at 50% 104%, rgba(212, 21, 43, 0.17), transparent 60%);
  animation: site-aurora 34s ease-in-out infinite alternate;
}
@keyframes site-aurora {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 3%) scale(1.08); }
  100% { transform: translate(3%, -2%) scale(1.05); }
}
/* La clase .section--aurora ya NO recorta ni dibuja su propio glow:
   el resplandor es el lienzo global de arriba (continuo, sin costura). */
.section--aurora { position: relative; }
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ============================================================
   TARJETAS PREMIUM · HALO DE LUZ DE MARCA (estilo "glass bloom")
   ------------------------------------------------------------
   Cada tarjeta gana su propio resplandor rojo carmesí usando
   SOMBRAS DE COLOR (box-shadow): nunca las recorta overflow:hidden,
   así funcionan igual en tarjetas de imagen (testimonios) y de texto.
   - Reposo: bloom rojo sutil por debajo + filo especular superior.
   - Hover/enfoque: el halo "se enciende" (bloom envolvente + borde
     rojo fino) y la tarjeta se eleva. El rojo sigue siendo el único
     acento de la marca. Se declara al final para ganar en cascada.
   ============================================================ */
.card,
.form-card,
.tldr__card,
.test__card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),        /* filo especular muy sutil */
    0 20px 48px -30px rgba(0, 0, 0, .55),           /* profundidad (negro) */
    0 30px 60px -36px rgba(212, 21, 43, .16);       /* halo rojo suave y difuso */
  transition:
    transform var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base);
}

.card:hover,
.form-card:hover,
.tldr__card:hover,
.test__card:hover,
.card:focus-within,
.form-card:focus-within,
.test__card:focus-within {
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),         /* sheen superior */
    0 26px 56px -30px rgba(0, 0, 0, .6),            /* profundidad */
    0 36px 86px -40px rgba(212, 21, 43, .30);       /* halo difuso un poco más vivo */
}

/* La TL;DR mantiene su filo de acento izquierdo también encendido. */
.tldr__card:hover { border-left-color: var(--c-accent); }

/* Reducir movimiento: mantenemos el halo, quitamos el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .form-card:hover,
  .tldr__card:hover,
  .test__card:hover { transform: none; }
}