/* Agua de la Montaña · colores de la marca (logo, botella, banner) */
:root {
  --verde: #0B7A22;
  --verde-vivo: #1E9B3A;
  --azul: #1B3F8F;
  --azul-vivo: #1D4FD8;
  --azul-noche: #0F2557;
  --cielo: #E6F0FB;
  --cielo-claro: #F5F9FE;
  --tinta: #0E1B33;
  --tinta-suave: #4A5872;
  --whatsapp: #128C7E;
  --radio: 28px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lado: max(16px, env(safe-area-inset-left));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1.0625rem/1.6 "Outfit", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--cielo-claro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; color: var(--azul-noche); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 3px; border-radius: 8px; }
section { scroll-margin-top: 84px; }

.antetitulo {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--verde); margin-bottom: 12px;
}
.antetitulo-claro { color: #8FE3A6; }
.titular { max-width: 640px; margin-bottom: 40px; }

/* Botones: responden al tocar, no al soltar */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 600 1rem/1 "Outfit", sans-serif; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--azul);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px -10px rgba(27,63,143,0.6);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(0.97); }
.boton-claro { color: var(--azul); background: rgba(255,255,255,0.8); box-shadow: 0 0 0 1px rgba(27,63,143,0.14) inset; }
.boton-chico { min-height: 40px; padding: 0 18px; font-size: 0.95rem; }
.boton-whatsapp { width: 100%; background: var(--whatsapp); box-shadow: 0 8px 24px -10px rgba(18,140,126,0.7); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--azul-vivo); }
  .boton-claro:hover { background: #fff; }
  .boton-whatsapp:hover { background: #0E7A6D; }
}
.enlace { font-weight: 600; color: var(--azul); text-underline-offset: 4px; }

/* Barra: vidrio translúcido; se asienta al bajar */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--lado); padding-top: max(12px, env(safe-area-inset-top));
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.barra[data-bajo] {
  background: rgba(245, 249, 254, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(15, 37, 87, 0.08);
}
.barra-logo img { width: 104px; height: auto; }
.barra-nav { display: none; gap: 28px; margin-left: auto; }
.barra-nav a { font-weight: 500; text-decoration: none; color: var(--tinta-suave); transition: color 200ms ease; }
.barra-nav a:hover { color: var(--azul); }
.barra .boton { margin-left: auto; }
@media (min-width: 760px) {
  .barra-nav { display: flex; }
  .barra { padding-inline: max(32px, 6vw); }
  .barra .boton { margin-left: 0; }
}

/* Inicio */
.inicio {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 40px; align-items: center;
  padding: 112px var(--lado) 56px;
  background: radial-gradient(120% 80% at 80% 0%, #FFFFFF 0%, transparent 60%), linear-gradient(180deg, #D7E8FA 0%, var(--cielo-claro) 100%);
}
.inicio-montana {
  position: absolute; z-index: -1; left: -4%; right: -4%; bottom: -2%;
  width: 108%; height: 26%; opacity: 0.14;
  clip-path: inset(0 0 0 0);
  animation: dibujar 1400ms var(--ease-in-out) 150ms both;
}
@keyframes dibujar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.inicio h1 {
  font-size: clamp(2.7rem, 8.4vw, 5.4rem); line-height: 1.0; letter-spacing: -0.035em; font-weight: 800;
}
.inicio h1 span { color: var(--verde); }
.inicio-bajada { margin-top: 20px; max-width: 34rem; font-size: 1.15rem; color: var(--tinta-suave); }
.inicio-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.inicio-foto { margin: 0; justify-self: center; width: min(100%, 460px); }
.inicio-foto img {
  width: 100%; border-radius: 36px;
  box-shadow: 0 40px 80px -40px rgba(15,37,87,0.45), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
@media (min-width: 900px) {
  .inicio { grid-template-columns: 1.15fr 0.85fr; min-height: 92svh; padding: 120px max(48px, 6vw) 72px; gap: 56px; }
  .inicio-foto { justify-self: end; }
}

/* Entrada del inicio: una sola vez, escalonada */
.inicio-texto > *, .inicio-foto {
  animation: aparecer 700ms var(--ease-out) both;
}
.inicio-texto > :nth-child(2) { animation-delay: 60ms; }
.inicio-texto > :nth-child(3) { animation-delay: 120ms; }
.inicio-texto > :nth-child(4) { animation-delay: 180ms; }
.inicio-foto { animation-delay: 140ms; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } }

/* Sellos */
.sellos {
  display: grid; gap: 1px; background: rgba(15,37,87,0.1);
  border-block: 1px solid rgba(15,37,87,0.1);
}
.sellos p { display: grid; gap: 2px; padding: 18px var(--lado); background: #fff; text-align: center; }
.sellos strong { font-size: 1.05rem; color: var(--azul); }
.sellos span { font-size: 0.9rem; color: var(--tinta-suave); }
@media (min-width: 760px) { .sellos { grid-template-columns: repeat(3, 1fr); } }

/* Productos */
.productos { padding: 96px var(--lado); max-width: 1200px; margin: 0 auto; }
.productos-lista { display: grid; gap: 20px; }
@media (min-width: 760px) { .productos-lista { grid-template-columns: 1fr 1fr; } }
.producto { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio); background: #fff; box-shadow: 0 30px 60px -40px rgba(15,37,87,0.35); }
.producto img { aspect-ratio: 5 / 4; width: 100%; object-fit: cover; }
.producto-azul img { background: var(--azul-vivo); object-position: center 40%; }
.producto-cielo img { object-position: center 45%; }
.producto-texto { display: grid; gap: 10px; padding: 24px 24px 28px; }
.producto-texto p { color: var(--tinta-suave); }

/* Reparto */
.reparto { display: grid; gap: 32px; align-items: center; padding: 0 var(--lado) 96px; max-width: 1200px; margin: 0 auto; }
.reparto-foto { margin: 0; }
.reparto-foto img { border-radius: var(--radio); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.reparto-texto { display: grid; gap: 16px; justify-items: start; }
.reparto-texto p:not(.antetitulo) { color: var(--tinta-suave); font-size: 1.1rem; }
@media (min-width: 900px) { .reparto { grid-template-columns: 1.3fr 1fr; gap: 56px; } }

/* Reconocimientos: el azul de la marca, con la montaña al fondo */
.reconocimientos {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 96px var(--lado); color: #DCE6F7;
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-noche) 100%);
}
.reconocimientos::before {
  content: ""; position: absolute; z-index: -1; inset: auto -5% 0; height: 40%;
  background: url("../assets/montana-blanca.svg") center bottom / 100% 100% no-repeat; opacity: 0.06;
}
.reconocimientos h2 { color: #fff; }
.reconocimientos > .titular, .reconocimientos-lista { max-width: 1200px; margin-inline: auto; }
.reconocimientos > .titular { margin-bottom: 40px; }
.reconocimientos-lista { display: grid; gap: 20px; }
@media (min-width: 900px) { .reconocimientos-lista { grid-template-columns: repeat(3, 1fr); } }
.reconocimiento {
  display: grid; align-content: start; gap: 10px; padding: 14px 14px 24px;
  border-radius: var(--radio); text-decoration: none;
  background: rgba(255,255,255,0.07); box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.reconocimiento:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .reconocimiento:hover { background: rgba(255,255,255,0.11); } }
.reconocimiento img { border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: #fff; margin-bottom: 8px; }
.reconocimiento img.reconocimiento-retrato { object-position: center 70%; }
.reconocimiento h3 { color: #fff; padding-inline: 8px; }
.reconocimiento p, .reconocimiento-fecha { padding-inline: 8px; }
.reconocimiento p { font-size: 0.98rem; color: #C3D1EC; }
.reconocimiento-fecha { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8FE3A6; }

/* Nosotros */
.nosotros { display: grid; gap: 32px; align-items: center; padding: 96px var(--lado); max-width: 1200px; margin: 0 auto; }
.nosotros-foto { margin: 0; }
.nosotros-foto img { border-radius: var(--radio); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-height: 640px; }
.nosotros-texto { display: grid; gap: 16px; }
.nosotros-texto p:not(.antetitulo) { color: var(--tinta-suave); font-size: 1.1rem; }
@media (min-width: 900px) { .nosotros { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }

/* Comunidad: tira de fotos; en el teléfono se desliza de lado */
.comunidad { padding: 0 0 96px; }
.comunidad-fila {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); gap: 14px;
  overflow-x: auto; padding: 0 var(--lado); scroll-snap-type: x mandatory; scroll-padding: var(--lado);
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.comunidad-fila::-webkit-scrollbar { display: none; }
.comunidad-fila img { scroll-snap-align: start; width: 100%; height: 300px; object-fit: cover; border-radius: 22px; }
@media (min-width: 900px) {
  .comunidad-fila { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; overflow: visible; }
  .comunidad-fila img { height: 340px; }
}

/* Pedido */
.pedido { padding: 0 var(--lado) 96px; }
.pedido-caja {
  max-width: 1100px; margin: 0 auto; display: grid; gap: 32px;
  padding: 40px 20px; border-radius: 36px; color: #DCE6F7;
  background: radial-gradient(90% 70% at 100% 0%, rgba(30,155,58,0.35) 0%, transparent 60%), var(--azul-noche);
}
.pedido-caja h2 { color: #fff; }
.pedido-caja .titular { margin: 0; }
.pedido-bajada { margin-top: 14px; color: #C3D1EC; }
.pedido-llamar { margin-top: 20px; color: #C3D1EC; }
.pedido-llamar a { font-weight: 600; color: #fff; }
.sin-cortar { white-space: nowrap; }
@media (min-width: 900px) { .pedido-caja { grid-template-columns: 1fr 1fr; padding: 56px; gap: 56px; } }
.pedido-form { display: grid; gap: 14px; }
.cantidad {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 14px 18px; border-radius: 20px; background: rgba(255,255,255,0.08);
}
.cantidad strong { display: block; color: #fff; font-weight: 600; }
.cantidad span { font-size: 0.9rem; color: #A9BBDF; }
.contador { display: flex; align-items: center; gap: 4px; }
.contador button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  font: 500 1.4rem/1 "Outfit", sans-serif; color: #fff; background: rgba(255,255,255,0.14);
  transition: transform 100ms var(--ease-out), background-color 150ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.contador button:active { transform: scale(0.92); background: rgba(255,255,255,0.24); }
.contador output { min-width: 2.2ch; text-align: center; font-size: 1.25rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.campo { display: grid; gap: 6px; font-size: 0.95rem; font-weight: 500; color: #DCE6F7; }
.opcional { font-weight: 400; color: #A9BBDF; }
.campo input, .campo textarea {
  width: 100%; padding: 14px 16px; border: 0; border-radius: 16px;
  font: 400 1rem/1.4 "Outfit", sans-serif; /* 16px: el iPhone no acerca la página al escribir */
  color: var(--tinta); background: #fff; resize: vertical;
}
.campo input:focus-visible, .campo textarea:focus-visible { outline-color: #8FE3A6; }
.pedido-aviso { min-height: 1.4em; font-size: 0.95rem; color: #FFD27A; }

/* Pie */
.pie { display: grid; justify-items: center; gap: 20px; padding: 56px var(--lado) calc(96px + env(safe-area-inset-bottom)); text-align: center; color: #C3D1EC; background: var(--azul-noche); }
.pie img { width: 160px; }
.pie-datos { display: grid; gap: 6px; }
.pie-datos a { color: #fff; }
.pie-firma { margin-top: 12px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.9rem; display: grid; gap: 4px; color: #8EA2CA; }
.pie-firma a { color: #DCE6F7; }
@media (min-width: 760px) { .pie { padding-bottom: 56px; } }

/* Botón flotante del teléfono: sube desde abajo y baja por el mismo lado */
.flotante {
  position: fixed; z-index: 15; left: var(--lado); right: var(--lado); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px;
  font-weight: 600; text-decoration: none; color: #fff; background: var(--azul);
  box-shadow: 0 16px 32px -12px rgba(15,37,87,0.6);
  transform: translateY(160%); opacity: 0;
  transition: transform 300ms var(--ease-out), opacity 200ms ease;
}
.flotante[data-visible] { transform: translateY(0); opacity: 1; }
.flotante:active { transform: scale(0.97); }
@media (min-width: 760px) { .flotante { display: none; } }

/* Lo que entra al bajar: una vez, suave */
.revelar { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .revelar:not([data-visto]) { opacity: 0; transform: translateY(16px); }

/* Mientras se escribe, nada se mueve */
body:has(input:focus, textarea:focus) .flotante { transform: translateY(160%); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inicio-montana { animation: none; }
  .inicio-texto > *, .inicio-foto { animation-name: desvanecer; }
  @keyframes desvanecer { from { opacity: 0; } }
  .js .revelar:not([data-visto]) { transform: none; }
  .flotante { transform: none; }
  .boton:active, .reconocimiento:active, .flotante:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .barra[data-bajo] { background: var(--cielo-claro); -webkit-backdrop-filter: none; backdrop-filter: none; }
}