/* =========================================================
   BITSIDEAS — Productos en tarjetas grandes
   En reposo: fotografía + título. Al acercar el cursor
   aparecen el detalle y el botón hacia el producto.
   ========================================================= */
.pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.pcard{
  position:relative;display:flex;align-items:flex-end;
  height:580px;border-radius:var(--r-xl);overflow:hidden;
  background:var(--brand-900);cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .6s var(--ease-out),box-shadow .5s var(--ease);
}
.pcard:hover,.pcard.is-open{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.pcard:focus-visible{outline:3px solid var(--accent-400);outline-offset:3px}

.pcard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.1s var(--ease-out);
}
.pcard:hover img,.pcard.is-open img{transform:scale(1.12)}

.pcard__scrim{
  position:absolute;inset:0;transition:background .5s var(--ease);
  background:
    linear-gradient(0deg,rgba(24,21,31,.94) 4%,rgba(24,21,31,.5) 42%,rgba(24,21,31,.1) 78%),
    linear-gradient(180deg,rgba(24,21,31,.5) 0%,transparent 26%);
}
.pcard:hover .pcard__scrim,.pcard.is-open .pcard__scrim{
  background:
    linear-gradient(0deg,rgba(18,16,24,.97) 12%,rgba(18,16,24,.82) 48%,rgba(18,16,24,.4) 84%),
    linear-gradient(180deg,rgba(18,16,24,.5) 0%,transparent 26%);
}

.pcard__tag{
  position:absolute;top:26px;left:34px;right:34px;z-index:2;
  font-family:var(--font);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.76);
  transition:color .35s var(--ease);
}
.pcard:hover .pcard__tag,.pcard.is-open .pcard__tag{color:var(--accent-400)}

/* Anclado abajo: la tarjeta no cambia de tamano al desplegarse */
.pcard__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 34px 36px;color:#fff}

.pcard__title{
  font-family:var(--font-light);font-weight:300;font-size:3rem;letter-spacing:.01em;
  line-height:1.05;color:#fff;transition:transform .55s var(--ease-out);
}
.pcard:hover .pcard__title,.pcard.is-open .pcard__title{transform:translateY(-2px)}
/* Subrayado que se dibuja al activar */
.pcard__title::after{
  content:"";display:block;height:2px;width:0;margin-top:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-500),var(--accent-400));
  transition:width .6s var(--ease-out);
}
.pcard:hover .pcard__title::after,.pcard.is-open .pcard__title::after{width:72px}

/* Bloque que se despliega */
.pcard__reveal{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s var(--ease-out),opacity .4s var(--ease),margin-top .5s var(--ease);
}
.pcard:hover .pcard__reveal,.pcard.is-open .pcard__reveal{grid-template-rows:1fr;opacity:1;margin-top:14px}
.pcard__reveal > div{overflow:hidden;min-height:0}

.pcard__claim{font-size:1.06rem;line-height:1.55;color:rgba(255,255,255,.94);max-width:46ch}
.pcard__list{display:flex;flex-direction:column;gap:9px;margin-top:16px;max-width:50ch}
.pcard__list li{
  display:flex;gap:8px;align-items:flex-start;
  font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.84);
}
.pcard__list svg{
  width:12px;height:12px;flex:0 0 auto;margin-top:4px;color:var(--accent-400);
  stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
}

.pcard__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:13px 22px;border-radius:99px;
  background:#fff;color:var(--brand-900);
  font-family:var(--font);font-weight:700;font-size:.92rem;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),transform .4s var(--ease-out);
}
.pcard__go:hover{background:var(--accent-500);color:#fff;transform:translateX(4px)}
.pcard__go svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.pcard__sector{
  display:block;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.72rem;letter-spacing:.03em;color:rgba(255,255,255,.6);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .pcards{grid-template-columns:1fr}
  .pcard{height:520px}
  .pcard__body{padding:28px 26px 30px}
  .pcard__tag{left:26px;right:26px;top:22px}
}
@media (max-width:640px){
  .pcard{height:470px}
  .pcard__title{font-size:2.2rem}
  .pcard__claim{font-size:.98rem}
  .pcard__body{padding:22px 20px 24px}
  .pcard__tag{left:20px;right:20px;top:18px}
}
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard img,.pcard__reveal,.pcard__title::after{transition:none}
}


/* =========================================================
   Profundidad, fondo e iconos animados
   ========================================================= */

/* Sombra en capas: cerca y lejos, mas un halo de marca al activar */
.pcard{
  box-shadow:
    0 2px 4px rgba(24,21,31,.10),
    0 12px 26px rgba(24,21,31,.14),
    0 30px 60px rgba(24,21,31,.16);
}
.pcard:hover,.pcard.is-open{
  box-shadow:
    0 4px 8px rgba(24,21,31,.14),
    0 22px 44px rgba(24,21,31,.22),
    0 54px 100px rgba(24,21,31,.26),
    0 0 0 1px color-mix(in srgb,var(--accent-500) 34%,transparent);
}

/* Halo de color que nace de la esquina al activar la tarjeta */
.pcard__glow{
  position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  background:radial-gradient(70% 55% at 8% 100%,color-mix(in srgb,var(--accent-500) 34%,transparent),transparent 70%);
  transition:opacity .6s var(--ease);
}
.pcard:hover .pcard__glow,.pcard.is-open .pcard__glow{opacity:1}

/* ---------- Icono del producto ---------- */
.pcard__ico{
  position:absolute;top:22px;right:24px;z-index:3;
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;
  transition:transform .55s var(--ease-out),background .4s var(--ease),border-color .4s var(--ease);
}
.pcard:hover .pcard__ico,.pcard.is-open .pcard__ico{
  transform:translateY(-3px) scale(1.06);
  background:rgba(255,255,255,.2);border-color:var(--accent-400);
}
.pcard__ico svg{
  width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}

/* THOMAS — escudo que se traza y visto bueno que se dibuja */
.ic-shield{stroke-dasharray:78;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out)}
.ic-check{stroke-dasharray:17;stroke-dashoffset:0;stroke-width:2.4;color:var(--accent-400);stroke:var(--accent-400)}
.pcard:hover .ic-shield{animation:drawIn .9s var(--ease-out)}
.pcard:hover .ic-check{animation:drawIn .6s var(--ease-out) .3s backwards}
@keyframes drawIn{from{stroke-dashoffset:var(--len,80)}to{stroke-dashoffset:0}}
.ic-shield{--len:78}
.ic-check{--len:17}

/* LUCY — corazon que late y electro que recorre */
.ic-heart{transform-origin:16px 18px}
.pcard:hover .ic-heart,.pcard.is-open .ic-heart{animation:beat 1.5s var(--ease) infinite}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.12)}32%{transform:scale(1)}50%{transform:scale(1.08)}}
.ic-ecg{stroke:var(--accent-400);stroke-width:2.1;stroke-dasharray:9 34;stroke-dashoffset:0}
.pcard:hover .ic-ecg,.pcard.is-open .ic-ecg{animation:ecg 1.8s linear infinite}
@keyframes ecg{to{stroke-dashoffset:-43}}

/* RONALD — volante que gira */
.ic-wheel-rim,.ic-spokes{transform-origin:16px 16px;transition:transform .8s var(--ease-out)}
.pcard:hover .ic-spokes,.pcard.is-open .ic-spokes{animation:steer 3.4s var(--ease) infinite alternate}
.pcard:hover .ic-wheel-rim,.pcard.is-open .ic-wheel-rim{transform:rotate(8deg)}
@keyframes steer{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
.ic-hub{fill:var(--accent-400);stroke:none}

/* EDITH — eslabones que se cierran y destello en la union */
.ic-link{transition:transform .6s var(--ease-out)}
.ic-link--a{transform:translate(1.6px,-1.6px)}
.ic-link--b{transform:translate(-1.6px,1.6px)}
.pcard:hover .ic-link--a,.pcard.is-open .ic-link--a{transform:none}
.pcard:hover .ic-link--b,.pcard.is-open .ic-link--b{transform:none}
.ic-spark{fill:var(--accent-400);stroke:none;opacity:0;transform-origin:16px 16px}
.pcard:hover .ic-spark,.pcard.is-open .ic-spark{animation:sparkle 1.6s var(--ease) .45s infinite}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.25)}}

/* ---------- Fondo animado de la seccion ---------- */
.section--products{position:relative;overflow:hidden;isolation:isolate;background:var(--bg-soft)}
.section--products::before,.section--products::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);z-index:-1;pointer-events:none;
  animation:prodDrift 20s ease-in-out infinite alternate;
}
.section--products::before{
  width:520px;height:520px;top:-120px;left:-140px;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-500) 26%,transparent),transparent 68%);
}
.section--products::after{
  width:460px;height:460px;bottom:-160px;right:-120px;animation-duration:26s;animation-direction:alternate-reverse;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-500) 22%,transparent),transparent 68%);
}
@keyframes prodDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(70px,50px,0) scale(1.16)}}

/* Trama de puntos muy tenue sobre el fondo */
.section--products .container::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}
.section--products .container{position:relative}

@media (prefers-reduced-motion:reduce){
  .ic-heart,.ic-ecg,.ic-spokes,.ic-spark,.ic-shield,.ic-check,
  .section--products::before,.section--products::after{animation:none}
}