/* ============================================================
   INBLÜM STUDIO · Sistema
   Un solo lenguaje para todo el sitio, sacado de la marca:
   - La tinta es el cacao de la Apertura; el lienzo, papel blanco
     y papel leche (el "Milk Paper" de la referencia Beings).
   - Los colores de acento son los del recuadro de flores del
     logotipo, medidos sobre la imagen: el fucsia de las flores, el
     azul del cielo, el amarillo del polen; más el verde olivo. En los
     elementos van planos (filas que se llenan, las franjas del
     duotono); los degradados sólo están en los fondos: las auras de
     los campos claros y tres campos en los acabados de dos tonos de
     Homer (el panel de la Apertura, el manifiesto y el contacto).
   - Las imágenes llevan el radio del recuadro del logotipo, y los
     botones son píldoras, como las letras redondas del nombre.
   - La letra, en la mezcla de Homer: lo grande en un corte
     finísimo, el texto en regular y lo chico en negra.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Superficies --- */
  --lamina:   #FFFFFF;   /* Paper White: la Apertura y la barra */
  --papel:    #FFF4EC;   /* Milk Paper: el lienzo cálido de las secciones */
  --negro:    #140600;   /* fondo de las tabletas de relleno: un cacao más hondo */

  /* --- La tinta: el cacao de la Apertura, en todo el sitio --- */
  --tinta:    #1B0800;
  --filo:     rgb(27 8 0 / .16);   /* líneas finas */
  --tenue:    rgb(27 8 0 / .66);   /* texto secundario sobre papel (5.4:1) */

  /* --- La marca: los colores del recuadro de flores ---
     Medidos sobre assets/apertura/logo-flor.jpg (el tono más limpio de
     cada color). Con la crema encima, el fucsia da 5:1 y el azul 5.3:1;
     con el cacao encima, el amarillo da 11.7:1 y el verde 5.2:1. */
  --flor:     #B8367A;   /* el fucsia de las flores: el acento principal */
  --petalo:   #F6CFE1;   /* el rosa claro de los pétalos */
  --cielo:    #0A6BA8;   /* el azul del fondo del recuadro */
  --polen:    #DCC92E;   /* el amarillo */
  --hoja:     #888740;   /* el verde olivo del panel */
  --crema:    #FFF4EC;   /* el texto claro sobre los campos de color */

  /* Las luces de cada color: la segunda franja de cada duotono. */
  --cielo-claro: #9CCBEA;
  --polen-claro: #F2E48A;
  --hoja-clara:  #C9CB96;

  /* --- Los acabados de Homer que se usan como campos, en degradado ---
     Tomados de su sitio (las franjas de cada acabado). Cada uno va una
     sola vez, como su línea de productos: "Nimbus Blue/Acid Yellow" en
     el panel de la Apertura (--b-panel-*, abajo), "Retba Pink/Flame" en
     el manifiesto y "Clover/Cody Green" en el contacto. En todos, la
     tinta da por lo menos 5.6:1. */
  --h-retba:  #F4A6D7;   /* Retba Pink: arriba del manifiesto (10:1 con la tinta) */
  --h-flame:  #F4512C;   /* Flame: abajo del manifiesto (5.7:1) */
  --h-clover: #00AF66;   /* Clover: arriba del contacto (6.9:1) */
  --h-cody:   #D5EB5F;   /* Cody Green: abajo del contacto (14.9:1) */

  /* --- Vidrio ---
     Sólo donde hay algo detrás que doblar: la barra de arriba (el
     contenido pasa por debajo), la ficha sobre el retrato y los
     rótulos sobre las piezas de la galería. Vidrio claro y grueso: casi
     transparente, con poco desenfoque, un canto que brilla arriba a la
     izquierda y reflejos; en Chrome además dobla lo de atrás en los
     bordes (app.js, 7c). La versión oscura es para el cacao. */
  --vidrio-tinte:        linear-gradient(160deg, rgb(255 255 255 / .32), rgb(255 255 255 / .1) 45%, rgb(255 255 255 / .2));
  --vidrio-canto:        inset 1.5px 2px 0 rgb(255 255 255 / .95), inset -1px -1.5px 0 rgb(255 255 255 / .4),
                         inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 0 26px rgb(255 255 255 / .3);
  --vidrio-sombra:       0 20px 36px -28px rgb(27 8 0 / .35);
  --vidrio-oscuro-canto: inset 1.5px 2px 0 rgb(255 244 236 / .38), inset -1px -1.5px 0 rgb(255 244 236 / .12),
                         inset 0 0 0 1px rgb(255 244 236 / .1), inset 0 0 26px rgb(255 244 236 / .06);

  /* --- Tipografía: la mezcla de Homer ---
     Su letra, Unica77 LL, es de licencia. Lo grande en un corte
     finísimo (Helvetica Neue Thin en Apple, Inter Tight 200 fuera), el
     texto en regular y lo chico (etiquetas, barra, botones, números) en
     negra (Inter Tight Black). */
  --f-texto:   "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;   /* 400 */
  --f-fina:    "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;   /* 200 */
  --f-negra:   "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;   /* 900 */
  --f-codigo:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala: etiqueta, texto, dos tamaños intermedios y el titular de
     sección, que crece con la ventana. */
  --t-etiqueta: 12px;
  --t-texto:  1.25rem;                                  /* 20px */
  --t-h:      2.375rem;                                 /* 38px */
  --t-grande: clamp(1.75rem, 1rem + 2.2vw, 3.25rem);    /* 28 → 52px: nombres de servicios, pasos */
  --t-titulo: clamp(3.25rem, 1rem + 7.2vw, 9.25rem);    /* 52 → 148px: el titular de cada sección */

  /* --- Formas: el recuadro redondeado del logotipo --- */
  --r-tile:  clamp(8px, .95vw, 14px);   /* imágenes y celdas */
  --r-pill:  999px;                     /* botones y etiquetas */

  /* --- Apertura: la primera página (dirección "Beings") ---
     El panel que da paso a Trabajo es un degradado entre los dos
     tonos de uno de los acabados de Homer, "Nimbus Blue/Acid Yellow"
     (tomados de su sitio): un azul cielo muy claro y un amarillo
     ácido. Es el más legible de sus pares (la tinta da 11:1 sobre el
     azul y 14.6:1 sobre el amarillo) y repite el cielo y el polen del
     recuadro de flores. El fondo de la Apertura se lava del blanco al
     azul del panel pasando por dos tintes (app.js lee estos valores). */
  --b-blanco:    #ffffff;   /* lienzo */
  --b-cacao:     #1b0800;   /* tinta (Cocoa Ink) */
  --b-panel-1:   #A7C6ED;   /* Nimbus Blue: arriba del panel, y donde termina el lavado */
  --b-panel-2:   #E0E722;   /* Acid Yellow: abajo del panel */
  --b-lavado-1:  #EEF4FC;   /* primer tramo del lavado: un tinte casi blanco */
  --b-lavado-2:  #CFE0F5;   /* segundo tramo: un celeste pálido */

  /* --- Ritmo --- */
  --aire:   12px;                       /* margen y canal de todo el sitio */
  --canal:  clamp(6px, .7vw, 10px);     /* espacio entre celdas de la galería */
  --sec-y:  clamp(88px, 10vw, 160px);   /* entre secciones */
  --nav-h:  73.6px;      /* alto de la barra de arriba, que queda fija: dos
                            renglones en pantallas chicas (4px de aire
                            arriba y abajo + 2 x 32.8px); en escritorio
                            es uno, ver abajo */
  --nav-sep: 6px;        /* la barra flota: este aire la separa del borde */
  --nav-ocupa: calc(var(--nav-sep) + var(--nav-h));   /* lo que tapa arriba */

  /* --- Movimiento --- */
  --brote:  cubic-bezier(.2, .8, .2, 1);
  --tallo:  cubic-bezier(.65, 0, .35, 1);

  /* --- Capas --- */
  --z-base:      1;
  --z-menu:      40;     /* la barra de arriba */
  --z-progreso:  45;     /* la línea de avance, sobre la barra */
  --z-saltar:    50;     /* "Saltar al contenido", sobre todo */
}

@media (min-width: 1000px) {
  :root { --nav-h: 40.8px; }   /* un solo renglón: 4px de aire arriba y abajo + 32.8px */
}