/* froz3d-promo.css — tarjeta promocional de Froz3D (2026-10-05)
 *
 * UNA sola hoja para las cuatro páginas que muestran la tarjeta: / y /en/
 * (a lo ancho, con el subsidio como pie) y /conocimiento/ y /en/conocimiento/
 * (a media columna). Antes había dos copias —home.css y un <style> inline en
 * /conocimiento/— que se desincronizaban.
 *
 * La tarjeta es un pedazo de froz3d.com dentro del sitio de Altitud: usa la
 * identidad de Froz3D (kit de marca v4), no la de la portada. Por eso trae sus
 * propias tipografías (Manrope V5 + Inter) y su paleta --fz-*, declarada EN LA
 * TARJETA y no en :root. Valores tomados de Portal_Web_Froz3d/public_html/
 * estilos.css; si allá cambian, se actualizan acá.
 *
 * Reglas de marca que esta hoja respeta (manual v4):
 *   - El nombre va con el logo oficial (SVG), nunca reescrito con texto.
 *   - Logo y textos sobre zona uniforme: las células no pasan por debajo.
 *   - Tarjeta plana: sin sombras, brillos ni transformaciones.
 *   - El cian es del margen: no se usa para texto.
 *
 * Anatomía:
 *   a.froz3d-promo
 *     .froz3d-promo__content      rejilla
 *       .froz3d-promo__texto      logo, rótulo, bajada y botón
 *       .froz3d-promo__escena     la animación; llega hasta los bordes de la tarjeta
 *         .froz3d-promo__fondo    células (canvas de js/home-froz3d.js)
 *         .froz3d-promo__poster   icono oficial
 *         canvas                  los 4 pasos en 3D (js/home-froz3d-escena.js)
 *
 * Disposición por container query: la tarjeta decide sola entre fila (texto a
 * la izquierda, escena a la derecha) y pila (escena arriba) según SU ancho,
 * así que sirve igual a lo ancho y a media columna sin modificadores por página.
 *
 * Sin JavaScript o sin WebGL quedan el degradado lila y el icono oficial.
 */

/* Manrope V5: licencia propia, uso web sin modificar los archivos (NOTICE.txt).
   Inter: SIL OFL 1.1; el archivo es un subconjunto latino de InterVariable.woff2
   (la tarjeta solo lo usa en una frase). Las dos licencias están en la carpeta. */
@font-face {
  font-family: "Manrope V5";
  src: url("/assets/Froz3D/fonts/ManropeV5-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope V5";
  src: url("/assets/Froz3D/fonts/ManropeV5-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/Froz3D/fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.froz3d-promo {
  --fz-ink: #102B46;            /* azul profundo: texto principal */
  --fz-ink-2: #3E546A;          /* texto secundario: 7,5:1 sobre el blanco frío */
  --fz-action: #2457E6;         /* azul digital: rótulo y botón */
  --fz-action-hover: #1D48C4;
  --fz-page: #F7FAFC;           /* blanco frío */
  --fz-border: #D7DEE5;
  /* Medidas de la rejilla. Sin registrar, las propiedades se resuelven donde se
     usan: los cqi miden contra la tarjeta en los hijos que las leen. */
  --fz-pad: clamp(20px, 6cqi, 32px);
  --fz-pad-x: clamp(24px, 4.4cqi, 60px);    /* en fila */
  --fz-gap: clamp(16px, 4cqi, 56px);        /* en fila */
  position: relative;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  container: froz3d-promo / inline-size;
  min-height: clamp(300px, 40vh, 390px);
  border: 1px solid var(--fz-border);
  border-radius: 16px;
  background: var(--fz-page);
  color: var(--fz-ink);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01";
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}

.froz3d-promo,
.froz3d-promo * { box-sizing: border-box; }

/* Hacia dentro: en la portada el contenedor (.froz3d-feature) recorta lo que
   sobresale, y un anillo exterior se perdería. */
.froz3d-promo:focus-visible {
  outline: 2px solid var(--fz-action);
  outline-offset: -5px;
}

/* A lo ancho, dentro de .froz3d-feature: el borde y el radio los pone el
   contenedor, que además lleva el pie con el subsidio. */
.froz3d-promo--wide {
  border: 0;
  border-radius: 0;
}

/* ---------- Rejilla: en pila, la escena arriba y el texto debajo ---------- */
.froz3d-promo__content {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  row-gap: 14px;
  justify-items: center;
  padding: var(--fz-pad);
  text-align: center;
}

/* ---------- Texto ---------- */
.froz3d-promo__texto {
  position: relative;
  z-index: 1;
  grid-area: 2 / 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* El archivo del logo trae aire a los lados (el arte ocupa ~82 % del ancho):
   con 210 px de caja quedan ~171 px visibles, sobre el mínimo de 160 del manual. */
.froz3d-promo__title {
  margin: 0;
  inline-size: clamp(210px, 62cqi, 300px);
  line-height: 0;
}

.froz3d-promo__logo {
  display: block;
  width: 100%;
  height: auto;
}

.froz3d-promo__acronym {
  margin: 0;
  font-family: "Manrope V5", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fz-action);
}

.froz3d-promo__lead {
  margin: 0;
  max-width: 40ch;
  font-weight: 400;
  font-size: clamp(1rem, 0.6rem + 2.4cqi, 1.1875rem);
  line-height: 1.5;
  color: var(--fz-ink-2);
}

/* El botón de froz3d.com (.btn--primario). Es un <span>: el enlace es la tarjeta. */
.froz3d-promo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: 6px;
  background: var(--fz-action);
  color: #FFFFFF;
  font-family: "Manrope V5", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  transition: background-color 0.18s ease;
}

.froz3d-promo:hover .froz3d-promo__cta,
.froz3d-promo:focus-visible .froz3d-promo__cta { background: var(--fz-action-hover); }

/* ---------- Escena ----------
   Los márgenes negativos la llevan hasta los bordes de la tarjeta, por encima
   del padding de la rejilla. En pila tiene alto propio; en fila toma el de la
   tarjeta. */
.froz3d-promo__escena {
  position: relative;
  grid-area: 1 / 1;
  justify-self: stretch;
  block-size: clamp(230px, 84cqi, 330px);
  margin: calc(-1 * var(--fz-pad)) calc(-1 * var(--fz-pad)) 0;
}

/* Fondo de células. El degradado lila es el respaldo: se ve mientras carga y
   cuando no hay WebGL. La máscara lo desvanece hacia el texto: en pila baja
   24 px más que la escena y se apaga antes de llegar al logo. */
.froz3d-promo__fondo {
  position: absolute;
  inset: 0 0 -24px 0;
  background: linear-gradient(160deg,
    rgba(112, 93, 198, 0.12) 0%, rgba(112, 93, 198, 0.2) 58%, rgba(36, 87, 230, 0.13) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.25) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.25) 86%, transparent 100%);
}

.froz3d-promo__fondo-lienzo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.froz3d-promo__fondo--listo .froz3d-promo__fondo-lienzo { opacity: 1; }

/* El icono oficial es el póster: se ve mientras carga el 3D y se queda si no
   hay 3D (movimiento reducido, equipo modesto, sin WebGL). Cuando el canvas
   pinta su primer cuadro, js/home-froz3d-escena.js pone --lista y se relevan. */
.froz3d-promo__poster {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: min(58%, 220px);
  transition: opacity 0.35s ease;
}

.froz3d-promo__escena-lienzo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.froz3d-promo__escena--lista .froz3d-promo__escena-lienzo { opacity: 1; }
.froz3d-promo__escena--lista .froz3d-promo__poster { opacity: 0; }

/* ---------- Fila: texto a la izquierda, escena a la derecha ----------
   Desde 560 px de tarjeta: así /conocimiento/ la muestra en fila a media
   columna, con un alto parecido al de la columna del subsidio. El texto tiene
   ancho propio (hasta 29rem, y deja al menos 240 px a la escena): la columna de
   la escena parte justo donde termina, así que las células nunca pasan por
   debajo de las letras. Se desvanecen hacia el texto con las mismas paradas del
   hero de froz3d.com. */
@container froz3d-promo (min-width: 560px) {
  .froz3d-promo__content {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--fz-gap);
    justify-items: start;
    padding-inline: var(--fz-pad-x);
    text-align: left;
  }

  .froz3d-promo__texto {
    grid-area: 1 / 1;
    align-items: flex-start;
    inline-size: min(29rem, 100cqi - 2 * var(--fz-pad-x) - var(--fz-gap) - 240px);
  }

  .froz3d-promo__title { inline-size: clamp(210px, 30cqi, 340px); }

  /* Compensa el aire lateral del archivo: el arte del logo queda alineado con
     el borde izquierdo del texto. */
  .froz3d-promo__logo { margin-left: -9.27%; }

  .froz3d-promo__escena {
    grid-area: 1 / 2;
    align-self: stretch;
    block-size: auto;
    margin: calc(-1 * var(--fz-pad)) calc(-1 * var(--fz-pad-x)) calc(-1 * var(--fz-pad)) calc(-1 * var(--fz-gap));
  }

  .froz3d-promo__fondo {
    inset: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.06) 5%, rgba(0, 0, 0, 0.15) 10%,
      rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 0.55) 25%, rgba(0, 0, 0, 0.82) 33%, #000 40%);
            mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.06) 5%, rgba(0, 0, 0, 0.15) 10%,
      rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 0.55) 25%, rgba(0, 0, 0, 0.82) 33%, #000 40%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .froz3d-promo__cta,
  .froz3d-promo__poster,
  .froz3d-promo__fondo-lienzo,
  .froz3d-promo__escena-lienzo { transition: none; }
}

/* Con colores forzados el sistema manda: sin fondo decorativo. */
@media (forced-colors: active) {
  .froz3d-promo__fondo { display: none; }
}

@media print {
  .froz3d-promo__fondo,
  .froz3d-promo__escena-lienzo { display: none; }
  .froz3d-promo__escena--lista .froz3d-promo__poster { opacity: 1; }
}