/* ==========================================================
   Assecura · Complemento de apariencia (assecura-ajustes.css)
   Solo modifica presentación: jerarquía, márgenes, espaciado
   y distribución. No altera textos, imágenes, enlaces ni
   formularios. Para revertirlo, quitar la línea <link>.
   Cargar DESPUÉS de los estilos existentes.
   ========================================================== */

:root{
  --aj-tint:#faf7ee;          /* fondo alterno suave */
  --aj-sec-y:clamp(48px,7vw,88px);
  --aj-fab-gap:96px;          /* espacio reservado para botones flotantes */
}

/* ---------- 1. Jerarquía de títulos (escala pareja) ---------- */
h1{line-height:1.08;margin-bottom:.45em;text-wrap:balance}
section.block h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.5rem);line-height:1.15;text-wrap:balance}
section.block h3{font-size:clamp(1.15rem,1.05rem + .35vw,1.35rem);line-height:1.25;margin-bottom:.4em}
.sec-head{margin-bottom:clamp(24px,3vw,40px)}
.sec-head p:not(.eyebrow){max-width:62ch}
.eyebrow{letter-spacing:.12em;line-height:1.5}

/* ---------- 2. Ritmo de secciones + fondo alterno ---------- */
section.block{padding-top:var(--aj-sec-y);padding-bottom:var(--aj-sec-y)}
#porque,#dudas,#acceso,#equipo,#tramites,#aprende{background:var(--aj-tint)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--aj-tint:rgba(255,255,255,.03)}
}

/* ---------- 3. Tamaño mínimo de letra ---------- */
.promo-tag,.promo-ley,.nota-ancla,p.micro,.ramo .code,.ticket-head .eyebrow{font-size:max(13px,.8125rem)}
.eyebrow{font-size:max(12.5px,.78rem)}
.ticket .ticket-head{gap:12px}

/* ---------- 4. Tarjetas de seguros ---------- */
.ramos{gap:clamp(14px,2vw,24px)}
.ramo{display:flex;flex-direction:column}
.ramo > .btn:last-child,.ramo > a.btn{margin-top:auto;align-self:flex-start}

/* ---------- 5. Botones flotantes: no tapan contenido ---------- */
body{padding-bottom:var(--aj-fab-gap)}
footer#contacto{padding-bottom:calc(var(--aj-fab-gap) + 16px)}

/* ---------- 6. Burbuja "¡Chatea con Bea!" ----------
   En pantallas de hasta 1500 px tapaba contenido: queda solo la foto */
@media (max-width:1500px){
  #asis .asis-globo{display:none !important}
}

/* ================= TABLET (≤ 1024 px) ================= */
@media (max-width:1024px){
  /* La barra lateral de redes tapa las tarjetas: se oculta
     (los mismos enlaces están en el pie de página) */
  nav#canales.canales{display:none !important}
  /* La burbuja "¡Chatea con Bea!" se reduce a solo la foto */
  #asis .asis-globo{display:none !important}
  #asis{bottom:84px !important;right:14px !important}
  .asis-av{width:52px !important;height:52px !important}
}

/* ================= CELULAR (≤ 640 px) ================= */
@media (max-width:640px){
  :root{--aj-fab-gap:84px}

  /* Encabezado con margen correcto a ambos lados */
  header.top .wrap{padding-left:14px !important;padding-right:14px !important;gap:8px}
  .menu-btn{margin-right:0;flex-shrink:0}
  header.top .wrap{gap:6px !important}
  header.top .brand{flex-shrink:1;min-width:0}
  header.top .brand svg.logo{width:130px;height:auto;max-width:100%}
  header.top .access{gap:6px}
  header.top .access .btn,header.top .menu-btn{padding-left:10px;padding-right:10px}

  /* Que el encabezado fijo no tape el inicio */
  .hero{padding-top:28px}
  html{scroll-padding-top:80px}

  /* Línea RIF · SUDEASEG: menos separación, corte ordenado */
  .hero .eyebrow{letter-spacing:.06em;font-size:12.5px}

  /* Botones cómodos para el dedo (mín. 44 px) */
  .btn,.ramo .btn,.hero-cta a{min-height:44px;display:inline-flex;align-items:center}
  footer#contacto ul li{margin:0}
  footer#contacto ul a{display:inline-block;padding:8px 0}

  /* Flotantes más discretos */
  #emergWrap .emerg-fab,#waBtn.wa{transform:scale(.88);transform-origin:bottom center}
  #asis{bottom:76px !important;right:10px !important}
  .asis-av{width:46px !important;height:46px !important}

  /* Tabla "Por tu cuenta / Con Assecura" en tarjetas apiladas */
  .contraste .ct-row.ct-head{display:none !important}
  .contraste .ct-row{display:block !important;padding:16px}
  .contraste .ct-row > span{display:block;padding:0}
  .contraste .ct-row > span:first-child{font-weight:700;margin-bottom:8px}
  .contraste .ct-row > span:nth-child(2){opacity:.8;margin-bottom:10px}
  .contraste .ct-row > span:nth-child(2)::before{content:"Por tu cuenta: ";font-weight:600}
  .contraste .ct-row > span:nth-child(3){border-radius:10px;padding:10px 12px}
  .contraste .ct-row > span:nth-child(3)::before{content:"Con Assecura: ";font-weight:700}
}

/* Pantallas muy pequeñas (≤ 360 px) */
@media (max-width:360px){
  header.top .brand svg.logo{width:108px}
  h1{font-size:2.1rem}
}