/* Sam Skincare · Base reset + tipografía + componentes globales (rediseño Día 11) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "liga";
  text-wrap: pretty;
}

/* Headings · serif Fraunces */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--c-text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); letter-spacing: var(--ls-normal); }
h4 { font-size: var(--fs-md); letter-spacing: var(--ls-normal); font-weight: var(--fw-medium); }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
}

p { margin: 0; }

a {
  color: var(--c-accent-strong);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-accent); text-decoration: underline; }

img, svg { display: block; max-width: 100%; height: auto; }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; }

/* Form · base styling */
input, textarea, select {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-cream-100);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  min-height: 48px;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--c-accent);
  background: var(--c-cream-50);
  box-shadow: 0 0 0 4px rgba(216,107,107,.18);
}

/* Field con label arriba */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field > label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-mute);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Skip link · accesibilidad */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-charcoal-800);
  color: var(--c-cream-50);
  border-radius: var(--r-md);
  z-index: var(--z-toast);
}
.skip-link:focus { top: var(--sp-4); }

/* Container utility */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: var(--container-narrow); }
.container--base   { max-width: var(--container-base); }
.container--wide   { max-width: var(--container-wide); }
.container--max    { max-width: var(--container-max); }

@media (min-width: 768px) {
  .container { padding-inline: var(--sp-8); }
}

/* Section spacing */
.section {
  padding-block: var(--sp-16);
}
@media (min-width: 768px) {
  .section { padding-block: var(--sp-24); }
}
.section--tight { padding-block: var(--sp-10); }
.section--loose { padding-block: var(--sp-20); }
@media (min-width: 768px) {
  .section--loose { padding-block: var(--sp-32); }
}

/* Visually hidden */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  text-decoration: none;
  min-height: 48px;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--c-cta); outline-offset: 3px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn--primary {
  background: linear-gradient(135deg, var(--c-cta) 0%, var(--c-terra-300) 100%);
  color: var(--c-cream-50);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(201,123,99,.55);
  color: var(--c-cream-50);
}
.btn--primary:active { transform: translateY(0); }

.btn--secondary {
  background: var(--c-charcoal-800);
  color: var(--c-cream-50);
}
.btn--secondary:hover { background: var(--c-charcoal-900); color: var(--c-cream-50); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1.5px solid var(--c-charcoal-200);
}
.btn--ghost:hover { background: var(--c-cream-100); color: var(--c-text); }

.btn--whatsapp {
  background: #25D366;
  color: #ffffff;
}
.btn--whatsapp:hover { background: #1faa54; color: #ffffff; transform: translateY(-1px); }

.btn--lg {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-md);
  min-height: 56px;
}
.btn--xl {
  padding: var(--sp-5) var(--sp-10);
  font-size: var(--fs-lg);
  min-height: 64px;
}
.btn--block { display: flex; width: 100%; }

/* Sheen sweep on primary CTAs */
.btn--shimmer {
  position: relative;
  overflow: hidden;
}
.btn--shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: translateX(-150%) skewX(-20deg);
  animation: sheen 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 80% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

/* ─── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
}
.card--elevated {
  border: 0;
  box-shadow: var(--shadow-md);
}
.card--glass {
  background: rgba(255,250,245,0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.5);
}

/* ─── PILLS ──────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  line-height: 1;
}
.pill--deal {
  background: linear-gradient(90deg, var(--c-gold-300), var(--c-rose-300), var(--c-gold-300));
  background-size: 200% 100%;
  color: var(--c-charcoal-800);
  animation: shimmer 4s linear infinite;
}
.pill--scarcity {
  background: var(--c-rose-50);
  color: var(--c-rose-700);
  position: relative;
  padding-left: 1.25rem;
}
.pill--scarcity::before {
  content: "";
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--c-rose-600);
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
}
.pill--sample {
  background: var(--c-cream-200);
  color: var(--c-charcoal-700);
  text-transform: uppercase;
}
.pill--guarantee {
  background: var(--c-success-bg);
  color: var(--c-sage-500);
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,90,90,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(216,90,90,0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideUp {
  from { transform: translateY(120%); }
  to   { transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* Reveal on scroll · IntersectionObserver target */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-page) var(--ease-out), transform var(--t-page) var(--ease-out);
}

/* ─── MEDIA SYSTEM ───────────────────────────────────────── */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--c-cream-100);
}
.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}