/* Kalina — hoja principal
   Implementación del frame HOME (Figma 1:111, 1512×4749).
   El diseño está maquetado con posición absoluta sobre un lienzo fijo; acá se
   reconstruye como secciones en flujo para que responda a cualquier ancho. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--c-cafe);
  background: var(--c-blanco);
}

/* height:auto neutraliza los atributos width/height del HTML, que el navegador
   aplica como estilo y le ganarían a aspect-ratio */
img,
svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* Ocupa todo el ancho —para que los fondos de sección lleguen a los bordes— pero
   mantiene el contenido alineado a la grilla de 1512px del diseño */
.contenedor {
  width: 100%;
  padding-inline: max(
    var(--pad-x),
    calc((100% - var(--ancho-diseno)) / 2 + var(--pad-x))
  );
}

/* Enlace de salto para navegación por teclado */
.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: var(--pad-x);
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--c-cafe);
  color: var(--c-amarillo);
}

/* ---------------------------------------------------------------- Cabecera */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1rem, 2.381vw, 2.25rem) clamp(1rem, 2.249vw, 2.125rem);
  background: var(--c-blanco);
}

.cabecera__logo {
  flex: 0 0 auto;
  width: clamp(11rem, 32.54vw, 30.75rem); /* 492px */
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
}

.menu a { padding-block: 0.25rem; }

.menu a:hover,
.menu a:focus-visible { text-decoration: underline; }

.menu__abrir { display: none; }

/* ------------------------------------------------------------------- Hero */

.hero { background: var(--c-cafe); }

.hero__figura {
  position: relative;
  margin: 0;
}

.hero__foto {
  width: 100%;
  aspect-ratio: 1512 / 737;
  object-fit: cover;
}

/* Filete horizontal que cruza el borde inferior de la foto */
.hero__filete {
  position: absolute;
  left: 25.4%;
  bottom: 3.9%;
  width: 48.6%;
  height: auto;
}

.hero__manifiesto {
  /* 1101px es el ancho de la caja de texto en Figma */
  width: min(100% - var(--pad-x) * 2, 68.813rem);
  /* margin 0 evita que el margen por defecto del <p> se colapse fuera del
     hero y abra una franja blanca antes de la sección siguiente */
  margin: 0 auto;
  padding-block: clamp(2.5rem, 9.524vw, 9rem);
  font-size: var(--fs-manifiesto);
  line-height: var(--lh-manifiesto);
  color: var(--c-lavanda);
  text-align: center;
}

/* -------------------------------------------------------------- Productos */

.producto {
  display: grid;
  grid-template-columns: 590fr 603fr;
  gap: clamp(2rem, 8.796vw, 8.313rem); /* 133px */
  align-items: start;
  padding-block: clamp(2.5rem, 6.415vw, 6.063rem) clamp(3rem, 7.54vw, 7.125rem);
}

.producto--ginger { background: var(--c-amarillo); }
.producto--shots  { background: var(--c-naranjo); }

.producto__titulo {
  margin: 0;
  font-size: var(--fs-titulo);
  font-weight: 400;
  line-height: var(--lh-titulo);
}

/* El diseño usa negro puro sólo en el título de Ginger Beer */
.producto--ginger .producto__titulo { color: var(--c-negro); }
.producto--shots  .producto__titulo { color: var(--c-cafe-alt); }

.producto__texto {
  margin: clamp(1.5rem, 2.6vw, 2.5rem) 0 0;
  font-size: var(--fs-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--c-cafe-alt);
}

.producto__foto { margin: 0; }

.producto__foto img {
  width: 100%;
  object-fit: cover;
}

.producto--ginger .producto__foto img { aspect-ratio: 603 / 638; }
.producto--shots  .producto__foto img { aspect-ratio: 603 / 685; }

/* Punto decorativo junto a la foto de Ginger Beer */
.producto__punto {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--c-cafe-alt);
}

.boton {
  display: inline-flex;
  align-items: center;
  min-width: min(100%, 21.188rem); /* 339px */
  min-height: 3.063rem;            /* 49px */
  margin-top: clamp(1.75rem, 3.5vw, 3.5rem);
  padding: 0.75rem clamp(1rem, 1.72vw, 1.625rem);
  font-size: var(--fs-boton);
  font-weight: 600;
  letter-spacing: var(--track-boton);
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.boton:hover,
.boton:focus-visible { opacity: 0.85; }

.boton--ginger { background: var(--c-cafe-alt); color: var(--c-amarillo); }
.boton--shots  { background: var(--c-cafe);     color: var(--c-naranjo); }

/* ------------------------------------------------- Bandas lavanda (sellos) */

.banda {
  background: var(--c-lavanda);
  padding-block: clamp(1.5rem, 2.6vw, 2.5rem);
}

.banda--sellos { padding-block: clamp(1.5rem, 2.612vw, 2.469rem); }

.banda--marca {
  padding-block: clamp(1.75rem, 3.241vw, 3.063rem) clamp(1rem, 1.587vw, 1.5rem);
}

.banda img {
  width: 100%;
  margin-inline: auto;
}

/* ------------------------------------------------- Nosotros / Manifesto */

.cabecera--lavanda { background: var(--c-lavanda); }

.lavanda { background: var(--c-lavanda); }

/* Bloque de apertura: flor, título, credo y bienvenida, todo centrado */
.intro {
  padding-block: clamp(2.5rem, 5.556vw, 5.25rem) clamp(3rem, 8vw, 7.5rem);
  text-align: center;
}

.intro__icono {
  width: clamp(7rem, 14.881vw, 14.063rem); /* 225px */
  margin-inline: auto;
  /* el PNG trae fondo blanco; multiply lo funde con el lavanda, como en Figma */
  mix-blend-mode: multiply;
}

.titulo-grande {
  margin: 0;
  font-size: var(--fs-titulo);
  font-weight: 400;
  line-height: var(--lh-titulo);
}

.intro__credo {
  max-width: 51.625rem; /* 826px */
  margin: clamp(1.5rem, 3vw, 2.75rem) auto clamp(2rem, 4.5vw, 4.25rem);
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
}

.intro__credo strong { font-weight: 500; }

/* Banda de fotografía a sangre completa */
.banda-foto img {
  width: 100%;
  aspect-ratio: 1512 / 801;
  object-fit: cover;
}

/* Bloques de relato: foto a un lado, texto al otro */
.relato {
  display: grid;
  grid-template-columns: 537fr 638fr;
  gap: clamp(2rem, 9.392vw, 8.875rem);
  align-items: center;
  padding-block: clamp(3rem, 7.937vw, 7.5rem);
}

.relato--invertido {
  grid-template-columns: 634fr 619fr;
  gap: clamp(1.5rem, 4.828vw, 4.563rem); /* 73px, más angosto que el de El Origen */
}

.relato__foto { margin: 0; width: 100%; }

.relato__foto img {
  width: 100%;
  object-fit: cover;
}

.relato--origen .relato__foto img { aspect-ratio: 537 / 538; }
.relato--tesoro .relato__foto img { aspect-ratio: 619 / 922; }

.relato__cuerpo { text-align: center; }

/* Los tres iconos decorativos van en multiply, como en el diseño */
.relato__icono {
  margin-inline: auto;
  mix-blend-mode: multiply;
}

.relato--origen .relato__icono { width: clamp(6rem, 14.616vw, 13.813rem); } /* 221px */
.relato--tesoro .relato__icono { width: clamp(9rem, 23.479vw, 22.188rem); } /* 355px */

.relato__texto {
  margin: clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
  font-size: var(--fs-parrafo);
  line-height: var(--lh-parrafo);
}

.relato__texto + .relato__texto { margin-top: 1.625rem; }

/* Cinta café con el manifiesto, repetida al cierre de la página */
.cinta {
  background: var(--c-cafe);
  padding-block: clamp(3rem, 7.407vw, 7rem);
}

.cinta p {
  width: min(100% - var(--pad-x) * 2, 68.813rem); /* 1101px */
  margin: 0 auto;
  font-size: var(--fs-manifiesto);
  line-height: var(--lh-manifiesto);
  color: var(--c-lavanda);
  text-align: center;
}

/* ------------------------------------------------------------- Catálogo */

.gris { background: var(--c-gris); }

.cabecera--gris { background: var(--c-gris); }

.catalogo {
  background: var(--c-gris);
  padding-block: clamp(2.5rem, 6.283vw, 5.938rem) clamp(3rem, 7.937vw, 7.5rem);
  text-align: center;
}

.catalogo__titulo {
  margin: 0 0 clamp(1.5rem, 3.373vw, 3.188rem);
  font-size: var(--fs-titulo);
  font-weight: 400;
  line-height: var(--lh-titulo);
}

/* "[Ginger Beer]" y "[Shots]" */
.catalogo__familia {
  margin: clamp(2.5rem, 6.61vw, 6.25rem) 0 clamp(1.25rem, 2.646vw, 2.5rem);
  font-size: var(--fs-familia);
  font-weight: 400;
  line-height: 1.5;
}

.catalogo__familia:first-of-type { margin-top: 0; }

.grilla-productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2.05vw, 1.938rem); /* 31px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.ficha__foto {
  position: relative;
  aspect-ratio: 323 / 468;
  overflow: hidden;
  opacity: 0.9;
}

/* El encuadre replica el recorte del diseño: la foto se amplía al 156.8% y se
   corre a la izquierda, dejando libre el 7% superior de la ficha */
.ficha__foto img {
  position: absolute;
  left: -25.1%;
  top: 6.99%;
  width: 156.8%;
  height: 93.01%;
  max-width: none;
  object-fit: cover;
}

.ficha__nombre {
  margin: clamp(0.75rem, 1.6vw, 1.5rem) 0 0;
  font-size: var(--fs-parrafo);
  font-weight: 500;
  line-height: var(--lh-pie);
}

/* ------------------------------------------------- Detalle de producto */

.detalle {
  display: grid;
  grid-template-columns: 323fr 850fr;
  gap: clamp(2rem, 5.688vw, 5.375rem); /* 86px */
  align-items: start;
  padding-block: clamp(2.5rem, 5.026vw, 4.75rem) clamp(3rem, 7.937vw, 7.5rem);
}

.detalle__foto {
  position: relative;
  aspect-ratio: 323 / 468;
  overflow: hidden;
  opacity: 0.9;
  margin: 0;
}

.detalle__foto img {
  position: absolute;
  left: -25.1%;
  top: 6.99%;
  width: 156.8%;
  height: 93.01%;
  max-width: none;
  object-fit: cover;
}

.miga {
  margin: 0 0 clamp(1rem, 1.72vw, 1.625rem);
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  letter-spacing: 0.2em; /* 2.8px */
  line-height: 1;
  text-transform: uppercase;
  color: #474747;
}

.miga a { text-decoration: none; }
.miga a:hover,
.miga a:focus-visible { text-decoration: underline; }

.detalle__titulo {
  margin: 0 0 clamp(1.5rem, 3.175vw, 3rem);
  font-size: var(--fs-familia);
  font-weight: 400;
  line-height: 1.13;
}

/* Fila de pestañas. Sólo la primera tiene contenido diseñado; las otras dos
   aparecen atenuadas en Figma y no tienen panel asociado. */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.116vw, 2rem);
  margin: 0 0 clamp(1.25rem, 2.116vw, 2rem);
  padding: 0;
  list-style: none;
  font-size: var(--fs-parrafo);
  font-weight: 600;
  line-height: var(--lh-parrafo);
}

.pestanas li[aria-current] { color: var(--c-cafe); }
.pestanas li:not([aria-current]) { color: rgb(71 71 71 / 0.6); }

.detalle__texto {
  margin: 0;
  font-size: var(--fs-parrafo);
  line-height: var(--lh-parrafo);
  color: var(--c-cafe);
}

/* Selector compuesto: .cierre se define más abajo y si no ganaría por orden */
.cierre.cierre--blanco { background: var(--c-blanco); }

/* ----------------------------------------------------- Encuéntranos */

.puntos {
  background: var(--c-gris);
  padding-block: clamp(1.5rem, 2.513vw, 2.375rem) clamp(3rem, 8.796vw, 8.313rem);
}

.puntos__panel {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 8vw, 7.5rem);
  justify-content: space-between;
  align-items: flex-start;
  background: var(--c-lavanda);
  padding: clamp(2rem, 8.796vw, 8.313rem) clamp(1.5rem, 3.505vw, 3.313rem);
}

.puntos__lista {
  flex: 1 1 16rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.puntos__lista li + li { margin-top: clamp(2rem, 5.291vw, 5rem); }

.punto__nombre {
  margin: 0;
  font-size: var(--fs-intro);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em; /* 1.28px sobre 32px */
}

.punto__etiqueta {
  margin: clamp(0.5rem, 1vw, 0.938rem) 0 0;
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.714;
  text-transform: uppercase;
}

.punto__dato {
  margin: 0;
  font-size: var(--fs-parrafo);
  line-height: var(--lh-parrafo);
}

/* Tarjeta oscura de pedidos por WhatsApp */
.wsp {
  flex: 0 1 37.688rem; /* 603px */
  background: var(--c-cafe-alt);
  padding: clamp(2rem, 4.167vw, 3.938rem) clamp(1.5rem, 5.622vw, 5.313rem);
  color: var(--c-lavanda);
}

.wsp__titulo {
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
  font-size: var(--fs-cuerpo);
  font-weight: 400;
  line-height: 1.375;
}

.wsp__texto {
  margin: 0;
  max-width: 18.75rem; /* 300px */
  font-size: var(--fs-parrafo);
  line-height: var(--lh-parrafo);
}

.boton--wsp {
  background: var(--c-lavanda);
  color: var(--c-cafe);
}

/* ---------------------------------------------------------- Contacto */

.hablemos {
  background: var(--c-lavanda);
  padding-block: clamp(3rem, 12.831vw, 12.125rem) clamp(3rem, 16.534vw, 15.625rem);
}

.hablemos__fila {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: flex-start;
}

.hablemos__titulo {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--fs-familia);
  font-weight: 400;
  line-height: 1.333;
  letter-spacing: 0.04em; /* 2.4px sobre 60px */
}

.hablemos__bloque { flex: 0 1 18.25rem; } /* 292px */

.hablemos__dato {
  margin: clamp(0.5rem, 1vw, 0.938rem) 0 0;
  font-size: 1.375rem; /* 22px */
  line-height: 1.455; /* 32/22 */
  font-style: normal; /* <address> viene en cursiva por defecto */
}

.hablemos__dato a { text-decoration: underline; }

/* Franja de hierbas: el encuadre replica el recorte del diseño */
.banda-hierbas {
  position: relative;
  aspect-ratio: 1512 / 323;
  overflow: hidden;
}

.banda-hierbas img {
  position: absolute;
  left: -1.39%;
  top: -166.88%;
  width: 127.18%;
  height: 433.77%;
  max-width: none;
  object-fit: cover;
}

/* --------------------------------------------------------------- Galería */

.galeria {
  background: var(--c-gris);
  padding-block: clamp(3rem, 7.937vw, 7.5rem);
}

.galeria__grilla {
  display: grid;
  grid-template-columns: 506fr 760fr;
  gap: clamp(1.5rem, 4.034vw, 3.813rem); /* 61px */
  align-items: center;
}

.galeria__grilla img {
  width: 100%;
  object-fit: cover;
}

.galeria__grilla img:first-child { aspect-ratio: 506 / 553; }
.galeria__grilla img:last-child  { aspect-ratio: 760 / 368; }

/* ------------------------------------------------------------------ Cierre */

.cierre {
  background: var(--c-gris);
  padding-block: clamp(2.5rem, 6.283vw, 5.938rem) clamp(1.5rem, 2.183vw, 2.063rem);
}

.cierre img { width: 100%; }

/* -------------------------------------------------------------------- Pie */

.pie {
  background: var(--c-lavanda);
  padding-block: clamp(1.5rem, 2.5vw, 2.375rem);
  color: var(--c-cafe);
}

.pie__fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  flex-wrap: wrap;
}

.pie__sello { width: clamp(5rem, 9.061vw, 8.563rem); } /* 137px */

.pie__contacto {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 clamp(1rem, 2vw, 2rem);
  margin: 0;
  font-size: var(--fs-pie);
  line-height: var(--lh-pie);
}

.pie__contacto dt { font-weight: 600; }
.pie__contacto dd { margin: 0; }
.pie__contacto a { text-decoration: underline; }

.pie__redes {
  display: flex;
  gap: 1.188rem;
}

.pie__redes img { width: 29px; height: 29px; }

.pie__legal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-pie);
  line-height: var(--lh-pie);
}

.pie__credito { font-size: var(--fs-credito); }

.pie p { margin: 0; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .menu { gap: 1rem; font-size: 1rem; }

  .producto,
  .galeria__grilla,
  .relato,
  .relato--invertido,
  .detalle {
    grid-template-columns: 1fr;
  }

  .producto__foto,
  .relato--tesoro .relato__foto { order: -1; }

  .cinta p { max-width: 100%; }

  .hero__manifiesto { max-width: 100%; }

  .boton { width: 100%; }
}

@media (max-width: 900px) {
  .grilla-productos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .cabecera {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .cabecera__logo { width: min(100%, 18rem); }

  .menu { flex-wrap: wrap; }

  .pie__fila { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}