/* ============================================================
   tokens-scz.css · Marca Santa Cruz v2.0
   Contrato entre diseno y codigo. No editar valores sin el
   equipo de marca.
   ============================================================ */

:root{
  /* --- Color base --- */
  --scz-selva:      #0D4A31; /* verde selva humeda, fondo dominante */
  --scz-selva-900:  #06271A; /* profundidad, pies de pagina */
  --scz-follaje:    #2F9E5B; /* verde vivo, apoyo y exito */
  --scz-achachairu: #E2601F; /* acento, acciones, foco */
  --scz-patuju:     #E8A417; /* amarillo patuju, datos y destacados */
  --scz-teja:       #A64B2A; /* patrimonio, alertas */
  --scz-horcon:     #4A3524; /* madera, texto sobre cal */
  --scz-cal:        #F1EFE8; /* blanco cal, papel */
  --scz-cal-pura:   #FFFFFF;

  /* --- Roles semanticos --- */
  --bg:         var(--scz-selva);
  --bg-alt:     var(--scz-selva-900);
  --surface:    var(--scz-cal);
  --surface-2:  var(--scz-cal-pura);
  --ink:        var(--scz-horcon);
  --ink-invert: var(--scz-cal);
  --accent:     var(--scz-achachairu);
  --highlight:  var(--scz-patuju);
  --success:    var(--scz-follaje);
  --warning:    var(--scz-teja);
  --border:     rgba(74,53,36,.14);
  --border-inv: rgba(241,239,232,.14);

  /* --- Tipografia --- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-util:    'IBM Plex Mono', ui-monospace, monospace;
  --font-firma:   'Caveat', cursive; /* solo el lema, una vez por pantalla */

  --t-hero: clamp(2.8rem, 8vw, 6.5rem);
  --t-h2:   clamp(1.9rem, 4vw, 3.1rem);
  --t-h3:   clamp(1.15rem, 2vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-cap:  0.75rem;

  --lh-tight: 1.02;
  --lh-body:  1.65;
  --ls-display: -.03em;
  --ls-cap:      .16em;

  /* --- Espacio --- */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.75rem;
  --sp-4: 3rem;
  --sp-5: 5.5rem;

  /* --- Forma --- */
  --r-card: 12px;              /* tarjeta recta y legible */
  --r-btn:  2px 14px 2px 14px; /* boton asimetrico */
  /* La teja no es radio de tarjeta: es cornisa decorativa (::before) */

  --shadow: 0 10px 30px rgba(6,39,26,.18);
  --dur: .25s;
}

/* --- Primitivas --- */
.scz-display{
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.scz-cap{
  font-family: var(--font-util);
  font-size: var(--t-cap);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
}
.scz-firma{ font-family: var(--font-firma); line-height: 1; }

.scz-btn{
  display:inline-block;
  background: var(--accent);
  color: #fff;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: filter var(--dur);
}
.scz-btn:hover{ filter: brightness(1.08); }

/* Tarjeta con cornisa de tejas: cuerpo recto, decoracion arriba */
.scz-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  position: relative;
  overflow: hidden;
}
.scz-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:7px;
  background:repeating-linear-gradient(90deg, var(--scz-teja) 0 18px, #8E3E23 18px 20px);
  -webkit-mask:repeating-radial-gradient(circle at 10px 7px, #000 0 9px, transparent 9px);
          mask:repeating-radial-gradient(circle at 10px 7px, #000 0 9px, transparent 9px);
  opacity:.85;
}

:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}