/* ═══════════════════════════════════════════════════════════════════════════
   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:#141D27; --l-teal:#005565; --l-teal-alto:#006D82; --l-salvia:#7D9B5B;
  --l-crema:#EADFCE; --l-agua:#006D82; --l-salvia-clara:#7D9B5B;   /* sólo relleno (rombos, filetes); el texto e íconos sobre tinta van en crema */
}
body{ background-color:var(--l-hondo) !important; }
.ambient-background{ opacity:.55; }

/* ── La portada: fotos en movimiento ─────────────────────────────────────── */
/* La portada ocupa la pantalla entera (Luis, 2026-09-22: «que esa línea 'El ecosistema de
   Terranova\origen' no se vea en esta primera pantalla»): lo que sigue empieza de verdad
   abajo, y la foto manda sola en el primer golpe de vista. */
header.lujo-hero{ position:relative; min-height:100svh; min-height:100dvh;
  padding:4.5rem 1.5rem 7.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:400 !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:400;
  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: flota sobre el borde de la foto (su forma, en accesos-prisma.css · LA PRIMERA PANTALLA) ── */
#buscador-proveedores{ position:relative; z-index:20; margin-top:-9rem !important; }

/* ── Las secciones ───────────────────────────────────────────────────────── */
#sections-container{ padding-top:4.5rem; }
#sections-container > section{ margin-bottom:5rem !important; }
#sections-container > section h2{ font-family:Marcellus, 'PP Fragment Glare', Georgia, serif !important; font-style:normal; 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-crema) !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:400; }

@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; }
}

/* ── NIDO · Accesos: el nombre del portal, bajo el logo de la casa ────────────────────────────
   ACCESOS MANDA (Luis, 2026-09-28: «Accesos debería ser lo que cause el boom y NIDO un poco más
   pequeño: la gente piensa que el sistema se llama NIDO, y NIDO sólo es esta plataforma; PRISMA
   es el sistema que está abajo»). Eligió la propuesta C, «monumental»: ACCESOS toma la voz de
   versalitas amplias que antes tenía NIDO, más grande; NIDO queda como sello colgado de un hilo
   bajo la marca, y su significado va en versalitas finas. El logo conserva su tamaño de siempre.
   Son reglas globales: la portada de carga (#nido-portada, en index.html) usa las mismas clases y
   así las dos pantallas siguen calzando. */
body > header.lujo-hero h1 + p, body > header.lujo-hero [data-lang-key="main_subtitle"]{ display:none !important; }
.nido{ display:flex; flex-direction:column; align-items:center; gap:0; margin-top:1.4rem; text-align:center;
  animation:nidoAparece 1.6s cubic-bezier(.2,.8,.2,1) .2s both; }
.nido__raya{ width:1px; height:34px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.7)); margin:0 0 .9rem; }
.nido__nombre{ font-family:Figtree, system-ui, sans-serif; font-size:1.15rem; line-height:1; letter-spacing:.7em; padding-left:.7em; color:rgba(255,255,255,.92); }
.nido__funcion{ margin-top:1rem; font-family:Marcellus, Georgia, serif; font-size:clamp(3.1rem, 7.2vw, 6.4rem); line-height:1;
  letter-spacing:.16em; padding-left:.16em; text-transform:uppercase; color:#FFFFFF; }
.nido__siglas{ margin:1.2rem 0 0; font-family:Figtree, system-ui, sans-serif; font-size:.84rem; line-height:1.6; letter-spacing:.3em; padding-left:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.82); }
.nido__siglas b{ font-weight:400; color:#FFFFFF; }
@keyframes nidoAparece{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .nido{ animation:none; } }
@media (max-width:640px){
  .nido__nombre{ font-size:.92rem; letter-spacing:.6em; padding-left:.6em; }
  .nido__funcion{ font-size:clamp(2rem, 10.2vw, 2.8rem); letter-spacing:.1em; padding-left:.1em; }
  .nido__siglas{ font-size:.62rem; letter-spacing:.14em; padding-left:.14em; } }

/* La equis del navegador sobra: el buscador ya trae la suya, con la letra de la casa
   (Luis, 2026-09-22: «aparecen dos X, y una es azul»). La azul era la nativa de Chrome. */
#bp-input::-webkit-search-cancel-button, #bp-input::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }
#bp-input::-ms-clear{ display:none; width:0; height:0; }

/* ── QUE SE LEA SOBRE CUALQUIER FOTO (Luis, 2026-09-22) ─────────────────────────────────
   Hay fotos claras —la niebla de Monteverde, la arena de Puerto Viejo— donde el logo y el
   nombre se perdían. Se refuerza la letra, no el velo: una sombra corta que la despega. */
.lujo-logo, #nido-portada .lujo-logo{ filter:drop-shadow(0 4px 14px rgba(11,20,28,.75)) drop-shadow(0 10px 40px rgba(11,20,28,.5)) !important; }
.nido__nombre, .nido__funcion, .nido__siglas, .lujo-lugar,
#nido-portada .nido__nombre, #nido-portada .nido__funcion, #nido-portada .nido__siglas{
  text-shadow:0 2px 6px rgba(11,20,28,.72), 0 12px 38px rgba(11,20,28,.55) !important; }
.nido__raya{ box-shadow:0 1px 6px rgba(11,20,28,.6); }