/* ============================================================
   ESCAPARATE — Design tokens · v1.0 · Identidad «Mar adentro»
   Fuente de verdad: 02-MANUAL-DE-MARCA.md
   Uso: copiar este archivo tal cual al proyecto (styles base)
   ============================================================ */

:root {
  /* ---- Color ------------------------------------------------ */
  --esc-fondo:         #FBFAF7;  /* Blanco roto (fondo general)    */
  --esc-superficie:    #FFFFFF;  /* Espuma (tarjetas, paneles)     */
  --esc-tinta:         #101B26;  /* Tinta de mar — texto           */
  --esc-gris:          #5E6A72;  /* Texto secundario / metadatos   */
  --esc-perfil:        #DFE3DE;  /* Bruma — bordes 1px, divisores  */
  --esc-mar:           #16324F;  /* Azul mar — titulares grandes y bloques oscuros */
  --esc-arena:         #C7A87A;  /* Arena dorada — detalles, NUNCA texto pequeño   */
  --esc-arena-quemada: #8F7247;  /* Acento apto para texto >=16px  */

  --esc-exito:         #2E7D4F;
  --esc-aviso:         #B7791F;
  --esc-error:         #B3402E;
  --esc-info:          #2B5D8C;

  --esc-degradado-mar: linear-gradient(120deg, #16324F 0%, #2C5578 60%, #C7A87A 100%);

  /* ---- Tipografía ------------------------------------------- */
  /* Autoalojadas en lib/fonts/ — JAMÁS desde CDN de Google      */
  --esc-font-display: "DM Serif Display", Georgia, serif;
  --esc-font-ui:      "Outfit", -apple-system, "Segoe UI", sans-serif;
  /* v1.1 · Wordmark en Marcellus (decisión de agosto 2026 — sincronizar
     con escaparate-marca/tokens.css cuando los dos socios lo firmen) */
  --esc-font-logo:    "Marcellus", "DM Serif Display", Georgia, serif;

  /* Escala ratio 1.25 (base 16px) */
  --esc-text-xs:   0.75rem;    /* 12 — etiquetas MAYÚSCULAS      */
  --esc-text-sm:   0.875rem;   /* 14 — fichas, metadatos         */
  --esc-text-base: 1rem;       /* 16 — cuerpo (mínimo en móvil)  */
  --esc-text-lg:   1.25rem;    /* 20 — destacados                */
  --esc-text-xl:   1.5625rem;  /* 25 — subtítulos                */
  --esc-text-2xl:  1.9375rem;  /* 31 — H3                        */
  --esc-text-3xl:  2.4375rem;  /* 39 — H2                        */
  --esc-text-4xl:  3.0625rem;  /* 49 — H1                        */
  --esc-text-5xl:  3.8125rem;  /* 61 — display                   */
  --esc-text-hero: clamp(3rem, 12vw, 9rem); /* wordmark gigante  */

  --esc-tracking-caps: 0.08em; /* etiquetas en mayúsculas        */
  --esc-tracking-display: 0em; /* DM Serif no se aprieta         */
  --esc-leading-tight: 1.08;
  --esc-leading-body: 1.6;

  /* ---- Espaciado (escala 4px) ------------------------------- */
  --esc-space-1:  4px;
  --esc-space-2:  8px;
  --esc-space-3:  12px;
  --esc-space-4:  16px;
  --esc-space-6:  24px;
  --esc-space-8:  32px;
  --esc-space-12: 48px;
  --esc-space-16: 64px;
  --esc-space-24: 96px;

  /* ---- Radios ------------------------------------------------ */
  --esc-radius-sm:   8px;    /* tarjetas          */
  --esc-radius-md:   12px;   /* paneles, overlays */
  --esc-radius-pill: 999px;  /* dock, chips       */

  /* ---- Sombra (fría y suave, luz de costa) ------------------- */
  --esc-sombra-sm: 0 2px 10px rgba(16, 27, 38, 0.05);
  --esc-sombra-md: 0 8px 30px rgba(16, 27, 38, 0.08);
  --esc-sombra-lg: 0 20px 60px rgba(16, 27, 38, 0.12);

  /* ---- Movimiento -------------------------------------------- */
  --esc-ease:      cubic-bezier(0.22, 1, 0.36, 1); /* salida suave */
  --esc-dur-corta: 200ms;
  --esc-dur-media: 450ms;
  --esc-dur-larga: 900ms;
}

/* ---- Bases recomendadas -------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--esc-fondo);
  color: var(--esc-tinta);
  font-family: var(--esc-font-ui);
  font-size: var(--esc-text-base);
  line-height: var(--esc-leading-body);
}

h1, h2, h3, .display {
  font-family: var(--esc-font-display);
  line-height: var(--esc-leading-tight);
  letter-spacing: var(--esc-tracking-display);
  font-weight: 400;                 /* DM Serif solo tiene 400: la elegancia es el tamaño */
  color: var(--esc-mar);            /* titulares en Azul mar */
}

.etiqueta {           /* SECTOR — TIPO — AÑO */
  font-size: var(--esc-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--esc-tracking-caps);
  color: var(--esc-gris);
  font-variant-numeric: tabular-nums;
}

.cta {                /* Botón principal: Tinta de mar, texto blanco */
  background: var(--esc-tinta);
  color: #FFFFFF;
  border-radius: var(--esc-radius-pill);
  padding: var(--esc-space-3) var(--esc-space-6);
  transition: transform var(--esc-dur-corta) var(--esc-ease),
              box-shadow var(--esc-dur-corta) var(--esc-ease);
}
.cta:hover { transform: translateY(-2px); box-shadow: var(--esc-sombra-md); }

.subrayado-arena {    /* Único uso libre de la arena */
  background-image: linear-gradient(transparent 62%, rgba(199, 168, 122, 0.38) 62%);
}

.horizonte {          /* La línea del logo: 1px que se prolonga */
  display: inline-block;
  height: 0;
  border-top: 1px solid var(--esc-tinta);
  vertical-align: 0.34em;
}
.horizonte-punto {
  display: inline-block;
  width: 0.14em; height: 0.14em;
  border-radius: 50%;
  background: var(--esc-arena);
  vertical-align: 0.30em;
}

/* Accesibilidad: la arena clara NUNCA como color de texto pequeño.
   Para texto en acento usar --esc-arena-quemada y tamaño >= 16px.
   El Azul mar sobre blancos pasa AA/AAA en todos los tamaños. */