:root{
  --bg:#070708;
  --bg2:#0b0b0d;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);

  --gold:#C9A86A;
  --goldDeep:#A88448;

  --max:1180px;
  --pad:22px;

  --radius:18px;
  --stroke: rgba(201,168,106,.18);
  --stroke2: rgba(255,255,255,.08);

  --shadow: 0 26px 80px rgba(0,0,0,.62);
  --shadow2: 0 14px 40px rgba(0,0,0,.55);

  /* ✅ Volvemos al look “anterior” (sans limpia tipo Apple) */
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif; /* (queda sin protagonismo) */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --focus: 0 0 0 3px rgba(201,168,106,.20);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  background: radial-gradient(1200px 700px at 50% -10%, rgba(201,168,106,.10), transparent 55%),
              radial-gradient(900px 520px at 20% 10%, rgba(201,168,106,.05), transparent 60%),
              var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.container{ width:min(var(--max), calc(100% - (var(--pad) * 2))); margin:0 auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.88);
  font-weight: 650;
  letter-spacing:.01em;
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); border-color: rgba(255,255,255,.16); }
.btn:focus{ outline:none; box-shadow: var(--focus); }

.btn-gold{
  border-color: rgba(201,168,106,.55);
  background: linear-gradient(180deg, rgba(201,168,106,.26), rgba(168,132,72,.08));
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(201,168,106,.10);
  position: relative;
}
.btn-gold::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:999px;
  background: radial-gradient(360px 140px at 30% 0%, rgba(201,168,106,.35), transparent 60%);
  opacity:.8; pointer-events:none;
  mix-blend-mode: screen;
}
.btn-gold:hover{ border-color: rgba(201,168,106,.85); box-shadow: 0 22px 80px rgba(201,168,106,.16); }

.kicker{
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201,168,106,.95);
  font-weight: 650;
  margin-bottom: 10px;
}

/* ✅ Tipografía “como antes”: headings también sans (más sobrio/premium-tech) */
.h1{
  font-family: var(--serif);
  font-weight: 750;
  letter-spacing: -.02em;
  font-size: clamp(42px, 4.8vw, 78px);
  line-height: 1.02;
  margin: 0 0 14px 0;
}
.h2{
  font-family: var(--serif);
  font-weight: 750;
  letter-spacing: -.01em;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.12;
  margin: 0 0 10px 0;
}

/* ✅ DORADO: garantizado (y con fallback sólido) */
.goldText{
  color: var(--gold) !important; /* fallback si el clip no aplica */
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(230,201,138,.96) 45%, rgba(201,168,106,1) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
}

/* Opción extra: si quieres dorado sin gradient (más “logo gold”) */
.goldSolid{
  color: var(--gold) !important;
  -webkit-text-fill-color: unset;
  background: none !important;
}

.lead{
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
  max-width: 68ch;
  margin: 0;
}

.section{
  position: relative;
  padding: 156px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.section--tight{ padding: 156px 0; }
.sectionTitle{
  text-align:center;
  margin-bottom: 30px;
}
.sub{
  margin: 0 auto;
  max-width: 80ch;
  color: var(--muted);
  line-height: 1.7;
}

.bg{
  position: relative;
  overflow: hidden;
}
.bg::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bgimg);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(1.02) contrast(1.05);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(0,0,0,.18), rgba(0,0,0,.55) 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65));
}
.bg > *{ position:relative; z-index:2; }

.cardGrid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.card{
  position:relative;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  overflow:hidden;
  box-shadow: var(--shadow2);
  min-height: 290px;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
}

.card .inner{
  position:relative; z-index:2;
  height:100%;
  padding: 26px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 10px;
}
.card h3{
  margin:0;
  font-family: var(--serif);
  font-weight: 750;
  letter-spacing: -.01em;
  font-size: 22px;
  color: rgba(255,255,255,.94);
}
.card p{
  margin:0;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  font-size: 14.5px;
}

.centerActions{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* HERO */
.hero{
  position: relative;
  min-height: 92vh;
  padding: 26px 0 84px;
  border-top: 0;
}
.heroHead{ padding-top: 118px; }
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items:center;
}
.heroVisual{
  border-radius: var(--radius);
  border:1px solid rgba(201,168,106,.18);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.heroVisual img{ width:100%; height:auto; opacity: .90; }

/* Floating header (only inside hero) */
.heroHeader{
  position:absolute;
  top: 18px;
  left: 0; right: 0;
  z-index: 20;
}
.heroHeaderBar{
  border-top: 1px solid rgba(201,168,106,.22);
  border-bottom: 1px solid rgba(201,168,106,.18);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.headerRow{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 16px;
  padding: 12px 0;
}
.headerLeft, .headerRight{
  display:flex;
  align-items:center;
  gap: 18px;
}
.headerLeft{ justify-content:flex-start; }
.headerRight{ justify-content:flex-end; }

.headerNavRight{ display:flex; gap:6px; }

.headerNav a{
  color: rgba(255,255,255,.78);
  font-weight: 650;
  font-size: 13.5px;
  letter-spacing: .01em;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .16s ease, color .16s ease;
  white-space: nowrap;
}
.headerNav a:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.logoCenter{ display:flex; align-items:center; justify-content:center; }
.logoCenter img{
  height: 54px;
  width:auto;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.60));
}

/* Mobile menu */
.burger{
  display:none;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: rgba(255,255,255,.90);
  cursor:pointer;
}
.mobilePanel{
  display:none;
  padding: 10px 0 14px;
  border-top: 1px solid rgba(201,168,106,.14);
}
.mobilePanel a{
  display:block;
  padding: 12px 0;
  color: rgba(255,255,255,.86);
}
.mobilePanel a:hover{ color: rgba(255,255,255,.96); }

.whoGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}
.whoBox{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.55);
  box-shadow: var(--shadow2);
  padding: 22px;
}
.whoBox h3{
  margin: 0 0 12px;
  font-family: var(--sans);
  font-weight: 750;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.94);
  font-size: 22px;
}
.whoBox ul{
  margin:0;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}

/*.closingStack{
  max-width: 900px;
  margin: 0 auto;
  padding-top: 18vh;
  text-align:center;
}*/

.closingStack{
  max-width: 900px;
  margin: 0 auto;
  padding-top: 6vh;   /* 👈 sube el título hacia la cabecera */
  padding-bottom: 6vh;
  text-align: center;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

footer{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 22px 0;
  color: rgba(255,255,255,.55);
  text-align:center;
  font-size: 13px;
}

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

@media (max-width: 960px){
  /* Ocultar nav links de ambos lados */
  .headerLeft{ display:none; }
  .headerRight .headerNav{ display:none !important; }
  .headerNavRight{ display:none !important; }

  /* Convertir headerRow en flex con logo centrado absolutamente */
  .headerRow{
    display: flex;
    align-items: center;
    position: relative;
    gap: 0;
    padding: 10px 0;
  }

  /* Burger a la izquierda */
  .burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink: 0;
  }

  /* Logo centrado absolutamente */
  .logoCenter{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Botón a la derecha */
  .headerRight{
    margin-left: auto;
    gap: 0;
  }
  .headerRight .btn{
    white-space:nowrap;
    font-size:12px;
    padding:9px 14px;
  }
}

@media (max-width: 520px){
  .logoCenter img{ height: 44px; }
  .heroHead{ padding-top: 106px; }
  .lead{ font-size: 16px; }
  .section{ padding: 78px 0; }
  .btn{ width:100%; }
  .headerRight .btn{ width:auto; }
}

.sectionTitle strong,
.sectionTitle p strong {
  color: var(--gold) !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.98) 0%,
    rgba(230,201,138,.96) 45%,
    rgba(201,168,106,1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* =========================================================
   ✅ EL PROBLEMA (solo esta sección)
   ========================================================= */

#problema .problemSub{
  margin: 10px auto 0;
  max-width: 70ch;
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -.01em;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  color: rgba(255,255,255,.86);
}

#problema .problemList{
  list-style: none;
  margin: 22px auto 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

#problema .problemList li{
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255,255,255,.86);
  font-weight: 650;
  letter-spacing: .01em;
}

#problema .problemList li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0.65em;  /*.55em;*/
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(201,168,106,1));
  box-shadow: 0 0 18px rgba(201,168,106,.18);
  border-radius: 2px;
}

/* =========================================
   EL PROBLEMA — ajuste de jerarquía vertical
   ========================================= */

/* Subimos el bloque superior (kicker + h2) */
#problema .sectionTitle{
  margin-top: -94px; /* acerca a la cabecera de la sección */
}

/* Aumentamos tamaño del literal “EL PROBLEMA” */
#problema .kicker{
  font-size: 18px;        /* antes 12px */
  letter-spacing: .18em;
}

/* Bajamos el bloque inferior hacia el pie */
#problema .problemSub{
  margin-top: 142px; /* ≈ 2 cm visuales */
}

#problema .problemList{
  margin-top: 44px; /* mantiene respiración entre texto y lista */
}



/* ===== EL CAMBIO – ajuste de texto en cards ===== */
.card-change .inner{
  justify-content: center;
  text-align: center;
}
.card-change .inner > div{
  margin-top: 48%;
}
.card-change h3,
.card-change p{
  text-align: center;
}

/* ===== FILTRO (Para quién es / Para quién no es) ===== */
#para-quien .whoBox h3{
  text-align: center;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 30px 0;
}
#para-quien .whoBox ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#para-quien .whoBox li{
  position: relative;
  padding-left: 22px;
  margin: 0 0 16px 0;
  font-size: 18px;
  line-height: 1.9;
  color: rgba(255,255,255,.88);
  font-weight: 600;
}
#para-quien .whoBox li::before{
  content: "◆";
  position: absolute;
  left: 0;
  top: 50%; /*0.05em;*/
  transform: translateY(-50%); /* 👈 centrado perfecto */
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
  opacity: .95;
}
#para-quien .whoBox ul{
  display: inline-block;
  text-align: left;
}
#para-quien .whoBox{
  text-align: center;
}

/* ===== Fondo tipo heroHeaderBar para secciones ===== */
.section-glass{
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#como,
#soluciones{
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================================================
   ✅ HERO AMPLIADO — forzar texto + botón al pie (funciona con min-height)
   ========================================================= */

#hero .heroCards .heroCard{
  display: flex;
  flex-direction: column;
}

#hero .heroCards .heroCardInner{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#hero .heroCards .heroCardBottom{
  margin-top: auto;
}

#hero .heroCards .heroCardBottom .centerActions{
  justify-content: center !important;
}

#hero .heroCards .heroCard{
  min-height: 300px;
}
#hero .heroCards .heroCard--center{
  min-height: 360px;
}

/* =========================================================
   ✅ CTA FORM (NEW SECTION) — estilos del formulario
   ========================================================= */

#cta .ctaFormWrap{
  width: min(860px, 100%);
  margin: 0 auto;
}

#cta .ctaForm{
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid rgba(201,168,106,.18);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 26px;
}

#cta .ctaFormGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#cta .field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#cta .field--full{
  grid-column: 1 / -1;
}

#cta .label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(201,168,106,.95);
  font-weight: 650;
}

#cta input,
#cta select,
#cta textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.88);
  padding: 12px 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

#cta textarea{
  resize: vertical;
  min-height: 120px;
}

#cta input::placeholder,
#cta textarea::placeholder{
  color: rgba(255,255,255,.48);
}

#cta input:focus,
#cta select:focus,
#cta textarea:focus{
  border-color: rgba(201,168,106,.40);
  box-shadow: var(--focus);
}

#cta .ctaNote{
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.58);
  line-height: 1.55;
}

/* Responsive formulario */
@media (max-width: 820px){
  #cta .ctaFormGrid{
    grid-template-columns: 1fr;
  }
  #cta .ctaForm{
    padding: 20px;
  }
}

/* =========================================================
   ✅ FLOATING CHAT BUTTON (placeholder)
   ========================================================= */

.chatFab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

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

  border: 1px solid rgba(201,168,106,.55);
  background: linear-gradient(180deg, rgba(201,168,106,.18), rgba(0,0,0,.38));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .01em;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.chatFab:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: rgba(201,168,106,.85);
  box-shadow: 0 22px 80px rgba(201,168,106,.12), 0 18px 60px rgba(0,0,0,.62);
}

.chatFab:focus{
  outline: none;
  box-shadow: var(--focus), 0 22px 80px rgba(201,168,106,.12);
}

.chatFabIcon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
}

.chatFabText{
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(230,201,138,.96) 45%, rgba(201,168,106,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =========================================
   FIX: HERO cards — central más alta (otra vez)
   ========================================= */

/* Evita que el grid estire todas al alto de la más alta */
#hero .heroCards{
  align-items: start; /* clave */
}

/* Reafirmamos alturas (por si alguna regla anterior pisa) */
#hero .heroCards .heroCard{
  min-height: 360px;
}

#hero .heroCards .heroCard.heroCard--center{
  min-height: 360px !important; /* blindaje */
}

/* =========================================
   HERO ampliado — centrar títulos de las cards
   ========================================= */

#hero .heroCards .heroCardTop{
  text-align: center;
}

#hero .heroCards .heroCardTop h3{
  text-align: center;
}


/* =========================================
   EL CAMBIO — ajuste de jerarquía vertical
   (subir título + h2, centrar cards, bajar bloque final)
   ========================================= */

/* 1) Subimos el bloque superior (kicker + h2) */
#cambio .sectionTitle{
  margin-top: -94px; /* acerca a la cabecera de la sección */
}

/* 2) Aumentamos tamaño del título “EL CAMBIO” (kicker) */
#cambio .kicker{
  font-size: 18px;        /* antes 12px */
  letter-spacing: .18em;
}

/* 3) Subimos un poco el H2 para que quede más pegado al título */
#cambio .sectionTitle .h2{
  margin-top: -6px;  /* ajusta fino si quieres */
}

/* 4) Centrar las 3 cards en altura (sin tocar otras secciones) */
#cambio .cardGrid3{
  align-items: center; /* centra verticalmente dentro del grid */
}

/* 5) Bajamos el bloque final (frase + CTA) hacia el pie */
#cambio .sectionTitle[style*="margin-top"]{
  margin-top: 142px !important; /* lo baja para pegarlo más al pie */
}


/* =========================================
   CÓMO FUNCIONA — Paso X arriba + texto al pie
   ========================================= */

#como .card{
  display: flex;
  flex-direction: column;
}

#como .howCardInner{
  flex: 1;
  display: flex;
  flex-direction: column;
}

#como .howCardTop{
  text-align: center;
}

#como .howCardBottom{
  margin-top: auto;   /* empuja el bloque inferior al pie */
  text-align: center;
}

#como .howCardBottom p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}

#como .howCardBottom strong{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

/* =========================================
   CÓMO FUNCIONA — subir título a la cabecera
   ========================================= */

#como .sectionTitle{
  margin-top: -70px;     /* sube todo el bloque */
  margin-bottom: 40px;  /* mantiene aire con las cards */
}

/* =========================================
   OPSRELIEVE STANDARD — subir título
   ========================================= */

#standard .sectionTitle{
  margin-top: -70px;     /* mismo criterio que secciones anteriores */
  margin-bottom: 40px;
}

/* Títulos centrados solo en cards 1 y 2 */
#standard .card:nth-child(1) h3,
#standard .card:nth-child(2) h3{
  text-align: center;
}

/* Pie de las cards centrado (todas) */
#standard .card .inner > div:last-child{
  text-align: center;
}

/* =========================================
   SOLUCIONES OPSRELIEVE — subir título
   ========================================= */

#soluciones .sectionTitle{
  margin-top: -70px;   /* mismo offset que El Problema / El Cambio / Standard */
  margin-bottom: 40px;
}

/* =========================================
   SOLUCIONES OPSRELIEVE — cards
   título arriba + texto al pie
   ========================================= */

#soluciones .card{
  display: flex;
  flex-direction: column;
}

#soluciones .card .inner{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* El wrapper (div) que contiene h3 y p ocupa todo el alto,
   y reparte: h3 arriba, p abajo */
#soluciones .card .inner > div{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* título arriba */
#soluciones .card .inner > div > h3{
  margin-bottom: 6px;
  text-align: center;
}

/* texto abajo */
#soluciones .card .inner > div > p{
  margin-top: auto;   /* clave */
  text-align: center;
}

/* =========================================
   SOLUCIONES — frase antes del CTA (h3 + más ancho)
   ========================================= */

#soluciones .solutionsQuote{
  margin-left: auto;
  margin-right: auto;
}

/* más ancho, para que no quede en “cajita” */
#soluciones .solutionsQuoteText{
  max-width: 52ch;     /* súbelo a 60ch si la quieres aún más ancha */
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 750;
  letter-spacing: -.01em;
  font-size: clamp(20px, 2.1vw, 30px); /* h3 “entre medias” */
  line-height: 1.18;
  text-align: center;
}

/* =========================================
   FILTRO — título pegado a la cabecera
   ========================================= */

#para-quien .sectionTitle{
  margin-top: -70px;   /* mismo offset que El Problema / El Cambio / Standard */
  margin-bottom: 40px;
}


/* =========================================
   CIERRE — texto y CTA al pie
   ========================================= */

#cierre .sub,
#cierre .centerActions{
  margin-top: auto; /* 👈 empuja hacia el fondo */
}

/* Frase emocional final más potente */
#cierre .sub{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  max-width: 65ch;
}

/* =========================================
   CTA FORM — subir título + texto a cabecera
   ========================================= */
#cta .sectionTitle{
  margin-top: -70px;   /* ajusta fino si quieres: -50/-80 */
  margin-bottom: 30px;
}

/* =========================================
   CTA FORM — Select (Rol) alineado al diseño
   ========================================= */

/* Select cerrado */
#cta select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: rgba(0,0,0,.28);
  color: rgba(255,255,255,.88);

  /* flecha custom (dorado suave) */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(201,168,106,.90) 50%),
    linear-gradient(135deg, rgba(201,168,106,.90) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;

  padding-right: 42px; /* espacio para flecha */
}

/* Quitar azul feo del focus y mantener tu dorado */
#cta select:focus{
  border-color: rgba(201,168,106,.40);
  box-shadow: var(--focus);
  outline: none;
}

/* Opciones (cuando el navegador lo permite) */
#cta select option{
  background: #0b0b0d;              /* oscuro */
  color: rgba(255,255,255,.92);
}

/* En algunos navegadores, esto mejora el highlight */
#cta select option:checked,
#cta select option:hover{
  background: rgba(201,168,106,.18);
  color: rgba(255,255,255,.96);
}