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

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

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);         /* REBRAND: header translúcido con blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #eef2f6;
  box-shadow: 0 1px 0 rgba(14, 86, 136, 0.05);
  transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: 0 6px 22px rgba(14, 86, 136, 0.12); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--space-3);
}
.brand {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--color-primary);
}
.brand span { color: var(--color-secondary); }

.nav-toggle {
  background: none;
  border: 0;
  font-size: var(--fs-lg);
  cursor: pointer;
  color: var(--color-primary);
}

/* ---- Navegación principal (mobile-first: slide-out) ---- */
.main-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-light-grey);
  padding: var(--space-3);
  overflow-y: auto;
  z-index: 90;
}
.main-nav.is-open { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-item { border-bottom: 1px solid var(--color-light-grey); }
.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--color-dark);
  cursor: pointer;
  text-align: left;
}
.nav-item.has-mega > .nav-link::after {
  content: "⌄";
  font-size: var(--fs-md);
  color: var(--color-grey);
  transition: var(--transition);
}
.nav-item.is-open > .nav-link::after { transform: rotate(180deg); }
.nav-item--featured > .nav-link { color: var(--color-accent-2); }

.megamenu { display: none; padding: 0 0 var(--space-3) var(--space-3); }
.nav-item.is-open .megamenu { display: block; }
.mega-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-2);
  margin: 0 0 var(--space-1);
}
.mega-subtitle { font-size: var(--fs-sm); color: var(--color-grey); margin: 0 0 var(--space-2); }
.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list li { margin-bottom: var(--space-1); border: 0; }
.mega-list a {
  display: block;
  padding: var(--space-1) 0;
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.mega-list a:hover { color: var(--color-secondary); text-decoration: none; }

.nav-login-mobile { display: block; width: 100%; margin-top: var(--space-4); }

/* ---- Acciones de la derecha ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.search-trigger {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  padding: var(--space-1);
}
.search-trigger svg { width: 22px; height: 22px; fill: currentColor; }
/* REBRAND: selector de idioma como pulldown con globo (envolver en .lang-select) */
.lang-select { position: relative; display: none; }
.lang-switch {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  border: none;
  border-radius: var(--radius-md);
  padding: 7px 10px;
  background: transparent;
  cursor: pointer;
  color: var(--color-primary);
}
.lang-switch:hover { background: var(--color-secondary-soft); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid #eef2f6; border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(14, 86, 136, 0.16);
  padding: 6px; min-width: 150px; z-index: 130; display: none;
}
.lang-menu.is-open { display: block; }
.lang-menu button {
  display: flex; width: 100%; align-items: center; gap: 8px;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  padding: 10px 12px; border-radius: var(--radius-sm); text-align: left; color: var(--color-dark);
}
.lang-menu button[aria-selected="true"] { background: var(--color-secondary-soft); color: var(--color-primary); }
.btn--login { display: none; padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }

/* ---- Panel de búsqueda desplegable ---- */
.search-panel {
  display: none;
  border-top: 1px solid var(--color-light-grey);
  background: var(--color-bg);
  padding: var(--space-3) 0;
}
.search-panel.is-open { display: block; }
.search-panel .smart-search { margin: 0 auto; }

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

  .nav-toggle { display: none; }
  .nav-login-mobile { display: none; }
  .main-nav {
    display: block;
    position: static;
    border: 0;
    padding: 0;
    overflow: visible;
  }
  .nav-list { display: flex; gap: var(--space-2); align-items: center; }
  .nav-item { border: 0; position: relative; }
  .nav-link {
    width: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-base);
    border-radius: var(--radius-sm);
  }
  .nav-item--featured > .nav-link {
    border: 2px solid var(--color-accent-2);
    border-radius: var(--radius-pill);
    color: var(--color-accent-2);
  }
  /* Megamenú desktop: panel flotante en hover/focus */
  .megamenu {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    background: var(--color-bg);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition);
    z-index: 120;
  }
  .megamenu--featured { min-width: 320px; border-top: 3px solid var(--color-accent-2); }
  .nav-item.has-mega:hover > .megamenu,
  .nav-item.has-mega:focus-within > .megamenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item.has-mega > .nav-link::after { content: none; }

  .lang-switch { display: inline-flex; }
  .btn--login { display: inline-flex; }

  .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); }