/* nosotros.css — Phase 1 (no @layer) */
/* Page-specific CSS for nosotros.html only. */
/* Sections: nosotros-hero, historia, filosofia, pillar-prose, produccion, formula, cierre */

/* ── Nosotros hero (full-viewport with text overlay) ── */
.nosotros-hero {
  background-color: var(--c-dark);
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: 1fr;
  align-items: end;
}
.nosotros-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nosotros-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Gradient darkens the lower portion where text sits */
.nosotros-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
}
.nosotros-hero__inner {
  position: relative;
  z-index: 1;
  padding: 0 var(--gap-container) clamp(64px, 9vw, 104px);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.nosotros-hero__eyebrow {
  font-family: var(--ff-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.6);
  margin-bottom: 28px;
}
.nosotros-hero__headline {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(44px, min(7.5vw, 9svh), 100px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #F5F0E8;
  max-width: 860px;
  text-wrap: balance;
}

/* ── Historia ── */
.historia {
  padding: var(--gap-section) var(--gap-container);
  border-bottom: 1px solid var(--c-rule);
}
.historia__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(56px, 8vw, 120px);
  align-items: center;
}
.historia__photo { aspect-ratio: 3 / 4; overflow: hidden; }
.historia__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-quart);
}
.historia__photo:hover img { transform: scale(1.02); }
.historia__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 28px;
}
.historia__label::after { content: ''; width: 24px; height: 1px; background-color: var(--c-accent); opacity: 0.5; }
.historia__headline {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--c-text);
  margin-bottom: 32px;
  text-wrap: balance;
}
.historia__body { font-family: var(--ff-body); font-size: 14px; line-height: 1.9; color: var(--c-secondary); }
.historia__body p + p { margin-top: 20px; }
.historia__body strong { font-weight: 400; color: var(--c-text); }

/* ── Filosofía ── */
.filosofia { padding: var(--gap-section) var(--gap-container); }
.filosofia__inner { max-width: var(--max-w); margin: 0 auto; }
.filosofia__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.filosofia__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 20px;
}
.filosofia__label::after { content: ''; width: 24px; height: 1px; background-color: var(--c-accent); opacity: 0.5; }
.filosofia__headline {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-wrap: balance;
}
.filosofia__intro {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-secondary);
  max-width: 420px;
  align-self: end;
}
.filosofia__intro p + p { margin-top: 16px; }
.filosofia__pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--c-rule);
}
.pillar-prose {
  padding: clamp(32px, 4vw, 52px) clamp(24px, 3.5vw, 44px);
  border-right: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
}
.pillar-prose:nth-child(2n) { border-right: none; }
.pillar-prose:nth-last-child(-n+2) { border-bottom: none; }
.pillar-prose__num {
  display: block;
  font-family: var(--ff-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 18px;
}
.pillar-prose__name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin-bottom: 14px;
  line-height: 1.2;
}
.pillar-prose__text { font-family: var(--ff-body); font-size: 12px; line-height: 1.85; color: var(--c-secondary); }

/* ── Producción (dark section) ── */
.produccion { background-color: var(--c-dark-bg); padding: var(--gap-section) 0 0; }
.produccion__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap-container); }
.produccion__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: end;
  margin-bottom: clamp(56px, 8vw, 80px);
}
.produccion__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-dark-sub);
  margin-bottom: 20px;
}
.produccion__label::after { content: ''; width: 24px; height: 1px; background-color: var(--c-accent); opacity: 0.5; }
.produccion__headline {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--c-dark-text);
  text-wrap: balance;
}
.produccion__body { font-family: var(--ff-body); font-size: 14px; line-height: 1.9; color: var(--c-dark-sub); max-width: 380px; align-self: end; }
.produccion__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--c-rule-dark);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.fact { padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px); border-right: 1px solid var(--c-rule-dark); }
.fact:last-child { border-right: none; }
.fact__value {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 56px);
  letter-spacing: -0.01em;
  color: var(--c-dark-text);
  line-height: 1;
  margin-bottom: 10px;
}
.fact__label { font-family: var(--ff-body); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--c-accent) 80%, transparent); }
/* Full-bleed panorama — breaks out of inner container */
.produccion__image { width: 100%; aspect-ratio: 16 / 6; overflow: hidden; }
.produccion__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 75%; }

/* ── La Fórmula ── */
/* Horizontal padding comes from .wrap inside — section only needs vertical padding */
.formula { padding: var(--gap-section) 0; border-bottom: 1px solid var(--c-rule); }
.formula__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(56px, 8vw, 112px);
  align-items: start;
}
.formula__label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 20px;
}
.formula__label::after { content: ''; width: 24px; height: 1px; background-color: var(--c-accent); opacity: 0.5; }
.formula__headline {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--c-text);
  margin-bottom: 24px;
  text-wrap: balance;
}
.formula__body { font-family: var(--ff-body); font-size: 13px; line-height: 1.9; color: var(--c-secondary); margin-bottom: 40px; }
.inci-list { list-style: none; border-top: 1px solid var(--c-rule); }
.inci-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-rule);
}
.inci-name { font-family: var(--ff-body); font-size: 13px; letter-spacing: 0.03em; color: var(--c-text); flex-shrink: 0; }
.inci-sci { font-family: var(--ff-body); font-size: 10px; font-style: italic; letter-spacing: 0.04em; color: var(--c-secondary); text-align: right; margin-left: auto; word-break: break-word; hyphens: auto; }
.formula__image { aspect-ratio: 3 / 4; overflow: hidden; }
.formula__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; transition: transform 0.9s var(--ease-quart); }
.formula__image:hover img { transform: scale(1.02); }

/* ── Cierre ── */
/* Horizontal padding comes from .wrap inside — section only needs vertical padding */
.cierre { padding: var(--gap-section) 0; }
.cierre__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}
.cierre__headline {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin-bottom: 32px;
  text-wrap: balance;
}
.cierre__body { font-family: var(--ff-body); font-size: 14px; line-height: 1.9; color: var(--c-secondary); margin-bottom: 44px; }
/* .btn-ghost inherits from base.css */
.cierre__image { }
.cierre__image img { width: 100%; height: auto; display: block; }

/* ── Desktop: one section, one screen (Design Principle #6) ── */
@media (min-width: 769px) {
  .historia,
  .filosofia,
  .produccion,
  .formula,
  .cierre {
    height: 100svh;
    overflow: hidden;
  }
  /* Scale vertical padding to viewport height */
  .historia   { padding: clamp(32px, 5svh, 128px) var(--gap-container); }
  .filosofia  { padding: clamp(32px, 5svh, 128px) var(--gap-container); }
  .produccion { padding: clamp(32px, 5svh, 128px) 0 0; }
  .formula    { padding: clamp(32px, 5svh, 128px) 0; }
  .cierre     { padding: clamp(32px, 5svh, 128px) 0; }
  /* Constrain images to available viewport height */
  .historia__inner { height: 100%; }
  .historia__photo { max-height: calc(100svh - clamp(64px, 10svh, 256px)); }
  .produccion__image { max-height: 22svh; }
  .produccion__facts { margin-bottom: clamp(12px, 1.5svh, 72px); }
  .produccion__header { margin-bottom: clamp(12px, 2svh, 80px); }
  .cierre__inner { height: 100%; }
  .cierre__image img { max-height: 40svh; width: 100%; object-fit: cover; }
  .filosofia__header { margin-bottom: clamp(16px, 2.5svh, 72px); }
  .filosofia__pillars { gap: 0; }
  .pillar-prose { padding: clamp(16px, 2.5svh, 52px) clamp(24px, 3.5vw, 44px); }
  /* Formula image constrained at all desktop widths */
  .formula__image { max-height: 35svh; }
  .formula__inner { align-items: center; }
}

/* ── Responsive ── */
@media (min-width: 1025px) {
  /* Constrain tall aspect-ratio images so sections fit in one viewport height */
  .historia__photo {
    aspect-ratio: unset;
    height: clamp(360px, 60svh, 640px);
  }
  .formula__image {
    aspect-ratio: unset;
    max-height: calc(100svh - 2 * var(--gap-section));
  }
}
@media (max-width: 1024px) {
  .historia__inner,
  .formula__inner,
  .cierre__inner { grid-template-columns: 1fr; gap: 48px; }
  .historia__photo { aspect-ratio: 16 / 9; }
  .formula__image { aspect-ratio: 16 / 9; }
  .filosofia__header { grid-template-columns: 1fr; gap: 24px; }
  .filosofia__intro { max-width: 100%; }
  .produccion__header { grid-template-columns: 1fr; gap: 24px; }
  .produccion__body { max-width: 100%; }
}
@media (max-width: 768px) {
  .nosotros-hero { height: auto; min-height: 100svh; }
  .historia,
  .filosofia,
  .produccion,
  .formula,
  .cierre { height: auto; overflow: visible; }
  .filosofia__pillars { grid-template-columns: 1fr; }
  .pillar-prose { border-right: none; }
  .pillar-prose:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-rule); }
  .pillar-prose:last-child { border-bottom: none; }
  .produccion__facts { grid-template-columns: 1fr; }
  .fact { border-right: none; border-bottom: 1px solid var(--c-rule-dark); }
  .fact:last-child { border-bottom: none; }
}
/* Hero always height: 100svh on desktop (Design Principle #6) */