/* ==========================================================
   09-responsive.css
   FUNCIÓN: Adapta la página a tablet y celular.
   Debe cargarse al FINAL para que sobrescriba los demás estilos.
   Puntos de corte: 880px (tablet) · 600px (celular) · 380px (celular pequeño)
   ========================================================== */

/* ---------- BLOQUE: Tablet (hasta 880px) ----------
   Las columnas se reducen y el menú pasa a ser desplegable. */
@media(max-width:880px){
  section{padding:60px 0;}
  .hero{padding:56px 0 48px;}
  .hero .wrap{grid-template-columns:1fr;gap:40px;}
  .hero p{max-width:60ch;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .tips-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr;}
  .sedes-grid{grid-template-columns:1fr;}
  .impact-grid{grid-template-columns:1fr;}
  .contact .wrap{grid-template-columns:1fr;gap:36px;}
  .contact p{max-width:60ch;}
  .section-head{margin-bottom:36px;}

  /* Menú desplegable */
  nav{padding:8px 20px;}
  .nav-links{display:none;}                            /* se oculta el menú normal */
  .menu-toggle{display:grid;place-items:center;}       /* aparece el botón ☰ */
  .nav-links.open{                                     /* menú abierto (clase que pone js/menu.js) */
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;
    background:var(--panel);padding:8px 20px 20px;
    box-shadow:0 12px 24px rgba(0,0,0,0.12);
    border-top:1px solid rgba(27,27,34,0.08);
  }
  .nav-links.open a{                                   /* filas grandes, fáciles de tocar */
    opacity:1;font-size:1.05rem;padding:15px 4px;
    border-bottom:1px solid rgba(27,27,34,0.07);
  }
  .nav-links.open .menu-cta{
    display:flex;justify-content:center;margin-top:14px;border:0;
    background:var(--verde);color:var(--azul-osc);font-weight:700;
    border-radius:var(--r-pill);font-family:'Outfit',sans-serif;
  }
}

/* ---------- BLOQUE: Celular (hasta 600px) ---------- */
@media(max-width:600px){
  .wrap{padding:0 20px;}
  @supports(padding:max(0px)){
    .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
  }
  section{padding:48px 0;}
  .nav-agendar{display:none;}                          /* el botón ya está en el menú y en el hero */
  .logo img{height:44px;}

  /* Hero: textos primero, anillo después; botones a todo el ancho */
  .hero{padding:40px 0 44px;border-radius:0 0 var(--r-md) var(--r-md);}
  .hero h1{font-size:clamp(2rem,9vw,2.4rem);}
  .hero p{font-size:1rem;margin-bottom:24px;}
  .slogan-badge{font-size:1.35rem;}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-actions .btn{width:100%;}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;}
  .hero-stat b{font-size:1.2rem;}
  .hero-stat span{font-size:0.74rem;display:block;line-height:1.35;}
  .hero-visual{padding:16px 8px 0;}
  .loop-stage{max-width:300px;}
  .blob-1{width:280px;height:280px;top:-100px;right:-110px;}
  .blob-2{width:200px;height:200px;}

  /* Rejillas a una columna */
  .service-grid,.steps,.tips-grid{grid-template-columns:1fr;gap:12px;}
  .form-row{grid-template-columns:1fr;}
  .service-card{padding:22px 20px;}
  .sede-card{padding:24px 20px;border-radius:var(--r-md);}
  .impact-card{padding:26px 22px;}
  .impact-card b{font-size:1.6rem;overflow-wrap:anywhere;}
  .circulo-visual{max-width:280px;}
  .circulo-center span{font-size:1.5rem;}

  /* Bloques oscuros redondeados con menos margen lateral */
  .contact, .process{margin:0 10px;border-radius:var(--r-md);}
  .contact .wrap, .process .wrap{padding:0 16px;}
  .step{padding:20px 18px;}

  /* Formulario: botón a todo el ancho */
  .contact form .btn{width:100%;}

  /* Footer en una sola columna */
  footer .wrap{flex-direction:column;gap:20px;}
  footer .foot-bottom{padding:18px 20px 0;flex-direction:column;}
  footer{padding-bottom:max(24px,env(safe-area-inset-bottom));}
}

/* ---------- BLOQUE: Celular pequeño (hasta 380px) ---------- */
@media(max-width:380px){
  .wrap{padding:0 16px;}
  .hero-stats{grid-template-columns:1fr 1fr;}
  .loop-stage{max-width:260px;}
  .loop-node{width:76px;}
  .loop-node .dot{width:38px;height:38px;font-size:0.62rem;}
  .loop-center img{width:72px;height:72px;}
  .circulo-visual{max-width:240px;}
}

/* ---------- BLOQUE: Celular en horizontal (poca altura) ---------- */
@media(max-height:480px) and (orientation:landscape){
  section{padding:40px 0;}
  .nav-links.open{max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px);}
}