/* =========================
   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: #0f172a; /* negro premium para textos informativos */
  --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__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;
  }
}

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


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

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


.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items: start; /* 🔥 CLAVE */
}

.hero__card {
  position: sticky;
  top: 1.5rem;
}


/* =========================
   Channel modal (WhatsApp / Email)
   ========================= */
.channel-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 19, 36, 0.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
}

.channel-modal.is-open { display: flex; }

.channel-modal__dialog {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  border: 1px solid rgba(17, 24, 39, 0.08);
  padding: 18px 18px 14px;
}

.channel-modal__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.channel-modal__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.channel-modal__sub {
  margin: 8px 0 0;
  color: rgba(17,24,39,.72);
  font-size: .95rem;
  line-height: 1.35;
}

.channel-modal__close {
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.channel-modal__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 520px) {
  .channel-modal__actions { grid-template-columns: 1fr 1fr; }
}

.channel-modal__note {
  margin-top: 10px;
  font-size: .85rem;
  color: rgba(17,24,39,.65);
}



/* =========================================================
   HERO — Pulido premium (balance óptico entre columnas)
   Pegar al FINAL de styles.css
========================================================= */

/* 1) Aire y alineación general */
.hero{
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(28px, 4vw, 52px);
}

.hero__grid{
  align-items: start;
  gap: clamp(22px, 3vw, 44px);
}

/* 2) Columna izquierda: ritmo vertical más limpio */
.hero__copy{
  padding-top: 2px; /* micro ajuste para alinear con card */
}

.hero .badge{
  margin-bottom: 14px;
}

.hero .h1{
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  max-width: 20ch; /* evita líneas demasiado largas */
}

/* Nota debajo del H1 (premium, discreta, en balance) */
.hero__note{
  margin: 10px 0 14px;
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(15, 31, 59, 0.74);
  max-width: 60ch;
}

/* Subtexto principal */
.hero .lead-text{
  margin: 0 0 16px;
  max-width: 66ch;
}

/* Bullets: separación consistente */
.trust-bullets{
  margin: 0 0 18px;
  gap: 10px;
}

/* CTA: que no “flote” */
.hero__cta{
  margin: 2px 0 18px;
}

/* 3) Meta-row: tarjetas parejas + mismo “peso” visual */
.meta-row{
  margin-top: 14px;
  align-items: stretch;
  gap: 14px;
}

/* Asegura altura óptica consistente */
.meta-card{
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Tarjeta single: centrado real + tipografía premium */
.meta-card--single{
  justify-content: center;
  align-items: center;
  text-align: center;
}

.meta-card__v--solo{
  font-size: 1.10rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
  max-width: 22ch;
}

/* 4) Card derecha: que se sienta “premium”, no pesada */
.hero__card .card{
  padding: 22px;
  border-radius: 18px;
}

/* Título de card */
.hero__card .h3{
  margin-bottom: 10px;
}

/* Pills: mejor respiración */
.pill-row{
  margin: 12px 0 16px;
  gap: 10px;
}

/* Botones del card: distancia consistente */
.contact-mini .btn{
  margin-top: 10px;
}

/* Separador sutil antes de horario */
.fineprint{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 41, 55, 0.10);
}

/* Nota bajo horario: más legible y premium */
.fineprint-note{
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(15, 31, 59, 0.70);
  max-width: 48ch;
}

/* 5) Responsive: en tablet deja 2 columnas hasta que realmente no quepa */
@media (max-width: 980px){
  .hero .h1{ max-width: 24ch; }
  .hero__card .card{ padding: 18px; }
}

@media (max-width: 720px){
  .meta-card{ min-height: 104px; }
  .meta-card__v--solo{ font-size: 1.05rem; }
}


/* ===== Comparativa: Kicker + VS (según anotaciones) ===== */

.compare-kicker--q{
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: rgba(15, 31, 59, 0.85);
  margin-bottom: 8px;
}

.table-wrap{ position: relative; }

.compare-vs{ display: none; }

@media (min-width: 980px){
  .compare-vs{
    display: inline-flex;
    position: absolute;
    top: 92px;          /* ajusta 84–104 si tu tabla sube/baja */
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 31, 59, 0.06);
    border: 1px solid rgba(15, 31, 59, 0.10);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 31, 59, 0.70);
    pointer-events: none;
  }
}

/* ================================
   FIX VS — centrado perfecto entre columnas
================================ */

/* Ajusta este porcentaje si tu 1ª columna (labels) es más ancha/angosta */
.table-wrap{
  position: relative;
  --compare-first-col: 26%; /* ancho estimado de la 1ª columna (Enfoque/Opciones...) */
}

/* Por defecto oculto (móvil usa compare-mobile) */
.compare-vs{ display: none; }

@media (min-width: 980px){
  .compare-vs{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    z-index: 5;

    /* ✅ Centro EXACTO entre "Asesoría patrimonial" y "Venta de productos" */
    left: calc(var(--compare-first-col) + (100% - var(--compare-first-col)) / 2);

    /* ✅ Altura EXACTA del header (evita caer en la primera fila) */
    top: 58px; /* si lo quieres 2px arriba/abajo: 56–62 */

    transform: translate(-50%, -50%);

    width: 40px;
    height: 26px;
    border-radius: 999px;

    background: rgba(15, 31, 59, 0.06);
    border: 1px solid rgba(15, 31, 59, 0.14);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 31, 59, 0.72);

    pointer-events: none;
  }
}

@media (min-width: 980px){
  .compare thead th{
    text-align: center;
    font-weight: 800;
  }
  .compare thead th:first-child{
    text-align: left;
  }
}


/* ================================
   VS PERFECTO: anclado al header de la tabla
   (no se descalibra nunca)
================================ */

/* Si aún tienes <div class="compare-vs">VS</div>, lo ocultamos */
.compare-vs { display: none !important; }

@media (min-width: 980px) {
  /* Asegura contexto para posicionamiento */
  .compare thead th { position: relative; }

  /* Creamos el VS exactamente en el borde entre columna 2 y 3 */
  .compare thead th:nth-child(2)::after {
    content: "VS";
    position: absolute;

    /* Borde derecho del th (divisor entre col 2 y 3) */
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);

    width: 40px;
    height: 26px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: rgba(15, 31, 59, 0.06);
    border: 1px solid rgba(15, 31, 59, 0.14);

    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 31, 59, 0.72);

    pointer-events: none;
    z-index: 2;
  }

  /* Opcional: centra títulos del header para look más premium */
  .compare thead th:nth-child(2),
  .compare thead th:nth-child(3) {
    text-align: center;
    font-weight: 800;
  }
}



/* =========================================
   Kicker principal – tamaño protagonista
========================================= */

.compare-kicker--q{
  font-size: 1.45rem;   /* ⬆️ MÁS GRANDE y evidente */
  font-weight: 800;
  line-height: 1.1;
}

/* Desktop grande */
@media (min-width: 980px){
  .compare-kicker--q{
    font-size: 1.6rem;  /* headline kicker */
  }
}

/* Mobile controlado */
@media (max-width: 420px){
  .compare-kicker--q{
    font-size: 1.15rem;
  }
}


/* =========================================
   TRUST LOGOS – NIVEL INSTITUCIONAL PREMIUM
========================================= */

.trust__logos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0 1.25rem;
  align-items: center;
}

.trust-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  transition: all .25s ease;
}

.trust-logo img{
  max-height: 38px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .75;
  transition: all .25s ease;
}

/* Hover elegante (confianza, no marketing agresivo) */
.trust-logo:hover{
  border-color: #d5dbea;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.trust-logo:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}

/* Mobile ajuste */
@media (max-width: 520px){
  .trust__logos{
    gap: .85rem;
  }

  .trust-logo img{
    max-height: 32px;
  }
}

.section--trust{
  background: radial-gradient(
    1200px 400px at 50% 0%,
    rgba(15, 118, 110, 0.06),
    transparent 70%
  );
}

.trust-logo img{
  max-height: 38px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(40%);
  opacity: 0.85;
  transition: all .25s ease;
}

.trust-logo:hover{
  border-color: #0f766e; /* Verde patrimonial */
  box-shadow: 0 14px 40px rgba(15, 118, 110, 0.18);
}

.trust-logo:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06);
}

.trust-card{
  position: relative;
  overflow: hidden;
}

.trust-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(15,118,110,0.05),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s ease;
}

.trust-card:hover::before{
  opacity: 1;
}

.trust-card__icon{
  background: rgba(15,118,110,0.1);
  color: #0f766e;
  border-radius: 50%;
}

.trust-logo img{
  filter: grayscale(15%);
  opacity: .92;
}

.trust-logo:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06);
}

.trust__logos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.trust-logo{
  width: 170px;        /* fuerza consistencia */
  height: 58px;        /* altura uniforme */
  display:flex;
  align-items:center;
  justify-content:center;
}

.trust-card:hover{
  box-shadow: 0 18px 48px rgba(15,118,110,.12);
  transform: translateY(-2px);
  transition: .25s ease;
}

.section h2, .section .h2{
  letter-spacing: -0.02em;
  line-height: 1.08;
}



/* =========================
   SERVICES: Premium Dynamic Cards (FINAL)
========================= */

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.svcGrid{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
  margin-top: 22px;
}

@media (min-width: 900px){
  .svcGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:22px; }
}

.svcCard{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17, 46, 74, .10);
  box-shadow: 0 14px 34px rgba(17, 46, 74, .08);
  transform: translateZ(0);
}

.svcCard:focus-within{
  outline: 3px solid rgba(20, 140, 120, .30);
  outline-offset: 2px;
}

/* Tap/Click overlay (for accessibility + mobile) */
.svcCard__toggle{
  position:absolute;
  inset:0;
  z-index:6;
  background: transparent;
  border:0;
  cursor:pointer;
}

/* FRONT FACE */
.svcCard__media{
  position:relative;
  min-height: 320px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 20px;
}

@media (min-width: 900px){
  .svcCard__media{ min-height: 340px; padding: 24px; }
}

/* Background image */
.svcCard__img{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform .55s ease;
  will-change: transform;
}

/* Premium overlay */
.svcCard__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 10% 0%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,0) 55%),
    linear-gradient(to top,
      rgba(9, 20, 32, .88) 0%,
      rgba(9, 20, 32, .64) 35%,
      rgba(9, 20, 32, .18) 70%,
      rgba(9, 20, 32, 0) 100%);
}

/* Badge */
.svcCard__badge{
  position:relative;
  z-index:2;
  align-self:flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

/* Title + teaser */
.svcCard__title{
  position:relative;
  z-index:2;
  margin: 10px 0 6px;
  color: #ffffff;
  font-weight: 850;
  line-height: 1.1;
  font-size: clamp(20px, 2.2vw, 28px);
  max-width: 24ch;
}

.svcCard__teaser{
  position:relative;
  z-index:2;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 14.5px;
  max-width: 64ch;
}

/* Hint */
.svcCard__hint{
  position:relative;
  z-index:2;
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.svcCard__hint::after{
  content:"→";
  transform: translateY(-1px);
}

.svcCard__hintDesktop{ display:none; }
.svcCard__hintMobile{ display:inline; }

@media (hover:hover) and (pointer:fine){
  .svcCard__hintDesktop{ display:inline; }
  .svcCard__hintMobile{ display:none; }
}

/* BACK FACE (DETAILS) */
.svcCard__content{
  position:absolute;
  inset:0;
  z-index:5;
  padding: 20px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  transform: translateY(102%);
  transition: transform .45s ease;
  overflow: visible;        /* ✅ No scroll */
  max-height: none;         /* ✅ No scroll */
}

@media (min-width: 900px){
  .svcCard__content{ padding: 24px; }
}

.svcCard__content .muted{
  color: rgba(17,46,74,.78);
}

.svcCard__content .list{
  margin-top: 14px;
}

/* Desktop reveal */
@media (hover:hover) and (pointer:fine){
  .svcCard:hover .svcCard__content{ transform: translateY(0%); }
  .svcCard:hover .svcCard__img{ transform: scale(1.08); }
  .svcCard:hover{
    box-shadow: 0 18px 44px rgba(17, 46, 74, .12);
    border-color: rgba(17, 46, 74, .14);
  }
}

/* Mobile: expand instead of overlay */
@media (hover:none){
  .svcCard__content{
    position: relative;
    inset: auto;
    transform: none;
    display: none; /* closed */
  }
  .svcCard.is-open .svcCard__content{
    display: block; /* open */
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .svcCard__content,
  .svcCard__img{ transition: none !important; }
}

/* ===== SERVICES: Layout perfecto con 3 cards ===== */
@media (min-width: 900px){
  .svcGrid--3 .svcCard:nth-child(3){
    grid-column: 1 / -1;  /* ocupa todo el ancho */
  }
  /* opcional: que la tercera se sienta “hero card” */
  .svcGrid--3 .svcCard:nth-child(3) .svcCard__media{
    min-height: 360px;
  }
}


/* =========================
   SERVICES — Cards dinámicas
========================= */

.svcColumns{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:start;
  margin-top: 22px;
}

.svcCol{
  display:flex;
  flex-direction:column;
  gap: 22px;
}

/* Card base */
.svcCard{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1620;
  border: 1px solid rgba(15, 30, 45, .08);
  box-shadow: 0 18px 60px rgba(10, 22, 35, .10);
  min-height: 280px;
}

.svcCard--primary{
  min-height: 340px;
}

/* Click target */
.svcCard__toggle{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index: 5;
}

/* Media background image */
.svcCard__media{
  position: relative;
  height: 100%;
  min-height: inherit;
  padding: 22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 10px;
}

.svcCard__img{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.02);
}

.svcCard__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(9,16,24,.22) 0%, rgba(9,16,24,.55) 45%, rgba(9,16,24,.92) 100%);
}

/* Badge */
.svcCard__badge{
  position: relative;
  z-index: 2;
  align-self:flex-start;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

/* Title + teaser */
.svcCard__title{
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(22px, 2.2vw, 30px);
  margin: 0;
}

.svcCard__teaser{
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.88);
  margin: 0;
  max-width: 56ch;
  font-size: 14.5px;
}

/* Hint */
.svcCard__hint{
  position: relative;
  z-index: 2;
  display:flex;
  gap: 10px;
  align-items:center;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  margin-top: 6px;
}

.svcCard__hintMobile{ display:none; }

/* Content panel (reveal) */
.svcCard__content{
  position:absolute;
  inset: 0;
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 100%);
  color: #0f1b26;

  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.svcCard__content .muted{
  color: rgba(15,27,38,.80);
}

.svcCard__content .list{
  margin: 0;
}

/* Hover reveal (solo desktop con hover real) */
@media (hover:hover) and (pointer:fine){
  .svcCard:hover .svcCard__content{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .svcCard:hover .svcCard__media{
    opacity: 0;
  }
}

/* Click reveal (mobile + accesible) */
.svcCard.is-open .svcCard__content{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.svcCard.is-open .svcCard__media{
  opacity: 0;
}

/* Focus ring */
.svcCard__toggle:focus-visible{
  outline: 3px solid rgba(46, 204, 160, .55);
  outline-offset: 3px;
  border-radius: 18px;
}

/* Advisor block */
.svcAdvisor{
  border-radius: 18px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,30,45,.10);
  box-shadow: 0 18px 60px rgba(10, 22, 35, .08);
  overflow: hidden;
}

.svcAdvisor__media{
  background: linear-gradient(180deg, rgba(12,24,38,.06), rgba(12,24,38,.02));
  display:flex;
  justify-content:center;
  padding: 14px 14px 0 14px;
}

.svcAdvisor__media img{
  width: 100%;
  max-width: 360px;
  height: auto;
  display:block;
  object-fit: contain;
  border-radius: 14px;
}

.svcAdvisor__copy{
  padding: 14px 16px 16px 16px;
}

.svcAdvisor__name{
  font-weight: 800;
  margin: 0 0 4px 0;
  color: #0f1b26;
}

.svcAdvisor__role{
  margin: 0 0 6px 0;
  color: rgba(15,27,38,.74);
  font-size: 13.5px;
}

.svcAdvisor__note{
  margin: 0;
  font-size: 13px;
  color: rgba(15,27,38,.68);
}

/* Responsive */
@media (max-width: 980px){
  .svcColumns{
    grid-template-columns: 1fr;
  }
  .svcCard__hintDesktop{ display:none; }
  .svcCard__hintMobile{ display:inline; }
}


/* === Layout pro: 3 cards izquierda / Dalila derecha === */
.svcColumns{
  display:grid;
  grid-template-columns: 1.15fr .85fr; /* izquierda más fuerte */
  gap: 26px;
  align-items:start;
  margin-top: 22px;
}

/* Columna izquierda: stack perfecto */
.svcCol--left{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

/* Columna derecha: bloque asesor estable + sticky suave */
.svcCol--right{
  display:flex;
  flex-direction:column;
  gap: 18px;
  position: relative;
}

/* Sticky solo en desktop grande */
@media (min-width: 1100px){
  .svcAdvisor{
    position: sticky;
    top: 96px; /* ajusta si tu header es más alto */
  }
}

/* === Advisor: premium card === */
.svcAdvisor{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,30,45,.10);
  box-shadow: 0 18px 60px rgba(10, 22, 35, .10);
}

/* marco visual para que la foto no flote en blanco */
.svcAdvisor__media{
  padding: 16px 16px 0 16px;
  background:
    radial-gradient(1200px 380px at 50% 0%, rgba(46,204,160,.14), transparent 55%),
    linear-gradient(180deg, rgba(12,24,38,.06), rgba(12,24,38,.02));
}

/* mejor composición de la foto (más elegante) */
.svcAdvisor__media img{
  width: 100%;
  max-width: 420px;         /* más grande pero controlado */
  height: auto;
  display:block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 16px;
  transform: translateY(6px); /* “asienta” */
}

/* copy más “institucional” */
.svcAdvisor__copy{
  padding: 14px 18px 18px 18px;
}

.svcAdvisor__name{
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #0f1b26;
}

.svcAdvisor__role{
  margin: 0 0 8px 0;
  font-size: 13.5px;
  color: rgba(15,27,38,.72);
}

.svcAdvisor__note{
  margin: 0;
  font-size: 13px;
  color: rgba(15,27,38,.66);
}

/* Stack más elegante: alturas consistentes */
.svcCol--left .svcCard{
  min-height: 240px;
}

.svcCol--left .svcCard--primary{
  min-height: 300px; /* destaca la principal */
}



/* =========================
   SERVICES — Layout Pro
========================= */

/* 2 columnas desktop / 1 columna mobile */
.svcColumns{
  display:grid;
  grid-template-columns: 1.18fr .82fr; /* izquierda domina */
  gap: 26px;
  align-items:start;
  margin-top: 22px;
}

@media (max-width: 980px){
  .svcColumns{
    grid-template-columns: 1fr;
  }
}

/* Izquierda: stack perfecto */
.svcCol--left{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

/* Derecha: solo Dalila */
.svcCol--right{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

/* Sticky (solo desktop grande) */
@media (min-width: 1100px){
  .svcAdvisor{
    position: sticky;
    top: 96px; /* ajusta si tu header ocupa más */
  }
}

/* =========================
   Cards (base)
========================= */

.svcCard{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,30,45,.10);
  box-shadow: 0 18px 60px rgba(10, 22, 35, .10);
}

/* alturas consistentes */
.svcCol--left .svcCard{ min-height: 240px; }
.svcCol--left .svcCard--primary{ min-height: 300px; }

/* Layer imagen */
.svcCard__media{
  position: relative;
  height: 100%;
  min-height: 240px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 18px;
}

.svcCard--primary .svcCard__media{ min-height: 300px; }

.svcCard__img{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.svcCard__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,16,22,.10) 0%, rgba(10,16,22,.72) 75%),
    radial-gradient(900px 380px at 20% 0%, rgba(46,204,160,.18), transparent 60%);
}

/* Texto encima */
.svcCard__badge,
.svcCard__title,
.svcCard__teaser,
.svcCard__hint{
  position: relative;
  z-index: 2;
  color: #fff;
}

.svcCard__badge{
  align-self:flex-start;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  margin-bottom: 10px;
}

.svcCard__title{
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.svcCard__teaser{
  margin: 0;
  max-width: 54ch;
  font-size: 13.5px;
  color: rgba(255,255,255,.88);
}

.svcCard__hint{
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,.80);
}

/* Toggle botón invisible para accesibilidad */
.svcCard__toggle{
  position:absolute;
  inset:0;
  z-index: 5;
  border:0;
  background: transparent;
  cursor: pointer;
}

/* Contenido oculto/revelado */
.svcCard__content{
  display: none;
  padding: 18px 18px 18px 18px;
  border-top: 1px solid rgba(15,30,45,.10);
}

.svcCard.is-open .svcCard__content{
  display:block;
}

/* Hover desktop: revela */
@media (hover:hover){
  .svcCard:hover .svcCard__content{
    display:block;
  }
}

/* Hint desktop/mobile */
.svcCard__hintDesktop{ display:inline; }
.svcCard__hintMobile{ display:none; }

@media (max-width: 980px){
  .svcCard__hintDesktop{ display:none; }
  .svcCard__hintMobile{ display:inline; }
}

/* =========================
   Advisor — premium card
========================= */

.svcAdvisor{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,30,45,.10);
  box-shadow: 0 18px 60px rgba(10, 22, 35, .10);
}

.svcAdvisor__media{
  padding: 16px 16px 0 16px;
  background:
    radial-gradient(1200px 380px at 50% 0%, rgba(46,204,160,.14), transparent 55%),
    linear-gradient(180deg, rgba(12,24,38,.06), rgba(12,24,38,.02));
}

.svcAdvisor__media img{
  width: 100%;
  max-width: 420px;
  height: auto;
  display:block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 16px;
  transform: translateY(6px);
}

.svcAdvisor__copy{
  padding: 14px 18px 18px 18px;
}

.svcAdvisor__name{
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #0f1b26;
}

.svcAdvisor__role{
  margin: 0 0 8px 0;
  font-size: 13.5px;
  color: rgba(15,27,38,.72);
}

.svcAdvisor__note{
  margin: 0;
  font-size: 13px;
  color: rgba(15,27,38,.66);
}

.svcAdvisor__cta{
  display:inline-flex;
  margin-top: 10px;
  font-weight: 800;
  font-size: 13.5px;
  text-decoration: none;
  color: #0f1b26;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(46,204,160,.16);
  border: 1px solid rgba(46,204,160,.28);
  transition: transform .18s ease;
}

.svcAdvisor__cta:hover{
  transform: translateY(-1px);
}


/* =========================
   FIX BALANCE: mismas alturas en todas las cards
========================= */

/* 1) MISMA ALTURA EN DESKTOP */
@media (min-width: 981px){
  .svcCol--left .svcCard,
  .svcCol--left .svcCard--primary{
    min-height: 260px !important;
  }

  .svcCol--left .svcCard .svcCard__media,
  .svcCol--left .svcCard--primary .svcCard__media{
    min-height: 260px !important;
  }
}

/* 2) MOBILE: un poco más altas para legibilidad */
@media (max-width: 980px){
  .svcCol--left .svcCard,
  .svcCol--left .svcCard--primary{
    min-height: 250px !important;
  }

  .svcCol--left .svcCard .svcCard__media,
  .svcCol--left .svcCard--primary .svcCard__media{
    min-height: 250px !important;
  }
}

/* 3) Opcional: títulos consistentes (evita que una card crezca por texto) */
.svcCard__title{
  max-width: 22ch;
}


/* =========================
   SOLO TEXTO GRIS → NEGRO
   (no afecta azules ni CTAs)
========================= */

/* Clases típicas de texto gris */
.muted,
.text-muted,
.description,
.subtext,
.trust-card__text,
.info-card p,
.faq p,
.lead p {
  color: #0f172a; /* negro premium */
}


/* =====================================================
   FIX QUIRÚRGICO: GRIS → NEGRO (solo secciones marcadas)
   Negro premium recomendado: #0f172a
===================================================== */

/* 1) Info abajo de Dalila + fineprint del formulario */
.svcAdvisor__role,
.svcAdvisor__note,
.fineprint,
.fineprint-note{
  color: #0f172a !important;
}

/* 1) Primer texto dentro de tarjetas informativas + texto bajo título de sección (Confianza) */
.section.trust .muted,
.section.trust .trust-card__text,
.section.trust .micro.trust__note{
  color: #0f172a !important;
}

/* 2) Texto bajo título de “Estrategia” */
#comparativa .section-head--narrow .muted{
  color: #0f172a !important;
}

/* 2) Contenido de la tabla (desktop) — estaba en rgba(...) */
#comparativa .compare td,
#comparativa .compare tbody th{
  color: #0f172a !important;
}

/* 2) Contenido de la comparativa (mobile cards) */
#comparativa .compare-pill__p{
  color: #0f172a !important;
}

/* 2) Texto después de “Resultado” */
#comparativa .callout--result .callout__text{
  color: #0f172a !important;
}

/* 3) Texto bajo título de Confianza + “La selección final…” ya cubierto arriba,
      pero por seguridad extra: */
.section.trust .section-head .muted{
  color: #0f172a !important;
}


/* =====================================================
   TRUST LOGOS — BALANCE PERFECTO 4 / 3
===================================================== */

.trust__logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 arriba */
  gap: 24px 32px;
  justify-items: center;
  align-items: center;
  max-width: 920px;
  margin: 32px auto 0;
}

/* Logos individuales */
.trust-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Tamaño de logos */
.trust-logo img {
  max-height: 36px;
  width: auto;
  opacity: .9;
  filter: grayscale(0);
}

/* Hover premium sutil */
.trust-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* --------- BREAKPOINTS --------- */

/* Tablet */
@media (max-width: 1024px) {
  .trust__logos {
    grid-template-columns: repeat(3, 1fr); /* 3 / 3 / 1 */
    max-width: 760px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .trust__logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 100%;
  }

  .trust-logo {
    padding: 12px;
  }

  .trust-logo img {
    max-height: 32px;
  }
}


/* IMAGEN DALILA FORMS*/

/* =====================================================
   LEAD — FORM A LA IZQUIERDA (debajo de proof) + FOTO A LA DERECHA
===================================================== */

.lead.lead--with-photo{
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(360px, 520px);
  gap: 32px;
  align-items: start;
}

/* Columna izquierda */
.lead__left{
  display: grid;
  gap: 18px;
}

.proof-mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

/* Asegura que el form quede abajo y se sienta “con peso” */
.lead__form{
  margin-top: 10px;
}

/* Columna derecha (foto) */
.lead__photo{
  position: sticky;
  top: 96px; /* ajusta si tu header es más alto */
}

.lead__photoCard{
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 86, 136, 0.10), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
}

.lead__photoCard img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 18px 18px 0;
}

.lead__photoMeta{
  padding: 14px 18px 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(15,23,42,0.06);
}

.lead__name{
  font-weight: 800;
  color: var(--text, #0f172a);
  letter-spacing: -0.01em;
}

.lead__role,
.lead__note{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: #0f172a; /* negro premium para confianza */
  opacity: .86;
}

/* -------- Responsive -------- */
@media (max-width: 1024px){
  .lead.lead--with-photo{
    grid-template-columns: 1fr;
  }
  .lead__photo{
    position: relative;
    top: auto;
    order: 2; /* foto debajo del copy/proof */
  }
  .lead__left{
    order: 1;
  }
}

@media (max-width: 720px){
  .proof-mini{
    grid-template-columns: 1fr;
  }
  .lead__photoCard img{
    padding: 14px 14px 0;
  }
}

/* =====================================================
   LEAD (FIX PRO) — Copy+Proof+Form IZQ / Foto DER
   Evita conflicto con .lead (texto)
===================================================== */

#lead .lead-layout{
  /* “reset” del conflicto de .lead */
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: inherit;

  /* layout real */
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(360px, 520px);
  gap: 32px;
  align-items: start;
}

/* Columna izquierda (todo apilado: copy -> proof -> form) */
#lead .lead__left{
  display: grid;
  gap: 18px;
}

/* Los 3 cuadros informativos */
#lead .proof-mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

/* El form queda abajo y con buen “peso” */
#lead .lead__form{
  margin-top: 6px;
}

/* Columna derecha (foto) */
#lead .lead__photo{
  position: sticky;
  top: 96px; /* ajusta si tu header es más alto */
}

/* Card premium de la foto */
#lead .lead__photoCard{
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 86, 136, 0.10), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
}

#lead .lead__photoCard img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 18px 18px 0;
}

#lead .lead__photoMeta{
  padding: 14px 18px 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(15,23,42,0.06);
}

/* Responsive */
@media (max-width: 1024px){
  #lead .lead-layout{
    grid-template-columns: 1fr;
  }
  #lead .lead__photo{
    position: relative;
    top: auto;
    order: 2; /* foto después del copy/proof */
  }
  #lead .lead__left{
    order: 1;
  }
}

@media (max-width: 720px){
  #lead .proof-mini{
    grid-template-columns: 1fr;
  }
  #lead .lead__photoCard img{
    padding: 14px 14px 0;
  }
}



/*FORMSSSS*/

/* =========================================================
   LEAD (FORM) — Premium Balance / No Overlap / High Trust
   Pegar al FINAL del styles.css
   ========================================================= */

#lead .lead-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

/* Columna izquierda */
#lead .lead__left{
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  min-width: 0;
}

#lead .lead__sub{
  max-width: 60ch;
}

/* Proof mini: tarjetas limpias */
#lead .proof-mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

#lead .proof-mini__item{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,41,55,.10);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

#lead .proof-mini__k{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .70;
  margin-bottom: 6px;
}

#lead .proof-mini__v{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}

/* Wrap del form (da aire y jerarquía) */
#lead .lead__formWrap{
  display: grid;
  gap: 14px;
}

/* Intro del form */
#lead .lead__formIntro{
  padding: 14px 14px;
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.85),
    rgba(255,255,255,.70)
  );
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  max-width: 720px;
}

#lead .lead__badgeRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#lead .lead__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,118,110,.22);
  background: rgba(15,118,110,.08);
  color: rgba(15, 23, 42, .92);
}

#lead .lead__badge--soft{
  border-color: rgba(31,41,55,.14);
  background: rgba(31,41,55,.06);
}

#lead .lead__formTitle{
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
}

#lead .lead__formDesc{
  margin: 0;
  opacity: .86;
  max-width: 62ch;
}

/* Card del form: PREMIUM (blanco, sólido, confianza) */
#lead .lead__form.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(31,41,55,.12);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
  padding: clamp(18px, 2.4vw, 28px);
}

/* Bloques internos del form (ritmo vertical) */
#lead .form__block{
  display: grid;
  gap: 14px;
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(31,41,55,.08);
}

#lead .form__block:last-of-type{
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 12px;
}

/* Ajuste fino a rows */
#lead .form__row{
  margin-bottom: 0;
}

#lead .field-hint{
  margin-top: 8px;
  color: rgba(31,41,55,.70);
}

/* Micro confianza bajo CTA */
#lead .trust-under-cta{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(31,41,55,.04);
  border: 1px solid rgba(31,41,55,.08);
}

#lead .trust-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: rgba(15,118,110,.65);
}

/* CTAs secundarios más “soft” */
#lead .alt-ctas--soft{
  margin-top: 16px;
  opacity: .92;
}

#lead .alt-ctas--soft .btn{
  font-size: 0.95rem;
}

/* Columna derecha (foto) */
#lead .lead__photo{
  min-width: 0;
}

@media (min-width: 1025px){
  #lead .lead__photo{
    position: sticky;
    top: 96px;
  }
}

#lead .lead__photoCard{
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(31,58,95,.10),
    rgba(15,118,110,.06)
  );
  border: 1px solid rgba(31,41,55,.12);
  box-shadow: 0 22px 60px rgba(15,23,42,.10);
}

#lead .lead__photoCard img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 18px 18px 0;
}

#lead .lead__photoMeta{
  padding: 14px 18px 18px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(31,41,55,.08);
}

#lead .lead__name{
  font-weight: 900;
  letter-spacing: -0.01em;
}

#lead .lead__role,
#lead .lead__note{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  opacity: .86;
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px){
  #lead .lead-layout{
    grid-template-columns: 1fr;
  }
  #lead .lead__photo{
    position: relative;
    top: auto;
    order: 2; /* foto debajo */
  }
  #lead .lead__left{
    order: 1;
  }
  #lead .proof-mini{
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 520px){
  #lead .lead__form.card{
    padding: 16px;
    border-radius: 18px;
  }
  #lead .lead__formIntro{
    padding: 14px;
    border-radius: 18px;
  }
  #lead .lead__photoCard img{
    padding: 14px 14px 0;
  }
}


/*FORMSSS*/

/* =========================================================
   #lead — PREMIUM BALANCE (Pegar AL FINAL del styles.css)
   ========================================================= */

/* Evita cortes y conflictos de grids anteriores */
#lead .lead-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: clamp(22px, 3vw, 56px);
  align-items: start;
}

#lead .lead__left{
  min-width: 0;
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  position: relative;
  z-index: 2; /* evita “fantasmas” detrás */
}

/* PANEL (copy + proof) */
#lead .lead__panel{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,41,55,.10);
  border-radius: 22px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(10px);
}

#lead .lead__badges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#lead .lead__badge{
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,118,110,.22);
  background: rgba(15,118,110,.08);
}

#lead .lead__badge--soft{
  border-color: rgba(31,41,55,.14);
  background: rgba(31,41,55,.06);
}

#lead .lead__title{
  margin: 0 0 8px;
}

#lead .lead__sub{
  margin: 0;
  max-width: 70ch;
}

/* PROOF */
#lead .proof-mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

#lead .proof-mini__item{
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(31,41,55,.08);
  border-radius: 16px;
  padding: 12px 12px;
}

#lead .proof-mini__k{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .70;
  margin-bottom: 6px;
}

#lead .proof-mini__v{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
}

/* FORM WRAP */
#lead .lead__formWrap{
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 760px;
}

/* Intro del form */
#lead .lead__formIntro{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border: 1px solid rgba(31,41,55,.10);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

#lead .lead__formTitle{
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  letter-spacing: -0.01em;
}

#lead .lead__formDesc{
  margin: 0;
  opacity: .86;
  max-width: 68ch;
}

/* Asegura que el form NO se haga “angosto” por reglas previas */
#lead form.form.card,
#lead .lead__form.card{
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  position: relative;
  z-index: 2;
}

/* Card del form */
#lead .lead__form.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(31,41,55,.12);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
  padding: clamp(18px, 2.4vw, 26px);
}

/* Bloques internos (ritmo premium) */
#lead .form__block{
  display: grid;
  gap: 14px;
  padding: 0 0 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(31,41,55,.08);
}

#lead .form__block:last-of-type{
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 12px;
}

/* Confianza bajo CTA */
#lead .trust-under-cta{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(31,41,55,.04);
  border: 1px solid rgba(31,41,55,.08);
}

#lead .trust-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: rgba(15,118,110,.65);
}

/* CTAs secundarios menos agresivos */
#lead .alt-ctas--soft{
  margin-top: 14px;
  opacity: .92;
}

#lead .alt-ctas--soft .btn{
  font-size: .95rem;
}

/* FOTO */
#lead .lead__photo{
  min-width: 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px){
  #lead .lead__photo{
    position: sticky;
    top: 96px;
  }
}

#lead .lead__photoCard{
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(31,58,95,.10), rgba(15,118,110,.06));
  border: 1px solid rgba(31,41,55,.12);
  box-shadow: 0 22px 60px rgba(15,23,42,.10);
}

#lead .lead__photoCard img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 18px 18px 0;
}

#lead .lead__photoMeta{
  padding: 14px 18px 18px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(31,41,55,.08);
}

/* RESPONSIVE */
@media (max-width: 1024px){
  #lead .lead-layout{
    grid-template-columns: 1fr;
  }
  #lead .lead__photo{
    position: relative;
    top: auto;
    order: 2;
  }
  #lead .lead__left{
    order: 1;
  }
  #lead .proof-mini{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  #lead .lead__panel,
  #lead .lead__form.card{
    border-radius: 18px;
  }
  #lead .lead__photoCard img{
    padding: 14px 14px 0;
  }
}

/* =========================================================
   #lead — FIX DEFINITIVO (alineación + ancho + balance)
   Pegar AL FINAL del styles.css
   ========================================================= */

/* 1) Grid principal: NO uses min 560 (eso rompe y corta) */
#lead .lead-layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) !important;
  gap: clamp(22px, 3vw, 56px) !important;
  align-items: start !important;
}

/* 2) Columna izquierda: que todo se apile y NO se encoga */
#lead .lead__left{
  min-width: 0;
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  justify-items: start; /* CLAVE: evita el “centrado raro” */
}

/* 3) Panel e intro: mismo ancho, alineados */
#lead .lead__panel,
#lead .lead__formIntro,
#lead .lead__formWrap{
  width: 100%;
  max-width: 760px; /* ancho premium consistente */
}

/* 4) Form: ANULA cualquier max-width/justify-self heredado */
#lead form#leadForm,
#lead .lead__form.card,
#lead form.form.card,
#lead .form.card{
  width: 100% !important;
  max-width: 760px !important;  /* mismo ancho que panel */
  justify-self: start !important;
  margin: 0 !important;
}

/* 5) Dentro del form: inputs/select/textarea a 100% */
#lead .lead__form input,
#lead .lead__form select,
#lead .lead__form textarea{
  width: 100%;
}

/* 6) Proof cards: 3 columnas en desktop, 1 columna en tablet/mobile */
#lead .proof-mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1024px){
  #lead .lead-layout{
    grid-template-columns: 1fr !important;
  }

  #lead .lead__photo{
    order: 2;
    position: relative !important;
    top: auto !important;
  }

  #lead .lead__left{
    order: 1;
  }

  #lead .proof-mini{
    grid-template-columns: 1fr;
  }

  /* en tablet/mobile todo al 100% */
  #lead .lead__panel,
  #lead .lead__formIntro,
  #lead .lead__formWrap,
  #lead .lead__form.card{
    max-width: 100% !important;
  }
}

/* 7) Desktop: foto sticky elegante sin afectar layout */
@media (min-width: 1025px){
  #lead .lead__photo{
    position: sticky;
    top: 96px;
  }
}


/* =========================================================
   #lead — FORM FULL WIDTH (mata el “form flaco centrado”)
   Pegar AL FINAL del styles.css
   ========================================================= */

/* Grid del lead */
#lead .lead-layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) !important;
  gap: clamp(22px, 3vw, 56px) !important;
  align-items: start !important;
}

/* Columna izquierda */
#lead .lead__left{
  min-width: 0;
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  justify-items: stretch; /* CLAVE */
}

/* El wrap del form ocupa todo */
#lead .lead__formWrap{
  width: 100%;
  max-width: 100%;
}

/* 🔥 FIX: anula reglas globales tipo .form.card {max-width:470px; margin:0 auto;} */
#lead form#leadForm.form.card,
#lead .lead__form.form.card,
#lead .lead__form.card,
#lead #leadForm{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
}

/* Header interno del form (en vez de la tarjeta aparte) */
#lead .form__header{
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(31,41,55,.08);
}

#lead .form__title{
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  letter-spacing: -0.01em;
}

#lead .form__desc{
  margin: 0;
  opacity: .86;
  max-width: 70ch;
}

/* Inputs full width por seguridad */
#lead .lead__form input,
#lead .lead__form select,
#lead .lead__form textarea{
  width: 100%;
}

/* Responsive: 1 columna en tablet/mobile */
@media (max-width: 1024px){
  #lead .lead-layout{
    grid-template-columns: 1fr !important;
  }
  #lead .lead__photo{
    order: 2;
    position: relative !important;
    top: auto !important;
  }
}

/* =========================================================
   #lead — COMPACT PRO (menos scroll, más valor)
   Pegar AL FINAL del styles.css
   ========================================================= */

/* Reduce altura general SIN perder aire premium */
#lead .lead__panel{ padding: clamp(14px, 2vw, 18px); }
#lead .lead__panel .lead__sub{ margin-top: 6px; }
#lead .proof-mini{ margin-top: 12px; gap: 10px; }
#lead .proof-mini__item{ padding: 10px 10px; border-radius: 14px; }
#lead .proof-mini__v{ font-size: 13.5px; }

/* Form card: menos padding y mejor densidad */
#lead .lead__form.card{
  padding: clamp(16px, 2vw, 22px);
}

/* Header del form: compacto */
#lead .form__header{ margin-bottom: 14px; padding-bottom: 12px; }
#lead .form__desc{ max-width: 68ch; }

/* Grid 2 columnas para los 4 campos principales */
#lead .leadFormGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 14px;
}

/* Reduce espacio vertical por row */
#lead .form__row{
  margin-bottom: 0;
}

/* Reduce hints para que no empujen tanto */
#lead .field-hint{
  margin-top: 6px;
  font-size: 0.92rem;
  line-height: 1.35;
  opacity: .78;
}

/* Contexto: más compacto visualmente */
#lead textarea#notes{
  min-height: 90px;
}

/* Privacidad + CTA: más pegados */
#lead .form__row--check{
  margin-top: 8px;
}
#lead .form__actions{
  margin-top: 10px;
}

/* Alt CTAs: en fila (desktop) para no empujar hacia abajo */
@media (min-width: 900px){
  #lead .alt-ctas--soft{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  #lead .alt-ctas--soft .btn{
    padding: 10px 12px;
    font-size: 0.92rem;
    white-space: nowrap;
  }
}

/* Tablet/Mobile: vuelve a 1 columna (sin apretar) */
@media (max-width: 900px){
  #lead .leadFormGrid{
    grid-template-columns: 1fr;
  }
  #lead .alt-ctas--soft{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/*NUEVO*/
.form-step{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: #6b7280;
}

.step-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
}

.step-dot.active{
  background: var(--brand);
}

.step-label{
  margin-left: 6px;
}


/* =========================================================
   Insurance multi-select — PREMIUM CHIPS (más finos, menos espacio)
   ========================================================= */

.insurance-options{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Chip base */
.insurance-option{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-size: 0.95rem;
  line-height: 1.1;
  color: #111827;
  white-space: nowrap; /* evita chips altos por saltos */
}

/* Oculta checkbox real */
.insurance-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Indicador circular (elegante, tipo “selección premium”) */
.insurance-option::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(17,24,39,.22);
  background: transparent;
  transition: all .2s ease;
  flex: 0 0 auto;
}

/* Hover sutil */
.insurance-option:hover{
  border-color: rgba(17,24,39,.28);
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
  transform: translateY(-1px);
}

/* ✅ Selected */
.insurance-option:has(input:checked){
  border-color: rgba(0, 120, 140, .55);
  background: rgba(0, 120, 140, .08);
  box-shadow: 0 14px 28px rgba(0, 120, 140, .10);
}

/* Punto lleno cuando está seleccionado */
.insurance-option:has(input:checked)::before{
  border-color: var(--brand);
  background: var(--brand);
}

/* Texto dentro del chip: un poco más fino */
.insurance-option span{
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* En pantallas chicas, permitimos 2 líneas controladas */
@media (max-width: 520px){
  .insurance-option{
    white-space: normal;
    padding: 10px 12px;
  }
}

.insurance-option:has(input:checked){
  font-weight: 600;
}

.insurance-option:has(input:checked)::after{
  content: "✓";
  font-size: 0.7rem;
  color: white;
  background: var(--brand);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


:root{
  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* =========================
   TIPOGRAFÍA PATRIMONIAL — TÍTULOS
========================= */

.h1,
.h2,
.section-head .h2,
.hero h1,
.hero .h1{
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* H1 más editorial (impacto alto) */
.h1,
.hero h1{
  letter-spacing: -0.02em;
}

/* H3 se mantiene moderna (no serif) */
.h3{
  font-family: inherit;
  font-weight: 750;
}


:root{
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body{
  font-family: var(--font-body);
  font-weight: 400;
}




/* =========================================================
   THEME OVERRIDE — Paleta Premium (append al FINAL)
   Títulos: #6E8B7D | Fondo: #2E2E2E | Texto: #F7F7F5 | Acentos: #5B7C8C
   ========================================================= */

/* =========================================================
   FINAL COLOR OVERRIDE — Premium Balance (append al FINAL)
   ========================================================= */

:root{
  /* === BRAND COLORS (DEFINITIVOS) === */
  --steel: #427898;      /* Títulos / headings */
  --teal:  #688662;      /* Acentos / detalles */
  --white: #f7f7f5;      /* Fondo principal */
  --charcoal: #2e2e2e;   /* Texto principal */

  /* === SYSTEM MAPPING === */
  --bg: var(--white);
  --bg2: #ffffff;
  --surface: rgba(46,46,46,.04);
  --surface2: rgba(46,46,46,.07);

  --text: var(--charcoal);
  --muted: rgba(46,46,46,.75);
  --border: rgba(46,46,46,.14);

  --accent: var(--steel);
  --accent2: var(--teal);

  --accent-rgb: 66, 120, 152;   /* #427898 */
  --accent2-rgb: 104, 134, 98;  /* #688662 */

  --shadow: 0 18px 55px rgba(0,0,0,.10);
}

/* ===============================
   BASE
================================ */

html, body{
  background: var(--bg);
  color: var(--charcoal);
}

/* Texto general */
p,
li,
span,
label{
  color: var(--charcoal);
}

/* ===============================
   HEADINGS
================================ */

h1, h2, h3, h4, h5{
  color: var(--steel);
  letter-spacing: -0.02em;
}

/* ===============================
   LINKS
================================ */

a{
  color: var(--steel);
}
a:hover{
  color: rgba(var(--accent-rgb), .8);
}

/* ===============================
   HEADER / TOPBAR
================================ */

header,
.navbar,
.topbar{
  background: rgba(247,247,245,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* ===============================
   SECCIONES
================================ */

.section--soft{
  background: #ffffff;
}

.section--alt{
  background: rgba(46,46,46,.03);
}

/* ===============================
   CARDS (servicios, confianza, etc.)
================================ */

.card,
.info-card,
.trust-card,
.service-card,
.form.card{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.card:hover,
.info-card:hover,
.trust-card:hover,
.service-card:hover{
  background: var(--surface2);
}

/* ===============================
   ICONOS / ACENTOS
================================ */

.icon,
.accent,
.trust-card__icon,
.service-card__icon{
  color: var(--teal);
}

/* ===============================
   BOTONES
================================ */

/* CTA principal */
.btn-primary{
  background-color: var(--steel);
  color: #ffffff;
  border: none;
}

.btn-primary:hover{
  background-color: rgba(var(--accent-rgb), .85);
}

/* CTA secundario */
.btn-secondary,
.btn--ghost{
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
}

.btn-secondary:hover,
.btn--ghost:hover{
  background: rgba(var(--accent2-rgb), .12);
}

/* ===============================
   FORMULARIOS
================================ */

input,
select,
textarea{
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--charcoal);
}

input::placeholder,
textarea::placeholder{
  color: rgba(46,46,46,.6);
}

input:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(var(--accent2-rgb), .18);
}

/* ===============================
   DIVISORES
================================ */

hr,
.divider{
  border-color: rgba(var(--accent-rgb), .25);
}



/* =========================================
   HERO CTA — Asesoría privada (azul claro)
========================================= */

.hero__cta .btn--primary{
  background-color: #427898; /* azul claro */
  color: #ffffff;
  border: none;
}

.hero__cta .btn--primary:hover{
  background-color: rgba(66,120,152,.88);
}

.hero__cta .btn--primary:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(66,120,152,.25);
}





/*HERO*/
/* =========================================================
   HERO RIGHT COLUMN — Media frame + Card below (premium)
   Pegar al FINAL de styles.css
   ========================================================= */

.hero__right{
  display: flex;
  flex-direction: column;
  gap: 18px; /* separación entre imagen y tarjeta */
}

/* Caja de imágenes (medidas definidas) */
.media-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;            /* ✅ Medida perfecta para hero (no muy alta) */
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(46,46,46,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

/* Imágenes apiladas para fade */
.media-frame__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 520ms ease, transform 900ms ease;
}

.media-frame__img.is-active{
  opacity: 1;
  transform: scale(1.00);
}

/* Caption debajo */
.media-caption{
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: rgba(46,46,46,.75);
}
.media-caption__k{
  font-weight: 600;
  color: #2e2e2e;
}
.media-caption__v{
  color: rgba(46,46,46,.78);
}

/* Botones prev/next */
.media-frame__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(46,46,46,.14);
  background: rgba(247,247,245,.92);
  color: #2e2e2e;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.media-frame__nav:hover{
  background: #ffffff;
  transform: translateY(-50%) scale(1.04);
}

.media-frame__nav:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(66,120,152,.18);
}

.media-frame__nav--prev{ left: 12px; }
.media-frame__nav--next{ right: 12px; }

/* Dots */
.media-dots{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
  pointer-events: auto;
}

.media-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(46,46,46,.18);
  background: rgba(247,247,245,.8);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.media-dot.is-active{
  background: #427898; /* azul títulos */
  border-color: rgba(66,120,152,.35);
  transform: scale(1.15);
}

/* Bajamos visualmente la tarjeta (sin mover grid) */
.hero__card{
  margin-top: 6px;
}

/* Mobile: mantiene orden lógico y tamaño cómodo */
@media (max-width: 900px){
  .media-frame{
    aspect-ratio: 16 / 10; /* un poco más panorámico en móvil */
    border-radius: 16px;
  }
}

/* =========================================================
   HERO — Imagen protagonista + card compacta
   Pegar al FINAL de styles.css
   ========================================================= */

/* Asegura que el grid no centre verticalmente y se vea “editorial” */
.hero__grid{
  align-items: start;
}

/* Columna derecha: más espacio a la imagen */
.hero__right{
  gap: 14px; /* menos separación para que la imagen “mande” */
}

/* Imagen MÁS GRANDE (protagonista) */
.media-frame{
  /* Altura inteligente: grande en desktop, contenida en mobile */
  height: clamp(320px, 32vw, 520px);
  aspect-ratio: auto; /* usaremos height + width para dominar */
  border-radius: 20px;
}

/* Ajuste de imagen para verse premium */
.media-frame__img{
  object-fit: cover;
}

/* Reducimos la caption para no robar espacio */
.media-caption{
  margin-top: 8px;
  font-size: 0.92rem;
}

/* Card compacta: menos padding y menos “peso” visual */
.hero-card--compact{
  padding: 18px;
}

.hero-card--compact .h3{
  margin-bottom: 8px;
}

.hero-card--compact .muted{
  margin: 0;
  line-height: 1.5;
}

/* Mobile: imagen sigue protagonista pero no gigantesca */
@media (max-width: 900px){
  .media-frame{
    height: clamp(240px, 58vw, 360px);
    border-radius: 16px;
  }
}


.media-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(66,120,152,.08),
    rgba(66,120,152,.02)
  );
  pointer-events: none;
}

.media-frame__img{
  transition:
    opacity 520ms ease,
    transform 1200ms ease;
}


.h1{
  font-weight: 600;
}

.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(66,120,152,.06),
    rgba(66,120,152,.01)
  );
  pointer-events:none;
}

.trust-bullets li{
  gap: 10px;
}
.trust-bullets .icon{
  color: #688662; /* verde acento */
}


/* ==========================
   Tags sobre el slider
========================== */

.media-tag {
  position: absolute;
  bottom: 16px;
  right: 16px;

  background: rgba(255, 255, 255, 0.95);
  color: #1f2933;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

  pointer-events: none;
  z-index: 5;
}


.tag{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:0.92rem;
  line-height:1;
  backdrop-filter: blur(10px);
  border:1px solid rgba(46,46,46,.12);
  background:rgba(247,247,245,.92);
  color:#2e2e2e;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  white-space:nowrap;
}

.tag--main{
  font-weight:700;
}

@media (max-width: 900px){
  .tag{ font-size:0.88rem; padding:7px 10px; }
}


/*FLECHAS*/
/* ==========================
   Hero slider — ocultar flechas
========================== */

.media-frame__nav{
  display: none !important;
}


/*ELECCION*/
/* =========================================================
   FIX DEFINITIVO — Quitar paloma (✓) de insurance-option
   Pegar al FINAL de styles/styles.css
   ========================================================= */

/* 1) Mata cualquier pseudo-elemento que esté pintando la paloma */
.insurance-option::before,
.insurance-option::after,
.insurance-option span::before,
.insurance-option span::after{
  content: none !important;
  display: none !important;
}

/* 2) Oculta el checkbox nativo (por si alguien lo ve) */
.insurance-option input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

/* 3) Base: NO cambia tamaño, no agrega elementos */
.insurance-option{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(46,46,46,.18) !important;
  background: #f7f7f5 !important;
  color: #2e2e2e !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* 4) Texto normal */
.insurance-option span{
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5) Seleccionado = SOLO AZUL + TEXTO BLANCO (sin íconos) */
.insurance-option:has(input[type="checkbox"]:checked){
  background: #427898 !important;
  border-color: #427898 !important;
  color: #ffffff !important;
}

.insurance-option:has(input[type="checkbox"]:checked) span{
  color: #ffffff !important;
}

/* 6) Hover sutil */
.insurance-option:hover{
  border-color: #427898 !important;
}

/* 7) Focus accesible */
.insurance-option input[type="checkbox"]:focus-visible + span{
  outline: 2px solid #688662 !important;
  outline-offset: 4px !important;
}


/*LOGO*/
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand__mark {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%; /* mantiene look institucional */
}



/*ETIQUETA*/
/* =========================================================
   HERO slider — Etiqueta visible abajo (sin tapar contenido)
   Target: .media-tags + .tag--main (#heroTagMain)
   ========================================================= */

/* Asegura referencia */
.media-frame{
  position: relative;
  overflow: hidden;
}

/* Dots: abajo, centrados (y por debajo de la etiqueta) */
.media-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 6;
}

/* Contenedor de etiquetas: abajo y centrado, arriba de dots */
.media-tags{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 48px;            /* <- clave: sube la etiqueta para no chocar con dots */
  z-index: 10;             /* <- por encima de imagen y dots */
  pointer-events: none;    /* no estorba al usuario */
  max-width: calc(100% - 24px);
}

/* Etiqueta blanca premium (sin cambiar tamaño del frame) */
.media-tags .tag--main{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.92);
  color: #2e2e2e;

  font-weight: 600;
  font-size: 14px;
  line-height: 1;

  padding: 8px 14px;
  border-radius: 999px;

  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  text-align: center;
  white-space: nowrap;
}

/* Móvil: un poco más compacta y segura */
@media (max-width: 520px){
  .media-tags{
    bottom: 46px;
  }
  .media-tags .tag--main{
    font-size: 13px;
    padding: 7px 12px;
  }
}


/* =========================================================
   MOBILE PACK — Dalila (CRO + UX): sin recortes, sin desbordes
   Pegar AL FINAL de styles.css
========================================================= */

@media (max-width: 820px){

  /* 0) Base */
  html, body{
    overflow-x: hidden;
  }

  /* 1) Header: compacto, sin brincos */
  .header{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
  }

  /* 2) Sticky CTA: nunca tapa contenido */
  body{
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .sticky-cta{
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* 3) Hero: una columna + spacing premium */
  .hero__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  /* Evita alturas forzadas por vh en mobile */
  .hero, #hero, .section--hero{
    min-height: auto !important;
    height: auto !important;
    padding-top: 18px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* 4) Tipografía: autoridad sin aplastar */
  .h1, h1{
    font-size: clamp(30px, 7.2vw, 42px) !important;
    line-height: 1.07 !important;
    overflow-wrap: anywhere;
  }
  .lead-text, .lead{
    font-size: 1.02rem;
    line-height: 1.55;
  }

  /* 5) Botones: 100% ancho, siempre clicables */
  .hero__cta{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .btn{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
  }

  /* 6) Media (slider imágenes): proporción estable */
  .media-frame{
    width: 100%;
    height: clamp(220px, 56vw, 360px) !important;
    border-radius: 16px !important;
  }

  /* 7) Logos aseguradoras: wrap real y centrado */
  .logos{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .logos img{
    max-height: 34px !important;
    width: auto !important;
  }

  /* 8) Comparativa (tabla): scroll horizontal “premium” si no cabe */
  .compare{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }
  .compare table{
    min-width: 680px; /* evita que se aplaste */
  }

  /* 9) Servicios cards / grids: una columna */
  .services-grid,
  .trust-grid,
  .results-grid,
  .process-grid{
    grid-template-columns: 1fr !important;
  }

  /* 10) Lead form: stack perfecto */
  .lead-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .form .row{
    grid-template-columns: 1fr !important;
  }
  .form input, .form select, .form textarea{
    font-size: 16px; /* iOS: evita zoom */
  }

  /* 11) FAQ details: target grande */
  .acc summary{
    padding: 14px 14px !important;
  }
}


/* =========================
   SERVICES CTA "Ver detalles"
========================= */

/* Desktop + Mobile */
.svcCard__hintDesktop,
.svcCard__hintMobile {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  transition: all 0.25s ease;
}

/* Hover elegante */
.svcCard:hover .svcCard__hintDesktop,
.svcCard:hover .svcCard__hintMobile {
  opacity: 0.9;
  transform: translateX(4px);
}

/* Si tienes overlay oscuro, asegúrate que el texto esté encima */
.svcCard__hint {
  position: relative;
  z-index: 3;
}


/*COMENTARIOS DESKTOP*/
/* =========================================================
   TESTIMONIOS (MÓVIL) — Carrusel real (1 visible) + altura estable
   Pegar AL FINAL de styles.css
========================================================= */

.slider{
  position: relative;
}

#testViewport{
  position: relative;
  outline: none;
}

/* Cada quote se comporta como slide */
#testViewport .quote{
  box-sizing: border-box;
}

/* ---- MOBILE FIX ---- */
@media (max-width: 820px){

  /* Stage con altura estable */
  #testViewport{
    height: 270px;              /* ajusta si quieres más alto */
    min-height: 270px;
    overflow: hidden;
    border-radius: 18px;
  }

  /* Slides superpuestos */
  #testViewport .quote{
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;

    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }

  /* Solo el activo */
  #testViewport .quote.is-active{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Texto: scroll interno si es largo */
  #testViewport .quote__text{
    margin: 0;
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px;
    line-height: 1.55;
  }

  /* Autor siempre visible abajo */
  #testViewport .quote__meta{
    margin: 0;
    flex: 0 0 auto;
    opacity: .85;
    padding-top: 6px;
  }

  /* Botones prev/next centrados verticalmente y fuera del card */
  .slider__btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
  }
  #prevTest{ left: 6px; }
  #nextTest{ right: 6px; }

  /* Dots centrados */
  .dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }
}

@media (max-width: 820px){
  #testViewport{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
  }
}

/* =========================================================
   TESTIMONIOS — FIX DEFINITIVO MOBILE (anti width/writing-mode)
   Pegar AL FINAL de styles.css
========================================================= */

@media (max-width: 820px){

  /* El contenedor del slider debe ocupar todo el ancho */
  .slider{
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 44px;  /* prev | card | next */
    align-items: center;
    column-gap: 10px;
  }

  /* Botones dentro del grid (no absolute) para evitar overlays raros */
  .slider__btn{
    position: static !important;
    transform: none !important;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    z-index: 2;
  }

  /* Viewport = el “card” central */
  #testViewport{
    grid-column: 2;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    position: relative !important;
    overflow: hidden !important;

    height: 270px;
    min-height: 270px;

    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
  }

  /* Slides superpuestos */
  #testViewport .quote{
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 18px 16px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;

    opacity: 0;
    transform: translateX(8px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
  }

  #testViewport .quote.is-active{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Anti “texto vertical”: anula cualquier writing-mode heredado */
  #testViewport .quote__text,
  #testViewport .quote__meta{
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Texto con scroll interno si es largo */
  #testViewport .quote__text{
    margin: 0 !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px;
    line-height: 1.55;
  }

  /* Autor fijo abajo */
  #testViewport .quote__meta{
    margin: 0 !important;
    flex: 0 0 auto !important;
    opacity: .85;
    padding-top: 6px;
  }

  /* Dots centrados abajo */
  .dots{
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
}


/*COMENTARIOS*/
/* ============================
   TESTIMONIALS — Premium + Credible + Stable (Mobile-first)
   ============================ */
section[aria-label="Testimonios"] .slider{
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
}

/* El viewport ya no debe verse como tarjeta (evita doble borde) */
section[aria-label="Testimonios"] .slider__viewport{
  background: transparent;
  border: none;
  padding: 0;
  min-height: auto; /* el alto lo controla la tarjeta .quote */
}

/* Tarjeta premium por testimonio */
section[aria-label="Testimonios"] .quote{
  display: none;
  background: #fff;
  border: 1px solid rgba(31,41,55,.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(31,41,55,.08);
  padding: clamp(16px, 3.2vw, 26px);
  max-width: 980px;
  margin: 0 auto;

  /* Estabilidad: evita “brinco” por longitud del texto (mobile) */
  min-height: clamp(210px, 30vw, 280px);

  /* Layout interno */
  display: none;
  flex-direction: column;
  justify-content: center;
}
section[aria-label="Testimonios"] .quote.is-active{
  display: flex;
}

/* Estrellas (dorado sobrio, no “Google barato”) */
section[aria-label="Testimonios"] .quote__rating{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
section[aria-label="Testimonios"] .quote__stars{
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 1;
  color: #BFA14A; /* dorado premium */
}

/* Texto y nombre más legibles (premium) */
section[aria-label="Testimonios"] .quote__text{
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.6;
  color: rgba(31,41,55,.92);
  margin: 0 0 14px;
}
section[aria-label="Testimonios"] .quote__meta{
  margin: 0;
  font-size: 14px;
  color: rgba(31,41,55,.65);
}
section[aria-label="Testimonios"] .quote__name{
  font-weight: 850;
  color: rgba(31,41,55,.92);
}

/* Botones: más “touch-friendly” en móvil */
section[aria-label="Testimonios"] .slider__btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.12);
  background: rgba(31,41,55,.03);
  cursor: pointer;
}
section[aria-label="Testimonios"] .slider__btn:hover{
  background: rgba(31,41,55,.06);
}
section[aria-label="Testimonios"] .slider__btn:focus-visible{
  outline: 3px solid rgba(15,118,110,.30); /* teal suave */
  outline-offset: 3px;
}

/* Dots más claros y con mejor estado activo */
section[aria-label="Testimonios"] .dots{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
section[aria-label="Testimonios"] .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.25);
  background: transparent;
  cursor: pointer;
}
section[aria-label="Testimonios"] .dot.is-active{
  background: var(--teal);
  border-color: rgba(15,118,110,.55);
  transform: scale(1.25);
}

/* Línea de “promedio” (micro-prueba social) */
section[aria-label="Testimonios"] .testimonial-trust{
  text-align: center;
  font-size: 14px;
  color: rgba(31,41,55,.70);
  margin: 8px 0 22px;
}

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

/* Mobile: reduce columnas y centra mejor si falta espacio */
@media (max-width: 520px){
  section[aria-label="Testimonios"] .slider{
    grid-template-columns: 40px 1fr 40px;
    gap: 10px;
  }
  section[aria-label="Testimonios"] .quote{
    min-height: 240px; /* aún más estable en teléfonos chicos */
  }
}

/*LOGOS DISEÑO*/
/* =========================
   TRUST LOGOS — PRESENCIA + COLOR
   Pegar al FINAL del styles.css
   ========================= */

.trust__logos {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Tarjeta del logo */
.trust-logo {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 18px 16px;
  min-height: 92px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 10px 24px rgba(2, 6, 23, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;

  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Hover sutil (premium) */
.trust-logo:hover {
  transform: translateY(-2px);
  border-color: rgba(66, 120, 152, 0.35);
  box-shadow:
    0 14px 34px rgba(2, 6, 23, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* El logo en sí */
.trust-logo img {
  width: auto;
  max-width: 100%;
  max-height: 46px;           /* MÁS GRANDE (antes suele estar 28–36px) */
  object-fit: contain;

  /* Quitar "opacidad" percibida y dar vida al color */
  opacity: 1;
  filter: saturate(1.25) contrast(1.10);
  transform: translateZ(0);   /* nitidez en algunos navegadores */
}

/* Si algún logo viene muy claro, al hover se nota más */
.trust-logo:hover img {
  filter: saturate(1.35) contrast(1.18);
}

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

@media (max-width: 680px) {
  .trust__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .trust-logo {
    padding: 16px 14px;
    min-height: 86px;
  }
  .trust-logo img {
    max-height: 42px;
  }
}

/* Accesibilidad: evita animación fuerte si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .trust-logo {
    transition: none;
  }
}

/* =========================
   TRUST LOGOS — COLOR BOOST PRO
   ========================= */

/* Imagen del logo */
.trust-logo img {
  width: auto;
  max-width: 100%;
  max-height: 52px; /* ligeramente más grandes */

  object-fit: contain;
  opacity: 1;

  /* 🔥 Más intensidad controlada */
  filter:
    saturate(1.55)
    contrast(1.20)
    brightness(1.02);

  transform: translateZ(0);
  transition: filter 200ms ease, transform 200ms ease;
}

/* Hover con presencia más fuerte */
.trust-logo:hover img {
  filter:
    saturate(1.75)
    contrast(1.28)
    brightness(1.05);

  transform: scale(1.04);
}


/* IMAGENES SEGUROS*/
/* =========================
   SERVICES CARDS — TEXT READABILITY FIX
   Pegar al FINAL del styles.css
   ========================= */

/* Asegura que el texto en tarjetas con imagen sea legible SIEMPRE */
.svcCard__media {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* Overlay más fuerte y “premium”: gradiente + ligero blur */
.svcCard__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(2, 6, 23, 0.78) 0%,
      rgba(2, 6, 23, 0.62) 40%,
      rgba(2, 6, 23, 0.30) 70%,
      rgba(2, 6, 23, 0.10) 100%
    );
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: none;
}

/* Coloca el texto por encima del overlay */
.svcCard__badge,
.svcCard__title,
.svcCard__teaser,
.svcCard__hint {
  position: relative;
  z-index: 2;
}

/* Badge más legible */
.svcCard__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 13px;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}

/* Título con sombra sutil */
.svcCard__title {
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(2, 6, 23, 0.65);
  max-width: 38ch;
}

/* ✅ TEASER: aquí está el cambio clave */
.svcCard__teaser {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;       /* antes suele ser 13–14px */
  line-height: 1.55;
  max-width: 52ch;
  text-shadow: 0 2px 14px rgba(2, 6, 23, 0.75);
  margin-top: 10px;
}

/* Hint/CTA dentro de la card */
.svcCard__hintDesktop,
.svcCard__hintMobile {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(2, 6, 23, 0.65);
  font-weight: 650;
}

/* Para pantallas pequeñas: mantiene legible sin tapar demasiado la imagen */
@media (max-width: 680px) {
  .svcCard__overlay {
    background:
      linear-gradient(
        to top,
        rgba(2, 6, 23, 0.86) 0%,
        rgba(2, 6, 23, 0.55) 55%,
        rgba(2, 6, 23, 0.20) 100%
      );
  }

  .svcCard__teaser {
    font-size: 15px;
    line-height: 1.6;
  }
}

/*OPCIONES*/
/* =========================================================
   FINAL PATCH — LEAD FORM / INSURANCE OPTIONS (BALANCE + GRID)
   Pegar al FINAL del styles.css
   ========================================================= */

/* 1) Grid del formulario: 2 columnas en desktop, 1 en mobile */
.leadFormGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 18px;
}

@media (max-width: 820px){
  .leadFormGrid{
    grid-template-columns: 1fr;
  }
}

/* 2) La fila que contiene insurance-options debe ocupar TODO el ancho del grid */
.leadFormGrid .form__row:has(.insurance-options){
  grid-column: 1 / -1;
}

/* Fallback para navegadores sin :has() (no rompe, solo asegura width) */
@supports not selector(:has(*)){
  .insurance-options{
    width: 100%;
  }
}

/* 3) Label del grupo: spacing correcto para que no choque con los chips */
#insurance-group{
  display: block;
  margin: 4px 0 10px;
  font-weight: 800;
  line-height: 1.25;
}

/* 4) Contenedor de opciones: GRID real (evita chips inline encimados) */
.insurance-options{
  display: grid !important;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop balance */
  gap: 12px 12px;
  align-items: stretch;
}

/* tablet */
@media (max-width: 980px){
  .insurance-options{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile */
@media (max-width: 520px){
  .insurance-options{
    grid-template-columns: 1fr;
  }
}

/* 5) Cada opción ocupa bien su celda */
.insurance-option{
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  width: 100%;
  min-width: 0;

  padding: 12px 14px;
  border-radius: 999px;

  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);

  cursor: pointer;
  user-select: none;

  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

/* Texto: evita que se rompa el layout (ellipsis si no cabe) */
.insurance-option span{
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: rgba(15, 23, 42, 0.88);
}

/* Checkbox limpio y consistente */
.insurance-option input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #427898;
}

/* Hover premium */
.insurance-option:hover{
  border-color: rgba(66, 120, 152, 0.35);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
  transform: translateY(-1px);
}

/* Selected */
.insurance-option:has(input:checked){
  border-color: rgba(66, 120, 152, 0.55);
  background: rgba(66, 120, 152, 0.08);
}

/* Accesibilidad: foco visible */
.insurance-option input:focus-visible{
  outline: 3px solid rgba(66, 120, 152, 0.35);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Hint debajo con separación consistente */
.insurance-options + .field-hint{
  margin-top: 10px;
}

/* Si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce){
  .insurance-option{
    transition: none;
  }
}

/*HEADER CENTRADO*/
/* =========================================================
   HEADER — PREMIUM BALANCE (NO EXTREMOS, SÚPER CENTRADO)
   Pegar AL FINAL del styles.css
   ========================================================= */

/* 1) Header: fondo y borde sutil */
.header{
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(246, 244, 239, 0.92); /* si tu header es beige */
}

/* 2) “Rail” premium: centrado, ancho grande pero NO infinito */
.header .container{
  width: min(92vw, 1380px) !important;   /* <-- clave: no se va a extremos */
  margin: 0 auto !important;
  padding-left: clamp(12px, 1.8vw, 22px) !important;
  padding-right: clamp(12px, 1.8vw, 22px) !important;
  max-width: none !important; /* anulamos cualquier max-width previo */
}

/* 3) Layout: brand | links | controls */
.header .header__inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  min-height: 62px;
}

/* IZQUIERDA */
.header .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.header .brand__logo{
  height: 42px;
  width: auto;
}

/* CENTRO */
.header .header__actions{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.header .header__links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 28px);
  min-width: 0;
}

/* Links: premium, sin apretar */
.header .header__links .link{
  font-size: 13.5px;
  line-height: 1.1;
  white-space: nowrap;
  color: rgba(15, 23, 42, 0.78);
  text-decoration: none;
  padding: 8px 8px;
  border-radius: 10px;
  transition: background 160ms ease, color 160ms ease;
}

.header .header__links .link:hover{
  background: rgba(66, 120, 152, 0.10);
  color: rgba(15, 23, 42, 0.92);
}

/* DERECHA */
.header .header__controls{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Botón EN */
.header #langToggle{
  padding: 10px 12px;
  border-radius: 14px;
}

/* CTA top */
.header .btn--primary{
  background-color:#427898 !important;
  color:#ffffff !important;
  border:none !important;
  font-weight:600 !important;
  padding: 10px 16px;
  border-radius: 16px;
}

/* =========================================================
   Ajuste progresivo: reduce un poco si falta espacio
   ========================================================= */

@media (max-width: 1100px){
  .header .header__links{
    gap: 16px;
  }
  .header .header__links .link{
    font-size: 12.8px;
    padding: 8px 6px;
  }
}

/* Tablet: si no cabe, ocultamos links y dejamos CTA + EN */
@media (max-width: 980px){
  .header .header__links{ display: none; }
  .header .header__inner{ grid-template-columns: 1fr auto; }
  .header .header__actions{ justify-content: flex-end; }
}

/* Mobile: simplifica el brand */
@media (max-width: 520px){
  .header .brand__text{ display: none; }
  .header .btn--primary{ padding: 10px 12px; }
}

/* =========================================================
   HEADER NAV LINKS — PREMIUM BLUE BUTTON STYLE
   ========================================================= */

/* Botones base */
.header .header__links .link{
  font-size: 15px;                 /* más grande */
  font-weight: 600;                /* más presencia */
  color: #427898;                  /* azul marca */
  background: rgba(66, 120, 152, 0.08);
  padding: 10px 18px;
  border-radius: 22px;
  border: 1px solid rgba(66, 120, 152, 0.20);
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Hover elegante */
.header .header__links .link:hover{
  background: #427898;
  color: #ffffff;
  border-color: #427898;
  box-shadow: 0 6px 18px rgba(66, 120, 152, 0.25);
  transform: translateY(-1px);
}

/* Estado activo (opcional pero recomendado) */
.header .header__links .link.active{
  background: #427898;
  color: #ffffff;
  border-color: #427898;
}

/* Separación más aireada */
.header .header__links{
  gap: 18px;
}


/*SEPARACION DE LA SELECCIÓN*/
/* =========================================================
   TRUST NOTE — MÁS AIRE Y BALANCE
   ========================================================= */

.trust__note{
  margin-top: 42px;      /* separación real del bloque de logos */
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.70);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/*WHY A BROKER*/
/* =========================================================
   COMPARATIVA — LAYOUT ESTRATÉGICO CON IMAGEN DERECHA
   ========================================================= */

.compare-layout{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  margin-top: 40px;
}

/* Columna izquierda (tabla) */
.compare-left{
  min-width: 0;
}

/* Ajuste tabla para que no quede centrada */
.compare-left .table-wrap{
  margin: 0;
}

/* Columna derecha (imagen) */
.compare-right{
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.compare-photo{
  max-width: 420px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Ajuste visual para que la tabla respire más */
.compare{
  width: 100%;
}

/* Resultado abajo con más aire */
.callout--result{
  margin-top: 60px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px){
  .compare-layout{
    grid-template-columns: 1fr;
  }

  .compare-right{
    order: -1;
    margin-bottom: 30px;
  }

  .compare-photo{
    max-width: 340px;
  }
}

/* =========================
   COMPARE (Comparativa) — Layout premium balanceado
   Pegar al FINAL del styles.css
   ========================= */

/* 1) Ajuste de aire general en la sección */
#comparativa.section {
  padding-top: 48px;   /* antes suele ser demasiado */
  padding-bottom: 52px;
}

/* 2) Head: que no quede flotando arriba y se vea compacto */
#comparativa .section-head {
  margin-bottom: 18px; /* reduce el salto hacia la tabla */
}

/* Asegura ancho cómodo del texto (más premium) */
#comparativa .section-head--narrow {
  max-width: 980px;
}

/* 3) Layout: tabla izquierda + foto derecha, centrado vertical */
#comparativa .compare-layout {
  display: grid;
  grid-template-columns: minmax(640px, 1fr) minmax(280px, 360px);
  gap: 34px;
  align-items: center; /* clave para balance vertical */
  margin-top: 10px;
}

/* 4) Tabla: que no se estire de más y se vea sólida */
#comparativa .compare-left {
  min-width: 0;
}

#comparativa .table-wrap {
  margin: 0;               /* evita offsets raros */
  max-width: 980px;        /* look premium */
}

/* 5) Foto: tamaño controlado + presencia premium */
#comparativa .compare-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

#comparativa .compare-photo {
  width: 100%;
  max-width: 340px;       /* controla “peso” visual */
  height: auto;
  display: block;

  /* “Presencia premium”: suave, sin verse recortada feo */
  filter: saturate(1.02) contrast(1.02);
  transform: translateZ(0);
}

/* 6) Callout: que se conecte con el bloque y no quede “perdido” abajo */
#comparativa .callout--result {
  margin-top: 20px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* 7) Si el VS está causando desbalance, lo centramos mejor */
#comparativa .compare-vs {
  top: 16px;              /* lo baja un poco */
  transform: translateX(-50%);
}

/* 8) Responsive: en pantallas medianas, baja foto y ajusta columnas */
@media (max-width: 1100px) {
  #comparativa .compare-layout {
    grid-template-columns: 1fr 320px;
    gap: 26px;
  }
  #comparativa .compare-photo {
    max-width: 300px;
  }
}

@media (max-width: 920px) {
  /* En tablet/móvil: apila todo bonito */
  #comparativa .compare-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #comparativa .compare-right {
    order: 2;
  }

  #comparativa .compare-photo {
    max-width: 320px;
  }

  /* La tabla desktop normalmente se oculta y aparece compare-mobile.
     Esto solo evita espacios raros si ocurre el swap. */
  #comparativa .table-wrap {
    max-width: 100%;
  }

  #comparativa .callout--result {
    max-width: 100%;
  }
}

/* 9) Si quieres todavía menos aire en zoom 80% (monitores grandes) */
@media (min-width: 1400px) {
  #comparativa.section {
    padding-top: 44px;
    padding-bottom: 56px;
  }
  #comparativa .compare-layout {
    gap: 40px;
  }
}


/* =========================
   COMPARATIVA — Balance premium (tabla + foto)
   Pegar al FINAL del styles.css
   ========================= */

/* Layout: tabla izquierda + foto derecha (balance real) */
#comparativa .compare-layout{
  display:grid;
  grid-template-columns: minmax(620px, 860px) minmax(280px, 360px);
  gap: 34px;
  align-items: end;   /* Alinea ambos elementos por la base */
  justify-content: center;      /* centra el conjunto completo */
  max-width: 1240px;            /* evita que se vaya a extremos */
  margin: 14px auto 0;
  padding: 0 18px;
}

/* Tabla: más “premium” (menos pesada) */
#comparativa .table-wrap{
  max-width: 860px;             /* controla ancho percibido */
  margin: 0;                    /* sin empujes raros */
}

#comparativa table.compare{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
}

/* Respira más: celdas un poco más compactas */
#comparativa table.compare th,
#comparativa table.compare td{
  padding: 18px 20px;           /* reduce “bloque” visual */
  vertical-align: top;
  line-height: 1.35;
}

/* Encabezados más claros */
#comparativa table.compare thead th{
  font-weight: 650;
  letter-spacing: .1px;
}

/* VS: centrado perfecto y más sutil (no roba atención) */
#comparativa .compare-vs{
  top: 14px;
  opacity: .92;
  transform: translateX(-50%);
}

/* Columna derecha (foto): anclaje + “tarjeta” para confianza */
#comparativa .compare-right{
  display:flex;
  justify-content:center;
  align-items: end;   /* Alinea ambos elementos por la base */
}

#comparativa .compare-portrait{
  width: 100%;
  max-width: 340px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08);
}

/* Imagen: tamaño y presencia equilibrada */
#comparativa .compare-portrait img{
  width: 100%;
  height: auto;
  display: block;
  max-height: 520px;            /* evita que “pese” demasiado */
  object-fit: contain;
  filter: saturate(1.02) contrast(1.03);
}

/* (Opcional, si quieres) pequeña firma debajo para confianza */
#comparativa .compare-portrait .compare-name{
  margin-top: 10px;
  font-weight: 650;
  font-size: 14px;
  color: rgba(15, 23, 42, .86);
}
#comparativa .compare-portrait .compare-role{
  margin-top: 2px;
  font-size: 13px;
  color: rgba(15, 23, 42, .62);
}

/* Callout: que quede conectado al bloque principal */
#comparativa .callout--result{
  max-width: 1240px;
  margin: 18px auto 0;
  padding-left: 18px;
  padding-right: 18px;
}

/* Responsive: tablet */
@media (max-width: 1100px){
  #comparativa .compare-layout{
    grid-template-columns: 1fr 320px;
    gap: 24px;
  }
  #comparativa .table-wrap{ max-width: 100%; }
}

/* Responsive: móvil (apila y centra) */
@media (max-width: 920px){
  #comparativa .compare-layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #comparativa .compare-right{ order: 2; }
  #comparativa .compare-portrait{ max-width: 360px; }
  #comparativa .callout--result{ margin-top: 14px; }
}

#comparativa .compare-right{
  display:flex;
  justify-content:center;
  align-items:flex-end;   /* Fuerza que la imagen se apoye abajo */
}

#comparativa .compare-photo{
  max-width: 340px;
  height: auto;
  display:block;

  position: relative;
  top: -28px;   /* Hace que sobresalga hacia arriba */
}

/* =========================
   COMPARATIVA (TABLA + FOTO) — LAYOUT PREMIUM
   Pegar al FINAL del styles.css
   ========================= */

/* 1) Ajuste de separación general (evita que el head "flote") */
#comparativa .section-head {
  margin-bottom: 22px;
}

/* 2) Grid maestro: tabla izq + foto der */
.compare-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px; /* foto fija y elegante */
  gap: 34px;
  align-items: end; /* 🔥 alinea bases (tabla + foto) */
}

/* Asegura que el contenedor de la tabla no meta márgenes raros */
.compare-left {
  min-width: 0;
}

/* La tabla debe sentirse “card” premium y ocupar su espacio */
.compare-left .table-wrap {
  margin: 0;
}

/* 3) Foto: control total de tamaño y alineación */
.compare-right {
  display: flex;
  align-items: flex-end; /* 🔥 base de foto alineada */
  justify-content: center;
}

.compare-photoCard {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* La imagen baja hasta la base, y crece “por arriba” */
.compare-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;

  /* nitidez y look premium */
  filter: saturate(1.02) contrast(1.02);
}

/* 4) Callout centrado y con separación consistente */
.compare-callout {
  margin-top: 22px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* 5) Mejor distribución de la tabla cuando hay foto al lado */
@media (min-width: 1024px) {
  /* Reduce un poco el ancho visual de la tabla para que respire */
  .compare-left .compare {
    width: 100%;
  }

  /* Baja ligeramente el padding vertical dentro del wrap para compactar */
  .compare-left .table-wrap {
    padding-bottom: 0;
  }
}

/* 6) Responsive: en pantallas medianas baja foto debajo para evitar apretado */
@media (max-width: 980px) {
  .compare-layout {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .compare-right {
    order: 2;
    justify-content: center;
  }

  .compare-photo {
    max-width: 260px;
    transform: none;
  }

  .compare-callout {
    max-width: 100%;
  }
}

/* 7) Móvil: usa compare-mobile y oculta tabla si ya lo manejas así */
@media (max-width: 720px) {
  .compare-right {
    display: none; /* en móvil normalmente se elimina para no estorbar */
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .compare-photo {
    transform: none;
  }
}

/* =========================
   AJUSTE DE ESPACIO ENTRE TEXTO Y TABLA
   ========================= */

/* Reduce separación debajo del título/subtítulo */
#comparativa .section-head {
  margin-bottom: 12px;   /* antes era demasiado (20+ px) */
}

/* Asegura que el párrafo no meta espacio extra */
#comparativa .section-head .muted {
  margin-bottom: 0;
}

/* Quita margen superior innecesario del grid */
#comparativa .compare-layout {
  margin-top: 6px;   /* antes seguramente 14px o más */
}

/* Si aún queda aire, ajusta padding de la sección */
#comparativa.section {
  padding-top: 52px;     /* equilibrio visual */
  padding-bottom: 60px;
}

#comparativa .compare-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: end;   /* 🔥 base alineada real */
}

/* Subimos la tabla para que su base coincida con la imagen */
#comparativa .compare-left{
  position: relative;
  top: -24px;   /* ajusta entre -20px y -35px según necesidad */
}

/* =========================================================
   SERVICES (SERVICIOS) — CSS FINAL LIMPIO
   - 3 cards balanceadas (desktop)
   - Tablet 2 cols + 3ra centrada MISMO ancho (no banner)
   - Mobile 1 col
   - Funcionalidad: hover reveal (desktop) + tap (mobile) + pin (desktop)
   Pegar AL FINAL de styles.css y BORRAR BLOQUES DUPLICADOS ANTERIORES
   ========================================================= */

#servicios .svcGrid{
  --svc-gap: 28px;
  width: min(1120px, 100%);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--svc-gap);
  align-items: stretch;
}

#servicios .svcCard{
  position: relative;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0b1220; /* fallback si imagen tarda */
}

/* Media (frente de la tarjeta) */
#servicios .svcCard__media{
  position: relative;
  flex: 1;
  min-height: 330px;
}

/* Imagen como background (tu JS la inyecta) */
#servicios .svcCard__img{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .45s ease;
}

/* Overlay para legibilidad premium */
#servicios .svcCard__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(2, 6, 23, .55) 0%,
      rgba(2, 6, 23, .55) 45%,
      rgba(2, 6, 23, .82) 100%
    );
}

/* Contenido frontal */
#servicios .svcCard__badge,
#servicios .svcCard__title,
#servicios .svcCard__teaser,
#servicios .svcCard__hint{
  position: relative;
  z-index: 2;
}

#servicios .svcCard__title{
  max-width: 28ch;
}

/* Botón toggle accesible (tap / pin) */
#servicios .svcCard__toggle{
  position: absolute;
  inset: 0;
  z-index: 6;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* =========================
   "Back" (Detalles)
   Desktop: overlay que sube
   Mobile: se coloca debajo (display:block cuando .is-open)
========================= */

#servicios .svcCard__content{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  transform: translateY(102%);
  transition: transform .45s ease;
  padding: 20px;
  max-height: none;
}

/* Desktop hover reveal */
@media (hover:hover) and (pointer:fine){
  #servicios .svcCard:hover .svcCard__content{
    transform: translateY(0%);
  }
  #servicios .svcCard:hover .svcCard__img{
    transform: scale(1.08);
  }

  /* Desktop pin (tu JS pone data-open="true") */
  #servicios .svcCard[data-open="true"] .svcCard__content{
    transform: translateY(0%);
  }
}

/* Mobile: detalles abajo (no overlay) */
@media (hover:none){
  #servicios .svcCard__content{
    position: relative;
    inset: auto;
    transform: none;
    display: none;
    padding: 18px 18px 20px;
  }
  #servicios .svcCard.is-open .svcCard__content{
    display: block;
  }
}

/* =========================
   RESPONSIVE — BALANCE PERFECTO
========================= */

/* 1) Mantén 3 columnas más tiempo (evita el “banner” en pantallas medianas) */
@media (max-width: 1100px){
  #servicios .svcGrid{
    width: min(1040px, 100%);
    --svc-gap: 22px;
  }
  #servicios .svcCard__media{ min-height: 310px; }
}

/* 2) Tablet real: 2 columnas
   - La 3ra tarjeta se centra con el MISMO ancho que una columna (no full-width visual)
*/
@media (max-width: 920px){
  #servicios .svcGrid{
    width: min(860px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --svc-gap: 18px;
  }

  /* La 3ra ocupa el renglón completo del grid... */
  #servicios .svcGrid > .svcCard:nth-child(3){
    grid-column: 1 / -1;

    /* ...pero visualmente la hacemos del mismo ancho que una columna */
    max-width: calc((100% - var(--svc-gap)) / 2);
    justify-self: center;
  }

  #servicios .svcCard__media{ min-height: 280px; }
}

/* 3) Mobile: 1 columna */
@media (max-width: 640px){
  #servicios .svcGrid{
    width: 100%;
    grid-template-columns: 1fr;
    --svc-gap: 16px;
    margin-top: 18px;
  }

  /* En 1 columna, la 3ra ya no necesita reglas especiales */
  #servicios .svcGrid > .svcCard:nth-child(3){
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }

  #servicios .svcCard__media{ min-height: 240px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #servicios .svcCard__content,
  #servicios .svcCard__img{
    transition: none !important;
  }
}


/* =========================================================
   SERVICES — BALANCE PERFECTO (override final, gana sí o sí)
   Objetivo:
   - Desktop: 3 cards en una fila
   - Tablet/mediano (como tu screenshot): 1 columna centrada (SIN banner)
   - Mobile: 1 columna full
   ========================================================= */

#servicios .svcGrid{
  width: min(1120px, 100%);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

/* Mantiene look firme */
#servicios .svcCard__media{ min-height: 330px; }

/* =========================
   ✅ ESTE ES EL BREAKPOINT QUE TE ARREGLA EL “BANNER”
   En <= 980px: apila todo en 1 columna centrada (premium)
========================= */
@media (max-width: 980px){
  #servicios .svcGrid{
    grid-template-columns: 1fr !important;
    width: min(760px, 100%) !important;   /* columna centrada, no full gigante */
    gap: 18px !important;
  }

  /* Mata CUALQUIER regla vieja que haga banner */
  #servicios .svcGrid > .svcCard:nth-child(3){
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  /* Todas las cards con el mismo “peso” visual */
  #servicios .svcCard{
    max-width: 720px;
    width: 100%;
    justify-self: center;
  }

  #servicios .svcCard__media{ min-height: 280px; }
}

/* Móvil: ya full width */
@media (max-width: 640px){
  #servicios .svcGrid{
    width: 100% !important;
  }
  #servicios .svcCard{
    max-width: none;
    justify-self: stretch;
  }
  #servicios .svcCard__media{ min-height: 240px; }
}

/*SERVICIOS*/
/* =========================================================
   SERVICES — FINAL LIMPIO (SIN WARNINGS) + MÁS PROTAGONISMO
   - Desktop: 3 columnas
   - Tablet: 2 columnas con 3ra centrada mismo ancho (no banner)
   - Mobile: 1 columna
   - Texto premium: títulos arriba + teaser abajo (no saturado)
   ========================================================= */

#servicios .svcGrid{
  --svc-gap: 34px;
  width: min(1240px, 100%);
  margin: 24px auto 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--svc-gap) !important;
  align-items: stretch;
}

/* Desktop: asegura 3 columnas sí o sí */
@media (min-width: 1024px){
  #servicios .svcGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #servicios .svcGrid > .svcCard:nth-child(3){
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Tablet: 2 columnas + 3ra centrada mismo ancho */
@media (max-width: 1023px) and (min-width: 701px){
  #servicios .svcGrid{
    width: min(980px, 100%);
    --svc-gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #servicios .svcGrid > .svcCard:nth-child(3){
    grid-column: 1 / -1 !important;
    max-width: calc((100% - var(--svc-gap)) / 2) !important;
    justify-self: center !important;
  }
}

/* Mobile: 1 columna */
@media (max-width: 700px){
  #servicios .svcGrid{
    width: 100%;
    --svc-gap: 16px;
    grid-template-columns: 1fr !important;
    margin-top: 18px;
  }
  #servicios .svcGrid > .svcCard:nth-child(3){
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

#servicios .svcCard{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #0b1220; /* fallback */
  box-shadow: 0 18px 46px rgba(2, 6, 23, .10);
}

/* =========================
   Media / frente: FLEX para control tipográfico
   Título arriba + teaser abajo (no saturado)
========================= */
#servicios .svcCard__media{
  position: relative;
  min-height: 420px;                 /* más protagonista */
  padding: 18px 18px 18px 18px;      /* aire premium */
  display: flex;
  flex-direction: column;
}

/* Ajustes por pantalla */
@media (max-width: 1023px){
  #servicios .svcCard__media{ min-height: 360px; }
}
@media (max-width: 700px){
  #servicios .svcCard__media{ min-height: 270px; padding: 16px; }
}

#servicios .svcCard__img{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .45s ease;
}

/* Overlay: oscurece MÁS abajo, menos arriba => texto respira */
#servicios .svcCard__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(2,6,23,.10) 0%, rgba(2,6,23,.40) 55%, rgba(2,6,23,.86) 100%),
    linear-gradient(180deg, rgba(2,6,23,.18) 0%, rgba(2,6,23,.55) 60%, rgba(2,6,23,.90) 100%);
}

#servicios .svcCard__badge,
#servicios .svcCard__title,
#servicios .svcCard__teaser,
#servicios .svcCard__hint{
  position: relative;
  z-index: 2;
}

/* Badge arriba, discreto */
#servicios .svcCard__badge{
  align-self: flex-start;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

/* ✅ TÍTULO ARRIBA (no saturado)
   - Control por “líneas” SIN line-clamp (cero warnings) */
#servicios .svcCard__title{
  margin-top: 14px;
  font-size: clamp(26px, 2.0vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;               /* reduce sensación de bloque */
  overflow: hidden;
  max-height: calc(1.06em * 3);  /* <= 3 líneas máximo */
}

/* Teaser abajo: empuja hacia la parte baja para que la imagen respire */
#servicios .svcCard__teaser{
  margin-top: auto;              /* empuja teaser/hint hacia abajo */
  font-size: 15.5px;
  line-height: 1.45;
  max-width: 46ch;
  opacity: .92;

  overflow: hidden;
  max-height: calc(1.45em * 2);  /* <= 2 líneas máximo */
}

/* Hint/CTA */
#servicios .svcCard__hint{
  margin-top: 14px;
  font-size: 14px;
  opacity: .95;
}


/* Botón overlay */
#servicios .svcCard__toggle{
  position: absolute;
  inset: 0;
  z-index: 6;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Focus premium (sin marco turquesa agresivo) */
#servicios .svcCard__toggle:focus{ outline: none; }
#servicios .svcCard__toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: -6px;
  border-radius: 20px;
}

/* Back/details overlay (desktop) */
#servicios .svcCard__content{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  transform: translateY(102%);
  transition: transform .45s ease;
  padding: 20px;
}

/* Hover + pin */
@media (hover:hover) and (pointer:fine){
  #servicios .svcCard{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  #servicios .svcCard:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 56px rgba(2, 6, 23, .14);
  }
  #servicios .svcCard:hover .svcCard__content{ transform: translateY(0%); }
  #servicios .svcCard:hover .svcCard__img{ transform: scale(1.08); }
  #servicios .svcCard[data-open="true"] .svcCard__content{ transform: translateY(0%); }
}

/* Mobile: details abajo */
@media (hover:none){
  #servicios .svcCard__content{
    position: relative;
    inset: auto;
    transform: none;
    display: none;
    padding: 18px 18px 20px;
  }
  #servicios .svcCard.is-open .svcCard__content{ display: block; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #servicios .svcCard__content,
  #servicios .svcCard__img{
    transition: none !important;
  }
}

/* =========================================================
   SERVICES — POLISH PREMIUM (máximo valor)
   Pegar AL FINAL de styles.css
   ========================================================= */

#servicios .svcGrid{
  width: min(1240px, 100%);
  gap: 34px;
}

/* Cards: más “premium” */
#servicios .svcCard{
  border-radius: 26px;
  box-shadow: 0 18px 46px rgba(2, 6, 23, .10);
}

/* Protagonismo */
#servicios .svcCard__media{
  min-height: 420px;
  padding: 20px;
}

/* Overlay cinematográfico: deja respirar la imagen arriba */
#servicios .svcCard__overlay{
  background:
    radial-gradient(1200px 700px at 20% 8%, rgba(2,6,23,.08) 0%, rgba(2,6,23,.32) 50%, rgba(2,6,23,.88) 100%),
    linear-gradient(180deg, rgba(2,6,23,.12) 0%, rgba(2,6,23,.52) 62%, rgba(2,6,23,.92) 100%);
}

/* ===== Badge (si estaba “perdido”, lo vuelve protagonista) ===== */
#servicios .svcCard__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
}

/* ===== Título: arriba, pero con “aire” y sin verse bloque ===== */
#servicios .svcCard__title{
  margin-top: 16px;
  padding-right: 8px;
  font-size: clamp(26px, 2.05vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 16ch;                 /* menos ancho = más premium */
  text-wrap: balance;              /* si tu navegador lo soporta, mejora mucho */
  overflow: hidden;
  max-height: calc(1.06em * 3);    /* máximo 3 líneas */
}

/* ===== Teaser: abajo, más ligero ===== */
#servicios .svcCard__teaser{
  margin-top: auto;
  font-size: 15px;
  line-height: 1.45;
  opacity: .88;
  max-width: 46ch;
  overflow: hidden;
  max-height: calc(1.45em * 2);    /* máximo 2 líneas */
}

/* ===== “Ver detalles” limpio (sin doble flecha) ===== */
#servicios .svcCard__hint{
  margin-top: 14px;
  font-size: 14px;
  opacity: .92;
}

/* Si tu HTML trae "Ver detalles →" en texto, oculta la flecha duplicada y ponemos una sola por CSS */
#servicios .svcCard__hintDesktop{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Asegura 1 sola flecha */
#servicios .svcCard__hintDesktop::after{
  content: "→";
  opacity: .9;
}

/* Si en el HTML ya viene con flecha, esta regla evita que se sienta doble:
   (no elimina el carácter, pero con gap/line-height se ve limpio) */
#servicios .svcCard__hintDesktop{
  letter-spacing: .1px;
}

/* ===== Hover: “lift” premium ===== */
@media (hover:hover) and (pointer:fine){
  #servicios .svcCard{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  #servicios .svcCard:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 56px rgba(2, 6, 23, .14);
  }
  #servicios .svcCard:hover .svcCard__img{
    transform: scale(1.07);
  }
}

/* Tablet/móvil ajustes */
@media (max-width: 1023px){
  #servicios .svcCard__media{ min-height: 360px; padding: 18px; }
  #servicios .svcGrid{ gap: 22px; }
}

@media (max-width: 700px){
  #servicios .svcCard__media{ min-height: 280px; padding: 16px; }
  #servicios .svcGrid{ gap: 16px; }
  #servicios .svcCard__title{ max-width: 18ch; }
  #servicios .svcCard__teaser{ max-height: calc(1.45em * 3); }
}



/* =========================
   SERVICES — FIX FLECHA DOBLE (FINAL)
   Pegar AL FINAL de styles.css
========================= */

/* 1) Apaga la flecha automática (la que causaba duplicado) */
#servicios .svcCard__hint::after{
  content: none !important;
  display: none !important;
}

/* 2) Layout del hint */
#servicios .svcCard__hint{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 3) Flecha REAL (HTML) */
#servicios .svcCard__hintArrow{
  display: inline-block;
  transform: translateY(-1px);
  opacity: .9;
}

/* 4) Desktop vs Mobile copy */
#servicios .svcCard__hintDesktop{ display: none; }
#servicios .svcCard__hintMobile{ display: inline; }

@media (hover:hover) and (pointer:fine){
  #servicios .svcCard__hintDesktop{ display: inline; }
  #servicios .svcCard__hintMobile{ display: none; }
}


/*AJUSTES CUESTIONARIO*/
/* =========================================================
   #lead — BALANCE PERFECTO (Form + Foto misma altura visual)
   Pegar AL FINAL del styles.css
   ========================================================= */

/* 1) En desktop: estira ambas columnas (antes estaban "start") */
@media (min-width: 1025px){
  #lead .lead-layout{
    align-items: stretch !important; /* clave para balance */
  }

  #lead .lead__left{
    align-self: stretch;
  }

  #lead .lead__photo{
    align-self: stretch;
    /* mantenemos sticky pero permitimos altura visual consistente */
    position: sticky;
    top: 96px;
    height: fit-content;
  }

  /* 2) La tarjeta derecha ahora ocupa "toda la altura" del bloque derecho */
  #lead .lead__photoCard{
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 3) Área de imagen flexible (se ajusta al alto disponible) */
  #lead .lead__photoCard img{
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: contain; /* respeta la foto sin recortar */
    padding: 22px 22px 0; /* premium spacing */
    background: radial-gradient(
      1200px 500px at 50% 0%,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.0)
    );
  }

  /* 4) El bloque de texto inferior se queda fijo y elegante */
  #lead .lead__photoMeta{
    margin-top: auto;
  }
}

/* 5) Tablet/mobile: se mantiene una columna (no tocamos tu comportamiento) */
@media (max-width: 1024px){
  #lead .lead__photoCard{
    height: auto;
  }

  #lead .lead__photoCard img{
    height: auto;
  }
}


/* =========================================================
   LEAD — BALANCE PERFECTO: igualar altura derecha = izquierda
   Pegar AL FINAL del styles.css
   ========================================================= */

@media (min-width: 1025px){
  /* El grid debe permitir estiramiento */
  #lead .lead-layout{
    align-items: stretch !important;
  }

  /* Ambas columnas ocupan el mismo “alto de fila” */
  #lead .lead__left,
  #lead .lead__photo{
    align-self: stretch;
  }

  /* La tarjeta derecha se vuelve un contenedor flexible */
  #lead .lead__photoCard{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: var(--leadLeftH, auto); /* <-- la setea el JS */
  }

  /* Imagen “flexible”: ocupa el alto disponible sin deformarse */
  #lead .lead__photoCard img{
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: contain; /* no recorta a Dalila */
    padding: 22px 22px 0;
    background: radial-gradient(
      1200px 500px at 50% 0%,
      rgba(255,255,255,.60),
      rgba(255,255,255,0)
    );
  }

  /* Meta abajo siempre */
  #lead .lead__photoMeta{
    margin-top: auto;
  }
}

/* Mobile/tablet: comportamiento normal */
@media (max-width: 1024px){
  #lead .lead__photoCard{
    min-height: initial;
  }
}

/*DIFERENCIADORES*/
/* =========================================================
   PROCESS — Carousel premium (sin librerías)
   Pegar AL FINAL del styles.css
   ========================================================= */

.process-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
@media (max-width: 768px){
  .process-head{ align-items:flex-start; flex-direction:column; }
}

/* Sello DG (logo estratégico) */
.process-seal{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
}
.process-seal img{
  width:40px; height:40px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(0,0,0,.10);
}
.process-seal__k{ font-weight:700; font-size:.9rem; }
.process-seal__v{ font-size:.85rem; opacity:.75; max-width:420px; }
@media (max-width: 768px){
  .process-seal__v{ max-width:none; }
}

/* Carousel layout */
.carousel{
  margin-top:18px;
}
.carousel__viewport{
  outline: none;
}
.carousel__viewport:focus-visible{
  box-shadow: 0 0 0 3px rgba(15,118,110,.25);
  border-radius: 18px;
}

.carousel__track{
  display:flex;
  gap:16px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar{ height: 8px; }
.carousel__track::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}

.carousel__slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (min-width: 820px){
  .carousel__slide{ flex-basis: 48%; }
}
@media (min-width: 1100px){
  .carousel__slide{ flex-basis: 32%; }
}

/* Card premium */
.step-card{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 18px 18px 16px;
  overflow:hidden;
  min-height: 170px;
}
.step-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.step-card__n{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight:800;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(15,118,110,.08);
}
.step-card__p{ margin-top:8px; }

/* Watermark DG dentro de la tarjeta (sutil, aporta marca sin ruido) */
.step-card__wm{
  width:56px; height:56px;
  border-radius:999px;
  overflow:hidden;
  opacity:.10; /* sutil */
  transform: translate(10px,-10px);
}
.step-card__wm img{
  width:100%; height:100%;
  object-fit:cover;
}

/* Controles */
.carousel__controls{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.carousel__btn{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  font-size: 20px;
  line-height: 1;
  cursor:pointer;
}
.carousel__btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(15,118,110,.25);
}

.carousel__dots{
  display:flex;
  align-items:center;
  gap:8px;
}
.dot{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.10);
  cursor:pointer;
}
.dot.is-active{
  width:22px;
  background: rgba(15,118,110,.35);
  border-color: rgba(15,118,110,.45);
}
.carousel__hint{ text-align:center; margin-top:8px; opacity:.75; }

/*DISEÑO IMAGEN TABLA*/
/* =========================================
   FOTO PREMIUM – MARCO DE ALTO VALOR
========================================= */

.compare-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tarjeta contenedora */
.compare-photoCard {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 0;
  max-width: 420px;
  width: 100%;
  
  /* Fondo premium sutil */
  background: linear-gradient(
    145deg,
    rgba(223, 235, 232, 0.6),
    rgba(255, 255, 255, 0.9)
  );

  /* Profundidad elegante */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.05);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover sutil premium */
.compare-photoCard:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Imagen */
.compare-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;

  /* Margen interno tipo marco */
  padding: 28px 28px 0 28px;
}

/* Efecto de marco interior elegante */
.compare-photoCard::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .compare-photoCard {
    max-width: 340px;
  }

  .compare-photo {
    padding: 20px 20px 0 20px;
  }
}

/* =========================================
   BLOQUE INFERIOR PREMIUM
========================================= */
/* =========================================
   FOTO + PLACA INFERIOR PREMIUM (SIN SATURAR)
========================================= */

.compare-photoCard{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  max-width: 420px;
  width: 100%;

  background: linear-gradient(145deg, rgba(223,235,232,.55), rgba(255,255,255,.92));
  box-shadow: 0 20px 60px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.05);
}

/* Marco interior fino */
.compare-photoCard::before{
  content:"";
  position:absolute;
  inset: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  pointer-events:none;
  z-index: 2;
}

/* Imagen: dejamos espacio abajo para la placa */
.compare-photo{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
  padding: 28px 28px 110px 28px; /* <-- espacio para la placa */
}

/* PLACA inferior (dentro del marco) */
.compare-photoMeta{
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 3;

  border-radius: 16px;
  padding: 14px 14px 12px 14px;

  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Tipografía jerárquica, concisa */
.compare-photoMeta__top{
  display:flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.compare-photoMeta__name{
  font-weight: 600;
  font-size: 1.02rem;
  color: #0f172a;
  letter-spacing: .1px;
}

.compare-photoMeta__role{
  font-size: .9rem;
  color: #64748b;
}

/* Una sola línea de valor (sin saturar) */
.compare-photoMeta__line{
  font-size: .92rem;
  line-height: 1.35;
  color: #334155;
  margin-bottom: 10px;
}

/* CTA elegante (sin “botón grande”) */
.compare-photoMeta__cta{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: .92rem;
  font-weight: 600;
  color: #0f766e;
  text-decoration: none;

  padding-bottom: 2px;
  border-bottom: 1px solid rgba(15,118,110,.35);
  transition: transform .2s ease, color .2s ease, border-color .2s ease;
}

.compare-photoMeta__cta:hover{
  transform: translateY(-1px);
  color: #065f46;
  border-color: rgba(6,95,70,.6);
}

/* Responsive */
@media (max-width: 768px){
  .compare-photoCard{ max-width: 360px; }
  .compare-photo{ padding: 20px 20px 120px 20px; }
  .compare-photoMeta{ left: 18px; right: 18px; bottom: 18px; }
}

/*TABLA*/
#comparativa .section-head {
  margin-bottom: 28px; /* antes seguramente era 60+ */
}

/* =========================================
   AJUSTE FINO LAYOUT COMPARATIVA
========================================= */

#comparativa .compare-layout {
  align-items: center; /* centra tabla y foto verticalmente */
  gap: 48px; /* mejor equilibrio */
}

/* Subimos ligeramente la tabla */
#comparativa .compare-left {
  margin-top: -10px;
}

/* Opcional: subir un poco más si quieres más compacto */
@media (min-width: 1024px) {
  #comparativa .compare-left {
    margin-top: -18px;
  }
}

/*FORMULARIO OCULTO*/
/* =========================================
   LEAD — OCULTAR BLOQUE FINAL HASTA INTENCIÓN
========================================= */

.lead__reveal {
  display: none;
  margin-top: 14px;
}

.lead__reveal.is-ready {
  display: block;
  animation: leadRevealIn .35s ease both;
}

@keyframes leadRevealIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Contexto dentro del reveal: visible cuando el reveal ya está listo */
.lead__optional {
  margin-bottom: 14px;
}


/*RESULTADOS TABLA*/
/* =========================
   COMPARE — Result (Premium)
   ========================= */
.compare-left{
  display: grid;
  gap: 14px; /* separa tabla y resultado con intención */
}

/* Caja premium */
.compare-result{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 16px;
  border-radius: 16px;

  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}

/* Icono */
.compare-result__icon{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  font-weight: 700;
  line-height: 1;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.10);
  border: 1px solid rgba(15, 118, 110, 0.18);
}

/* Texto */
.compare-result__content{
  min-width: 0;
  flex: 1 1 auto;
}

.compare-result__title{
  font-weight: 700;
  color: #0f172a;
  font-size: 14px;
  margin-bottom: 2px;
}

.compare-result__text{
  color: rgba(15, 23, 42, 0.72);
  font-size: 14px;
  line-height: 1.35;
}

/* CTA */
.compare-result__cta{
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;

  font-weight: 700;
  font-size: 14px;
  color: #0f766e;

  padding: 10px 12px;
  border-radius: 12px;

  border: 1px solid rgba(15, 118, 110, 0.22);
  background: rgba(15, 118, 110, 0.08);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.compare-result__cta:hover{
  transform: translateY(-1px);
  background: rgba(15, 118, 110, 0.12);
  border-color: rgba(15, 118, 110, 0.30);
}

/* Responsive: CTA abajo para no apretar */
@media (max-width: 820px){
  .compare-result{
    flex-direction: column;
    align-items: flex-start;
  }
  .compare-result__cta{
    width: 100%;
    text-align: center;
  }
}

/*TESTIMONIALS*/
/* =========================
   TESTIMONIALS PREMIUM
========================= */

.testimonials{
  text-align: center;
}

.testimonial-trust{
  margin-top: -10px;
  margin-bottom: 30px;
  font-size: 15px;
  color: rgba(15, 23, 42, 0.65);
}

/* SLIDER */

.slider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.slider__viewport{
  width: 100%;
  max-width: 920px;
  position: relative;
}

/* CARD */

.quote{
  display: none;
  background: #ffffff;
  padding: 60px 70px;
  border-radius: 28px;
  box-shadow: 0 25px 60px rgba(2, 6, 23, 0.08);
  text-align: left;
  position: relative;
}

.quote.is-active{
  display: block;
}

.quote::before{
  content: "“";
  position: absolute;
  top: 20px;
  left: 35px;
  font-size: 80px;
  color: rgba(15, 118, 110, 0.08);
  font-family: Georgia, serif;
}

.quote__rating{
  font-size: 18px;
  color: #f59e0b;
}

.quote__text{
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.6;
  color: #0f172a;
  max-width: 60ch;
}

.quote__footer{
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.quote__avatar{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
  border: 2px solid #fff;
}

.quote__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote__meta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quote__meta strong{
  font-size: 16px;
  color: #0f172a;
}

.quote__badge{
  margin-top: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  font-weight: 600;
}

/* BOTONES */

.slider__btn{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: all .2s ease;
}

.slider__btn:hover{
  background: #f1f5f9;
}

/* DOTS */

.dots{
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.2);
  border: none;
}

.dot.is-active{
  background: #0f766e;
}

/* RESPONSIVE */

@media (max-width: 768px){
  .quote{
    padding: 35px 25px;
  }

  .quote__text{
    font-size: 17px;
  }

  .quote__avatar{
    width: 48px;
    height: 48px;
  }
}

/*CTA FINAL*/
/* =========================
   FINAL CTA PREMIUM
========================= */

.final-cta-section{
  padding-top: 70px;
  padding-bottom: 70px;
}

.final-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.final-cta__content{
  max-width: 640px;
}

.final-cta__actions{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* =========================
   BOTONES NUEVOS
========================= */

.btn-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
  border: none;
}

/* =========================
   PRIMARIO (AZUL HEADER)
========================= */

.btn-cta--primary{
  background: #4C7895; /* mismo azul del header */
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(76, 120, 149, 0.35);
}

.btn-cta--primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(76, 120, 149, 0.45);
  background: #3F6C89;
}

.btn-cta__arrow{
  transition: transform .2s ease;
}

.btn-cta--primary:hover .btn-cta__arrow{
  transform: translateX(4px);
}

/* =========================
   WHATSAPP PREMIUM
========================= */

.btn-cta--whatsapp{
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.35);
}

.btn-cta--whatsapp:hover{
  transform: translateY(-3px);
  background: #20BD5A;
  box-shadow: 0 20px 45px rgba(37, 211, 102, 0.45);
}

.btn-cta__icon{
  font-size: 14px;
  opacity: 0.9;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px){

  .final-cta{
    flex-direction: column;
    align-items: flex-start;
  }

  .final-cta__actions{
    width: 100%;
  }

  .btn-cta{
    width: 100%;
    justify-content: center;
  }
}

/*FOOTER*/
/* =========================
   FOOTER — Premium / Clean
========================= */

.footer{
  padding: 44px 0 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 46px;
  align-items: start;
}

.footer__brand{
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .2px;
  margin-bottom: 10px;
}

.footer__city{
  margin-top: 0;
  margin-bottom: 14px;
}

.footer__title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}

.footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* Legal en itálicas, más compacto y elegante */
.footer__legal{
  margin-top: 14px;
  max-width: 520px;
  opacity: .78;
  line-height: 1.55;
}

/* Links en una sola línea con separador */
.footer__linksRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer__dot{
  opacity: .45;
}

/* Bottom */
.footer__bottom{
  margin-top: 30px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  justify-content: flex-start;
}

/* Responsive */
@media (max-width: 900px){
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .footer__legal{
    max-width: 100%;
  }
}

/*ESPACIO FIJO*/
/* =================================
   FIX ESPACIO ENTRE HERO Y TRUST
================================= */

/* 1. Quita cualquier altura forzada */
.hero {
  min-height: auto !important;
  height: auto !important;
}

/* 2. Controla el espacio vertical solo con padding fijo */
.section {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* 3. Ajuste específico para hero */
.hero {
  padding-bottom: 60px; /* un poco menor para que quede perfecto */
}

/* 4. Asegura que no haya margin extra accidental */
.hero + .trust {
  margin-top: 0 !important;
}

/*QUITAR COMILLAS*/

/* Quitar comillas decorativas en testimonios */
.quote::before,
.quote::after {
  content: none !important;
  display: none !important;
}

/* ========= FIX DEFINITIVO: SECCIÓN #process ========= */
#process .process-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 36px !important;
  flex-wrap: wrap !important;
  margin-bottom: 18px !important; /* aire antes del carrusel */
}

#process .process-head__left{
  flex: 1 1 360px !important;
  min-width: 320px !important;
}

/* Card “Método DG” */
#process .process-seal{
  flex: 0 1 740px !important;   /* más larga */
  width: auto !important;
  max-width: 760px !important;
  min-width: 620px !important;  /* evita que se apriete y corte */
  
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;

  padding: 16px 20px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;

  /* Separación visual del título */
  margin-top: 10px !important;
}

/* Logo dentro del sello */
#process .process-seal > img{
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  object-fit: cover !important;
}

/* Texto del sello */
#process .process-seal__txt{
  min-width: 0 !important; /* CLAVE para que wrap funcione */
}

#process .process-seal__k{
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 2px 0 !important;
}

/* Línea de método: que NO se salga */
#process .process-seal__v{
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Responsive: en pantallas medianas, baja la card y ocupa todo */
@media (max-width: 980px){
  #process .process-seal{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin-top: 14px !important;
  }
}

/* =========================
   PROCESS — DG Seal (NEW)
   Objetivo:
   - En desktop: "Acompañamiento" a la derecha (misma línea)
   - Más separación respecto al título
   - Sin romper móvil
========================= */

#process .process-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;                 /* separación título vs tarjeta */
  flex-wrap:wrap;           /* en pantallas chicas baja */
}

/* NUEVA TARJETA: sin conflictos con .process-seal */
#process .dg-seal{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.06);

  /* CLAVE: que tome el ancho necesario para 1 sola línea */
  width:max-content;
  max-width:none;
  flex:0 0 auto;

  /* para que no quede pegada al título */
  margin-top:8px;
}

/* Logo */
#process .dg-seal__logo{
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
}
#process .dg-seal__logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Texto */
#process .dg-seal__txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

#process .dg-seal__k{
  font-weight:700;
  line-height:1.1;
}

#process .dg-seal__v{
  font-size:0.98rem;
  opacity:.75;
  line-height:1.25;

  /* CLAVE: NO permitir salto en desktop */
  white-space:nowrap;
}

/* Si tu container es estrecho (laptop chica) permitimos que se adapte */
@media (max-width: 1100px){
  #process .dg-seal{
    width:100%;
  }
  #process .dg-seal__v{
    white-space:normal;
  }
}


/* =========================
   PROCESS — Rebalance (Seal vs Cards)
   Objetivo:
   - El sello "Método DG" NO roba foco
   - Las tarjetas del carrusel se ven grandes, dominantes y balanceadas
========================= */

/* 1) Sello más discreto (sin perder premium) */
#process .dg-seal{
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  opacity: .98;
}
#process .dg-seal__v{
  font-size: .95rem;
  opacity: .7;
}

/* 2) Más aire entre header y carrusel */
#process .process-head{
  margin-bottom: 22px;
}

/* 3) Carrusel: que no “encajone” el contenido */
#process .carousel{
  margin-top: 6px;
}

/* IMPORTANTÍSIMO: evita que el viewport recorte y haga ver las cards pequeñas */
#process .carousel__viewport{
  padding: 6px 4px 0;
}

/* 4) Track y slides: cards más grandes y con mejor presencia */
#process .carousel__track{
  gap: 18px; /* más separación elegante */
  align-items: stretch;
}

/* Aumenta el ancho base de cada tarjeta en desktop */
#process .carousel__slide.step-card{
  min-width: 420px;         /* antes seguramente ~320 */
  max-width: 520px;
  padding: 28px 26px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

/* 5) Jerarquía dentro de la tarjeta: título resalta */
#process .step-card .h3{
  font-size: 1.18rem;
  line-height: 1.25;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* texto de apoyo más cómodo */
#process .step-card__p{
  font-size: 1.02rem;
  line-height: 1.55;
  opacity: .9;
}

/* 6) Número (1,2,3,4) más “badge premium” */
#process .step-card__n{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(11,31,59,.04); /* azul muy ligero */
}

/* watermark DG menos invasivo */
#process .step-card__wm{
  opacity: .07;
}

/* 7) Barra scroll fea: si tu carrusel está usando overflow con scroll,
      hacemos el scroll más limpio */
#process .carousel__viewport{
  scrollbar-color: rgba(0,0,0,.18) transparent;
}
#process .carousel__viewport::-webkit-scrollbar{
  height: 10px;
}
#process .carousel__viewport::-webkit-scrollbar-track{
  background: transparent;
}
#process .carousel__viewport::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

/* 8) Responsive: en pantallas medianas baja un poco el ancho */
@media (max-width: 1100px){
  #process .carousel__slide.step-card{
    min-width: 360px;
    padding: 24px 22px;
  }
}

/* 9) Mobile: tarjeta ocupa casi todo el ancho visible */
@media (max-width: 720px){
  #process .carousel__slide.step-card{
    min-width: 86vw;
    max-width: 86vw;
  }
}



/* =========================
   PROCESS (DIFERENCIADORES)
========================= */

/* Head: separa bien título vs sello */
.process-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 28px;
}

/* Evita que el sello se pegue demasiado al título */
.process-head__left{
  min-width: 260px;
}

/* Card “Método DG” (sello) */
.process-seal{
  display:flex;
  align-items:center;
  gap: 14px;

  /* tamaño + balance */
  flex: 0 1 720px;               /* MÁS LARGA */
  max-width: 720px;
  width: 100%;

  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);

  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

/* Logo del sello */
.process-seal img{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}

/* Texto del sello */
.process-seal__txt{
  min-width: 0; /* MUY IMPORTANTE para que el nowrap funcione bien */
}

.process-seal__k{
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 2px;
}

/* 👇 CLAVE: mantiene “Acompañamiento” en la misma línea */
.process-seal__v{
  white-space: nowrap;           /* NO se va abajo */
  overflow: hidden;              /* si falta espacio, no rompe */
  text-overflow: ellipsis;       /* se corta elegante si la pantalla es muy angosta */
  line-height: 1.2;
  opacity: .85;
}

/* RESPONSIVE: en pantallas chicas sí permitimos que baje a 2 líneas para no cortar */
@media (max-width: 820px){
  .process-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .process-seal{
    max-width: 100%;
    flex: 1 1 auto;
  }

  .process-seal__v{
    white-space: normal;         /* aquí sí puede romper línea */
    overflow: visible;
    text-overflow: clip;
  }
}


/* =========================
   CAROUSEL: evita corte al hacer scroll
========================= */

.carousel{
  margin-top: 18px;
}

/* IMPORTANTE: si algún padre tenía overflow:hidden, esto evita recortes visuales */
.carousel,
.carousel__viewport,
.carousel__track{
  overflow: visible;
}

/* El viewport scrollea horizontalmente, pero con espacio para el scrollbar */
.carousel__viewport{
  overflow-x: auto;
  overflow-y: visible;

  /* Padding abajo: evita que el scrollbar “se coma” la parte inferior de la card */
  padding: 10px 6px 18px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Track */
.carousel__track{
  display: flex;
  gap: 18px;
  padding: 6px 6px 10px; /* aire para sombras */
  align-items: stretch;
}

/* Slides: ancho responsivo y snap */
.carousel__slide{
  scroll-snap-align: start;
  flex: 0 0 clamp(280px, 32vw, 520px);
}

/* Step card: que se vean más “protagonistas” */
.step-card{
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);

  padding: 22px 22px 24px;
  min-height: 260px;
}

/* Top row de la card */
.step-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* Número */
.step-card__n{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(31, 92, 126, .06);
  font-weight: 700;
}

/* Watermark DG */
.step-card__wm{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  opacity: .12;
  overflow: hidden;
}

.step-card__wm img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto bajo cards: perfectamente centrado */
.carousel__controls{
  display:flex;
  justify-content:center;
  margin-top: 10px;
}

.carousel__hint{
  text-align:center;
  width: 100%;
  opacity: .70;
}

/* Opcional: scrollbar más discreta (si la quieres) */
.carousel__viewport::-webkit-scrollbar{
  height: 10px;
}
.carousel__viewport::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}
.carousel__viewport::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}


/* =========================================================
   FIX: "Método DG" — mantener Acompañamiento en la misma fila (desktop)
   ========================================================= */

#process .process-seal{
  /* damos aire real al texto para que no se rompa */
  max-width: 840px;
}

#process .process-seal__v{
  /* tipografía flexible para que quepa sin sacrificios */
  font-size: clamp(.80rem, .85vw, .92rem);
  letter-spacing: .1px;
}

/* Desktop: que NO brinque "Acompañamiento" a otra línea */
@media (min-width: 981px){
  #process .process-seal__v{
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis; /* fallback por si el usuario tiene pantalla muy estrecha */
  }
}

/* Tablet/Mobile: permitimos wrap bonito */
@media (max-width: 980px){
  #process .process-seal__v{
    white-space: normal !important;
    overflow: visible;
    text-overflow: initial;
  }
}

/* =========================================================
   FIX DEFINITIVO: "Método DG" sin ellipsis (sin "...")
   - Desktop: 1 línea completa (sin cortar)
   - Mobile: puede partir si hace falta
   ========================================================= */

#process .process-seal { width: 100%; }
#process .process-seal__txt { min-width: 0; } /* importante en flex */

#process .process-seal__v{
  /* tipografía flexible para que quepa sin sacrificios */
  font-size: clamp(.78rem, .85vw, .92rem);
  letter-spacing: .1px;
}

/* Desktop: 1 sola línea, pero SIN recortar ni "..." */
@media (min-width: 981px){
  #process .process-seal__v{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
}

/* Tablet/Mobile: si no cabe, que se vaya a 2 líneas (mejor UX que cortar) */
@media (max-width: 980px){
  #process .process-seal__v{
    white-space: normal !important;
  }
}

/*AVISO DE PRIVACIDAD*/
.privacy-link{
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
}

.privacy-link:hover{
  text-decoration: none;
}

.privacy-actions{
  margin-top: 10px;
  margin-bottom: 8px;
}

.privacy-btn{
  width: 100%;
  justify-content: center;
  font-weight: 600;
  border-radius: 14px;
}

@media (min-width: 768px){
  .privacy-btn{
    width: auto;
    min-width: 240px;
  }
}

/* =========================
   PRIVACY BLOCK — PREMIUM
========================= */

.privacy-consent{
  font-weight: 650;
  line-height: 1.4;
  color: var(--text);
}

.privacy-inline-card{
  margin-top: 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), .14);
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb), .04),
    rgba(var(--accent-rgb), .02)
  );
}

.privacy-inline-card__icon{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .08);
  font-size: 14px;
}

.privacy-inline-card__content{
  display: grid;
  gap: 6px;
  min-width: 0;
}

.privacy-inline-card__text{
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--muted);
}

.privacy-inline-card__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), .28);
  padding-bottom: 2px;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.privacy-inline-card__link::after{
  content: "↗";
  font-size: .9em;
}

.privacy-inline-card__link:hover{
  opacity: .85;
  border-color: rgba(var(--accent-rgb), .55);
}

@media (max-width: 640px){
  .privacy-inline-card{
    padding: 13px 14px;
    border-radius: 14px;
  }

  .privacy-inline-card__text,
  .privacy-inline-card__link{
    font-size: .93rem;
  }
}

/*NUEVO ESTILO*/
/* =========================================
   HERO FIX DEFINITIVO (LIMPIO Y CONTROLADO)
========================================= */

.hero__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 32px;
}

@media (max-width: 768px){

  .hero__grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ❌ Ocultamos ruido en mobile */
  .hero__media{
    display: none;
  }

  .hero__card{
    display: none;
  }

  /* Simplificamos bullets */
  .trust-bullets li:nth-child(3){
    display: none;
  }

  /* CTA dominante */
  .hero__cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero__cta .btn{
    width: 100%;
    font-size: 16px;
    padding: 14px;
  }

  /* Tipografía */
  .h1{
    font-size: 32px;
    line-height: 1.1;
  }

  .lead-text{
    font-size: 15px;
    line-height: 1.45;
  }

  /* Meta cards */
  .meta-row{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   HEADER FIX MOBILE
========================================= */

@media (max-width: 768px){

  .brand__meta{
    display: none;
  }

  .header__actions{
    gap: 6px;
  }

  .header__actions .btn--primary{
    font-size: 13px;
    padding: 8px 12px;
    white-space: nowrap;
  }
}

/* =========================================
   STICKY CTA FIX REAL
========================================= */

body{
  padding-bottom: 90px;
}

@media (min-width: 920px){
  body{
    padding-bottom: 0;
  }
}

/* =========================================
   OVERFLOW FIX GLOBAL
========================================= */

html, body{
  overflow-x: hidden;
}

img{
  max-width: 100%;
  height: auto;
}

/* Mobile */
@media (max-width: 768px){
  /* aquí van estilos mobile */
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px){
  /* aquí van estilos tablet */
}

/* Desktop */
@media (min-width: 1025px){
  /* aquí van estilos desktop */
}

/*HEADER CAMBIADO*/
/* =========================================
   HEADER MOBILE PERFECTO (SIN CAMBIAR HTML)
========================================= */

@media (max-width: 768px){

  /* CONTENEDOR GENERAL */
  .header__inner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* OCULTAR LINKS (CRÍTICO PARA UX) */
  .header__links{
    display: none;
  }

  /* FILA 1: LOGO + TEXTO */
  .brand{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .brand__logo{
    width: 42px;
    height: 42px;
  }

  .brand__text{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .brand__name{
    font-size: 14px;
    font-weight: 700;
  }

  .brand__meta{
    font-size: 12px;
    opacity: 0.75;
  }

  /* FILA 2: BOTONES */
  .header__controls{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    width: 100%;
  }

  /* CTA PRINCIPAL */
  .header__controls .btn--primary{
    width: 100%;
    font-size: 14px;
    padding: 10px;
  }

  /* BOTÓN IDIOMA */
  #langToggle{
    width: 60px;
  }

}

/* =========================================
   STICKY CTA LIMPIO (1 BOTÓN)
========================================= */

.sticky-cta{
  grid-template-columns: 1fr !important;
}

/* =========================================
   HEADER MOBILE FINAL — PERFECT ENTRY STATE
========================================= */

@media (max-width: 768px){

  /* Header más limpio y respirado */
  .header{
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header__inner{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* La marca entra completa: logo + nombre + subtítulo */
  .brand{
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0;
  }

  .brand__logo{
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    border-radius: 999px;
  }

  .brand__text{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .brand__name{
    display: block !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    color: #3f7391;
  }

  .brand__meta{
    display: block !important;
    margin-top: 2px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: rgba(31, 41, 55, 0.78) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    opacity: 1 !important;
  }

  /* Oculta navegación editorial en mobile */
  .header__links{
    display: none !important;
  }

  /* Nav ocupa toda la segunda fila */
  .header__actions{
    display: block !important;
    width: 100% !important;
  }

  .header__controls{
    display: grid !important;
    grid-template-columns: 88px 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  /* Botón idioma */
  #langToggle{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    padding: 0 12px !important;
  }

  #langToggle .btn__icon{
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* CTA principal del header */
  .header__controls .btn--primary{
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
}

/* =========================================
   HEADER EXTRA SMALL DEVICES
========================================= */

@media (max-width: 390px){

  .brand{
    grid-template-columns: 40px 1fr !important;
    gap: 10px !important;
  }

  .brand__name{
    font-size: 16px !important;
  }

  .brand__meta{
    font-size: 12px !important;
  }

  .header__controls{
    grid-template-columns: 82px 1fr !important;
    gap: 8px !important;
  }

  .header__controls .btn--primary{
    font-size: 15px !important;
  }
}


/* =========================================
   HERO SLIDER SOLO MOBILE
   Desktop queda intacto
========================================= */

/* Por defecto: el slider mobile no se muestra */
.hero__media--mobile{
  display: none;
}

/* Desktop explícito */
.hero__media--desktop{
  display: block;
}

@media (max-width: 768px){

  /* Slider original de desktop oculto solo en mobile */
  .hero__media--desktop{
    display: none !important;
  }

  /* Tarjeta inferior derecha oculta solo en mobile */
  .hero__right .hero__card{
    display: none !important;
  }

  /* Mostrar slider mobile debajo de meta-cards */
  .hero__media--mobile{
    display: block !important;
    margin-top: 18px;
  }

 .hero__media--mobile .media-frame{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  height: 360px;
  background: #e8edf1;
}

.hero__media--mobile .media-frame__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}

/* Ajuste fino por imagen */
.hero__media--mobile .media-frame__img--family{
  object-position: center 30%;
}

.hero__media--mobile .media-frame__img--office{
  object-position: center 22%;
}

.hero__media--mobile .media-frame__img--retiro{
  object-position: center 18%;
}

  .hero__media--mobile .media-frame__img.is-active{
    opacity: 1;
  }

  .hero__media--mobile .media-tags{
    position: absolute;
    left: 50%;
    bottom: 52px;
    transform: translateX(-50%);
    z-index: 3;
  }

  .hero__media--mobile .tag--main{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: #2f2f2f;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
  }

  /* Flechas ocultas en mobile */
  .hero__media--mobile .media-frame__nav{
    display: none !important;
  }

  .hero__media--mobile .media-dots{
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
  }

  .hero__media--mobile .media-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,.75);
    padding: 0;
    cursor: pointer;
  }

  .hero__media--mobile .media-dot.is-active{
    width: 20px;
    background: #4f85a8;
  }
}

@media (max-width: 480px){
  .hero__media--mobile .media-frame{
    height: 340px;
    border-radius: 22px;
  }

  .hero__media--mobile .tag--main{
    font-size: 13px;
    padding: 9px 16px;
  }

  .hero__media--mobile .media-frame__img--family{
    object-position: center 28%;
  }

  .hero__media--mobile .media-frame__img--office{
    object-position: center 20%;
  }

  .hero__media--mobile .media-frame__img--retiro{
    object-position: center 16%;
  }
}


/* =========================================
   COMPARATIVA — MOBILE FIX PERFECTO
   Desktop queda intacto
========================================= */

@media (max-width: 768px){

  /* Layout general en una sola columna */
  #comparativa .compare-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  /* Asegura orden correcto en mobile */
  #comparativa .compare-left{
    order: 1;
  }

  #comparativa .compare-right{
    order: 2;
  }

  /* La tarjeta de resultado deja de competir con la imagen */
  #comparativa .compare-result{
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(31, 41, 55, .08) !important;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .05) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #comparativa .compare-result__icon{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    background: #e7f1ec !important;
    color: #3c7d68 !important;
    border: 1px solid rgba(60,125,104,.12) !important;
  }

  #comparativa .compare-result__title{
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
    color: #1f2937 !important;
  }

  #comparativa .compare-result__text{
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: rgba(31,41,55,.82) !important;
    max-width: none !important;
  }

  /* Foto: separada, centrada y con mejor proporción */
 #comparativa .compare-photoCard{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;

  padding: 12px 16px 10px 16px !important; /* 🔥 reducido */

  border-radius: 28px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(31, 41, 55, .06) !important;
  box-shadow: 0 12px 30px rgba(31,41,55,.05) !important;
}

 #comparativa .compare-photo{
  display: block !important;
  width: 100% !important;
  max-width: 280px !important;

  height: auto !important;

  margin: 0 auto 4px auto !important; /* 🔥 reduce espacio abajo */

  object-fit: contain !important;
  object-position: center top !important;
}

  /* Meta inferior de la foto: ya no flotada ni superpuesta raro */
  #comparativa .compare-photoMeta{
  position: static !important;
  margin-top: 4px !important; /* 🔥 clave */

  width: 100% !important;

  border-radius: 20px !important;
  padding: 14px 14px 16px !important;

  background: rgba(255,255,255,.88) !important;
  border-top: 1px solid rgba(31,41,55,.06) !important;
  box-shadow: none !important;
}

  #comparativa .compare-photoMeta__name{
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: #1f2937 !important;
  }

  #comparativa .compare-photoMeta__role{
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: rgba(31,41,55,.75) !important;
    margin-bottom: 12px !important;
  }

  #comparativa .compare-photoMeta__cta{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: #427898 !important;
    color: #ffffff !important;
  }

  /* Espaciado extra entre resultado y foto */
  #comparativa .compare-right{
    margin-top: 2px !important;
  }

  /* El bloque VS no debe estorbar en mobile */
  #comparativa .compare-vs{
    display: none !important;
  }

  /* La tabla desktop no debe forzar rarezas visuales */
  #comparativa .table-wrap{
    overflow: visible !important;
  }
}

/* =========================================================
   SERVICES MOBILE TAP FIX
   Solo móvil / no toca desktop
   Pegar al FINAL de styles.css
========================================================= */

@media (max-width: 980px), (hover: none) and (pointer: coarse) {

  /* Aire para que la sticky CTA no tape la última tarjeta abierta */
  #servicios {
    padding-bottom: 110px;
    scroll-margin-top: 90px;
  }

  #servicios .svcGrid {
    gap: 18px;
  }

  /* Variable de altura frontal para controlar el área clicable */
  #servicios .svcCard {
    --svc-front-h: 280px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
  }

  /* La parte frontal visible */
  #servicios .svcCard__media {
    min-height: var(--svc-front-h);
    padding: 16px;
  }

  /* El botón YA NO cubre toda la tarjeta, solo el frente */
  #servicios .svcCard__toggle {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--svc-front-h);
    z-index: 7;
  }

  /* Contenido expandido en móvil */
  #servicios .svcCard__content {
    display: none;
    position: relative;
    inset: auto;
    transform: none;
    z-index: 2;
    background: rgba(255, 255, 255, 0.98);
    padding: 18px 18px 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
  }

  #servicios .svcCard.is-open .svcCard__content {
    display: block;
    animation: svcMobileReveal 0.24s ease;
  }

  /* Cuando abre, el frente se compacta un poco y se siente más limpio */
  #servicios .svcCard.is-open {
    --svc-front-h: 220px;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.14);
  }

  #servicios .svcCard.is-open .svcCard__title {
    font-size: clamp(22px, 6vw, 28px);
  }

  #servicios .svcCard.is-open .svcCard__teaser {
    max-height: calc(1.45em * 2);
    opacity: 0.88;
  }

  /* Señal visual de estado abierto */
  #servicios .svcCard.is-open .svcCard__hintMobile,
  #servicios .svcCard.is-open .svcCard__hintArrow {
    opacity: 0.65;
  }

  /* Listas más cómodas en móvil */
  #servicios .svcCard__content .list {
    padding-left: 18px;
    margin: 12px 0 0;
  }

  #servicios .svcCard__content .list li + li {
    margin-top: 8px;
  }

  /* Mejora legibilidad táctil */
  #servicios .svcCard__content .muted {
    font-size: 15.5px;
    line-height: 1.55;
  }

  /* Opcional: un poco más de altura en pantallas muy pequeñas */
  @media (max-width: 520px) {
    #servicios .svcCard {
      --svc-front-h: 300px;
    }

    #servicios .svcCard.is-open {
      --svc-front-h: 230px;
    }

    #servicios .svcCard__title {
      max-width: 15ch;
    }
  }
}

@keyframes svcMobileReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   SERVICIOS MOBILE — mantener imagen visible al abrir
   Pegar al FINAL de styles.css
========================================================= */

@media (max-width: 980px), (hover: none) and (pointer: coarse) {

  /* Mantener visible el bloque visual superior */
  #servicios .svcCard.is-open .svcCard__media{
    opacity: 1 !important;
  }

  /* Mantener visible la imagen base */
  #servicios .svcCard.is-open .svcCard__img{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Mantener overlay para que la foto se vea elegante */
  #servicios .svcCard.is-open .svcCard__overlay{
    opacity: 1 !important;
  }

  /* Ocultar solo el texto del frente cuando está abierta */
  #servicios .svcCard.is-open .svcCard__title,
  #servicios .svcCard.is-open .svcCard__teaser,
  #servicios .svcCard.is-open .svcCard__hint,
  #servicios .svcCard.is-open .svcCard__badge{
    opacity: 0;
    pointer-events: none;
  }

  /* Asegurar que el frente conserve altura visual */
  #servicios .svcCard__media{
    min-height: 280px;
  }

  #servicios .svcCard.is-open{
    --svc-front-h: 280px;
  }

  @media (max-width: 520px){
    #servicios .svcCard__media{
      min-height: 260px;
    }

    #servicios .svcCard.is-open{
      --svc-front-h: 260px;
    }
  }
}


/* =========================================================
   PROCESS MOBILE — compactar espacios y mejorar balance
   SOLO MÓVIL / NO TOCAR DESKTOP
========================================================= */
@media (max-width: 980px) {

  /* Sección más compacta y con mejor convivencia con sticky CTA */
  #process {
    padding-top: 40px;
    padding-bottom: 96px;
  }

  /* Header completo: sin huecos raros */
  #process .process-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  /* Bloque izquierdo del título */
  #process .process-head__left {
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  #process .process-head__left .muted {
    margin: 0 0 6px !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
  }

  #process .process-head__left .h2 {
    margin: 0 !important;
    font-size: clamp(1.85rem, 7vw, 2.3rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.03em !important;
    max-width: 12ch !important;
  }

  /* Sello pegado visualmente al título */
  #process .process-seal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;

    margin-top: 0 !important;
    padding: 14px 16px !important;
    gap: 12px !important;

    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  }

  #process .process-seal > img {
    width: 44px !important;
    height: 44px !important;
  }

  #process .process-seal__k {
    margin: 0 0 2px !important;
    font-size: 1.02rem !important;
    line-height: 1.1 !important;
  }

  #process .process-seal__v {
    font-size: 0.94rem !important;
    line-height: 1.28 !important;
    opacity: 0.82 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }

  /* Carrusel mucho más cerca del header */
  #process .carousel {
    margin-top: 8px !important;
  }

  /* Quitamos aire de más arriba/abajo */
  #process .carousel__viewport {
    padding: 2px 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-padding-left: 2px !important;
  }

  #process .carousel__track {
    gap: 14px !important;
    padding: 2px 2px 8px !important;
    align-items: stretch !important;
  }

  /* Tarjeta protagonista en móvil */
  #process .carousel__slide.step-card {
    min-width: calc(100vw - 46px) !important;
    max-width: calc(100vw - 46px) !important;
    padding: 20px 18px 22px !important;
    border-radius: 22px !important;
    min-height: auto !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
  }

  #process .step-card__top {
    margin-bottom: 12px !important;
    gap: 10px !important;
  }

  #process .step-card__n {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  #process .step-card__wm {
    width: 52px !important;
    height: 52px !important;
    opacity: 0.08 !important;
  }

  #process .step-card .h3 {
    font-size: clamp(1.05rem, 5.6vw, 1.3rem) !important;
    line-height: 1.22 !important;
    margin: 0 0 10px !important;
    max-width: 18ch !important;
  }

  #process .step-card__p {
    margin-top: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Hint mucho más compacto */
  #process .carousel__controls {
    margin-top: 8px !important;
  }

  #process .carousel__hint {
    margin-top: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    opacity: 0.68 !important;
  }
}

/* Ajuste fino para móviles pequeños */
@media (max-width: 520px) {
  #process {
    padding-top: 34px;
  }

  #process .process-head {
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  #process .process-head__left .h2 {
    font-size: clamp(1.72rem, 8vw, 2.05rem) !important;
    max-width: 11ch !important;
  }

  #process .process-seal {
    padding: 13px 14px !important;
    border-radius: 17px !important;
  }

  #process .process-seal__v {
    font-size: 0.9rem !important;
  }

  #process .carousel__slide.step-card {
    min-width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
    padding: 18px 16px 20px !important;
  }

  #process .step-card .h3 {
    max-width: 16ch !important;
  }
}


/* =========================================================
   HERO MOBILE FIX — mostrar galería correctamente en teléfono
   NO TOCA DESKTOP
========================================================= */

@media (max-width: 768px) {

  /* El bloque mobile debe existir sí o sí */
  .hero__copy .hero__media--mobile{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin-top: 18px !important;
  }

  /* El bloque desktop sí se oculta en mobile */
  .hero__right .hero__media--desktop{
    display: none !important;
  }

  /* Reserva visual robusta para evitar "espacio vacío" */
  .hero__media--mobile .media-frame{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 320px !important;
    height: 360px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #e8edf1 !important;
  }

  /* Todas las imágenes están montadas correctamente */
  .hero__media--mobile .media-frame__img{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .35s ease !important;
  }

  /* Imagen activa visible */
  .hero__media--mobile .media-frame__img.is-active{
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
  }

  /* Fallback: si por cualquier razón no entra el JS,
     la primera imagen sigue viéndose */
  .hero__media--mobile .media-frame__img:first-of-type{
    opacity: 1;
    visibility: visible;
  }

  /* Capas UI arriba de la imagen */
  .hero__media--mobile .media-tags,
  .hero__media--mobile .media-dots{
    z-index: 3 !important;
  }

  .hero__media--mobile .tag--main{
    position: relative;
    z-index: 3;
  }
}

@media (max-width: 480px) {
  .hero__media--mobile .media-frame{
    min-height: 300px !important;
    height: 340px !important;
    border-radius: 22px !important;
  }
}


/* =========================================================
   SERVICES PREMIUM — FINAL
========================================================= */

#servicios.servicesPremium{
  position: relative;
}

#servicios.servicesPremium .servicesPremium__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

#servicios.servicesPremium .servicesPremium__card{
  position: relative;
  min-height: 620px;
  border-radius: 30px;
  overflow: hidden;
  background: #081224;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow:
    0 16px 42px rgba(15,23,42,.08),
    0 4px 14px rgba(15,23,42,.04);
  transition: transform .28s ease, box-shadow .28s ease;
  isolation: isolate;
}

#servicios.servicesPremium .servicesPremium__toggle{
  position: absolute;
  inset: 0;
  z-index: 8;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#servicios.servicesPremium .servicesPremium__toggle:focus{
  outline: none;
}

#servicios.servicesPremium .servicesPremium__toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: -8px;
  border-radius: 24px;
}

#servicios.servicesPremium .servicesPremium__media{
  position: relative;
  min-height: 620px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#servicios.servicesPremium .servicesPremium__image{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform .55s ease, filter .35s ease;
  filter: saturate(1.02) contrast(1.02);
}

#servicios.servicesPremium .servicesPremium__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(5, 10, 20, 0.18) 0%,
      rgba(5, 10, 20, 0.22) 18%,
      rgba(5, 10, 20, 0.28) 38%,
      rgba(5, 10, 20, 0.56) 72%,
      rgba(5, 10, 20, 0.90) 100%
    );
}

#servicios.servicesPremium .servicesPremium__top,
#servicios.servicesPremium .servicesPremium__bottom{
  position: relative;
  z-index: 2;
}

#servicios.servicesPremium .servicesPremium__top{
  max-width: 92%;
}

#servicios.servicesPremium .servicesPremium__bottom{
  width: 100%;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}

#servicios.servicesPremium .servicesPremium__title{
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 2.1vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}

#servicios.servicesPremium .servicesPremium__teaser{
  margin: 0;
  color: rgba(255,255,255,.95);
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 34ch;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

#servicios.servicesPremium .servicesPremium__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

#servicios.servicesPremium .servicesPremium__arrow{
  transition: transform .2s ease;
}

#servicios.servicesPremium .servicesPremium__ctaDesktop{
  display: inline;
}

#servicios.servicesPremium .servicesPremium__ctaMobile{
  display: none;
}

/* PANEL DETALLE */
#servicios.servicesPremium .servicesPremium__content{
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 24px 22px 24px;
  background: rgba(255,255,255,.985);
  backdrop-filter: blur(10px);
  transform: translateY(102%);
  transition: transform .4s ease;
  overflow: auto;
}

#servicios.servicesPremium .servicesPremium__content .muted{
  color: #334155;
  line-height: 1.65;
  margin-bottom: 14px;
}

#servicios.servicesPremium .servicesPremium__content .list{
  margin: 0;
  padding-left: 18px;
}

#servicios.servicesPremium .servicesPremium__content .list li{
  margin-bottom: 10px;
  color: #0f172a;
  line-height: 1.55;
}

/* DESKTOP HOVER */
@media (hover:hover) and (pointer:fine){
  #servicios.servicesPremium .servicesPremium__card:hover{
    transform: translateY(-6px);
    box-shadow:
      0 24px 56px rgba(15,23,42,.12),
      0 8px 20px rgba(15,23,42,.06);
  }

  #servicios.servicesPremium .servicesPremium__card:hover .servicesPremium__image{
    transform: scale(1.06);
  }

  #servicios.servicesPremium .servicesPremium__card:hover .servicesPremium__arrow{
    transform: translateX(3px);
  }

  #servicios.servicesPremium .servicesPremium__card:hover .servicesPremium__content{
    transform: translateY(0);
  }
}

#servicios.servicesPremium .servicesPremium__card.is-open .servicesPremium__content,
#servicios.servicesPremium .servicesPremium__card[data-open="true"] .servicesPremium__content{
  transform: translateY(0);
}

/* TABLET */
@media (max-width: 1100px){
  #servicios.servicesPremium .servicesPremium__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  #servicios.servicesPremium .servicesPremium__card,
  #servicios.servicesPremium .servicesPremium__media{
    min-height: 580px;
  }

  #servicios.servicesPremium .servicesPremium__title{
    font-size: clamp(25px, 3vw, 31px);
  }

  #servicios.servicesPremium .servicesPremium__teaser{
    max-width: 31ch;
  }
}

/* MOBILE */
@media (max-width: 768px){
  #servicios.servicesPremium .servicesPremium__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #servicios.servicesPremium .servicesPremium__card{
    min-height: auto;
    border-radius: 26px;
  }

  #servicios.servicesPremium .servicesPremium__media{
    min-height: 460px;
    padding: 18px 18px 18px;
  }

  #servicios.servicesPremium .servicesPremium__top{
    max-width: 100%;
  }

  #servicios.servicesPremium .servicesPremium__bottom{
    max-width: 100%;
    gap: 12px;
  }

  #servicios.servicesPremium .servicesPremium__title{
    font-size: 22px;
    line-height: 1.05;
    max-width: 11ch;
  }

  #servicios.servicesPremium .servicesPremium__teaser{
    font-size: 14px;
    line-height: 1.45;
    max-width: 24ch;
  }

  #servicios.servicesPremium .servicesPremium__ctaDesktop{
    display: none;
  }

  #servicios.servicesPremium .servicesPremium__ctaMobile{
    display: inline;
  }

  #servicios.servicesPremium .servicesPremium__cta{
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
  }

  /* En móvil el detalle baja debajo de la imagen */
  #servicios.servicesPremium .servicesPremium__content{
    position: relative;
    inset: auto;
    transform: none;
    display: none;
    padding: 18px 18px 22px;
    background: #ffffff;
    border-top: 1px solid rgba(15,23,42,.08);
  }

  #servicios.servicesPremium .servicesPremium__card.is-open .servicesPremium__content{
    display: block;
  }
}

@media (max-width: 420px){
  #servicios.servicesPremium .servicesPremium__media{
    min-height: 445px;
  }

  #servicios.servicesPremium .servicesPremium__title{
    font-size: 21px;
  }

  #servicios.servicesPremium .servicesPremium__teaser{
    font-size: 13.5px;
    max-width: 24ch;
  }
}

@media (prefers-reduced-motion: reduce){
  #servicios.servicesPremium .servicesPremium__card,
  #servicios.servicesPremium .servicesPremium__image,
  #servicios.servicesPremium .servicesPremium__content,
  #servicios.servicesPremium .servicesPremium__arrow{
    transition: none !important;
  }
}

/* =========================================================
   FIX CTA VER DETALLES — limpio, visible y premium
========================================================= */

#servicios.servicesPremium .servicesPremium__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;

  color: rgba(255,255,255,.96);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

#servicios.servicesPremium .servicesPremium__ctaDesktop,
#servicios.servicesPremium .servicesPremium__ctaMobile{
  color: rgba(255,255,255,.96);
}

#servicios.servicesPremium .servicesPremium__arrow{
  color: rgba(255,255,255,.92);
  font-size: 14px;
  opacity: 1;
  transform: translateX(0);
  transition: transform .2s ease, opacity .2s ease;
}

/* Línea sutil debajo para darle presencia sin ensuciar */
#servicios.servicesPremium .servicesPremium__cta::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-left: 2px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.18) 100%
  );
  align-self: center;
  flex: 1 1 auto;
  min-width: 26px;
}

/* Hover elegante */
@media (hover:hover){
  #servicios.servicesPremium .servicesPremium__card:hover .servicesPremium__cta{
    color: #ffffff;
  }

  #servicios.servicesPremium .servicesPremium__card:hover .servicesPremium__arrow{
    transform: translateX(4px);
    color: #ffffff;
  }

  #servicios.servicesPremium .servicesPremium__card:hover .servicesPremium__cta::after{
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.28) 100%
    );
  }
}

/* Mobile: un poco más visible */
@media (max-width: 768px){
  #servicios.servicesPremium .servicesPremium__cta{
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.98);
  }

  #servicios.servicesPremium .servicesPremium__ctaDesktop{
    display: none;
  }

  #servicios.servicesPremium .servicesPremium__ctaMobile{
    display: inline;
    color: rgba(255,255,255,.98);
  }

  #servicios.servicesPremium .servicesPremium__cta::after{
    min-width: 20px;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.22) 100%
    );
  }
}


/* =========================
   STICKY CTA — PREMIUM FIX
========================= */

.sticky-cta{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  display: none;
  z-index: 60;

  /* Fondo limpio tipo “barra premium” */
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);

  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));

  border-top: 1px solid rgba(31,41,55,.08);

  /* Sombra MUY sutil (premium) */
  box-shadow: 0 -6px 20px rgba(31,41,55,.06);
}

@media (max-width: 920px){
  .sticky-cta{
    display: block;
  }
}

.sticky-cta .btn{
  width: 100%;
  height: 52px;

  border-radius: 14px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================
   LOGO — ajuste premium (balance perfecto)
========================================= */

/* Imagen del logo */
.brand__logo{
  width: 100%;
  height: 100%;
  object-fit: cover;  /* llena perfecto */
  transform: scale(1.08); /* micro ajuste premium */
}

/* Mobile — balance con botón EN */
@media (max-width: 520px){
  .brand__mark{
    width: 42px;
    height: 42px;
  }

  .brand__logo{
    transform: scale(1.1); /* llena mejor en mobile */
  }
}


/*CAMBIOS SUGERIDOS*/

.hero__copy{
  max-width: 640px;
}

.hero .badge{
  margin-bottom: 14px;
  font-size: .85rem;
  opacity: .85;
}

.hero .h1{
  margin-bottom: 14px;
  line-height: 1.1;
}

.hero .lead-text{
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: .9;
  margin-bottom: 20px;
}

@media (max-width: 520px){

  .header__inner{
    justify-content: space-between;
  }

  .brand{
    max-width: 60%;
  }

  .brand__name{
    font-size: .95rem;
  }

  .header__actions .btn--primary{
    font-size: .85rem;
    padding: 8px 10px;
  }
}

.btn{
  font-weight: 600;
}

.btn--primary{
  padding: 12px 16px;
  border-radius: 12px;
  letter-spacing: -.01em;
}

.btn--primary.btn--lg{
  padding: 14px 18px;
  font-size: .95rem;
}

.btn--ghost{
  opacity: .9;
}

.card{
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(31,41,55,.10);
}

.meta-card__v{
  font-size: 1.4rem;
  font-weight: 800;
}

.meta-card{
  padding: 16px;
}

#lead form.form.card{
  box-shadow: 0 18px 40px rgba(31,41,55,.12);
  border-radius: 18px;
}

#lead .form input,
#lead .form select,
#lead .form textarea{
  border-radius: 12px;
  padding: 14px;
}

#lead .form input:focus,
#lead .form textarea:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(15,118,110,.12);
}

.section{
  padding: 72px 0;
}

@media (max-width: 768px){
  .section{
    padding: 56px 0;
  }
}

.card,
.info-card,
.meta-card,
.svc{
  border-radius: 16px !important;
}

/*CUADROS BALANCE*/
/* =========================================================
   FIX BALANCE PERFECTO — CARDS LEAD (mobile-first)
   ========================================================= */

/* 1. MISMO ANCHO VISUAL PARA AMBOS BLOQUES */
#lead .lead__copy,
#lead form#leadForm{
  width: 100%;
  max-width: 540px; /* mismo ancho exacto */
  margin-left: auto;
  margin-right: auto;
}

/* 2. MISMO PADDING INTERNO (CLAVE) */
#lead .lead__copy .card,
#lead form#leadForm{
  padding: 20px !important;
}

/* 3. MISMO RADIO (consistencia visual premium) */
#lead .lead__copy .card,
#lead form#leadForm{
  border-radius: 18px;
}

/* 4. EVITA DESPLAZAMIENTOS INTERNOS */
#lead .lead__copy{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 5. INPUTS ALINEADOS PERFECTAMENTE */
#lead .form input,
#lead .form textarea,
#lead .form select{
  width: 100%;
}

/* =========================================================
   AJUSTE FINO MOBILE (ULTRA PRECISO)
   ========================================================= */

@media (max-width: 520px){

  #lead .lead__copy,
  #lead form#leadForm{
    max-width: 100%;
  }

  #lead .lead__copy .card,
  #lead form#leadForm{
    padding: 18px !important;
  }
}

.brand__logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 999px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.brand__text{
  min-width: 0;
}

.brand__name{
  line-height: 1.05;
  margin: 0;
}

.brand__meta{
  line-height: 1.15;
  margin-top: 6px;
}


/* =========================================================
   REVEAL ON SCROLL — Premium, sobrio, consistente
   ========================================================= */

.reveal{
  opacity: 0;
  transform: translate3d(0, 24px, 0);

  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.22, 1, .36, 1);

  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variantes sutiles */
.reveal--soft{
  transform: translate3d(0, 16px, 0);
}

.reveal--left{
  transform: translate3d(-20px, 0, 0);
}

.reveal--right{
  transform: translate3d(20px, 0, 0);
}

.reveal--scale{
  transform: translate3d(0, 16px, 0) scale(.985);
}

.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible,
.reveal--soft.is-visible{
  transform: translate3d(0, 0, 0) scale(1);
}

/* Delays para ritmo visual premium */
.reveal-delay-1{ transition-delay: .12s; }
.reveal-delay-2{ transition-delay: .22s; }
.reveal-delay-3{ transition-delay: .32s; }
.reveal-delay-4{ transition-delay: .42s; }

/* Evita animaciones bruscas en mobile */
@media (max-width: 768px){
  .reveal,
  .reveal--soft,
  .reveal--left,
  .reveal--right,
  .reveal--scale{
    transition-duration: .85s;
    transform: translate3d(0, 18px, 0);
  }

  .reveal--left,
  .reveal--right{
    transform: translate3d(0, 14px, 0);
  }
}

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal--soft,
  .reveal--left,
  .reveal--right,
  .reveal--scale{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   HEADER LOGO — DESKTOP CLEAN FIX FINAL
   Corrige óvalo/halo del JPEG + balance premium
   ========================================================= */

@media (min-width: 769px){

  /* Estructura de marca */
  .header .brand{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
  }

  /* Contenedor totalmente neutro */
  .header .brand__mark{
    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    display: grid;
    place-items: center;

    background: transparent;
    border: 0;
    box-shadow: none;
    filter: none;
    padding: 0;

    border-radius: 50%;
    overflow: hidden; /* clave */
  }

  .header .brand__mark::before,
  .header .brand__mark::after{
    content: none;
    display: none;
  }

  /* Logo: recorte óptico correcto */
  .header .brand__logo{
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;      /* antes: contain */
    object-position: center;
    border-radius: 50%;

    background: transparent;
    box-shadow: none;
    filter: none;

    transform: scale(1.12); /* leve zoom para esconder fondo gris del JPEG */
  }

  /* Texto */
  .header .brand__text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .header .brand__name{
    margin: 0;
    font-size: 18px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .header .brand__meta{
    margin-top: 2px;
    line-height: 1.12;
    font-size: 13px;
  }

  /* Limpieza extra por si quedan estilos viejos */
  .header .brand__mark,
  .header .brand__logo{
    outline: none;
  }
}