/* ═══════════════════════════════════════════════════════
   03-orfebreria.css  —  Capa de orfebreria: relieve, luces y animaciones.
   Orden: las hojas se cargan 01→06 y el orden IMPORTA;
   cada una afina la anterior. No las reordenes.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CAPA DE ORFEBRERÍA — el último 5% que separa una web de un
   objeto bien hecho.

   Reglas de la casa:
   · Todo se escribe con [data-tema] delante para ganarle en orden
     a los bloques de tema anteriores sin tocarlos.
   · Se anima transform, opacity y clip-path. Nunca box-shadow,
     nunca top/left, nunca width.
   · Un sistema de sombra, no sombras sueltas: bisel (4 filos de
     1 px) + dos alturas de elevación. Las mismas fichas en día y
     en noche, con distinta tinta.
   · Lo caro (paralaje, barrido de luz, halo del puntero) va
     detrás de @supports o de (hover:hover) y muere con
     prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* filo maquinado: luz arriba, sombra abajo, cantos apenas */
  --bisel:
    inset 0 1px 0 rgba(240,234,226,.075),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 1px 0 0 rgba(240,234,226,.022),
    inset -1px 0 0 rgba(0,0,0,.34);
  --elev-1:0 1px 2px rgba(0,0,0,.55),0 10px 24px -16px rgba(0,0,0,.95);
  --elev-2:0 2px 4px rgba(0,0,0,.5),0 26px 52px -24px rgba(0,0,0,1);
  --hundido:inset 0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(240,234,226,.02);
  --halo:rgba(201,145,100,.14);
  --brillo:rgba(255,255,255,.26);
  --foil-a:#8B5A33; --foil-b:#C99164; --foil-c:#F2D7B8;

  /* contraste: negro más hondo, hueso más limpio */
  --noche:#100F0E; --carbon:#1A1918;
  --hueso:#F0EAE2; --hueso-med:#ADA69E; --filete-db:#35322E;
}
:root[data-tema="dia"]{
  --bisel:
    inset 0 1px 0 #FFFFFF,
    inset 0 -1px 0 rgba(30,29,27,.085),
    inset 1px 0 0 rgba(255,255,255,.8),
    inset -1px 0 0 rgba(30,29,27,.045);
  --elev-1:0 1px 2px rgba(30,29,27,.055),0 12px 26px -18px rgba(30,29,27,.4);
  --elev-2:0 3px 6px rgba(30,29,27,.07),0 28px 54px -26px rgba(30,29,27,.45);
  --hundido:inset 0 1px 2px rgba(30,29,27,.06),inset 0 1px 0 #FFFFFF;
  --halo:rgba(150,96,47,.10);
  --brillo:rgba(255,255,255,.6);
  --foil-a:#6E421D; --foil-b:#96602F; --foil-c:#C08A54;
}

/* ── afinado tipográfico y de sistema ───────────────────────── */
[data-tema] p,[data-tema] dd,[data-tema] li{ text-wrap:pretty; }
[data-tema] .plazo,[data-tema] .ficha dd,[data-tema] .datos dd{
  font-variant-numeric:tabular-nums; letter-spacing:.005em; }
[data-tema]{ accent-color:var(--cobre-luz); }
[data-tema] .campo input,[data-tema] .campo textarea{ caret-color:var(--cobre-luz); }
html{ scrollbar-width:thin; scrollbar-color:var(--cobre-hondo) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--cobre-hondo); background-clip:content-box;
  border:3px solid transparent; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--cobre); background-clip:content-box; }

/* foco: aro de cobre con halo, no un rectángulo del sistema */
[data-tema] a:focus-visible,[data-tema] button:focus-visible,
[data-tema] input:focus-visible,[data-tema] select:focus-visible,
[data-tema] textarea:focus-visible,[data-tema] summary:focus-visible{
  outline:1.5px solid var(--cobre-luz); outline-offset:3px; }
[data-tema] a:focus-visible,[data-tema] summary:focus-visible{
  box-shadow:0 0 0 5px var(--halo); }
[data-tema] .boton:focus-visible,[data-tema] .tema:focus-visible,
[data-tema] .hamburguesa:focus-visible{
  box-shadow:var(--bisel),var(--elev-1),0 0 0 5px var(--halo); }

/* ── filetes que se desvanecen en los extremos ──────────────── */
[data-tema] .linea-sec,[data-tema] .duros,[data-tema] .duros--sec,
[data-tema] .claves,[data-tema] .remate-abajo,[data-tema] .preguntas,
[data-tema] .modulos{
  border-image:linear-gradient(90deg,transparent,var(--filete-db) 9%,
               var(--filete-db) 91%,transparent) 1; }

/* ── sistema de relieve ─────────────────────────────────────── */
[data-tema] .lienzo{ box-shadow:var(--bisel),var(--elev-1);
  transition:border-color .3s var(--curva),box-shadow .3s var(--curva); }
[data-tema] .obra:hover .lienzo,[data-tema] .obra:focus-within .lienzo{
  box-shadow:var(--bisel),var(--elev-2); }
[data-tema] .escenario{ box-shadow:var(--bisel),var(--elev-2); }
[data-tema] .corte{ box-shadow:var(--bisel); }
[data-tema] .tipo-op span{ box-shadow:var(--bisel); }
[data-tema] .campo input,[data-tema] .campo select,[data-tema] .campo textarea{
  box-shadow:var(--hundido); }
[data-tema] .campo input:focus,[data-tema] .campo select:focus,
[data-tema] .campo textarea:focus{ border-color:var(--cobre-luz); }
[data-tema] dialog.visor{ box-shadow:var(--bisel),var(--elev-2); }
[data-tema] .tema,[data-tema] .hamburguesa{ box-shadow:var(--bisel); }

/* botón principal: pieza de metal, no rectángulo de color */
[data-tema] .boton{ position:relative; overflow:hidden;
  background-color:var(--cobre-luz);
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.14));
  box-shadow:var(--bisel),var(--elev-1); }
[data-tema] .boton:hover{ box-shadow:var(--bisel),var(--elev-2); }
[data-tema] .boton--hueco{ background-color:transparent; background-image:none; }
[data-tema="dia"] .boton--hueco{ background-color:var(--carbon); }
[data-tema] .boton--hueco:hover{ background-color:var(--carbon-alto); }
/* barrido especular: una sola pasada de luz al entrar el puntero */
.boton::after{ content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:38%;
  pointer-events:none; opacity:0; transform:translateX(-180%) skewX(-16deg);
  background:linear-gradient(100deg,transparent,var(--brillo),transparent); }
@media (hover:hover){
  .boton:hover::after{ animation:barrido .8s var(--curva) 1; }
}
@keyframes barrido{
  0%  { opacity:0; transform:translateX(-180%) skewX(-16deg); }
  18% { opacity:1; }
  100%{ opacity:0; transform:translateX(320%) skewX(-16deg); }
}

/* ── halo que sigue al puntero (una sola clase, dos usos) ───── */
[data-tema] .modulo{ position:relative; isolation:isolate; }
.modulo::after{ content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:0; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             var(--halo),transparent 68%);
  transition:opacity .35s var(--curva); }
@media (hover:hover){
  .modulo:hover::after{ opacity:1; }
}

/* ── encabezado: hilo de avance de lectura ──────────────────── */
.techo::before{ content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  z-index:2; pointer-events:none; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cobre-hondo),var(--cobre),var(--cobre-luz)); }
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .techo::before{ animation:avance linear both; animation-timeline:scroll(root block); }
    @keyframes avance{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  }
}

/* ── lámina de portada: marcas de corte y medallón guilloché ── */
.escenario::before{ content:""; position:absolute; inset:9px; z-index:6; pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(var(--cobre),var(--cobre)) 0 0/1px 13px no-repeat,
    linear-gradient(var(--cobre),var(--cobre)) 0 0/13px 1px no-repeat,
    linear-gradient(var(--cobre),var(--cobre)) 100% 0/1px 13px no-repeat,
    linear-gradient(var(--cobre),var(--cobre)) 100% 0/13px 1px no-repeat,
    linear-gradient(var(--cobre),var(--cobre)) 0 100%/1px 13px no-repeat,
    linear-gradient(var(--cobre),var(--cobre)) 0 100%/13px 1px no-repeat,
    linear-gradient(var(--cobre),var(--cobre)) 100% 100%/1px 13px no-repeat,
    linear-gradient(var(--cobre),var(--cobre)) 100% 100%/13px 1px no-repeat; }
.escenario::after{ content:""; position:absolute; z-index:1; pointer-events:none;
  top:-58px; right:-58px; width:210px; height:210px; opacity:.13;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 7px,var(--cobre) 7px 7.7px),
    repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 5deg,var(--cobre) 5deg 5.5deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 34%,transparent 70%);
          mask:radial-gradient(circle at 50% 50%,#000 34%,transparent 70%); }
@media (max-width:600px){ .escenario::after{ display:none; } }

/* ── pan de cobre en las etiquetas ──────────────────────────── */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  [data-tema] .rotulo,[data-tema] .lema,[data-tema] .remate h4{
    background-image:linear-gradient(100deg,
      var(--foil-a) 18%,var(--foil-b) 42%,var(--foil-c) 50%,
      var(--foil-b) 58%,var(--foil-a) 82%);
    background-size:280% 100%; background-position:42% 0;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; }
  /* el brillo solo se mueve mientras la etiqueta cruza la pantalla:
     cero trabajo cuando la pagina esta quieta. */
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
      [data-tema] .rotulo,[data-tema] .lema,[data-tema] .remate h4{
        animation:pan-cobre linear both;
        animation-timeline:view(); animation-range:cover 0% cover 100%; }
      @keyframes pan-cobre{ from{ background-position:0% 0; }
                            to  { background-position:190% 0; } }
    }
  }
}
@media (forced-colors:active){
  [data-tema] .rotulo,[data-tema] .lema,[data-tema] .remate h4{
    background-image:none; -webkit-text-fill-color:currentColor; }
}

/* ── revelado: sube, enfoca y se abre ───────────────────────── */
[data-tema] [data-revela]{ opacity:0;
  transform:translate3d(0,20px,0) scale(.988); filter:blur(7px);
  clip-path:inset(0 0 7% 0);
  transition:opacity .72s var(--curva),transform .72s var(--curva),
             filter .72s var(--curva),clip-path .72s var(--curva);
  transition-delay:var(--d,0ms); }
[data-tema] [data-revela].revelado{ opacity:1; transform:none;
  filter:none; clip-path:inset(0 0 0 0); }

/* títulos y fichas: revelado por scroll, sin una línea de JS */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rotulo,.titulo,.guia,.cabeza-obras,.preguntas details,.datos div,.remate-reja > div{
      animation:asoma linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 44%; }
    @keyframes asoma{
      from{ opacity:0; transform:translate3d(0,26px,0); }
      to  { opacity:1; transform:none; } }
    /* paralaje contenida de la foto de portada */
    .fondo-portada img{ animation:deriva linear both;
      animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes deriva{
      from{ transform:scale(1.07) translate3d(0,-1.4%,0); }
      to  { transform:scale(1.07) translate3d(0,2.6%,0); } }
  }
}

/* ── proceso: el punto suelta una onda al encenderse ────────── */
.punto::after{ content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid var(--cobre-luz); opacity:0; pointer-events:none; }
.etapa.visto .punto::after{ animation:onda 1.7s var(--curva) .25s 1 both; }
@keyframes onda{
  0%  { opacity:.75; transform:scale(.55); }
  100%{ opacity:0;   transform:scale(1.6); } }

/* ── navegación: el subrayado nace del centro y enciende ───── */
[data-tema] .timon a::after{ transform-origin:50% 50%;
  background:linear-gradient(90deg,transparent,var(--cobre-luz),transparent); }
[data-tema] .timon a:hover{ color:var(--hueso); }

/* ── menú móvil: los enlaces entran escalonados ─────────────── */
.panel nav a{ opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .45s var(--curva),transform .45s var(--curva); }
.panel.abierto nav a{ opacity:1; transform:none; }
.panel.abierto nav a:nth-child(1){ transition-delay:.05s; }
.panel.abierto nav a:nth-child(2){ transition-delay:.10s; }
.panel.abierto nav a:nth-child(3){ transition-delay:.15s; }
.panel.abierto nav a:nth-child(4){ transition-delay:.20s; }
.panel.abierto nav a:nth-child(5){ transition-delay:.25s; }
.panel .mandos{ opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .45s var(--curva) .3s,transform .45s var(--curva) .3s; }
.panel.abierto .mandos{ opacity:1; transform:none; }

/* ── visor: entra con aire y el fondo se difumina ───────────── */
[data-tema] dialog.visor{ opacity:0; transform:translate3d(0,12px,0) scale(.986);
  transition:opacity .32s var(--curva),transform .32s var(--curva); }
[data-tema] dialog.visor[open]{ opacity:1; transform:none; }
@supports (transition-behavior:allow-discrete){
  [data-tema] dialog.visor{ transition-property:opacity,transform,overlay,display;
    transition-behavior:allow-discrete; }
  @starting-style{
    [data-tema] dialog.visor[open]{ opacity:0; transform:translate3d(0,12px,0) scale(.986); }
  }
}
[data-tema] dialog.visor::backdrop{ backdrop-filter:blur(7px) saturate(.85); }

/* ── reseñas: comilla de imprenta detrás del texto ──────────── */
[data-tema] .dicho{ position:relative; }
.dicho > p:first-of-type::before{ content:"“"; position:absolute; left:.3rem; top:0;
  z-index:-1; font-size:4.2rem; line-height:1; color:var(--cobre);
  opacity:.16; pointer-events:none; font-variation-settings:"wdth" 120; }

/* ── remate: el logo del pie descansa sobre su reflejo ─────── */
[data-tema] .remate .firma img{ filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
[data-tema="dia"] .remate .firma img{ filter:drop-shadow(0 6px 12px rgba(30,29,27,.18)); }

/* ── el ambiente respira muy despacio (12 s, casi imperceptible) */
@media (prefers-reduced-motion:no-preference){
  body::before{ animation:respira 26s ease-in-out infinite alternate; }
  @keyframes respira{ from{ opacity:.88; } to{ opacity:1; } }
}