/* SARDI MOBILE FIXES — surgical fixes para móvil/tablet, evitar superposiciones */

/* === SARDI INDEX panel: scrollable internamente, no arrastra el body === */
.sardi-index-panel {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
/* Body scroll lock cuando panel está abierto (set vía JS) */
body.sardi-panel-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  top: var(--sardi-scroll-y, 0) !important;
}


/* === FLOATING CHROME — armonía visual: mismas dimensiones, alignment, elevation === */
@media (max-width: 768px) {
  /* TODOS los círculos floating = 52x52 (consistencia visual perfecta) */
  .wa-float,
  .andre-float,
  .sardi-index-trigger {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,173,95,0.3) !important;
  }
  /* COLUMNA DERECHA (bottom→top): WhatsApp / Andreína */
  .wa-float {
    bottom: 16px !important;
    right: 14px !important;
  }
  .andre-float {
    bottom: 80px !important;  /* 16 + 52 + 12 gap */
    right: 14px !important;
  }
  /* COLUMNA IZQUIERDA (bottom→top): SARDI Index / Cotizar pill */
  .sardi-index-trigger {
    bottom: 16px !important;
    left: 14px !important;
  }
  /* PILL FLOATING (Cotizar) — armonía con MENU pill: misma altura 36px */
  .float-cta {
    bottom: 24px !important;
    right: auto !important;
    left: 80px !important;  /* 14 + 52 + 14 gap, alineado con sardi-index */
    top: auto !important;
    transform: none !important;
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    border-radius: 100px !important;
    border-width: 1px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,173,95,0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .float-cta:hover { transform: scale(1.04) !important; }
  .float-cta svg { width: 13px !important; height: 13px !important; }

  /* News popup — armonía con MENU pill: misma altura 36px, misma sombra, misma forma */
  .sardi-news-pop {
    left: 50% !important;
    right: auto !important;
    top: 60px !important;  /* debajo del HUD MENU pill (32px) */
    bottom: auto !important;
    transform: translateX(-50%) translateY(-130%) !important;
    max-width: max-content !important;
    min-width: 0 !important;
    width: auto !important;
    height: 36px !important;
    padding: 0 36px 0 14px !important;
    border-radius: 100px !important;
    border-width: 1px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,173,95,0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .sardi-news-pop.visible {
    transform: translateX(-50%) translateY(0) !important;
  }
  .sardi-news-pop .sardi-news-title,
  .sardi-news-pop .sardi-news-cta { display: none !important; }
  .sardi-news-pop .sardi-news-eyebrow {
    margin-bottom: 0 !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
  }
  .sardi-news-pop .sardi-news-eyebrow::before {
    flex-shrink: 0 !important;
  }
  .sardi-news-pop .sardi-news-close {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 6px !important;
    width: 22px !important;
    height: 22px !important;
  }

  /* HUD pill MENÚ — armonía con float-cta y news-pop (misma altura 36px) */
  .hud-trigger {
    width: 116px !important;
    height: 36px !important;
    z-index: 9999 !important;
    padding: 4px 10px !important;
    border-radius: 0 0 100px 100px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,173,95,0.4) !important;
  }

  /* Rotation labels — pequeñas en mobile, posicionadas en center-top
     para no chocar con floating chrome de bottom. Reaparecen en cualquier rotación */
  .rot-label {
    position: fixed !important;
    top: 100px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-10px) !important;
    width: calc(100vw - 32px) !important;
    max-width: 340px !important;
    padding: 10px 14px !important;
    text-align: center !important;
  }
  .rot-label.visible { transform: translateX(-50%) translateY(0) !important; }
  .rot-label h3 { font-size: 15px !important; line-height: 1.2 !important; margin-bottom: 4px !important; }
  .rot-label p  { font-size: 11px !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
  .rot-label .pill { font-size: 8px !important; margin-bottom: 6px !important; }
  .rot-label a.cta { font-size: 9px !important; padding: 6px 12px !important; }
  /* Cualquier variante (lbl-front/right/back/left) usa misma posición center-top */
  .rot-label.lbl-front, .rot-label.lbl-right,
  .rot-label.lbl-back,  .rot-label.lbl-left {
    left: 50% !important; right: auto !important;
    top: 100px !important; bottom: auto !important;
    text-align: center !important;
    transform: translateX(-50%) translateY(-10px) !important;
  }
  .rot-label.lbl-front.visible, .rot-label.lbl-right.visible,
  .rot-label.lbl-back.visible,  .rot-label.lbl-left.visible {
    transform: translateX(-50%) translateY(0) !important;
  }
  .rot-label.lbl-back .pill, .rot-label.lbl-left .pill { margin: 0 auto 6px !important; }

  /* HUD fallback — más compacto pero asegurando que despliega */
  .hud-bar.hud-fallback {
    padding: 12px 14px !important;
    gap: 10px !important;
    z-index: 9000 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  .hud-bar.hud-fallback .hud-fallback-links {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
  }
  .hud-bar.hud-fallback .hud-fallback-links a {
    padding: 4px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    white-space: nowrap !important;
  }
  .hud-bar.hud-fallback .back-guardian { display: none !important; }
  .hud-bar.hud-fallback .brand-link { font-size: 10px !important; letter-spacing: 0.3em !important; }

  /* CALL satellite (top-right home) — más pequeño */
  .call-satellite { top: 60px !important; right: 14px !important; }
  .call-satellite-inner { width: 40px !important; height: 40px !important; }
  .call-satellite-inner svg { width: 18px !important; height: 18px !important; }
  .call-label { display: none !important; }

  /* Reactor pill — esconder en mobile (toma mucho espacio) */
  .reactor { font-size: 9px !important; padding: 5px 9px !important; }

  /* Brand top-left más pequeño */
  .brand { top: 16px !important; left: 14px !important; font-size: 11px !important; letter-spacing: 0.35em !important; }

  /* Quote modal contenido — full screen height para no quedar cortado */
  .quote-modal-box,
  .call-form,
  .call-form-overlay > div {
    margin: 12px !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }

  /* Footer — evitar columnas apretadas */
  .sardi-footer { padding: 40px 18px 20px !important; }
  .sardi-footer .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .sardi-footer .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; text-align: left !important; }
}

/* === HIDE CHROME que satura mobile === */
@media (max-width: 768px) {
  /* AUTO-ROTATE / POWER / RESET ctrls — saturaban con WA/Andreína */
  .ctrls { display: none !important; }
  /* DRAG para rotar hint — se sobrepone con todo */
  .hint { display: none !important; }
  /* Volver al inicio — accesible vía HUD MENU */
  .nav-back { display: none !important; }
  /* Scroll hint bottom — sobra en mobile */
  .scroll-hint-bottom { display: none !important; }
  /* "Hola, soy Andreína 👋" tooltip fuera del chat — redundante (ya está adentro) */
  .andre-tooltip { display: none !important; }

  /* Andreína chat panel — CENTRADO en pantalla, no esquina arriba */
  .andre-panel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 380px !important;
    height: 70vh !important;
    max-height: 70vh !important;
  }
}

/* === SUBPÁGINAS RESPONSIVE (auto/hogar/salud/vida/dental/accidentes/empresa/individual/etc) === */
@media (max-width: 768px) {
  /* Hero sections de subpáginas — padding generoso pero no excesivo */
  .auto-hero, .page-hero, section.hero {
    padding: 80px 18px 24px !important;
  }
  .auto-hero h1, .page-hero h1, section.hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }
  .auto-hero p.lead, .page-hero p, section.hero p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .auto-hero .eyebrow, .page-hero .eyebrow {
    font-size: 9px !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 14px !important;
  }

  /* Grid de productos (empresa.html / individual.html) — 1 columna */
  .products-grid, .grid-12, .grid-2, .grid-3, .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 18px 40px !important;
  }
  .product-card {
    padding: 22px 18px !important;
    min-height: auto !important;
    gap: 14px !important;
  }
  .product-card .icon { width: 70px !important; height: 70px !important; }
  .product-card h3 { font-size: 20px !important; }
  .product-card p { font-size: 13px !important; }
  .product-card .cta { font-size: 10px !important; padding: 9px 14px !important; }

  /* Scene-wrap (auto/hogar/salud) — stack vertical */
  .scene-wrap, .hero-split {
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 14px 30px !important;
    gap: 18px !important;
  }
  .info-panel, .hero-form {
    padding: 22px 18px !important;
  }

  /* Calculator form (salud.html) — fields full width */
  .calc-form .field, .field {
    margin-bottom: 12px !important;
  }
  .calc-form input, .calc-form select, .field input, .field select {
    font-size: 15px !important; /* min 16px ideal para iOS no zoom */
    padding: 11px 14px !important;
  }

  /* Panels (salud.html grid-12) */
  .panel { padding: 22px 18px !important; }
  .panel h3 { font-size: 18px !important; }
  .panel ul li { font-size: 12.5px !important; }

  /* Memoria — 3 col grid → stack vertical */
  .pj-stage .stage-inner,
  .stage-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    min-height: auto !important;
  }
  .pj-guardian, .guardian-col {
    height: 250px !important;
    max-height: 250px !important;
  }
  .pj-screen-wrap, .screen-col {
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }
  .pj-screen, .screen {
    max-width: 100% !important;
  }
  .pj-screen-title, .screen-title {
    font-size: 14px !important;
  }
  .queue-col {
    height: auto !important;
    max-height: 280px !important;
  }
  .queue-card-img { flex: 0 0 64px !important; width: 64px !important; height: 38px !important; }
  .queue-card-title { font-size: 11px !important; }

  /* Footer reused */
  .sardi-footer .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .sardi-footer { padding: 36px 18px 22px !important; }
  .sardi-footer h4 { font-size: 11px !important; }
  .sardi-footer .footer-col a { font-size: 13px !important; padding: 6px 0 !important; }
  .sardi-footer .footer-bottom { font-size: 11px !important; }

  /* Texto de páginas legales (privacidad/terminos/tcpa/hipaa/cookies/accesibilidad) */
  .legal-content, main.legal, article {
    padding: 80px 18px 40px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  main h1 { font-size: 1.8rem !important; }
  main h2 { font-size: 1.3rem !important; margin-top: 24px !important; }
  main h3 { font-size: 1.1rem !important; margin-top: 18px !important; }
  main p { font-size: 14px !important; line-height: 1.6 !important; }
  main ul, main ol { padding-left: 20px !important; }

  /* Tablas (cookies, hipaa) — scroll horizontal en lugar de aplastar */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Form modal de subpáginas — full screen friendly */
  .call-form-overlay {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 4vh 8px !important;
  }
  .call-form, .call-form-modal {
    margin: 0 auto !important;
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    padding: 22px 18px !important;
  }

  /* Pre-footer video controls */
  .pre-footer-video .pf-music {
    bottom: 10px !important;
    right: 10px !important;
    padding: 6px 10px !important;
    font-size: 9px !important;
  }

  /* Float CTA Cotizar Aquí en subpáginas — más chico para no chocar */
  .float-cta {
    padding: 10px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
}

/* === EXTRA TIGHT en pantallas <400px === */
@media (max-width: 400px) {
  .float-cta { left: 70px !important; padding: 10px 14px !important; font-size: 10px !important; }
  .sardi-index-trigger { width: 50px !important; height: 50px !important; left: 12px !important; bottom: 70px !important; }
  .wa-float { width: 44px !important; height: 44px !important; }
  .andre-float { width: 42px !important; height: 42px !important; bottom: 72px !important; }
  .sardi-news-pop { top: 62px !important; padding: 0 32px 0 12px !important; }
  .sardi-news-pop .sardi-news-eyebrow { font-size: 8.5px !important; letter-spacing: 0.14em !important; gap: 5px !important; }
  .sardi-news-pop .sardi-news-title { font-size: 10.5px !important; }
}

/* === COTIZAR.HOME — selector dashboard (#catIndividual / #catComercial) === */
@media (max-width: 768px) {
  /* Hero más compacto */
  .hero { padding: 90px 16px 20px !important; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  .hero .lead { font-size: 14px !important; line-height: 1.5 !important; }
  /* Cat sections */
  .cat { margin: 18px auto 0 !important; padding: 0 14px !important; }
  .cat-title { font-size: 11px !important; letter-spacing: 0.24em !important; gap: 8px !important; padding-bottom: 8px !important; margin-bottom: 12px !important; }
  /* Cards 2-col en mobile */
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pol { padding: 14px 12px 12px !important; }
  .pol .pi { font-size: 26px !important; }
  .pol .pn { font-size: 14px !important; }
  .pol .pd { font-size: 11px !important; line-height: 1.35 !important; }
  .pol input { width: 18px !important; height: 18px !important; top: 10px !important; right: 10px !important; }
  .pol.selected::before { width: 18px !important; height: 18px !important; top: 10px !important; right: 10px !important; font-size: 11px !important; }
  /* Sticky actions bar */
  .actions { padding: 18px 14px 16px !important; gap: 10px !important; flex-direction: column !important; margin-top: 18px !important; }
  .selected-count { font-size: 12px !important; }
  .start-btn { padding: 13px 26px !important; font-size: 12px !important; letter-spacing: 0.16em !important; width: 100% !important; max-width: 320px !important; justify-content: center !important; }
}
@media (max-width: 380px) {
  .cat-grid { grid-template-columns: 1fr !important; }
}

/* === HERO-SPLIT subpáginas — refinar mobile (vida/dental/accidentes/moto/wc/gl/bop/auto-com) === */
@media (max-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr !important;
    padding: 90px 16px 20px !important;
    gap: 20px !important;
  }
  .hero-photo {
    height: 260px !important;
    border-radius: 14px !important;
  }
  .hero-info h1 {
    font-size: clamp(1.6rem, 6.5vw, 2.4rem) !important;
    line-height: 1.12 !important;
  }
  .hero-info p { font-size: 14px !important; line-height: 1.5 !important; }
  .hero-info .eyebrow { font-size: 9px !important; letter-spacing: 0.32em !important; margin-bottom: 12px !important; }
  .hero-info ul li { font-size: 13px !important; padding: 5px 0 5px 24px !important; }
  .hero-info button, .hero-info .gold-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
  }
}
@media (max-width: 480px) {
  .hero-split { padding: 86px 12px 16px !important; gap: 16px !important; }
  .hero-photo { height: 220px !important; }
}

/* ==========================================================================
   TABLET (769px–1024px) — antes solo había mobile y desktop
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Floating chrome — un poco más chico que desktop, mas grande que mobile */
  .wa-float, .andre-float, .sardi-index-trigger {
    width: 56px !important; height: 56px !important;
  }
  .wa-float { bottom: 22px !important; right: 22px !important; }
  .andre-float { bottom: 90px !important; right: 22px !important; }
  .sardi-index-trigger { bottom: 22px !important; left: 22px !important; }

  /* Hero subpáginas — padding intermedio */
  .auto-hero, .page-hero, section.hero {
    padding: 100px 28px 32px !important;
  }
  .auto-hero h1, .page-hero h1, section.hero h1 {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }

  /* Hero-split de subpáginas: 2 cols pero menos espacio */
  .hero-split {
    grid-template-columns: 1fr 1fr !important;
    padding: 100px 28px 28px !important;
    gap: 28px !important;
  }
  .hero-photo { height: 380px !important; }
  .hero-info h1 { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; }

  /* Cotizar grid — 3 cols (entre 4 desktop y 2 mobile) */
  .cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .pol { padding: 16px !important; }

  /* Products grid empresa/individual — 2 cols (entre 3 desktop y 1 mobile) */
  .products-grid, .grid-12, .grid-3, .feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    padding: 28px 24px 40px !important;
  }
  .grid-2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Trust strip 4-col home */
  .trust-strip {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    padding: 0 12px !important;
  }

  /* Hero-row home: cards y guardian lado a lado pero más compactos */
  .hero-row {
    padding-right: 24px !important;
    gap: 24px !important;
  }
  .guardian-hero { width: 240px !important; }
  .guardian-hero img { max-width: 240px !important; max-height: 360px !important; }

  /* Footer 2-col en lugar de 4 */
  .sardi-footer .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Quote modal: ancho razonable para tablet */
  .quote-modal-box, .call-form, .call-form-modal {
    max-width: 600px !important;
    width: calc(100vw - 60px) !important;
    margin: 0 auto !important;
  }

  /* Andreina chat panel — más grande que mobile, anclado a la derecha */
  .andre-panel {
    bottom: 156px !important;
    right: 22px !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 360px !important;
    height: 520px !important;
    max-height: 70vh !important;
  }

  /* Top nav — wrapping con menos items visibles */
  .top-nav { padding: 14px 22px !important; }
  .top-nav-right { gap: 14px !important; font-size: 11px !important; }

  /* Hero eyebrow legible (ej: "SARDI GROUP · 17+ AÑOS PROTEGIENDO") */
  .hero-eyebrow {
    font-size: 13px !important; letter-spacing: 0.26em !important;
    margin-top: 32px !important; margin-bottom: 28px !important;
    line-height: 1.4 !important;
  }
}