/* ============================================================
   site.css — Sitio "Vapear También"
   Entrega de agencia + reemplazo de Bootstrap por CSS propio.
   ============================================================ */

/* --- Reset mínimo --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

/* --- Base tipográfica (de la agencia) --- */
body {
  font-family: "Barlow", sans-serif;
  line-height: 1.2rem;
  color: #513a1d;
}
h3 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
p { margin: 0 0 1rem; }

/* ============================================================
   Reemplazos de Bootstrap 5 (sólo las utilidades usadas)
   ============================================================ */

/* Contenedores */
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: 12px;
}
.container {
  max-width: 624px;
  margin-inline: auto;
  padding-inline: 12px;
}

/* Spacing */
.py-5 { padding-block: 3rem; }
.my-5 { margin-block: 3rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-5 { margin-top: 3rem; }
.pt-3 { padding-top: 1rem; }
.pe-3 { padding-right: 1rem; }
.p-4  { padding: 1.5rem; }

/* Color */
.text-white  { color: #fff; }
.text-center { text-align: center; }

/* Bandas con foto de fondo */
.bg-brown {
  background: #513a1d url("../images/landing/bg-dark.jpg") no-repeat fixed center;
}
.bg-light {
  background: #d1d1d1 url("../images/landing/bg-light.jpg") no-repeat fixed center;
}

/* Imagen */
.img-fluid  { max-width: 100%; height: auto; }
.rounded-1  { border-radius: .25rem; }

/* Flex */
.d-flex            { display: flex; }
.align-items-end   { align-items: flex-end; }
.align-items-start { align-items: flex-start; }

/* Aspect ratio (.ratio .ratio-4x3) */
.ratio       { position: relative; width: 100%; }
.ratio::before { content: ""; display: block; padding-top: 75%; }
.ratio > *   { position: absolute; inset: 0; }

/* Grid (.row .col-md-6 .col) */
.row {
  display: grid;
  grid-template-columns: 1fr;
}
.row.gy-3 { row-gap: 1rem; }

@media (min-width: 768px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
  }
  .col, .col-md-6 { grid-column: span 1; min-width: 0; }
  .order-md-first { order: -1; }
}

/* ============================================================
   Hero (zona 1) — la portada del bebé con el titular
   ============================================================ */
.hero-card {
  background: #513a1d url("../images/landing/portada.jpg") no-repeat center;
  background-size: cover;
}

/* ============================================================
   Animaciones de entrada en viewport (de la agencia)
   Se desactivan con prefers-reduced-motion.
   ============================================================ */
.animate {
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
  will-change: transform, opacity;
}
.animate.show { opacity: 1; transform: translate(0, 0); }

.fade-up    { transform: translateY(50px);  }
.fade-left  { transform: translateX(-60px); }
.fade-right { transform: translateX(60px);  }
.fade-down  { transform: translateY(-50px); }

.delay-1 { transition-delay: .2s; }
.delay-2 { transition-delay: .4s; }
.delay-3 { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}