/* ==========================================================================
   Crisser Corporación — Estilos conceptuales (Mobile-First)
   Wireframe de alta fidelidad para la Home del marketplace.

   AQUÍ NO VA EL HEADER. El menú de todo el sitio lo define `crisser.css`
   (`.site-header`, `.nav-*`, `.mega*`, `.header-actions`, `.lang-*`), que
   cargan TODAS las páginas. Esta hoja la cargan sólo las 15 landings, y tenía
   además su propio header completo —de la maqueta anterior—: mismo marcado,
   dos sistemas de estilo.

   Como se carga ANTES que `crisser.css`, no lo pisaba entero: se colaba lo que
   `crisser.css` no vuelve a declarar. Medido en Chromium contra el Home, que
   es la referencia (`erp/bots/ab-header.mjs` sirve esta hoja en su versión
   anterior por intercepción y compara el estilo calculado):

     .header-inner  justify-content: space-between  (Home: normal)
     .nav-link      justify-content: space-between  (Home: normal)
     .nav-link      text-align: left                (Home: center)
     .nav-item      border-bottom: 1px #99cccc      (Home: 0) — sólo <768px
     .mega-list li  margin-bottom: 4px              (Home: 0)
     .nav-item.has-mega > .nav-link::after           (Home: no existe)

   Lo que más se veía es el `::after`: `crisser.css` ya pone su propio chevron
   como icono DENTRO del enlace, así que en el móvil salían DOS por ítem —uno
   pegado a la palabra y otro al borde derecho—. El `space-between` reparte el
   menú a lo ancho en vez de agruparlo, y el borde verde agua raya cada ítem.

   El megamenú NO se colaba —`crisser.css` lo redeclara entero y gana por
   orden—, y el `backdrop-filter` tampoco: ése lo pone `crisser-redesign.css`,
   que el Home también carga.

   Se retiró el bloque entero: un solo header, el de `crisser.css`.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-dark);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-dark);           /* REBRAND: negro de alta lectura para contraste */
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-3); }

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

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-6); }

.eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  color: var(--color-accent-1);
}

/* ---- Botones / CTAs ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn--primary { background: var(--color-secondary); color: #fff; box-shadow: 0 6px 18px rgba(0,114,182,.26); }
.btn--primary:hover { background: #005f99; }

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

.btn--block { width: 100%; }

/* ==========================================================================
   HERO + SELECTOR DE RAMOS
   ========================================================================== */
.hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  padding-block: var(--space-7);
}
.hero h1 { color: #fff; }
.hero p { color: var(--color-light-grey); max-width: 48ch; }

/* Variante blanco y negro: presentación directa y transparente */
.hero--bw {
  background: var(--color-bg);
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-light-grey);
}
.hero--bw .eyebrow { color: var(--color-dark); }
.hero--bw h1 { color: var(--color-dark); max-width: 18ch; }
.hero--bw .hero__subheading {
  color: var(--color-dark);
  font-size: var(--fs-md);
  max-width: 60ch;
}
.hero--bw .hero__body {
  color: var(--color-neutral-dark, #000);
  max-width: 60ch;
  font-weight: var(--fw-medium);
}

/* Hero minimalista estilo The Zebra: alta conversión, espacio en blanco */
.hero--zebra { padding-block: var(--space-7); text-align: center; }
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero--zebra h1 {
  max-width: 16ch;
  font-size: 2.25rem;
}
.hero--zebra .hero__subheading {
  max-width: 46ch;
  margin-bottom: var(--space-5);
}
.hero__micro {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

/* Fila horizontal de botones de cotización con iconos */
.ramo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}
.ramo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 120px;
  min-height: 110px;
  padding: var(--space-3);
  background: var(--color-bg);
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-align: center;
  transition: var(--transition);
}
.ramo-btn:hover {
  text-decoration: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.ramo-btn .icon { font-size: 2rem; line-height: 1; }
.ramo-btn--all {
  border-style: dashed;
  color: var(--color-accent-1);
}

.quote-selector {
  background: var(--color-bg);
  color: var(--color-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
  max-width: 620px;
}
.quote-selector label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-primary);
}
.quote-selector select,
.quote-selector input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  margin-bottom: var(--space-3);
}
.selector-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.selector-tabs button {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--color-light-grey);
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  cursor: pointer;
  color: var(--color-primary);
}
.selector-tabs button[aria-selected="true"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ==========================================================================
   SLIDER DE COMPAÑÍAS ALIADAS
   ========================================================================== */
.carriers { background: var(--color-secondary-soft); padding-block: var(--space-4); }
.carriers h2 { font-size: var(--fs-md); text-align: center; color: var(--color-accent-1); }
.carrier-track {
  display: flex;
  gap: var(--space-5);
  overflow: hidden;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.carrier-track .marquee {
  display: flex;
  gap: var(--space-5);
  animation: scroll-x 30s linear infinite;
  white-space: nowrap;
}
.carrier-item {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  /* Placeholder: aquí irán los logos oficiales autorizados por SUDEASEG */
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   BANNER DE FINANCIAMIENTO
   ========================================================================== */
.financing {
  background: var(--color-accent-1);
  color: #fff;
  text-align: center;
  padding-block: var(--space-4);
}
.financing p { margin: 0; font-size: var(--fs-md); }
.financing strong { font-family: var(--font-heading); }

/* ==========================================================================
   BANDA DE EMISIÓN INMEDIATA (Home)
   ========================================================================== */
.emision-band {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding-block: var(--space-6);
}
.emision-band__badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.emision-band h2 { color: #fff; margin: 0 0 var(--space-2); }
.emision-band > .container > p {
  max-width: 60ch;
  margin: 0 auto var(--space-5);
  color: rgba(255, 255, 255, 0.9);
}
.emision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 560px) { .emision-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .emision-grid { grid-template-columns: repeat(4, 1fr); } }
.emision-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  color: #fff;
  transition: var(--transition);
}
.emision-card:hover {
  background: #fff;
  color: var(--color-primary);
  transform: translateY(-3px);
}
.emision-card .icon { font-size: var(--fs-2xl); line-height: 1; }
.emision-card strong { font-family: var(--font-heading); font-size: var(--fs-base); }
.emision-card small { font-size: var(--fs-xs); opacity: 0.85; }

/* ==========================================================================
   GRID DE RAMOS (PERSONAS / EMPRESAS)
   ========================================================================== */
.lines-group { margin-bottom: var(--space-6); }
.lines-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 2px solid var(--color-light-grey);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}
.lines-group__head h2 { margin: 0; }
.lines-group--personas h2 { color: var(--color-primary); }
.lines-group--empresas h2 { color: var(--color-accent-2); }

.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.line-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-dark);
  transition: var(--transition);
}
.line-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--color-secondary);
}
.line-card .icon {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-2);
}
.line-card h3 { font-size: var(--fs-base); margin: 0 0 var(--space-1); }
.line-card .badge {
  display: inline-block;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-2);
}
.badge--realtime { background: var(--color-secondary-soft); color: var(--color-secondary); }
.badge--offline { background: var(--color-primary-soft); color: var(--color-primary); }

/* ==========================================================================
   CATÁLOGO DE RAMOS + SMART SEARCH
   ========================================================================== */
.catalog h2 { text-align: center; }

.smart-search {
  display: flex;
  gap: var(--space-2);
  max-width: 680px;
  margin: var(--space-4) auto var(--space-6);
}
.smart-search input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.smart-search input:focus {
  outline: none;
  border-color: var(--color-secondary);
}
.smart-search .btn { flex: 0 0 auto; }

.catalog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.catalog-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-dark);
  transition: var(--transition);
}
.catalog-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--color-secondary);
}
.catalog-card .icon { font-size: 2.25rem; line-height: 1; }
.catalog-card h3 {
  font-size: var(--fs-md);
  margin: var(--space-2) 0 var(--space-1);
}
.catalog-card p {
  font-size: var(--fs-sm);
  color: var(--color-grey);
  margin: 0;
}
.catalog-card--wildcard {
  border-style: dashed;
  background: var(--color-primary-soft);
}

/* ==========================================================================
   BLOG / CRISSERNEWS
   ========================================================================== */
.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.post-card {
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.post-card .thumb {
  background: var(--color-light-grey);
  aspect-ratio: 16 / 9;
}
.post-card .body { padding: var(--space-3); }
.post-card h3 { font-size: var(--fs-md); }
.post-card time { font-family: var(--font-data); font-size: var(--fs-xs); color: var(--color-grey); }

/* ==========================================================================
   RESEÑAS / PRUEBA SOCIAL
   ========================================================================== */
.reviews { background: var(--color-primary-soft); }
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.review-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.review-card .stars { color: var(--color-secondary); font-family: var(--font-data); }
.review-card .author { font-weight: var(--fw-semibold); font-family: var(--font-heading); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-dark);          /* REBRAND: footer oscuro estilo The Zebra */
  color: #c9d2dc;
  padding-block: var(--space-6) var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.footer-col h4 { color: #fff; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 13px; letter-spacing: .02em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { color: #c9d2dc; font-size: var(--fs-sm); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--color-secondary); text-decoration: none; }

/* Contacto con iconografía */
.footer-contact li a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.footer-contact svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-3);
  font-size: var(--fs-xs);
  color: #7c8791;
}
.footer-bottom p { margin: 0 0 var(--space-1); }
.footer-bottom .data { color: #c9d2dc; }
.footer-legal {
  text-align: left;
  margin: var(--space-3) 0 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.7;
  color: #7c8791;
}

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-md);
}
.whatsapp-fab:hover { text-decoration: none; transform: scale(1.05); }
.whatsapp-fab svg { width: 30px; height: 30px; fill: currentColor; }

/* ==========================================================================
   RESPONSIVE — Desktop (≥ 768px)
   ========================================================================== */
@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  .hero--zebra h1 { font-size: 3rem; }


  .cards-grid { grid-template-columns: repeat(4, 1fr); }
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .posts-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .posts-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   REBRAND — Afinado global (bordes neutros, radios y sombras suaves)
   Va al final para consolidar el look The Zebra sobre las reglas previas.
   ========================================================================== */
:root { --color-border: #e7edf3; }

/* Cards limpias: borde neutro + esquinas suaves + sombra sutil */
.ramo-btn,
.line-card,
.catalog-card,
.review-card,
.post-card,
.quote-selector {
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.ramo-btn:hover,
.line-card:hover,
.catalog-card:hover { border-color: var(--color-accent-1); box-shadow: var(--shadow-card-lg); }
.catalog-card--wildcard { border-color: #b9cddd; background: var(--color-secondary-soft); }

/* Inputs y buscadores: borde neutro, foco en color de conversión */
.smart-search input,
.quote-selector select,
.quote-selector input { border-color: var(--color-border); border-radius: var(--radius-md); }
.smart-search input:focus,
.quote-selector input:focus,
.quote-selector select:focus { border-color: var(--color-secondary); }

/* Reseñas: estrellas en dorado (no azul) */
.review-card .stars { color: #f6b100; }

/* Slider de aliadas: tarjetas neutras */
.carrier-item { border-color: var(--color-border); color: var(--color-primary); }

/* Números / datos monetarios en Arial (refuerzo) */
.data, .numeric, .plan-price, .quote-total__amount, .anexo__sum { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   SHELL MODERNO (v1) — Home y componentes compartidos
   Solo visual. Poppins/Raleway/Arial + paleta oficial.
   ========================================================================== */

/* Tarjetas del catálogo del Home: redondeadas, con sombra y elevación */
.catalog-card,
.product-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  background: #fff;
}
.catalog-card:hover,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
  border-color: var(--color-border-2);
}

/* Botones de ramo del Home (hero B/N): tarjeta moderna */
.ramo-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  background: #fff;
}
.ramo-btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
  border-color: var(--color-border-2);
}

/* Espaciado de sección un poco más generoso (aire moderno) */
.section { padding-block: var(--space-7); }