/* =========================================================
   Winter Confort · estilos compartidos de las páginas de la propuesta
   (logo, tienda, redes, UGC y campañas)
   ========================================================= */

:root {
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --muted: #6b6b6b;
  --bone: #fafaf8;
  --stone: #efeeeb;
  --sky: #cadceb;
  --sky-soft: #e4edf5;
  --sky-deep: #2e3a45;
  --line: rgba(20, 20, 20, .12);
  --white: #fff;

  --sans: "Jost", system-ui, sans-serif;
  --script: "Mrs Saint Delafield", "Brush Script MT", cursive;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-weight: 300; color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
h3 { font-size: .9rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
h1 em, h2 em { font-family: var(--script); font-style: normal; font-weight: 400; font-size: 1.5em; line-height: .9; color: var(--sky-deep); }
p { margin: 0 0 1em; }

.firma { font-family: var(--script); font-weight: 400; line-height: 1; color: var(--ink); }
.eyebrow {
  margin: 0 0 12px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sky-deep);
}
.label { font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 1.08rem; max-width: 38em; }
.note { font-size: .82rem; color: var(--muted); }

.wrap { width: min(1160px, 100% - 48px); margin: 0 auto; }
.section { padding: 90px 0; }
.section--stone { background: var(--stone); }
.section--sky { background: var(--sky); }
.section--dark { background: var(--ink); color: rgba(255, 255, 255, .72); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark h2 em { color: var(--sky); }
.section--dark .eyebrow { color: var(--sky); }

.head { max-width: 680px; margin-bottom: 44px; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head__lead { font-size: 1.02rem; }

/* ---------- Hero de cada página ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  min-height: 92vh;
}
.hero__copy { align-self: center; padding: 80px 56px 80px max(24px, calc((100vw - 1160px) / 2)); }
.hero__art { display: grid; place-items: center; background: var(--sky); padding: 48px; position: relative; overflow: hidden; }
.hero__art img { width: min(520px, 100%); transform: rotate(-9deg); filter: drop-shadow(0 34px 30px rgba(20, 20, 20, .22)); }
.hero__art .firma { position: absolute; left: 32px; bottom: 18px; font-size: 4.6rem; color: rgba(20, 20, 20, .14); }
.hero__art--photo { padding: 0; }
.hero__art--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; filter: none; }
.hero__art--photo .firma { color: rgba(255, 255, 255, .75); z-index: 1; }

/* Foto de estilo de vida con pie */
.life { position: relative; margin: 0; overflow: hidden; }
.life img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.life:hover img { transform: scale(1.04); }
.life figcaption { position: absolute; left: 18px; bottom: 16px; padding: 6px 14px; background: rgba(255, 255, 255, .92); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }

.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 1px; background: var(--ink); }

/* ---------- Rejillas y tarjetas ---------- */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 30px;
  background: var(--white);
  border: 1px solid var(--line);
}
.box p { margin: 0; }
.box--stone { background: var(--stone); border-color: var(--stone); }
.box--sky { background: var(--sky); border-color: var(--sky); color: var(--sky-deep); }
.box--dark { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .7); }
.box--dark h3 { color: var(--white); }
.box__n { font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--ink); }
.box--dark .box__n { color: var(--sky); }
.box ul { margin: 6px 0 0; padding-left: 18px; font-size: .92rem; }

.shoe { display: grid; place-items: center; background: var(--stone); padding: 26px; aspect-ratio: 4 / 3; }
.shoe img { width: 100%; height: 100%; object-fit: contain; }
.shoe--sky { background: var(--sky); }
.shoe--dark { background: var(--ink); }

/* ---------- Pasos ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.steps li { padding: 26px 22px 0 0; }
.steps span { font-size: .78rem; letter-spacing: .2em; color: var(--muted); }
.steps h3 { margin: 10px 0 8px; }
.steps p { font-size: .92rem; margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.chips span { padding: 9px 18px; border: 1px solid var(--line); border-radius: 40px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--white); }

/* ---------- Tablas ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--white); }
.table th { text-align: left; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding: 16px 20px; border-bottom: 1px solid var(--ink); }
.table td { padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--ink); }
.table tr:nth-child(even) td { background: var(--bone); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--ink);
  color: var(--white);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: .3s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }

/* ---------- Aparición al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 64px 24px 40px; }
  .hero__art { min-height: 340px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .section { padding: 64px 0; }
}
@media (max-width: 600px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .wrap { width: calc(100% - 32px); }
  .table { font-size: .85rem; }
  .table th, .table td { padding: 12px 10px; }
}