/* ============================================
   CUPRÉ — Tokens de Diseño v1.0
   Skincare de Péptido de Cobre · Colombia
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@200;300;400;500&display=swap');

:root {

  /* ── COLOR: PRIMARIOS ───────────────────── */
  --cupre-cobre:      #C47A3A;
  --cupre-ambar:      #E8A84C;
  --cupre-noche:      #1A0E08;
  --cupre-marfil:     #FBF5EE;

  /* ── COLOR: SECUNDARIOS ─────────────────── */
  --cupre-terracota:  #B5682A;
  --cupre-arena:      #F0D9BB;
  --cupre-nude:       #E8C9B5;
  --cupre-gris:       #9C8B7A;
  --cupre-obsidiana:  #2A1408;

  /* ── COLOR: UTILIDADES ──────────────────── */
  --cupre-cobre-10:   rgba(196, 122, 58, 0.10);
  --cupre-cobre-20:   rgba(196, 122, 58, 0.20);
  --cupre-cobre-40:   rgba(196, 122, 58, 0.40);
  --cupre-ambar-10:   rgba(232, 168, 76, 0.10);
  --cupre-noche-80:   rgba(26, 14, 8, 0.80);

  /* ── DEGRADADOS ─────────────────────────── */
  --cupre-degradado-cobre:   linear-gradient(135deg, #E8A84C 0%, #C47A3A 55%, #8B4A1A 100%);
  --cupre-degradado-oscuro:  linear-gradient(135deg, #1A0E08 0%, #3D1F0D 100%);
  --cupre-degradado-calido:  linear-gradient(135deg, #FBF5EE 0%, #F0D9BB 100%);
  --cupre-degradado-brillo:  radial-gradient(ellipse at center, rgba(232,168,76,0.15) 0%, transparent 70%);

  /* ── TIPOGRAFÍA: FAMILIAS ───────────────── */
  --fuente-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --fuente-cuerpo:  'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;

  /* ── TIPOGRAFÍA: ESCALA ─────────────────── */
  --texto-hero:    clamp(48px, 8vw,  80px);
  --texto-h1:      clamp(36px, 5vw,  56px);
  --texto-h2:      32px;
  --texto-h3:      24px;
  --texto-lead:    18px;
  --texto-cuerpo:  15px;
  --texto-small:   13px;
  --texto-label:   10px;
  --texto-micro:   9px;

  /* ── TIPOGRAFÍA: PESO ───────────────────── */
  --peso-delgado:  200;
  --peso-light:    300;
  --peso-regular:  400;
  --peso-medio:    500;

  /* ── TIPOGRAFÍA: TRACKING ───────────────── */
  --tracking-ajustado:   -0.02em;
  --tracking-normal:      0em;
  --tracking-amplio:      0.08em;
  --tracking-mas-amplio:  0.20em;
  --tracking-maximo:      0.35em;

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

  /* ── RADIO DE BORDE ─────────────────────── */
  --radio-xs:    2px;    /* Botones, inputs — editorial */
  --radio-sm:    4px;    /* Tarjetas, badges */
  --radio-md:    8px;    /* Modales, desplegables */
  --radio-lg:   16px;    /* Contenedores grandes */
  --radio-full:  9999px; /* Pills */

  /* ── SOMBRAS ────────────────────────────── */
  --sombra-sm:     0 2px 8px rgba(26, 14, 8, 0.08);
  --sombra-md:     0 8px 24px rgba(26, 14, 8, 0.12);
  --sombra-lg:     0 16px 48px rgba(26, 14, 8, 0.16);
  --sombra-cobre:  0 8px 32px rgba(196, 122, 58, 0.18);
  --sombra-brillo: 0 0 0 3px rgba(196, 122, 58, 0.20);

  /* ── LAYOUT ─────────────────────────────── */
  --contenedor-max:      1200px;
  --contenedor-angosto:   760px;
  --contenedor-texto:     640px;
  --columnas-grid:         12;
  --gap-grid:              24px;

  /* ── TRANSICIONES ───────────────────────── */
  --transicion-rapida:  150ms ease;
  --transicion-base:    250ms ease;
  --transicion-lenta:   400ms ease;
  --transicion-marca:   350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Z-INDEX ────────────────────────────── */
  --z-base:     0;
  --z-elevado:  10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
}


/* ============================================
   ESTILOS BASE
   ============================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-cuerpo);
  font-weight: var(--peso-light);
  color: var(--cupre-obsidiana);
  background-color: var(--cupre-marfil);
  line-height: 1.7;
}


/* ============================================
   CLASES TIPOGRÁFICAS
   ============================================ */

.cupre-hero {
  font-family: var(--fuente-display);
  font-size: var(--texto-hero);
  font-weight: var(--peso-regular);
  line-height: 1.05;
  letter-spacing: var(--tracking-ajustado);
  font-style: italic;
}

.cupre-titulo-1 {
  font-family: var(--fuente-display);
  font-size: var(--texto-h1);
  font-weight: var(--peso-regular);
  line-height: 1.1;
  letter-spacing: var(--tracking-amplio);
}

.cupre-titulo-2 {
  font-family: var(--fuente-display);
  font-size: var(--texto-h2);
  font-weight: var(--peso-light);
  line-height: 1.2;
  letter-spacing: var(--tracking-amplio);
}

.cupre-titulo-3 {
  font-family: var(--fuente-display);
  font-size: var(--texto-h3);
  font-weight: var(--peso-regular);
  line-height: 1.3;
}

.cupre-lead {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-lead);
  font-weight: var(--peso-light);
  line-height: 1.65;
}

.cupre-cuerpo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-cuerpo);
  font-weight: var(--peso-light);
  line-height: 1.7;
}

.cupre-etiqueta {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-label);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-maximo);
  text-transform: uppercase;
}

.cupre-caption {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-small);
  font-weight: var(--peso-light);
  color: var(--cupre-gris);
  line-height: 1.5;
}


/* ============================================
   BOTONES
   ============================================ */

.boton-cupre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  padding: 14px 32px;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-label);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-maximo);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radio-xs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transicion-marca);
  white-space: nowrap;
}

/* Primario */
.boton-cupre-primario {
  background-color: var(--cupre-cobre);
  color: var(--cupre-marfil);
  border-color: var(--cupre-cobre);
}
.boton-cupre-primario:hover {
  background-color: var(--cupre-terracota);
  border-color: var(--cupre-terracota);
  box-shadow: var(--sombra-cobre);
  transform: translateY(-1px);
}

/* Secundario */
.boton-cupre-secundario {
  background-color: transparent;
  color: var(--cupre-cobre);
  border-color: var(--cupre-cobre);
}
.boton-cupre-secundario:hover {
  background-color: var(--cupre-cobre);
  color: var(--cupre-marfil);
}

/* Ghost (sobre fondos oscuros) */
.boton-cupre-ghost {
  background-color: transparent;
  color: var(--cupre-ambar);
  border-color: rgba(232, 168, 76, 0.45);
}
.boton-cupre-ghost:hover {
  border-color: var(--cupre-ambar);
  box-shadow: var(--sombra-brillo);
}


/* ============================================
   TARJETA DE PRODUCTO
   ============================================ */

.cupre-tarjeta {
  background-color: var(--cupre-marfil);
  border: 1px solid var(--cupre-cobre-10);
  border-radius: var(--radio-sm);
  overflow: hidden;
  transition: all var(--transicion-marca);
}

.cupre-tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-cobre);
  border-color: var(--cupre-cobre-20);
}

.cupre-tarjeta__imagen {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background-color: var(--cupre-arena);
}

.cupre-tarjeta__cuerpo {
  padding: var(--espacio-5) var(--espacio-5) var(--espacio-6);
}

.cupre-tarjeta__categoria {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-micro);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-maximo);
  text-transform: uppercase;
  color: var(--cupre-gris);
  margin-bottom: var(--espacio-2);
}

.cupre-tarjeta__nombre {
  font-family: var(--fuente-display);
  font-size: 22px;
  font-weight: var(--peso-regular);
  color: var(--cupre-obsidiana);
  line-height: 1.2;
  margin-bottom: var(--espacio-2);
}

.cupre-tarjeta__descripcion {
  font-size: var(--texto-small);
  color: var(--cupre-gris);
  margin-bottom: var(--espacio-5);
  line-height: 1.6;
}

.cupre-tarjeta__precio {
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
  font-weight: var(--peso-regular);
  color: var(--cupre-cobre);
}


/* ============================================
   CAMPOS DE FORMULARIO
   ============================================ */

.cupre-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-cuerpo);
  font-weight: var(--peso-light);
  color: var(--cupre-obsidiana);
  background-color: transparent;
  border: 1px solid rgba(196, 122, 58, 0.30);
  border-radius: var(--radio-xs);
  outline: none;
  transition: border-color var(--transicion-base);
}

.cupre-input::placeholder {
  color: var(--cupre-gris);
}

.cupre-input:focus {
  border-color: var(--cupre-cobre);
  box-shadow: 0 0 0 2px var(--cupre-cobre-10);
}

.cupre-etiqueta-campo {
  display: block;
  font-size: var(--texto-micro);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-maximo);
  text-transform: uppercase;
  color: var(--cupre-obsidiana);
  margin-bottom: var(--espacio-2);
}


/* ============================================
   BADGE / ETIQUETA
   ============================================ */

.cupre-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: var(--texto-micro);
  font-weight: var(--peso-regular);
  letter-spacing: var(--tracking-mas-amplio);
  text-transform: uppercase;
  border-radius: var(--radio-full);
  border: 1px solid;
}

.cupre-badge--cobre {
  color: var(--cupre-cobre);
  border-color: var(--cupre-cobre-40);
  background-color: var(--cupre-cobre-10);
}

.cupre-badge--oscuro {
  color: var(--cupre-ambar);
  border-color: rgba(232, 168, 76, 0.30);
  background-color: rgba(232, 168, 76, 0.08);
}


/* ============================================
   LAYOUT DE SECCIONES
   ============================================ */

.cupre-seccion {
  width: 100%;
  padding: var(--espacio-9) var(--espacio-6);
}

.cupre-seccion--oscura {
  background: var(--cupre-degradado-oscuro);
  color: var(--cupre-marfil);
}

.cupre-seccion--calida {
  background: var(--cupre-degradado-calido);
  color: var(--cupre-obsidiana);
}

.cupre-contenedor {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  width: 100%;
}

.cupre-contenedor--angosto {
  max-width: var(--contenedor-angosto);
  margin: 0 auto;
}

/* Grilla */
.cupre-grilla {
  display: grid;
  grid-template-columns: repeat(var(--columnas-grid), 1fr);
  gap: var(--gap-grid);
}

.cupre-grilla--productos {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espacio-6);
}


/* ============================================
   ELEMENTOS DECORATIVOS
   ============================================ */

/* Línea divisoria de cobre */
.cupre-divisor {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cupre-cobre), transparent);
  border: none;
  margin: var(--espacio-6) 0;
}

/* Borde izquierdo editorial */
.cupre-acento-izquierdo {
  border-left: 2px solid var(--cupre-cobre);
  padding-left: var(--espacio-5);
}

/* Superíndice Cu (elemento) */
.cupre-elemento {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-mas-amplio);
  color: var(--cupre-cobre);
  vertical-align: super;
}