/* ============================================================
   GISELLE CHARNEY · CREACIONES
   tokens.css — Sistema de diseño: color, tipografía, espacio,
   elevación, movimiento. Única fuente de verdad visual.
   ============================================================ */

:root {
  /* ---------- Color · Neutros cálidos (base lino) ---------- */
  --c-lino:        #F7F3EE;  /* fondo base, lino crudo            */
  --c-lino-2:      #F1EBE3;  /* superficie alterna                */
  --c-arena:       #E8DFD3;  /* superficie cálida / hover         */
  --c-nube:        #FFFFFF;  /* tarjetas, superficies elevadas    */
  --c-borde:       #E3D9CC;  /* bordes suaves                     */
  --c-borde-fuerte:#CDBFAD;

  /* ---------- Color · Tinta (texto) ---------- */
  --c-tinta:       #23201E;  /* negro cálido, titulares           */
  --c-tinta-80:    #3C3733;
  --c-humo:        #6E6660;  /* texto secundario                  */
  --c-humo-claro:  #94897F;  /* metadatos, placeholders           */

  /* ---------- Color · Acentos de marca ---------- */
  --c-laton:       #B98B4E;  /* metal firma: latón                */
  --c-laton-claro: #E7C99A;
  --c-laton-hondo: #8A6231;
  --c-rosa:        #C9A39B;  /* rosa ceniza — femenino sobrio     */
  --c-rosa-claro:  #EBD8D2;
  --c-malva:       #8E7580;  /* malva ahumado — profundidad       */
  --c-salvia:      #A3AB9A;  /* verde salvia — frescura botánica  */

  /* ---------- Color · Superficies oscuras ---------- */
  --c-noche:       #1C1A18;  /* hero, footer                      */
  --c-noche-2:     #262220;
  --c-noche-3:     #332D29;

  /* ---------- Color · Semántico ---------- */
  --c-exito:       #6E8A6B;
  --c-alerta:      #B4703C;
  --c-error:       #A75A52;

  /* ---------- Degradados metálicos ---------- */
  --g-laton: linear-gradient(135deg, #EBD3A6 0%, #C9A366 28%, #A8763B 55%, #E2C595 78%, #96682F 100%);
  --g-laton-suave: linear-gradient(135deg, #E7C99A 0%, #B98B4E 100%);
  --g-rosa: linear-gradient(135deg, #EBD8D2 0%, #C9A39B 100%);
  --g-noche: linear-gradient(170deg, #262220 0%, #1C1A18 60%, #16140F 100%);
  --g-velo: linear-gradient(180deg, rgba(28,26,24,0) 0%, rgba(28,26,24,.72) 70%, rgba(28,26,24,.92) 100%);

  /* ---------- Tipografía ---------- */
  --f-display: "Cormorant Garamond", "Didot", "Times New Roman", serif;
  --f-ui: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica fluida (clamp: móvil → escritorio)
     El suelo de --t-xs era 0.68rem: en el teléfono dejaba párrafos
     reales (los pies de "Lo que garantizamos", las ayudas de los
     formularios) en 10,9 px, por debajo de lo legible. Se sube a
     12 px, que es el mínimo razonable para texto secundario. */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.80rem);
  --t-sm:   clamp(0.82rem, 0.78rem + 0.14vw, 0.88rem);
  --t-base: clamp(0.94rem, 0.90rem + 0.18vw, 1.02rem);
  --t-md:   clamp(1.06rem, 1.00rem + 0.3vw,  1.20rem);
  --t-lg:   clamp(1.32rem, 1.18rem + 0.7vw,  1.72rem);
  --t-xl:   clamp(1.72rem, 1.42rem + 1.5vw,  2.60rem);
  --t-2xl:  clamp(2.30rem, 1.70rem + 3.0vw,  4.10rem);
  --t-3xl:  clamp(3.00rem, 1.90rem + 5.4vw,  6.40rem);

  --tracking-wide: 0.18em;
  --tracking-xwide: 0.34em;

  /* ---------- Espaciado (escala 4pt) ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 9rem;

  --seccion-y: clamp(3.5rem, 2rem + 6vw, 8rem);
  --pad-x: clamp(1.15rem, 0.6rem + 2.6vw, 4rem);
  --ancho-max: 1440px;
  --ancho-texto: 62ch;

  /* ---------- Radios ---------- */
  --r-xs: 2px;  --r-sm: 4px;  --r-md: 8px;
  --r-lg: 16px; --r-xl: 26px; --r-full: 999px;

  /* ---------- Elevación (sombras cálidas, nunca grises) ---------- */
  --sh-1: 0 1px 2px rgba(58,44,30,.05), 0 2px 6px rgba(58,44,30,.04);
  --sh-2: 0 2px 6px rgba(58,44,30,.06), 0 10px 24px rgba(58,44,30,.06);
  --sh-3: 0 4px 12px rgba(58,44,30,.08), 0 20px 48px rgba(58,44,30,.10);
  --sh-4: 0 10px 30px rgba(58,44,30,.12), 0 40px 90px rgba(58,44,30,.16);
  --sh-laton: 0 6px 24px rgba(185,139,78,.22);

  /* ---------- Movimiento ---------- */
  --e-suave: cubic-bezier(.4, 0, .2, 1);
  --e-salida: cubic-bezier(.32, .72, 0, 1);   /* deceleración editorial */
  --e-elastico: cubic-bezier(.34, 1.56, .64, 1);
  --d-rapido: .18s;
  --d-medio: .34s;
  --d-lento: .62s;
  --d-cine: 1.1s;

  /* ---------- Capas ---------- */
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 70;
  --z-overlay: 90;
  --z-drawer: 100;
  --z-modal: 110;
  --z-toast: 120;

  /* ---------- Layout ---------- */
  --h-anuncio: 38px;
  --h-header: 74px;
}

@media (max-width: 860px) {
  :root { --h-header: 62px; --h-anuncio: 34px; }
}

/* ============================================================
   Reset moderno
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 1rem);
}

body {
  min-height: 100dvh;
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.62;
  font-weight: 350;
  color: var(--c-tinta);
  background: var(--c-lino);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--c-laton);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--c-laton-claro); color: var(--c-tinta); }

/* Barra de scroll discreta y de marca */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--c-borde-fuerte) transparent; scrollbar-width: thin; }
}

/* Respeto por preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}