/* ═══════════════════════════════════════════════════════════════════════════
   EL MARCO DE FARO — la capa constante de los seis casos
   ═══════════════════════════════════════════════════════════════════════════

   Seis casos con seis direcciones artísticas distintas necesitan algo que los
   haga un portfolio y no seis webs sueltas. Ese algo NO puede ser el color:
   `SISTEMA-MARCA.md` §4 lo prohibe expresamente —«las marcas de los casos de
   estudio no se mezclan nunca con la de Faro»— y ademas seis paletas iguales
   serían seis casos iguales, que es justo lo que no queremos.

   Lo que comparten es esto:

     · la barra de arriba y el bloque de cierre  — el marco visible
     · la MISMA curva de animacion               — todo se mueve igual
     · la MISMA escala tipografica               — mismos tamaños, otras familias
     · la misma apertura de tres lineas          — sector · problema · muestra

   La coherencia no la da el color: la da como se mueven las cosas y como esta
   montada la pagina. Cada caso pinta encima lo que quiera.

   ── Como se usa en un caso ──
   1. <link rel="stylesheet" href="assets/_marco/faro-marco.css">
   2. <body data-caso="2" data-tono="claro">   (tono = fondo del caso)
   3. Redefinir SOLO las variables de --caso-* en el <style> de la pagina.
      Las de --fx-* no se tocan: son el marco.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografia de marca, desde nuestro dominio ──────────────────────────────
   NO desde el CDN de Google: transfiere la IP de cada visitante a un tercero y
   eso es un problema de RGPD en una web europea. Mismo criterio que
   `Sitio-Web/assets/fuentes.css`, del que salen estos archivos.
   Y hay que declararlas: si no, el navegador cae a Georgia/Arial EN SILENCIO
   —que es exactamente lo que le pasaba a las seis paginas del portfolio—. */
@font-face{ font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url(fuentes/FrankRuhlLibre-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url(fuentes/FrankRuhlLibre-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Work Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(fuentes/WorkSans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Work Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(fuentes/WorkSans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  /* Paleta de Faro. Solo la usa el marco; el cuerpo del caso tiene la suya. */
  --fx-papel:#F5EFE4;  --fx-verde:#12291F;  --fx-verde-medio:#1E3A2E;
  --fx-oro:#C9A667;    --fx-tinta:#17211C;  --fx-linea:#E2D9C6;

  /* ── EL ORO NO ESCRIBE SOBRE PAPEL ──────────────────────────────
     🔴 Medido el 25-ago-2026 sobre el índice del portfolio: el oro de marca
     sobre papel da **2,01:1**, y el mínimo de WCAG para texto pequeño es 4,5:1.
     Los rótulos de sección llevaban meses publicados por debajo del mínimo.

     La primera respuesta fue un segundo oro oscurecido (`#876830`, 4,53:1) solo
     para texto. **Retirado el mismo día por Zyad**, y el motivo vale para
     cualquier color: pasaba la medida y rompía la marca. Dos oros en la paleta
     son dos fuentes de verdad para el mismo color, y el oscuro no se lee como
     oro — se lee como mostaza.

         Un color que hay que oscurecer para poder leerlo
         no es ese color: es otro.

     LA REGLA, entera y sin excepciones:

       Fondo oscuro  →  el oro ESCRIBE.  6,70:1 sobre verde profundo.
       Fondo claro   →  el oro es GRAFISMO: una línea, un punto, una marca,
                        un relleno. Nunca tinta. Si algo tiene que decirse
                        en oro sobre papel, se dice DENTRO de un relleno oro
                        — el CTA de la barra es exactamente eso — o el
                        bloque entero se va a fondo verde.

     La comprueba una máquina, no un documento: `verificar-publicado.py --oro`
     mide el tono ya compuesto página por página. Una prohibición que solo vive
     escrita se salta a los tres meses. */

  /* LA CURVA. Una sola, en los seis casos y en todo lo que se mueva.
     Es el detalle que mas hace que seis paginas distintas se sientan de la
     misma mano — mas que cualquier color. Sale suave y frena largo. */
  /* 🔴 ESTAS CUATRO YA NO SON VALORES: SON ALIAS DEL SISTEMA (25-ago-2026).
     Hasta hoy el portfolio se movía a 340 / 620 / 980 ms, la home a otros
     números y Remotion a un tercero. Tres sistemas de movimiento para una sola
     marca — y eso no se ve en una pieza, se ve al poner un reel al lado de la
     web y notar que no son del mismo sitio sin poder decir por qué.

     Ahora los valores viven en `Marca/marca.tokens.json` y salen generados en
     `Sitio-Web/assets/motion.css` con `Marca/generar-movimiento.py`. Los cuatro
     nombres de aquí se conservan porque los usan doce reglas de este archivo y
     seis páginas: renombrarlos en todas de golpe habría sido un cambio ciego.

         Un alias es una mudanza sin obra.
         Se cambia de dónde viene el valor, no quién lo usa.

     El respaldo detrás de la coma es literal: si un día esta hoja se usa sin
     `motion.css` al lado, el portfolio sigue moviéndose — con los números de
     antes, que es peor que los nuevos pero muchísimo mejor que sin transición. */
  --fx-curva: var(--m-entrada, cubic-bezier(.22,1,.36,1));
  --fx-rapido:var(--m-rapido,  340ms);
  --fx-medio: var(--m-base,    620ms);
  --fx-lento: var(--m-lento,   980ms);

  /* LA ESCALA. Los tamaños son constantes; las familias las elige cada caso.
     Asi dos casos con tipografias opuestas siguen teniendo el mismo ritmo de
     lectura, que es lo que el ojo reconoce como «el mismo sitio».

     🔴 SEIS ESCALONES, Y HASTA HOY ERAN SEIS QUE NADIE USABA (25-ago-2026).
        Medido con `jurado.py` sobre produccion: entre 11 y 17 tamaños
        computados por pagina. Los seis tokens existian y cada caso escribia
        los suyos al lado — `1.9rem` aqui, `clamp(2rem,…)` alla — asi que la
        escala compartida decoraba el archivo y no gobernaba nada.

            Un sistema que se puede esquivar sin darse cuenta
            no es un sistema: es una recomendacion con sintaxis.

     Y en la revision salieron DOS problemas de la propia escala:

     1. `--fx-sello` (11,5 px) y `--fx-pie` (12,8 px) estaban a 1,3 px. Nadie
        percibe eso como jerarquia: son dos nombres para el mismo tamaño, y
        gastaban un escalon de seis. **Se fusionan hacia arriba** —al mayor,
        que es el legible— y `--fx-pie` se queda como alias para no tocar las
        veintitantas reglas que ya lo usan.

     2. Faltaba el escalon de la CIFRA. Tres de los seis casos son de datos y
        enseñan numeros grandes; sin un token para eso, cada uno se invento el
        suyo, y de ahi salian la mitad de los tamaños sobrantes. Entra
        `--fx-cifra`, entre el titulo y la entradilla.

     Siguen siendo seis. */
  --fx-display:clamp(3.1rem, 1.5rem + 5.6vw, 7rem);    /* 105 px a 1440 · H1 */
  --fx-titulo: clamp(2.3rem, 1.3rem + 3.4vw, 4.5rem);  /*  70 px a 1440 · H2 */
  --fx-cifra:  clamp(1.9rem, 1.2rem + 1.9vw, 2.75rem); /*  44 px a 1440 · datos, capitulares */
  --fx-lede:   clamp(1.2rem, 1rem + .7vw, 1.62rem);    /*  26 px a 1440 · citas, entradillas */
  --fx-cuerpo: clamp(1rem, .96rem + .18vw, 1.12rem);   /*  18 px a 1440 · texto */
  --fx-sello:  .8rem;                                  /*  12,8 px · TODA etiqueta */
  --fx-pie:    var(--fx-sello);                        /*  alias: era 11,5 y sobraba */

  --fx-margen:clamp(20px, 5vw, 96px);
  --fx-barra-alto:56px;

  /* Cada caso redefine estas cuatro y con eso cambia de piel entera. */
  --caso-fondo:var(--fx-papel);
  --caso-tinta:var(--fx-tinta);
  --caso-suave:color-mix(in srgb, var(--caso-tinta) 62%, transparent);
  --caso-acento:var(--fx-oro);
  --caso-display:'Frank Ruhl Libre', Georgia, serif;
  --caso-texto:'Work Sans', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--caso-fondo); color:var(--caso-tinta);
  font-family:var(--caso-texto); font-size:var(--fx-cuerpo); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,canvas,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* Contenedor. Nunca a sangre por accidente: quien quiera sangre la pide. */
.fx-ancho{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--fx-margen); }
.fx-estrecho{ max-width:720px; }

/* ── LA BARRA ────────────────────────────────────────────────────────────────
   Fina, fija y del color del caso. Es lo unico que ve el visitante todo el rato,
   asi que es donde vive la marca. Se adapta al tono del fondo con `data-tono`
   en vez de con dos clases, porque el tono lo decide el caso, no el marco. */
.fx-barra{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--fx-barra-alto);
  display:flex; align-items:center; gap:18px;
  padding-inline:var(--fx-margen);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:var(--fx-sello); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  background:color-mix(in srgb, var(--caso-fondo) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--caso-tinta) 12%, transparent);
  transition:transform var(--fx-medio) var(--fx-curva);
}
/* Al bajar se esconde, al subir vuelve. En un caso que se mira, la barra
   compite con la pieza; al subir el visitante quiere navegar otra vez. */
.fx-barra[data-oculta="si"]{ transform:translateY(-100%); }
/* Sobre el cierre —que es verde profundo en los seis casos, sea cual sea el
   tono de la pagina— la barra se invierte. Sin esto se quedaba clara encima de
   un bloque oscuro y parecia un trozo de otra web pegado arriba. */
.fx-barra[data-sobre="oscuro"]{
  background:color-mix(in srgb, var(--fx-verde) 82%, transparent);
  color:var(--fx-papel);
  border-bottom-color:color-mix(in srgb, var(--fx-papel) 14%, transparent);
}
.fx-barra{ transition:transform var(--fx-medio) var(--fx-curva),
           background var(--fx-rapido) var(--fx-curva), color var(--fx-rapido) var(--fx-curva); }

.fx-barra a{ text-decoration:none; display:inline-flex; align-items:center; gap:9px; }
.fx-barra .marca svg{ width:15px; height:auto; }
.fx-barra .marca span{ letter-spacing:.16em; }
.fx-barra .cuenta{ margin-left:auto; opacity:.55; font-variant-numeric:tabular-nums; }
/* 🔴 EL CTA ES EL UNICO ACENTO, y va en RELLENO, no en tinta (25-ago-2026).
   Antes era texto del color del acento. Sobre papel eso es oro sobre claro
   — 2,01:1 — y sobre un caso de fondo claro, lo mismo con su color propio.
   En relleno se lee en los dos fondos, y de paso deja de competir con los
   rotulos: un elemento relleno es un acento mas fuerte que seis palabras
   doradas repartidas por la pagina. */
.fx-barra .sig{
  color:var(--fx-verde); background:var(--fx-oro);
  padding:7px 15px; border-radius:100px; letter-spacing:.12em;
  transition:background var(--fx-rapido) var(--fx-curva),
             color var(--fx-rapido) var(--fx-curva);
}
.fx-barra .sig:hover{ background:var(--fx-tinta); color:var(--fx-papel); }
.fx-barra .sig::after{ content:"→"; margin-left:6px; transition:transform var(--fx-rapido) var(--fx-curva); display:inline-block; }
.fx-barra .sig:hover::after{ transform:translateX(5px); }
@media (max-width:640px){ .fx-barra .cuenta{ display:none; } }

/* ── LA APERTURA — tres lineas, iguales en los seis ──────────────────────────
   Sector · el problema en UNA frase · la etiqueta de muestra. La etiqueta va
   arriba y visible sin hacer scroll: un portfolio honesto no esconde que sus
   casos son de muestra en un pie de pagina. */
/* 🔴 Menos aire. Estaba en 9vh arriba y 7vh abajo, y sumado al relleno de la
   primera sección daba casi una pantalla de nada entre el titular y el primer
   contenido. El aire de una portada tiene que dejar respirar al titular, no
   esconder lo que viene después. */
.fx-apertura{ padding-block:calc(var(--fx-barra-alto) + 5.5vh) 4.5vh; }
.fx-apertura .sector{
  font-size:var(--fx-sello); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--caso-acento); margin:0 0 22px;
}
.fx-apertura h1{
  font-family:var(--caso-display); font-weight:500;
  font-size:var(--fx-display); line-height:1.02; letter-spacing:-.02em;
  margin:0; max-width:19ch; text-wrap:balance;
}
.fx-apertura .muestra{
  display:inline-flex; align-items:center; gap:9px; margin-top:34px;
  padding:7px 15px 7px 12px; border-radius:100px;
  border:1px solid color-mix(in srgb, var(--caso-tinta) 22%, transparent);
  font-size:var(--fx-pie); letter-spacing:.02em; text-transform:none;
  font-weight:400; color:var(--caso-suave);
}
.fx-apertura .muestra::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--caso-acento); flex:none;
}

/* ── EL CIERRE — capacidades, CTA y navegacion ───────────────────────────────
   Siempre verde profundo, en los seis, sea cual sea el tono del caso. Es el
   momento en que la pagina deja de ser del cliente y vuelve a ser de Faro. */
.fx-cierre{
  background:var(--fx-verde); color:var(--fx-papel);
  padding-block:clamp(48px,6vw,84px);
  /* 🔴 Aquí había un `margin-top` de hasta 140 px ADEMÁS del relleno de la
     última sección. Dos separaciones seguidas del mismo sitio: la de fuera del
     cierre y la de dentro de la sección anterior. Se ve como una pantalla en
     blanco justo antes del bloque verde. Una separación, no dos. */
}
.fx-cierre h2{
  font-family:'Frank Ruhl Libre', Georgia, serif; font-weight:500;
  font-size:var(--fx-titulo); line-height:1.1; margin:0 0 8px; letter-spacing:-.01em;
}
.fx-cierre .sello{
  font-size:var(--fx-sello); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fx-oro); margin:0 0 20px;
}
.fx-skills{ display:flex; flex-wrap:wrap; gap:9px; margin:30px 0 0; padding:0; list-style:none; }
.fx-skills li a, .fx-skills li{
  display:block; padding:9px 16px; border-radius:100px; text-decoration:none;
  border:1px solid color-mix(in srgb, var(--fx-papel) 24%, transparent);
  font-size:var(--fx-pie); color:var(--fx-linea);
  transition:border-color var(--fx-rapido) var(--fx-curva), color var(--fx-rapido) var(--fx-curva);
}
.fx-skills li a:hover{ border-color:var(--fx-oro); color:var(--fx-oro); }

.fx-acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.fx-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:100px; text-decoration:none;
  font-size:var(--fx-pie); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--fx-oro); color:var(--fx-verde);
  transition:transform var(--fx-rapido) var(--fx-curva);
}
.fx-btn.hueco{ background:transparent; color:var(--fx-linea); border:1px solid color-mix(in srgb, var(--fx-papel) 28%, transparent); }
.fx-btn:hover{ transform:translateY(-2px); }

/* El siguiente caso, asomando. Que se puedan ver los seis seguidos sin volver
   nunca al indice — es la diferencia entre un portfolio y una carpeta. */
.fx-siguiente{
  display:block; text-decoration:none; margin-top:clamp(50px,7vw,90px);
  padding-top:clamp(34px,4vw,54px);
  border-top:1px solid color-mix(in srgb, var(--fx-papel) 18%, transparent);
}
/* `display:block`, porque el rotulo lo escribe el JavaScript en un <span> y
   sin esto se pegaba al titular en la misma linea. Afecta a las seis paginas:
   por eso vive aqui y no en el CSS de cada caso. */
.fx-siguiente .et{ display:block; font-size:var(--fx-sello); letter-spacing:.18em; text-transform:uppercase; color:var(--fx-oro); }
.fx-siguiente .tit{
  display:block;
  font-family:'Frank Ruhl Libre', Georgia, serif; font-weight:500;
  font-size:var(--fx-titulo); line-height:1.12; margin-top:12px; max-width:22ch;
  transition:transform var(--fx-medio) var(--fx-curva);
}
.fx-siguiente:hover .tit{ transform:translateX(10px); }
.fx-pie{
  margin-top:clamp(44px,6vw,72px); padding-top:26px;
  border-top:1px solid color-mix(in srgb, var(--fx-papel) 14%, transparent);
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center;
  font-size:var(--fx-pie); color:color-mix(in srgb, var(--fx-linea) 70%, transparent);
}
.fx-pie a{ text-decoration:none; }
.fx-pie a:hover{ color:var(--fx-oro); }

/* ── LA APARICION — un solo gesto para todo el portfolio ─────────────────────
   Todo lo que entra lo hace igual: 18 px de subida y opacidad, con LA curva.
   Es barato y es lo que mas hace por la sensacion de acabado. */
.fx-in{ opacity:0; transform:translateY(18px); }
.fx-in.visto{ opacity:1; transform:none;
  transition:opacity var(--fx-medio) var(--fx-curva), transform var(--fx-medio) var(--fx-curva); }
.fx-in[data-espera="1"].visto{ transition-delay:var(--m-paso, 90ms); }
/* 🔴 Eran 90 / 180 / 270 ms escritos a mano. El sistema de movimiento fija el
   escalonado entre hermanos en `--m-paso` (55 ms), y tener DOS escalonados en
   la misma marca —uno en el portfolio y otro en la home— es exactamente el
   problema que el sistema vino a cerrar. Se expresan como múltiplos del paso:
   así se ve, leyendo, que el segundo entra un paso después que el primero. */
.fx-in[data-espera="2"].visto{ transition-delay:calc(var(--m-paso, 90ms) * 2); }
.fx-in[data-espera="3"].visto{ transition-delay:calc(var(--m-paso, 90ms) * 3); }

/* Sin JavaScript, o con animaciones reducidas, TODO se ve. El estado de reposo
   es el que funciona, no el que espera a que algo lo termine. */
html.sin-js .fx-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fx-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Foco visible. En una pagina que va de calidad, esto no es un extra. */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--caso-acento); outline-offset:3px; border-radius:3px;
}
.fx-salta{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--fx-verde); color:var(--fx-papel); padding:12px 20px; text-decoration:none;
}
.fx-salta:focus{ left:0; }
