/* ===========================================================
   Cabarete Sí Puede — Nuestras Promesas
   =========================================================== */
@font-face{
  font-family:'Schoolbell';
  src:url('../assets/fonts/Schoolbell-Regular.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* Paleta de marca */
:root{
  --purple:#7845c9;
  --teal:#10b2bf;
  --orange:#ebad20;
  --light:#e0e4dd;
  --tile-text:#5b5b5b;
  --header-h:96px;
  --footer-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;}
body{
  font-family:'Schoolbell','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  background:var(--purple);
  color:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* ===================== ENCABEZADO ===================== */
.site-header{
  position:relative;
  height:var(--header-h);
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 36px;
}
.logo{display:inline-flex;align-items:center;}
.logo img{height:64px;width:auto;display:block;}

.instagram{
  position:absolute;
  top:28px;
  right:36px;
  color:#fff;
  opacity:.9;
  transition:opacity .2s, transform .2s;
}
.instagram:hover{opacity:1;transform:scale(1.08);}

/* ===================== CONTENIDO ===================== */
.content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:8px 24px 40px;
}
.title{width:100%;max-width:620px;margin:4px auto 34px;}
.title img{width:100%;height:auto;display:block;}

/* ===================== CARRUSEL ===================== */
.carousel{
  position:relative;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 56px;
}
.viewport{overflow:hidden;width:100%;}
.track{
  display:flex;
  gap:26px;
  transition:transform .5s cubic-bezier(.45,.05,.2,1);
  will-change:transform;
}

/* 4 mosaicos visibles en desktop (considerando gaps) */
.tile{
  flex:0 0 calc((100% - 3*26px) / 4);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.tile-card{
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--light);
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9%;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.tile-card img{width:100%;height:100%;object-fit:contain;}
.tile h3{
  color:var(--light);
  font-size:1.25rem;
  font-weight:400;
  text-align:center;
  line-height:1.25;
  margin-top:16px;
  min-height:2.6em;
  text-wrap:balance;
}

/* flechas de navegación */
.nav{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;font-size:30px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  z-index:2;
}
.nav:hover{background:rgba(255,255,255,.34);}
.nav.prev{left:6px;}
.nav.next{right:6px;}

/* puntos de paginación */
.dots{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:34px;
}
.dot{
  width:13px;height:13px;border-radius:50%;
  background:var(--light);
  opacity:.55;border:none;cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.dot.active{background:var(--orange);opacity:1;transform:scale(1.15);}

/* ===================== PIE ===================== */
.footbar{
  flex:0 0 auto;
  height:var(--footer-h);
  background:var(--teal);
}

/* ===========================================================
   RESPONSIVE — TABLET (2 por vista)
   =========================================================== */
@media (max-width:1240px){
  .tile{flex:0 0 calc((100% - 26px) / 2);}
}

/* ===========================================================
   RESPONSIVE — MOBILE (apilado vertical, sin carrusel)
   =========================================================== */
@media (max-width:680px){
  :root{--header-h:84px;}
  .site-header{justify-content:center;padding:0 20px;}
  .logo img{height:50px;}

  /* Instagram pasa a esquina inferior derecha (flotante) */
  .instagram{
    position:fixed;
    top:auto;
    bottom:22px;
    right:20px;
    background:var(--teal);
    width:50px;height:50px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,.28);
    opacity:1;
    z-index:50;
  }

  .title{max-width:330px;margin-bottom:26px;}

  .carousel{padding:0 8px;}
  .viewport{overflow:visible;}
  /* el track se vuelve columna y se desactiva el desplazamiento por JS */
  .track{
    flex-direction:column;
    gap:24px;
    transform:none !important;
  }
  .tile{flex:0 0 auto;width:100%;max-width:420px;margin:0 auto;}
  .tile-card{border-radius:30px;padding:12%;}
  .tile h3{min-height:0;margin-top:12px;font-size:1.5rem;}

  /* ocultar flechas y puntos en mobile (es vertical) */
  .nav,.dots{display:none;}

  .footbar{height:60px;}
}