/* ============================================================
   AHI · material de vidrio
   Receta adaptada de Glassy UI (MIT, © 2026 Glassy UI contributors,
   github.com/alexburlis/glassyui): frost + bisel de luz en sombras
   internas + anillo especular de 1 px. Sin la lente SVG (solo Chromium).

   Reglas:
   - El vidrio necesita algo detrás: úsalo solo sobre secciones .night
     (degradado + flujo), nunca sobre el paper plano de .day.
   - El tinte sale de --navy / --night, así que el modo patrimonial lo
     vuelve verde solo (realm.css anima esas variables). No hay colores nuevos.
   - Los botones se asientan al pulsar; nunca crecen.
   - Sin transparencia (preferencia del sistema, contraste alto o sin
     backdrop-filter) el vidrio pasa a fondo sólido.
   ============================================================ */

:root{
  --glass-blur:16px;
  --glass-sat:1.5;
  --glass-tint:color-mix(in srgb,var(--navy) 34%,transparent);
  --glass-tint-strong:color-mix(in srgb,var(--night) 62%,transparent);
  --glass-solid:var(--navy-soft);
  /* luz fija desde arriba a la izquierda */
  --glass-sheen:linear-gradient(160deg,rgb(255 255 255/.075) 0%,rgb(255 255 255/0) 42%);
  --glass-rim:
    inset 0 0 12px -4px rgb(255 255 255/.10),
    inset 1.5px 2.5px 1px -2px rgb(255 255 255/.34),
    inset -1.5px -2px 1px -2px rgb(255 255 255/.22),
    inset -.3px -1px 4px 0 rgb(0 0 0/.14),
    inset 0 3px 4px -2px rgb(0 0 0/.18),
    inset 2px 0 3px -1px rgb(80 160 255/.06),
    inset -2px 0 3px -1px rgb(255 90 150/.06);
  --glass-shadow:0 1px 2px rgb(0 0 0/.18),0 18px 40px -16px rgb(0 0 0/.5);
  --glass-shadow-raised:0 2px 6px rgb(0 0 0/.2),0 30px 60px -18px rgb(0 0 0/.6);
  --glass-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- material base ---------- */
.glass,
header.stuck .bar,
.night .quote,
#contacto form,
.form-card,.plans .plan,.home{
  position:relative;isolation:isolate;
  background:var(--glass-sheen),var(--glass-tint);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-rim),var(--glass-shadow);
}
/* anillo especular: hairline más brillante arriba-izquierda, contraluz abajo-derecha */
.glass::before,
header.stuck .bar::before,
.night .quote::before,
#contacto form::before,
.form-card::before,.plans .plan::before,.home::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom right,
    rgb(255 255 255/.42) 0%,rgb(255 255 255/.07) 32%,rgb(255 255 255/.07) 68%,rgb(255 255 255/.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

/* ---------- header: cápsula flotante al hacer scroll ---------- */
header.stuck{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent;padding-inline:12px}
header .bar{transition:padding .4s var(--glass-ease),max-width .4s var(--glass-ease),border-radius .4s}
header.stuck .bar{
  max-width:calc(var(--max) - 2 * var(--pad));
  padding:8px 8px 8px clamp(16px,2vw,24px);border-radius:100px;
  background:var(--glass-sheen),var(--glass-tint-strong);
}

/* ---------- tarjetas del blog (testimonios) ---------- */
.night .quote{border-color:transparent;
  transition:opacity .9s var(--glass-ease) var(--d,0s),transform .5s var(--glass-ease),background .5s,box-shadow .5s}
.night .quote:hover{
  transform:translateY(-6px);border-color:transparent;
  background:var(--glass-sheen),color-mix(in srgb,var(--navy) 50%,transparent);
  box-shadow:var(--glass-rim),var(--glass-shadow-raised);
}

/* ---------- formulario de contacto: una placa de vidrio ---------- */
#contacto form{padding:clamp(22px,3vw,38px);border-radius:24px}

/* ---------- landings y brochures ---------- */
.form-card{background:var(--glass-sheen),var(--glass-tint-strong);border-color:transparent}
.plans .plan,.home{border-color:transparent}
.home:hover,.home:focus-visible{background:var(--glass-sheen),color-mix(in srgb,var(--cyan) 16%,transparent)}
/* cabecera de los brochures: banda de vidrio con filo de luz abajo */
.hdr{
  background:var(--glass-sheen),var(--glass-tint-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom-color:rgb(255 255 255/.12);
  box-shadow:inset 0 -1px 0 rgb(255 255 255/.06),0 10px 30px -18px rgb(0 0 0/.6);
}

/* ---------- botones: placas que se asientan, nunca crecen ---------- */
.btn:active{transform:translateY(1px);box-shadow:none;transition-duration:.12s}

/* CTA principal: vidrio tintado de cyan (el tinte es denso para que la
   etiqueta oscura mantenga el contraste sobre cualquier fondo) */
.btn:not(.ghost),
.form-card button[type=submit],
a.wa-flotante{
  -webkit-backdrop-filter:blur(10px) saturate(1.6);
  backdrop-filter:blur(10px) saturate(1.6);
}
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn>*{position:relative;z-index:1}
.btn:not(.ghost),
.form-card button[type=submit]{
  background:var(--glass-sheen),color-mix(in srgb,var(--cyan) 76%,transparent);
  box-shadow:var(--glass-rim),0 10px 26px -12px color-mix(in srgb,var(--cyan) 70%,transparent);
}
/* CTA secundario: vidrio claro */
.btn.ghost{
  background:var(--glass-sheen),rgb(255 255 255/.04);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color:transparent;box-shadow:var(--glass-rim),var(--glass-shadow);
}
/* Hover: en vez de llenarse de pintura opaca, la luz sube dentro del vidrio
   (el barrido ::after es un velo translúcido; se define entero aquí para que
   también lo tengan las páginas que no traían barrido, como los brochures) */
.btn::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  transform:translateY(101%);transition:transform .45s var(--glass-ease)}
.btn:hover::after{transform:translateY(0)}
.btn:not(.ghost)::after{background:rgb(255 255 255/.26)}
.form-card button[type=submit]:hover{background:var(--glass-sheen),linear-gradient(rgb(255 255 255/.22) 0 0),color-mix(in srgb,var(--cyan) 76%,transparent)}
/* Cotizar (brochures): vidrio coral, texto blanco */
.btn.cotizar,.btn.cotizar:hover{color:#fff;
  background:var(--glass-sheen),rgb(237 103 97/.82);
  box-shadow:var(--glass-rim),0 10px 26px -12px rgb(237 103 97/.7)}
.btn.cotizar::after{background:rgb(255 255 255/.1)}
.btn.ghost::after{background:color-mix(in srgb,var(--cyan) 22%,transparent)}
.btn:not(.ghost):hover{box-shadow:var(--glass-rim),0 16px 40px -14px color-mix(in srgb,var(--cyan) 65%,transparent)}
.btn.ghost:hover{color:var(--fg);border-color:transparent;
  background:var(--glass-sheen),rgb(255 255 255/.04);box-shadow:var(--glass-rim),var(--glass-shadow-raised)}
/* WhatsApp: conserva su verde para que se reconozca, pero en vidrio */
a.wa-flotante{
  isolation:isolate;
  background:var(--glass-sheen),rgb(37 211 102/.74);
  box-shadow:var(--glass-rim),0 10px 28px -10px rgb(0 0 0/.55);
}
a.wa-flotante:hover{background:var(--glass-sheen),linear-gradient(rgb(255 255 255/.14) 0 0),rgb(37 211 102/.74)}
a.wa-flotante:hover{box-shadow:var(--glass-rim),0 14px 32px -10px rgb(0 0 0/.6)}
a.wa-flotante:active{transform:translateY(1px)}
/* anillo especular de los botones */
.btn::before,
.form-card button[type=submit]::before,
a.wa-flotante::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom right,
    rgb(255 255 255/.55) 0%,rgb(255 255 255/.1) 35%,rgb(255 255 255/.1) 65%,rgb(255 255 255/.28) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

/* ---------- sin vidrio: fondo sólido ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,header.stuck .bar,.night .quote,#contacto form,.form-card,.plans .plan,.home{background:var(--glass-solid)}
  .hdr{background:var(--night)}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .glass,header.stuck .bar,.night .quote,.night .quote:hover,#contacto form,
  .form-card,.plans .plan,.home,.home:hover{
    background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  header.stuck .bar,.hdr{background:var(--night);-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn:not(.ghost),.form-card button[type=submit]{background:var(--cyan)}
  .btn.cotizar,.btn.cotizar:hover{background:var(--coral)}
  .btn.ghost{background:transparent;border-color:var(--line)}
  a.wa-flotante{background:#25d366}
  .btn,.form-card button[type=submit],a.wa-flotante{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .glass::before,header.stuck .bar::before,.night .quote::before,#contacto form::before,
  .form-card::before,.plans .plan::before,.home::before{background:currentColor;opacity:.5}
}
@media (max-width:980px){
  header.stuck{padding-inline:10px}
  header.stuck .bar{max-width:none}
}