/* =====================================================================
   Premier Outsourcing Solutions — hoja de estilos del sitio institucional
   Paleta tomada del logo: azul marino profundo + dorado.
   Sin frameworks. Móvil primero.
   ===================================================================== */

:root {
  /* Marca — valores canónicos del brandbook v1.2 / tokens.css (§4.1).
     navy-900/800 comparten el navy-950 oficial (#0A1628, "fondo del logo");
     navy-700/600 toman los pasos 800/700 de la escala oficial para dar
     jerarquía a links y estados hover sin salirse de la paleta de marca. */
  --navy-900: #0A1628;   /* navy-950 oficial */
  --navy-800: #0A1628;   /* navy-950 oficial · fondo del logo */
  --navy-700: #142D52;   /* navy-800 de la escala oficial */
  --navy-600: #1D3F72;   /* navy-700 de la escala oficial */
  --gold:      #C9A84C;  /* gold-500 oficial */
  --gold-light:#D5BB72;  /* gold-400 oficial */
  --gold-dark: #766023;  /* gold-800 oficial · único tono dorado con AA sobre blanco (6.06:1) */

  /* Neutros */
  --cream:  #FAF7EF;   /* gold-50 oficial */
  --white:  #ffffff;
  --ink:    #0A1628;   /* navy-950 oficial · texto sobre claro */
  --muted:  #555F6D;   /* neutral-600 oficial */
  --line:   #C6CBD2;   /* neutral-300 oficial */

  /* Sistema */
  --maxw: 1140px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 20px 48px -22px rgba(10,22,40,0.16);
  --shadow-sm: 0 4px 16px -10px rgba(10,22,40,0.08);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.15; color: var(--navy-800); font-weight: 700; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 600; }
h3 { letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

a { color: var(--navy-700); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-dark); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
}

.section { padding: clamp(3rem, 8vw, 6rem) 0; }
.section--tint { background: var(--cream); }
.section__head { max-width: 680px; margin-bottom: 2.5rem; }
.section__head.center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-light); color: var(--navy-900); }
.btn--outline { border-color: currentColor; color: var(--navy-800); }
.btn--outline:hover { background: var(--navy-800); color: var(--white); }
.btn--ghost-light { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn--ghost-light:hover { background: var(--white); color: var(--navy-900); }
.btn--navy { background: var(--navy-800); color: var(--gold-light); }
.btn--navy:hover { background: var(--navy-700); color: var(--gold-light); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,22,40,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
/* Header: solo el diamante del logo original (recorte de los pixeles originales) */
.brand__mark { height: 40px; width: auto; }
/* Footer: el logo original completo (lockup con el wordmark) */
.footer-logo { height: 88px; width: auto; display: block; margin-bottom: 0.75rem; }
.brand__name { color: var(--white); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; }
.brand__name span { color: var(--gold); }

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a {
  color: rgba(255,255,255,0.82);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.98rem;
}
.nav a:hover, .nav a.active { color: var(--white); background: rgba(255,255,255,0.08); }
.nav .btn { margin-left: 0.5rem; padding: 0.6rem 1.2rem; font-size: 0.95rem; }

/* Dropdown de "Soluciones": NexusFact / NexusCont al pasar el cursor */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 0.25rem; min-width: 190px;
  background: var(--navy-800); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); padding: 0.4rem; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}
.nav-dropdown a { display: block; padding: 0.55rem 0.75rem; font-size: 0.92rem; }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: none; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: var(--white); margin: 5px 0; transition: var(--transition); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(201,168,76,0.12), transparent 60%),
    var(--navy-900);
  color: var(--white);
  padding: clamp(3.5rem, 9vw, 7rem) 0;
}
.hero h1 { color: var(--white); }
.hero h1 span { color: var(--gold); }
.hero .lead { color: rgba(255,255,255,0.82); max-width: 620px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }
.hero__note { margin-top: 1.5rem; font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.hero__note strong { color: var(--gold-light); }

/* ---------- Grid de tarjetas ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.card__icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--cream);
  color: var(--navy-800); margin-bottom: 1rem;
}
.card__icon svg { width: 22px; height: 22px; }

/* Bento: la primera tarjeta ocupa el doble de ancho en pantallas grandes */
.grid--bento > *:first-child { grid-column: span 2; }
@media (max-width: 860px) { .grid--bento > *:first-child { grid-column: span 1; } }
.card h3 { margin: 0 0 0.5rem; }
.card p { color: var(--muted); margin: 0; }
.card ul { color: var(--muted); margin: 0.75rem 0 0; padding-left: 1.1rem; }
.card ul li { margin-bottom: 0.35rem; }

/* Badge próximamente / disponible */
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 999px; margin-left: 0.5rem; vertical-align: middle;
}
.badge--ok { background: rgba(41,138,71,0.14); color: #1c7a3f; }
.badge--soon { background: rgba(201,168,76,0.16); color: var(--gold-dark); }

/* ---------- CTA banda ---------- */
.cta-band {
  background: var(--navy-800);
  color: var(--white); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.25rem); text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.8); max-width: 560px; margin-inline: auto; }
.cta-band .hero__actions { justify-content: center; }

/* ---------- Split (software / servicios detalle) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; }
.split--reverse .split__media { order: -1; }
.feature-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.feature-list li { position: relative; padding-left: 1.9rem; margin-bottom: 0.85rem; color: var(--ink); }
.feature-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--gold); color: var(--navy-900);
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
}
.mock {
  background: var(--navy-800);
  border-radius: var(--radius); padding: 2rem; color: #fff;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,0.08);
}
.mock__row { display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.95rem; }
.mock__row:last-child { border-bottom: 0; }
.mock__row span:last-child { color: var(--gold-light); font-weight: 700; }

/* ---------- Formulario ---------- */
.form { display: grid; gap: 1.1rem; max-width: 640px; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field input, .field select, .field textarea {
  font: inherit; padding: 0.8rem 0.9rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.2);
}
.field textarea { resize: vertical; min-height: 120px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.checkbox {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; color: var(--muted); cursor: pointer; line-height: 1.5;
}
.checkbox input {
  margin-top: 0.2rem; width: 17px; height: 17px; flex: none; accent-color: var(--gold-dark);
}
.form__note { font-size: 0.85rem; color: var(--muted); }
.form__ok {
  display: none; padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  background: rgba(41,138,71,0.12); color: #1c7a3f; font-weight: 600;
}

/* Bloque de contacto lateral */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: start; }
.contact-aside { background: var(--cream); border-radius: var(--radius); padding: 1.75rem; }
.contact-aside dt { font-weight: 700; color: var(--navy-800); margin-top: 1rem; }
.contact-aside dd { margin: 0.15rem 0 0; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.72); padding: 3rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: var(--white); font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 1rem; }
.site-footer a { color: rgba(255,255,255,0.72); display: block; padding: 0.25rem 0; }
.site-footer a:hover { color: var(--gold-light); }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.footer-brand .brand__name { font-size: 1.1rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2rem; padding-top: 1.25rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.85rem; color: rgba(255,255,255,0.5);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch;
    background: var(--navy-800); padding: 1rem 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.85rem; }
  .nav .btn { margin: 0.5rem 0 0; justify-content: center; }
  .nav-toggle { display: block; }
  /* En móvil el dropdown va siempre visible, indentado bajo "Soluciones" */
  .nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 0 1rem; margin: 0;
  }
  .nav-dropdown a { padding: 0.6rem 0.85rem; font-size: 0.92rem; color: rgba(255,255,255,0.72); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Entrada suave al hacer scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.grid .reveal:nth-child(2) { transition-delay: 80ms; }
.grid .reveal:nth-child(3) { transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Cuenta regresiva: fecha límite e-CF (DGII) ---------- */
.deadline-popup {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1.25rem;
}
.deadline-popup[hidden] { display: none; }
.deadline-popup__scrim { position: absolute; inset: 0; background: rgba(10,22,40,0.55); }
.deadline-popup__card {
  position: relative; width: 100%; max-width: 480px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 60px -24px rgba(10,22,40,0.28);
  text-align: center;
}
.deadline-popup__card h2 { margin: 0 0 0.6rem; }
.deadline-popup__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  width: 32px; height: 32px; border-radius: 8px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; transition: background var(--transition);
}
.deadline-popup__close:hover { background: var(--cream); color: var(--ink); }

.deadline-count { display: flex; justify-content: center; gap: 0.75rem; margin: 1.5rem 0; }
.deadline-count__unit {
  min-width: 72px; padding: 0.75rem 0.5rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--cream);
}
.deadline-count__unit span {
  display: block; font-family: var(--font-mono); font-size: 1.9rem;
  font-weight: 700; color: var(--navy-800); line-height: 1;
}
.deadline-count__unit small {
  display: block; margin-top: 0.35rem; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.deadline-popup .hero__actions { justify-content: center; margin-top: 0.5rem; }
.deadline-fineprint { margin: 1.25rem 0 0; font-size: 0.78rem; color: var(--muted); }

/* Widget flotante — ahora grande (ya no es una píldora chiquita), visible en
   todas las páginas. Click abre el popup con el detalle y los CTA. */
.deadline-widget {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 150;
  width: min(300px, calc(100vw - 2rem));
  background: var(--navy-800); color: var(--white);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
  box-shadow: 0 16px 36px -16px rgba(10,22,40,0.5);
}
.deadline-widget[hidden] { display: none; }
.deadline-widget__main {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: 0.9rem 2.25rem 1rem 1rem; font: inherit;
}
.deadline-widget__label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.88);
  margin-bottom: 0.6rem;
}
.deadline-widget__label svg { color: var(--gold-light); flex: none; }
.deadline-widget__count { display: flex; gap: 0.6rem; }
.deadline-widget__count .dlw { display: flex; flex-direction: column; align-items: center; min-width: 2.6ch; }
.deadline-widget__count .dlw strong {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.2rem; font-weight: 700; color: var(--gold-light); line-height: 1;
}
.deadline-widget__count .dlw small {
  font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-top: 0.25rem;
}
.deadline-widget__close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,0.08); border: 0;
  color: rgba(255,255,255,0.65); cursor: pointer;
}
.deadline-widget__close:hover { background: rgba(255,255,255,0.18); color: var(--white); }

@media (max-width: 480px) {
  .deadline-widget { left: 1rem; right: 1rem; width: auto; }
}

/* =====================================================================
   Medios reales: capturas del producto y animaciones
   ===================================================================== */
/* Captura/animación dentro de un panel split (reemplaza a .mock) */
.media-shot {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--navy-800);
}
.media-shot--video { aspect-ratio: 16 / 10; object-fit: cover; }

/* Animación destacada centrada (home "míralo funcionando") */
.media-showcase { max-width: 880px; margin-inline: auto; }
.media-showcase__video {
  width: 100%; height: auto; max-height: 560px; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--navy-800); object-fit: contain;
}

/* Par de "teléfonos" (animación + captura móvil) — ambos marcos comparten la
   misma proporción de pantalla real (9:19.5), así quedan del mismo tamaño
   sin importar la proporción nativa de cada video/imagen de origen. */
.phone-duo { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.phone-frame {
  width: 190px; aspect-ratio: 9 / 19.5; border-radius: 20px; overflow: hidden;
  border: 6px solid var(--navy-800); background: var(--navy-800); box-shadow: var(--shadow);
}
.phone-frame__media { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Galería de capturas. grid-auto-rows fijo (no "auto") para que el alto de
   cada fila sea determinista: así la captura móvil puede ocupar 2 filas
   (.shot--tall) sin que su proporción retrato fuerce el grid ni deje huecos
   en blanco debajo de las capturas de escritorio. */
.shot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 250px; gap: 1.25rem;
}
.shot { margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; }
.shot img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; display: block; }
.shot--tall { grid-row: span 2; }
.shot figcaption {
  flex: none; padding: 0.7rem 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--navy-800);
  border-top: 1px solid var(--line);
}

/* Video único ya editado (reemplaza al carrusel cuando el material viene
   editado en un solo clip en vez de varios clips crudos). Ancho mayor que
   el de un "phone-frame": estos son b-roll editado, no una maqueta de
   pantalla, así que se muestran a mayor tamaño dentro de su columna. */
.video-feature { max-width: 380px; margin-inline: auto; }
.video-feature--lg { max-width: 420px; }
.video-feature video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--navy-800);
}

/* =====================================================================
   Carrusel (colección de videos/imágenes) — un slide visible a la vez,
   auto-avance tipo "ráfaga", con flechas y puntos. Sin uso actualmente
   (los videos de asesoría/constitución ya vienen editados en un solo
   clip), se deja disponible por si una futura galería necesita mostrar
   varios clips crudos de a uno.
   ===================================================================== */
.carousel { position: relative; max-width: 300px; margin-inline: auto; }
.carousel--lg { max-width: 380px; }
.carousel__stage {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--radius); background: var(--navy-800);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.carousel__slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 550ms ease;
}
.carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.carousel__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10,22,40,0.55); color: #fff; display: grid; place-items: center;
  transition: background var(--transition);
}
.carousel__nav:hover { background: rgba(10,22,40,0.8); }
.carousel__nav--prev { left: 0.5rem; }
.carousel__nav--next { right: 0.5rem; }
.carousel__dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.75rem; }
.carousel__dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
  background: var(--line); cursor: pointer;
}
.carousel__dot.is-active { background: var(--gold); }
.carousel__hint { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }
.carousel__counter {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  background: rgba(10,22,40,0.6); color: #fff; font-size: 0.72rem;
  font-family: var(--font-mono); padding: 0.15rem 0.5rem; border-radius: 999px;
}

/* =====================================================================
   Blog — listado (.blog-list reutiliza .grid.grid--3/.card) y artículo.
   El artículo usa un ancho de lectura cómodo y estilos de prosa (tablas,
   listas, citas) que no existen en las 4 páginas de marketing.
   ===================================================================== */
.container--narrow { max-width: 760px; }

.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-dark); text-decoration: underline; }

.blog-post .post-meta { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 2rem; }
.blog-post h1 { margin: 0.4rem 0 0.6rem; }
.blog-post h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2.4rem 0 0.9rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.blog-post h3 { margin: 1.8rem 0 0.6rem; color: var(--navy-700); }
.blog-post p, .blog-post li { font-size: 1.05rem; }
.blog-post ul, .blog-post ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.blog-post li { margin-bottom: 0.4rem; }
.blog-post a { color: var(--gold-dark); }
.blog-post strong { color: var(--navy-800); }

/* Citas ("nota de contador") destacadas con barra dorada */
.blog-post blockquote {
  margin: 1.6rem 0; padding: 0.8rem 1.2rem;
  border-left: 4px solid var(--gold); background: var(--cream);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.blog-post blockquote p { margin: 0; }

/* Tablas de prosa: scroll horizontal en móvil sin romper el layout */
.blog-post .table-wrap { overflow-x: auto; margin: 1.4rem 0; }
.blog-post table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; }
.blog-post th, .blog-post td {
  text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.blog-post thead th {
  background: var(--navy-800); color: #fff; font-weight: 600;
  border-bottom: 0; white-space: nowrap;
}
.blog-post tbody tr:nth-child(even) { background: var(--cream); }

/* CTA interno del artículo (bloque de conversión reutilizable) */
.blog-post .post-cta {
  margin: 2rem 0; padding: 1.5rem; background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius);
}

/* =====================================================================
   Bundle — 5 tarjetas (formalización, facturación, contable, asesoría +
   integración al centro) sobre el diamante Premier como marca de agua que
   se ensambla al hacer scroll (5 piezas entran desde cada extremo) con un
   brillo en loop. Ver assembly en main.js (IntersectionObserver).
   ===================================================================== */
.bundle { padding: clamp(3rem,7vw,6rem) 1.25rem; background: radial-gradient(ellipse at center, var(--cream), #fff 72%); overflow: hidden; }
.bundle__head { max-width: 720px; margin: 0 auto clamp(1.5rem,4vw,3rem); text-align: center; }
.bundle__head h2 { font-size: clamp(1.6rem,3.6vw,2.4rem); margin: .2rem 0 .6rem; }
.bundle__head p { color: var(--muted); margin: 0; }

.bundle-stage { position: relative; max-width: 1060px; margin: 0 auto; }

/* Logo de fondo — marca de agua grande, de extremo a extremo, translúcida.
   5 piezas apiladas en el mismo lienzo 741x741. */
.bundle-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 100vw; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; }
.bundle-logo__box { position: relative; width: min(1400px,100vw); aspect-ratio: 1/1; }
.bundle-piece { position: absolute; inset: 0; width: 100%; height: auto; opacity: .30; will-change: transform,opacity; }
/* Brillo: un destello BLANCO sutil que recorre el logo. Se logra con dos
   capas de máscara combinadas (intersección): (1) la forma del diamante,
   (2) una banda diagonal que se desplaza. Así el blanco solo aparece dentro
   del diamante Y dentro de la banda móvil → un glint tenue, no un tinte. */
.bundle-shine { position: absolute; inset: 0;
  background: #fff;
  -webkit-mask-image: url(../img/logo-diamante-completo.png), linear-gradient(115deg, transparent 45%, #000 50%, transparent 55%);
          mask-image: url(../img/logo-diamante-completo.png), linear-gradient(115deg, transparent 45%, #000 50%, transparent 55%);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: contain, 240% 100%; mask-size: contain, 240% 100%;
  -webkit-mask-position: center, 150% 0; mask-position: center, 150% 0;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity: 0; z-index: 1; pointer-events: none; }

/* Con JS: estado inicial = en blanco, piezas fuera de la pantalla (cada extremo) */
.bundle--js .bundle-piece { opacity: 0; transition: transform 1.5s cubic-bezier(.22,.61,.36,1), opacity 1.2s ease; }
.bundle--js .bundle-piece--1 { transform: translate(-60vw,-42vh) scale(.9); }
.bundle--js .bundle-piece--2 { transform: translate(60vw,-42vh) scale(.9); }
.bundle--js .bundle-piece--3 { transform: translate(60vw,42vh) scale(.9); }
.bundle--js .bundle-piece--4 { transform: translate(-60vw,42vh) scale(.9); }
.bundle--js .bundle-piece--joya { transform: translate(0,55vh) scale(.82); }

/* Estado ensamblado: piezas adentro, como marca de agua translúcida */
.bundle-stage.is-assembled .bundle-piece { transform: translate(0,0) scale(1); opacity: .30; }
.bundle-stage.is-assembled .bundle-piece--1 { transition-delay: 0s; }
.bundle-stage.is-assembled .bundle-piece--2 { transition-delay: .22s; }
.bundle-stage.is-assembled .bundle-piece--3 { transition-delay: .44s; }
.bundle-stage.is-assembled .bundle-piece--4 { transition-delay: .66s; }
.bundle-stage.is-assembled .bundle-piece--joya { transition-delay: .95s; transition: transform 1.5s cubic-bezier(.34,1.32,.5,1), opacity 1s ease; }

.bundle-stage.is-shining .bundle-shine { opacity: .55; animation: bundleShine 18s ease-in-out infinite; }
@keyframes bundleShine {
  0%   { -webkit-mask-position: center, 150% 0; mask-position: center, 150% 0; }
  44%  { -webkit-mask-position: center, -80% 0; mask-position: center, -80% 0; }
  100% { -webkit-mask-position: center, -80% 0; mask-position: center, -80% 0; }
}

/* Rejilla de tarjetas: 4 esquinas + centro */
.bundle-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,minmax(0,330px));
  justify-content: space-between; row-gap: clamp(7rem,20vw,15rem); }
.bundle-card {
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(201,168,76,.75); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .28s ease, box-shadow .28s ease; }
.bundle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bundle-card h3 { font-size: 1.12rem; margin: 0 0 .8rem; }
.bundle-card ul { list-style: none; margin: 0; padding: 0; }
.bundle-card li { position: relative; padding-left: 1.2rem; margin-bottom: .5rem; font-size: .92rem; color: var(--ink); }
.bundle-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.bundle-card a { color: var(--gold-dark); font-weight: 600; text-decoration: none; }

/* Tarjeta central Integración — translúcida; la joya se ve a través.
   z-index:3 para quedar por ENCIMA de .bundle-cards (z:2); si no, esa capa
   intercepta los clics del botón aunque la tarjeta se vea. */
/* Misma fórmula que las 4 tarjetas de esquina (hereda fondo claro translúcido
   + blur + texto oscuro de .bundle-card) → misma solidez de texto exacta,
   y el fondo claro deja ver la joya detrás. Solo se centra y resalta con
   borde dorado sólido. */
.bundle-card--center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3; width: min(280px,72%); text-align: center; border-color: var(--gold); }
.bundle-card--center:hover { transform: translate(-50%, calc(-50% - 4px)); }
.bundle-card--center h3 { margin-bottom: .5rem; }
.bundle-card--center p { color: var(--ink); font-size: .9rem; margin: 0 0 1rem; }
/* Botón CTA a lo ancho de la tarjeta, texto que puede envolver (no nowrap) */
.bundle-card--center .btn { display: flex; width: 100%; justify-content: center;
  padding: .7rem 1rem; font-size: .92rem; white-space: normal; text-align: center;
  color: var(--gold-light); }  /* gana sobre .bundle-card a (gold-dark) */

@media (max-width:760px){
  .bundle-cards { grid-template-columns: 1fr; row-gap: 1rem; max-width: 420px; margin-inline: auto; }
  .bundle-logo__box { width: min(720px,150vw); }
  .bundle-card--center { position: relative; top: auto; left: auto; transform: none; width: 100%; }
  .bundle-card--center:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion:reduce){
  .bundle--js .bundle-piece { opacity: .30 !important; transform: none !important; transition: none; }
  .bundle-stage.is-shining .bundle-shine { animation: none; opacity: 0; }
}

/* =====================================================================
   PRECIOS — tarjetas de plan, comparativa y cobro
   ===================================================================== */
.pricing-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
}
.plan--featured {
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: var(--shadow-sm);
}
.plan__tag {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--navy-900);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; white-space: nowrap;
}
.plan__name { margin: 0 0 0.35rem; font-size: 1.35rem; }
.plan__summary { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.25rem; min-height: 2.8em; }
.plan__price { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; }
.plan__amount {
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 600; color: var(--navy-800);
  letter-spacing: -0.02em; line-height: 1;
}
.plan__period { color: var(--muted); font-size: 0.95rem; }
.plan__tax {
  margin: 0.4rem 0 1.5rem; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.plan__cta { width: 100%; justify-content: center; }
.plan__features { margin-top: 1.75rem; }
.plan__features li { font-size: 0.94rem; }

/* Nota del total anual, bajo el precio mensual descontado (solo en modo anual) */
.plan__annual-note {
  margin: 0.4rem 0 0;
  font-size: 0.9rem; font-weight: 600; color: var(--gold-dark);
}

/* Toggle de periodicidad mensual / anual */
.billing-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: 0.85rem; flex-wrap: wrap;
  margin: 0 auto 2.75rem;
}
.billing-toggle__opt {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 1rem; color: var(--muted);
  transition: color var(--transition);
}
.billing-toggle__opt.is-active { color: var(--navy-800); }
.billing-toggle__switch {
  position: relative; flex: none;
  width: 54px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.billing-toggle__switch[aria-checked="true"] {
  background: var(--gold); border-color: var(--gold);
}
.billing-toggle__switch:focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 2px;
}
.billing-toggle__knob {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy-800);
  transition: left var(--transition);
}
.billing-toggle__switch[aria-checked="true"] .billing-toggle__knob {
  left: calc(100% - 25px);
}
.billing-toggle__badge {
  background: var(--cream); color: var(--gold-dark);
  border: 1px solid var(--gold); border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

.pricing-note {
  margin: 2rem auto 0; max-width: 720px; text-align: center;
  font-size: 0.9rem; color: var(--muted); line-height: 1.7;
}

/* Caja "cómo funciona" de los servicios por propuesta */
.quote-box {
  background: var(--navy-800); color: var(--white);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 2rem;
}
.quote-box__title { color: var(--white); margin: 0 0 1.25rem; font-size: 1.1rem; }
.quote-box__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 1rem; }
.quote-box__steps li { color: rgba(255,255,255,0.78); font-size: 0.95rem; line-height: 1.6; }
.quote-box__steps strong { color: var(--white); display: block; }

/* Bloque de información de cobro */
.payment-info { display: grid; gap: 2rem; }
.payment-info__block h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.payment-info__block p { color: var(--muted); }
.payment-methods {
  list-style: none; margin: 0 0 0.75rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.payment-methods li {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); padding: 0.5rem 0.9rem;
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
}

/* Preguntas frecuentes (acordeón sin cajas, solo separadores) */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-weight: 600; color: var(--navy-800);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 400; color: var(--muted); line-height: 1;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__item summary:hover { color: var(--gold-dark); }
.faq__item p { margin: 0 0 1.25rem; color: var(--muted); }

/* Datos legales en el footer */
.footer-legal-info {
  margin-top: 1rem; font-size: 0.8rem; line-height: 1.7;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan__summary { min-height: 0; }
  .plan--featured { order: -1; }
}

/* =====================================================================
   DOCUMENTOS LEGALES (términos, privacidad, reembolsos)
   ===================================================================== */
.legal-doc { max-width: 760px; }
.legal-doc h2 {
  font-size: 1.4rem; margin: 2.5rem 0 0.85rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; }
.legal-doc h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }
.legal-doc p, .legal-doc li { color: var(--ink); line-height: 1.75; }
.legal-doc ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal-doc li { margin-bottom: 0.5rem; }
.legal-doc__meta {
  font-size: 0.9rem; color: var(--muted);
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 0.5rem;
}
.legal-doc__callout {
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: 1.15rem 1.35rem; margin: 1.5rem 0;
}
.legal-doc__callout p { margin: 0; font-size: 0.95rem; }
.legal-toc {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-bottom: 2.5rem;
}
.legal-toc h2 {
  border: 0; padding: 0; margin: 0 0 0.85rem;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  font-family: var(--font);
}
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: 0.4rem; font-size: 0.92rem; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }