/* ═══════════════════════════════════════════════════════
   04-cristal.css  —  Cristal: botones y proyectos en vidrio templado.
   Orden: las hojas se cargan 01→06 y el orden IMPORTA;
   cada una afina la anterior. No las reordenes.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CRISTAL — botones y proyectos en vidrio templado

   No es el glassmorphism de plantilla (blanco al 10 % y a correr).
   Aquí el cristal tiene grosor: tinte propio, canto biselado de
   1 px, casquete de luz arriba, sombra proyectada corta y el
   fondo desenfocado POR DEBAJO. Tres reglas:

   1. Contraste primero: el tinte del CTA va al 88 % en noche y al
      94 % en día (el texto claro sobre cobre necesita 4.5:1). El
      cristal nunca se come la palabra.
   2. El desenfoque cuesta. Se enciende solo donde se ve (no en
      móvil, donde detrás de la tarjeta no hay nada que desenfocar)
      y el velo del proyecto lo activa el hover, no la carga.
   3. Sin backdrop-filter el sitio no se rompe: @supports devuelve
      superficies opacas con el mismo color.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --radio-v:9px;
  --vidrio:rgba(38,35,33,.52);          /* cristal neutro           */
  --vidrio-firme:rgba(30,28,26,.78);    /* cristal con más cuerpo   */
  --vidrio-cta:rgba(201,145,100,.88);   /* cristal de cobre (CTA)   */
  --vidrio-borde:rgba(240,234,226,.16);
  --vidrio-borde-cta:rgba(255,235,215,.42);
  --vidrio-luz:rgba(255,255,255,.16);   /* casquete superior        */
  --vidrio-cara:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%,rgba(0,0,0,.20));
  --bisel-v:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.28),
            inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(0,0,0,.16);
}
:root[data-tema="dia"]{
  --vidrio:rgba(255,255,255,.6);
  --vidrio-firme:rgba(255,255,255,.82);
  --vidrio-cta:rgba(124,76,34,.94);   /* mas cuerpo: el texto claro necesita 4.5:1 */
  --vidrio-borde:rgba(255,255,255,.85);
  --vidrio-borde-cta:rgba(255,232,209,.34);
  --vidrio-luz:rgba(255,255,255,.75);
  --vidrio-cara:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 48%,rgba(30,29,27,.10));
  --bisel-v:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(30,29,27,.10),
            inset 1px 0 0 rgba(255,255,255,.5),inset -1px 0 0 rgba(30,29,27,.05);
}

/* ── botón principal: lente de cobre ────────────────────────── */
[data-tema] .boton{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--radio-v);
  border:1px solid var(--vidrio-borde-cta);
  background-color:var(--vidrio-cta);
  background-image:var(--vidrio-cara);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
          backdrop-filter:blur(16px) saturate(170%);
  box-shadow:var(--bisel-v),var(--elev-1);
  transition:background-color .2s var(--curva),border-color .2s var(--curva),
             color .2s var(--curva),transform .2s var(--curva),
             box-shadow .28s var(--curva); }
[data-tema] .boton:hover{ background-color:var(--cobre-toque);
  border-color:var(--vidrio-borde-cta); box-shadow:var(--bisel-v),var(--elev-2); }
[data-tema] .boton:active{ transform:translateY(0) scale(.988); }

/* casquete de luz: la curvatura del vidrio, no un degradado plano */
.boton::before{ content:""; position:absolute; z-index:-1;
  left:1px; right:1px; top:1px; height:52%; pointer-events:none;
  border-radius:8px 8px 50% 50%/8px 8px 16px 16px;
  background:linear-gradient(180deg,var(--vidrio-luz),transparent 82%); }
.boton::after{ z-index:-1; }

/* ── botón secundario: cristal claro ────────────────────────── */
[data-tema] .boton--hueco{
  background-color:var(--vidrio); background-image:var(--vidrio-cara);
  border-color:var(--vidrio-borde); color:var(--hueso);
  box-shadow:var(--bisel-v),var(--elev-1); }
[data-tema] .boton--hueco:hover{ background-color:var(--vidrio-firme);
  border-color:var(--cobre-luz); color:var(--hueso); }

/* ── controles del encabezado: mismas lentes, formato cuadrado ─ */
[data-tema] .tema,[data-tema] .hamburguesa{
  border-radius:var(--radio-v);
  background-color:var(--vidrio); background-image:var(--vidrio-cara);
  border-color:var(--vidrio-borde);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--bisel-v); }
[data-tema] .tema:hover,[data-tema] .hamburguesa:hover{
  background-color:var(--vidrio-firme); border-color:var(--cobre-luz); }

/* ── proyectos: el vidrio es el MARCO DE LA FOTO ────────────────
   Antes la placa de vidrio era la tarjeta entera y la foto iba
   dentro. Al pasar a filas editoriales eso deja de funcionar: la
   fila mide todo el ancho de la página, así que el vidrio salía
   como un panel enorme detrás del texto, con la foto pegada en un
   extremo. Dos rectángulos, uno dentro de otro, en cada fila.

   Ahora el vidrio enmarca solo la foto. La ficha va sobre el fondo
   del sitio, sin caja: es texto, y el texto no necesita bandeja. */
[data-tema] .lienzo{
  border-radius:12px;   /* la familia del cristal: 9 botón, 12 ficha, 14 visor */
  border-color:var(--vidrio-borde);
  background-color:var(--vidrio);
  background-image:linear-gradient(180deg,var(--vidrio-luz),transparent 38%);
  box-shadow:var(--bisel-v),var(--elev-1); }
[data-tema] .obra:hover .lienzo,[data-tema] .obra:focus-within .lienzo{
  border-color:var(--cobre-luz); box-shadow:var(--bisel-v),var(--elev-2); }

/* velo del proyecto: banda esmerilada que sube desde el canto.
   La máscara recorta el desenfoque, así la foto solo se hiela
   abajo y arriba sigue nítida. */

/* lente de aumento: pastilla de vidrio que asoma al pasar ───── */
.lupa::before,.lupa::after{ content:""; position:absolute; pointer-events:none;
  opacity:0; transform:scale(.8) translate3d(0,-6px,0);
  transition:opacity .3s var(--curva),transform .38s var(--curva); }
.lupa::before{ top:.7rem; right:.7rem; width:42px; height:42px; border-radius:50%;
  background:var(--vidrio-firme); border:1px solid var(--vidrio-borde);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
          backdrop-filter:blur(12px) saturate(150%);
  box-shadow:var(--bisel-v),var(--elev-1); }
.lupa::after{ top:1.32rem; right:1.32rem; width:19px; height:19px; color:var(--hueso);
  background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat; }
.obra:hover .lupa::before,.obra:hover .lupa::after,
.obra:focus-within .lupa::before,.obra:focus-within .lupa::after{
  opacity:1; transform:none; }
/* en táctil no hay "pasar encima": la lupa se queda puesta. Antes se
   encendía con un toque, pero ese toque servía para abrir el velo, y
   el velo ya no existe: tocar la foto ahora abre el visor y nada más. */
@media (hover:none){
  .lupa::before,.lupa::after{ opacity:1; transform:none; } }
.lupa:hover::before{ border-color:var(--cobre-luz); }

/* ── visor: la misma lente, a tamaño de sala ────────────────── */
[data-tema] dialog.visor{
  border-radius:14px; border-color:var(--vidrio-borde);
  background-color:var(--vidrio-firme); background-image:var(--vidrio-cara);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
          backdrop-filter:blur(26px) saturate(160%);
  box-shadow:var(--bisel-v),var(--elev-2); }
[data-tema] .visor-pie{ border-top-color:var(--vidrio-borde); }

/* ── sin backdrop-filter: mismo color, superficie opaca ─────── */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  [data-tema] .boton{ background-color:var(--cobre-luz); }
  [data-tema] .boton--hueco,[data-tema] .tema,[data-tema] .hamburguesa,
  [data-tema] .lienzo,[data-tema] dialog.visor,.lupa::before{
    background-color:var(--carbon); }
}