/* ==========================================================================
   ECOLAVADO CHILE — Ampliación de estilos para el rediseño corporativo
   (Archivo aditivo: no reemplaza style.css, solo agrega componentes nuevos
   para las secciones de Home, Franquicias y Sostenibilidad. Reutiliza las
   variables y utilidades ya definidas en /assets/style.css)
   ========================================================================== */

/* ---- Ajuste de navegación: un ítem más (Franquicias) sin saturar ---- */
@media(min-width:1181px) and (max-width:1400px){
  nav.main-menu{gap:14px;}
  nav.main-menu a{font-size:12.8px;}
}

/* ---- Franja "dos públicos" reforzada (usa .audience ya existente) ---- */
.audience-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}

/* ---- Pilares (Propuesta de valor: 5 columnas responsivas) ---- */
.pillars-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;}
@media(max-width:1000px){.pillars-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.pillars-grid{grid-template-columns:repeat(2,1fr);}}
.pillar-card{background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);padding:28px 18px;text-align:center;transition:.2s;}
.pillar-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.pillar-card .pillar-icon{font-size:26px;margin-bottom:14px;display:block;}
.pillar-card h4{font-size:14.5px;letter-spacing:.2px;}

/* ---- Grid genérico de 4 columnas para procesos / infraestructura ---- */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:900px){.proc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.proc-grid{grid-template-columns:1fr;}}
.proc-card{background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);padding:26px 22px;}
.proc-card i{font-size:22px;color:var(--primary-dark);margin-bottom:12px;display:block;}
.proc-card h4{font-size:15.5px;margin-bottom:6px;}
.proc-card p{color:var(--gray-500);font-size:13.8px;}

/* ---- Nota de responsabilidad técnica / legal (disclaimers) ---- */
.disclaimer{font-size:13px;color:var(--gray-500);background:var(--gray-100);border-left:3px solid var(--primary);padding:12px 16px;border-radius:6px;margin-top:22px;}
.disclaimer strong{color:var(--gray-700);}

/* ---- App: flujo de pasos con conector vertical ---- */
.app-flow{max-width:420px;margin:0 auto;}
.app-flow-step{display:flex;align-items:center;gap:14px;padding:14px 0;}
.app-flow-step .n{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--dark);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px;}
.app-flow-step span.label{font-weight:600;color:var(--gray-700);font-size:14.5px;}
.app-flow-arrow{text-align:center;color:var(--gray-300);font-size:14px;}
.app-showcase{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:860px){.app-showcase{grid-template-columns:1fr;gap:32px;}}

/* ---- Franquicias: bloques del modelo (marca, tecnología, soporte, etc.) ---- */
.model-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:900px){.model-blocks{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.model-blocks{grid-template-columns:1fr;}}
.model-block{background:var(--dark);color:#fff;border-radius:var(--radius);padding:26px 20px;}
.model-block i{color:var(--accent);font-size:20px;margin-bottom:10px;display:block;}
.model-block h4{color:#fff;font-size:14.5px;}

/* ---- Qué incluye la franquicia: checklist ---- */
.includes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;}
@media(max-width:700px){.includes-grid{grid-template-columns:1fr;}}
.includes-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--gray-300);}
.includes-item i{color:var(--primary-dark);font-size:16px;margin-top:3px;}
.includes-item h4{font-size:14.5px;margin-bottom:3px;}
.includes-item p{color:var(--gray-500);font-size:13.5px;}

/* ---- Franquicias: banda hero propia (variante del .hero general) ---- */
.hero-franquicia{background:linear-gradient(135deg,#0b3b30 0%,var(--graphite) 60%,var(--dark) 100%);}

/* ---- Formulario de franquicia: reutiliza .form-group de style.css ---- */
.franchise-form{background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow);}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){.form-row-2{grid-template-columns:1fr;}}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13.5px;font-weight:700;color:var(--gray-700);margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1px solid var(--gray-300);border-radius:8px;font-size:14.5px;font-family:inherit;color:var(--gray-700);background:#fff;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);}
.form-success{background:#f0fdfa;color:#0f766e;border:1px solid #99f6e4;padding:14px 18px;border-radius:8px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;margin-bottom:22px;}

/* ---- Sucursales / expansión: tarjeta "próximamente" reutilizable ---- */
.city-request-band{background:var(--dark);color:#fff;border-radius:var(--radius);padding:44px 36px;text-align:center;}
.city-request-band h3{color:#fff;margin-bottom:10px;}
.city-request-band p{color:#c7d2da;margin-bottom:22px;}

/* ---- Sostenibilidad: lista de temas con icono ---- */
.sost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:900px){.sost-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.sost-grid{grid-template-columns:1fr;}}

/* Tercera tarjeta de audiencia (franquiciado) en /contacto/ */
.audience-contacto{grid-template-columns:repeat(3,1fr);}
@media(max-width:960px){.audience-contacto{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.audience-contacto{grid-template-columns:1fr;}}
.audience-contacto .a-franquicia{background:linear-gradient(135deg,var(--primary),var(--primary-dark));}