/* SENSIA Experiencia — Design Tokens (oficial brandbook)
   Tipografía: Archivo (Thin/Regular/Bold) — familia única
   Paleta:
     #FFC25F   mostaza/naranja  (acento cálido principal)
     #4FCBC0   turquesa         (acento fresco, vía tweak)
     #DDD8CB   beige natural
     #F4F2EE   papel
     #0E0E0E   tinta
*/

:root {
  /* Tinta */
  --sensia-black: #0E0E0E;
  --sensia-ink: #111111;
  --sensia-ink-soft: #2E2E2C;
  --sensia-stone: #6B6962;
  --sensia-stone-soft: #9A968D;

  /* Fondos brandbook */
  --sensia-paper: #F4F2EE;        /* fondo principal */
  --sensia-paper-soft: #EAE6DC;   /* tarjetas */
  --sensia-beige: #DDD8CB;        /* beige brandbook */
  --sensia-beige-deep: #C5BEAB;
  --sensia-cream: #FAF8F2;
  --sensia-pure: #FFFFFF;

  /* Acentos brandbook */
  --sensia-mustard: #FFC25F;        /* mostaza brandbook */
  --sensia-mustard-soft: #FFD89B;
  --sensia-mustard-deep: #E29A2A;
  --sensia-turquoise: #4FCBC0;      /* turquesa brandbook */
  --sensia-turquoise-soft: #B8E8E2;
  --sensia-turquoise-deep: #2C9C92;

  /* Acento activo (tweakable) */
  --sensia-accent: var(--sensia-mustard);
  --sensia-accent-soft: var(--sensia-mustard-soft);
  --sensia-accent-deep: var(--sensia-mustard-deep);
  --sensia-accent-ink: #3D2A05;

  /* Tipografía — Archivo única familia, distintos pesos como en brandbook */
  --font-display: "Archivo", system-ui, sans-serif;       /* titulares (peso 200/300) */
  --font-sans:    "Archivo", system-ui, sans-serif;        /* cuerpo (400) */
  --font-narrow:  "Archivo Narrow", "Archivo", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radios — la marca trabaja en esquinas vivas */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 999px;
}

/* Acento turquesa (tweak) */
.accent-turquoise {
  --sensia-accent: var(--sensia-turquoise);
  --sensia-accent-soft: var(--sensia-turquoise-soft);
  --sensia-accent-deep: var(--sensia-turquoise-deep);
  --sensia-accent-ink: #093834;
}

/* Tipo base */
.sensia-frame, .sensia-frame * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
.sensia-frame {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--sensia-ink);
  background: var(--sensia-paper);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* Display: Archivo Thin/ExtraLight para una sensación de elegancia geométrica
   como en el brandbook (la "Aa" Thin enorme).
*/
.sx-display {
  font-family: var(--font-display);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--sensia-ink);
}
.sx-display em,
.sx-display i {
  font-style: normal;
  font-weight: 400;
  font-family: var(--font-narrow);
}

/* Eyebrow / kicker — muy abierto, mayúsculas, finísimo (Archivo 400 condensed-feel) */
.sx-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sensia-stone);
}

/* Botones — geométricos, sin radio, peso medio en mayúsculas espaciadas */
.sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
  white-space: nowrap;
}
.sx-btn-primary {
  background: var(--sensia-ink);
  color: var(--sensia-paper);
}
.sx-btn-primary:hover {
  background: var(--sensia-accent);
  color: var(--sensia-accent-ink);
}
.sx-btn-ghost {
  background: transparent;
  color: var(--sensia-ink);
  border-color: var(--sensia-ink);
}
.sx-btn-ghost:hover {
  background: var(--sensia-ink);
  color: var(--sensia-paper);
}
.sx-btn-accent {
  background: var(--sensia-accent);
  color: var(--sensia-accent-ink);
}
.sx-btn-accent:hover {
  background: var(--sensia-accent-deep);
  color: white;
}

/* Reglas / dividers con label centrado */
.sx-hairline {
  height: 1px;
  background: currentColor;
  opacity: 0.15;
}
.sx-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sensia-stone);
}
.sx-rule::before,
.sx-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

/* Form — minimal, hairline */
.sx-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sensia-ink);
  padding: 12px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--sensia-ink);
  outline: none;
}
.sx-input::placeholder {
  color: var(--sensia-stone-soft);
  letter-spacing: 0.04em;
}
.sx-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sensia-stone);
  display: block;
  margin-bottom: 8px;
}

/* Photos: el placeholder se mantiene como red de seguridad */
.sx-photo {
  position: relative;
  background: var(--sensia-beige);
  overflow: hidden;
  display: block;
}
.sx-photo[data-mood="warm"]   { background: linear-gradient(135deg, #C7A578, #6B4A2A); }
.sx-photo[data-mood="herbs"]  { background: linear-gradient(135deg, #5A6B3A, #2C3818); }
.sx-photo[data-mood="wine"]   { background: linear-gradient(135deg, #6B2730, #2A0B10); }
.sx-photo[data-mood="cheese"] { background: linear-gradient(135deg, #E8D9A8, #B89255); }
.sx-photo[data-mood="sea"]    { background: linear-gradient(135deg, #2A4A52, #0E1E22); }
.sx-photo[data-mood="bread"]  { background: linear-gradient(135deg, #C99664, #6B3F1E); }
.sx-photo[data-mood="oil"]    { background: linear-gradient(135deg, #B5A14A, #5C4F18); }
.sx-photo[data-mood="market"] { background: linear-gradient(135deg, #8B6B45, #3A2818); }
.sx-photo[data-mood="table"]  { background: linear-gradient(135deg, #9C7C5A, #4A3528); }
.sx-photo::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 12px 12px auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* ============================================================
   ADAPTABILIDAD — pantallas grandes y móvil
   ============================================================ */

/* Container central — pantallas ultra anchas: secciones a sangre,
   contenido legible centrado por bloques internos. */
.sensia-frame {
  margin: 0 auto;
}
.sx-contain {
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1900px) {
  .sx-padded-section > *,
  .sx-hero-left {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Header layout */
.sx-header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 48px;
  gap: 32px;
}
.sx-nav-left {
  display: flex;
  gap: 32px;
  align-items: center;
}
.sx-nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.sx-logo-link {
  display: block;
  line-height: 0;
}
.sx-burger {
  display: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.sx-burger span {
  display: block;
  height: 1.5px;
  background: var(--sensia-ink);
  width: 100%;
}
.sx-mobile-drawer {
  display: none;
  flex-direction: column;
  background: var(--sensia-paper);
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 24px 32px 32px;
  gap: 4px;
}
.sx-mobile-drawer a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sensia-ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* === Tablet ≤ 1024px === */
@media (max-width: 1024px) {
  .sx-nav-hide-md { display: none !important; }
  .sx-promo-mid { display: none; }
  .sx-header-row { padding: 16px 24px; gap: 16px; }
  .sx-nav-left { gap: 22px; }
  .sx-nav-right { gap: 18px; }
}

/* === Móvil ≤ 768px === */
@media (max-width: 768px) {
  .sx-burger { display: flex !important; }
  .sx-nav-left { display: none !important; }
  .sx-nav-hide-sm { display: none !important; }
  .sx-mobile-drawer { display: flex !important; }
  .sx-header-row {
    grid-template-columns: auto 1fr auto !important;
    padding: 14px 20px !important;
    gap: 12px !important;
  }
  .sx-logo-link { justify-self: center; }
  .sx-logo-link img { height: 30px !important; }
  .sx-nav-right { gap: 14px !important; flex-wrap: nowrap !important; }
  .sx-promo-strip {
    font-size: 10px !important;
    padding: 8px 16px !important;
    gap: 12px !important;
  }

  /* Tipografía display más pequeña */
  .sx-display { font-size: clamp(36px, 9vw, 56px) !important; }
  /* Botones que se apilan */
  .sx-btn { padding: 14px 22px; font-size: 10px; }

  /* Layouts comunes */
  .sx-grid-2-mobile,
  .sx-grid-3-mobile {
    grid-template-columns: 1fr !important;
  }
  .sx-grid-stack-mobile {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .sx-padded-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .sx-pad-y-lg {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* === Móvil ≤ 480px ajustes finos === */
@media (max-width: 480px) {
  .sx-header-row { padding: 12px 16px; }
  .sx-promo-strip {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 9.5px;
  }
}

/* === Pantalla baja (portátiles 13-14") — comprimir hero === */
@media (max-height: 900px) and (min-width: 769px) {
  .sx-hero-grid {
    min-height: calc(100vh - 96px) !important;
  }
  .sx-hero-left {
    padding: 28px 56px 24px !important;
  }
  .sx-hero-left .sx-display {
    font-size: clamp(52px, 6vw, 76px) !important;
    margin-bottom: 18px !important;
    line-height: 0.98 !important;
  }
  /* Comprime promo strip + newsletter band en portátil */
  .sx-promo-strip { padding: 8px 24px !important; font-size: 10px !important; }
  .sx-newsletter-band { padding: 10px 24px !important; }
}

/* === Pantalla muy baja (≤720px alto) — más agresivo === */
@media (max-height: 720px) and (min-width: 769px) {
  .sx-hero-grid {
    min-height: calc(100vh - 88px) !important;
  }
  .sx-hero-left {
    padding: 18px 48px 16px !important;
  }
  .sx-hero-left .sx-display {
    font-size: clamp(44px, 5vw, 60px) !important;
    margin-bottom: 14px !important;
  }
  .sx-hero-left p { font-size: 14px !important; margin-bottom: 22px !important; }
  .sx-promo-strip { display: none !important; }
}