@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
  --crema:        #F7F0E1;
  --azucar:       #FFFDF7;
  --mantequilla:  #E8B04B;
  --caramelo:     #B06A2C;
  --caramelo-osc: #8A4F1E;
  --cacao:        #3A2417;
  --cacao-suave:  #5C4536;
  --pistache:     #698B32;
  --pistache-suave: rgba(105,139,50,.13);
  --linea:        rgba(58,36,23,.14);
  --display:      "Fraunces", Georgia, serif;
  --wordmark:     "Cormorant Garamond", Georgia, serif;
  --body:         "Hanken Grotesk", system-ui, sans-serif;
  /* BÁSICO (submarca salada) — navy de su logo real */
  --basico:       #1E2A38;
  --basico-osc:   #101820;
  --basico-soft:  #5B6B7A;
  --wordmark-bc:  "Poppins", "Hanken Grotesk", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body); background: var(--crema); color: var(--cacao);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }

.eyebrow {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 600; color: var(--caramelo-osc); display: block;
}

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: absolute; left: .5rem; top: -3.5rem; z-index: 1000;
  background: var(--cacao); color: var(--crema);
  padding: .6rem 1.1rem; border-radius: 8px; font-weight: 600; font-size: .9rem;
  transition: top .2s ease;
}
.skip-link:focus { top: .5rem; }

.layers { display: flex; flex-direction: column; gap: 3px; width: 46px; }
.layers span { height: 3px; border-radius: 2px; background: var(--mantequilla); opacity: .85; }
.layers span:nth-child(even) { background: var(--caramelo); opacity: .6; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer; border: none;
  transition: transform .16s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
  font-family: var(--body);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--cacao); color: var(--crema); }
.btn-primary:hover { background: var(--caramelo-osc); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(58,36,23,.6); }
.btn-secondary { background: transparent; color: var(--cacao); border: 1px solid var(--linea); }
.btn-secondary:hover { border-color: var(--cacao); transform: translateY(-2px); }
.btn-caramel { background: var(--caramelo); color: var(--crema); }
.btn-caramel:hover { background: var(--caramelo-osc); transform: translateY(-2px); }
.btn-sm { padding: .5rem 1rem; font-size: .86rem; }

html:not([lang="en"]) .lang-en { display: none !important; }
html[lang="en"] .lang-es { display: none !important; }

/* Lang toggle state — shows active language */
html[lang="es"] .lang-toggle .lt-en  { opacity: .38; font-weight: 400; }
html[lang="es"] .lang-toggle .lt-es  { font-weight: 700; color: var(--caramelo); }
html[lang="en"] .lang-toggle .lt-es  { opacity: .38; font-weight: 400; }
html[lang="en"] .lang-toggle .lt-en  { font-weight: 700; color: var(--caramelo); }
.lang-toggle .lt-sep { opacity: .3; font-weight: 400; }

:focus-visible { outline: 2.5px solid var(--caramelo); outline-offset: 3px; border-radius: 4px; }

/* ============================================================================
   REFINAMIENTOS DE DISEÑO (oficial) — fundación compartida
   Elevación cálida en capas + forma más generosa + curvas de movimiento.
   Usadas por site.css / store/style.css / admin/admin.css.
   ============================================================================ */
:root {
  /* Curvas de easing (los easings nativos son débiles) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Escala de forma */
  --e-r-sm: 12px;
  --e-r-md: 18px;
  --e-r-lg: 24px;

  /* Elevación en capas, cálida (rgba de --cacao / --caramelo-osc) */
  --e-shadow-sm:      0 1px 2px rgba(58,36,23,.05), 0 6px 16px -6px rgba(58,36,23,.13);
  --e-shadow-md:      0 2px 6px rgba(58,36,23,.05), 0 16px 32px -12px rgba(58,36,23,.2);
  --e-shadow-lg:      0 12px 24px -8px rgba(58,36,23,.12), 0 34px 64px -18px rgba(58,36,23,.32);
  --e-shadow-caramel: 0 12px 28px -10px rgba(138,79,30,.55);

  --e-hair:    rgba(58,36,23,.09);
  --e-ring:    0 0 0 3px rgba(176,106,44,.14);
  --e-inset:   inset 0 1px 2px rgba(58,36,23,.035);
  --e-surface: linear-gradient(180deg, var(--azucar), var(--crema));
}

/* Acabado tipográfico (no cambia tamaños, para no romper layouts) */
body { letter-spacing: -0.003em; }
h1, h2, h3 { font-optical-sizing: auto; }
h1, h2 { letter-spacing: -.022em; text-wrap: balance; }
p, .lead { text-wrap: pretty; }

/* Feedback de presión en las variantes de .btn (los .btn-* de admin/store
   añaden su propio :active en su hoja porque no comparten la clase .btn) */
.btn-primary:active, .btn-secondary:active, .btn-caramel:active { transform: scale(.97); }

/* Keyframes compartidos */
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.97) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes added-pulse {
  0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); }
}

/* Reduced motion: quita movimiento, conserva fades suaves */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-primary:active, .btn-secondary:active, .btn-caramel:active { transform: none; }
}