/* ============================================================
   Coworking Network · v1.2 — estilos complementarios
   Se carga DESPUÉS de style.css. No reemplaza nada; solo
   ajusta y agrega. Revertir = quitar el <link> de este archivo.
   ============================================================ */

/* Logo oficial un poco más alto en la cabecera */
.brand .logo{height:50px}
@media(max-width:640px){ .brand .logo{height:40px} }

/* Audiencias: 4 tarjetas (coworkers, empresas, coworkings, aliados) */
.feature-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){ .feature-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .feature-grid{grid-template-columns:1fr} }

/* ---- Quiénes Somos: fundadores ---- */
.fundadores-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px}
@media(max-width:980px){ .fundadores-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .fundadores-grid{grid-template-columns:1fr} }
.fundador{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.fundador .foto{width:110px;height:110px;border-radius:50%;object-fit:cover;margin:0 auto 14px;background:#f1eef7;border:3px solid #fff;box-shadow:0 4px 16px rgba(43,46,107,.12)}
.fundador .foto-ph{width:110px;height:110px;border-radius:50%;margin:0 auto 14px;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:2rem}
.fundador h4{font-size:1.05rem;margin-bottom:2px}
.fundador .cargo{color:var(--plum);font-weight:600;font-size:.85rem;font-family:var(--font-display);display:block;margin-bottom:8px}
.fundador p{color:var(--muted);font-size:.9rem}

/* Cabecera gráfica de secciones internas con logo */
.about-logo{display:flex;justify-content:center;margin-bottom:20px}
.about-logo img{height:72px;width:auto}

/* ---- Aliados: beneficios y logos ---- */
.beneficios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
@media(max-width:860px){ .beneficios-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .beneficios-grid{grid-template-columns:1fr} }
.beneficio{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;gap:12px;align-items:flex-start}
.beneficio .chk{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:14px;margin-top:2px}
.beneficio h5{font-size:.98rem;margin:0 0 3px;font-family:var(--font-display)}
.beneficio p{margin:0;color:var(--muted);font-size:.9rem}

.logos-aliados{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;align-items:center;margin-top:12px}
.logos-aliados .logo-box{background:#fff;border:1px solid var(--line);border-radius:12px;height:84px;display:grid;place-items:center;padding:12px}
.logos-aliados .logo-box img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.2s}
.logos-aliados .logo-box:hover img{filter:none;opacity:1}

/* Botón WhatsApp inline */
.btn-wa{background:#25d366;color:#fff !important;border:none}
.btn-wa:hover{background:#1ebe5b}

/* Banda de CTA para coworkers/usuario final en Aliados */
.cta-coworker{background:var(--grad);color:#fff;border-radius:var(--radius);padding:30px;text-align:center;margin-top:30px}
.cta-coworker h3{color:#fff;margin:0 0 8px}
.cta-coworker p{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 16px}

/* ============================================================
   v1.2 — Correcciones responsive (celular)
   ============================================================ */
@media(max-width:640px){
  /* Mostrar los botones de acción dentro del menú móvil desplegado */
  .nav-links.open{gap:8px}
  .nav-cta{gap:8px}
  /* El botón "Portal afiliados" (btn-ghost) vuelve a verse en móvil junto al menú */
  .nav-cta .btn-ghost{display:inline-flex}
  .nav-cta{flex-wrap:wrap;justify-content:flex-end}

  /* Hero: textos y botones cómodos en pantalla pequeña */
  .hero h1{font-size:1.9rem;line-height:1.15}
  .hero .lead{font-size:1rem}
  .hero-actions{flex-wrap:wrap;gap:10px}
  .hero-actions .btn{flex:1 1 auto;text-align:center;justify-content:center}

  /* Audiencias y fundadores: una columna cómoda */
  .feature-grid{grid-template-columns:1fr}
  .fundadores-grid{grid-template-columns:1fr}
  .beneficios-grid{grid-template-columns:1fr}

  /* Logos de aliados: rejilla más compacta */
  .logos-aliados{grid-template-columns:repeat(2,1fr)}

  /* Botones WhatsApp y acciones a ancho completo */
  .ally .btn, .cta-coworker .btn, .btn-wa{width:100%;justify-content:center;text-align:center}
  .ally div[style*="flex"]{flex-direction:column}

  /* Logo del hero de secciones internas, más pequeño */
  .about-logo img{height:56px}

  /* Banda coworker con padding cómodo */
  .cta-coworker{padding:24px 18px}
}

/* Tablet: ajustes intermedios */
@media(min-width:641px) and (max-width:980px){
  .fundadores-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .beneficios-grid{grid-template-columns:repeat(2,1fr)}
}

/* Evitar desbordes horizontales en todo el sitio */
img{max-width:100%;height:auto}
.container{overflow-x:clip}

/* Enlaces de acción dentro del menú móvil (ocultos en escritorio) */
.nav-mobile-cta{display:none}
@media(max-width:640px){
  .nav-links.open .nav-mobile-cta{display:block;margin-top:4px;font-weight:600;color:var(--plum)}
  .nav-links.open .nav-mobile-cta.destacado{background:var(--grad);color:#fff;border-radius:10px;text-align:center}
  /* En móvil ya no necesitamos los botones sueltos del nav-cta: dejamos solo el toggle */
  .nav-cta .btn{display:none}
}