/* ==========================================================================
VictoriaEDU — Sistema gráfico de marca
--------------------------------------------------------------------------
Capa que va DESPUÉS de victoria.css y no la reemplaza. victoria.css sigue
siendo el design system (tokens, botones, tarjetas, rejillas); este archivo
solo añade la piel: texturas, geometría de la V, rutas, separadores y las
microinteracciones.
La regla que gobierna todo esto: la decoración nunca compite con el dato.
Las tramas viven por debajo del 8% de opacidad, ninguna anima sola, y todo
lo que se dibuja aquí es aria-hidden y pointer-events:none. Si algo de este
archivo se borra, el sitio sigue funcionando y siendo legible — así se
comprueba que es piel y no estructura.
Referencia visual: institución educativa contemporánea. Nada de neón,
hologramas ni circuitos: la geometría sale del isotipo V y de un cuaderno
cuadriculado, que es donde de verdad se estudia.
Índice
1 Tokens de marca
2 Fragmentos V (patrón)
3 Cuaderno Victoria (retícula académica)
4 Separadores de sección
5 Hero
6 Tarjetas de beneficio e iconos
7 Ruta del Método Victoria
8 Resultados y estadísticas
9 Testimonios
10 Hueco de mascota
11 Microinteracciones
12 Movimiento reducido
========================================================================== */
/* ==========================================================================
1 · Tokens de marca
--------------------------------------------------------------------------
Todo color, ángulo, grosor y duración que use este archivo sale de aquí.
Ningún valor de marca se repite en línea más abajo: si hay que reafinar el
sistema, se reafina en este bloque.
========================================================================== */
:root {
/* --- Color -------------------------------------------------------------
Guinda y azul ya existen en victoria.css; aquí solo se les da el nombre
con el que habla la marca, para no tener que recordar que "burdeos" es
el guinda y "noche" el guinda profundo. */
--vic-guinda: var(--vic-burdeos);
--vic-guinda-profundo: var(--vic-noche);
--vic-guinda-rgb: 49, 14, 23;
/* Blanco cálido: el papel. Un blanco puro sobre pantalla grande cansa;
este tiene un punto de amarillo que lo acerca a una hoja impresa. */
--vic-blanco-calido: #FAF8F5;
/* Cian institucional, muy controlado: nodos de ruta, comillas y acentos
puntuales. Es un cian apagado a propósito — un cian saturado sobre guinda
se lee como interfaz de videojuego, que es justo lo que no somos. */
--vic-cian: #58A9C0;
--vic-cian-rgb: 88, 169, 192;
/* --- Geometría ---------------------------------------------------------
El ángulo del isotipo. Todo corte diagonal del sitio —separadores,
fragmentos, tramas— usa este mismo valor, que es lo que hace que se lean
como familia y no como adornos sueltos. */
--vic-angulo: 18deg;
--vic-corte: 26px;
--vic-linea-fina: 1px;
--vic-linea-media: 1.75px; /* el mismo grosor que los iconos */
/* --- Texturas ----------------------------------------------------------
Opacidades separadas del color para poder subir o bajar toda la trama
del sitio de un tirón sin tocar ninguna regla. */
--vic-trama-clara: rgba(34, 58, 116, 1);
--vic-trama-oscura: rgba(255, 255, 255, 1);
/* Estas tres opacidades NO son intercambiables: lo que se ve no es la
opacidad sino el contraste contra el fondo. Un 5% de blanco sobre guinda
profundo casi no se nota; el mismo 5% sobre el azul institucional grita.
Por eso la variante oscura va más baja que la clara, al revés de lo que
sugeriría el número. Calibradas mirándolas, no calculándolas. */
--vic-trama-op-sutil: .030;
--vic-trama-op-media: .042;
--vic-trama-op-oscura: .032;
--vic-trama-tam-sutil: 200px;
--vic-trama-tam-media: 168px;
--vic-trama-tam-oscura: 208px;
/* Cuaderno: milimétrico + línea mayor cada 5 cuadros */
--vic-cuaderno-fino: 24px;
--vic-cuaderno-mayor: 120px;
--vic-cuaderno-op-fina: .055;
--vic-cuaderno-op-mayor: .10;
--vic-cuaderno-op-marcas: .085;
/* --- Movimiento --------------------------------------------------------
victoria.css ya trae --vic-transition-base (.18s) para estados de
control. Estas son para lo decorativo, que debe ser más lento: lo que
se mueve rápido pide atención, y la decoración no debe pedirla. */
--vic-dur-media: .42s;
--vic-dur-ruta: 1.6s;
--vic-ease-marca: cubic-bezier(.22, .61, .36, 1);
--vic-elevacion: 3px; /* desplazamiento de tarjeta en hover */
}
/* ==========================================================================
2 · Fragmentos V — patrón
--------------------------------------------------------------------------
Trapecios y barras diagonales sacados de la geometría del isotipo: dos
brazos que bajan y se encuentran. El patrón NO reconstruye la V ni la
repite; toma sus piezas y las dispersa, que es lo que permite usarlo como
fondo sin que el logotipo acabe convertido en papel tapiz.
Se pinta con `mask-image` + `background-color` en vez de meter el color
dentro del SVG. Así el color sale de un token y una misma máscara sirve
para fondo claro y oscuro — si fuera un SVG con el color encodeado harían
falta tres archivos y los tres se desincronizarían al primer ajuste.
Uso:
dentro de un contenedor con position:relative.
========================================================================== */
/* Contenedor para secciones que reciben una capa de textura. Hace dos cosas:
crea el contexto de posicionamiento y sube el contenido por encima de la
capa. Es el equivalente neutro de .vic-blueprint, que hace lo mismo pero
además pinta su propia retícula oscura. */
.vic-lienzo { position: relative; overflow: hidden; }
.vic-lienzo > *:not(.v-pattern):not(.academic-grid) { position: relative; z-index: 1; }
.v-pattern {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-color: var(--v-pattern-color, var(--vic-trama-clara));
opacity: var(--v-pattern-opacity, var(--vic-trama-op-sutil));
-webkit-mask-image: var(--v-pattern-mask);
mask-image: var(--v-pattern-mask);
-webkit-mask-size: var(--v-pattern-size, var(--vic-trama-tam-media));
mask-size: var(--v-pattern-size, var(--vic-trama-tam-media));
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
/* La trama se apaga hacia abajo. Sin este degradado el patrón llega al
borde de la sección y delata el mosaico. */
--v-pattern-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23fff'%3E%3Cpath d='M20 8 L33 8 L52 62 L39 62 Z'/%3E%3Cpath d='M104 22 L114 22 L98 66 L88 66 Z'/%3E%3Cpath d='M6 86 L21 86 L28 108 L13 108 Z'/%3E%3Cpath d='M70 92 L80 92 L88 116 L78 116 Z'/%3E%3Cpath d='M58 14 L66 14 L70 32 L62 32 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Baja densidad y opacidad mínima: secciones claras, donde cualquier trama
se nota el doble porque el contraste del fondo es alto. */
.v-pattern-subtle {
--v-pattern-color: var(--vic-trama-clara);
--v-pattern-opacity: var(--vic-trama-op-sutil);
--v-pattern-size: var(--vic-trama-tam-sutil);
}
/* Densidad media: tarjetas y encabezados, donde el área es chica y el patrón
necesita repetirse más para leerse como textura y no como una mancha. */
.v-pattern-medium {
--v-pattern-color: var(--vic-trama-clara);
--v-pattern-opacity: var(--vic-trama-op-media);
--v-pattern-size: var(--vic-trama-tam-media);
}
/* Fondos guinda: el patrón se dibuja en blanco cálido. */
.v-pattern-dark {
--v-pattern-color: var(--vic-trama-oscura);
--v-pattern-opacity: var(--vic-trama-op-oscura);
--v-pattern-size: var(--vic-trama-tam-oscura);
}
/* Desvanecido opcional, para cuando el patrón vive en una sección alta y
llegaría hasta el texto. */
.v-pattern--fade-b {
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-image: var(--v-pattern-mask), linear-gradient(to bottom, #000 10%, transparent 82%);
mask-image: var(--v-pattern-mask), linear-gradient(to bottom, #000 10%, transparent 82%);
-webkit-mask-size: var(--v-pattern-size), 100% 100%;
mask-size: var(--v-pattern-size), 100% 100%;
-webkit-mask-repeat: repeat, no-repeat;
mask-repeat: repeat, no-repeat;
}
/* ==========================================================================
3 · Cuaderno Victoria — retícula académica
--------------------------------------------------------------------------
Cuadrícula milimétrica con línea mayor cada cinco cuadros, más arcos
geométricos aislados, marcas de medición y fragmentos de ejes cartesianos.
Deliberadamente NO lleva fórmulas ni símbolos matemáticos: escribir
ecuaciones de adorno en un sitio de admisión es pedir que alguien las lea
y descubra que no dicen nada. La geometría sí puede ser abstracta; una
fórmula, no.
Las capas van de arriba abajo: marcas SVG, línea mayor, línea fina.
========================================================================== */
.academic-grid {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
/* arcos, marcas de medición y fragmentos de eje */
var(--ag-marcas),
/* retícula mayor */
linear-gradient(var(--ag-color-mayor) var(--vic-linea-fina), transparent var(--vic-linea-fina)),
linear-gradient(90deg, var(--ag-color-mayor) var(--vic-linea-fina), transparent var(--vic-linea-fina)),
/* retícula milimétrica */
linear-gradient(var(--ag-color-fino) var(--vic-linea-fina), transparent var(--vic-linea-fina)),
linear-gradient(90deg, var(--ag-color-fino) var(--vic-linea-fina), transparent var(--vic-linea-fina));
background-size:
var(--ag-marcas-tam, 520px) var(--ag-marcas-tam, 520px),
var(--vic-cuaderno-mayor) var(--vic-cuaderno-mayor),
var(--vic-cuaderno-mayor) var(--vic-cuaderno-mayor),
var(--vic-cuaderno-fino) var(--vic-cuaderno-fino),
var(--vic-cuaderno-fino) var(--vic-cuaderno-fino);
/* Se apaga hacia abajo para que no se lea como una tabla de datos */
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 80%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 80%);
}
/* --- Versión clara: azul de marca sobre papel ---------------------------- */
.academic-grid--claro {
--ag-color-fino: rgba(var(--vic-azul-rgb), var(--vic-cuaderno-op-fina));
--ag-color-mayor: rgba(var(--vic-azul-rgb), var(--vic-cuaderno-op-mayor));
--ag-marcas:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='none' stroke='%232C4D9D' stroke-opacity='.16' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M64 108a52 52 0 0 1 52-52'/%3E%3Cpath d='M406 84a72 72 0 0 0-72 72'/%3E%3Cpath d='M212 404a44 44 0 0 0 44 44'/%3E%3Cpath d='M60 300h58M60 300v-58'/%3E%3Cpath d='M436 356v56M436 412h-56'/%3E%3Cpath d='M268 62v14M292 62v14M316 62v14M340 62v14'/%3E%3Cpath d='M150 470h14M150 446h14M150 422h14'/%3E%3Ccircle cx='60' cy='300' r='2.5' fill='%232C4D9D' fill-opacity='.2' stroke='none'/%3E%3Ccircle cx='436' cy='412' r='2.5' fill='%232C4D9D' fill-opacity='.2' stroke='none'/%3E%3C/svg%3E");
}
/* --- Versión oscura: blanco sobre guinda --------------------------------- */
.academic-grid--oscuro {
--ag-color-fino: rgba(255, 255, 255, var(--vic-cuaderno-op-fina));
--ag-color-mayor: rgba(255, 255, 255, var(--vic-cuaderno-op-mayor));
--ag-marcas:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M64 108a52 52 0 0 1 52-52'/%3E%3Cpath d='M406 84a72 72 0 0 0-72 72'/%3E%3Cpath d='M212 404a44 44 0 0 0 44 44'/%3E%3Cpath d='M60 300h58M60 300v-58'/%3E%3Cpath d='M436 356v56M436 412h-56'/%3E%3Cpath d='M268 62v14M292 62v14M316 62v14M340 62v14'/%3E%3Cpath d='M150 470h14M150 446h14M150 422h14'/%3E%3Ccircle cx='60' cy='300' r='2.5' fill='%23ffffff' fill-opacity='.22' stroke='none'/%3E%3Ccircle cx='436' cy='412' r='2.5' fill='%23ffffff' fill-opacity='.22' stroke='none'/%3E%3C/svg%3E");
}
/* --- Actualización de .vic-blueprint -------------------------------------
.vic-blueprint ya existe en victoria.css y ya está puesta en el hero y en
el método. En vez de pedir que se cambie el HTML, se le sube la textura
aquí: misma clase, mismo papel, mejor dibujo. Si este archivo no carga,
vuelve sola a la retícula simple de victoria.css.
-------------------------------------------------------------------------- */
.vic-blueprint::before {
--ag-color-fino: rgba(255, 255, 255, var(--vic-cuaderno-op-fina));
--ag-color-mayor: rgba(255, 255, 255, var(--vic-cuaderno-op-mayor));
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520' fill='none' stroke='%23ffffff' stroke-opacity='.15' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M64 108a52 52 0 0 1 52-52'/%3E%3Cpath d='M406 84a72 72 0 0 0-72 72'/%3E%3Cpath d='M212 404a44 44 0 0 0 44 44'/%3E%3Cpath d='M60 300h58M60 300v-58'/%3E%3Cpath d='M436 356v56M436 412h-56'/%3E%3Cpath d='M268 62v14M292 62v14M316 62v14M340 62v14'/%3E%3C/svg%3E"),
linear-gradient(var(--ag-color-mayor) var(--vic-linea-fina), transparent var(--vic-linea-fina)),
linear-gradient(90deg, var(--ag-color-mayor) var(--vic-linea-fina), transparent var(--vic-linea-fina)),
linear-gradient(var(--ag-color-fino) var(--vic-linea-fina), transparent var(--vic-linea-fina)),
linear-gradient(90deg, var(--ag-color-fino) var(--vic-linea-fina), transparent var(--vic-linea-fina));
background-size:
520px 520px,
var(--vic-cuaderno-mayor) var(--vic-cuaderno-mayor),
var(--vic-cuaderno-mayor) var(--vic-cuaderno-mayor),
var(--vic-cuaderno-fino) var(--vic-cuaderno-fino),
var(--vic-cuaderno-fino) var(--vic-cuaderno-fino);
}
/* ==========================================================================
4 · Separadores de sección
--------------------------------------------------------------------------
Un corte diagonal entre dos bandas de color, en el mismo ángulo del
isotipo. Resuelve dos cosas a la vez: da carácter al cambio de sección y
evita el borde recto de pared a pared, que es lo que hace que una página
larga se lea como una pila de cajas.
El elemento lleva el color de la sección de ABAJO como fondo, y el de
ARRIBA en un ::before recortado en diagonal. Así el corte es exacto y no
quedan filos de fondo entre secciones.
========================================================================== */
.section-divider {
position: relative;
height: clamp(38px, 4.6vw, 74px);
overflow: hidden;
background: var(--sd-hacia);
/* Sin margen negativo: el separador es un bloque más del flujo, así nunca
se come el padding de la sección que sigue. */
}
.section-divider::before {
content: "";
position: absolute;
inset: 0;
background: var(--sd-desde);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}
/* Un filo fino en el corte, del color de acento. Es lo que convierte la
diagonal en un gesto de marca y no en un simple triángulo. */
.section-divider::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--sd-filo, transparent) 50%, transparent calc(50% + 1px));
opacity: .5;
}
/* Un separador anuncia el cambio a una sección concreta. Si esa sección no se
pinta —la banda de testimonios y la de reels salen de config y pueden venir
vacías— la diagonal se quedaría anunciando algo que no está, entre dos
colores que no son los suyos. Se retira sola. */
.section-divider:has(+ .vic-hidden) { display: none; }
/* Variantes, nombradas por el par de bandas que unen */
.section-divider--guinda-papel { --sd-desde: var(--vic-noche); --sd-hacia: var(--vic-blanco); --sd-filo: rgba(var(--vic-cian-rgb), .5); }
.section-divider--guinda-lienzo { --sd-desde: var(--vic-noche); --sd-hacia: var(--vic-bg-canvas); --sd-filo: rgba(var(--vic-cian-rgb), .5); }
.section-divider--guinda-gris { --sd-desde: var(--vic-noche); --sd-hacia: var(--vic-gris-claro); --sd-filo: rgba(var(--vic-cian-rgb), .5); }
.section-divider--gris-guinda { --sd-desde: var(--vic-gris-claro); --sd-hacia: var(--vic-noche); --sd-filo: rgba(var(--vic-azul-rgb), .55); }
.section-divider--papel-noche { --sd-desde: var(--vic-blanco); --sd-hacia: var(--vic-noche); --sd-filo: rgba(var(--vic-azul-rgb), .5); }
.section-divider--azul-guinda { --sd-desde: var(--vic-azul-profundo); --sd-hacia: var(--vic-noche); --sd-filo: rgba(var(--vic-cian-rgb), .45); }
/* ==========================================================================
5 · Hero
--------------------------------------------------------------------------
La composición del hero no se toca: titular, botones y panel de
diagnóstico se quedan donde estaban. Esto solo añade profundidad detrás.
========================================================================== */
.vic-hero-deco {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.vic-hero-deco svg { width: 100%; height: 100%; display: block; }
/* Los fragmentos respiran muy despacio y con recorrido mínimo (6px en 22s).
Es profundidad, no animación: si se nota, está mal calibrado. */
.vic-hero-deco__frag { animation: vicFlota 22s ease-in-out infinite; transform-origin: center; }
.vic-hero-deco__frag--b { animation-duration: 27s; animation-delay: -6s; }
.vic-hero-deco__frag--c { animation-duration: 31s; animation-delay: -13s; }
@keyframes vicFlota {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -6px, 0); }
}
/* La ruta editorial que conecta el titular con el panel de diagnóstico.
Se dibuja sola al cargar, una vez, y se queda. */
.vic-hero-deco__ruta {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: vicDibuja 2.2s var(--vic-ease-marca) .35s forwards;
}
@keyframes vicDibuja { to { stroke-dashoffset: 0; } }
/* Nodos: van fuera del SVG (que está estirado con preserveAspectRatio="none")
para que sigan siendo círculos. El anillo se hace con box-shadow, así que
el elemento no ocupa más caja de la que se ve. */
.vic-hero-deco__nodo {
position: absolute;
width: 5px; height: 5px;
margin: -2.5px 0 0 -2.5px; /* centrado exacto sobre la coordenada */
border-radius: 50%;
background: rgba(255, 255, 255, .85);
box-shadow: 0 0 0 4px rgba(108, 138, 199, .32);
opacity: 0;
animation: vicAparece .5s ease-out forwards;
}
.vic-hero-deco__nodo--fin {
width: 7px; height: 7px;
margin: -3.5px 0 0 -3.5px;
background: #fff;
box-shadow: 0 0 0 5px rgba(var(--vic-cian-rgb), .34);
}
.vic-hero-deco__nodo--1 { animation-delay: 1.0s; }
.vic-hero-deco__nodo--2 { animation-delay: 1.5s; }
.vic-hero-deco__nodo--3 { animation-delay: 2.0s; }
@keyframes vicAparece { to { opacity: 1; } }
/* En móvil el hero se apila y la ruta dejaría de conectar nada: se retira y
quedan solo los fragmentos, que sí siguen funcionando como fondo. */
@media (max-width: 900px) {
.vic-hero-deco__ruta,
.vic-hero-deco__nodo,
.vic-hero-deco__etiqueta { display: none; }
}
/* ==========================================================================
6 · Tarjetas de beneficio e iconos
========================================================================== */
/* Área visual consistente en las cuatro tarjetas: reserva el mismo alto pase
lo que pase, para que los títulos arranquen a la misma altura aunque un
icono cambie de tamaño o mañana entre una ilustración. */
.benefit-media {
position: relative;
display: flex;
align-items: center;
min-height: 52px;
margin-bottom: 2px;
}
/* Ilustración editorial de la tarjeta. Sustituye al icono; el hueco estaba
preparado justo para esto.
FONDO BLANCO, Y NO ES DECORATIVO. Las ilustraciones son PNG/WebP con canal
alfa cuyo arte se dibujó contra blanco: al recortarle el fondo, los píxeles
del borde conservan halo blanco. Sobre cualquier color ese halo se ve como
dientes de sierra alrededor de cada forma. Sobre blanco compone exactamente
como se dibujó y el borde vuelve a ser limpio.
Por eso tampoco lleva caja de color ni borde: .vic-card ya es blanco puro,
así que la ilustración se apoya en él sin costura. El `background` explícito
está para que siga siendo blanco aunque algún día la tarjeta cambie de tono
— si eso pasa, hay que pedir las ilustraciones ya compuestas contra el
nuevo color, no pintarles una caja detrás. */
.benefit-illustration {
width: 100%;
max-width: 168px;
aspect-ratio: 1 / 1; /* las ilustraciones son cuadradas, 1200x1200 */
background: var(--vic-blanco);
margin-left: -8px; /* el arte trae aire propio; esto lo realinea
ópticamente con el texto de abajo */
}
.benefit-illustration > img {
width: 100%; height: 100%;
object-fit: contain; /* contain y no cover: no se recorta ilustración */
display: block;
}
/* Con ilustración, el área visual la define ella y no el mínimo del icono. */
.benefit-media:has(.benefit-illustration) { min-height: 0; margin-bottom: 6px; }
/* Corte diagonal en la esquina del recuadro del icono: la misma pieza del
isotipo, aplicada al elemento más pequeño del sistema. */
.vic-valor .vic-icono {
position: relative;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
transition: background var(--vic-dur-media) var(--vic-ease-marca),
color var(--vic-dur-media) var(--vic-ease-marca);
}
.vic-card--hoverable:hover .vic-icono {
background: var(--vic-azul);
color: #fff;
}
.vic-card--hoverable:hover .vic-icono--acento {
background: var(--vic-guinda);
color: #fff;
}
/* --- Programas que todavía no abren --------------------------------------
El problema a resolver: que se vea de un golpe que estos dos no se pueden
comprar todavía.
La solución que NO funciona es la que traía victoria.css —apagar la imagen
con saturate(.45) opacity(.7)—. Con las ilustraciones editoriales eso no
dice "próximamente", dice "imagen rota": el ojo lee un defecto de carga,
no una decisión.
Lo que sí funciona es tratar la TARJETA como secundaria y dejar el dibujo
casi intacto. Tres señales que se suman, ninguna destructiva:
1. el papel deja de ser blanco y pasa a gris de lienzo,
2. una trama diagonal muy fina sobre la portada —el ángulo del isotipo,
el mismo lenguaje del resto del sitio— que se lee como "en obra",
3. la imagen baja un punto de saturación, no cuatro.
Y encima de eso siguen la insignia "Próximamente", la ausencia de precio y
un botón de lista de espera en vez de compra. Con cinco señales, ninguna
necesita gritar.
------------------------------------------------------------------------- */
.vic-producto--proximo {
background: var(--vic-bg-canvas);
border-color: var(--vic-border-subtle);
}
.vic-producto--proximo .vic-producto__img img {
filter: saturate(.62) opacity(.88);
}
/* Trama diagonal sobre la portada. Va en el contenedor y no en la imagen para
que no se escale con ella. */
.vic-producto--proximo .vic-producto__img { position: relative; }
.vic-producto--proximo .vic-producto__img::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
/* Paso ancho y opacidad mínima. A 11px se leía como barrotes encima del
dibujo; el objetivo es que se note al comparar las tres tarjetas, no al
mirar una sola. */
background: repeating-linear-gradient(
calc(90deg - var(--vic-angulo)),
rgba(var(--vic-guinda-rgb), .05) 0 1px,
transparent 1px 24px
);
}
/* El pie de la tarjeta también se apaga: sin precio que anclar la mirada, el
borde superior a todo color pesaba de más. */
.vic-producto--proximo .vic-producto__pie { border-top-color: var(--vic-border-subtle); }
/* --- Cuenta regresiva vencida ---------------------------------------------
Cuando la ventana de lanzamiento ya se abrió, los cuatro cuadros en ceros
se leen como un contador roto. Se ocultan y queda solo el texto de
data-vence, que ya dice lo que hay que decir.
------------------------------------------------------------------------- */
[data-cuenta-regresiva].is-vencida .vic-cd { display: none; }
/* --- Precio ---------------------------------------------------------------
Sale por clases, no por estilos en línea, porque la misma tarjeta se pinta
sobre papel blanco y sobre cristal oscuro.
------------------------------------------------------------------------- */
.vic-precio__num {
font-family: var(--vic-font-display);
font-size: 26px;
font-weight: 700;
color: var(--vic-azul-profundo);
line-height: 1.1;
}
.vic-precio__nota { font-size: 13px; color: var(--vic-text-muted); margin-top: 2px; }
/* Precio de lista tachado + sello del 2x1. Va ARRIBA del precio real y más
chico: el número que se paga tiene que seguir siendo el que más pesa. */
.vic-precio__lista {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
font-size: 14px;
color: var(--vic-text-muted);
}
.vic-precio__ahorro {
font-family: var(--vic-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
padding: 3px 8px;
border-radius: var(--vic-radius-pill);
background: var(--vic-success-soft);
color: var(--vic-success-text);
}
/* Sobre el cristal oscuro del carrusel, el verde institucional pierde
contraste; el cian del sistema es el equivalente legible. */
.vic-producto--horizontal .vic-precio__lista { color: rgba(255, 255, 255, .62); }
.vic-producto--horizontal .vic-precio__ahorro {
background: rgba(var(--vic-cian-rgb), .22);
color: #fff;
}
.vic-precio--proximo .vic-precio__num { font-size: 20px; color: var(--vic-text-muted); }
.vic-producto__meta { font-size: 14px; color: var(--vic-text-muted); }
/* ==========================================================================
Carrusel de programas (tienda)
--------------------------------------------------------------------------
Tarjeta horizontal —ilustración a un lado, contenido al otro— sobre una
banda oscura, en cristal.
Por qué la banda es oscura: el glassmorphism no es un color, es un
desenfoque de lo que hay DETRÁS. Sobre el blanco plano que tenía la sección
no se vería absolutamente nada: cristal sobre blanco es blanco. Para que el
efecto exista hace falta algo que desenfocar, así que la banda lleva las
mismas manchas de color que la de testimonios, que ya resolvía este mismo
problema en el sitio.
========================================================================== */
.vic-catalogo {
position: relative;
overflow: hidden;
background: var(--vic-noche);
}
.vic-catalogo > * { position: relative; z-index: 1; }
.vic-catalogo::before {
content: "";
position: absolute;
inset: -10%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(52% 50% at 12% 16%, rgba(var(--vic-azul-rgb), .58), transparent 68%),
radial-gradient(44% 46% at 86% 10%, rgba(108, 138, 199, .26), transparent 70%),
radial-gradient(54% 56% at 78% 94%, rgba(var(--vic-guinda-rgb), .72), transparent 68%);
}
/* Encabezado de la sección sobre fondo oscuro */
.vic-catalogo h2, .vic-catalogo h3 { color: #fff; }
.vic-catalogo .vic-eyebrow { color: rgba(255, 255, 255, .55); }
.vic-catalogo > .vic-container > p { color: rgba(255, 255, 255, .75); }
/* --- La tarjeta en cristal ------------------------------------------------ */
.vic-producto--horizontal {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 58%);
align-items: stretch;
border-radius: var(--vic-radius-xl);
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .07);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
color: rgba(255, 255, 255, .78);
overflow: hidden;
}
/* La ilustración ocupa su columna completa, no una franja 16:9 */
.vic-producto--horizontal .vic-producto__img {
aspect-ratio: auto;
height: 100%;
min-height: 260px;
background: rgba(0, 0, 0, .18);
}
.vic-producto--horizontal .vic-producto__body { padding: 34px; }
/* Texto sobre cristal: el sistema pinta títulos y precios en azul profundo,
que sobre este fondo desaparecería. */
.vic-producto--horizontal h3,
.vic-producto--horizontal .vic-precio__num { color: #fff; }
.vic-producto--horizontal .vic-producto__meta,
.vic-producto--horizontal .vic-precio__nota,
.vic-producto--horizontal .vic-lista-check li { color: rgba(255, 255, 255, .74); }
.vic-producto--horizontal .vic-precio--proximo .vic-precio__num { color: rgba(255, 255, 255, .72); }
/* La palomita verde institucional pierde contraste sobre oscuro; el cian del
sistema es el equivalente legible aquí. */
.vic-producto--horizontal .vic-lista-check li::before { color: var(--vic-cian); }
.vic-producto--horizontal .vic-producto__pie {
border-top-color: rgba(255, 255, 255, .16);
/* Centrado y no al fondo: con los controles apilados, `flex-end` hundía el
precio hasta la altura del último botón y el pie se leía torcido. */
align-items: center;
}
.vic-producto--horizontal .vic-producto__link { color: #fff; }
/* En horizontal sobra ancho, así que los dos botones caben en una fila y el
enlace de texto pasa debajo. Apilados hacían la tarjeta mucho más alta, y
cuanto más alta la tarjeta, más se recorta la ilustración de al lado. */
.vic-producto--horizontal .vic-producto__acciones {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex: 1 1 320px;
}
.vic-producto--horizontal .vic-producto__acciones .vic-btn {
flex: 1 1 auto;
width: auto;
}
.vic-producto--horizontal .vic-producto__link { flex: 1 0 100%; }
/* Un "próximamente" en cristal no necesita el papel gris: aquí la señal es
quitarle saturación a la ilustración y el resto ya lo dicen la insignia y
la ausencia de precio. */
.vic-producto--horizontal.vic-producto--proximo {
background: rgba(255, 255, 255, .045);
border-color: rgba(255, 255, 255, .12);
}
.vic-catalogo .vic-rail { grid-auto-columns: 100%; }
.vic-catalogo .vic-rail > * { scroll-snap-stop: always; }
@media (max-width: 860px) {
/* Apilada: la ilustración arriba, en franja, y el contenido debajo. */
.vic-producto--horizontal { grid-template-columns: 1fr; }
.vic-producto--horizontal .vic-producto__img {
aspect-ratio: 16 / 9;
height: auto;
min-height: 0;
}
.vic-producto--horizontal .vic-producto__body { padding: 26px; }
}
/* --- Pie de la tarjeta de tienda -----------------------------------------
Los controles iban alineados a la derecha (`justify-items:end`) y cada uno
se quedaba con su ancho natural, así que los tres colgaban de una línea
invisible a la derecha y quedaban dentados por la izquierda. En una tarjeta
angosta, además, el bloque bajaba debajo del precio y el dentado se veía
todavía más.
Solución: el bloque de acciones toma el espacio que queda y los tres
controles se estiran al mismo ancho. Un solo borde a cada lado.
------------------------------------------------------------------------- */
.vic-producto__acciones {
flex: 1 1 210px;
gap: 10px;
justify-items: stretch; /* mismo ancho para los tres */
}
.vic-producto__acciones .vic-btn { width: 100%; }
/* El enlace de texto no es un botón, pero comparte la columna: se centra para
que su eje coincida con el de los botones de arriba. */
.vic-producto__link {
font-size: 14px;
font-weight: 600;
text-align: center;
padding-top: 2px;
}
/* ==========================================================================
7 · Ruta del Método Victoria
--------------------------------------------------------------------------
Los cinco pasos ya se leen como secuencia por el número de cada tarjeta;
la ruta lo hace visible de un vistazo. Es puramente decorativa: el orden
real vive en el HTML, que sigue siendo una lista de tarjetas numeradas.
El dibujo progresivo se engancha a [data-reveal].is-visible, la clase que
ya pone el IntersectionObserver de ui.js. Cero JavaScript nuevo.
========================================================================== */
.vic-metodo {
position: relative;
}
/* La línea vive detrás de las tarjetas, a la altura del número (24px de
padding + 20px de medio círculo = 44px desde arriba). */
/* La línea arranca en el centro del número 1 y termina en el del número 5, en
vez de correr de borde a borde: antes se pasaba ~124px del último nodo.
El cálculo sale de la propia rejilla. Con cinco columnas iguales y hueco g,
cada tarjeta mide w = (100% - 4g)/5, y el último número está a (w - 44px)
del borde derecho — el mismo 44px del primero (24 de padding + 20 de medio
círculo). Así se mantiene pegado a los nodos a cualquier ancho, sin JS. */
.vic-metodo {
--vic-paso-gap: 16px; /* el mismo gap de .vic-metodo-grid */
--vic-nodo-off: 44px; /* 24px de padding + 20px de medio círculo */
}
.vic-ruta {
position: absolute;
top: 42px;
left: var(--vic-nodo-off);
/* El ancho va explícito y NO con `right`: un