/* fueros.css — LAYOUT que replica la ESTRUCTURA de su referencia.
   Mapa: specs/replicas/farragua.md · escrito de cero, ni una regla suya.

   CARACTER MEDIDO, y es el mas extremo de los diez: un solo tono, #0d0d0d, ocupa
   el 94,5 % de la pantalla. Saturacion 0,093 y calidez 0,0. CERO COLOR: si aqui
   aparece un color, esta mal. El diseno vive de un contraste unico —un rotulo
   enorme con tracking de 18 px contra un cuerpo de peso 100 a 13 px— y de no tener
   NADA mas: ni un degradado, ni una trama, ni un velo.

   Lo que lo distingue de un vistazo: negro absoluto, letras muy separadas, y las
   fotos en blanco y negro.

   Tipografias OFL parecidas pero no identicas: Oswald (condensada, muy espaciada)
   e Inter ligera. */

body[data-estilo="fueros"]{
  --fu-fondo:#0a0a0a;
  --fu-txt:#f5f2ec;
  --fu-suave:#8f8a80;
  --fu-linea:rgba(245,242,236,.14);
  --tipo-titulo:"Anton","Arial Narrow",Impact,sans-serif;
  --tipo-cuerpo:"Inter",system-ui,-apple-system,sans-serif;
  --acento:#f2f2f2;--acento-texto:#0b0b0b;
  background:var(--fu-fondo);color:var(--fu-txt);font-family:var(--tipo-cuerpo);
  font-weight:300;
}

/* ── nav: marca pequena a la izquierda, enlaces a la DERECHA ───────────── */
body[data-estilo="fueros"] .fu-nav{
  position:relative;display:flex;align-items:center;gap:1rem;
  padding:1rem 1.2rem;padding-top:calc(1rem + env(safe-area-inset-top,0px))}
body[data-estilo="fueros"] .fu-marca{
  font-family:var(--tipo-titulo);font-size:.82rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--fu-txt);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;
  display:inline-flex;align-items:center;min-height:44px}
/* ENVUELVEN (31/08). Iban en una fila con `overflow-x:auto` y la barra
   suprimida: a 390 px 'Dónde' y 'Llamar' quedaban FUERA y solo se veia una
   palabra partida. Mismo patron que dejo POP fuera de pantalla el 18/08. */
body[data-estilo="fueros"] .fu-enl{display:flex;gap:1.2rem;margin-left:auto;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  flex-wrap:wrap;row-gap:.35rem;overflow-x:visible;scrollbar-width:none}
body[data-estilo="fueros"] .fu-enl::-webkit-scrollbar{display:none}
body[data-estilo="fueros"] .fu-enl a{color:var(--fu-suave);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 .1rem}

/* ── hero TIPOGRAFICO: el rotulo manda, la foto acompana ───────────────── */
body[data-estilo="fueros"] .fu-hero{
  display:grid;gap:1.8rem;padding:2rem 1.2rem 3rem;align-items:center}
body[data-estilo="fueros"] .fu-nombre{
  font-family:var(--tipo-titulo);font-weight:500;text-transform:uppercase;
  /* Las letras MUY separadas son la mitad del diseno. En movil se afloja, porque
     con 18 px de tracking un nombre largo no cabe ni partido. */
  letter-spacing:.18em;line-height:1.04;margin:0 0 1rem;
  font-size:clamp(1.8rem,10vw,4.4rem);overflow-wrap:break-word}
body[data-estilo="fueros"] .fu-linea{
  margin:0;font-weight:200;font-size:.86rem;line-height:1.7;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fu-suave);max-width:40ch}
body[data-estilo="fueros"] .fu-retrato{margin:0}
/* Blanco y negro de alto contraste, como su retrato. */
body[data-estilo="fueros"] .fu-retrato img,
body[data-estilo="fueros"] .fu-cel img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.18)}

/* ── el bloque de PREGUNTAS ────────────────────────────────────────────── */
body[data-estilo="fueros"] .fu-preguntas{
  display:grid;gap:2.4rem;padding:2.4rem 1.2rem;border-top:1px solid var(--fu-linea)}
body[data-estilo="fueros"] .fu-col{min-width:0}
body[data-estilo="fueros"] .fu-preg{
  font-family:var(--tipo-titulo);font-weight:400;text-transform:uppercase;
  letter-spacing:.16em;font-size:1.15rem;margin:0 0 .9rem}
body[data-estilo="fueros"] .fu-resp{margin:0 0 .8rem;font-size:.86rem;line-height:1.8;
  color:var(--fu-suave);max-width:52ch}
body[data-estilo="fueros"] .fu-lista{margin:0 0 1rem;padding:0;list-style:none;
  font-size:.86rem}
body[data-estilo="fueros"] .fu-lista li{display:flex;justify-content:space-between;
  gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--fu-linea)}
body[data-estilo="fueros"] .fu-lista b{font-weight:500;
  font-variant-numeric:tabular-nums}
body[data-estilo="fueros"] .fu-cerrado{opacity:.55}
body[data-estilo="fueros"] .fu-chip{display:inline-flex;gap:.4rem;margin:0 0 .9rem;
  padding:.3rem .7rem;border:1px solid var(--fu-linea);font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase}
body[data-estilo="fueros"] .fu-chip:empty{display:none}
body[data-estilo="fueros"] .fu-chip .ri-si,
body[data-estilo="fueros"] .fu-chip .ri-no{color:var(--fu-txt)}
/* Blanco, plano y discreto: en la referencia los botones casi no existen. */
body[data-estilo="fueros"] .fu-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.7rem 1.4rem;background:var(--fu-txt);color:var(--fu-fondo);
  text-decoration:none;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}
body[data-estilo="fueros"] .fu-tel{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--tipo-titulo);font-size:1.6rem;letter-spacing:.06em;
  color:var(--fu-txt);text-decoration:none}

/* ── fotos y donde ─────────────────────────────────────────────────────── */
body[data-estilo="fueros"] .fu-fotos{display:grid;gap:.6rem;padding:0 1.2rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(clamp(130px,44%,240px),1fr))}
body[data-estilo="fueros"] .fu-cel{margin:0}
body[data-estilo="fueros"] .fu-donde{padding:2.4rem 1.2rem;
  border-top:1px solid var(--fu-linea)}
body[data-estilo="fueros"] .fu-dir{display:inline-flex;align-items:center;
  min-height:44px;color:var(--fu-txt);text-decoration:none;font-size:.9rem;
  letter-spacing:.06em;margin-bottom:1rem}

body[data-estilo="fueros"] .rp{background:#000;color:var(--fu-suave);
  padding:2.4rem 1.2rem calc(2.6rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--fu-linea)}
body[data-estilo="fueros"] .rp-nom{font-family:var(--tipo-titulo);
  text-transform:uppercase;letter-spacing:.24em;color:var(--fu-txt)}
body[data-estilo="fueros"] .rp a{color:var(--fu-txt)}
body[data-estilo="fueros"] .rp-enl a{display:inline-flex;align-items:center;
  min-height:44px}
body[data-estilo="fueros"] .rv{background:var(--fu-txt);color:var(--fu-fondo)}

@media (min-width:900px){
  body[data-estilo="fueros"] .fu-nav{padding:1.4rem 3rem}
  body[data-estilo="fueros"] .fu-marca{font-size:.9rem;max-width:none}
  body[data-estilo="fueros"] .fu-enl{gap:2.2rem;font-size:.76rem;overflow:visible}
  body[data-estilo="fueros"] .fu-hero{grid-template-columns:1.15fr .85fr;
    gap:3rem;padding:4rem 3rem 5rem}
  /* A 1440 si cabe el tracking grande: aqui es donde se ve el rotulo de galeria. */
  body[data-estilo="fueros"] .fu-nombre{letter-spacing:.26em}
  body[data-estilo="fueros"] .fu-preguntas{grid-template-columns:repeat(4,1fr);
    gap:2.6rem;padding:3.4rem 3rem}
  body[data-estilo="fueros"] .fu-fotos{padding:0 3rem 3.4rem}
  body[data-estilo="fueros"] .fu-donde{padding:3.4rem 3rem}
  body[data-estilo="fueros"] .fu-tel{font-size:2rem}
}

/* El mapa se sirve a 640 px: estirado a todo el ancho de la seccion se ve
   pixelado, y CO3 lo canto. Se queda en su tamano, alineado a la izquierda como
   el resto de este layout. */
body[data-estilo="fueros"] .rm{display:block;max-width:640px}

/* La frase de las fotos: una linea sobria, del mismo peso que el resto
   de la pagina. La referencia no tiene ni un degradado. */
.fu-frase{grid-column:1/-1;margin:0 0 14px;font-size:15px;letter-spacing:.02em;color:var(--fu-suave)}

/* ── T-ACABADO · FARRAGUA ───────────────────────────────────────────────────
   Negro puro y una tipografia de cartel. Los botones son rectangulos de 2 px de
   radio: aqui no hay nada redondo. */
/* EL REPOSO ES EL GRIS: su mapa dice que las fotos de Farragua van en blanco y
   negro, y eso vale tambien sin JavaScript y con el movimiento apagado. El color
   es lo que se GANA al entrar, no el punto de partida. */
body[data-estilo="fueros"] img{filter:grayscale(1) contrast(1.15)}
body[data-estilo="fueros"] .fu-t{font-family:var(--tipo-titulo);font-weight:400;
  line-height:.98;letter-spacing:.01em;font-size:clamp(30px,9vw,48px)}
body[data-estilo="fueros"] .fu-btn,
body[data-estilo="fueros"] .rb{border-radius:2px}

/* ── FIRMA · "TIPOGRAFIA VIVA" ───────────────────────────────────────────────
   Corte seco en los titulares, secciones que invierten y foto que gana color. */
/* `.fu-rotulo` ENTRA AQUI (31/08). `firma.js` le pone `ff-corte` desde siempre,
   pero el estado inicial solo nombraba a `.fu-nombre` y `.fu-preg`: el titular del
   hero recibia unicamente el final y se quedaba con un recorte fijo que no revelaba
   nada y le cortaba las letras. Sergio lo vio partido por la mitad en su movil. */
body.fj[data-estilo="fueros"] .fu-nombre,
body.fj[data-estilo="fueros"] .fu-rotulo,
body.fj[data-estilo="fueros"] .fu-preg{clip-path:inset(0 0 92% 0);
  transition:clip-path .85s cubic-bezier(.16,.84,.44,1)}
/* El final SUELTA la tinta: `inset(0)` deja el recorte pegado al borde de la caja y
   una tipografia de cartel pinta fuera de su caja de linea. `-.35em` sigue siendo
   interpolable, asi que la animacion es la misma y ya no corta nada. */
body.fj[data-estilo="fueros"] .ff-corte{clip-path:inset(-.35em 0 -.35em 0)}
body.fq[data-estilo="fueros"] .fu-nombre,
body.fq[data-estilo="fueros"] .fu-rotulo,
body.fq[data-estilo="fueros"] .fu-preg{clip-path:none;transition:none}

body.fj[data-estilo="fueros"] .ff-invertida{background:var(--fu-txt);color:var(--fu-fondo)}
body.fj[data-estilo="fueros"] .ff-invertida .fu-preg,
body.fj[data-estilo="fueros"] .ff-invertida a{color:var(--fu-fondo)}

body.fj[data-estilo="fueros"] .fu-cel img,
body.fj[data-estilo="fueros"] .fu-fotos img{filter:grayscale(1) contrast(1.15);
  transition:filter 1.1s ease}
body.fj[data-estilo="fueros"] img.ff-color{filter:contrast(1.15) saturate(.9)}
body.fq[data-estilo="fueros"] .fu-cel img,
body.fq[data-estilo="fueros"] .fu-fotos img{filter:grayscale(1) contrast(1.15);
  transition:none}

/* ── ENTRADA DE SECCION · la pone la FIRMA ─────────────────────────────────
   El reveal generico se apago en los diez: entraban las diez igual y por eso
   se parecian. Cada una entra ahora con su idea. */
/* Corte seco: el bloque se descubre de una vez, sin desvanecerse. */
/* OJO AL 100%: un elemento recortado DEL TODO tiene area cero, y el observador
   no lo ve entrar NUNCA -medido: sus cuatro secciones se quedaban recortadas para
   siempre-. Se deja un filo de 8%: el corte sigue siendo seco y el observador
   tiene algo que ver. */
body.fj[data-estilo="fueros"] main > section{clip-path:inset(0 92% 0 0);
  transition:clip-path .6s cubic-bezier(.16,.84,.44,1)}
body.fj[data-estilo="fueros"] main > section.ff-bloque{clip-path:inset(0 0 0 0)}
body.fq[data-estilo="fueros"] main > section{clip-path:none;transition:none}