/* ═══════════════════════════════════════════════════════════════════════════
   ACCESOS · LA LÍNEA DE LUJO (2026-09-21, pedido de Luis)
   ───────────────────────────────────────────────────────────────────────────
   Accesos es donde empieza todo. Una portada de cine —fotos de Costa Rica que se
   funden con un acercamiento lento—, el buscador flotando sobre ella como una pieza
   de vidrio, secciones con títulos en serif y placas de vidrio en lugar de píldoras,
   y el logo de la casa como cierre. Paleta de Terranova origen.

   ES REVERSIBLE: vive en este archivo y en accesos-lujo.js, cargados al final de
   index.html. Para volver al diseño anterior se borran esas dos líneas.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --l-navy:#1A2633; --l-hondo:#0B141C; --l-teal:#005565; --l-teal-alto:#006D82; --l-salvia:#7D9B5B;
  --l-crema:#EADFCE; --l-agua:#8FC7CF; --l-salvia-clara:#AFC690;
}
body{ background-color:var(--l-hondo) !important; }
.ambient-background{ opacity:.55; }

/* ── La portada: fotos en movimiento ─────────────────────────────────────── */
header.lujo-hero{ position:relative; padding:4.5rem 1.5rem 11.5rem !important; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; isolation:isolate; }
.lujo-diapos{ position:absolute; inset:0; z-index:-3;
  /* La foto se desvanece hacia el fondo de la página: sin corte al terminar la portada. */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%); }
.lujo-diapo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  transform:scale(1.12); transition:opacity 2.2s ease, transform 11s linear; will-change:opacity, transform; }
.lujo-diapo.activa{ opacity:1; transform:scale(1.0); }
/* Sin velo sobre la foto: arriba y abajo una sombra para que el logo y el buscador se lean, y
   abajo se funde con el fondo de la página. */
.lujo-velo{ position:absolute; inset:0; z-index:-2; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  background:
    linear-gradient(to bottom, rgba(11,20,28,.55) 0%, rgba(11,20,28,0) 26%),
    radial-gradient(ellipse at 50% 46%, rgba(11,20,28,.38) 0%, rgba(11,20,28,0) 55%),
    linear-gradient(to top, rgba(11,20,28,.5) 0%, rgba(11,20,28,.35) 30%, rgba(11,20,28,0) 60%); }
header.lujo-hero .animate-float{ animation:none !important; }
header.lujo-hero h1{ display:none !important; }
header.lujo-hero .max-w-xs{ display:none !important; }            /* la estrella suelta: el logo ya la trae */
.lujo-logo{ width:min(620px, 82vw); height:auto; filter:drop-shadow(0 6px 26px rgba(0,0,0,.55)); margin:0 0 1.6rem;
  animation:lujoAparece 1.6s cubic-bezier(.2,.7,.2,1) both; }
header.lujo-hero [data-lang-key="main_subtitle"]{ color:var(--l-crema) !important; letter-spacing:.55em !important; font-weight:600 !important;
  font-size:.78rem !important; text-shadow:0 2px 14px rgba(0,0,0,.7); padding-left:.55em; animation:lujoAparece 1.6s .25s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lujoAparece{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.lujo-pie{ position:relative; align-self:stretch; margin-top:3.2rem; display:flex; justify-content:space-between; align-items:center;
  padding:0 clamp(1.2rem,4vw,3.5rem); pointer-events:none; }
.lujo-lugar{ font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--l-crema); font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,.8); transition:opacity .8s; }
.lujo-barras{ display:flex; gap:.45rem; }
.lujo-barras i{ position:relative; width:34px; height:2px; background:rgba(234,223,206,.28); overflow:hidden; border-radius:2px; }
.lujo-barras i::after{ content:""; position:absolute; inset:0; background:var(--l-crema); transform:scaleX(0); transform-origin:left; }
.lujo-barras i.hecha::after{ transform:scaleX(1); }
.lujo-barras i.activa::after{ animation:lujoAvanza var(--lujo-t,8s) linear forwards; }
@keyframes lujoAvanza{ to{ transform:scaleX(1); } }
.lujo-bajar{ display:none; position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); color:rgba(234,223,206,.6); font-size:.9rem;
  animation:lujoBaja 2.4s ease-in-out infinite; pointer-events:none; }
@keyframes lujoBaja{ 50%{ transform:translate(-50%, 6px); opacity:.35; } }

/* ── El buscador: vidrio flotando sobre el borde de la foto ─────────────── */
#buscador-proveedores{ position:relative; z-index:20; margin-top:-9rem !important; }
#buscador-proveedores .bp-caja{ background:rgba(13,23,32,.55) !important; backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(234,223,206,.22) !important; border-radius:18px !important; box-shadow:0 30px 60px -28px rgba(0,0,0,.9) !important; }
#buscador-proveedores .bp-caja:focus-within{ border-color:rgba(143,199,207,.6) !important; box-shadow:0 0 0 4px rgba(0,109,130,.25), 0 30px 60px -28px rgba(0,0,0,.9) !important; }

/* ── Las secciones ───────────────────────────────────────────────────────── */
#sections-container{ padding-top:4.5rem; }
#sections-container > section{ margin-bottom:5rem !important; }
#sections-container > section h2{ font-family:'Playfair Display', Georgia, serif !important; font-style:italic; font-weight:400 !important;
  letter-spacing:.01em !important; color:var(--l-crema) !important; font-size:clamp(2rem,3.4vw,2.75rem) !important; }
#sections-container > section .elegant-green-glow{ max-width:14rem !important; filter:none !important; }
#sections-container > section .elegant-green-glow .h-\[1px\]{ background:linear-gradient(to right, transparent, rgba(234,223,206,.45)) !important; }
#sections-container > section .elegant-green-glow .h-\[1px\]:last-child{ background:linear-gradient(to left, transparent, rgba(234,223,206,.45)) !important; }
#sections-container > section .elegant-green-glow .rotate-45{ width:5px !important; height:5px !important; background:var(--l-agua) !important; }

/* Las placas: vidrio, esquinas suaves, se elevan con un brillo teal. */
a[data-button-id]{ border-radius:16px !important; background:linear-gradient(160deg, rgba(234,223,206,.055), rgba(234,223,206,.018)) !important;
  border:1px solid rgba(234,223,206,.13) !important; box-shadow:0 18px 40px -26px rgba(0,0,0,.9) !important;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .5s, background .5s !important; }
a[data-button-id]:hover{ transform:translateY(-4px); border-color:rgba(143,199,207,.55) !important;
  background:linear-gradient(160deg, rgba(0,109,130,.24), rgba(125,155,91,.08)) !important;
  box-shadow:0 28px 50px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(143,199,207,.12) !important; }
/* El brillo de cada placa: de la paleta, no de colores sueltos. */
a[data-button-id] > .absolute.inset-0{ background:linear-gradient(135deg, rgba(0,109,130,.26), rgba(125,155,91,.10) 60%, transparent) !important; }
/* Un filete que se dibuja bajo la placa al pasar. */
a[data-button-id]::after{ content:""; position:absolute; left:1.4rem; right:1.4rem; bottom:0; height:1px; z-index:25;
  background:linear-gradient(90deg, transparent, var(--l-salvia-clara), transparent); transform:scaleX(0); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
a[data-button-id]:hover::after{ transform:scaleX(1); }
a[data-button-id] .w-10.h-10{ background:rgba(11,20,28,.55) !important; border-color:rgba(234,223,206,.22) !important; }
a[data-button-id] .icon-base-green{ color:var(--l-salvia-clara) !important; }
a[data-button-id] .button-name-text{ color:var(--l-crema) !important; letter-spacing:.01em; }
.copy-icon-btn{ border-radius:12px !important; }

/* ── El cierre: el pie de siempre, con el logo de la casa (y el acceso de administración) ── */
footer.lujo-cierre{ background:transparent !important; border:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  padding:3.5rem 1.5rem 4.5rem !important; }
footer.lujo-cierre > .max-w-md, footer.lujo-cierre #lock-container{ display:none !important; }   /* la estrella y el texto viejos */
.lujo-cierre-marca{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.lujo-cierre-marca::before{ content:""; width:min(520px,70vw); height:1px; margin-bottom:2.2rem;
  background:linear-gradient(90deg, transparent, rgba(234,223,206,.35), transparent); }
.lujo-cierre-marca img{ height:40px; width:auto; opacity:.9; cursor:pointer; transition:opacity .3s; }
.lujo-cierre-marca img:hover{ opacity:1; }
.lujo-cierre-marca p{ margin:0; font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(234,223,206,.6); font-weight:600; }

@media (max-width:640px){
  header.lujo-hero{ padding-top:4.5rem !important; }
  .lujo-pie{ margin-top:2.4rem; }
  .lujo-barras i{ width:20px; }
}
@media (prefers-reduced-motion:reduce){
  .lujo-diapo{ transition:opacity .6s ease; transform:none !important; }
  .lujo-bajar, .lujo-logo, header.lujo-hero [data-lang-key="main_subtitle"]{ animation:none !important; }
}