/* ==========================================================================
   Cota — Theme CSS
   ==========================================================================
   Source of truth visual derivado de `cota_brand.tokens.json`.
   Para usar en artifacts HTML, landing estática, mockups, theme-factory.

   Color V3 "Walnut & eléctrico" lockeado en sesión 2026-05-05.
   Last updated: 2026-05-05.
   Owner: Cota.

   Companion docs:
     - color.md (escala extendida, accesibilidad, aplicación por superficie)
     - typography.md (familias, escalas, pesos)
     - design_principles.md (4 principios visuales)
     - grid_layout.md (sistema de cuadrícula)

   Convenciones:
     - Variables usan prefijo `--cota-` para evitar colisión.
     - Naming sigue el JSON tokens 1:1 cuando es posible.
     - Comentarios en español; código en inglés estándar CSS.
   ========================================================================== */

:root {
  /* ----- Color: cream ------------------------------------------------------- */
  --cota-cream-50:        #FBF7EE;
  --cota-cream-100:       #F7F1E1;  /* base canónica — papel */
  --cota-cream-200:       #EFE6CF;

  /* ----- Color: cappuccino -------------------------------------------------- */
  --cota-cappuccino-300:  #E2D2B5;
  --cota-cappuccino-500:  #D8C5A5;  /* base canónica — fondo secundario */
  --cota-cappuccino-700:  #B8A480;

  /* ----- Color: walnut (tinta) --------------------------------------------- */
  --cota-walnut-100:      #5C4D3C;
  --cota-walnut-300:      #3F2E1F;
  --cota-walnut-500:      #2C1F13;  /* base canónica — body, headings, marca */
  --cota-walnut-700:      #1B130B;

  /* ----- Color: royal (señal primaria) ------------------------------------- */
  --cota-royal-300:       #3A5BB5;
  --cota-royal-500:       #0E2A6A;  /* base canónica — CTAs, links */
  --cota-royal-700:       #061638;

  /* ----- Color: electric (highlight, datos) -------------------------------- */
  --cota-electric-300:    #7AA9F0;
  --cota-electric-500:    #4181E8;  /* base canónica — datos, hover */
  --cota-electric-700:    #1E5DC0;

  /* ----- Color: stone (gris café) ------------------------------------------ */
  --cota-stone-200:       #C0B19A;
  --cota-stone-400:       #9C8A6F;
  --cota-stone-600:       #7C6B53;  /* base canónica — texto secundario */
  --cota-stone-800:       #574836;

  /* ----- Semantic — background --------------------------------------------- */
  --cota-bg-default:      var(--cota-cream-100);
  --cota-bg-secondary:    var(--cota-cappuccino-500);
  --cota-bg-muted:        var(--cota-cream-50);
  --cota-bg-inverse:      var(--cota-walnut-500);

  /* ----- Semantic — text --------------------------------------------------- */
  --cota-text-default:    var(--cota-walnut-500);
  --cota-text-secondary:  var(--cota-stone-600);
  --cota-text-muted:      var(--cota-stone-400);
  --cota-text-inverse:    var(--cota-cream-100);
  --cota-text-link:       var(--cota-royal-500);
  --cota-text-link-hover: var(--cota-royal-300);
  --cota-text-data:       var(--cota-electric-500);

  /* ----- Semantic — border ------------------------------------------------- */
  --cota-border-subtle:   var(--cota-cream-200);
  --cota-border-default:  var(--cota-stone-200);
  --cota-border-strong:   var(--cota-walnut-500);
  --cota-border-active:   var(--cota-royal-500);
  --cota-border-data:     var(--cota-electric-500);

  /* ----- Semantic — CTAs --------------------------------------------------- */
  --cota-cta-primary-bg:        var(--cota-royal-500);
  --cota-cta-primary-text:      var(--cota-cream-100);
  --cota-cta-primary-bg-hover:  var(--cota-royal-700);
  --cota-cta-secondary-bg:      transparent;
  --cota-cta-secondary-text:    var(--cota-royal-500);
  --cota-cta-secondary-hover:   var(--cota-royal-300);

  /* ----- Semantic — states ------------------------------------------------- */
  --cota-state-neutral:   var(--cota-walnut-500);
  --cota-state-emphasis:  var(--cota-royal-500);
  --cota-state-highlight: var(--cota-electric-500);
  --cota-state-disabled:  var(--cota-stone-400);
  --cota-state-warning:   var(--cota-walnut-700);
  --cota-state-error:     #A4453E; /* solo Excel — NO público */
  --cota-state-success:   var(--cota-electric-500);

  /* ----- Typography — families --------------------------------------------- */
  --cota-font-serif: Charter, "Iowan Old Style", "Apple Garamond", Palatino, serif;
  --cota-font-sans:  Inter, "Helvetica Neue", Arial, sans-serif;
  --cota-font-mono:  "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

  /* ----- Typography — weights ---------------------------------------------- */
  --cota-fw-regular:  400;
  --cota-fw-medium:   500;
  --cota-fw-semibold: 600;
  --cota-fw-bold:     700;

  /* ----- Typography — sizes (escala 1.2x ratio) ---------------------------- */
  --cota-fs-9:   9pt;     /* captions */
  --cota-fs-11:  11pt;    /* body print */
  --cota-fs-13:  13pt;    /* intro paragraphs */
  --cota-fs-16:  16pt;    /* H3 */
  --cota-fs-19:  19pt;    /* H2 */
  --cota-fs-23:  23pt;    /* H1 / hero subtítulo */
  --cota-fs-28:  28pt;    /* page title */
  --cota-fs-34:  34pt;    /* hero principal */

  /* Versiones rem para web (16px base) */
  --cota-fs-9-rem:  0.563rem;
  --cota-fs-11-rem: 0.6875rem;
  --cota-fs-13-rem: 0.8125rem;
  --cota-fs-16-rem: 1rem;
  --cota-fs-19-rem: 1.1875rem;
  --cota-fs-23-rem: 1.4375rem;
  --cota-fs-28-rem: 1.75rem;
  --cota-fs-34-rem: 2.125rem;

  /* ----- Typography — line height + tracking ------------------------------- */
  --cota-lh-body:    1.55;
  --cota-lh-heading: 1.2;
  --cota-lh-mono:    1.4;
  --cota-tr-body:    0;
  --cota-tr-heading: -0.005em;
  --cota-tr-mono:    0.005em;

  /* ----- Spacing (8px base rhythm) ----------------------------------------- */
  --cota-space-xs:  8px;
  --cota-space-sm:  16px;
  --cota-space-md:  24px;
  --cota-space-lg:  40px;
  --cota-space-xl:  64px;
  --cota-space-2xl: 96px;

  /* ----- Border radius ----------------------------------------------------- */
  --cota-radius-none: 0;
  --cota-radius-sm:   2px;
  --cota-radius-md:   4px;
  --cota-radius-lg:   8px;
  --cota-radius-pill: 999px;

  /* ----- Grid -------------------------------------------------------------- */
  --cota-grid-cols:           12;
  --cota-grid-gutter:         24px;
  --cota-grid-margin-mobile:  16px;
  --cota-grid-margin-desktop: 32px;
  --cota-container-max:       1200px;

  /* ----- Breakpoints (referenciables en JS, no en media queries CSS) ------ */
  --cota-bp-mobile:  640px;
  --cota-bp-tablet:  1024px;
  --cota-bp-large:   1400px;

  /* ----- Shadow (uso restringido) ----------------------------------------- */
  --cota-shadow-subtle: 0 1px 2px rgba(28, 19, 11, 0.04);
  --cota-shadow-card:   0 2px 8px rgba(28, 19, 11, 0.06);

  /* ----- Motion ------------------------------------------------------------ */
  --cota-duration-instant: 0ms;
  --cota-duration-quick:   120ms;
  --cota-duration-smooth:  240ms;
  --cota-easing-default:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ----- Watermark --------------------------------------------------------- */
  --cota-watermark-color:   var(--cota-stone-600);
  --cota-watermark-opacity: 0.15;
}

/* ==========================================================================
   Base reset (mínimo, sin agresividad)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--cota-bg-default);
  color: var(--cota-text-default);
  font-family: var(--cota-font-serif);
  font-size: var(--cota-fs-13-rem);
  line-height: var(--cota-lh-body);
  letter-spacing: var(--cota-tr-body);
}

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

/* ==========================================================================
   Headings
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--cota-font-sans);
  font-weight: var(--cota-fw-semibold);
  line-height: var(--cota-lh-heading);
  letter-spacing: var(--cota-tr-heading);
  color: var(--cota-text-default);
  margin: 0 0 var(--cota-space-md);
}

h1 { font-size: var(--cota-fs-28-rem); }
h2 { font-size: var(--cota-fs-23-rem); }
h3 { font-size: var(--cota-fs-19-rem); }
h4 { font-size: var(--cota-fs-16-rem); }

.cota-hero-title {
  font-family: var(--cota-font-sans);
  font-size: var(--cota-fs-34-rem);
  font-weight: var(--cota-fw-semibold);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cota-text-default);
  margin: 0;
}

.cota-hero-subtitle {
  font-family: var(--cota-font-serif);
  font-size: var(--cota-fs-23-rem);
  font-weight: var(--cota-fw-regular);
  line-height: 1.3;
  color: var(--cota-text-default);
  margin: 0;
}

/* ==========================================================================
   Text utilities
   ========================================================================== */
.cota-prose {
  font-family: var(--cota-font-serif);
  font-size: var(--cota-fs-13-rem);
  line-height: var(--cota-lh-body);
  max-width: 65ch;
}

.cota-prose p { margin: 0 0 var(--cota-space-md); }
.cota-prose strong { font-weight: var(--cota-fw-semibold); color: var(--cota-walnut-700); }
.cota-prose em { font-style: italic; }

.cota-text-meta {
  font-family: var(--cota-font-sans);
  font-size: var(--cota-fs-9-rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cota-text-secondary);
}

.cota-data {
  font-family: var(--cota-font-mono);
  font-size: var(--cota-fs-13-rem);
  line-height: var(--cota-lh-mono);
  letter-spacing: var(--cota-tr-mono);
  color: var(--cota-text-data);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
  color: var(--cota-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--cota-duration-quick) var(--cota-easing-default);
}

a:hover { color: var(--cota-text-link-hover); }
a:focus-visible {
  outline: 2px solid var(--cota-electric-500);
  outline-offset: 2px;
  border-radius: var(--cota-radius-sm);
}

/* ==========================================================================
   CTAs
   ========================================================================== */
.cota-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cota-space-xs);
  padding: 14px 28px;
  font-family: var(--cota-font-sans);
  font-size: 14px;
  font-weight: var(--cota-fw-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--cota-radius-md);
  border: 1px solid transparent;
  transition:
    background-color var(--cota-duration-quick) var(--cota-easing-default),
    color var(--cota-duration-quick) var(--cota-easing-default),
    border-color var(--cota-duration-quick) var(--cota-easing-default);
  cursor: pointer;
}

.cota-btn-primary {
  background-color: var(--cota-cta-primary-bg);
  color: var(--cota-cta-primary-text);
}

.cota-btn-primary:hover {
  background-color: var(--cota-cta-primary-bg-hover);
  color: var(--cota-cta-primary-text);
}

.cota-btn-secondary {
  background-color: transparent;
  color: var(--cota-cta-secondary-text);
  border-color: var(--cota-cta-secondary-text);
}

.cota-btn-secondary:hover {
  border-color: var(--cota-cta-secondary-hover);
  color: var(--cota-cta-secondary-hover);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.cota-container {
  width: 100%;
  max-width: var(--cota-container-max);
  margin: 0 auto;
  padding: 0 var(--cota-grid-margin-mobile);
}

@media (min-width: 1024px) {
  .cota-container { padding: 0 var(--cota-grid-margin-desktop); }
}

.cota-section {
  padding: var(--cota-space-2xl) 0;
}

.cota-section--secondary {
  background-color: var(--cota-bg-secondary);
}

.cota-section--inverse {
  background-color: var(--cota-bg-inverse);
  color: var(--cota-text-inverse);
}

.cota-section--inverse h1,
.cota-section--inverse h2,
.cota-section--inverse h3 {
  color: var(--cota-text-inverse);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.cota-card {
  background-color: var(--cota-bg-default);
  border: 1px solid var(--cota-border-subtle);
  border-radius: var(--cota-radius-lg);
  padding: var(--cota-space-lg);
}

.cota-card--active { border-color: var(--cota-border-active); }

.cota-card-eyebrow {
  font-family: var(--cota-font-sans);
  font-size: var(--cota-fs-9-rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cota-text-secondary);
  margin-bottom: var(--cota-space-xs);
}

.cota-card-title {
  font-family: var(--cota-font-sans);
  font-size: var(--cota-fs-19-rem);
  font-weight: var(--cota-fw-semibold);
  margin: 0 0 var(--cota-space-sm);
}

/* ==========================================================================
   Tags / labels
   ========================================================================== */
.cota-tag {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--cota-font-sans);
  font-size: 11px;
  font-weight: var(--cota-fw-medium);
  letter-spacing: 0.04em;
  border-radius: var(--cota-radius-sm);
  background-color: var(--cota-cream-200);
  color: var(--cota-text-default);
}

.cota-tag--data {
  background-color: transparent;
  border: 1px solid var(--cota-electric-500);
  color: var(--cota-electric-500);
}

/* ==========================================================================
   Filete cota-electric — accent strip editorial
   ========================================================================== */
.cota-rule {
  width: 48px;
  height: 2px;
  background-color: var(--cota-electric-500);
  margin: var(--cota-space-md) 0;
}

.cota-rule--full {
  width: 100%;
  height: 1px;
  background-color: var(--cota-border-default);
  margin: var(--cota-space-lg) 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.cota-footer {
  padding: var(--cota-space-xl) 0 var(--cota-space-lg);
  background-color: var(--cota-walnut-700);
  color: var(--cota-text-inverse);
  font-family: var(--cota-font-sans);
  font-size: var(--cota-fs-11-rem);
}

.cota-footer a { color: var(--cota-cream-200); }
.cota-footer a:hover { color: var(--cota-cream-100); }

/* ==========================================================================
   Watermark
   ========================================================================== */
.cota-watermark {
  position: absolute;
  bottom: var(--cota-space-md);
  right: var(--cota-space-md);
  font-family: var(--cota-font-serif);
  font-size: 12px;
  color: var(--cota-watermark-color);
  opacity: var(--cota-watermark-opacity);
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   Print overrides
   ========================================================================== */
@media print {
  body {
    background: white;
    color: black;
  }

  .cota-section { padding: 0; }
}