/* ============================================================================
   SGI HOTELERO — Landing comercial
   Imagina Technologies S.A.C.

   Hoja de estilos única. CSS3 puro, sin frameworks, mobile first.

   ÍNDICE
   01. Variables de marca      06. Header y navegación
   02. Reset y base            07. Secciones
   03. Accesibilidad           08. Componentes
   04. Layout                  09. Footer
   05. Botones                 10. Flotantes y modal
                               11. Animaciones
   ============================================================================ */


/* ============================================================================
   01. VARIABLES DE MARCA
   >>> AQUÍ SE CAMBIAN LOS COLORES CORPORATIVOS <<<

   Los cinco colores solicitados están al inicio. Cuando tengas la paleta
   oficial de Imagina Technologies, reemplaza únicamente estos valores:
   el resto de la hoja se adapta automáticamente.
   ============================================================================ */
:root {

  /* --- Colores principales (editables) ---
     Paleta derivada del logotipo de Imagina Technologies.

     NOTA: el azul se tomó por muestreo del logotipo enviado (#4A6DB5).
     Si el manual de marca indica un valor exacto distinto, cámbialo aquí
     y toda la web se adapta sola. */
  --primary-color:    #263F70;  /* Azul Imagina oscuro: header, títulos, fondos oscuros */
  --secondary-color:  #4A6DB5;  /* Azul del logotipo: iconos, detalles */
  --accent-color:     #F2A93B;  /* Ámbar: llamadas a la acción destacadas */
  --text-color:       #2B3440;  /* Texto principal (gris del logotipo, más oscuro) */
  --background-color: #FFFFFF;  /* Fondo general */

  /* --- Derivados (normalmente no hace falta tocarlos) --- */
  --primary-dark:     #1A2C50;
  --primary-soft:     #EAEFF8;
  --secondary-dark:   #35528C;  /* Versión oscura para enlaces: cumple contraste AA */
  --secondary-light:  #9DB4E4;  /* Versión clara para fondos oscuros */
  --accent-dark:      #D98D18;
  --text-muted:       #5A6879;
  --text-invert:      #FFFFFF;
  --surface:          #FFFFFF;
  --surface-muted:    #F5F7FC;
  --border:           #E1E7F2;
  --border-strong:    #C4CFE3;
  --success:          #157F4D;
  --whatsapp:         #25D366;
  --whatsapp-dark:    #1DA851;

  /* --- Tipografía --- */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: se adapta al ancho sin media queries */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --fs-lg:   clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.6vw + 1.1rem, 2rem);
  --fs-2xl:  clamp(1.875rem, 2.6vw + 1.1rem, 2.75rem);
  --fs-3xl:  clamp(2.125rem, 4vw + 1rem, 3.5rem);

  /* --- Espaciado --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* --- Formas y sombras --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(38, 63, 112, .07), 0 2px 8px rgba(38, 63, 112, .06);
  --shadow:    0 4px 14px rgba(38, 63, 112, .09), 0 12px 32px rgba(38, 63, 112, .08);
  --shadow-lg: 0 12px 28px rgba(38, 63, 112, .13), 0 28px 60px rgba(38, 63, 112, .13);

  --container: 1180px;
  --transition: 200ms ease;
}


/* ============================================================================
   02. RESET Y BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa el header fijo al navegar por anclas */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text-color);
  background: var(--background-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  color: var(--primary-color);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--secondary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

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

strong { font-weight: 700; color: inherit; }
s { color: inherit; opacity: .75; }

button { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }


/* ============================================================================
   03. ACCESIBILIDAD
   ============================================================================ */

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido para navegación por teclado */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--primary-color);
  color: var(--text-invert);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); }

/* Foco visible y consistente en toda la página */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================================
   04. LAYOUT
   ============================================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--muted { background: var(--surface-muted); }

.section--dark {
  background:
    radial-gradient(90rem 40rem at 15% -10%, rgba(74,109,181,.34), transparent 60%),
    linear-gradient(160deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: #DEE6F5;
}
.section--dark h2,
.section--dark h3 { color: var(--text-invert); }
.section--dark .section__lead { color: #B6C4E0; }

.section__head {
  max-width: 780px;
  margin: 0 auto var(--space-7);
  text-align: center;
}
.section__title { font-size: var(--fs-2xl); }
.section__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin: 0;
}
.section__actions {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--secondary-dark);
}
.eyebrow--light { color: var(--secondary-light); }


/* ============================================================================
   05. BOTONES
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
.btn__ico { flex: none; }

.btn--primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-invert);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); }

.btn--accent {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--primary-color);
}
.btn--outline:hover {
  border-color: var(--primary-color);
  background: var(--primary-soft);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--primary-color);
}
.btn--ghost:hover { border-color: var(--primary-color); }

.btn--wa {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #06301A;
  box-shadow: var(--shadow);
}
.btn--wa:hover { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); }


/* ============================================================================
   06. HEADER Y NAVEGACIÓN
   ============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; }
/* El logotipo lleva la banda "TECHNOLOGIES" debajo, así que necesita bastante
   más alto que un logotipo horizontal para que esa palabra se lea. */
.brand__logo { width: auto; height: 46px; }

/* Texto de reemplazo si aún no existe assets/img/logo-imagina.png */
.brand-fallback {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--primary-color);
  white-space: nowrap;
}
.brand-fallback span { color: var(--secondary-color); }

/* --- Menú hamburguesa --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__box {
  display: block;
  width: 22px; height: 16px;
  position: relative;
}
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* --- Panel de navegación (móvil) --- */
.nav {
  position: fixed;
  inset: 68px 0 auto 0;
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
}
.nav.is-open { display: flex; }

.nav__list { display: flex; flex-direction: column; gap: var(--space-1); }
.nav__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--primary-color);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.nav__link:hover { background: var(--primary-soft); text-decoration: none; }
.nav__link.is-active { color: var(--secondary-dark); }

.nav__cta { width: 100%; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(26, 44, 80, .48);
}


/* ============================================================================
   07. SECCIONES
   ============================================================================ */

/* --- HERO --- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(60rem 34rem at 85% -20%, rgba(74,109,181,.16), transparent 65%),
    linear-gradient(180deg, var(--surface-muted) 0%, var(--background-color) 100%);
  overflow: hidden;
}
.hero__inner { display: grid; gap: var(--space-7); }

.hero__title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}
.hero__subtitle {
  font-size: var(--fs-md);
  color: var(--text-color);
  margin-bottom: var(--space-3);
}
.hero__text {
  font-size: var(--fs-base);
  color: var(--text-muted);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.trust-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
}
.trust-list__item::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--success);
  /* Check dibujado con máscara: sin peticiones extra ni iconos duplicados */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat,
          linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat,
               linear-gradient(#000 0 0);
          mask-composite: exclude;
}

.hero__media { position: relative; }
.hero__img,
.split__img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

/* --- Marco de reemplazo cuando una imagen todavía no existe --- */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 16 / 10;
  width: 100%;
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  background:
    repeating-linear-gradient(135deg, var(--surface-muted) 0 12px, #EDF1FA 12px 24px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.img-placeholder__label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--primary-color);
}
.img-placeholder__hint { font-size: var(--fs-xs); }

/* --- Cards de problemas --- */
.cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.card {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--space-4);
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--secondary-dark);
}
.card__icon--warn { background: #FBF0DC; color: #B4720B; }
.card__title { font-size: var(--fs-base); margin-bottom: var(--space-2); }
.card__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- Bloques de funcionalidades --- */
.features {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.feature {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.feature:hover {
  border-color: var(--secondary-color);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-3);
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--secondary-dark);
}
.feature__title { font-size: var(--fs-base); margin-bottom: var(--space-2); }
.feature__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- Flujo operativo --- */
.flow {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  counter-reset: paso;
}
.flow__step {
  position: relative;
  padding: var(--space-5);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
}
/* Conector visual entre pasos */
.flow__step::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-4) * -1);
  width: 2px; height: var(--space-4);
  background: linear-gradient(180deg, rgba(157,180,228,.75), rgba(157,180,228,.12));
}
.flow__step:last-child::after { display: none; }

.flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.flow__title { font-size: var(--fs-base); margin-bottom: var(--space-1); }
.flow__text { font-size: var(--fs-sm); color: #B6C4E0; margin: 0; }

.flow__note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: #9FB0D0;
}

/* --- Galería de pantallas --- */
.gallery {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.gallery__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--surface-muted);
  cursor: zoom-in;
}
.gallery__btn img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.gallery__btn .img-placeholder { border: 0; border-radius: 0; }

/* Capturas verticales (vista de celular): se muestran completas, no recortadas */
.gallery__btn--vertical {
  background:
    linear-gradient(180deg, var(--primary-soft), var(--surface-muted));
}
.gallery__btn--vertical img {
  object-fit: contain;
  object-position: center;
  padding: var(--space-3) 0;
}

.gallery__zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(38, 63, 112, .90);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery__btn:hover .gallery__zoom,
.gallery__btn:focus-visible .gallery__zoom { opacity: 1; }

.gallery__caption { padding: var(--space-4) var(--space-5) var(--space-5); }
.gallery__title { font-size: var(--fs-base); margin-bottom: var(--space-1); }
.gallery__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- Bloque partido: texto + imagen --- */
.split { display: grid; gap: var(--space-7); align-items: center; }
.split__copy .section__title { margin-bottom: var(--space-4); }
.split__copy .section__lead { margin-bottom: var(--space-5); }

.checklist {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.checklist--two { margin-bottom: 0; }
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.checklist__item::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  -webkit-mask: none;
}
.checklist__item {
  position: relative;
}
.checklist__item::after {
  content: "";
  position: absolute;
  left: 5px; top: 9px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--secondary-dark);
  border-bottom: 2px solid var(--secondary-dark);
  transform: rotate(-45deg);
}

/* --- Dashboard ilustrativo --- */
.dashboard {
  max-width: 980px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dashboard__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--primary-color);
}
.dashboard__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.dashboard__label {
  margin-left: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #C6D2EA;
}
.dashboard__group {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--secondary-dark);
}
.dashboard__grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
/* Los contadores de "El hotel ahora" no llevan texto de apoyo: caben más por fila */
.dashboard__grid--compacta .kpi__value { font-size: var(--fs-lg); }
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  background: var(--surface);
}
.kpi__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.kpi__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.1;
}
.kpi__hint { font-size: var(--fs-xs); color: var(--text-muted); }

.dashboard__foot {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* --- Pasos de implementación --- */
.steps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.step {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--secondary-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--text-invert);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.step__title { font-size: var(--fs-base); margin-bottom: var(--space-2); }
.step__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- Planes --- */
.plans {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border: 2px solid var(--primary-color);
  box-shadow: var(--shadow-lg);
}
.plan__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--primary-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan__head { margin-bottom: var(--space-4); }
.plan__name { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.plan__for { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; min-height: 3em; }

.plan__pricing {
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.plan__list { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 var(--space-1); }
.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--space-2);
  color: var(--primary-color);
}
.plan__from { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.plan__cur { font-size: var(--fs-lg); font-weight: 700; }
.plan__amount { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.plan__period { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }
.plan__terms { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }

.plan__features {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex: 1 1 auto;
}
.plan__features li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-sm);
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

/* --- Onboarding --- */
.onboarding {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--primary-color), var(--primary-dark));
  color: #DEE6F5;
}
.onboarding__title { color: var(--text-invert); font-size: var(--fs-lg); }
.onboarding__price { font-size: var(--fs-md); margin-bottom: var(--space-4); }
.onboarding__price strong { color: var(--text-invert); }
.onboarding__highlight {
  display: inline-block;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--accent-color);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.onboarding__subtitle {
  margin-bottom: var(--space-3);
  font-weight: 700;
  color: var(--text-invert);
  font-size: var(--fs-sm);
}
.onboarding .checklist__item::before {
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.onboarding .checklist__item::after {
  border-color: var(--accent-color);
}

/* --- Tabla comparativa --- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.compare { min-width: 720px; font-size: var(--fs-sm); }
.compare th, .compare td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.compare thead th {
  position: sticky;
  top: 0;
  background: var(--primary-color);
  color: var(--text-invert);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  vertical-align: bottom;
}
.compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  box-shadow: 1px 0 0 var(--border);
}
.compare tbody tr:nth-child(even) th,
.compare tbody tr:nth-child(even) td { background: var(--surface-muted); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

.compare__feature-head { text-align: left !important; }
.compare__recommended { background: rgba(74, 109, 181, .08); }
.compare thead .compare__recommended { background: var(--secondary-dark); }
.compare__tag {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-color);
}

/* Marca visual de sí / no, manteniendo el texto para lectores de pantalla */
.compare td[data-yes] { color: var(--success); font-weight: 700; }
.compare td[data-no]  { color: var(--text-muted); }

.table-note {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

/* --- Caso de éxito (pendiente) --- */
.caso-pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.caso-pendiente__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--secondary-dark);
}
.caso-pendiente__text {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--primary-color);
  max-width: 34ch;
}

/* Estilos listos para el caso de éxito real (plantilla comentada en el HTML) */
.caso {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.caso__media img { border-radius: var(--radius); width: 100%; }
.caso__logo { height: 40px; width: auto; margin-bottom: var(--space-4); }
.caso__quote { margin: 0 0 var(--space-4); font-size: var(--fs-md); color: var(--primary-color); }
.caso__author { font-size: var(--fs-sm); color: var(--text-muted); }
.caso__results { display: grid; gap: var(--space-2); font-size: var(--fs-sm); }

/* --- Soporte --- */
.support {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.support__item {
  padding: var(--space-5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
}
.support__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-3);
  border-radius: 11px;
  background: rgba(157,180,228,.18);
  color: #B3C5E9;
}
.support__title { font-size: var(--fs-base); margin-bottom: var(--space-2); }
.support__text { font-size: var(--fs-sm); color: #B6C4E0; margin: 0; }

/* --- FAQ --- */
.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.faq__item + .faq__item { border-top: 1px solid var(--border); }
.faq__q { margin: 0; font-size: inherit; }
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  transition: background-color var(--transition);
}
.faq__btn:hover { background: var(--surface-muted); }
.faq__chevron {
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--secondary-dark);
  border-bottom: 2px solid var(--secondary-dark);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--transition);
}
.faq__btn[aria-expanded="true"] .faq__chevron {
  transform: rotate(225deg) translate(-3px, -3px);
}
.faq__a { padding: 0 var(--space-5) var(--space-5); }
.faq__a p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- CTA final --- */
.cta-final {
  padding-block: var(--section-y);
  background:
    radial-gradient(70rem 34rem at 50% 0%, rgba(74,109,181,.36), transparent 62%),
    linear-gradient(160deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: #DEE6F5;
}
.cta-final__inner { text-align: center; }
.cta-final__title { font-size: var(--fs-2xl); color: var(--text-invert); }
.cta-final__text { font-size: var(--fs-md); color: #B6C4E0; }
.cta-final__actions {
  display: flex;
  justify-content: center;
  margin-block: var(--space-6) var(--space-4);
}
.cta-final__hint { font-size: var(--fs-sm); color: #9FB0D0; }

/* --- Formulario --- */
.form-card {
  max-width: 720px;
  margin: var(--space-7) auto 0;
  padding: var(--space-6);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
  color: var(--text-color);
}
.form-card__intro {
  margin-bottom: var(--space-5);
  font-weight: 600;
  color: var(--primary-color);
  text-align: center;
}
.form__row { display: grid; gap: var(--space-4); }
.form__group { margin-bottom: var(--space-4); }
.form__row .form__group { margin-bottom: 0; }
.form__row { margin-bottom: var(--space-4); }

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-color);
}
.form__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-color);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__input:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(74,109,181,.22);
  outline: none;
}
.form__input--area { resize: vertical; min-height: 90px; }
.form__input[aria-invalid="true"] { border-color: #C0392B; }

.form__group--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}
.form__check { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--secondary-color); }
.form__label--check {
  margin: 0;
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.form__group--check .form__error { grid-column: 1 / -1; }

.form__error {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #C0392B;
}
.form__status {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}
.form__status.is-ok  { color: var(--success); }
.form__status.is-err { color: #C0392B; }

/* Honeypot: invisible para personas, accesible para bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* --- Páginas legales y de agradecimiento --- */
.legal { font-size: var(--fs-sm); }
.legal h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.legal h2 {
  font-size: var(--fs-lg);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.legal h3 { font-size: var(--fs-base); margin-top: var(--space-5); }
.legal p, .legal li { color: var(--text-muted); }
.legal ul { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.legal ul li { position: relative; padding-left: 20px; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--secondary-color);
}
.legal__update {
  display: inline-block;
  margin-bottom: var(--space-6);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.legal__back { margin-top: var(--space-7); }

.gracias {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 70dvh;
  padding-block: var(--section-y);
  text-align: center;
}
.gracias__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--success);
}


/* ============================================================================
   09. FOOTER
   ============================================================================ */
.site-footer {
  padding-top: var(--space-8);
  background: var(--primary-dark);
  color: #A9B6D0;
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
/* El logotipo tiene texto gris oscuro, que sobre el pie oscuro no se leería.
   Por eso va sobre una tarjeta blanca. Si algún día tienes una versión del
   logotipo en negativo (texto blanco), guárdala como logo-imagina-blanco.png,
   cámbiala en el HTML del pie y elimina de aquí "background" y "padding". */
.footer__logo {
  height: 44px;
  width: auto;
  margin-bottom: var(--space-4);
  padding: 9px 13px;
  background: #FFFFFF;
  border-radius: 10px;
  box-sizing: content-box;
}
.site-footer .brand-fallback { color: #fff; margin-bottom: var(--space-4); display: inline-block; }
.site-footer .brand-fallback span { color: var(--secondary-light); }

.footer__desc { max-width: 42ch; }
.footer__ruc { font-size: var(--fs-xs); }

.footer__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-invert);
}
.footer__list { display: grid; gap: var(--space-2); }
.footer__link { color: #A9B6D0; }
.footer__link:hover { color: var(--text-invert); }
.footer__text { color: #8E9DBB; }

.social { display: flex; gap: var(--space-3); }
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #C6D2EA;
  transition: background-color var(--transition), color var(--transition);
}
.social__link:hover { background: var(--secondary-color); color: #fff; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-xs);
}
.footer__copy { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }


/* ============================================================================
   10. FLOTANTES Y MODAL
   ============================================================================ */
.wa-float {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px;
  border-radius: var(--radius-pill);
  background: var(--whatsapp);
  color: #06301A;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform var(--transition), background-color var(--transition);
}
.wa-float:hover {
  background: var(--whatsapp-dark);
  transform: translateY(-3px);
  text-decoration: none;
}
.wa-float__text { display: none; font-weight: 700; font-size: var(--fs-sm); }

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
/* El atributo hidden debe ganarle a display:flex (si no, el modal se ve al cargar) */
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 27, 48, .90);
}
.lightbox__panel {
  position: relative;
  width: min(1100px, 100%);
  max-height: 92dvh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
/* max-height evita que una captura vertical se amplíe fuera de la pantalla
   o se vea pixelada al estirarse. width:auto conserva su proporción. */
.lightbox__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78dvh;
  margin-inline: auto;
  background: var(--surface-muted);
}
.lightbox__caption { padding: var(--space-4) var(--space-5) var(--space-5); }
.lightbox__title { font-size: var(--fs-base); margin-bottom: var(--space-1); }
.lightbox__desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(38,63,112,.92);
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--primary-color); }

/* Bloquea el scroll del documento con el menú o el lightbox abiertos */
body.is-locked { overflow: hidden; }


/* ============================================================================
   11. ANIMACIONES
   ============================================================================ */
/* Por defecto TODO el contenido es visible. La animación solo se aplica
   cuando main.js ha marcado el documento con la clase .js, de modo que si el
   JavaScript falla o está desactivado nada queda oculto. */
/* Sin will-change a propósito: hay muchos elementos con .reveal y forzar una
   capa de composición en cada uno perjudica el rendimiento más de lo que ayuda. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }


/* ============================================================================
   MEDIA QUERIES — de móvil hacia arriba
   ============================================================================ */

/* --- Tablet pequeña --- */
@media (min-width: 600px) {
  .cards, .features, .steps, .support, .gallery { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow__step::after { display: none; }
  .form__row { grid-template-columns: repeat(2, 1fr); }
  .checklist { grid-template-columns: repeat(2, 1fr); }
  .wa-float__text { display: inline; padding-right: var(--space-2); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --- Tablet vertical: los planes ya caben en dos columnas --- */
@media (min-width: 720px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1.05fr 1fr; }
}

/* --- Tablet / laptop pequeña --- */
@media (min-width: 860px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .support { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .flow { grid-template-columns: repeat(4, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1.05fr 1fr; }
  .dashboard__grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard__grid--compacta { grid-template-columns: repeat(6, 1fr); }
  .onboarding { grid-template-columns: 1fr 1.2fr; align-items: center; }
  .caso { grid-template-columns: 1fr 1fr; align-items: center; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* --- Escritorio: navegación horizontal --- */
@media (min-width: 1000px) {

  html { scroll-padding-top: 92px; }

  .header-inner { min-height: 76px; }
  .brand__logo { height: 50px; }

  .nav-toggle { display: none; }
  .nav-backdrop { display: none !important; }

  .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav__list { flex-direction: row; gap: var(--space-1); }
  .nav__link { padding: var(--space-2) var(--space-3); }
  .nav__cta { width: auto; }

  .hero__inner { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .hero__title { max-width: 15ch; }

  .plans { grid-template-columns: repeat(4, 1fr); }
  .plan { padding: var(--space-6) var(--space-5); }

  .cards--problems { grid-template-columns: repeat(4, 1fr); }
}

/* --- Pantallas grandes --- */
@media (min-width: 1280px) {
  .features { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================================
   PREFERENCIAS DEL USUARIO
   ============================================================================ */

/* Respeta a quien pidió menos movimiento en su sistema operativo */
@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;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .feature:hover, .gallery__item:hover, .wa-float:hover {
    transform: none;
  }
}

/* Mayor contraste para quien lo solicita */
@media (prefers-contrast: more) {
  :root { --text-muted: #3A4B5C; --border: #A9B9C9; --border-strong: #7E90A3; }
}


/* ============================================================================
   IMPRESIÓN
   ============================================================================ */
@media print {
  .site-header, .wa-float, .lightbox, .nav-backdrop, .form-card { display: none !important; }
  body { color: #000; background: #fff; }
  .section--dark, .cta-final, .onboarding { background: #fff !important; color: #000 !important; }
  .section--dark h2, .section--dark h3, .cta-final__title { color: #000 !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}