:root{
  --oro:#FFDC5E;
  --texto:#F4F6FA;
  --suave:rgba(244,246,250,.78);
  --display:'Montserrat',system-ui,sans-serif;
  --cuerpo:'Montserrat',system-ui,sans-serif;

  /* Tamaño y posición de las tarjetas */
  --card-w:200px;
  --card-h:300px;
  --gap:20px;
  --card-left:52%;
  --vel:.75s;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0E1628}
body{font-family:var(--cuerpo);color:var(--texto)}
a{color:inherit}
:focus-visible{outline:3px solid var(--oro);outline-offset:4px}

/* ---------- Encabezado ---------- */
.top{
  position:fixed;z-index:20;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(22px + env(safe-area-inset-top,0px)) clamp(20px,4vw,56px) 22px;
}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:15px}
.marca img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,220,94,.6)}
.wa{font-weight:600;font-size:14px;text-decoration:none;padding:10px 18px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.35);transition:background .2s,transform .2s}
.wa:hover{background:#1EBE5A;transform:translateY(-1px)}
.wa svg{width:20px;height:20px;fill:#fff;flex:none}

/* ---------- Slider ---------- */
.slider{position:relative;width:100%;height:100vh;height:100dvh}

.item{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:var(--card-w);height:var(--card-h);
  border-radius:20px;overflow:hidden;
  background:var(--fondo) center/cover no-repeat;
  box-shadow:0 25px 50px rgba(0,0,0,.45);
  cursor:pointer;border:none;text-align:left;color:inherit;font:inherit;
  transition:
    top var(--vel) ease, left var(--vel) ease, width var(--vel) ease, height var(--vel) ease,
    transform var(--vel) ease, border-radius var(--vel) ease, opacity .5s ease, filter var(--vel) ease;
}
/* Tapa gris transparente con difuminado sobre la imagen de fondo */
.item::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(90,95,105,.45);          /* gris + transparencia */
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);               /* difumina la foto */
}
/* Empresa activa (pantalla completa): más suave para que se aprecie la foto */
.item:nth-child(1)::before{
  background:rgba(70,75,85,.35);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
/* Logo y nombre de la empresa en cada tarjeta */
.item .mini{
  position:absolute;inset:0;padding:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));
  font-weight:700;font-size:15px;line-height:1.25;
  transition:opacity .3s;
}
.item .mini img{width:46%;aspect-ratio:1;height:auto;border-radius:50%;flex:none;
  box-shadow:0 10px 25px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.25)}
.item .mini span{text-shadow:0 2px 8px rgba(0,0,0,.5)}

/* Posición 1: la empresa activa ocupa toda la pantalla */
.item:nth-child(1){
  top:0;left:0;transform:none;width:100%;height:100%;
  border-radius:0;box-shadow:none;cursor:default;
}
.item:nth-child(1) .mini{opacity:0}
/* Velo para que el texto se lea sobre cualquier imagen */
.item:nth-child(1)::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,12,24,.85) 0%,rgba(8,12,24,.45) 45%,rgba(8,12,24,.1) 100%);
}

/* Posiciones 2, 3 y 4: tarjetas a la derecha */
.item:nth-child(2){left:var(--card-left)}
.item:nth-child(3){left:calc(var(--card-left) + var(--card-w) + var(--gap))}
.item:nth-child(4){left:calc(var(--card-left) + (var(--card-w) + var(--gap)) * 2);opacity:.55;filter:saturate(.6)}
.item:nth-child(n+5){left:calc(var(--card-left) + (var(--card-w) + var(--gap)) * 3);opacity:0;pointer-events:none}
.item:nth-child(n+2):hover{transform:translateY(calc(-50% - 10px))}

/* ---------- Contenido de la empresa activa ---------- */
.contenido{
  position:absolute;z-index:2;left:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%);
  width:min(440px,42vw);display:none;
}
.item:nth-child(1) .contenido{display:block}
.contenido > *{opacity:0;animation:subir .7s ease forwards}
.contenido .logo{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.15);animation-delay:.25s}
.contenido .lema{margin-top:22px;font-weight:600;color:var(--c);font-size:15px;animation-delay:.35s}
.contenido h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.4vw,58px);line-height:1.02;margin-top:8px;animation-delay:.45s}
.contenido p{margin-top:18px;line-height:1.6;color:var(--suave);font-size:17px;max-width:40ch;animation-delay:.55s}
.contenido .ir{
  display:inline-flex;margin-top:28px;padding:14px 26px;border-radius:12px;
  background:var(--c);color:var(--sobre);font-weight:600;text-decoration:none;
  animation-delay:.65s;transition:transform .2s,filter .2s;
}
.contenido .ir:hover{filter:brightness(1.08);transform:translateY(-2px)}
@keyframes subir{from{opacity:0;transform:translateY(40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Controles ---------- */
.controles{
  position:fixed;z-index:20;left:50%;transform:translateX(-50%);
  bottom:calc(34px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:18px;
}
.flecha{
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;transition:background .2s;
}
.flecha:hover{background:rgba(255,255,255,.3)}
.flecha svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.contador{font-family:var(--display);font-size:13px;min-width:52px;text-align:center;color:var(--suave)}

/* ---------- Tablet ---------- */
@media (max-width:1000px){
  :root{--card-w:150px;--card-h:220px;--gap:14px;--card-left:56%}
  .contenido{width:min(420px,48vw)}
}
/* ---------- Celular: tarjetas abajo ---------- */
@media (max-width:680px){
  :root{--card-w:110px;--card-h:150px;--gap:12px;--card-left:20px}
  .item:nth-child(n+2){top:auto;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:none}
  .item:nth-child(n+2):hover{transform:none}
  .item:nth-child(4){opacity:.55}
  .item .mini{padding:8px;gap:8px;font-size:10.5px}
  .item:nth-child(1)::after{background:linear-gradient(180deg,rgba(8,12,24,.35) 0%,rgba(8,12,24,.85) 70%)}
  .contenido{top:calc(96px + env(safe-area-inset-top,0px));transform:none;width:auto;right:20px}
  .contenido h2{font-size:34px}
  .contenido p{font-size:15px}
  .wa{padding:8px 14px;font-size:13px}
  .item .mini img{width:54%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}