/* ==========================================================
   RESET GENERAL
========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f1f1f;

  /* 🟦 Degradé global “pegado” a la página */
  background: linear-gradient(
    180deg,
    #ffffff 0%,    /* arriba bien blanco para el header */
    #ffffff 18%,
    #1e2bbd 35%,   /* empieza el azul */
    #2c39ff 60%,   /* azul fuerte donde van los cuadritos */
    #dbe2ff 82%,   /* se va aclarando */
    #ffffff 100%   /* vuelve a blanco para el footer */
  );

  /* SIN fondo fijo, así se mueve con la página */
  background-repeat: no-repeat;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

.center {
  text-align: center;
}


/* ==========================================================
   HEADER
========================================================== */
.hero {
  background: transparent;        /* ahora toma el degradé del fondo */
  padding: 2.5rem 1.5rem;
}

.hero-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.hero-img { display: block; height: auto; }
.hero-img-main { max-width: 420px; width:100%; }
.hero-img-side { max-width: 200px; width:100%; object-fit: cover; border-radius:8px; margin:0 1.5rem; }


/* ==========================================================
   TARJETAS, BOTONES, TIPOGRAFÍA
========================================================== */

.card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  overflow: hidden;
  padding: 2.5rem;
}

.grid-2 { display:grid; gap:2rem; }

.logo-box { display:flex; align-items:center; justify-content:center; }
.logo-box img {
  width:100%; max-width:580px;
  border-radius:24px;
  border:4px solid rgba(0,0,0,.06);
  background:#fafafa;
  padding:1.75rem;
  object-fit:contain;
}

.info-box { display:flex; flex-direction:column; justify-content:center; gap:1.5rem; }

.section-title { font-size:2rem; font-weight:700; }
.turquesa { color:#55C6C3; }
.mostaza { color:#F2B31C; }

.text-block { font-size:1rem; line-height:1.7; color:#4a4a4a; display:flex; flex-direction:column; gap:.75rem; }
.text-block .strong { font-weight:600; }

.buttons-row { display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }

.btn {
  padding:.75rem 1.3rem; border-radius:999px;
  font-size:.95rem; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; border:1px solid transparent;
  transition:.15s ease; flex:1 1 140px;
}

.btn-primary { color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.btn-outline { background:transparent; }

.turquesa-bg { background:#55C6C3; }
.turquesa-bg:hover { background:#3da09d; transform:translateY(-1px); box-shadow:0 14px 35px rgba(0,0,0,.2); }

.mostaza-bg { background:#F2B31C; }
.mostaza-bg:hover { background:#d99a10; transform:translateY(-1px); box-shadow:0 14px 35px rgba(0,0,0,.2); }

.turquesa-outline { border-color:#55C6C3; color:#55C6C3; }
.turquesa-outline:hover { background:#55C6C3;color:#fff; }

.mostaza-outline { border-color:#F2B31C;color:#F2B31C; }
.mostaza-outline:hover { background:#F2B31C;color:#fff; }


/* ==========================================================
   SECCIÓN CUADRITOS (MAIN)
========================================================== */
/* == BORRAR TU BLOQUE DE CUADRITOS Y PEGAR ESTE EN SU LUGAR == */

.stores-section {
  padding: 3rem 1.5rem 4rem;
  background: transparent;
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem 1.4rem;
  column-gap: 3rem;
  grid-auto-flow: column;        /* <<< Hace que ordene por columnas */
}
/* ==============================
   ORDEN EN COLUMNAS ASCENDENTE
   ==============================*/

.stores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem 1.4rem;
}

/* ---------- 6 filas originales ---------- */
.stores-grid a:nth-child(1)  { grid-row: 1; grid-column: 1; }
.stores-grid a:nth-child(2)  { grid-row: 2; grid-column: 1; }
.stores-grid a:nth-child(3)  { grid-row: 3; grid-column: 1; }
.stores-grid a:nth-child(4)  { grid-row: 4; grid-column: 1; }
.stores-grid a:nth-child(5)  { grid-row: 5; grid-column: 1; }
.stores-grid a:nth-child(6)  { grid-row: 6; grid-column: 1; }

.stores-grid a:nth-child(7)  { grid-row: 1; grid-column: 2; }
.stores-grid a:nth-child(8)  { grid-row: 2; grid-column: 2; }
.stores-grid a:nth-child(9)  { grid-row: 3; grid-column: 2; }
.stores-grid a:nth-child(10) { grid-row: 4; grid-column: 2; }
.stores-grid a:nth-child(11) { grid-row: 5; grid-column: 2; }
.stores-grid a:nth-child(12) { grid-row: 6; grid-column: 2; }

.stores-grid a:nth-child(13) { grid-row: 1; grid-column: 3; }
.stores-grid a:nth-child(14) { grid-row: 2; grid-column: 3; }
.stores-grid a:nth-child(15) { grid-row: 3; grid-column: 3; }
.stores-grid a:nth-child(16) { grid-row: 4; grid-column: 3; }
.stores-grid a:nth-child(17) { grid-row: 5; grid-column: 3; }
.stores-grid a:nth-child(18) { grid-row: 6; grid-column: 3; }

.stores-grid a:nth-child(19) { grid-row: 1; grid-column: 4; }
.stores-grid a:nth-child(20) { grid-row: 2; grid-column: 4; }
.stores-grid a:nth-child(21) { grid-row: 3; grid-column: 4; }
.stores-grid a:nth-child(22) { grid-row: 4; grid-column: 4; }
.stores-grid a:nth-child(23) { grid-row: 5; grid-column: 4; }
.stores-grid a:nth-child(24) { grid-row: 6; grid-column: 4; }

/* ---------- ACA IRA SU EMPRESA (1 por columna) ---------- */
.stores-grid a:nth-child(25) { grid-row: 7; grid-column: 1; }
.stores-grid a:nth-child(26) { grid-row: 7; grid-column: 2; }
.stores-grid a:nth-child(27) { grid-row: 7; grid-column: 3; }
.stores-grid a:nth-child(28) { grid-row: 7; grid-column: 4; }

/* ---------- Responsive móvil vuelve normal ---------- */
@media(max-width:768px){
  .stores-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .stores-grid a {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}

.store-chip {
  width: 100%;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2c39ff, #151a7a);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
  text-align: center;
  transition: .15s ease;
}

.store-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

.store-number {
  font-size: .85rem;
  font-weight: 600;
}

.store-name {
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: .04em;
}

/* Responsive */
@media(max-width:768px){
  .stores-grid{
    grid-template-columns: repeat(2,1fr);
    grid-auto-flow: row;
  }
  .store-chip{
    min-height: 80px;
  }
}



/* ==========================================================
   FOOTER
========================================================== */
.footer {
  background: transparent;
  color:#ffffff;
  padding:3rem 1.5rem;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}

.footer-bottom{ margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.35);font-size:.85rem; }

.footer-map-card{
  margin-top:1.5rem;display:inline-block;
  border-radius:18px;padding:.9rem 1.6rem;
  background:linear-gradient(135deg,#2c39ff,#151a7a);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.footer a{color:#fff;text-decoration:none;transition:.2s ease;}
.footer a:hover{opacity:.8;}


/* ==========================================================
   RESPONSIVE
========================================================== */
@media(max-width:768px){
  .grid-2{grid-template-columns:1fr;}
  .hero-logos{flex-direction:column;}
  .stores-grid{grid-template-columns:repeat(2,1fr);} /* móvil = 2 col */
  .store-chip{min-height:80px;}
}

.footer {
  background: transparent;
  color: #111;                 /* texto oscuro para que se lea */
  padding: 3rem 1.5rem;
  text-shadow: none;           /* quitamos sombra para legibilidad */
}
.footer-title {
  color:#151a7a;
  font-size: 2.6rem;
  margin-bottom: 0.3rem;   /* ↓ más cerca del subtítulo */
}

.footer-title2 {
  color:#151a7a;
  font-size: 2.6rem;
  margin-bottom: 0.3rem;   /* ↓ más cerca del subtítulo */
}

.footer-subtitle {
  color:#151a7a;
  font-size: 2.0rem;
  margin-top: 0.1rem;      /* ↓ opcional para acercar aún más */
}


.footer-text {
  color:#55C6C3;   
  font-size: 1.4rem;
  margin-top: 0.1rem; 
  font-weight: 700;               /* texto principal más visible */
}

.footer-bottom {
  color:#555;                  /* copyright más suave */
}

/* Link blanco dentro del botoncito pero oscuro en texto normal */
.footer a {
  color:#111;
  text-decoration:none;
}

.footer a:hover{
  opacity:.8;
}

/* El botón de maps queda igual, solo ajustamos color del texto alrededor */
.footer-map-card a {
  color:#fff;                  /* el botón sigue blanco porque es azul */
}

.footer img {
  display: block;
  margin: 0 auto;       /* <- centrado horizontal */
  max-width: 360px;     /* tamaño recomendado (podés ajustar) */
  width: 100%;
  border-radius: 18px;  /* opcional visual más suave */
}

/* ======= Etiquetas sobre las imágenes ======= */
.hero-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-tag {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: #88DEC4; /* color solicitado */
}

/* Para centrar "Confianza" arriba de la imagen del footer */
.footer-center {
  text-align: center;
  display: block;
  margin-bottom: 1rem;
}