/* ══════════════════════════════════════════════════════════════════════════
   BIOTA PERÚ — TOKENS
   Copiados del style kit. Este archivo no se improvisa: si un valor no está
   aquí, no se usa en el sitio.
   ══════════════════════════════════════════════════════════════════════════ */

:root{

  /* ── Color ────────────────────────────────────────────────────────────
   * Los tres de marca, medidos sobre el sitio en producción.            */
  --verde:#278340;
  --azul:#3b4ca0;
  --lima:#96ba31;

  /* Variantes de las pantallas nuevas.
   * ⚠ PROVISIONALES: en los mockups el azul de las cuñas y el verde de las
   * barras se ven más claros que los de marca, pero no hay archivo con los
   * valores exactos. Hasta que llegue, se usan los de marca aclarados.
   * Decisión registrada en ARQUITECTURA-CONTENIDOS.md §7.               */
  --azul-claro:#5b64ad;
  --verde-barra:#3d9550;

  /* Tinta y grises */
  --tinta-fuerte:#1d2124; /* navegación: casi negro, para que el menú pese */
  --tinta:#58585b;        /* el cuerpo de texto de todo el sitio */
  --tinta-media:#5d5d5d;
  --tinta-suave:#939597;
  --linea:#e6e7e8;
  --linea-fuerte:#ababab;

  /* Fondos */
  /* El celeste de las tarjetas de contacto: el azul de marca rebajado, para
   * que sea de la familia y no un color nuevo. */
  --celeste:#eceef7;
  --blanco:#ffffff;
  --hueso:#f7f7f7;
  --hueso-hondo:#f1f1f1;

  /* Velos sobre foto. No son estéticos: son lo que garantiza que el título
   * se lea con cualquier foto que suba el cliente después.             */
  --velo-heroe:rgba(0,0,0,.30);
  --velo-banner:rgba(0,0,0,.42);
  /* El de ¿Quiénes somos?, al revés que el del banner: ahí el texto es
     blanco sobre foto y se oscurece; aquí es verde sobre claro y hay que
     ACLARAR la foto para que se siga leyendo. */
  --velo-quienes:rgba(255,255,255,.82);

  /* ── Tipografía ───────────────────────────────────────────────────────
   * Roboto para títulos e interfaz, Roboto Condensed para texto corrido.
   * La condensada es decisión de diseño heredada, no un descuido: es lo
   * que hace que el sitio se lea «técnico».                             */
  --fuente:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-cond:'Roboto Condensed','Roboto',system-ui,sans-serif;

  /* Escala tipográfica — SEIS cuerpos, ni uno más.
   * El sitio actual tiene diez; cerrar la escala es la mitad del trabajo. */
  --t-heroe:54px;   /* el h1 de la portada */
  --t-xl:30px;      /* título de sección */
  --t-l:20px;       /* título de bloque */
  --t-m:16px;       /* título de tarjeta, dato */
  --t-base:15px;    /* texto corrido */
  --t-s:14px;       /* menú, pie, etiquetas */

  /* Interlineado: títulos a 1,2 — texto seguido a 1,5.
   * Un título a 1 se toca consigo mismo en cuanto ocupa dos renglones.  */
  --li-titulo:1.2;
  --li-texto:1.5;
  --li-corto:1.35;

  /* Grosores. La regla sigue siendo dos —400 y 700—, con dos excepciones
   * declaradas: el 500 de botones y campos, y el 300 del menú y del «BIOTA»
   * del héroe. El 300 no es decoración: es lo que hace que una línea de
   * navegación en 16px no compita con el logotipo que tiene al lado.      */
  --peso-fino:300;
  --peso-normal:400;
  --peso-medio:500;
  --peso-fuerte:700;

  /* ── Separación ───────────────────────────────────────────────────────
   * Cinco pasos y ninguna excepción. Cualquier otro número es deriva.   */
  --sep-seccion:100px;   /* entre secciones */
  --sep-bloque:55px;     /* entre bloques de una sección */
  --sep-pieza:30px;      /* entre piezas de una fila */
  --sep-parrafo:24px;    /* entre párrafos de texto seguido */
  --sep-linea:10px;      /* entre dos líneas sueltas de una pieza */

  /* ── Retícula ─────────────────────────────────────────────────────────
   * ⚠ PROVISIONAL: 1140 es el del sitio actual. En las pantallas nuevas el
   * contenido se ve algo más estrecho y arranca descentrado para dejarle
   * sitio a la cuña. A confirmar contra el archivo de diseño.           */
  --ancho:1140px;
  --aire:15px;
  /* El margen del texto (07/10): lo que el contenido se mete DENTRO del
     contenedor, además del aire. Sale de «¿Quiénes somos?» en Inicio, que es
     la referencia: todas las páginas internas arrancan el texto ahí. */
  --margen-texto:28px;

  /* ── La diagonal ──────────────────────────────────────────────────────
   * UN ángulo para todo el sitio: mosaicos, cuñas y bloques. Si cada
   * pieza trae el suyo, se lee como descuido en vez de como sistema.    */
  --diagonal:26%;        /* cuánto se desplaza el corte, en % del ancho */
  /* «¿Quiénes somos?». La cifra es una imagen compuesta por diseño: este es
   * su ancho máximo, y por encima de él se vería blanda. Los otros dos son
   * el aire de dentro del bloque azul, que es mucho más que el de una caja
   * normal porque ahí dentro no hay nada más que texto. */
  --quienes-cifra:380px;

  /* Ancho de la foto en el listado de noticias. De aquí sale su alto, y el
   * título se centra respecto a ella. */
  --noticias-foto:clamp(240px,38%,420px);
  --quienes-caja-x:64px;
  --quienes-caja-y:48px;


  /* ── Otros ────────────────────────────────────────────────────────── */
  --radio:0px;           /* el sitio no usa esquinas redondeadas… */
  --radio-acento:5px;    /* …salvo el botón de acento y el panel de noticias */
  --sombra-acento:3px 3px 15px 0 rgba(0,0,0,.38);
  /* ── MOVIMIENTO ─────────────────────────────────────────────────────
   * Dos capas con dos relojes, y confundirlas es el error de base:
   *   · Capa de INTERFAZ — lo que se toca. Siempre por debajo de 300 ms.
   *   · Capa de MARCA    — lo que se ve una vez por página. De 0,3 a 0,9 s.
   * Un desplegable de 400 ms se siente roto; un bloque que entra en 150 ms
   * no se ve llegar, solo parpadea. Método en _comun\METODO-MOTION.md. */

  /* Las curvas de fábrica son flojas: les falta el empuje que hace que algo
     parezca intencional. ⚠ `ease-in` está prohibido en interfaz — arranca
     lento, o sea que retrasa justo el instante que el ojo está mirando. */
  --ease-out:cubic-bezier(.23,1,.32,1);        /* entra o sale */
  --ease-in-out:cubic-bezier(.77,0,.175,1);    /* se desplaza por pantalla */
  --ease-drawer:cubic-bezier(.32,.72,0,1);     /* el panel de móvil (curva de iOS) */
  --ease-entrada:cubic-bezier(.22,.61,.36,1);  /* capa de marca: bloques al asomar */

  --transicion:.25s;         /* color y estados; techo de interfaz, 300 ms */
  --pulsacion:.14s;          /* el hundido al pulsar: tiene que ser instantáneo */
  --entrada:.75s;            /* capa de marca: un bloque al asomar */
  --entrada-escalon:90ms;    /* entre hermanas, con tope de cuatro */
  --velo:.34s;               /* el paso de una página a otra */
  --transicion-foto:4000ms cubic-bezier(.19,1,.22,1);

  /* Altura táctil mínima. El sitio actual tiene botones de 22 px, que en
   * móvil no se pueden pulsar. */
  --tactil:44px;

  /* El héroe. 535 px: el 27 % más que los 420 con que nació. Se probó con
   * 630 —un 50 % más— y era demasiado: el texto ocupa lo mismo pase lo que
   * pase, así que todo lo que se sube es aire vacío alrededor. */
  --heroe-alto:535px;
  --heroe-fundido:1.2s;    /* lo que tarda una foto en dar paso a la siguiente */
  --heroe-zoom:8s;         /* el acercamiento lento mientras está en pantalla */

  /* El banner de las páginas interiores. UNA sola altura para todas: el
   * sitio actual tiene cuatro y por eso cada página parece de otro sitio. */
  --banner-alto:340px;
  /* La variante baja de la cabecera, pedida para Contáctanos el 07/09. La
     mitad justa mas un 20 %, pedido el 07/09: por debajo de 170 px la foto
     deja de leerse como foto y pasa a ser una textura. */
  --banner-alto-bajo:282px;
  /* Su rótulo va MÁS GRANDE que el título de sección: es lo único que hay en
     esa franja y tiene que sostenerla él solo. Sale de la escala, no de un
     número suelto: --t-xl es 30 px, así que esto son 36. */
  --banner-rotulo-bajo:calc(var(--t-xl) + 6px);

  /* El panel de otras noticias: el único sitio del sitio con esquina
   * redondeada de verdad, y sale de la pantalla de Noticias. */
  --panel-radio:14px;

  /* Las fichas de servicio */
  --fichas-hueco:30px;      /* el mismo hueco entre columnas y entre filas */
  --fichas-barra:74px;      /* alto mínimo de la franja de color: dos líneas,
                             * para que las de una y las de dos se igualen */

  /* Cabecera */
  --barra-alto:35px;
  --cabecera-alto:63px;
  /* Solo aparece cuando la página ya se ha movido: pegada arriba desde el
   * principio, la sombra ensucia el blanco sin separar de nada. */
  --cabecera-sombra:0 6px 18px rgba(0,0,0,.10);

  /* El panel del menú de móvil */
  --panel-ancho:min(340px,86vw);
  --panel-velo:rgba(29,33,36,.55);
  --panel-sombra:-14px 0 40px rgba(0,0,0,.26);

  /* El corte del pie. No hay línea ninguna: la mitad izquierda se lee
   * LEVANTADA sobre la derecha, y lo único que lo dice es la sombra que
   * proyecta — oscura pegada al canto y desvanecida hacia fuera. */
  --pie-sombra-ancho:21px;

  /* El ancho de cada hoja del pie, una por una. Es lo único que se toca para
   * ajustarlas: la posición ya está puesta. */
  --pie-hoja-1:83px;
  --pie-hoja-2:110px;
  --pie-hoja-4:55px;
  --pie-hoja-5:83px;
  --pie-hoja-3:88px;
  --pie-sombra-tinta:rgba(0,0,0,.34);
}

/* En pantallas medianas y chicas la escala baja, pero SIGUE siendo la misma
   escala: los mismos seis cuerpos, no valores nuevos. */
@media (max-width:991px){
  :root{
    --heroe-alto:440px;
    --t-heroe:40px;
    --t-xl:26px;
    --sep-seccion:70px;
    --sep-bloque:40px;
    --quienes-caja-x:40px;
    --quienes-caja-y:36px;
  }
}

@media (max-width:575px){
  :root{
    --heroe-alto:375px;
    --t-heroe:32px;
    --t-xl:22px;
    --t-l:18px;
    --sep-seccion:55px;
    --sep-bloque:32px;
    --sep-pieza:20px;
    --quienes-cifra:260px;
    --quienes-caja-x:22px;
    --quienes-caja-y:28px;
  }
}