/* ══════════════════════════════════════════════════════════════
   BORDES DE PERFIL — hoja aparte, a propósito
   ══════════════════════════════════════════════════════════════

   Esto vivía dentro de portal.css y ESTABA MAL: portal.css sólo se carga
   en las plantillas del panel del artista (ver ea_portal_templates()), y
   la tarjeta que lleva el borde está en /artistas-originales, que es una
   página pública. Con el CSS ahí dentro, el artista veía su borde en la
   Tienda EncuadrArte —donde sí hay portal.css— y no lo veía en el único
   lugar donde importa, que es el listado que mira el público.

   Por eso es un archivo suelto que se encola en todo el sitio: son unos
   pocos kilobytes de reglas que no hacen absolutamente nada mientras la
   tarjeta no lleve la clase .ea-bd-*, y así no hay ninguna lista de
   plantillas que se pueda quedar corta mañana.

   Las tres reglas que se repiten en todos los bordes:
     · position:relative en la tarjeta, para colgar las capas
     · pointer-events:none en las capas, para no tapar el botón
     · z-index bajo, para quedar detrás del contenido

   Y la que no se rompe: el efecto va SIEMPRE sobre ::before y ::after y
   nunca sobre el 'border' real de la tarjeta. Cambiar el borde de verdad
   movería el contenido unos píxeles al activarse, y en una grilla eso se
   ve como un salto.
══════════════════════════════════════════════════════════════ */
.ea-bd { position:relative; }
.ea-bd::before,
.ea-bd::after { pointer-events:none; }

/* ── Básicos ─────────────────────────────────────────────────── */
.ea-bd-fino::before {
  content:''; position:absolute; inset:6px; z-index:0;
  border:1px solid rgba(17,17,17,.22); border-radius:8px;
}
.ea-bd-sombra { box-shadow:0 10px 28px rgba(20,16,12,.13); }

/* ── Clásicos ────────────────────────────────────────────────── */
.ea-bd-doble::before {
  content:''; position:absolute; inset:5px; z-index:0;
  border:1px solid rgba(17,17,17,.3); border-radius:8px;
}
.ea-bd-doble::after {
  content:''; position:absolute; inset:11px; z-index:0;
  border:1px solid rgba(17,17,17,.14); border-radius:5px;
}

/* El margen blanco de un cuadro enmarcado de verdad */
.ea-bd-passepartout {
  background:#fff;
  box-shadow:inset 0 0 0 14px #fff, inset 0 0 0 15px rgba(17,17,17,.16),
             0 6px 20px rgba(20,16,12,.1);
}

/* Solo las cuatro esquinas, como una foto de archivo */
.ea-bd-esquinas::before,
.ea-bd-esquinas::after {
  content:''; position:absolute; z-index:0; width:26px; height:26px;
  border:2px solid rgba(17,17,17,.45);
}
.ea-bd-esquinas::before {
  top:7px; left:7px; border-right:0; border-bottom:0; border-radius:6px 0 0 0;
  box-shadow:none;
}
.ea-bd-esquinas::after {
  bottom:7px; right:7px; border-left:0; border-top:0; border-radius:0 0 6px 0;
}

/* Relieve, como una moldura de madera */
.ea-bd-moldura {
  box-shadow:inset 0 0 0 6px #f3f0ea, inset 0 0 0 7px rgba(17,17,17,.18),
             inset 2px 2px 4px rgba(255,255,255,.9), 0 4px 14px rgba(20,16,12,.12);
}

/* Contorno irregular, como pintado a mano: el radio disparejo es a
   propósito, es lo que quita la sensación de recuadro perfecto */
.ea-bd-trazo::before {
  content:''; position:absolute; inset:5px; z-index:0;
  border:2px solid rgba(17,17,17,.5);
  border-radius:14px 4px 12px 6px / 6px 12px 4px 14px;
}

/* ── Animados ────────────────────────────────────────────────── */

/* ── BRILLO ──────────────────────────────────────────────────────
   Portado del componente ShineBorder (React + Tailwind). El original
   gira un degradado cónico desenfocado detrás de la tarjeta y tapa el
   centro con el fondo; aquí es lo mismo con dos capas:
     ::before  el anillo de color girando, con desenfoque
     ::after   una capa del color de la tarjeta que tapa el centro y
               deja ver solo el marco
   El contenido va con z-index para quedar sobre las dos.

   No se usa 'mask-composite' como en los otros bordes porque aquí hace
   falta el desenfoque, y el blur atravesaría la máscara: con dos capas
   el difuminado queda contenido. */
.ea-bd-brillo {
  --ea-bd-grosor: 2px;
  --ea-bd-vuelta: 4s;
  position:relative; overflow:hidden; isolation:isolate;
}
.ea-bd-brillo::before {
  content:''; position:absolute; z-index:0;
  /* más grande que la tarjeta para que al girar no aparezcan esquinas */
  left:-75%; top:-75%; width:250%; height:250%;
  background:conic-gradient(from 0deg, #3b82f6, #ef4444, #2dd4bf, #3b82f6);
  filter:blur(6px);
  animation:ea-bd-spin var(--ea-bd-vuelta) linear infinite;
}
.ea-bd-brillo::after {
  content:''; position:absolute; z-index:0;
  inset:var(--ea-bd-grosor); border-radius:inherit;
  background:#fff;
}
/* El contenido de la tarjeta, por encima de las dos capas */
.ea-bd-brillo > * { position:relative; z-index:1; }
@keyframes ea-bd-spin { to { transform:rotate(360deg); } }

/* Un destello que da la vuelta. El truco es un degradado cónico girando
   dentro de una máscara con forma de marco. */
.ea-bd-luz::before {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  padding:2px;
  background:conic-gradient(from var(--ea-bd-ang, 0deg),
    transparent 0deg, transparent 300deg, rgba(17,17,17,.55) 340deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ea-bd-girar 6s linear infinite;
}
@property --ea-bd-ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes ea-bd-girar { to { --ea-bd-ang:360deg; } }

/* Si el navegador no soporta @property, el degradado no gira: se queda
   quieto y sigue viéndose como un marco. No se rompe nada. */

.ea-bd-respira::before {
  content:''; position:absolute; inset:5px; z-index:0;
  border:1.5px solid rgba(17,17,17,.35); border-radius:9px;
  animation:ea-bd-respirar 4.5s ease-in-out infinite;
}
@keyframes ea-bd-respirar {
  0%, 100% { opacity:.28; }
  50%      { opacity:1; }
}

.ea-bd-degradado::before {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg, #0c6d62, #12a594 45%, #8a6d3b);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background-size:200% 200%;
  animation:ea-bd-mover 8s ease-in-out infinite;
}
@keyframes ea-bd-mover {
  0%, 100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}

.ea-bd-oro::before {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  padding:3px;
  background:linear-gradient(115deg, #b8912f, #f0dda0 25%, #a8862c 45%, #f7ecc6 60%, #b8912f);
  background-size:250% 250%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ea-bd-mover 7s ease-in-out infinite;
}

/* ── DOBLE HAZ ─────────────────────────────────────────────────────
   Portado del componente Border Beam Panel (React + Tailwind). El
   original tiene DOS cometas —dos manchas de luz que recorren el borde,
   con una cola que se apaga detrás— más un resorte de velocidad que
   acelera al pasar el mouse. Ese resorte se dejó fuera a propósito: tiene
   sentido en una tarjeta grande y sola; en un listado con muchas tarjetas
   chicas, encender JS y un oyente por tarjeta para ese detalle no vale lo
   que cuesta. Lo que sí se portó es lo permanente: dos cometas de colores
   distintos —azul/celeste y coral, los mismos del componente original—
   dando la vuelta, con un resplandor difuminado detrás del anillo.

   Misma técnica que "Luz que recorre": degradado cónico + máscara de dos
   capas para cortar el anillo, girando con @property. La capa ::after es
   el resplandor: el MISMO degradado, más grande y desenfocado, detrás. */
.ea-bd-haz {
  --ea-bd-hz-vuelta: 8.5s;   /* 42°/s, la velocidad de reposo del original */
}
.ea-bd-haz::before {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  padding:2px;
  background:conic-gradient(from var(--ea-bd-hz, 0deg),
    transparent 0deg,
    rgba(59,130,246,.10) 20deg, rgba(59,130,246,.65) 42deg,
    #22c7d9 54deg, #eafcff 58deg, transparent 64deg,
    transparent 196deg,
    rgba(255,107,94,.10) 216deg, rgba(255,107,94,.6) 238deg,
    #ff6b5e 250deg, #fff1ef 254deg, transparent 260deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ea-bd-girar-haz var(--ea-bd-hz-vuelta) linear infinite;
}
.ea-bd-haz::after {
  content:''; position:absolute; inset:-9px; z-index:-1; border-radius:inherit;
  background:conic-gradient(from var(--ea-bd-hz, 0deg),
    transparent 0deg, transparent 30deg,
    rgba(59,130,246,.55) 50deg, transparent 66deg,
    transparent 206deg,
    rgba(255,107,94,.5) 246deg, transparent 262deg,
    transparent 360deg);
  filter:blur(11px); opacity:.6;
  animation:ea-bd-girar-haz var(--ea-bd-hz-vuelta) linear infinite;
}
@property --ea-bd-hz { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes ea-bd-girar-haz { to { --ea-bd-hz:360deg; } }
/* Sin soporte de @property el degradado no gira: queda quieto y se sigue
   viendo como un anillo de dos colores. No se rompe nada. */

/* ── MUROS ─────────────────────────────────────────────────────────
   No son un marco: es el FONDO completo de la tarjeta, una foto real de
   assets/img/muros/ (las mismas del simulador de cuadros personalizados).
   Comparten esta única clase —no hay una regla por foto posible, ver la
   nota en inc/bordes.php—; la foto entra por --ea-bd-muro-url, puesta en
   la propia tarjeta con ea_borde_estilo_tarjeta().

   Va DETRÁS de un velo blanco en degradado, no a la vista pelada: arriba,
   donde solo está la foto de perfil, se deja ver casi entera —lee como un
   cuadro colgado en la pared—; abajo, donde está el nombre y el botón, el
   velo se cierra casi del todo para que el texto se siga leyendo pase lo
   que pase con la foto de esa pared. Sin esto, un muro oscuro deja el
   texto negro ilegible; con el velo, da lo mismo qué foto sea. */
.ea-bd-muro { background:#fdfdfc; }
.ea-bd-muro::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image:var(--ea-bd-muro-url);
  background-size:cover; background-position:center;
  filter:saturate(.92);
}
.ea-bd-muro::after {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.90) 44%,
    rgba(255,255,255,.97) 100%);
}
.ea-bd-muro > * { position:relative; z-index:1; }

/* Quien pidió menos movimiento ve los marcos quietos, no sin marco */
@media (prefers-reduced-motion:reduce) {
  .ea-bd-brillo::before,
  .ea-bd-luz::before,
  .ea-bd-respira::before,
  .ea-bd-degradado::before,
  .ea-bd-oro::before,
  .ea-bd-haz::before,
  .ea-bd-haz::after { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════
   CRISTAL — la tarjeta como una ventana
   ───────────────────────────────────────────────────────────────
   La tarjeta deja de tener fondo propio: el fondo pasa a ser el mini-fondo
   del tema que el artista eligió para su tienda (.ea-sw-<clave>, que llega
   como segunda clase desde ea_borde_clase()). Encima va una lámina de
   vidrio —la capa ::after, con desenfoque y un velo bajo— para que se
   entienda que hay un cristal delante y no una foto pegada.

   El velo es bajo a propósito: lo que se tiene que reconocer es el fondo de
   la tienda del artista. Y por eso el desenfoque es corto: con más, todos
   los fondos terminarían pareciendo la misma mancha.
═══════════════════════════════════════════════════════════════ */
.artista-card.ea-bd-cristal {
  position: relative;
  isolation: isolate;
  /* Lo que se salga se recorta siguiendo la curva de la tarjeta: es lo que
     permite estirar el fondo por debajo del borde sin que asome fuera. */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.5),
    inset -1.5px -1.5px 1px 0 rgba(255,255,255,.3),
    0 10px 30px rgba(0,0,0,.14);
  /* NO se toca el background-size: cada .ea-sw-* trae el suyo, pensado para
     que el dibujo del fondo se vea como es —una cuadrícula con su paso, unos
     puntos de su tamaño—. Estirarlo con `cover` convertía cualquier trama en
     un manchón de color, y por eso no se reconocía el fondo detrás. */
}
.artista-card.ea-bd-cristal::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Velo bajo y desenfoque corto: lo que hay que reconocer es el fondo de la
     tienda del artista. Con más de esto todos los fondos terminaban
     pareciendo la misma tarjeta de color.

     El velo NO es parejo: aprieta donde va el texto —el centro y el pie de
     la tarjeta— y se abre en las esquinas, que es donde se luce el fondo.
     Sin eso, el contraste dependía del fondo que cada artista eligiera y
     había combinaciones en las que el nombre no se leía. */
  background:
    /* Un brillo diagonal muy leve, para que se lea como vidrio... */
    linear-gradient(135deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.06) 100%),
    /* ...y encima un velo PAREJO, del mismo valor en toda la tarjeta.
       Antes era un degradado que arriba llegaba a cero, y ahí el fondo se
       escapaba a plena intensidad: en tramas como Puntos se notaba el filo
       entre la zona velada y la que no. */
    linear-gradient(rgba(255,255,255,.48), rgba(255,255,255,.48));
  -webkit-backdrop-filter: blur(2.5px) saturate(125%);
  backdrop-filter: blur(2.5px) saturate(125%);
}
/* Halo bajo el texto, el mismo recurso que usa la tienda sobre los fondos
   inquietos. Un velo parejo no alcanza contra las tramas de blanco y negro
   puros —Barras, Trama diagonal—: donde cae una raya negra bajo una letra
   negra, el contraste es 1 a 1 por mucho velo que se ponga. El halo va con
   la letra, así que la salva caiga donde caiga. */
.artista-card.ea-bd-cristal .artista-nombre,
.artista-card.ea-bd-cristal .artista-especialidad,
.artista-card.ea-bd-cristal .artista-obras,
.artista-card.ea-bd-cristal .artista-lema {
  text-shadow:
    0 1px 2px rgba(255,255,255,.9),
    0 0 10px rgba(255,255,255,.75);
}
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-nombre,
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-especialidad,
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-obras,
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-lema {
  text-shadow:
    0 1px 3px rgba(0,0,0,.85),
    0 0 12px rgba(0,0,0,.7);
}
/* El badge y el botón se apoyan en su propio fondo, no en el halo */
.artista-card.ea-bd-cristal .artista-badge {
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Sobre fondo claro la tinta se oscurece: los grises suaves del listado
   —"Artista original · Chile", "3 obras disponibles"— se perdían encima de
   un fondo casi blanco. */
.artista-card.ea-bd-cristal:not(.ea-bd-cristal-oscuro) .artista-nombre { color: #0d0d0d; }
.artista-card.ea-bd-cristal:not(.ea-bd-cristal-oscuro) .artista-especialidad,
.artista-card.ea-bd-cristal:not(.ea-bd-cristal-oscuro) .artista-obras,
.artista-card.ea-bd-cristal:not(.ea-bd-cristal-oscuro) .artista-lema { color: #3f3f3f; }
.artista-card.ea-bd-cristal:not(.ea-bd-cristal-oscuro) .artista-badge {
  color: #1f1f1f; border-color: rgba(0,0,0,.35); background: rgba(255,255,255,.5);
}
/* El fondo vivo, debajo de todo; el cristal encima; el contenido arriba. */
/* El iframe se dibuja SIEMPRE a 1200x900 y después se encoge con una escala.
   Metido a 340 px en bruto, los fondos pensados para pantalla completa se
   deforman: "Haces" pasaba de unos haces de luz anchos a un rayado apretado
   de blanco y negro. Rendido en grande y escalado, cada fondo se ve como
   es, solo que más chico. La escala la calcula el guion de page-artistas.php
   según lo que mida la tarjeta. */
.artista-card.ea-bd-cristal .ea-bd-cristal-fondo {
  /* -2px y no 0: la tarjeta tiene un borde de 1px, y como esto se posiciona
     por dentro de ese borde quedaba un marco fino sin cubrir por los cuatro
     lados. Con tramas finas —Puntos, por ejemplo— ese marco se veía como una
     guarda de confeti alrededor del cristal. El sobrante lo recorta el
     overflow de la tarjeta, respetando su curva. */
  position: absolute; top: -2px; left: -2px; z-index: 0;
  width: 1200px; height: 900px; border: 0; display: block;
  transform-origin: top left;
  transform: scale(var(--ea-cristal-escala, .34));
  pointer-events: none;
  /* Mientras carga se ve la miniatura del fondo que ya trae la tarjeta, así
     que no hace falta ningún color de espera. */
  background: transparent;
}
.artista-card.ea-bd-cristal::after { z-index: 1; }
.artista-card.ea-bd-cristal > *:not(.ea-bd-cristal-fondo) { position: relative; z-index: 2; }

/* Sobre un fondo oscuro la tinta se invierte, o no se lee nada.
   El velo también cambia de color: blanco sobre negro lo agrisaba. */
/* Sobre fondo oscuro el velo se invierte: en vez de aclarar, oscurece
   donde va el texto blanco. Misma idea, al revés. */
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro::after {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.09) 0%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,.05) 100%),
    /* Parejo también aquí, pero oscureciendo: el texto es blanco. */
    linear-gradient(rgba(0,0,0,.46), rgba(0,0,0,.46));
}
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro { border-color: rgba(255,255,255,.3); }
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-nombre,
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-lema { color: #fff; }
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-especialidad,
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-obras { color: rgba(255,255,255,.82); }
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-badge {
  background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35);
}
.artista-card.ea-bd-cristal.ea-bd-cristal-oscuro .artista-foto-wrap { border-color: rgba(255,255,255,.6); }

/* La muestra de la vitrina lleva el fondo de verdad —la clase .ea-sw-* se
   la pone ea_borde_clase_muestra()—, así que aquí solo hay que repetirle el
   cristal y la tinta, porque sus elementos se llaman distinto que los de la
   tarjeta real (.ea-bdm-* en vez de .artista-*). */
.ea-borde-muestra.ea-bd-cristal {
  position: relative; isolation: isolate;
}
.ea-borde-muestra.ea-bd-cristal::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.06) 100%),
    linear-gradient(rgba(255,255,255,.48), rgba(255,255,255,.48));
  -webkit-backdrop-filter: blur(2.5px) saturate(125%);
  backdrop-filter: blur(2.5px) saturate(125%);
}
.ea-borde-muestra.ea-bd-cristal > * { position: relative; z-index: 1; }
.ea-borde-muestra.ea-bd-cristal.ea-bd-cristal-oscuro::after {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.09) 0%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,.05) 100%),
    linear-gradient(rgba(0,0,0,.46), rgba(0,0,0,.46));
}
.ea-borde-muestra.ea-bd-cristal.ea-bd-cristal-oscuro .ea-bdm-nombre { color: #fff; }
.ea-borde-muestra.ea-bd-cristal.ea-bd-cristal-oscuro .ea-bdm-sub,
.ea-borde-muestra.ea-bd-cristal.ea-bd-cristal-oscuro .ea-bdm-obras { color: rgba(255,255,255,.85); }
.ea-borde-muestra.ea-bd-cristal.ea-bd-cristal-oscuro .ea-bdm-badge {
  color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14);
}