/* ==========================================================
   H2 - Responsive final
   Desktop (>1100px) conserva sin cambios la versión H1 r7.
   ========================================================== */

@media (max-width:1100px){
  .container{width:min(100% - 36px,980px)}
  .header-shell,.hero-frame{width:min(100% - 36px,1040px)}
  .header-inner{height:78px}
  .brand img{width:300px}
  .header-cta{padding:11px 18px;font-size:14px}
  .section{padding:34px 0}
  .section-heading h1,.system-copy h2{font-size:38px}
  .section-heading p{font-size:19px}
  .benefit-card{padding-inline:18px}
  .benefit-card h2{font-size:18px}
  .benefit-card p{font-size:14px}
  .system-grid{grid-template-columns:minmax(0,1fr) minmax(360px,500px);gap:30px}
  .system-image img{max-width:500px}
  .quote-panel{padding:30px 32px;gap:32px}
  .quote-form-column{padding-right:30px}
  .footer-brand-big{font-size:18px}
}

@media (max-width:860px){
  .container{width:min(100% - 28px,720px)}
  .header-shell,.hero-frame{width:min(100% - 28px,720px)}

  .header-inner{height:76px;gap:14px}
  .brand img{width:250px}
  .header-cta{font-size:13px;padding:10px 14px;gap:8px}
  .header-cta .wa-dot{width:25px;height:25px}

  /* La pieza de hero sigue completa en tablet para no perder el diseño aprobado. */
  .hero{padding:8px 0 22px}
  .hero-frame{overflow:hidden;border-radius:7px}
  .hero-frame>img{width:100%;min-width:0;max-width:none;height:auto;object-fit:contain}
  .hero-hotspot{left:3.1%;bottom:15.2%;width:26.2%;height:13.8%}

  .section-heading.centered{margin-bottom:25px}
  .section-heading h1{font-size:35px}
  .section-heading p{font-size:18px;margin-top:9px}

  .benefit-grid{grid-template-columns:repeat(2,1fr);gap:4px 0}
  .benefit-card{min-height:215px;padding:12px 24px 12px}
  .benefit-card:nth-child(2)::after{display:none}
  .benefit-card:nth-child(1),.benefit-card:nth-child(2){border-bottom:1px solid #dce9f7}
  .icon-circle{width:78px;height:78px}
  .icon-circle svg{width:44px;height:44px}

  .system-grid{grid-template-columns:1fr;gap:22px}
  .system-copy{padding:0 8px;text-align:left}
  .system-copy::before{left:-6px}
  .system-copy h2{font-size:37px}
  .system-intro{font-size:17px}
  .check-list{gap:11px}
  .check-list li{font-size:17px}
  .system-image{justify-content:center;padding:6px 0 10px}
  .system-image::before{left:28px;right:28px;width:auto;top:25px;height:72%}
  .system-image img{max-width:590px;width:min(100%,590px)}

  .quote-section{padding-top:20px}
  .quote-panel{grid-template-columns:1fr;gap:24px;padding:30px 34px}
  .quote-form-column{border-right:0;border-bottom:2px solid #8fb2dd;padding:0 0 26px}
  .quote-form-column h2{font-size:23px}
  .quote-message{padding-top:0;grid-template-columns:52px 1fr;gap:18px}
  .quote-message h3{margin-top:14px}
  .script-note{margin-top:25px}

  .footer-inner{min-height:104px}
  .footer-brand{gap:12px}
  .footer-mark{width:50px;height:50px}
  .footer-brand-copy{gap:12px}
  .footer-brand-small{font-size:12px}
  .footer-brand-big{font-size:17px}
  .footer-brand-separator{height:46px}
}

@media (max-width:640px){
  .container{width:calc(100% - 24px)}
  .header-shell,.hero-frame{width:calc(100% - 20px)}

  .header-inner{height:68px}
  .brand img{width:min(230px,68vw)}
  .header-cta{width:44px;height:44px;padding:0;justify-content:center;flex:0 0 auto}
  .header-cta{font-size:0}
  .header-cta .wa-dot{width:28px;height:28px}

  /* En móvil el hero se convierte en una ventana vertical del arte original.
     Se conserva el texto/CTA del lado izquierdo y parte de la escena familiar. */
  .hero{padding:6px 0 18px}
  .hero-frame{height:330px;border-radius:8px;box-shadow:0 12px 30px rgba(6,58,119,.10)}
  .hero-frame>img{width:auto;height:100%;max-width:none;min-width:0;object-fit:cover;position:absolute;left:0;top:0}
  .hero-frame::before{display:none}
  .hero-frame::after{height:26%}
  .hero-hotspot{left:2.8%;bottom:15%;width:45%;height:13.5%;z-index:3}

  .section{padding:28px 0}
  .section-heading.centered{margin-bottom:20px}
  .section-heading h1{font-size:31px;letter-spacing:-.7px}
  .section-heading p{font-size:16px;line-height:1.25}

  .benefit-grid{grid-template-columns:1fr}
  .benefit-card{min-height:auto;padding:14px 16px 22px;border-bottom:1px solid #e0ebf7}
  .benefit-card:last-child{border-bottom:0}
  .benefit-card::after{display:none!important}
  .benefit-card h2{font-size:18px}
  .benefit-card p{font-size:14px;max-width:330px;margin-inline:auto}
  .icon-circle{width:74px;height:74px;margin-bottom:10px}
  .icon-circle svg{width:41px;height:41px}

  .system-section{padding-top:6px}
  .system-copy{padding:0 2px}
  .system-copy h2{font-size:33px;line-height:1.1;margin-bottom:14px}
  .system-copy h2 br{display:none}
  .system-intro{font-size:16px;margin-bottom:20px}
  .check-list{gap:10px}
  .check-list li{font-size:16px;padding-left:34px}
  .check-list li::before{width:25px;height:25px;font-size:16px}
  .system-image{padding-top:8px}
  .system-image::before{left:15px;right:15px;top:25px;height:72%;border-radius:18px}
  .system-image img{border-radius:8px}

  .quote-panel{padding:25px 20px;border-radius:9px;gap:22px}
  .quote-form-column{padding-bottom:24px}
  .quote-form-column h2{font-size:21px;line-height:1.15}
  .quote-form-column>p{font-size:12px;line-height:1.3;margin-bottom:17px}
  .quote-form input,.quote-form select{padding:13px 11px;font-size:16px}
  .form-submit{width:100%;padding:13px 16px;font-size:15px}
  .form-submit .wa-small{width:29px;height:29px}
  .privacy-copy{font-size:10px!important;line-height:1.3;margin-top:5px}

  .quote-message{grid-template-columns:46px 1fr;gap:14px}
  .message-icon{width:46px;height:46px}
  .message-icon svg{width:27px;height:27px}
  .quote-message h3{font-size:20px;margin:11px 0 8px}
  .quote-message p{font-size:14px}
  .script-note{font-size:29px!important;margin:24px 0 2px 6px;transform:rotate(-5deg)}

  .footer-inner{flex-direction:column;justify-content:center;gap:16px;padding:22px 0;min-height:0}
  .footer-brand{gap:9px;justify-content:center}
  .footer-mark{width:46px;height:46px}
  .footer-brand-copy{gap:9px}
  .footer-brand-small{font-size:11px}
  .footer-brand-big{font-size:15px}
  .footer-brand-separator{height:40px}
  .footer-links{gap:14px;font-size:14px}
}

@media (max-width:420px){
  .header-shell,.hero-frame{width:calc(100% - 16px)}
  .brand img{width:min(205px,66vw)}
  .hero-frame{height:300px}
  .hero-frame>img{left:-3%}
  .hero-hotspot{left:2.5%;width:48%}
  .section-heading h1{font-size:28px}
  .system-copy h2{font-size:30px}
  .quote-panel{padding:22px 16px}
  .footer-brand-big{font-size:14px}
}