/* =========================
   styles.css
   Premium, sober, mobile-first
========================= */

:root{
  /* =========================================================
     PALETA — Estrategia Moderna & Acompañamiento Premium
     ========================================================= */

  /* Identidad */
  --steel: #1F3A5F;      /* Azul Acero: autoridad */
  --teal:  #0F766E;      /* Teal: acción */
  --sand:  #EAE6DA;      /* Arena suave: cercanía */
  --white: #FFFFFF;      /* Blanco limpio */
  --charcoal: #1F2937;   /* Gris carbón: texto */

  /* Sistema (tokens usados por tu CSS actual) */
  --bg: var(--white);
  --bg2: #F7F8FA;              /* blanco frío sutil para profundidad */
  --surface: rgba(31, 41, 55, .03);
  --surface2: rgba(31, 41, 55, .06);
  --text: var(--charcoal);
  --muted: rgba(31, 41, 55, .72);
  --border: rgba(31, 41, 55, .12);

  /* Accents (mantenemos nombres para NO romper tu CSS) */
  --accent: var(--steel);
  --accent-rgb: 31, 58, 95;    /* #1F3A5F */
  --accent2: var(--teal);
  --accent2-rgb: 15, 118, 110; /* #0F766E */

  /* Sombras y radios */
  --shadow: 0 18px 55px rgba(31, 41, 55, .10);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;

  /* Focus ring (accesible y on-brand) */
  --focus: 0 0 0 3px rgba(var(--accent2-rgb), .22);

  /* Estados */
  --danger: #B91C1C;
  --dangerBg: rgba(185, 28, 28, .08);
}

/* Base */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);

  /* Fondo premium claro (aire + autoridad) */
  background:
    radial-gradient(1200px 650px at 10% -10%, rgba(var(--accent-rgb), .08), transparent 60%),
    radial-gradient(900px 620px at 92% 12%, rgba(var(--accent2-rgb), .08), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);

  line-height:1.45;
}



img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; color:inherit; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

.section{ padding: 64px 0; }
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head{
  max-width: 820px;
  margin-bottom: 26px;
}

.center{ text-align:center; }

.h1{
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing:-0.03em;
  margin: 14px 0 10px;
}
.h2{
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  letter-spacing:-0.02em;
  margin:0 0 10px;
}
.h3{
  font-size: 1.1rem;
  letter-spacing:-0.01em;
  margin:0 0 8px;
}
.lead{
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 58ch;
}
.muted{ color: var(--muted); }
.micro{
  font-size: .9rem;
  color: var(--muted);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top: 12px;
  background: #fff;
  color:#000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 999;
}
.skip-link:focus{ left: 12px; outline:none; box-shadow: var(--focus); }

/* Focus */
:focus{ outline:none; }
:focus-visible{ box-shadow: var(--focus); }

/* Header */
.header{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(4,6,18,.55);
  border-bottom: 1px solid var(--border);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand__mark{
  width: 38px; height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .26), rgba(var(--accent2-rgb), .22));
  border:1px solid var(--border);
  display:grid; place-items:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand__name{ font-weight: 750; letter-spacing:-0.02em; }
.brand__meta{ font-size: .9rem; color: var(--muted); }

.header__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.link.subtle{
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .18s ease, color .18s ease;
}
.link.subtle:hover{ background: rgba(255,255,255,.06); color: var(--text); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .74));
  color: #150c0c;
  border-color: rgba(var(--accent-rgb), .55);
  font-weight: 800;
}
.btn--primary:hover{
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), .80));
}

.btn--ghost{
  background: rgba(255,255,255,.03);
}
.btn--lg{
  padding: 12px 18px;
  border-radius: 16px;
}
.btn--block{ width:100%; }

.btn__icon{
  font-weight: 800;
  letter-spacing: .06em;
}

/* Sticky CTA (mobile) */
.sticky-cta{
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display:none;
  gap: 10px;
  z-index: 60;
}
@media (max-width: 920px){
  .header__actions .link.subtle{ display:none; }
  .sticky-cta{ display:grid; grid-template-columns: 1fr 1fr; }
}

/* Hero */
.hero{ padding-top: 42px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 28px;
  align-items:start;
}
@media (max-width: 960px){
  .hero__grid{ grid-template-columns: 1fr; }
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .9rem;
}
.trust-bullets{
  list-style:none;
  padding:0;
  margin: 0 0 18px;
  display:grid;
  gap: 10px;
}
.trust-bullets li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.icon{ color: var(--accent); font-weight: 900; }

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-bottom: 10px;
}

/* Cards */
.card{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 18px;
}
.pill-row{ display:flex; flex-wrap:wrap; gap: 10px; margin: 12px 0 14px; }
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(var(--accent2-rgb), .10);
  border: 1px solid rgba(var(--accent2-rgb), .20);
  color: rgba(255,255,255,.88);
  font-size: .9rem;
}


.contact-mini{ display:grid; gap: 10px; margin: 10px 0; }
.fineprint{ font-size:.9rem; color: var(--muted); }

/* Meta row */
.meta-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 700px){
  .meta-row{ grid-template-columns: 1fr; }
}
.meta-card{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.meta-card__k{ font-size:.85rem; color: var(--muted); }
.meta-card__v{ font-size:1.25rem; font-weight: 850; letter-spacing:-0.02em; margin-top: 4px; }
.meta-card__s{ font-size:.85rem; color: var(--muted); margin-top: 2px; }

/* Info grid */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}
.info-card{
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.info-card__icon{ font-size: 1.4rem; margin-bottom: 10px; }

.logos{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 900px){
  .logos{ grid-template-columns: repeat(2, 1fr); }
}
.logo{
  padding: 14px 12px;
  text-align:center;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
}

/* Table */
.table-wrap{
  overflow:auto;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.compare{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.compare th, .compare td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
}
.compare thead th{
  color: rgba(255,255,255,.86);
}
.compare tbody tr:hover td,
.compare tbody tr:hover th{
  background: rgba(255,255,255,.03);
}
.callout{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  background: rgba(var(--accent-rgb), .08);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.callout__title{ font-weight: 850; color: rgba(255,255,255,.9); }
.callout__text{ color: rgba(255,255,255,.78); }

/* Service cards */
.cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
}
.svc{
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.8);
}
.list li{ margin: 6px 0; }

/* Steps */
.steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 12px;
}
.step{
  display:flex;
  gap: 14px;
  padding: 14px 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.step__n{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(var(--accent2-rgb), .10);
  border: 1px solid rgba(var(--accent2-rgb), .20);
  font-weight: 900;
}

/* Results */
.result-card{
  padding: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* Slider */
.slider{
  display:grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 12px;
  align-items:center;
}
.slider__btn{
  width:42px; height:42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}

.slider__viewport{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 18px;
  min-height: 148px;
}
.quote{ display:none; }
.quote.is-active{ display:block; }
.quote__text{ font-size: 1.05rem; margin: 0 0 10px; }
.quote__meta{ color: var(--muted); margin:0; }

.dots{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 10px;
}
.dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  cursor:pointer;
}
.dot.is-active{
  background: var(--accent);
  border-color: rgba(var(--accent-rgb), .85);
}


/* Accordion */
.accordion{ display:grid; gap: 12px; }
.acc{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 14px;
}
.acc > summary{
  cursor:pointer;
  font-weight: 750;
  padding: 10px 0;
}
.acc__content{
  padding: 8px 0 12px;
  color: rgba(255,255,255,.8);
}

/* Lead section */
.lead-text{
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 58ch;
}

.proof-mini{
  margin-top: 16px;
  display:grid;
  gap: 12px;
}
.proof-mini__item{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.proof-mini__k{ color: var(--muted); font-size:.9rem; }
.proof-mini__v{ font-weight: 750; margin-top: 4px; }

.form label{ display:block; font-weight: 700; margin-bottom: 8px; }
.form input, .form select, .form textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
}

.field-hint{ margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.field-error{
  margin: 8px 0 0;
  font-size: .9rem;
  color: var(--danger);
  min-height: 1.1em;
}

.form__row{ margin-bottom: 14px; }
.form__row--check{
  display:flex; gap:10px; align-items:flex-start;
}
.form__row--check input{
  width: 18px; height: 18px; margin-top: 3px;
}

.form__status{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  display:none;
}
.form__status.is-error{
  display:block;
  border:1px solid rgba(255,90,90,.35);
  background: var(--dangerBg);
}
.form__status.is-success{
  display:block;
  border:1px solid rgba(122,255,190,.30);
  background: rgba(122,255,190,.08);
}

.divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

.alt-ctas{ display:grid; gap: 10px; }

/* Final CTA */
.final-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
@media (max-width: 900px){
  .final-cta{ flex-direction: column; align-items:flex-start; }
}
.final-cta__actions{ display:flex; gap: 12px; flex-wrap:wrap; }

/* Footer */
.footer{
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.15);
  padding: 42px 0 24px;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){
  .footer__grid{ grid-template-columns: 1fr; }
}
.footer__brand{ font-weight: 900; font-size: 1.1rem; }
.footer__title{ font-weight: 800; margin-bottom: 10px; }
.footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 8px;
}
.footer__bottom{
  margin-top: 18px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}



/* =========================================================
   FIX DEFINITIVO — SOLO SECCIÓN #lead (no toca toda la landing)
   ========================================================= */

#lead .lead{
  display: grid;
  gap: 22px;
  align-items: start;
}

/* Desktop: dos columnas balanceadas SIN romper nada */
@media (min-width: 980px){
  #lead .lead{
    grid-template-columns: minmax(0, 1fr) minmax(420px, 470px);
    column-gap: 28px;
  }

  /* Copy con ancho legible (evita look “vacío gigante”) */
  #lead .lead__copy{
    max-width: 680px;
  }

  /* Form alineado a la derecha */
  #lead form.form.card{
    width: 100%;
    max-width: 470px;
    justify-self: end;
  }
}

/* Tablet: aún 2 columnas pero más compactas */
@media (min-width: 820px) and (max-width: 979px){
  #lead .lead{
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    column-gap: 22px;
  }

  #lead form.form.card{
    max-width: 430px;
    justify-self: end;
  }
}

/* Mobile: una columna, copy arriba y form abajo */
@media (max-width: 819px){
  #lead .lead{
    grid-template-columns: 1fr;
  }

  #lead .lead__copy{
    max-width: 680px;
  }

  #lead form.form.card{
    max-width: 560px;
    width: 100%;
    justify-self: start;
  }
}

/* Proof mini SOLO en #lead */
#lead .proof-mini{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

@media (min-width: 820px){
  #lead .proof-mini{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 819px){
  #lead .proof-mini{
    grid-template-columns: 1fr;
  }
}

/* Ajustes finos del form SOLO en #lead */
#lead .form__row input,
#lead .form__row select,
#lead .form__row textarea{
  width: 100%;
}

/* Checkbox alineado SOLO en #lead */
#lead .form__row--check{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

#lead .form__row--check input{
  margin-top: 4px;
}

/* Mensajes del form SOLO en #lead */
#lead .field-hint{
  margin-top: 8px;
  line-height: 1.35;
}

#lead .form__status{
  margin-top: 12px;
  border-radius: 14px;
}

/* =========================================================
   #lead — FIX DEFINITIVO (NO afecta el resto de la landing)
   ========================================================= */

/* 1) Blindaje: esta sección controla su propio layout */
#lead .container.lead{
  display: grid !important;
  grid-template-areas:
    "copy"
    "form";
  gap: 20px;
  align-items: start;
}

/* 2) Asignación de áreas (evita que el form “salte” a la izquierda) */
#lead .lead__copy{ grid-area: copy; min-width: 0; }
#lead form#leadForm{ grid-area: form; min-width: 0; }

/* 3) IMPORTANTÍSIMO: neutraliza efectos que te rompen desktop */
#lead form#leadForm{
  position: static !important;   /* mata sticky accidental */
  inset: auto !important;
  transform: none !important;
  float: none !important;
  justify-self: stretch;
}

/* 4) Desktop / Laptop: 2 columnas PERFECTAS */
@media (min-width: 980px){
  #lead .container.lead{
    grid-template-areas: "copy form";
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    column-gap: 44px;
  }

  /* Copy legible (evita “líneas largas”) */
  #lead .lead__copy{
    max-width: 720px;
  }

  /* Form con ancho premium */
  #lead form#leadForm{
    max-width: 520px;
    width: 100%;
    justify-self: end; /* lo pega a la derecha dentro del container */
  }
}

/* 5) Tablet: 2 columnas más compactas */
@media (min-width: 820px) and (max-width: 979px){
  #lead .container.lead{
    grid-template-areas: "copy form";
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    column-gap: 28px;
  }

  #lead form#leadForm{
    max-width: 460px;
    justify-self: end;
  }
}

/* 6) Mobile: 1 columna, todo centrado y cómodo */
@media (max-width: 819px){
  #lead form#leadForm{
    max-width: 620px;
    justify-self: start;
  }
}

/* =========================
   LEAD FORM (layout real) — SIN romper nada
========================= */

/* Contenedor real del formulario */
#lead .container.lead{
  display: grid;
  gap: 22px;
  align-items: start;

  /* IMPORTANTÍSIMO: neutraliza el conflicto del “lead” tipográfico */
  max-width: none;
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* Desktop */
@media (min-width: 980px){
  #lead .container.lead{
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    column-gap: 44px;
  }

  #lead .lead__copy{
    max-width: 720px;
  }

  #lead form#leadForm{
    width: 100%;
    max-width: 520px;
    justify-self: end;
    position: static; /* por si quedó sticky en otra parte */
  }
}

/* Tablet */
@media (min-width: 820px) and (max-width: 979px){
  #lead .container.lead{
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    column-gap: 28px;
  }

  #lead form#leadForm{
    max-width: 460px;
    justify-self: end;
  }
}

/* Mobile */
@media (max-width: 819px){
  #lead .container.lead{
    grid-template-columns: 1fr;
  }

  #lead form#leadForm{
    width: 100%;
    max-width: 620px;
    justify-self: start;
  }
}

/* Proof mini SOLO en #lead */
#lead .proof-mini{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

@media (min-width: 820px){
  #lead .proof-mini{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   CENTRADO PERFECTO — SECCIÓN #lead
   Desktop + Mobile
   ========================================================= */

/* 1) Centra el CONTENEDOR general de la sección */
#lead{
  display: flex;
  justify-content: center;
}

/* 2) Limita y centra el grid interno */
#lead .container.lead{
  width: 100%;
  max-width: 1200px;      /* ancho premium, equilibrado */
  margin-left: auto;
  margin-right: auto;
}

/* 3) Desktop: centra ópticamente el conjunto copy + form */
@media (min-width: 980px){
  #lead .container.lead{
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* 4) Mobile: centra y evita sensación de “pegado a la izquierda” */
@media (max-width: 819px){
  #lead .container.lead{
    padding-left: 20px;
    padding-right: 20px;
  }

  /* centra el form visualmente */
  #lead form#leadForm{
    margin-left: auto;
    margin-right: auto;
  }

  /* centra también el bloque de copy */
  #lead .lead__copy{
    margin-left: auto;
    margin-right: auto;
  }
}

/*DISPOSITIVOS MOVILES*/
/* =========================================================
   MOBILE HERO FIX — evita cortes y mejora espaciado
   (solo mobile)
   ========================================================= */

@media (max-width: 520px){

  /* Evita que contenedores corten contenido por overflow */
  #hero, 
  #hero *{
    overflow: visible;
  }

  /* Si tienes alguna section/hero con height/min-height en vh, neutraliza */
  #hero{
    height: auto !important;
    min-height: auto !important;
    padding-top: 22px;
    padding-bottom: 18px;
  }

  /* Título y texto: evita que se salgan/choquen */
  #hero .h1,
  #hero h1{
    font-size: clamp(34px, 7.6vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    word-break: normal;
    overflow-wrap: anywhere; /* por si hay placeholders largos */
  }

  #hero .lead-text,
  #hero .lead,
  #hero .muted{
    font-size: 15.5px;
    line-height: 1.45;
  }

  /* Bullets/cards del hero: más compactas y sin desbordes */
  #hero .hero__bullets,
  #hero .bullets,
  #hero .list{
    gap: 10px;
  }

  #hero .bullet,
  #hero .bullet-item,
  #hero .hero__bullet{
    padding: 14px 14px;
    border-radius: 18px;
  }

  /* CTA area: en mobile SIEMPRE en columna (no se corta nada) */
  #hero .hero__cta,
  #hero .cta-row,
  #hero .hero__actions,
  #hero .btn-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 14px;
  }

  /* Botones full width, sin tamaños fijos que rompan */
  #hero .btn{
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    white-space: normal;     /* permite 2 líneas si hace falta */
    text-align: center;
  }

  /* Si tu botón secundario trae texto + WhatsApp y se empalma */
  #hero .btn--ghost{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Padding lateral del contenedor para que no “pegue” al borde */
  #hero .container{
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Asegura que nada se salga por ancho */
  #hero *{
    max-width: 100%;
  }
}

/* ===========================================
   MOBILE FIX — evita recorte y mejora balance
   =========================================== */
@media (max-width: 520px){

  /* 1) Nunca recortes verticalmente en mobile */
  html, body{
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* 2) Evita el clásico recorte por 100vh en iPhone
        (si tu hero/sections usan 100vh, aquí lo neutralizamos) */
  .hero, #hero, .section--hero, header + .section{
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* 3) Padding lateral + safe-area bottom para que los botones no “se corten” */
  .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero, #hero, .section--hero, header + .section{
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* 4) Ajuste fino de tipografía para balance (sin aplastar) */
  h1, .h1{
    font-size: clamp(34px, 8vw, 44px) !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere; /* por placeholders largos {{...}} */
  }

  /* 5) Bullets: más compactas para que quepan completas */
  .hero .bullet, .hero .bullet-item, .hero__bullet,
  #hero .bullet, #hero .bullet-item, #hero .hero__bullet{
    padding: 14px 14px !important;
    border-radius: 18px !important;
  }

  /* 6) CTAs: en mobile SIEMPRE en columna y full width */
  .hero__cta, .cta-row, .hero__actions, .btn-row,
  #hero .hero__cta, #hero .cta-row, #hero .hero__actions, #hero .btn-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .btn{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
  }

  /* 7) Si tienes algún wrapper con overflow hidden (muy común en cards) */
  .card, .wrap, .hero__wrap, .section__inner{
    overflow: visible !important;
  }
}

.hero{ min-height: 100vh; min-height: 100svh; }



/* =========================================================
   FINAL MOBILE FIX — centrado perfecto + sin recortes
   (Pegar AL FINAL del archivo styles.css)
   ========================================================= */

/* 1) Cuando el sticky CTA existe (<=920px), reserva espacio abajo
      para que NUNCA tape contenido */
@media (max-width: 920px){
  body{
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

/* 2) Mobile: elimina “min-height: 100vh/100svh” que reintroduce recortes
      y centra ópticamente el contenido */
@media (max-width: 520px){

  /* Gutter real y consistente (evita “recargado a la derecha”) */
  .container{
    width: min(var(--max), calc(100% - 32px)) !important; /* 16px + 16px */
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mata cualquier vh que vuelva a forzar altura y empuje el layout */
  .hero, #hero, .section--hero, header + .section{
    height: auto !important;
    min-height: auto !important;          /* esto anula tu .hero{min-height:100vh/100svh} */
    overflow: visible !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* Centrado óptico (misma “caja” de lectura para todo) */
  .hero__copy,
  .trust-bullets,
  .hero__cta,
  .meta-row{
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CTAs en columna, 100% ancho, sin empalmes */
  .hero__cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero__cta .btn{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sticky CTA: mismo gutter que el container (se ve centrado y premium) */
  .sticky-cta{
    left: 16px !important;
    right: 16px !important;
    bottom: 12px !important;
  }
}

/* =========================================
   HEADER CTA — MOBILE FIX DEFINITIVO
   ========================================= */
@media (max-width: 520px){

  /* El header respira mejor */
  .header__inner{
    gap: 10px;
  }

  /* Nav se adapta al ancho real */
  .header__actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* CTA principal: tamaño mobile premium, sin corte */
  .header__actions .btn--primary{
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 14px;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Si el espacio es muy justo, ocultamos links secundarios */
  .header__actions .link.subtle{
    display: none;
  }
}

/* =========================================================
   COMPARATIVA: Tabla en desktop / Cards en móvil
   ========================================================= */

/* Por defecto: oculto el bloque mobile */
.compare-mobile{ display:none; }

@media (max-width: 720px){

  /* En móvil: oculto tabla + muestro cards */
  #comparativa .table-wrap{ display:none; }
  #comparativa .compare-mobile{ display:grid; gap: 12px; margin-top: 14px; }

  /* Tarjeta por criterio */
  #comparativa .compare-card{
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    border-radius: 18px;
    padding: 14px;
  }

  /* “K” = criterio (Opciones / Ajuste / etc.) */
  #comparativa .compare-card__k{
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
  }

  /* Dos bloques: Broker vs Agente (en columna para lectura) */
  #comparativa .compare-card__cols{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Pill de cada lado */
  #comparativa .compare-pill{
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
    border-radius: 16px;
    padding: 12px 12px;
  }

  /* Cabecera del pill */
  #comparativa .compare-pill__h{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .78;
    margin-bottom: 6px;
  }

  /* Texto principal */
  #comparativa .compare-pill__p{
    font-size: 14.5px;
    line-height: 1.35;
  }

  /* Variante “Agente” más neutra (no agresiva) */
  #comparativa .compare-pill--muted{
    opacity: .9;
  }
}




/* =========================================================
   HIGH-VALUE FIXES (Mobile balance + header overflow + compare mobile)
   Added safely at end — does NOT change desktop layout logic.
========================================================= */

/* 0) Prevent horizontal cut/shift on mobile */
html, body{
  overflow-x: hidden;
}
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* 1) Header: prevent CTA from being cut on small screens */
.brand__name,
.brand__meta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px){
  .header__inner{
    padding: 12px 0;
    gap: 10px;
  }
  .brand__text{
    max-width: 48vw; /* evita empujar CTA fuera */
  }
  .brand__meta{ display:none; } /* meta se repite en hero */
  .header__actions{
    gap: 8px;
    flex-shrink: 0;
  }
  .header__actions .link.subtle{ display:none !important; }

  .header__actions .btn.btn--primary{
    max-width: 44vw;
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #langToggle.btn{
    min-width: 44px;
    padding: 10px 12px;
  }
}

/* 2) Hero CTA: balance perfecto en móvil */
@media (max-width: 520px){
  .hero__cta{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero__cta .btn{
    width: 100%;
  }
}



/* =========================================================
   COLOR OVERRIDE — Paleta definitiva (pegar al FINAL)
   No rompe layout, solo fuerza colores.
========================================================= */

/* Headings en Azul Acero (autoridad) */
.h1, .h2, .h3,
.section-head .h2,
.brand__name,
.footer__brand{
  color: var(--steel);
}

/* Texto base en carbón */
body, p, li, label, input, select, textarea{
  color: var(--charcoal);
}

/* Muted legible (sin gris lavado) */
.muted, .micro, .lead, .lead-text, .brand__meta, .footer__bottom{
  color: var(--muted);
}

/* Header: limpio, premium, sin look “bancario oscuro” */
.header{
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}

/* Links del menú: azul autoridad, hover suave */
.link.subtle{
  color: rgba(var(--accent-rgb), .92);
}
.link.subtle:hover{
  background: rgba(var(--accent-rgb), .06);
  color: var(--steel);
}

/* Secciones soft: Arena suave (humaniza) */
.section--soft{
  background: linear-gradient(180deg, rgba(234,230,218,.70), rgba(234,230,218,.45));
  border-top: 1px solid rgba(31,41,55,.10);
  border-bottom: 1px solid rgba(31,41,55,.10);
}

/* Cards: blanco limpio + borde suave */
.card,
.info-card,
.meta-card,
.svc,
.step,
.result-card,
.slider__viewport,
.acc,
.table-wrap,
.proof-mini__item,
.logo{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: var(--shadow);
}

/* Pills: teal muy sutil (no agresivo) */
.pill{
  background: rgba(var(--accent2-rgb), .08);
  border: 1px solid rgba(var(--accent2-rgb), .18);
  color: rgba(31,41,55,.86);
}

/* Íconos / checks: teal (acción tranquila) */
.icon{
  color: var(--teal);
}

/* Inputs: blancos, bordes suaves, enfoque teal */
.form input, .form select, .form textarea{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(31,41,55,.16);
  color: var(--charcoal);
}
.form input::placeholder,
.form textarea::placeholder{
  color: rgba(31,41,55,.50);
}

/* CTA principal: TEAL (único color de acción) */
.btn--primary{
  background: linear-gradient(135deg, rgba(var(--accent2-rgb), 1), rgba(var(--accent2-rgb), .86));
  color: #FFFFFF;
  border-color: rgba(var(--accent2-rgb), .55);
  font-weight: 850;
}
.btn--primary:hover{
  background: linear-gradient(135deg, rgba(var(--accent2-rgb), 1), rgba(var(--accent2-rgb), .92));
}

/* Botones secundarios: sobrios */
.btn--ghost,
.btn{
  background: rgba(31,41,55,.03);
  border: 1px solid rgba(31,41,55,.12);
  color: var(--steel);
}
.btn:hover{
  background: rgba(31,41,55,.05);
  border-color: rgba(31,41,55,.18);
}

/* Callout: autoridad + calidez (arena + borde azul suave) */
.callout{
  border: 1px solid rgba(var(--accent-rgb), .18);
  background: rgba(234,230,218,.55);
}
.callout__title{ color: var(--steel); }
.callout__text{ color: rgba(31,41,55,.82); }

/* Tabla: headings azul, celdas legibles */
.compare thead th{
  color: var(--steel);
}
.compare th, .compare td{
  border-bottom: 1px solid rgba(31,41,55,.10);
}

/* Dots del slider: activo teal (acción), no “rose” */
.dot.is-active{
  background: var(--teal);
  border-color: rgba(var(--accent2-rgb), .75);
}

/* Footer: limpio, premium */
.footer{
  background: rgba(255,255,255,.85);
  border-top: 1px solid var(--border);
}

/* Focus visible on-brand */
:focus-visible{
  box-shadow: var(--focus);
}



/* =========================================================
   REFINAMIENTO VISUAL — “Firma patrimonial” (sin tocar textos)
   Pegar al FINAL de styles.css
========================================================= */

/* 0) Regla de lujo: menos sombra, más aire */
:root{
  --shadow-soft: 0 10px 28px rgba(31,41,55,.08);
  --shadow-min: 0 6px 18px rgba(31,41,55,.06);
  --radius-firm: 14px;      /* menos redondeado */
  --radius-firm-2: 18px;
}

/* Reduce shadows globales de elementos tipo card */
.card,
.info-card,
.meta-card,
.svc,
.step,
.result-card,
.slider__viewport,
.acc,
.table-wrap,
.proof-mini__item,
.logo,
.form,
.sidebar,
.aside,
.hero-card{
  box-shadow: var(--shadow-min) !important;
  border-radius: var(--radius-firm-2) !important;
}

/* 1) Header/Navbar: más sobrio, menos “SaaS”, altura menor */
.header{
  background: rgba(234,230,218,.22) !important; /* tinte arena muy suave */
  border-bottom: 1px solid rgba(31,41,55,.10) !important;
  backdrop-filter: blur(12px);
}

/* Si tu header usa inner con padding grande, lo comprimimos un poco */
.header__inner{
  padding-block: 10px !important;
}

/* Links del menú: menos “clicky”, más editorial */
.link.subtle{
  padding: 8px 10px !important;
  border-radius: 10px !important;
}
.link.subtle:hover{
  background: rgba(31,58,95,.06) !important;
}

/* 2) Marca: ícono más discreto, nombre con más peso */
.brand__mark{
  width: 40px !important;
  height: 40px !important;
  background: rgba(31,58,95,.08) !important;  /* menos contraste */
  box-shadow: none !important;
  border: 1px solid rgba(31,58,95,.14) !important;
}
.brand__name{
  font-weight: 850 !important;
  letter-spacing: .2px;
}

/* 3) Botón “Asesoría Privada”: estilo “firma” (menos redondo/sombra) */
.btn--primary{
  border-radius: var(--radius-firm) !important;
  box-shadow: none !important;
}
.btn--primary:focus-visible{
  box-shadow: 0 0 0 3px rgba(15,118,110,.22) !important;
}

/* Secundarios: más sobrios y consistentes */
.btn,
.btn--ghost{
  border-radius: var(--radius-firm) !important;
  box-shadow: none !important;
  border-color: rgba(31,41,55,.14) !important;
}

/* 4) HERO: anclaje visual sutil (línea fina bajo H1) */
.hero .h1,
.hero h1{
  font-weight: 900 !important; /* más firme sin subir tamaño */
}
.hero .h1::after,
.hero h1::after{
  content:"";
  display:block;
  width: 72px;
  height: 2px;
  margin-top: 14px;
  border-radius: 99px;
  background: rgba(31,58,95,.22); /* azul acero sutil */
}

/* 5) Checkmarks: más elegantes (teal suave, menos tamaño) */
.check,
.checkmark,
.list-check li::before{
  color: rgba(15,118,110,.78) !important;
}
.check svg,
.checkmark svg{
  transform: scale(.92);
  opacity: .85;
}

/* 6) Sidebar derecho: de “widget” a “módulo asesoría” */
.aside,
.sidebar,
.hero-aside,
.lead-card{
  border-radius: var(--radius-firm-2) !important;
  box-shadow: var(--shadow-soft) !important;  /* un poco más que cards, pero suave */
  border: 1px solid rgba(31,41,55,.10) !important;
}

/* Más padding vertical, menos horizontal (se siente más “editorial”) */
.aside,
.sidebar,
.hero-aside,
.lead-card{
  padding: 22px 18px !important;
}

/* Botones del sidebar: misma altura y jerarquía clara */
.aside .btn,
.sidebar .btn,
.hero-aside .btn{
  min-height: 46px;
}

/* Teal solo para el botón principal del módulo (si tienes .btn--primary ahí) */
.aside .btn--primary,
.sidebar .btn--primary,
.hero-aside .btn--primary{
  background: linear-gradient(135deg, rgba(15,118,110,1), rgba(15,118,110,.90)) !important;
}

/* 7) Cards de métricas: menos “dashboard”, más “tarjeta editorial” */
.metric,
.metrics .card,
.stats .card{
  box-shadow: none !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  border-radius: var(--radius-firm-2) !important;
  padding: 18px 18px !important; /* más aire */
}

/* Números/labels: autoridad */
.metric strong,
.metrics strong,
.stats strong{
  color: var(--steel);
}

/* 8) Bordes: más suaves, menos “marco” */
.card,
.info-card,
.meta-card,
.svc,
.step,
.result-card{
  border-color: rgba(31,41,55,.09) !important;
}

/* 9) Consistencia: radios de inputs y enfoque premium */
.form input,
.form select,
.form textarea{
  border-radius: 14px !important;
  box-shadow: none !important;
}
.form input:focus,
.form select:focus,
.form textarea:focus{
  border-color: rgba(15,118,110,.45) !important;
  box-shadow: 0 0 0 3px rgba(15,118,110,.16) !important;
}

/* 10) Reduce “brillo” de hover para que no se sienta app */
.btn:hover,
.btn--ghost:hover{
  background: rgba(31,41,55,.04) !important;
}



/* =========================================================
   HEADER FIX — Premium responsive (desktop + mobile)
   + Sticky CTA safe area (no tapa contenido)
   Pegar al FINAL de styles.css
========================================================= */

/* ---------- Desktop / base: layout estable ---------- */

/* Fuerza el contenedor del header a un layout claro */
.header__inner{
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 18px;
}

/* Nav completo vive en la segunda columna */
.header__actions{
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  justify-content: end;
}

/* Links: una sola fila en desktop (si no cabe, envuelve bonito) */
.header__links{
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Evita que un link se parta “feo” */
.header__links .link{
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.1;
}

/* Controles: siempre a la derecha, sin moverse */
.header__controls{
  display: flex !important;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Ajuste fino: botones del header uniformes */
.header__controls .btn{
  min-height: 44px;
  border-radius: 14px;
}

/* Toggle EN tipo “chip” */
#langToggle{
  width: 56px;
  padding-inline: 0;
  justify-content: center;
}

/* CTA top: más “firma”, menos app */
.header__controls .btn--primary{
  box-shadow: none !important;
  padding-inline: 16px;
  font-weight: 850;
}


/* ---------- Breakpoint: desktop medio (evita 2 líneas raras) ---------- */
@media (max-width: 1080px){
  .header__links{
    gap: 8px;
  }
  .header__links .link{
    font-size: .95rem;
    padding: 7px 9px;
  }
}


/* ---------- Mobile: 2 filas intencionales + nav scrolleable ---------- */
@media (max-width: 820px){

  /* Header pasa a 2 filas (marca arriba, nav+acciones abajo) */
  .header__inner{
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding-block: 10px;
  }

  /* Nav: primero controles, luego links */
  .header__actions{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Controles arriba: alineados a la derecha */
  .header__controls{
    order: 1;
    justify-content: flex-end;
  }

  /* Links abajo: carrusel horizontal premium */
  .header__links{
    order: 2;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 2px;
    gap: 8px;
    justify-content: flex-start;
  }
  .header__links::-webkit-scrollbar{ display:none; }

  /* Links como “chips” sutiles para mobile */
  .header__links .link{
    background: rgba(31,58,95,.05);
    border: 1px solid rgba(31,58,95,.10);
  }

  /* Reduce un poco el meta y evita que se rompa raro */
  .brand__meta{
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72vw;
  }
}


/* ---------- Sticky CTA: evita que tape el contenido en mobile ---------- */
@media (max-width: 820px){
  /* Reserva espacio al final de la página para el sticky */
  main{
    padding-bottom: 112px; /* ajusta si tu sticky cambia de alto */
  }

  /* Sticky CTA: estética más “firma” */
  .sticky-cta{
    border-top: 1px solid rgba(31,41,55,.10);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
  }

  .sticky-cta .btn{
    min-height: 46px;
    border-radius: 14px;
  }
}


/* =========================================================
   HEADER DESKTOP — Fix premium (no wrap + alineación correcta)
========================================================= */

@media (min-width: 821px){

  /* Cambiamos a flex para control perfecto */
  .header__inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }

  /* Nav completo a la derecha, en una sola fila */
  .header__actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Links: UNA SOLA LÍNEA siempre (sin wrap) */
  .header__links{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;

    flex-wrap: nowrap !important;
    white-space: nowrap !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .header__links::-webkit-scrollbar{ display:none; }

  /* Links tipo “editorial chip” (sobrio) */
  .header__links .link{
    padding: 8px 10px !important;
    border-radius: 10px !important;
    line-height: 1.1 !important;
  }

  /* Controles: siempre pegados al extremo derecho */
  .header__controls{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
  }

  /* Evita que el CTA sea exageradamente largo */
  .header__controls .btn--primary{
    white-space: nowrap !important;
  }
}



/* =========================================================
   TRUST — Look firma patrimonial (menos app, más credencial)
   Pegar al FINAL de styles.css
========================================================= */

.trust .section-head{
  max-width: 820px;
}

/* Grid: más aire vertical */
.trust__grid{
  margin-top: 18px;
}

/* Cards: menos sombra, radios sobrios, más padding vertical */
.trust-card{
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(31,41,55,.06) !important; /* reduce sombra */
  border: 1px solid rgba(31,41,55,.10) !important;
  padding: 22px 18px !important; /* más aire */
}

/* Estructura interna: icono + título alineados */
.trust-card__top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Icono: monocromo, más pequeño, institucional */
.trust-card__icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--steel);
  background: rgba(31,58,95,.06);
  border: 1px solid rgba(31,58,95,.14);
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Títulos: consistentes en peso y tamaño */
.trust-card__title{
  margin: 0;
  font-weight: 850;
  color: var(--steel);
}

/* Texto: igualar “peso visual” */
.trust-card__text{
  margin: 0;
  color: rgba(31,41,55,.78);
}

/* Línea editorial para la lista de aseguradoras (si la dejas en texto) */
.trust-card__fine{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(31,41,55,.08);
  color: rgba(31,41,55,.72);
  font-size: .95rem;
}

/* Logos row: que no parezca “logos wall” */
.trust__logos{
  margin-top: 16px;
  gap: 10px;
}

/* “Logo capsules” — grises, baja opacidad, misma altura */
.trust-logo{
  height: 44px;                 /* reduce altura */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  border: 1px solid rgba(31,41,55,.10) !important;
  background: rgba(255,255,255,.80) !important;
  color: rgba(31,41,55,.55) !important;
  opacity: .82;
  box-shadow: none !important;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Nota al pie: menos protagonista, más “nota profesional” */
.trust__note{
  margin-top: 16px;
  color: rgba(31,41,55,.55);
  font-size: .86rem;
}


/*TABLA*/
/* =========================================================
   COMPARATIVA (#comparativa) — Editorial premium patrimonial
   REEMPLAZA tus 2 bloques actuales por este ÚNICO bloque
========================================================= */

/* 1) Espaciado general: 10/10 premium (menos “alta”, más aire útil) */
#comparativa.section{
  padding-block: clamp(46px, 5vw, 68px);
}

/* 2) Head editorial: ancho controlado + ritmo + línea fina firma */
#comparativa .section-head--narrow{
  max-width: 820px;           /* ~60–65% en desktop */
}

#comparativa .h2--rule{
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 12px;
  padding-bottom: 12px;
  position: relative;
}

#comparativa .h2--rule::after{
  content:"";
  display:block;
  width: 56px;               /* 40–60px */
  height: 2px;
  border-radius: 99px;
  margin-top: 14px;
  background: rgba(31,58,95,.20);  /* Azul acero sutil */
}

#comparativa .section-head--narrow .muted{
  max-width: 680px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(31,41,55,.72);
  margin-top: 2px;
}

/* 3) Contenedor tabla: “documento” (borde fino + sombra muy suave) */
#comparativa .table-wrap{
  border-radius: 20px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 34px rgba(31,41,55,.05); /* lujo = sombra mínima */
  overflow: hidden;
}

/* Accesibilidad: foco visible al tabear */
#comparativa .table-wrap:focus{
  outline: 3px solid rgba(15,118,110,.28); /* teal suave */
  outline-offset: 4px;
  border-radius: 22px;
}

/* 4) Tabla base: tipografía editorial y líneas de baja tensión */
#comparativa .compare{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
}

/* Encabezados: banda superior ligera (editorial) */
#comparativa .compare thead th{
  padding: 18px 22px;
  font-weight: 820;
  color: rgba(31,58,95,.92);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.98),
    rgba(234,230,218,.32)
  );
  border-bottom: 1px solid rgba(31,41,55,.10);
}

/* Primera celda del header (vacía) mantiene coherencia */
#comparativa .compare thead th:first-child{
  width: 26%;
}

/* Labels (columna izquierda): arena MUY sutil, semibold sobrio */
#comparativa .compare tbody th{
  width: 26%;
  text-align: left;
  padding: 18px 22px;
  font-weight: 760;
  color: rgba(31,41,55,.86);
  background: rgba(244,241,234,.58); /* arena editorial */
  border-bottom: 1px solid rgba(31,41,55,.07);
}

/* Celdas */
#comparativa .compare td{
  padding: 18px 22px;
  line-height: 1.55;
  color: rgba(31,41,55,.76);
  border-bottom: 1px solid rgba(31,41,55,.07);
  background: rgba(255,255,255,.94);
}

/* Columna “Asesoría patrimonial”: arena MUY sutil */
#comparativa .compare td:nth-child(2){
  background: rgba(244,241,234,.42);
}

/* Columna “Venta de productos”: blanco limpio */
#comparativa .compare td:nth-child(3){
  background: rgba(255,255,255,.96);
}

/* Separador vertical ultra fino (cero look “tabla” agresiva) */
#comparativa .compare thead th:nth-child(2),
#comparativa .compare tbody td:nth-child(2){
  border-right: 1px solid rgba(31,41,55,.06);
}

/* Última fila sin línea inferior fuerte */
#comparativa .compare tbody tr:last-child th,
#comparativa .compare tbody tr:last-child td{
  border-bottom: none;
}

/* 5) Interacción premium: hover sutil (solo desktop con hover real) */
@media (hover:hover){
  #comparativa .compare tbody tr:hover th{
    background: rgba(244,241,234,.68);
  }
  #comparativa .compare tbody tr:hover td:nth-child(2){
    background: rgba(244,241,234,.50);
  }
  #comparativa .compare tbody tr:hover td:nth-child(3){
    background: rgba(255,255,255,.98);
  }
}

/* 6) Mobile compare: se controla con tu CSS general.
   Aquí solo aseguramos que no estorbe en desktop si existe. */
#comparativa .compare-mobile{
  display: none;
}

/* 7) Callout “Resultado”: conclusión editorial, no CTA oculto */
#comparativa .callout--soft{
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(234,230,218,.34);
  padding: 16px 18px;
  box-shadow: none;
}

#comparativa .callout--soft .callout__title{
  font-size: .95rem;
  font-weight: 900;
  color: rgba(31,58,95,.92);
}

#comparativa .callout--soft .callout__text{
  font-size: .98rem;
  color: rgba(31,41,55,.72);
  line-height: 1.55;
}

/* 8) Ajuste fino en pantallas grandes */
@media (min-width: 1100px){
  #comparativa .table-wrap{
    border-radius: 22px;
  }
}


/* =========================================================
   SERVICES (#servicios) — Mapa de riesgos patrimoniales (Premium)
========================================================= */

#servicios.section{
  padding-block: clamp(48px, 5.5vw, 74px);
}

/* Head: ancho editorial + línea firma */
#servicios .section-head{
  max-width: 980px;
}

#servicios .section-head .h2{
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

#servicios .section-head .h2::after{
  content:"";
  display:block;
  width: 56px;
  height: 2px;
  border-radius: 99px;
  margin-top: 14px;
  background: rgba(31,58,95,.20); /* azul acero sutil */
}

#servicios .section-head .muted{
  max-width: 680px;            /* 60–65% feel */
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(31,41,55,.72);
}

/* Grid premium: 2x2 en desktop, 1 col en móvil */
#servicios .cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 22px;
}

@media (min-width: 900px){
  #servicios .cards{
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

/* Card: menos “app”, más “firma” */
#servicios .svc{
  border: 1px solid rgba(31,41,55,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(31,41,55,.05); /* lujo = suave */
  padding: 20px 20px;
}

@media (min-width: 900px){
  #servicios .svc{
    padding: 22px 22px;
  }
}

/* Jerarquía interna */
#servicios .svc .h3{
  margin: 0 0 10px 0;
  color: rgba(31,58,95,.94);
  font-weight: 850;
  letter-spacing: -0.01em;
}

#servicios .svc .muted{
  color: rgba(31,41,55,.74);
  line-height: 1.55;
  margin: 0 0 12px 0;
}

/* Bullets: editorial (sin checks, sin look “features”) */
#servicios .svc .list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(31,41,55,.08);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

#servicios .svc .list li{
  position: relative;
  padding-left: 16px;
  color: rgba(31,41,55,.80);
  line-height: 1.5;
}

#servicios .svc .list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(31,58,95,.65); /* azul acero suave (no teal) */
  font-weight: 900;
}

/* Hover sutil (desktop) */
@media (hover:hover){
  #servicios .svc:hover{
    border-color: rgba(31,41,55,.14);
    box-shadow: 0 18px 46px rgba(31,41,55,.06);
    transform: translateY(-1px);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
  }
}

/* Si tu sección usa fondo alterno arena en otras partes,
   puedes activar esto (opcional) para “mapa de riesgos”
   descomenta si aplica:
*/
/*
#servicios.section.section--soft{
  background: rgba(234,230,218,.55);
}
*/


/*SEGUROS*/
/* =========================================================
   TRUST — Credenciales patrimoniales (premium / editorial)
========================================================= */

.section.trust{
  padding-block: clamp(56px, 6vw, 86px);
  background: #FFFFFF;
}

.section.trust .section-head{
  max-width: 980px;
}

.section.trust .section-head .h2{
  letter-spacing: -0.02em;
  line-height: 1.06;
}

/* Línea editorial bajo el título (si ya tienes h2--rule en otras secciones, puedes omitir esto) */
.section.trust .section-head .h2{
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 10px;
}
.section.trust .section-head .h2::after{
  content:"";
  display:block;
  width: 56px;
  height: 2px;
  border-radius: 999px;
  margin-top: 14px;
  background: rgba(31,58,95,.20);
}

.section.trust .section-head .muted{
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(31,41,55,.72);
}

/* Grid de cards */
.trust__grid{
  margin-top: 22px;
  gap: 18px;
}

/* Cards: de “features” a “credenciales” */
.trust-card{
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(31,41,55,.05);
  padding: 18px 18px 16px;
  min-height: 190px;
}

.trust-card__top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* Ícono: sobrio (un solo color), tamaño controlado */
.trust-card__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(31,41,55,.12);
  background: rgba(234,230,218,.40); /* arena sutil */
  color: rgba(31,58,95,.92);         /* azul acero */
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

.trust-card__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1F3A5F; /* azul acero */
}

/* Texto: lectura editorial */
.trust-card__text{
  color: rgba(31,41,55,.78);
  line-height: 1.6;
  margin: 0;
}

/* Fine line (antes placeholder): sutil y premium */
.trust-card__fine{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(31,41,55,.08);
  color: rgba(31,41,55,.68);
  font-size: .98rem;
}

/* Logos: placas institucionales (no catálogo) */
.trust__logos{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* Ajuste para que “Seguros Monterrey New York Life” no reviente el layout */
.trust-logo{
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.82);
  box-shadow: none;
  padding: 12px 10px;

  /* look institucional */
  color: rgba(31,41,55,.42); /* gris/“escala de grises” */
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;

  /* control de altura visual */
  min-height: 46px;
  display: grid;
  place-items: center;
  line-height: 1.15;
  font-size: 0.98rem;

  /* evita que se vean como botones */
  user-select: none;
}

/* Nota de independencia: más “firma”, menos disclaimer */
.trust-note{
  margin-top: 14px;
  color: rgba(31,41,55,.72);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Nota final (micro): súper sutil */
.trust__note{
  margin-top: 12px;
  color: rgba(31,41,55,.55);
  font-size: .92rem;
}

/* Responsive */
@media (max-width: 980px){
  .trust__logos{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .trust__grid{
    gap: 14px;
  }

  .trust-card{
    padding: 16px 16px 14px;
  }

  .trust__logos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .trust-logo{
    font-size: .95rem;
    min-height: 44px;
  }
}


/* Header responsive: evita que se corte el CTA */
@media (max-width: 768px){
  .header__inner { gap: 10px; }
  .header__actions { width: 100%; justify-content: space-between; }
  .header__links { display: none; }  /* Oculta links en móvil */
  .header__controls { display: flex; gap: 10px; }
  .btn.btn--primary { white-space: nowrap; }
}

/* Evita que el sticky tape contenido */
.sticky-cta { padding-bottom: env(safe-area-inset-bottom); }



/* =========================================================
   #comparativa — Mobile Premium Polish
   (solo mejora móvil, no rompe desktop)
========================================================= */

/* Kicker premium (arriba del título) */
#comparativa .compare-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31, 58, 95, 0.14);
  background: rgba(255,255,255,0.55);
  color: rgba(31,58,95,0.82);
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Ajustes finos del encabezado en móvil */
@media (max-width: 520px){
  #comparativa .section-head--narrow{
    text-align: left;
  }

  #comparativa .h2--rule{
    font-size: 26px;
    line-height: 1.12;
    margin-bottom: 10px;
  }

  #comparativa .section-head--narrow .muted{
    font-size: 15.5px;
    line-height: 1.55;
    margin-top: 6px;
  }

  /* La “línea firma” debajo del h2 un poco más corta en móvil */
  #comparativa .h2--rule::after{
    width: 44px;
    margin-top: 12px;
  }
}

/* ====== Compare Mobile: más jerarquía + contraste ====== */
@media (max-width: 720px){
  #comparativa .compare-mobile{
    gap: 12px;
    margin-top: 16px;
  }

  #comparativa .compare-card{
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(31,41,55,0.10);
    box-shadow: 0 10px 24px rgba(31,41,55,0.06);
    padding: 14px;
  }

  #comparativa .compare-card__k{
    color: rgba(31,58,95,0.92);
    font-size: 15px;
    margin-bottom: 10px;
  }

  /* Broker pill: más “hero”, agente pill: neutro */
  #comparativa .compare-pill{
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(31,58,95,0.14);
  }

  #comparativa .compare-pill__h{
    color: rgba(31,58,95,0.75);
  }

  #comparativa .compare-pill--muted{
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(31,41,55,0.10);
  }

  #comparativa .compare-pill__p{
    font-size: 15px;
    line-height: 1.4;
  }
}

/* ====== Callout Resultado: tarjeta premium ====== */
#comparativa .callout--result{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(31,58,95,0.14);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 10px 26px rgba(31,41,55,0.06);
}

#comparativa .callout--result .callout__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(31,58,95,0.10);
  color: rgba(31,58,95,0.92);
  font-weight: 900;
  flex: 0 0 auto;
}

#comparativa .callout--result .callout__title{
  font-weight: 850;
  color: rgba(31,58,95,0.92);
  margin-bottom: 3px;
}

#comparativa .callout--result .callout__text{
  color: rgba(31,41,55,0.74);
  line-height: 1.45;
}



/* =========================================================
   #comparativa — Desktop centrado + balance
========================================================= */

#comparativa .section-head--narrow,
#comparativa .table-wrap,
#comparativa .callout{
  max-width: 1100px;   /* balance en pantallas grandes */
  margin-left: auto;
  margin-right: auto;
}

/* Si quieres más “editorial” (más premium), baja a 980px */
@media (min-width: 1100px){
  #comparativa .section-head--narrow,
  #comparativa .table-wrap,
  #comparativa .callout{
    max-width: 980px;
  }
}

/* =========================================================
   Tabla comparativa — interior blanco (desktop)
========================================================= */

@media (min-width: 721px){

  /* Caja de la tabla */
  #comparativa .table-wrap{
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(17,24,39,0.06);
  }

  /* Tabla */
  #comparativa table.compare{
    width: 100%;
    background: #fff;
    border-collapse: collapse;
  }

  /* Celdas blancas SIEMPRE (evita tintes) */
  #comparativa table.compare th,
  #comparativa table.compare td{
    background: #fff;
  }

  /* Header de tabla ligeramente separado (premium) */
  #comparativa table.compare thead th{
    background: #fff;
    font-weight: 800;
    border-bottom: 1px solid rgba(17,24,39,0.08);
  }

  /* Líneas internas suaves */
  #comparativa table.compare tbody tr + tr th,
  #comparativa table.compare tbody tr + tr td{
    border-top: 1px solid rgba(17,24,39,0.06);
  }

  /* Más aire en desktop (balance) */
  #comparativa table.compare th,
  #comparativa table.compare td{
    padding: 18px 20px;
    vertical-align: top;
  }
}

/* =========================================================
   Mobile: solo editorial + resultado (sin tabla / sin cards)
========================================================= */

@media (max-width: 720px){

  /* Oculta tabla y también las cards mobile */
  #comparativa table.compare{ display: none; }
  #comparativa .compare-mobile{ display: none; }

  /* El wrapper no debe “parecer caja” si no hay tabla */
  #comparativa .table-wrap{
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  /* Ritmo vertical (balance) */
  #comparativa{
    padding-bottom: 92px; /* evita choque con sticky CTA */
  }

  #comparativa .section-head--narrow{
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Tipografía móvil proporcional */
  #comparativa .h2--rule{
    font-size: 26px;
    line-height: 1.12;
    margin-bottom: 10px;
  }

  #comparativa .section-head--narrow .muted{
    font-size: 15.5px;
    line-height: 1.55;
    margin-top: 8px;
  }

  /* Callout resultado: tarjeta premium y compacta */
  #comparativa .callout--result{
    max-width: 560px;
    margin: 16px auto 0;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(17,24,39,0.10);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(17,24,39,0.06);
  }

  #comparativa .callout--result .callout__icon{
    background: rgba(17,24,39,0.06);
  }
}

@media (min-width: 721px){
  #comparativa .h2--rule::after{
    width: 56px;
    margin-top: 14px;
  }
}


/* =========================================================
   Services slider (mobile) — premium horizontal carousel
========================================================= */

/* Desktop / tablet: que se comporte como antes (grid) */
@media (min-width: 721px){
  #servicios .svc-slider__controls,
  #servicios .svc-slider__hint{ display:none; }

  #servicios .svc-slider__viewport{ overflow: visible; }
  #servicios .svc-slider__track{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* si antes eran 2 columnas */
    gap: 16px;
  }
}

/* Mobile: carrusel horizontal */
@media (max-width: 720px){
  /* Controls */
  #servicios .svc-slider__controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 10px;
  }

  #servicios .svc-slider__btn{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(17,24,39,0.10);
    background: rgba(255,255,255,0.75);
    box-shadow: 0 10px 24px rgba(17,24,39,0.06);
    color: rgba(31,58,95,0.92);
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  #servicios .svc-slider__btn:focus-visible{
    outline: 2px solid rgba(31,58,95,0.35);
    outline-offset: 3px;
  }
  #servicios .svc-slider__btn[disabled]{
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* Dots */
  #servicios .svc-slider__dots{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,0.10);
    background: rgba(255,255,255,0.60);
  }
  #servicios .svc-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: rgba(31,41,55,0.25);
    cursor: pointer;
  }
  #servicios .svc-dot[aria-selected="true"]{
    width: 18px;
    background: rgba(31,58,95,0.85);
  }

  /* Viewport / Track */
  #servicios .svc-slider__viewport{
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 12px;
    border-radius: 18px;
  }
  #servicios .svc-slider__viewport::-webkit-scrollbar{ display:none; }

  #servicios .svc-slider__track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    gap: 14px;
  }

  /* Cards: misma clase .svc, solo aseguro comportamiento snap */
  #servicios .svc{
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Hint */
  #servicios .svc-slider__hint{
    display: block;
    margin-top: 8px;
    color: rgba(31,41,55,0.62);
    font-size: 13px;
    letter-spacing: 0.1px;
  }
}

/* Ultra small phones: que quepa mejor */
@media (max-width: 380px){
  #servicios .svc-slider__track{
    grid-auto-columns: 92%;
  }
}


/* ================================
   FAQ / Acordeón – Fix de contraste
   ================================ */

/* Contenido del acordeón */
.acc__content {
  color: #1f2937; /* gris oscuro premium (no negro duro) */
  background-color: transparent;
  line-height: 1.6;
}

/* Cuando el acordeón está abierto */
.acc[open] .acc__content {
  color: #1f2937;
}

/* Ajuste fino para textos largos */
.acc__content p,
.acc__content br {
  color: inherit;
}

/* Asegurar que NO herede blanco */
.accordion .acc__content {
  color: #1f2937 !important;
}

/* Mejorar lectura del contenido abierto */
.acc__content {
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}