/* ============================================
   PALETA MANQ'A — cambiar colores AQUÍ (un solo lugar)
   ============================================ */
:root {
  --color-naranja:  #F55C30;
  --color-magenta:  #E9088C;
  --color-verde:    #68C833;
  --color-morado:   #8C5CA8;
  --color-azul:     #1F7CB7;
  --color-turquesa: #11AFAE;

  /* Roles de color (usados en la página) */
  --primario:   var(--color-turquesa);
  --secundario: var(--color-naranja);
  --acento:     var(--color-magenta);
  --texto:      #2b2b2b;
  --texto-claro:#6b6b6b;
  --fondo:      #ffffff;
  --fondo-alt:  #f7f7f5;
  --oscuro:     #1a1a1a;

  --fuente: 'Poppins', system-ui, -apple-system, sans-serif;
  --radio: 14px;
  --sombra: 0 10px 30px rgba(0,0,0,0.08);
  --max-ancho: 1180px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.6;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
.contenedor { width:90%; max-width:var(--max-ancho); margin:0 auto; }
section { padding: 80px 0; }

/* ---------- HEADER ---------- */
header {
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.nav img { height:56px; width:auto; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a {
  font-weight:500; font-size:0.95rem; color:var(--texto);
  transition:color .2s;
}
.nav-links a:hover { color:var(--primario); }
.btn-wifi {
  background:var(--primario); color:#fff !important;
  padding:10px 20px; border-radius:50px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .2s, box-shadow .2s;
}
.btn-wifi:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(17,175,174,0.4); }
.menu-toggle { display:none; font-size:1.8rem; background:none; border:none; cursor:pointer; color:var(--texto); }

/* ---------- HERO ---------- */
.hero {
  min-height:88vh; display:flex; align-items:center;
  text-align:center;
  background:linear-gradient(135deg, rgba(17,175,174,0.9), rgba(31,124,183,0.85)),
             var(--fondo-alt);
  color:#fff; position:relative;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; opacity:0.25;
}
.hero .contenedor { position:relative; z-index:1; }
.hero h1 { font-size:clamp(2.2rem,5vw,4rem); font-weight:700; margin-bottom:18px; }
.hero p { font-size:clamp(1rem,2vw,1.3rem); max-width:720px; margin:0 auto 32px; opacity:0.95; }
.hero-cta {
  display:inline-block; background:var(--secundario); color:#fff;
  padding:14px 36px; border-radius:50px; font-weight:600; font-size:1.05rem;
  transition:transform .2s, box-shadow .2s;
}
.hero-cta:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(245,92,48,0.45); }

/* ---------- FRANJA DE COLORES (rombos) ---------- */
.franja { display:flex; height:8px; }
.franja span { flex:1; }
.franja span:nth-child(1){ background:var(--color-naranja); }
.franja span:nth-child(2){ background:var(--color-magenta); }
.franja span:nth-child(3){ background:var(--color-verde); }
.franja span:nth-child(4){ background:var(--color-morado); }
.franja span:nth-child(5){ background:var(--color-azul); }
.franja span:nth-child(6){ background:var(--color-turquesa); }

/* ---------- TÍTULOS ---------- */
.titulo-seccion { text-align:center; margin-bottom:50px; }
.titulo-seccion h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700; margin-bottom:12px; }
.titulo-seccion h2 span { color:var(--primario); }
.titulo-seccion p { color:var(--texto-claro); max-width:640px; margin:0 auto; }

/* ---------- PROPÓSITO ---------- */
.proposito { background:var(--fondo-alt); }
.proposito-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.proposito-texto h2 { font-size:2rem; margin-bottom:18px; }
.proposito-texto p { color:var(--texto-claro); margin-bottom:16px; }
.proposito-img {
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra);
  min-height:340px; background:linear-gradient(135deg,var(--color-verde),var(--color-turquesa));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
}

/* ---------- SERVICIOS ---------- */
.servicios-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; }
.servicio {
  background:#fff; border-radius:var(--radio); padding:32px; box-shadow:var(--sombra);
  transition:transform .25s; border-top:4px solid var(--primario);
}
.servicio:hover { transform:translateY(-6px); }
.servicio .icono { font-size:2.4rem; margin-bottom:14px; }
.servicio h3 { margin-bottom:12px; font-size:1.25rem; }
.servicio ul { list-style:none; }
.servicio li { color:var(--texto-claro); padding:4px 0; padding-left:20px; position:relative; }
.servicio li::before { content:"•"; color:var(--acento); position:absolute; left:0; font-weight:bold; }

/* ---------- RECONOCIMIENTO ---------- */
.reconocimiento {
  background:linear-gradient(135deg,var(--color-morado),var(--color-azul));
  color:#fff; text-align:center;
}
.reconocimiento h2 { font-size:1.8rem; margin-bottom:14px; }
.reconocimiento p { max-width:640px; margin:0 auto; font-size:1.1rem; opacity:0.95; }

/* ---------- UBICACIÓN / MAPA ---------- */
.ubicacion-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; }
.ubicacion-info { display:flex; flex-direction:column; justify-content:center; }
.ubicacion-info h3 { font-size:1.4rem; margin-bottom:10px; color:var(--primario); }
.ubicacion-info p { color:var(--texto-claro); margin-bottom:8px; }
#mapa { width:100%; min-height:400px; border-radius:var(--radio); box-shadow:var(--sombra); z-index:1; }

/* ---------- FOOTER ---------- */
footer { background:var(--oscuro); color:#fff; padding:60px 0 30px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; margin-bottom:40px; }
.footer-col h4 { margin-bottom:16px; font-size:1.1rem; }
.footer-col p, .footer-col a { color:#bbb; font-size:0.95rem; margin-bottom:8px; display:block; }
.footer-col a:hover { color:#fff; }
.redes { display:flex; gap:16px; margin-top:14px; }
.redes a {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1); transition:background .2s, transform .2s;
}
.redes a:hover { transform:translateY(-3px); }
.redes a.fb:hover { background:#1877f2; }
.redes a.ig:hover { background:#e4405f; }
.redes a.tt:hover { background:#000; }
.redes svg { width:20px; height:20px; fill:#fff; }
.footer-bottom { text-align:center; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); color:#888; font-size:0.9rem; }

/* ---------- MODAL WIFI ---------- */
.modal {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,0.7); align-items:center; justify-content:center; padding:20px;
}
.modal.activo { display:flex; }
.modal-caja {
  background:#fff; border-radius:20px; padding:36px; text-align:center;
  max-width:400px; width:100%; position:relative; animation:aparecer .3s ease;
}
@keyframes aparecer { from{opacity:0; transform:scale(0.9);} to{opacity:1; transform:scale(1);} }
.modal-caja h3 { color:var(--primario); margin-bottom:8px; font-size:1.5rem; }
.modal-caja p { color:var(--texto-claro); margin-bottom:20px; }
.modal-caja img { width:260px; height:260px; margin:0 auto; border-radius:12px; }
.modal-cerrar {
  position:absolute; top:14px; right:18px; font-size:1.8rem; cursor:pointer;
  background:none; border:none; color:var(--texto-claro); line-height:1;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px) {
  .proposito-grid, .ubicacion-grid { grid-template-columns:1fr; }
  .nav-links {
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; padding:20px; gap:16px;
    box-shadow:0 8px 20px rgba(0,0,0,0.1);
  }
  .nav-links.abierto { display:flex; }
  .menu-toggle { display:block; }
}