/* ============================================================
   CACHALOTE HOUSE — TOKENS DE MARCA
   ------------------------------------------------------------
   Paleta y tipografía oficiales entregadas por el diseñador.

   Naranja      #E1762B    Amarillo     #FFCB24
   Verde oscuro #1B3C33    Verde claro  #82AE44

   Textos: Rubik.  Titulares de acento: Trimen Drawing.
   ============================================================ */

:root{

  /* ---------- 1. COLOR · los cuatro de marca ---------- */
  --naranja:      #E1762B;
  --amarillo:     #FFCB24;
  --verde-oscuro: #1B3C33;
  --verde-claro:  #82AE44;

  /* ---------- 2. COLOR · derivados necesarios ----------
     No son colores nuevos: son el mismo tono ajustado en
     luminosidad para que el texto cumpla contraste AA.      */
  --verde-profundo: #102721;  /* fondos hero, cortina y pie   */
  --verde-noche:    #0A1A16;  /* el punto más oscuro          */
  --verde-medio:    #245044;  /* superficies elevadas         */

  --papel:      #F6F2E9;      /* fondo claro principal        */
  --papel-hondo:#EDE7D9;      /* fondo claro secundario       */
  --hueso:      #F9F6EF;      /* texto sobre oscuro           */

  /* Versiones legibles como TEXTO sobre fondo claro.
     El naranja y el verde claro puros no llegan a 4.5:1.     */
  --naranja-texto:      #A35117;   /* 5.02:1 sobre papel      */
  --verde-claro-texto:  #56732D;   /* 4.84:1 sobre papel      */
  --gris-texto:         #55655C;   /* 5.52:1 sobre papel      */
  --gris-tenue:         #78857C;

  --hueso-medio: rgba(249,246,239,.74);
  --hueso-tenue: rgba(249,246,239,.48);


  /* ---------- 3. COLOR · roles semánticos ----------
     Los componentes usan SOLO estas variables.
     ¿Contraste? Cada acento tiene su pareja verificada.      */
  --fondo:            var(--papel);
  --fondo-oscuro:     var(--verde-oscuro);
  --fondo-profundo:   var(--verde-profundo);
  --superficie:       var(--papel-hondo);
  --superficie-alta:  var(--verde-medio);

  --texto:            var(--verde-profundo);
  --texto-2:          var(--gris-texto);
  --texto-3:          var(--gris-tenue);
  --texto-inv:        var(--hueso);
  --texto-inv-2:      var(--hueso-medio);
  --texto-inv-3:      var(--hueso-tenue);

  /* Acento sobre OSCURO: amarillo (7.94:1 sobre verde oscuro) */
  --acento:           var(--amarillo);
  /* Acento sobre CLARO: naranja oscurecido (5.02:1)           */
  --acento-claro:     var(--naranja-texto);
  /* Naranja de marca: rellenos, botones y gráficos, nunca
     texto pequeño sobre fondo claro                           */
  --acento-relleno:   var(--naranja);
  --sobre-acento:     var(--verde-profundo);   /* 5.12:1       */
  --acento-vida:      var(--verde-claro);      /* detalles     */

  --linea:     rgba(16,39,33,.15);
  --linea-inv: rgba(249,246,239,.17);
  --foco:      var(--amarillo);


  /* ---------- 4. TIPOGRAFÍA ----------
     Rubik hace el trabajo: en 300 y tamaños grandes tiene aire
     y no se ve genérica. Trimen Drawing es la voz de la marca
     y entra solo en palabras sueltas, como en el logo.        */
  --tipo-texto:   'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tipo-display: 'Rubik', system-ui, sans-serif;
  --tipo-marca:   'Trimen Drawing', 'Fredoka', 'Rubik', sans-serif;

  --peso-display: 300;
  --peso-marca:   500;

  /* Escala fluida */
  --t-micro:  clamp(.625rem, .58rem + .18vw, .6875rem);
  --t-menor:  clamp(.75rem,  .71rem + .2vw,  .8125rem);
  --t-base:   clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  --t-guia:   clamp(1.0625rem, .98rem + .45vw, 1.3125rem);
  --t-h4:     clamp(1.25rem, 1.1rem + .75vw, 1.75rem);
  --t-h3:     clamp(1.75rem, 1.35rem + 2vw,  3.25rem);
  --t-h2:     clamp(2.5rem, 1.5rem + 4.8vw, 6.25rem);
  --t-h1:     clamp(3rem, 1.3rem + 7.8vw, 9rem);
  --t-numeral: clamp(4rem, 2rem + 9vw, 11rem);

  --tracking-etiqueta: .22em;
  --tracking-display:  -.03em;


  /* ---------- 5. RITMO Y ESPACIO ---------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px;

  --seccion-y:   clamp(88px, 11vw, 190px);
  --margen-x:    clamp(20px, 5vw, 88px);
  --ancho-max:   1480px;
  --ancho-texto: 62ch;


  /* ---------- 6. FORMA ----------
     El logo es redondeado y orgánico: el sitio lo acompaña
     con radios generosos en vez de esquinas duras.           */
  --radio-0: 0px;
  --radio-1: 4px;
  --radio-2: 10px;
  --radio-3: 18px;
  --radio-4: 26px;
  --radio-pill: 999px;

  --borde-fino: 1px solid var(--linea);
  --borde-inv:  1px solid var(--linea-inv);


  /* ---------- 7. ELEVACIÓN ---------- */
  --sombra-1: 0 2px 10px rgba(10,26,22,.08);
  --sombra-2: 0 18px 48px rgba(10,26,22,.18);
  --sombra-3: 0 40px 110px rgba(10,26,22,.45);


  /* ---------- 8. MOVIMIENTO ---------- */
  --curva:       cubic-bezier(.16,1,.3,1);
  --curva-suave: cubic-bezier(.33,1,.68,1);
  --curva-duo:   cubic-bezier(.65,0,.35,1);

  --vel-1: .18s;  --vel-2: .32s;  --vel-3: .6s;  --vel-4: 1.05s;

  --z-fondo: 0;  --z-medio: 10;  --z-flotante: 40;
  --z-nav: 100;  --z-lightbox: 800;  --z-cortina: 900;  --z-cursor: 1000;
}

@media (min-width: 1600px){
  :root{ --seccion-y: 210px; }
}


/* ============================================================
   TIPOGRAFÍA DE MARCA — Trimen Drawing
   ------------------------------------------------------------
   PENDIENTE: falta el archivo de la fuente. Cuando llegue,
   ponerlo en assets/fuentes/ y descomentar este bloque.
   Mientras tanto cae en Fredoka, que es lo más cercano que hay
   en Google Fonts al trazo redondeado del logo.
   ============================================================ */
/*
@font-face{
  font-family:'Trimen Drawing';
  src:url('../fuentes/trimen-drawing.woff2') format('woff2'),
      url('../fuentes/trimen-drawing.woff')  format('woff');
  font-weight:400 700;
  font-display:swap;
}
*/