/* ==========================================================================
   ESTUDIO PENAL — SISTEMA DE DISEÑO
   Landing de performance para Google Ads.
   Mobile-first · Sin frameworks · Optimizado para Core Web Vitals
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TIPOGRAFÍAS (alojadas en tu propio hosting)
   --------------------------------------------------------------------------
   No dependemos de Google Fonts: los archivos viven en assets/fonts/.
   Esto hace la página más rápida (una petición externa menos) y evita
   que la tipografía dependa de un servidor de terceros.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Tinta — azul profundo casi negro. Base institucional. */
  --ink-900: #0A1420;
  --ink-850: #0E1B2A;
  --ink-800: #132436;
  --ink-700: #1D3348;
  --ink-600: #2C4761;
  --ink-500: #456079;
  --ink-400: #6B7F94;
  --ink-300: #97A6B5;

  /* Hueso — fondos claros, cálidos, no blanco puro. */
  --bone-50:  #FCFBF8;
  --bone-100: #F5F2EC;
  --bone-200: #EAE5DA;
  --bone-300: #D8D1C2;

  /* Acento — bronce apagado. Solo en detalles editoriales.
     --accent      : decoración (líneas, bordes, iconos sobre oscuro)
     --accent-text : versión oscurecida para TEXTO sobre fondo claro,
                     de modo que cumpla contraste WCAG AA (4.5:1)
     --accent-soft : versión clara para texto sobre fondo oscuro */
  --accent:      #B08247;
  --accent-text: #8C6738;
  --accent-soft: #D6BC93;
  --accent-dim:  rgba(176, 130, 71, 0.16);

  /* WhatsApp — solo en botones y enlaces de WhatsApp.
     --wa      : fondo de botón con texto blanco (4.63:1)
     --wa-text : color de TEXTO/ENLACE sobre fondo claro. Verificado
                 contra los cuatro fondos claros del sitio:
                 blanco 5.72 · bone-50 5.53 · bone-100 5.12 · bone-200 4.55 */
  --wa:       #118376;
  --wa-hover: #0C6A5F;
  --wa-text:  #0F7368;

  /* Tipografía */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Espaciado y forma */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(10, 20, 32, .05);
  --shadow-sm: 0 2px 8px rgba(10, 20, 32, .06), 0 1px 2px rgba(10, 20, 32, .04);
  --shadow-md: 0 12px 28px -8px rgba(10, 20, 32, .14), 0 4px 10px -4px rgba(10, 20, 32, .07);
  --shadow-lg: 0 28px 60px -18px rgba(10, 20, 32, .26);

  --container: 1160px;
  --container-narrow: 780px;
  --gutter: 22px;
  --sticky-h: 64px;

  --ease: cubic-bezier(.22, .68, .32, 1);
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--bone-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: var(--sticky-h);
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--ink-800); color: var(--bone-50); }

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 .5em;
  letter-spacing: -0.018em;
  line-height: 1.14;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

h1 {
  font-size: clamp(2.05rem, 6.2vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.02rem, 1.9vw, 1.19rem);
  line-height: 1.62;
  color: var(--ink-500);
  max-width: 58ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: .65;
  flex: none;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(56px, 9vw, 104px);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head.is-center {
  text-align: center;
  margin-inline: auto;
}
.section-head.is-center .eyebrow { justify-content: center; }
.section-head.is-center .lede { margin-inline: auto; }

/* Superficies */
.surface-bone   { background: var(--bone-50); }
.surface-bone-2 { background: var(--bone-100); }
.surface-ink    { background: var(--ink-900); color: var(--bone-100); }

.surface-ink h1, .surface-ink h2, .surface-ink h3 { color: #fff; }
.surface-ink .lede { color: rgba(236, 240, 245, .68); }
.surface-ink .eyebrow { color: var(--accent-soft); }
.surface-ink .eyebrow::before { background: var(--accent-soft); }

/* Textura y movimiento ambiental de las secciones oscuras.
   Se resuelve entero con pseudo-elementos, así que ninguna sección
   necesita HTML adicional: basta con añadirle la clase .grid-texture. */
.grid-texture { overflow: hidden; }

/* Rejilla fina que se desplaza en diagonal */
.grid-texture::before {
  content: "";
  position: absolute;
  inset: -80px;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 68px 68px;
  pointer-events: none;
  will-change: transform;
  animation: ink-grid-drift 40s linear infinite;
}
@keyframes ink-grid-drift {
  to { transform: translate3d(68px, 68px, 0); }
}

/* Resplandor de fondo que respira lentamente */
.grid-texture::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(1100px, 120vw);
  aspect-ratio: 1.4;
  margin-left: min(-550px, -60vw);
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(176,130,71,.16) 0%,
    rgba(44,71,97,.14) 38%,
    transparent 68%);
  will-change: transform, opacity;
  animation: ink-glow 26s ease-in-out infinite;
}
@keyframes ink-glow {
  0%, 100% { transform: translate3d(-8%, 0, 0) scale(1);    opacity: .75; }
  50%      { transform: translate3d(8%, 6%, 0) scale(1.18); opacity: 1; }
}

.grid-texture > * { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .grid-texture::before { animation-duration: 55s; }
  .grid-texture::after  { animation-duration: 36s; }
}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 16px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 19px; height: 19px; flex: none; }

.btn-lg { padding: 18px 30px; font-size: 1rem; }
.btn-sm { padding: 11px 17px; font-size: .86rem; }
.btn-block { width: 100%; }

/* WhatsApp — conversión principal */
.btn-wa {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(18, 140, 126, .5);
}
.btn-wa:hover { background: var(--wa-hover); box-shadow: 0 10px 22px -8px rgba(18, 140, 126, .55); }

/* Tinta sólida */
.btn-ink { background: var(--ink-900); color: #fff; }
.btn-ink:hover { background: var(--ink-700); }

/* Contorno sobre fondo claro */
.btn-outline {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-300);
}
.btn-outline:hover { border-color: var(--ink-900); background: var(--ink-900); color: #fff; }

/* Contorno sobre fondo oscuro */
.btn-outline-light {
  background: rgba(255,255,255,.04);
  color: #fff;
  border-color: rgba(255,255,255,.26);
}
.btn-outline-light:hover { background: #fff; color: var(--ink-900); border-color: #fff; }

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 520px) {
  .btn-group { flex-direction: row; flex-wrap: wrap; }
}
.btn-group.is-center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}
@media (min-width: 900px) {
  .site-header .container { height: 78px; }
}

.site-header.is-stuck {
  background: rgba(10, 20, 32, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: rgba(255,255,255,.09);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.brand-mark {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 7px;
  border: 1px solid rgba(214, 188, 147, .42);
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--accent-soft);
  letter-spacing: .02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-role {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
  font-weight: 500;
}

.header-actions { display: none; align-items: center; gap: 10px; }
@media (min-width: 900px) { .header-actions { display: flex; } }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.86);
  font-weight: 500;
  font-size: .92rem;
  padding: 10px 6px;
  transition: color .2s var(--ease);
}
.header-phone:hover { color: #fff; }
.header-phone svg { width: 17px; height: 17px; opacity: .8; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  padding-top: calc(68px + clamp(44px, 8vw, 82px));
  padding-bottom: clamp(52px, 8vw, 96px);
  overflow: hidden;
}
@media (min-width: 900px) {
  .hero { padding-top: calc(78px + clamp(52px, 7vw, 92px)); }
}

/* --------------------------------------------------------------------------
   FONDO ANIMADO
   --------------------------------------------------------------------------
   Regla de oro de rendimiento: solo se animan `transform` y `opacity`.
   Son las dos únicas propiedades que el navegador puede animar en la GPU
   sin recalcular el diseño ni repintar la página. Cualquier otra cosa
   (background-position, width, top/left, filter…) obligaría a repintar en
   cada fotograma y hundiría la velocidad en móviles de gama baja, que es
   justo desde donde llega el tráfico de Google Ads.

   Todo el movimiento se desactiva solo si el visitante tiene activada la
   preferencia del sistema "reducir movimiento".
   -------------------------------------------------------------------------- */

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Capa 1: aurora (manchas de luz que se desplazan lentamente) ---- */
.aurora {
  position: absolute;
  inset: 0;
  /* --px / --py los mueve el parallax del cursor (solo en escritorio) */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .7s cubic-bezier(.2, .8, .3, 1);
}

.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
}

.blob-1 {
  top: -32%; right: -14%;
  width: min(780px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(176,130,71,.30) 0%,
    rgba(176,130,71,.10) 40%,
    transparent 68%);
  animation: blob-drift-1 30s ease-in-out infinite;
}

.blob-2 {
  bottom: -38%; left: -18%;
  width: min(700px, 76vw);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(44,71,97,.60) 0%,
    rgba(29,51,72,.24) 42%,
    transparent 70%);
  animation: blob-drift-2 38s ease-in-out infinite;
}

.blob-3 {
  top: 26%; left: 38%;
  width: min(560px, 64vw);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(18,131,118,.18) 0%,
    rgba(18,131,118,.06) 45%,
    transparent 70%);
  animation: blob-drift-3 46s ease-in-out infinite;
}

@keyframes blob-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%      { transform: translate3d(-7%, 9%, 0) scale(1.14); opacity: .68; }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  50%      { transform: translate3d(10%, -7%, 0) scale(1.18); opacity: 1; }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.95); opacity: .55; }
  50%      { transform: translate3d(-9%, -6%, 0) scale(1.2); opacity: 1; }
}

/* ---- Capa 2: rejilla fina que se desplaza ---- */
.hero-grid {
  position: absolute;
  inset: -90px;
  background-image:
    linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 118% 88% at 50% 18%, #000 28%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 118% 88% at 50% 18%, #000 28%, transparent 76%);
  will-change: transform;
  /* Se desplaza exactamente un cuadro (74px) para que el bucle sea invisible */
  animation: grid-drift 34s linear infinite;
}

@keyframes grid-drift {
  to { transform: translate3d(74px, 74px, 0); }
}

/* ---- Capa 3: anillos concéntricos girando ---- */
.hero-rings {
  position: absolute;
  top: 50%;
  right: -10%;
  width: min(680px, 78vw);
  aspect-ratio: 1;
  opacity: .5;
  /* translateY(-50%) centra vertical; el translate3d es el parallax */
  transform: translateY(-50%) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .7s cubic-bezier(.2, .8, .3, 1);
}
@media (max-width: 899px) { .hero-rings { opacity: .34; } }
@media (max-width: 899px) {
  .hero-rings {
    top: auto;
    bottom: -18%;
    right: -32%;
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  }
}

/* IMPORTANTE — por qué cada anillo va en su propio <div> y no en un <g>:
   Chromium NO acelera por GPU los transform aplicados a elementos hijos
   de un SVG. Al animar un <g> se recalculaba el diseño en CADA fotograma
   (medido: 147 recálculos en 4 s, y el ritmo caía a 37 fps).
   Envolviendo cada capa en un <div> de HTML, el giro pasa a la GPU y el
   coste baja prácticamente a cero. Mismo resultado visual. */
.ring-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.ring-layer svg { width: 100%; height: 100%; }

.ring-outer { animation: ring-spin 170s linear infinite; }
.ring-inner { animation: ring-spin-rev 125s linear infinite; }

/* El punto central es un simple círculo CSS de 8px, no un SVG a tamaño
   completo: escalar una capa de 680 px para mostrar un punto diminuto
   desperdicia memoria de vídeo sin ninguna ganancia visual. */
.ring-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent-soft);
  will-change: transform, opacity;
  animation: core-pulse 7s ease-in-out infinite;
}

@keyframes ring-spin      { to { transform: rotate(360deg); } }
@keyframes ring-spin-rev  { to { transform: rotate(-360deg); } }
@keyframes core-pulse {
  0%, 100% { opacity: .9;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.8); }
}

/* Cuando una sección animada sale de la pantalla, su movimiento se
   congela. No se ve, así que no tiene sentido gastar batería del
   visitante en ello. Lo activa el script con un IntersectionObserver. */
.is-anim-paused,
.is-anim-paused *,
.is-anim-paused::before,
.is-anim-paused::after {
  animation-play-state: paused !important;
}

/* ---- Capa 4: grano ----
   Textura estática que rompe el "bandeado" (las franjas visibles que
   aparecen en degradados oscuros amplios).
   Se descartó mix-blend-mode: costaba 23 fps porque obliga al navegador
   a recomponer todo lo que hay debajo. Con opacidad plana el efecto es
   equivalente y no cuesta nada. */
.grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* En móvil se reduce el número de capas en movimiento.
   Criterio: se conserva lo que de verdad se percibe en una pantalla
   pequeña (la aurora y los anillos) y se congela lo que no (la rejilla
   se desplaza 74 px en 48 s con un 3 % de opacidad: imperceptible, pero
   obliga a la GPU a recomponer en cada fotograma igualmente).
   Menos capas animadas = menos batería del visitante. */
@media (max-width: 700px) {
  .blob-3 { display: none; }
  .blob-1 { animation-duration: 42s; }
  .blob-2 { animation-duration: 50s; }
  .hero-grid { animation: none; }
  .grid-texture::before { animation: none; }
}

.hero .container { position: relative; z-index: 2; }

/* Hero a dos columnas: copy + formulario.
   En móvil se apila; el formulario queda debajo del copy y de los botones,
   de modo que quien llega ve primero DE QUÉ va la página y cómo contactar
   al instante, y solo después el formulario. */
.hero-layout {
  display: grid;
  gap: 34px;
  align-items: start;
}
@media (min-width: 1000px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(38px, 4.5vw, 68px);
  }
}

.hero-inner { max-width: 640px; }

/* Con el formulario al lado, el titular necesita un tope más bajo para no
   partirse en demasiadas líneas dentro de una columna estrecha. */
@media (min-width: 1000px) {
  .hero-layout .hero-inner h1 { font-size: clamp(2.2rem, 3.4vw, 3.1rem); }
}

/* --- Distintivo de consulta gratuita --- */
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(18, 131, 118, .18);
  border: 1px solid rgba(31, 168, 150, .45);
  color: #6FD8C6;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.free-badge svg { width: 16px; height: 16px; flex: none; }

/* --- Formulario dentro del hero --- */
.hero-form {
  background: var(--bone-50);
  color: var(--ink-800);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow: var(--shadow-lg);
}
.hero-form .form-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 6px;
}
.hero-form .form-head-ic {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  background: rgba(18, 131, 118, .12);
  border: 1px solid rgba(18, 131, 118, .26);
  display: grid;
  place-items: center;
  color: var(--wa-text);
}
.hero-form .form-head-ic svg { width: 19px; height: 19px; }
.hero-form h2 {
  color: var(--ink-900);
  font-size: clamp(1.22rem, 2.2vw, 1.48rem);
  margin: 0;
  letter-spacing: -0.015em;
}
.hero-form > p {
  font-size: .9rem;
  color: var(--ink-500);
  margin-bottom: 20px;
  line-height: 1.55;
}
.hero-form .form-grid { gap: 14px; }
.hero-form .field input,
.hero-form .field select,
.hero-form .field textarea { padding: 12px 14px; }
.hero-form .field textarea { min-height: 76px; }

/* Aviso de gratuidad al pie del formulario */
.form-free {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: .84rem;
  font-weight: 600;
  color: var(--wa-text);
  margin-top: -2px;
}
.form-free svg { width: 16px; height: 16px; flex: none; }

.hero h1,
.hero h2,
.hero h3 { color: #fff; }

/* Excepción: el formulario del hero es una tarjeta clara, así que su
   título debe volver al color de tinta. Si no, queda blanco sobre crema
   y no se lee. */
.hero .hero-form h2,
.hero .hero-form h3,
.hero .hero-form label { color: var(--ink-900); }
.hero .hero-form .consent label { color: var(--ink-500); font-weight: 400; }

/* El hero es oscuro: el bronce debe ser la versión clara, no la de texto
   sobre fondo claro. */
.hero .eyebrow { color: var(--accent-soft); }
.hero .eyebrow::before { background: var(--accent-soft); }

.hero h1 { margin-bottom: .42em; }
.hero h1 em {
  font-style: normal;
  color: var(--accent-soft);
}

.hero .lede {
  color: rgba(233, 238, 244, .74);
  margin-bottom: 34px;
}

.hero .btn-group { margin-bottom: 8px; }

.hero-reassure {
  margin-top: 18px;
  font-size: .84rem;
  color: rgba(255,255,255,.62);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-reassure svg { width: 15px; height: 15px; flex: none; opacity: .7; }

/* Franja de credenciales */
.credentials {
  position: relative;
  z-index: 2;
  margin-top: clamp(44px, 6vw, 68px);
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.11);
  display: grid;
  gap: 20px;
}
@media (min-width: 700px) {
  .credentials { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .credentials .cred + .cred {
    border-left: 1px solid rgba(255,255,255,.11);
    padding-left: clamp(20px, 3vw, 38px);
  }
  .credentials .cred:not(:last-child) { padding-right: clamp(20px, 3vw, 38px); }
}
.cred { display: flex; gap: 13px; align-items: flex-start; }
.cred-ic {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 8px;
  background: rgba(176,130,71,.13);
  border: 1px solid rgba(176,130,71,.24);
  display: grid;
  place-items: center;
  color: var(--accent-soft);
}
.cred-ic svg { width: 17px; height: 17px; }
.cred > span:last-child { min-width: 0; }
.cred-title {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  color: #fff;
  margin-bottom: 3px;
  line-height: 1.35;
}
.cred-sub {
  display: block;
  font-size: .81rem;
  color: rgba(255,255,255,.6);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   8. SITUACIONES
   -------------------------------------------------------------------------- */
.situations {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .situations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .situations { grid-template-columns: repeat(3, 1fr); } }

.situation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 26px 24px 22px;
  background: #fff;
  border: 1px solid var(--bone-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.situation::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease);
}
.situation:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--bone-300);
}
.situation:hover::before { transform: scaleY(1); }

.situation-ic {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--bone-100);
  border: 1px solid var(--bone-200);
  display: grid;
  place-items: center;
  color: var(--ink-700);
  margin-bottom: 4px;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.situation-ic svg { width: 19px; height: 19px; }
.situation:hover .situation-ic {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--accent-soft);
}

.situation-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink-900);
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0;
}
.situation-a {
  font-size: .91rem;
  color: var(--ink-500);
  line-height: 1.55;
  margin: 0;
}
.situation-link {
  margin-top: auto;
  padding-top: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wa-text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.situation-link svg {
  width: 14px; height: 14px;
  transition: transform .25s var(--ease);
}
.situation:hover .situation-link svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   9. SERVICIOS
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  gap: 1px;
  background: var(--bone-200);
  border: 1px solid var(--bone-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  background: var(--bone-50);
  padding: 30px 26px;
  transition: background-color .25s var(--ease);
}
.service:hover { background: #fff; }

.service-num {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: .08em;
  display: block;
  margin-bottom: 14px;
}
.service h3 { margin-bottom: .45em; }
.service p {
  font-size: .92rem;
  color: var(--ink-500);
  line-height: 1.58;
  margin: 0;
}

.services-note {
  margin-top: 26px;
  font-size: .92rem;
  color: var(--ink-500);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--bone-100);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.services-note svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); margin-top: 2px; }

/* --------------------------------------------------------------------------
   9b. ETAPAS DEL PROCESO
   --------------------------------------------------------------------------
   Formato de lista con filetes en lugar de tarjetas: evita que la página
   parezca tres rejillas de tarjetas seguidas y hace la sección más ligera
   de leer.
   -------------------------------------------------------------------------- */
.stages {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--bone-200);
}
@media (min-width: 860px) {
  .stages {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 5vw, 68px);
  }
}

.stage {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--bone-200);
}

.stage-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--accent-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  margin-top: 2px;
}

.stage h3 { font-size: 1.06rem; margin-bottom: .28em; }
.stage p {
  font-size: .91rem;
  color: var(--ink-500);
  line-height: 1.58;
  margin: 0;
}

.stages-cta {
  margin-top: 26px;
  font-size: .96rem;
  color: var(--ink-500);
}
.stages-cta a {
  color: var(--wa-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   10. POR QUÉ ELEGIRNOS (sección oscura)
   -------------------------------------------------------------------------- */
.why-layout { display: grid; gap: clamp(34px, 5vw, 64px); }
@media (min-width: 940px) {
  .why-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}

.why-list { display: grid; gap: 2px; }

.why-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.why-item:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }

.why-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-soft);
  line-height: 1;
  opacity: .8;
}
.why-item h3 { color: #fff; margin-bottom: .34em; font-size: 1.14rem; }
.why-item p {
  color: rgba(233,238,244,.6);
  font-size: .93rem;
  line-height: 1.58;
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. PROCESO
   -------------------------------------------------------------------------- */
.process {
  position: relative;
  display: grid;
  gap: 0;
  counter-reset: step;
}
.process::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: linear-gradient(180deg, var(--bone-300), var(--bone-200));
}
@media (min-width: 860px) {
  .process { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .process::before {
    left: 10%;
    right: 10%;
    top: 21px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--bone-200), var(--bone-300), var(--bone-200));
  }
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding-block: 18px;
  align-items: start;
}
@media (min-width: 860px) {
  .step {
    grid-template-columns: 1fr;
    /* align-content: start evita que las filas se estiren cuando una
       columna tiene menos texto que las demás (si no, los títulos de
       los pasos quedan desalineados entre sí). */
    align-content: start;
    gap: 16px;
    padding: 0 14px;
    text-align: left;
  }
}

.step-dot {
  counter-increment: step;
  position: relative;
  z-index: 1;
  width: 43px; height: 43px;
  border-radius: 50%;
  background: var(--bone-50);
  border: 1.5px solid var(--ink-900);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}
.step-dot::before { content: counter(step); }

.step h3 { font-size: 1.06rem; margin-bottom: .32em; }
.step p {
  font-size: .9rem;
  color: var(--ink-500);
  line-height: 1.55;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. AUTORIDAD
   -------------------------------------------------------------------------- */
.authority {
  display: grid;
  gap: 0;
  background: var(--ink-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 860px) {
  .authority { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
}

.authority-visual {
  position: relative;
  min-height: 280px;
  background:
    radial-gradient(circle at 60% 30%, rgba(176,130,71,.22), transparent 62%),
    linear-gradient(155deg, var(--ink-700), var(--ink-900));
  display: grid;
  place-items: center;
  padding: 40px 26px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 860px) {
  .authority-visual { border-bottom: none; border-right: 1px solid rgba(255,255,255,.08); }
}
/* Cuando exista foto real, se usa <img class="authority-photo"> y el monograma se retira */
.authority-photo {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center 22%;
}
.monogram {
  width: 128px; height: 128px;
  border-radius: 50%;
  border: 1px solid rgba(214,188,147,.4);
  background: rgba(255,255,255,.03);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--accent-soft);
  letter-spacing: .02em;
  box-shadow: inset 0 0 40px rgba(176,130,71,.1);
}

.authority-body { padding: clamp(30px, 4vw, 48px); }
.authority-body .eyebrow { color: var(--accent-soft); }
.authority-body .eyebrow::before { background: var(--accent-soft); }
.authority-body h2 { color: #fff; margin-bottom: .3em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.authority-body .lede {
  color: rgba(233,238,244,.68);
  font-size: 1rem;
  margin-bottom: 26px;
}

.creds {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 0;
}
.creds li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .92rem;
  color: rgba(233,238,244,.82);
  line-height: 1.5;
}
.creds li:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.creds svg { width: 17px; height: 17px; color: var(--accent-soft); margin-top: 3px; }
.creds strong { color: #fff; font-weight: 600; }

/* Tarjetas de respaldo */
.trust-cards {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .trust-cards { grid-template-columns: repeat(3, 1fr); } }

.trust-card {
  background: #fff;
  border: 1px solid var(--bone-200);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}
.trust-card-ic {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--accent-dim);
  display: grid;
  place-items: center;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.trust-card-ic svg { width: 18px; height: 18px; }
.trust-card h3 { font-size: 1.02rem; margin-bottom: .35em; }
.trust-card p { font-size: .89rem; color: var(--ink-500); line-height: 1.55; margin: 0; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
  border-top: 1px solid var(--bone-200);
}
.faq-item {
  border-bottom: 1px solid var(--bone-200);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.35;
  transition: color .2s var(--ease);
}
.faq-item summary:hover { color: var(--accent-text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--bone-300);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.faq-chev svg { width: 13px; height: 13px; color: var(--ink-600); }
.faq-item[open] .faq-chev {
  transform: rotate(180deg);
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.faq-item[open] .faq-chev svg { color: #fff; }
.faq-a {
  padding: 0 4px 24px;
  font-size: .96rem;
  color: var(--ink-500);
  line-height: 1.66;
  max-width: 66ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   14. CTA FINAL + FORMULARIO
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(34px, 5vw, 56px); align-items: start; }
@media (min-width: 940px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
}

.contact-pitch h2 { color: #fff; }
.contact-direct {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.11);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(233,238,244,.78);
  font-size: .94rem;
  transition: color .2s var(--ease);
}
.contact-row:hover { color: #fff; }
.contact-row-ic {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  color: var(--accent-soft);
}
.contact-row-ic svg { width: 16px; height: 16px; }
.contact-row-label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
  margin-bottom: 1px;
  font-weight: 500;
}
.contact-row-value { display: block; font-weight: 600; color: #fff; line-height: 1.4; }
.contact-row > span:last-child { min-width: 0; }

/* --------------------------------------------------------------------------
   14b. CIERRE DE CONTACTO (sección final, sin formulario)
   -------------------------------------------------------------------------- */
.closing {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.closing .free-badge { margin-bottom: 22px; }
.closing h2 { color: #fff; }
.closing .lede { margin-inline: auto; margin-bottom: 30px; }
.closing .btn-group { justify-content: center; }

.closing-alt {
  margin-top: 22px;
  font-size: .92rem;
  color: rgba(233, 238, 244, .6);
}
.closing-alt a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.closing-meta {
  display: grid;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .11);
}
@media (min-width: 760px) {
  .closing-meta { grid-auto-flow: column; gap: 30px; }
}
.closing-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .87rem;
  color: rgba(233, 238, 244, .68);
  text-align: left;
}
.closing-meta svg {
  width: 16px; height: 16px;
  flex: none;
  color: var(--accent-soft);
}

/* Tarjeta de formulario
   Vive dentro de una sección oscura, así que fija sus propios colores
   para no heredar el texto blanco de .surface-ink. */
.form-card {
  background: var(--bone-50);
  color: var(--ink-800);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 38px);
  box-shadow: var(--shadow-lg);
}
.form-card h2,
.form-card h3 {
  color: var(--ink-900);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  margin-bottom: .3em;
}
.form-card > p,
.form-card .lede {
  font-size: .92rem;
  color: var(--ink-500);
  margin-bottom: 24px;
}

.form-grid { display: grid; gap: 16px; }

.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 7px;
  letter-spacing: -0.005em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-900);
  padding: 13px 15px;
  background: #fff;
  border: 1.5px solid var(--bone-300);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink-700);
  box-shadow: 0 0 0 3px rgba(29, 51, 72, .1);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-300); }

.form-note {
  font-size: .79rem;
  color: var(--ink-500);
  line-height: 1.5;
  margin: 4px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.form-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; opacity: .7; }
.form-note a { color: var(--wa-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Casilla de consentimiento.
   La Ley N.° 29733 del Perú exige consentimiento expreso e informado y que
   la casilla NO venga marcada por defecto. Por eso es un checkbox real,
   obligatorio (`required`) y sin `checked`. */
.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  padding: 14px 16px;
  background: var(--bone-100);
  border: 1px solid var(--bone-200);
  border-radius: var(--radius-sm);
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--wa);
  cursor: pointer;
  flex: none;
}
.consent label {
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0;
  cursor: pointer;
}
.consent label a {
  color: var(--wa-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent.is-invalid {
  border-color: #C0453B;
  background: rgba(192, 69, 59, .06);
}

.form-success {
  display: none;
  align-items: flex-start;
  gap: 11px;
  background: rgba(18, 140, 126, .08);
  border: 1px solid rgba(18, 140, 126, .28);
  color: #0B5B52;
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  font-size: .9rem;
  line-height: 1.5;
  margin-top: 4px;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(233,238,244,.55);
  padding-block: clamp(40px, 5vw, 58px) clamp(96px, 8vw, 44px);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .86rem;
}
@media (min-width: 900px) {
  .site-footer { padding-bottom: 44px; }
}
.footer-top {
  display: grid;
  gap: 26px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 760px) {
  .footer-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 40px; }
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.footer-nav a {
  color: rgba(233,238,244,.62);
  transition: color .2s var(--ease);
  font-weight: 500;
}
.footer-nav a:hover { color: #fff; }

.footer-legal {
  padding-top: 24px;
  display: grid;
  gap: 10px;
  font-size: .8rem;
  color: rgba(233,238,244,.58);
  line-height: 1.6;
}
.footer-legal strong { color: rgba(233,238,244,.7); font-weight: 600; }

/* --------------------------------------------------------------------------
   16. STICKY CTA MÓVIL
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1px;
  background: rgba(10,20,32,.14);
  box-shadow: 0 -6px 24px -8px rgba(10,20,32,.24);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sticky-cta .btn {
  border-radius: 0;
  height: var(--sticky-h);
  font-size: .95rem;
  box-shadow: none;
}
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   17. ANIMACIONES DE APARICIÓN
   -------------------------------------------------------------------------- */
/* Estado inicial. La clase .js-anim la añade un script en el <head>:
   si el visitante tiene JavaScript desactivado, la clase nunca se aplica
   y todo el contenido se ve desde el primer momento. */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  /* Red de seguridad SOLO CSS: si el JavaScript se rompiera o no llegara
     a cargar, a los 4 segundos el contenido aparece igualmente.
     Nunca queremos una sección en blanco. */
  animation: reveal-failsafe 0s linear 4s forwards;
}
.js-anim [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}
.js-anim [data-reveal-delay="1"] { transition-delay: .05s; }
.js-anim [data-reveal-delay="2"] { transition-delay: .10s; }
.js-anim [data-reveal-delay="3"] { transition-delay: .15s; }
.js-anim [data-reveal-delay="4"] { transition-delay: .20s; }
.js-anim [data-reveal-delay="5"] { transition-delay: .25s; }

/* Si el visitante pidió al sistema "reducir movimiento" (por mareo,
   migrañas o simple preferencia), TODO el movimiento se detiene: el fondo
   animado, las apariciones al hacer scroll y el parallax del cursor.
   La página sigue viéndose exactamente igual, solo que quieta. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .aurora, .hero-rings { transform: none !important; }
}

/* --------------------------------------------------------------------------
   18. ACCESIBILIDAD / UTILIDADES
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-900);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   19. WIDGET FLOTANTE DE WHATSAPP
   --------------------------------------------------------------------------
   SOLO EN ESCRITORIO. En móvil la barra fija inferior ya ocupa esa zona:
   poner además un botón flotante los haría chocar, taparía contenido en una
   pantalla pequeña y Google penaliza los avisos emergentes intrusivos en
   móvil. Allí el refuerzo se hace con un pulso sutil en la barra fija.
   ========================================================================== */

.wa-widget {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 65;
  display: none;               /* se activa a partir de 900px */
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* Entrada: no aparece nada más cargar. Compite con el formulario del
     hero, así que espera a que la persona baje o pase el tiempo. */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  /* Red de seguridad sin JavaScript: a los 7 s aparece igualmente. */
  animation: wa-widget-in 0s linear 7s forwards;
}
@media (min-width: 900px) {
  .wa-widget { display: flex; }
}
.wa-widget.is-ready {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: none;
}
@keyframes wa-widget-in {
  to { opacity: 1; transform: none; pointer-events: auto; }
}

/* --- Burbuja con el mensaje --- */
.wa-bubble {
  width: 292px;
  background: var(--bone-50);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 20px 48px -12px rgba(10, 20, 32, .38),
              0 4px 12px -4px rgba(10, 20, 32, .18);
  overflow: hidden;
  transform-origin: bottom right;
  /* Estado inicial: oculta. La muestra el script.
     visibility:hidden la saca además del lector de pantalla y evita que
     el botón de cerrar reciba el foco con el tabulador estando invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease),
              visibility 0s linear .32s;
}
.wa-widget.is-open .wa-bubble {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .32s var(--ease), transform .32s var(--ease),
              visibility 0s linear 0s;
}

.wa-bubble-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--ink-900);
}
.wa-bubble-mark {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(214, 188, 147, .42);
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .84rem;
  color: var(--accent-soft);
}
.wa-bubble-who { flex: 1; min-width: 0; line-height: 1.3; }
.wa-bubble-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
}
.wa-bubble-role {
  display: block;
  font-size: .73rem;
  color: rgba(255, 255, 255, .62);
}
.wa-bubble-close {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.wa-bubble-close:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.wa-bubble-close svg { width: 14px; height: 14px; }

.wa-bubble-body { padding: 16px 16px 18px; }
.wa-bubble-msg {
  background: var(--bone-100);
  border-radius: 4px 14px 14px 14px;
  padding: 13px 15px;
  font-size: .91rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 14px;
}
.wa-bubble-msg strong { color: var(--ink-900); font-weight: 600; }
.wa-bubble .btn { width: 100%; padding: 13px 18px; font-size: .93rem; }

/* --- Botón circular --- */
.wa-fab {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px -6px rgba(17, 131, 118, .55);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.wa-fab:hover { background: var(--wa-hover); transform: scale(1.06); }
.wa-fab:active { transform: scale(.98); }
.wa-fab svg { width: 32px; height: 32px; }

/* Punto de aviso: llama la atención sin fingir mensajes sin leer */
.wa-fab::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  /* El aro va en color claro: el widget flota sobre secciones claras y
     oscuras, y un aro oscuro se lee como una mancha sobre el hueso. */
  border: 2.5px solid var(--bone-50);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-widget.has-alert .wa-fab::after { opacity: 1; transform: none; }

/* Anillo que late lentamente para atraer la mirada */
.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  animation: wa-pulse 2.8s ease-out infinite;
}
.wa-widget.is-open .wa-fab::before { animation: none; opacity: 0; }

@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* --- Refuerzo en móvil: pulso sutil en la barra fija --- */
@media (max-width: 899px) {
  .sticky-cta .btn-wa { position: relative; overflow: hidden; }
  .sticky-cta .btn-wa::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: wa-sheen 4.5s ease-in-out 2s infinite;
    pointer-events: none;
  }
  @keyframes wa-sheen {
    0%, 72%, 100% { transform: translateX(-100%); }
    82%           { transform: translateX(100%); }
  }
}