/* =====================================================================
   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);
}

/* ---------------------------------------------------------------------
   COMPLEMENTO DE WHATSAPP — franja horizontal bajo las tres tarjetas.
   Usa el verde de WhatsApp y NO la paleta de marca, a propósito: el color
   es lo que hace que se reconozca de un vistazo qué se está ofreciendo.
   Se mantiene en tonos muy claros para que acompañe a los planes sin
   competir con la tarjeta destacada.
   --------------------------------------------------------------------- */
.addon-band {
  --wa-green: #25D366;   /* verde de marca de WhatsApp */
  --wa-ink:   #0A5C41;   /* verde oscuro, legible sobre el fondo claro (AA) */
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.75rem;
  padding: 1.65rem 1.9rem;
  background: #EDFAF2;
  border: 1px solid #BCE6CC;
  border-radius: var(--radius);
}
.addon-band__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--wa-green);
  box-shadow: 0 10px 22px -12px rgba(37,211,102,0.95);
}
.addon-band__icon svg { width: 31px; height: 31px; fill: var(--white); }
.addon-band__title { margin: 0 0 0.3rem; font-size: 1.15rem; color: var(--wa-ink); }
.addon-band__text  { margin: 0; font-size: 0.94rem; color: var(--muted); max-width: 62ch; }
.addon-band__aside {
  display: grid; gap: 0.65rem; justify-items: end; text-align: right;
}
.addon-band__price { margin: 0; line-height: 1.2; white-space: nowrap; }
.addon-band__price strong {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.7rem; color: var(--wa-ink); letter-spacing: -0.02em;
}
.addon-band__unit { display: block; font-size: 0.8rem; color: var(--muted); }
.btn--whatsapp { background: var(--wa-green, #25D366); color: #05341F; border-color: transparent; }
.btn--whatsapp:hover { background: #1FBC5B; color: #05341F; }

/* 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; }
  /* La franja del complemento acompaña el ancho de las tarjetas apiladas */
  .addon-band {
    grid-template-columns: 1fr;
    max-width: 460px; margin-inline: auto;
    gap: 1.1rem; text-align: left;
  }
  .addon-band__aside { justify-items: start; text-align: left; }
  .addon-band__aside .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   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; } }

/* ---------- Logos de marcas de tarjeta ----------
   Los archivos oficiales que entrega Azul son JPEG sobre fondo blanco (no llevan
   transparencia), y el pie del sitio es azul oscuro: por eso van sobre una ficha blanca,
   que ademas es como los muestran los comercios y se lee como intencional.

   El logo de Visa viene en 3840x2160 con mucho aire arriba y abajo; a una altura fija la
   palabra quedaria diminuta. Se recorta ese aire con object-fit:cover y una caja de
   proporcion parecida a la del propio texto. Se selecciona por el final del src para que
   valga igual desde la raiz que desde /blog/ (donde el src lleva "../" delante). */
.pay-logos {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 1rem 0;
}
.pay-logos img {
  display: block; background: #fff; border-radius: 6px;
  padding: 5px 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.pay-logos img[src$="visa.jpg"]                { width: 68px; height: 24px; object-fit: cover; }
.pay-logos img[src$="mastercard.jpg"]          { width: 42px; height: 34px; object-fit: contain; }
.pay-logos img[src$="visa-secure.png"]         { width: 34px; height: 34px; object-fit: contain; }
.pay-logos img[src$="mastercard-id-check.png"] { width: 34px; height: 34px; object-fit: contain; }

/* Version reducida para el pie */
.pay-logos--sm { gap: 0.45rem; margin: 0; }
.pay-logos--sm img { padding: 4px 6px; border-radius: 5px; }
.pay-logos--sm img[src$="visa.jpg"]                { width: 54px; height: 19px; }
.pay-logos--sm img[src$="mastercard.jpg"]          { width: 33px; height: 27px; }
.pay-logos--sm img[src$="visa-secure.png"]         { width: 27px; height: 27px; }
.pay-logos--sm img[src$="mastercard-id-check.png"] { width: 27px; height: 27px; }

/* Los sellos de 3-D Secure, algo mayores en la pagina de seguridad */
.pay-logos--3ds img { width: 52px; height: 52px; object-fit: contain; padding: 6px; }

.footer-pay {
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2rem; padding-top: 1.25rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem;
}
.footer-pay__label {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
/* El pie ya trae su propia linea superior; con la de .footer-pay encima quedarian dos. */
.footer-pay + .footer-bottom { border-top: 0; margin-top: 1.25rem; }

@media (max-width: 640px) {
  .footer-pay { gap: 0.5rem; }
  .footer-pay__label { width: 100%; }
}