/* OCEANSING — Portal web.
   Misma identidad visual de las FlipCard de Suite, sin giro.
   Únicamente incorpora banner, logotipo superpuesto y botón ABRIR. */
.web-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(13px, 1.5vw, 22px);
  align-items: stretch;
}
.web-program-card {
  --web-accent: #a3c6e9;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 445px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 19px;
  border: 1px solid rgba(255, 255, 255, .19);
  /* Exactamente la gama y el difuminado suave de la tarjeta original. */
  background:
    radial-gradient(ellipse at 70% 45%, color-mix(in srgb, var(--web-accent) 12%, transparent), transparent 63%),
    linear-gradient(146deg, #1a1a1c, #101012 85%);
  color: #f5f5f5;
  box-shadow: 0 17px 32px rgba(0, 0, 0, .28);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.web-program-card:hover,
.web-program-card:focus-within {
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 22px 42px rgba(0, 0, 0, .34);
}
.web-program-card--azul { --web-accent: #3ba9ee; }
.web-program-card--naranja { --web-accent: #ff9b23; }
.web-program-card--rosa { --web-accent: #f3356c; }
.web-program-card--hielo { --web-accent: #b1ddf0; }
.web-program-card--violeta { --web-accent: #a999f9; }
.web-program-card--rojo { --web-accent: #ff6653; }
.web-program-card--verde { --web-accent: #95d28e; }
.web-program-card--amarillo { --web-accent: #eaca76; }

/* El banner no altera el color del resto de la tarjeta. */
.web-program-card__banner {
  position: relative;
  width: 100%;
  height: clamp(145px, 13.5vw, 190px);
  flex: 0 0 auto;
  overflow: hidden;
  background: #0d0e11;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.web-program-card__banner > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.web-program-card__banner::after {
  content: '';
  position: absolute;
  inset: 55% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11, 12, 15, .32));
}
.web-program-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 60px 19px 21px;
}
/* Misma imagen original, sin recortes; se superpone al borde del banner. */
.web-program-card__logo {
  position: absolute;
  top: -53px;
  left: 19px;
  width: 105px;
  height: 105px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .28));
}
.web-program-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  color: rgba(255, 255, 255, .6);
  font: 700 9px/1.5 'Courier New', monospace;
  letter-spacing: .07em;
}
.web-program-card__meta span:last-child {
  color: rgba(255, 255, 255, .66);
  font-size: 8px;
  text-align: right;
}
.web-program-card__category {
  color: var(--web-accent);
  font: 700 9px/1.5 'Courier New', monospace;
  letter-spacing: .1em;
  margin-top: 17px;
}
/* Recupera tamaños, peso y espaciado de .flip-card__front-bottom h3 */
.web-program-card__name {
  margin: 8px 0 7px;
  color: #f5f5f5;
  font: 500 clamp(21px, 2vw, 26px)/1.08 Arial, Helvetica, sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.web-program-card__description {
  margin: 0 0 13px;
  color: rgba(255, 255, 255, .6);
  font: 400 12px/1.55 Arial, Helvetica, sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.web-program-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.web-program-card__foot > span {
  flex: 1 1 115px;
  color: rgba(255, 255, 255, .55);
  font: 700 9px/1.35 'Courier New', monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.web-program-card__open {
  flex: 0 0 auto;
  min-width: 92px;
  height: 43px;
  border-radius: 11px;
  padding-inline: 15px;
  gap: 7px;
}
.web-program-card__open svg { width: 16px; height: 16px; }
.web-program-dialog__eyebrow {
  color: rgba(255, 255, 255, .54);
  font: 700 10px/1.4 'Courier New', monospace;
  letter-spacing: .15em;
  margin: 0 0 9px !important;
}
@media (max-width: 1150px) {
  .web-programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-program-card__banner { height: clamp(160px, 18vw, 195px); }
}
@media (max-width: 700px) {
  .web-programs-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .web-program-card { min-height: 445px; }
  .web-program-card__banner { height: 185px; }
}
@media (max-width: 460px) {
  .web-program-card__name { font-size: 27px; }
  .web-program-card__foot > span { flex-basis: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-program-card { transition: none; }
}

/* Brillo e inclinación al cursor como en Suite, sin voltear ni recortar el contenido. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .web-program-card {--web-gx:50%;--web-gy:50%;--web-rotate-x:0deg;--web-rotate-y:0deg;
    transform:perspective(1150px) rotateX(var(--web-rotate-x)) rotateY(var(--web-rotate-y));
    transform-origin:50% 50%; transition:transform .17s ease-out,border-color .25s ease,box-shadow .25s ease;}
  .web-program-card__glare {position:absolute;inset:0;z-index:3;pointer-events:none;
    background:radial-gradient(circle at var(--web-gx) var(--web-gy),rgba(255,255,255,.22),rgba(255,255,255,.08) 20%,transparent 60%);
    opacity:0;transition:opacity .2s ease;border-radius:inherit;}
  .web-program-card:hover .web-program-card__glare{opacity:1;}
  .web-program-card:hover {box-shadow:0 27px 44px rgba(0,0,0,.42);}
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 .web-program-card{transform:none!important;}
 .web-program-card__glare{display:none;}
}

/* Portada Portal web · escritorio: llena el ancho útil y se integra con el catálogo. */
@media (min-width: 851px) and (pointer:fine) {
 .web-portal-page .tools-hero {min-height:clamp(600px,72svh,720px);}
 .web-portal-page .tools-hero__content {
   min-height:clamp(600px,72svh,720px);
   width:min(calc(100% - 100px),1460px);
   grid-template-columns:minmax(0,1.13fr) minmax(340px,.87fr);
   column-gap:clamp(26px,3.2vw,58px);
   padding:calc(var(--aq-header-height) + 8px) 0 28px;
 }
 .web-portal-page .tools-hero__title {
   display:flex;align-items:center;justify-content:flex-start;
   gap:clamp(4px,.7vw,12px);white-space:nowrap;
   margin:14px 0 6px;
 }
 .web-portal-page .tools-title-warp {height:clamp(102px,9vw,145px);min-width:0;flex:0 0 48%;width:48%;}
 .web-portal-page .tools-title-warp--serif {flex:0 0 37%;width:37%;margin:0;}
 .web-portal-page .tools-title-warp .warp-fallback {padding:0 .5%;align-items:center;}
 .web-portal-page .tools-title-warp--sans .warp-fallback {font-size:clamp(58px,5.65vw,90px);}
 .web-portal-page .tools-title-warp--serif .warp-fallback {font-size:clamp(58px,5.45vw,88px);}
 .web-portal-page .tools-hero__intro {margin-top:16px;max-width:58ch;}
 .web-portal-page .brand-grid {width:min(100%,470px);gap:clamp(10px,1.5vw,23px);}
 .web-portal-page .brand-grid__item {max-width:136px;}
 .web-portal-page .tools-catalog__inner {padding-top:65px;}
}
.web-hero__meta {display:flex;flex-wrap:wrap;gap:11px 21px;margin:24px 0 0;padding-left:1.2%;color:rgba(255,255,255,.47);font:700 10px/1.5 'Courier New',monospace;letter-spacing:.11em;}
.web-hero__meta span + span::before {content:'·';margin-right:18px;color:rgba(255,255,255,.24);}
@media(max-width:850px){
 .web-hero__meta {gap:7px 12px;margin-top:15px;padding:0;font-size:9px;}
 .web-hero__meta span + span::before{margin-right:9px;}
}