/* =============================================================
   GRUPO REHSOK
   Sistema visual derivado del isotipo: barras a 45.00° exactos,
   ascendentes, de trazo constante y extremos semicirculares,
   la última rematando en punta de flecha.

   Reglas del sistema:
   · Las CAJAS se cortan a 45° (chaflán en px = ángulo real). Sin border-radius.
   · Los TRAZOS llevan cap redondo, como las barras del logo.
   · El gradiente #AB29F4 → #70EBFA se reserva a las barras-firma
     y al CTA primario. En ningún otro lugar.
   ============================================================= */

:root {
  /* Paleta — manual de identidad Grupo Rehsok */
  --ink:        #0D0243;
  --violet:     #AB29F4;
  --cyan:       #70EBFA;

  /* Derivados de la paleta (no del manual, pero calculados de ella) */
  --ink-raise:  #160A52;   /* elevación sobre el fondo profundo */
  --ink-deep:   #08012B;   /* pie, más profundo que el fondo */
  --paper:      #F5F6FC;   /* apertura de luz */
  --paper-2:    #ECEEF8;
  --violet-ink: #7B1FB0;   /* violeta legible sobre papel */
  --cyan-ink:   #1D7E93;   /* cian legible sobre papel */

  --grad: linear-gradient(115deg, var(--violet) 0%, #8F5CF7 52%, var(--cyan) 100%);

  /* Texto */
  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255, 255, 255, 0.74);
  --on-dark-faint:  rgba(255, 255, 255, 0.50);
  --on-light:       var(--ink);
  --on-light-soft:  #575C87;

  /* Líneas */
  --line-dark:  rgba(255, 255, 255, 0.16);
  --line-light: rgba(13, 2, 67, 0.14);

  /* Firma: el chaflán. 28px en H y 28px en V ⇒ 45.00° exactos. */
  --chamfer: 28px;
  --chamfer-sm: 18px;

  /* Ritmo vertical */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
  --s-7: 128px;

  --wrap: 1200px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: 'Bai Jamjuree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }

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

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* =============================================================
   FIRMA — utilidades derivadas del isotipo
   ============================================================= */

/* Chaflán a 45°: la esquina superior derecha se corta como el
   extremo de una barra del logo. En px, para que el ángulo no
   se deforme con el ancho del contenedor. */
.chamfered {
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%
  );
}

/* Marcador de sección: las tres barras del isotipo (stub · larga · stub) */
.mark-bars { width: 26px; height: 14px; flex: none; }

/* Cenefa divisoria: el isotipo estirado a lo ancho de la página.
   Barras a 45° reales, recortadas sobre el gradiente de marca. */
.rule-bars {
  height: 56px;
  background: var(--grad);
  opacity: 0.85;
  -webkit-mask-image: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    #000 14px 20px,
    transparent 20px 34px
  );
  mask-image: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    #000 14px 20px,
    transparent 20px 34px
  );
}
.rule-bars-top { position: absolute; inset: 0 0 auto 0; }

/* Eyebrow: mayúsculas con tracking, precedido por las barras */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--s-3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;              /* el de Nosotros es un h2: no hereda el 1.12 */
  text-transform: uppercase;
  color: var(--violet-ink);
}
.eyebrow-light { color: var(--cyan); }

/* =============================================================
   BOTONES
   ============================================================= */
.btn {
  --chamfer: var(--chamfer-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.btn:hover { transform: translate(2px, -2px); }   /* se mueve sobre la diagonal */
.btn:active { transform: translate(0, 0); }

.btn-primary { background: var(--grad); color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { background: rgba(13, 2, 67, 0.18); color: rgba(13, 2, 67, 0.45); cursor: not-allowed; transform: none; filter: none; }

.btn-ghost {
  background: transparent;
  color: var(--on-dark);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  clip-path: none;                 /* un borde de 1px no puede seguir el chaflan */
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(112, 235, 250, 0.6); }

.btn-block { width: 100%; }

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(13, 2, 67, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; }
.brand-name {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--on-dark);
}

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav-brand, .nav-tagline { display: none; }

.nav-list { display: flex; align-items: center; gap: var(--s-4); }
.nav-list a {
  position: relative;
  padding: 6px 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--on-dark-soft);
  transition: color 0.2s var(--ease);
}
.nav-list a:hover { color: var(--on-dark); }

/* Subrayado de nav = una barra del logo, inclinada 45° y con cap redondo */
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 14px;
  height: 3px;
  border-radius: 2px;              /* cap redondo: es un TRAZO, no una caja */
  background: var(--grad);
  transform: rotate(-45deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}
.nav-list a:hover::after { transform: rotate(-45deg) scaleX(1); }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 110;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  border-radius: 2px;
  background: var(--on-dark);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* Al abrir, las dos barras se cruzan sobre la diagonal del logo */
.nav-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.is-open span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-7);
  background: var(--ink);
  overflow: hidden;
}

/* Video de fondo. Sin sources en el markup: el JS los inyecta solo donde
   conviene reproducirlo. Sin ellos el elemento muestra su poster, que es
   el primer fotograma exacto del video, asi que no hay salto ni discrepancia. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* El velo va en su propia capa, no en el background, porque debe cubrir
   el video. Medido: en la zona del titular deja 7.2:1 de contraste. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(13, 2, 67, 0.78) 0%,
    rgba(13, 2, 67, 0.68) 38%,
    rgba(13, 2, 67, 0.34) 72%,
    rgba(13, 2, 67, 0.52) 100%);
}

.hero-inner { position: relative; z-index: 2; max-width: 860px; }

.hero-title {
  margin-bottom: var(--s-4);
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.hero-title em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.hero .rule-bars { position: absolute; z-index: 2; inset: auto 0 0 0; }

/* =============================================================
   SECCIONES
   ============================================================= */
.section { position: relative; padding: var(--s-7) 0; }

.section-light { background: var(--paper); color: var(--on-light); }
.section-dark  { background: var(--ink);   color: var(--on-dark); padding-top: calc(var(--s-7) + 56px); }

/* Fondo de la banda de valores. El overlay es alto a proposito: encima
   va texto y la imagen solo aporta profundidad. */
.section-dark.has-media {
  background:
    linear-gradient(180deg, rgba(13, 2, 67, 0.93), rgba(13, 2, 67, 0.88)),
    url('/assets/images/valores.jpg') center / cover no-repeat,
    var(--ink);
}

.section-head { max-width: 760px; margin-bottom: var(--s-6); }

.section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.section-title-light { color: var(--on-dark); }

/* Banda apaisada a todo el ancho. La imagen define su altura con
   aspect-ratio y nadie depende de nadie: el intento anterior ponia
   height:100% contra un contenedor sin altura propia, el navegador
   caia al ratio intrinseco 4:5 y la foto acababa midiendo 790px. */
.about-media {
  margin: 0 0 var(--s-5);
}
.about-media img {
  width: 100%;
  aspect-ratio: 10 / 3;
  max-height: 380px;
  object-fit: cover;
  object-position: center 44%;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
@media (max-width: 720px) {
  .about-media { margin-bottom: var(--s-5); }
  .about-media img { aspect-ratio: 3 / 2; }
}

/* =============================================================
   NOSOTROS — Misión / Visión
   Declaraciones de la empresa: peso tipográfico, no tarjetería.
   ============================================================= */
.statements {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 860px) {
  .statements { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
}

.statement { position: relative; padding-left: var(--s-4); }

/* La barra del logo, vertical al margen: trazo de peso constante, cap redondo */
.statement::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 2px;
  background: var(--grad);
}

.statement-label {
  margin-bottom: var(--s-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet-ink);
}
.statement-text {
  font-size: clamp(1.24rem, 2.4vw, 1.72rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* =============================================================
   SERVICIOS
   Marco de trazo constante en dos capas: ::before es la línea,
   ::after el relleno con inset de 1px. Un border con clip-path
   dejaría la esquina del chaflán abierta.
   ============================================================= */
.section-services { background: var(--paper-2); padding-top: var(--s-6); }

.services { display: grid; gap: var(--s-3); }
@media (min-width: 720px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .services { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative;
  isolation: isolate;
  transition: transform 0.3s var(--ease);
}
.svc::before,
.svc::after {
  content: '';
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: background 0.3s var(--ease);
}
.svc::before { inset: 0;   background: var(--line-light); }
.svc::after  { inset: 1px; background: #FFFFFF; --chamfer: 27px; }

.svc:hover { transform: translate(3px, -3px); }       /* sobre la diagonal */
.svc:hover::before { background: var(--grad); }

.svc-media {
  position: relative;
  margin: 1px 1px 0;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 27px, 100% 100%, 0 100%);
}
.svc-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.svc:hover .svc-media img { transform: scale(1.05); }

/* El glifo pasa a sello sobre la foto: la imagen es protagonista,
   pero la firma sigue presente. */
.svc-seal {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: rgba(13, 2, 67, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.svc-seal .svc-glyph { width: 32px; height: 32px; margin: 0; color: var(--cyan); }
.svc:hover .svc-seal .svc-glyph { color: var(--cyan); }

.svc-body { position: relative; padding: var(--s-3) var(--s-4) var(--s-5); }

.svc-num {
  position: absolute;
  top: var(--s-2);
  right: var(--s-4);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(13, 2, 67, 0.6);   /* AA: 5.26:1 sobre blanco */
}

.svc-glyph {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3);
  color: var(--violet-ink);
  transition: color 0.3s var(--ease);
}
.svc:hover .svc-glyph { color: var(--cyan-ink); }

.svc-title {
  margin-bottom: var(--s-2);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.svc-text { margin-bottom: var(--s-3); color: var(--on-light-soft); font-size: 0.98rem; }

.svc-includes-label {
  margin-bottom: var(--s-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(13, 2, 67, 0.6);
}

.svc-list { display: grid; gap: 10px; }
.svc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--on-light-soft);
}
/* El viñetado es una barra del logo: 10px a 45°, cap redondo */
.svc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
  transform: rotate(-45deg);
  transform-origin: left center;
}

/* =============================================================
   VALORES
   Peso menor que servicios: sin marco, solo la barra y el texto.
   Sin numerar — los valores no son una secuencia.
   ============================================================= */
.valores { display: grid; gap: var(--s-5) var(--s-4); }
@media (min-width: 640px)  { .valores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .valores { grid-template-columns: repeat(3, 1fr); } }

.valor { position: relative; padding-top: var(--s-3); }
/* Barra corta a 45° sobre el nombre */
.valor::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
  transform: rotate(-45deg);
  transform-origin: left center;
}
.valor-name {
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--on-dark);
}
.valor-text { font-size: 0.98rem; color: var(--on-dark-soft); }

/* =============================================================
   BANDA — respiro antes del formulario
   ============================================================= */
.band {
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: var(--s-6) var(--s-3);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(13, 2, 67, 0.82), rgba(13, 2, 67, 0.72)),
    url('/assets/images/banda-contacto.jpg') center / cover no-repeat,
    var(--ink);
}
.band-text {
  max-width: 22ch;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.028em;
  color: var(--on-dark);
}

/* =============================================================
   CONTACTO
   ============================================================= */
.section-contact { background: var(--paper); color: var(--on-light); }

.contact-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 940px) {
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-7); }
}

.contact-data { margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); }
.contact-item { position: relative; padding-left: 22px; }
.contact-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 11px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
  transform: rotate(-45deg);
  transform-origin: left center;
}
.contact-item dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(13, 2, 67, 0.45);
}
.contact-item dd { margin: 2px 0 0; font-size: 1.02rem; color: var(--ink); }
.contact-item dd a { border-bottom: 1px solid rgba(123, 31, 176, 0.4); }
.contact-item dd a:hover { border-bottom-color: var(--violet); }

/* --- Formulario --- */
.form-card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
}
.form-card::before,
.form-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.form-card::before { inset: 0;   background: var(--grad); }
.form-card::after  { inset: 1px; background: #FFFFFF; --chamfer: 27px; }

.field { display: grid; gap: 7px; }
.field-row { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

.field label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(13, 2, 67, 0.55);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-light);
  transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px var(--violet);
}

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--on-light-soft);
}
.consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--violet); flex: none; }
.consent a { color: var(--violet-ink); border-bottom: 1px solid rgba(123, 31, 176, 0.4); }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  position: relative;
  background: var(--ink-deep);
  color: var(--on-dark);
  padding: calc(var(--s-6) + 56px) 0 var(--s-4);
}

.footer-grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr 1fr; gap: var(--s-4); } }

.footer-brand .brand { margin-bottom: var(--s-2); }
.footer-brand .brand-mark { width: 44px; height: 44px; }
.footer-tagline { max-width: 34ch; font-size: 0.95rem; color: var(--on-dark-faint); }

.footer-head {
  margin-bottom: var(--s-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col li, .footer-col a { font-size: 0.93rem; color: var(--on-dark-soft); }
.footer-col a { transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--cyan); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-dark);
  font-size: 0.85rem;
  color: var(--on-dark-faint);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer-legal a { transition: color 0.2s var(--ease); }
.footer-legal a:hover { color: var(--cyan); }

/* =============================================================
   MODAL — aviso simplificado
   ============================================================= */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.is-open { display: grid; place-items: center; padding: var(--s-3); }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8, 1, 43, 0.8); backdrop-filter: blur(4px); }
.modal-card {
  position: relative;
  width: min(620px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: var(--s-5) var(--s-4);
  background: #FFFFFF;
  color: var(--on-light);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.modal-close {
  position: absolute; top: 10px; right: 16px;
  width: 38px; height: 38px;
  font-size: 1.7rem; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  color: var(--on-light-soft);
}
.modal-title { margin-bottom: var(--s-3); font-size: 1.35rem; color: var(--ink); }
.modal-body { display: grid; gap: var(--s-2); font-size: 0.95rem; color: var(--on-light-soft); }
.modal-body a { color: var(--violet-ink); border-bottom: 1px solid rgba(123, 31, 176, 0.4); }
body.modal-open { overflow: hidden; }

/* =============================================================
   SUBPÁGINAS (aviso, gracias, error, 404)
   ============================================================= */
.site-header.subpage { position: sticky; background: rgba(13, 2, 67, 0.95); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-dark); }

.page-hero { padding: calc(var(--header-h) + var(--s-5)) 0 var(--s-5); background: var(--ink); }
.page-hero .page-title { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--on-dark); }

.legal { background: var(--paper); color: var(--on-light); padding: var(--s-6) 0 var(--s-7); }
.legal .wrap { max-width: 820px; }
.legal h2 { margin: var(--s-4) 0 var(--s-2); font-size: 1.3rem; color: var(--ink); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--on-light-soft); margin-bottom: var(--s-2); }
.legal ul { display: grid; gap: 9px; margin-bottom: var(--s-3); }
.legal ul li { position: relative; padding-left: 22px; }
.legal ul li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 11px; height: 3px; border-radius: 2px;
  background: var(--grad); transform: rotate(-45deg); transform-origin: left center;
}
.legal a { color: var(--violet-ink); border-bottom: 1px solid rgba(123, 31, 176, 0.4); }

/* Estado (gracias / error / 404) */
.state {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--s-6) 0;
  text-align: center;
  background:
    radial-gradient(70% 55% at 76% 18%, rgba(171, 41, 244, 0.26), transparent 62%),
    radial-gradient(60% 50% at 14% 88%, rgba(112, 235, 250, 0.14), transparent 66%),
    var(--ink);
}
.state-inner { display: grid; justify-items: center; gap: var(--s-3); max-width: 560px; }
.state-mark { width: 84px; height: 84px; }
.state-title { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--on-dark); }
.state-text { color: var(--on-dark-soft); }
.state-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-2); }

/* =============================================================
   MOVIMIENTO — tres gestos, nada más
   ============================================================= */
.fade-in {
  opacity: 0;
  transform: translate(-8px, 14px);   /* entra sobre la diagonal */
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* Las barras del hero se dibujan solas al cargar */
.hero .mark-bars path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw-bar 0.7s var(--ease) forwards;
}
.hero .mark-bars path:nth-child(2) { animation-delay: 0.12s; }
.hero .mark-bars path:nth-child(3) { animation-delay: 0.24s; }
@keyframes draw-bar { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .hero .mark-bars path { stroke-dashoffset: 0; }
  .hero-video { display: none; }   /* queda el poster */
}

/* =============================================================
   MÓVIL — menú a pantalla completa
   ============================================================= */
@media (max-width: 960px) {
  .wrap { width: calc(100% - 32px); }

  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: grid;
    align-content: start;
    gap: 0;
    padding: 0 24px 40px;
    background:
      radial-gradient(80% 50% at 88% 6%, rgba(171, 41, 244, 0.34), transparent 64%),
      radial-gradient(70% 45% at 6% 96%, rgba(112, 235, 250, 0.18), transparent 66%),
      var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-brand {
    display: inline-flex;
    height: var(--header-h);
    align-items: center;
  }

  .nav-list {
    display: grid;
    gap: 0;
    margin-top: var(--s-4);
  }
  .nav-list li { border-top: 1px solid var(--line-dark); }
  .nav-list li:last-child { border-bottom: 1px solid var(--line-dark); }
  .nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--on-dark);
  }
  .nav-list a::after {
    position: static;
    transform: rotate(-45deg) scaleX(1);
    width: 20px;
    height: 3px;
    opacity: 0.85;
  }
  .nav.is-open .nav-list li { opacity: 0; animation: nav-in 0.4s var(--ease) forwards; }
  .nav.is-open .nav-list li:nth-child(1) { animation-delay: 0.08s; }
  .nav.is-open .nav-list li:nth-child(2) { animation-delay: 0.14s; }
  .nav.is-open .nav-list li:nth-child(3) { animation-delay: 0.20s; }
  @keyframes nav-in { to { opacity: 1; } }

  .nav-cta { margin-top: var(--s-4); width: 100%; }

  .nav-tagline {
    display: block;
    margin-top: var(--s-4);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--on-dark-faint);
  }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 720px) {
  :root { --s-6: 72px; --s-7: 88px; --chamfer: 22px; }
  body { font-size: 16px; }

  .hero { min-height: auto; padding: calc(var(--header-h) + var(--s-5)) 0 var(--s-6); }

  .svc-body { padding: var(--s-4) var(--s-3) var(--s-4); }
  .svc::after { --chamfer: 21px; }

  .form-card { padding: var(--s-4) var(--s-3); }
  .form-card::after { --chamfer: 21px; }

  .rule-bars { height: 44px; }
  .section-dark { padding-top: calc(var(--s-7) + 44px); }
  .site-footer { padding-top: calc(var(--s-6) + 44px); }

  .modal-card { padding: var(--s-4) var(--s-3); }
}

@media (max-width: 380px) {
  .brand-name { font-size: 1rem; }
  .btn { padding: 14px 22px; font-size: 0.9rem; }
}