/* ==========================================================================
   TP ATELIER — SISTEMA VISUAL · AZUL MARINO
   Fichas de marca. Todo el sitio deriva de este archivo: si un color o un
   tamaño no está acá, no debería usarse en ninguna página.
   Para WordPress: pegar este bloque en el theme.json o en el CSS del tema.
   ========================================================================== */

:root{

  /* ---- CAMPO ------------------------------------------------------------
     Azul marino profundo (elegido el 18/9/2026; reemplaza al verde oliva
     del 12/9). Tiene el mismo brillo que tenía el verde, así que contrastes
     y lectura no cambian. Es el color de la firma y el fondo de todo bloque
     que quiera leerse como "portada". Nunca aclarar más allá de --verde-3.
     Las fichas conservan el nombre "verde" para no romper referencias:
     --tpa-verde y --tpa-verde-3 son hoy azules.                           */
  --tpa-campo:        #243247;   /* fondo del hero y del pie */
  --tpa-campo-2:      #2B3B52;   /* bloques azules intermedios */
  --tpa-verde:        #415471;   /* azul de acento sobre papel */
  --tpa-verde-3:      #5C708F;   /* el más claro admitido */


  /* ---- PAPEL ------------------------------------------------------------
     Crema pergamino. Siempre con grano encima: el crema plano se ve barato. */
  --tpa-papel:        #EAE3D1;   /* fondo de las secciones claras */
  --tpa-papel-alto:   #F5F1E4;   /* fichas y tarjetas sobre papel */
  --tpa-papel-bajo:   #DCD3BC;   /* filetes, bordes y separadores */

  /* ---- LATÓN ------------------------------------------------------------
     El único acento. Va en filetes, numeración, marcas y el botón principal.
     Prohibido: degradados, brillos, sombras de color y botones satinados.   */
  --tpa-laton:        #A8854A;   /* latón sobre papel */
  --tpa-laton-alto:   #D3B77E;   /* latón sobre campo azul */
  --tpa-laton-tenue:  rgba(168,133,74,.32);

  /* ---- TINTA ------------------------------------------------------------ */
  --tpa-tinta:        #141A23;   /* texto principal sobre papel */
  --tpa-tinta-2:      #46505F;   /* texto secundario sobre papel */
  --tpa-tinta-3:      #687384;   /* epígrafes y notas al pie */

  /* ---- SOBRE CAMPO ------------------------------------------------------ */
  --tpa-sobre:        #E7E1CF;   /* texto principal sobre azul */
  --tpa-sobre-2:      #9CABC1;   /* texto secundario sobre azul */

  /* ---- SEMÁNTICOS -------------------------------------------------------
     Separados del latón a propósito: el acento de marca nunca comunica error. */
  --tpa-error:        #8C3A2E;
  --tpa-ok:           #4C6B3F;

  /* ======================================================================
     TIPOGRAFÍA
     Bodoni Moda es letra grabada de plancha: alto contraste, sólo para
     display y cifras grandes. Por debajo de 15px se rompe — ahí va Archivo.
     ====================================================================== */
  --tpa-display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --tpa-texto:   "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Libre Caslon Text para todo titular en minúscula: secciones, servicios,
     etapas y la cita. Bodoni Moda es de alto contraste y en una oración
     larga los trazos finos desaparecen; queda sólo para lo que va en
     mayúsculas de marca (el nombre, el sello, los países). Caslon es la
     letra inglesa clásica: sigue el registro británico de la marca pero se
     lee de corrido. (Cambio del 12/9/2026.)                               */
  --tpa-titular: "Libre Caslon Text", Georgia, "Times New Roman", serif;

  /* Escala. Los display llevan tracking positivo porque van en capitales;
     el texto corrido va en caja mixta y sin tracking.                       */
  --tpa-d1: clamp(46px, 9.4vw, 124px);  /* nombre de la firma, sólo hero */
  --tpa-d2: clamp(28px, 3.9vw, 50px);   /* titulares de sección */
  --tpa-d3: clamp(21px, 2.6vw, 30px);   /* subtítulos y citas */
  --tpa-d4: 19px;                        /* títulos de ficha */

  --tpa-t1: clamp(16px, 1.8vw, 18px);   /* bajada del hero */
  --tpa-t2: 16px;                        /* texto corrido */
  --tpa-t3: 13.5px;                      /* texto de apoyo */
  --tpa-rotulo: 10.5px;                  /* rótulo grabado, siempre en caps */

  --tpa-track-caps: 0.22em;              /* rótulos */
  --tpa-track-display: 0.045em;          /* display en capitales */

  /* ======================================================================
     RITMO Y MEDIDA
     ====================================================================== */
  --tpa-ancho: 1180px;
  --tpa-pad: clamp(20px, 5vw, 60px);
  --tpa-sec: clamp(56px, 7vw, 108px);   /* aire vertical entre secciones */

  /* Cuánto sube la ficha de papel para montarse sobre el hero. Una sola
     ficha para las dos mitades del gesto: el hero reserva este aire abajo
     y la ficha sube exactamente eso. Si se tocan por separado, la ficha
     termina tapando la franja de datos del hero.                          */
  --tpa-monta: clamp(48px, 7vw, 92px);

  /* ======================================================================
     MOVIMIENTO
     Las curvas de CSS por defecto son demasiado blandas: no tienen el
     empuje que hace que un movimiento se lea como intencional.
     ====================================================================== */
  --tpa-salida:   cubic-bezier(0.23, 1, 0.32, 1);      /* entradas y salidas */
  --tpa-suave:    cubic-bezier(0.32, 0.72, 0, 1);      /* paneles y cajones */
  --tpa-ambos:    cubic-bezier(0.77, 0, 0.175, 1);     /* movimiento en pantalla */

  --tpa-rapido: 160ms;   /* respuesta al toque */
  --tpa-medio:  320ms;   /* cambios de estado */
  --tpa-lento:  800ms;   /* entradas coreografiadas */
}