/* OCEANSING / Layout de pantallas compactas.
   Solo los títulos principales conservan WarpText (18 FPS en reposo, 24 FPS al interactuar; baja resolución).
   La cuadrícula y Aurora móvil se representan en CSS, sin canvas pesado. */
@media (max-width:850px), (pointer:coarse) {
  .shape-grid__canvas {display:none!important;}
  .shape-grid, .shape-grid.is-enhanced {
    background-image:linear-gradient(to right,var(--aq-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--aq-grid-line) 1px,transparent 1px)!important;
  }
  .warp-wrap {cursor:default;touch-action:pan-y;}
  .warp-fallback {transition:opacity .18s ease;}
  .card-nav__panel {backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);}
  .card-nav__card {filter:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .header-shell {padding:10px 12px 0;}

  /* Portadas de Suite y Portal web: primero titular, luego logos, sin columnas vacías. */
  .tools-hero {min-height:0!important;}
  .tools-hero__content {
    display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:18px!important;
    width:min(calc(100% - 36px),650px)!important;
    min-height:0!important;
    padding:clamp(115px,18svh,150px) 0 34px!important;
  }
  .tools-hero__copy {width:100%;}
  .tools-hero__title {margin:11px 0 10px!important;}
  .tools-title-warp {height:clamp(75px,14vw,106px)!important;width:100%;}
  .tools-title-warp--serif {height:clamp(85px,15vw,122px)!important;margin-top:-11px!important;}
  .tools-title-warp--sans .warp-fallback{font-size:clamp(38px,8.4vw,74px)!important;}
  .tools-title-warp--serif .warp-fallback{font-size:clamp(34px,7.5vw,68px)!important;}
  .tools-hero__intro{font-size:clamp(14px,3.5vw,16px)!important;line-height:1.55!important;margin:5px 0 0!important;max-width:58ch!important;}
  .tools-hero__logos {width:100%;margin:8px auto 0;}
  .brand-grid {width:min(100%,330px);gap:9px;}
  .brand-grid__item {max-width:102px;}
  .tools-kicker {font-size:9px;}

  /* Catálogo editorial: encabezado siempre en una línea y tarjetas inmediatamente debajo. */
  .tools-catalog__inner{width:min(calc(100% - 36px),650px)!important;padding:55px 0 76px!important;}
  .tools-catalog__intro{margin-bottom:25px!important;}
  .tools-catalog__headline.catalog-heading{flex-wrap:nowrap!important;white-space:nowrap;font-size:clamp(20px,5.75vw,42px)!important;gap:7px!important;margin:8px 0 0!important;}
  .tools-catalog__lede{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;margin:14px 0 18px!important;}
  .tools-catalog__lede-copy p{font-size:14px;line-height:1.54;}
  .tools-action-links{display:flex;flex-wrap:wrap;gap:9px!important;}
  .tools-action-link{min-height:44px;width:auto!important;font-size:10px;padding:0 15px;white-space:normal!important;}
  .programs-grid,.web-programs-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important;max-width:none!important;}
  .flip-card{height:345px!important;}
  .flip-card__meta{padding:12px 12px 0!important;font-size:8px;}
  .flip-card__visual{padding:8px 12px 0!important;}
  .flip-card__art-image{max-height:154px;max-width:100%;}
  .flip-card__front-bottom{padding:0 13px 15px!important;}
  .flip-card__front-bottom h3{font-size:22px!important;margin:6px 0 9px!important;}
  .flip-card__front-note{font-size:10px;margin:0 0 10px!important;}
  .flip-card__back-foot{padding:10px 13px!important;}
  .web-program-card{min-height:0!important;}
  .web-program-card__banner{height:155px!important;}
  .web-program-card__body{padding:46px 14px 15px!important;}
  .web-program-card__logo{top:-42px!important;left:13px!important;width:86px!important;height:86px!important;}
  .web-program-card__name{font-size:23px!important;}
  .web-program-card__description{font-size:12px;line-height:1.5;}
  .web-program-card__meta{font-size:8px;}
  .web-program-card__foot{padding-top:10px;}
  .web-program-card__open{height:40px;min-width:86px;}

  /* Inicio: a la primera pantalla no le sobra una altura completa extra. */
  .hero-warp{min-height:clamp(490px,68svh,680px)!important;padding:112px 20px 36px!important;}
  .hero-content{transform:none!important;min-height:0;gap:11px!important;width:100%;}
  .hero-content .warp-wrap{height:clamp(95px,23vw,153px)!important;max-width:100%;}
  .hero-content .warp-fallback{font-size:clamp(36px,9.6vw,75px)!important;letter-spacing:-.06em!important;}
  .grid-stage{min-height:0!important;}
  .grid-stage__content{
    width:min(calc(100% - 36px),650px)!important;
    min-height:0!important;
    display:flex!important;flex-direction:column;align-items:stretch;
    gap:18px;padding:65px 0 44px!important;
  }
  .grid-stage__statement{margin:11px 0 13px!important;}
  .grid-stage__visual--logos{min-height:0!important;height:auto!important;width:100%!important;margin:7px auto 0!important;}
  .grid-stage__visual--logos .brand-grid{margin:auto;}
}
@media(max-width:620px) {
  .programs-grid,.web-programs-grid{grid-template-columns:1fr!important;max-width:410px!important;margin-inline:auto!important;gap:15px!important;}
  .flip-card{height:410px!important;}
  .flip-card__art-image{max-height:185px;}
  .web-program-card__banner{height:180px!important;}
  .web-program-card__body{padding:54px 16px 18px!important;}
  .web-program-card__logo{width:98px!important;height:98px!important;top:-49px!important;left:16px!important;}
  .web-program-card__name{font-size:24px!important;}
  .tools-action-links{display:grid;grid-template-columns:1fr;}
  .tools-action-link{width:100%!important;}
  .tools-hero__content{padding-top:112px!important;gap:13px!important;}
  .tools-hero__intro{font-size:14px!important;}
  .tools-hero__logos{margin-top:6px;}
  .hero-warp{min-height:clamp(440px,56svh,550px)!important;padding-top:102px!important;}
  .grid-stage__content{padding-top:50px!important;}
}
@media(max-width:380px) {
  .tools-hero__content{width:calc(100% - 30px)!important;}
  .tools-title-warp--sans .warp-fallback{font-size:36px!important;}
  .tools-title-warp--serif .warp-fallback{font-size:29px!important;}
  .tools-catalog__headline.catalog-heading{font-size:clamp(19px,5.6vw,22px)!important;gap:5px!important;}
  .card-nav__logo{font-size:16px!important;}
}

/* Portal web: título principal en una única línea a cualquier ancho móvil. */
@media(max-width:850px), (pointer:coarse) {
  .web-portal-page .tools-hero__title {
    display:flex!important;
    align-items:center;
    gap:2%!important;
    white-space:nowrap;
    width:100%;
    margin:11px 0 13px!important;
  }
  .web-portal-page .tools-hero__title .tools-title-warp {
    flex:0 0 40%;
    width:40%!important;
    height:clamp(66px,14vw,92px)!important;
    margin:0!important;
    min-width:0;
  }
  .web-portal-page .tools-hero__title .tools-title-warp--serif {
    flex-basis:39%;
    width:39%!important;
  }
  .web-portal-page .tools-hero__title .tools-title-warp .warp-fallback {
    padding:0!important;
    justify-content:flex-start;
    white-space:nowrap;
  }
  .web-portal-page .tools-hero__title .tools-title-warp--sans .warp-fallback {
    font-size:clamp(34px,9.3vw,69px)!important;
    letter-spacing:-.065em;
  }
  .web-portal-page .tools-hero__title .tools-title-warp--serif .warp-fallback {
    font-size:clamp(32px,8.2vw,61px)!important;
  }
}
@media(max-width:390px){
  .web-portal-page .tools-hero__title .tools-title-warp--sans .warp-fallback{font-size:clamp(31px,8.7vw,35px)!important}
  .web-portal-page .tools-hero__title .tools-title-warp--serif .warp-fallback{font-size:clamp(29px,7.75vw,32px)!important}
}

/* Respaldo visual interactivo del efecto acuoso en dispositivos sin WebGL2.
   WebGL2, si está disponible, sustituye automáticamente este texto. */
@media (max-width:850px), (pointer:coarse) {
  .warp-wrap:not(.is-ready) .warp-fallback {
    animation:oceansing-water-fallback 5.2s ease-in-out infinite alternate;
    text-shadow:-.7px 0 rgba(82,39,255,.30),.7px 0 rgba(230,80,193,.26);
  }
  .warp-wrap.is-touched:not(.is-ready) .warp-fallback {
    animation:oceansing-water-touch .67s ease-out 1;
  }
}
@keyframes oceansing-water-fallback {
  0% {transform:translate3d(-.6px,.5px,0) skewX(-.35deg);filter:blur(0)}
  50% {transform:translate3d(.8px,-.8px,0) skewX(.38deg);filter:blur(.3px)}
  100% {transform:translate3d(-.3px,.45px,0) skewX(-.25deg);filter:blur(0)}
}
@keyframes oceansing-water-touch {
  0% {transform:translate3d(0,0,0) skewX(0);filter:blur(0)}
  30% {transform:translate3d(2px,-1px,0) skewX(2deg);filter:blur(.9px)}
  75% {transform:translate3d(-1.4px,.5px,0) skewX(-1.1deg);filter:blur(.25px)}
  100% {transform:none;filter:none}
}
@media (prefers-reduced-motion: reduce) {
  .warp-wrap:not(.is-ready) .warp-fallback,
  .warp-wrap.is-touched:not(.is-ready) .warp-fallback {animation:none!important;transform:none!important}
}