/* =====================================================================
   cristal.css  —  Textura de CRISTAL (glassmorphism)
   Se aplica a: botones rectangulares, botones redondos (categorias + logo)
   y a los bordes de las tarjetas y del banner.
   Pega este archivo al FINAL de tu estilos.css, o enlazalo despues de el:
   <link rel="stylesheet" href="assets/css/cristal.css">
   ===================================================================== */

/* ---------- BOTONES RECTANGULARES (nav amarilla) ---------- */
.btn-sub{
  color:#5b3d05;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(250,215,120,.62), rgba(227,166,47,.46));
  -webkit-backdrop-filter:blur(9px) saturate(1.3);
  backdrop-filter:blur(9px) saturate(1.3);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -8px 16px rgba(227,166,47,.16),
    0 8px 20px rgba(227,166,47,.26);
}
.btn-sub:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-sub:active{ transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(120,80,10,.25), 0 4px 12px rgba(227,166,47,.24); }

/* ---------- BOTON CTA (Buscar cerca de mi) ---------- */
.btn-cerca{
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(140,137,224,.7), rgba(95,92,194,.62));
  -webkit-backdrop-filter:blur(9px) saturate(1.2);
  backdrop-filter:blur(9px) saturate(1.2);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -8px 16px rgba(60,55,140,.25),
    0 10px 24px rgba(95,92,194,.32);
}

/* Botones secundarios (ejemplo / quitar orden) en cristal claro */
.btn-reset{
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.18));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6);
  color:var(--tinta);
}

/* ---------- BOTONES REDONDOS (categorias) = esferas de cristal ---------- */
.cat__circulo{
  position:relative;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.75),
    inset 0 -10px 18px rgba(40,30,60,.16),
    0 8px 22px rgba(60,50,90,.24);
}
/* brillo de cristal por encima de la imagen (reflejo tipo esfera) */
.cat__circulo::after{

.cat.is-activa .cat__circulo{
  border-color:rgba(255,255,255,.85);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(40,30,60,.18),
    0 0 0 4px rgba(154,151,224,.3),
    0 10px 26px rgba(122,118,212,.42);
}

/* ---------- LOGO redondo con brillo de cristal (sutil) ---------- */
.logo{ position:relative; border:1px solid rgba(255,255,255,.7); }
.logo::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(60% 45% at 34% 22%, rgba(255,255,255,.7), rgba(255,255,255,0) 62%);
  pointer-events:none; z-index:2;
}

/* ---------- BORDES DE TARJETAS (imagenes) tipo cristal ---------- */
.tarjeta{
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 12px 30px rgba(60,40,70,.22);
}
.tarjeta:hover{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 20px 44px rgba(150,60,140,.3);
}
/* filo brillante sobre el borde (destello de cristal) */
.tarjeta::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%);
  mix-blend-mode:screen; pointer-events:none; z-index:1;
}
.tarjeta__velo{ z-index:2; }  /* el texto queda sobre el destello */

/* ---------- BORDE DEL BANNER tipo cristal ---------- */
.carrusel__pista{
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 16px 40px rgba(60,50,80,.22);
}
.carrusel__pista::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 -30px 60px rgba(40,60,50,.12);
  pointer-events:none; z-index:3;
}