/* backend/marketing/static/marketing/css/planificaciones.css */ /* --------------------------------------------------------------------------- Planificaciones DUA — la única hoja propia de una página. Las otras seis páginas de producto se pintan enteras con site.css. Esta no, y por dos motivos que no son de gusto: · Pesa 46 KB, más de la mitad de site.css. La mayor parte es el renderizador real del producto —`.lesson-container` y `.slide`, copiados de DailyPlanification.vue y del generador de láminas—, que es lo que hace que el póster de la página se vea EXACTAMENTE como lo que baja el usuario. Servirlo desde site.css sería cargarlo en las veinte páginas del sitio para usarlo en una. · Trae colores que no son de la paleta: los del renderizador (--acu-teal, --acu-pink, --acu-amber) y los de marca de Word (#2b579a) y PowerPoint (#d24726). En site.css los rechaza `test_the_stylesheet_invents_no_extra_brand_colors`, y con razón: ahí no tienen nada que hacer. Acá son cita, no identidad. Se carga desde `{% block head_extra %}` de la plantilla de esta página. OJO con la regla de "sin JavaScript la página queda completa" (ver marketing/base.html). Lo que esconde el póster hasta que la animación lo enciende —`.pz`, `.prow`, `.pick`, `.simg`, `.vivo__split`— va detrás de `.js`, que es la clase que el propio script pone en . Si el script no corre, o la persona pidió menos movimiento, nada se apaga y el póster se ve entero y quieto. Es el mismo mecanismo que ya usa Eureka. `.caso` existe también en site.css, con otra pinta y para otra página (/informes-de-muestra/…). Esta hoja la pisa, pero solo se carga acá y acá esa otra ficha no aparece. Si algún día esto se comparte, hay que renombrarla. La propuesta original del diseño (planificaciones_dua_propuesta.html) traía además el CSS de otras veinte disposiciones de lámina que esta página no muestra; se podaron las reglas cuyo selector no existe en el HTML servido. --------------------------------------------------------------------------- */ .lesson-container { --acu-teal: #4ecdc4; --acu-teal-claro: #78e2d8; --acu-teal-texto: #14706a; --acu-pink: #ff6b9d; --acu-pink-claro: #ff96be; --acu-pink-texto: #a32e5c; --acu-amber: #ffc73c; --acu-amber-claro: #ffde78; --acu-amber-texto: #8a5b00; font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #f7f7f7; padding: 10px; position: relative; } .lesson-container .container { /* `.container` es de Bootstrap y trae 15px de padding horizontal. Eso metia las barras de color 15px hacia adentro, dejando asomar una franja blanca entre el borde redondeado de la tarjeta y el bloque de color: el "mal encaje". Las celdas ya traen su propio padding (14px 20px), asi que el texto no queda pegado al borde. */ padding-left: 0; padding-right: 0; max-width: 1000px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04); position: relative; isolation: isolate; } .lesson-container .header h1, .lesson-container .header p { overflow-wrap: anywhere; } @keyframes headerShimmer { 0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; } 50% { transform: rotate(180deg) scale(1.1); opacity: 0.1; } } .lesson-container .header h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; position: relative; z-index: 12; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1); line-height: 1.5; word-wrap: break-word; hyphens: auto; /* Los 80px que se descontaban aca eran el hueco de la pelotita decorativa, que ya no existe. Sin ese descuento el nombre del OA usa todo el ancho y necesita menos lineas. */ } .lesson-container .header p { font-size: 1rem; opacity: 0.95; position: relative; z-index: 12; font-weight: 400; line-height: 1.5; word-wrap: break-word; margin: 0; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } @keyframes orbMagic { 0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(78, 205, 196, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3); } 33% { transform: translateY(-8px) scale(1.1) rotate(120deg); box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(78, 205, 196, 0.5), inset 0 0 25px rgba(255, 255, 255, 0.4); } 66% { transform: translateY(-4px) scale(0.95) rotate(240deg); box-shadow: 0 0 25px rgba(255, 255, 255, 0.5), 0 0 50px rgba(132, 206, 199, 0.4), inset 0 0 22px rgba(255, 255, 255, 0.35); } } @keyframes orbCore { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } } @keyframes orbRing { 0% { transform: rotate(0deg) scale(1); opacity: 0.3; } 50% { opacity: 0.1; } 100% { transform: rotate(360deg) scale(1.1); opacity: 0.3; } } .lesson-container .planning-table { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; margin: 0; padding: 0; position: relative; z-index: 1; } .lesson-container .section-header { color: white; font-weight: 700; text-align: center; padding: 12px 15px; font-size: 0.9rem; letter-spacing: 1.2px; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.1); position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: none; } .lesson-container .planning-table tr:first-child td { border-top-left-radius: 0px; border-top-right-radius: 0px; } .lesson-container .planning-table tr:last-child td { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .lesson-container .inicio-header { background: linear-gradient(135deg, var(--acu-teal) 0%, var(--acu-teal-claro) 100%); } .lesson-container .desarrollo-header { background: linear-gradient(135deg, var(--acu-pink) 0%, var(--acu-pink-claro) 100%); } .lesson-container .cierre-header { background: linear-gradient(135deg, var(--acu-amber) 0%, var(--acu-amber-claro) 100%); } .lesson-container .section-header::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.7), transparent ); border-radius: 2px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } .lesson-container .content-cell { padding: 14px 20px; background: #ffffff; color: #2d3748; line-height: 1.4; font-size: 0.85rem; border-left: 4px solid transparent; border-bottom: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; } .lesson-container .content-cell.inicio { border-left: 4px solid var(--acu-teal); } .lesson-container .content-cell.desarrollo { border-left: 4px solid var(--acu-pink); } .lesson-container .content-cell.cierre { border-left: 4px solid var(--acu-amber); } .lesson-container .content-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); z-index: 3; border-radius: 8px; } .lesson-container .subsection-title { font-weight: 600; font-size: 0.75rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 6px; display: inline-block; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .lesson-container .content-cell.inicio .subsection-title { background: linear-gradient( 135deg, rgba(78, 205, 196, 0.18), rgba(120, 226, 216, 0.1) ); color: var(--acu-teal-texto); border-left: 3px solid var(--acu-teal); box-shadow: 0 2px 8px rgba(78, 205, 196, 0.18); } .lesson-container .content-cell.desarrollo .subsection-title { background: linear-gradient( 135deg, rgba(255, 107, 157, 0.18), rgba(255, 150, 190, 0.1) ); color: var(--acu-pink-texto); border-left: 3px solid var(--acu-pink); box-shadow: 0 2px 8px rgba(255, 107, 157, 0.18); } .lesson-container .content-cell.cierre .subsection-title { background: linear-gradient( 135deg, rgba(255, 199, 60, 0.22), rgba(255, 222, 120, 0.12) ); color: var(--acu-amber-texto); border-left: 3px solid var(--acu-amber); box-shadow: 0 2px 8px rgba(255, 199, 60, 0.2); } .lesson-container .content-cell p { margin-bottom: 6px; color: #374151; font-weight: 400; line-height: 1.5; } .lesson-container .content-cell p:last-child { margin-bottom: 0; } .error-card { background: rgba(255, 107, 157, 0.05); border: 1px solid rgba(255, 107, 157, 0.2); border-radius: 8px; padding: 15px; margin-bottom: 15px; border-left: 4px solid var(--acu-pink); box-shadow: 0 2px 8px rgba(255, 107, 157, 0.1); } .error-card h4 { color: var(--acu-pink-texto); margin-bottom: 10px; font-size: 0.9rem; font-weight: 600; } .concept-card { background: rgba(255, 107, 157, 0.05); border: 1px solid rgba(255, 107, 157, 0.2); border-radius: 8px; padding: 15px; margin-bottom: 15px; border-left: 4px solid var(--acu-pink); box-shadow: 0 2px 8px rgba(255, 107, 157, 0.1); } .concept-card h4 { color: #7a2d5c; margin-bottom: 10px; font-size: 0.9rem; font-weight: 600; } .concept-card h4.bold-term { background: linear-gradient(135deg, #ff6b9d, #ff96be); color: white; padding: 8px 12px; border-radius: 6px; margin: -15px -15px 15px -15px; } .lesson-container .exercise-card { background: linear-gradient( 135deg, rgba(255, 107, 157, 0.08), rgba(232, 181, 209, 0.05) ); border: 1px solid rgba(255, 107, 157, 0.2); border-radius: 10px; padding: 12px 16px; margin: 8px 0; border-left: 4px solid var(--acu-pink); font-size: 0.8rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(255, 107, 157, 0.1); z-index: 1; } .lesson-container .exercise-card::before { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 107, 157, 0.08)); z-index: 0; } .lesson-container .exercise-card:hover { transform: translateY(-2px) translateX(2px); box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15); border-color: var(--acu-pink-texto); background: linear-gradient( 135deg, rgba(255, 107, 157, 0.12), rgba(232, 181, 209, 0.08) ); } .lesson-container .exercise-level { font-weight: 700; color: var(--acu-pink-texto); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; background: rgba(255, 107, 157, 0.15); padding: 4px 8px; border-radius: 6px; display: inline-block; position: relative; z-index: 2; box-shadow: 0 2px 4px rgba(255, 107, 157, 0.2); } .lesson-container .exercise-content { position: relative; z-index: 2; } .lesson-container .exercise-content p { margin-bottom: 6px; line-height: 1.5; } .lesson-container .exercise-options { font-size: 0.75rem; margin: 6px 0; color: #555; padding-left: 10px; } .lesson-container .exercise-answer { font-weight: 600; color: var(--acu-pink-texto); font-size: 0.75rem; padding: 4px 8px; background: rgba(255, 107, 157, 0.1); border-radius: 4px; margin-top: 4px; } .lesson-container .content-cell ul { list-style: none; padding-left: 0; margin: 6px 0; } .lesson-container .content-cell li { position: relative; padding: 4px 0 4px 20px; margin-bottom: 3px; font-size: 0.8rem; color: #374151; line-height: 1.4; } .lesson-container .content-cell.inicio li::before { content: "●"; position: absolute; left: 8px; top: 4px; font-size: 0.8rem; color: var(--acu-teal-texto); text-shadow: 0 0 8px rgba(78, 205, 196, 0.4); } .lesson-container .content-cell.desarrollo li::before { content: "●"; position: absolute; left: 8px; top: 4px; font-size: 0.8rem; color: var(--acu-pink-texto); text-shadow: 0 0 8px rgba(255, 107, 157, 0.4); } .lesson-container .content-cell.cierre li::before { content: "●"; position: absolute; left: 8px; top: 4px; font-size: 0.8rem; color: var(--acu-amber-texto); text-shadow: 0 0 8px rgba(255, 199, 60, 0.4); } @media (max-width: 768px) {.lesson-container { padding: 5px; } .lesson-container .container { border-radius: 8px; } .lesson-container .header h1 { font-size: 1.2rem; } .lesson-container .content-cell { padding: 10px 15px; font-size: 0.8rem; } .lesson-container .section-header { padding: 8px 12px; font-size: 0.8rem; }} @media (max-width: 480px) {.lesson-container .content-cell { font-size: 0.75rem; } .lesson-container .exercise-card { font-size: 0.75rem; } .lesson-container .subsection-title { font-size: 0.7rem; }} /* Variables CSS globales */ /* Los nombres se mantienen (los usa tambien DailyPlanification) pero los valores pasan a ser los pigmentos de la burbuja de acuarela, para que la tabla y el resto del producto hablen el mismo idioma de color. */ .vivo, .entrega-sec { --naranjo-fuerte: #ffc73c; --naranjo-suave: #ffde78; --verde-fuerte: #4ecdc4; --verde-suave: #78e2d8; --morado-fuerte: #ff6b9d; --morado-suave: #ff96be; } /* Estilos para elementos strong dentro del contenido v-html */ .lesson-container .content-cell strong { color: #ffffff !important; padding: 3px 8px !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 0.8em !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; transition: all 0.2s ease !important; display: inline-block !important; margin: 1px 2px !important; position: relative !important; z-index: 1 !important; } .lesson-container .content-cell.inicio strong { background: linear-gradient( 135deg, var(--verde-fuerte), var(--verde-suave) ) !important; box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4) !important; } .lesson-container .content-cell.desarrollo strong { background: linear-gradient( 135deg, var(--morado-fuerte), var(--morado-suave) ) !important; box-shadow: 0 2px 8px rgba(255, 107, 157, 0.4) !important; } .lesson-container .content-cell.cierre strong { background: linear-gradient( 135deg, var(--naranjo-fuerte), var(--naranjo-suave) ) !important; box-shadow: 0 2px 8px rgba(255, 199, 60, 0.4) !important; } .lesson-container .content-cell strong:hover { transform: translateY(-1px) scale(1.05) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; z-index: 2 !important; } /* Estilos para listas dentro del contenido v-html */ .lesson-container .content-cell ul { list-style: none !important; padding-left: 0 !important; margin: 6px 0 !important; position: relative !important; } .lesson-container .content-cell li { position: relative !important; padding: 4px 0 4px 20px !important; margin-bottom: 3px !important; font-size: 0.8rem !important; color: #374151 !important; line-height: 1.4 !important; transition: color 0.2s ease !important; } .lesson-container .content-cell li:hover { color: #1f2937 !important; } .lesson-container .content-cell.inicio li::before { content: "●" !important; position: absolute !important; left: 8px !important; top: 4px !important; font-size: 0.8rem !important; color: var(--verde-fuerte) !important; text-shadow: 0 0 8px rgba(78, 205, 196, 0.4) !important; transition: all 0.2s ease !important; } .lesson-container .content-cell.desarrollo li::before { content: "●" !important; position: absolute !important; left: 8px !important; top: 4px !important; font-size: 0.8rem !important; color: var(--morado-fuerte) !important; text-shadow: 0 0 8px rgba(255, 107, 157, 0.4) !important; transition: all 0.2s ease !important; } .lesson-container .content-cell.cierre li::before { content: "●" !important; position: absolute !important; left: 8px !important; top: 4px !important; font-size: 0.8rem !important; color: var(--naranjo-fuerte) !important; text-shadow: 0 0 8px rgba(255, 199, 60, 0.4) !important; transition: all 0.2s ease !important; } .lesson-container .content-cell li:hover::before { transform: scale(1.2) !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important; } /* Estilos para párrafos dentro del contenido v-html */ .lesson-container .content-cell p { margin-bottom: 6px !important; color: #374151 !important; font-weight: 400 !important; line-height: 1.5 !important; transition: color 0.2s ease !important; } .lesson-container .content-cell p:last-child { margin-bottom: 0 !important; } /* Optimización para evitar conflictos de z-index */ .lesson-container .content-cell:hover .subsection-title { z-index: 1 !important; } .lesson-container .content-cell:hover .exercise-card { z-index: 1 !important; } /* Asegurar que los elementos de la tabla no interfieran con el header */ .lesson-container .planning-table { position: relative !important; z-index: 1 !important; } /* Escenario para la burbuja de acuarela: el loader se posiciona en absoluto sobre este contenedor, asi que aca vive su altura. */ .plani-loader-stage { position: relative; min-height: 320px; margin: 8px 0 4px; border-radius: 28px; overflow: hidden; } .slides-online-container .slide { background: var(--bg-primary) !important; border-radius: var(--radius-lg) !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--border) !important; transition: all 0.3s ease !important; } .vivo, .entrega-sec { --primary: #20b2aa; --primary-light: #4ecdc4; --primary-dark: #189b93; --secondary: #f8ac04; --accent: #c6588d; --text-primary: #1a202c; --text-secondary: #4a5568; --text-muted: #718096; --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #edf2f7; --border: #e2e8f0; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --gradient-primary: linear-gradient( 135deg, var(--primary) 0%, var(--primary-light) 100% ); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; } /* Los encabezados de seccion comparten tamano (1.2rem) en todos los tipos de slide. .final-question y .assertion-header estaban en 1.1rem y el salto se notaba al pasar de una lamina a la siguiente. */ .slide { background: var(--bg-primary) !important; border-radius: var(--radius-lg) !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--border) !important; transition: all 0.3s ease !important; } .slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ---- Contorno que se dibuja antes de que llegue el contenido ---- Misma tecnica que las tarjetas de materiales para la clase (MaterialStreamCards, keyframe borderSweep): un borde en ::after que arranca recortado del todo y se va revelando de izquierda a derecha, asi el profesor ve aparecer el marco de la slide y despues se llena con el texto y la imagen, en vez de mirar un hueco vacio. */ .slide.dibujando { position: relative; } .slide.dibujando:hover { transform: none; } .slide.dibujando::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--primary, #20b2aa); border-radius: var(--radius-lg); pointer-events: none; z-index: 3; clip-path: inset(0 100% 0 0); animation: slideBorderSweep 0.85s cubic-bezier(0.55, 0.05, 0.25, 1) forwards; } /* Mientras se dibuja, el encabezado vacio no debe verse como una barra suelta. */ .slide.dibujando .slide-header { opacity: 0; } @keyframes slideBorderSweep { to { clip-path: inset(0); } } /* Nota sobre el color: estos bloques (las pistas de la slide 8 y la afirmacion de la slide 10) usaban `var(--accent)`. El problema es que dos de las cuatro paletas comparten el mismo acento morado (#8C5383 en "Cian Vibrante" y en "Rojo Coral"), asi que al cambiar de paleta el morado se quedaba igual y en una lamina cian se leia como un color ajeno. Ahora usan `--primary`, que es el color que el profesor efectivamente eligio. */ /* ---- Brillo de cierre ---- Portado de MaterialStreamCards (.card.complete:before / readyShine): cuando la lamina termino de armarse, un destello la recorre en diagonal. Es el mismo gesto que ya usa materiales para la clase, para que las dos partes del producto se sientan iguales. */ .slide::before { content: ""; position: absolute; inset: -20% -35%; pointer-events: none; z-index: 6; background: linear-gradient( 112deg, transparent 32%, rgba(255, 255, 255, 0.04) 39%, rgba(255, 255, 255, 0.38) 45%, rgba(248, 252, 255, 0.92) 49%, rgba(255, 247, 219, 0.55) 52%, rgba(238, 247, 255, 0.72) 55%, rgba(255, 255, 255, 0.22) 61%, transparent 69% ); mix-blend-mode: screen; transform: translateX(-82%) rotate(3deg); opacity: 0; } .slide.lista::before { animation: slideBrilloCierre 1.05s cubic-bezier(0.35, 0.02, 0.18, 1) both; } @keyframes slideBrilloCierre { 0% { opacity: 0; transform: translateX(-82%) rotate(3deg); } 16% { opacity: 0.3; } 36% { opacity: 0.92; } 68% { opacity: 0.72; } 100% { opacity: 0; transform: translateX(82%) rotate(3deg); } } @media (prefers-reduced-motion: reduce) {.slide.lista::before { animation: none; }} /* ---- El contorno se dibuja sobre los CONTENEDORES de verdad ---- Antes esto apuntaba a `.slide-content > *` y a los hijos de las grillas, que son divs de maquetacion: no tienen fondo ni radio propio, asi que el contorno salia cuadrado y en lugares donde el profesor no ve ninguna tarjeta. La lista de abajo son los bloques que SI se ven como tarjeta (tienen fondo o borde y su propio radio), sacados del propio css de este componente. Con `inherit` ahora si heredan un radio de verdad y el trazo calza con la tarjeta. La animacion corre sola al montarse el elemento, o sea cuando el stream lo crea: no hace falta nada de JS y funciona para cualquier tipo de slide. */ .slide-header, .slide-content .intro-capsule, .slide-content .info-box, .slide-content .main-image, .slide-content .top-image, .slide-content .feature, .slide-content .stage-card-large, .slide-content .answer-explanation, .slide-content .option-card, .slide-content .text-item, .slide-content .key-learnings, .slide-content .learning-item, .slide-content .guideline-item, .slide-content .hint-item, .slide-content .analysis-hints-redesigned, .slide-content .case-question-redesigned, .slide-content .case-image-full, .slide-content .mystery-question, .slide-content .mystery-option, .slide-content .final-case, .slide-content .final-option, .slide-content .final-question, .slide-content .assertion-content, .slide-content .farewell-image { position: relative; } .slide-header::after, .slide-content .intro-capsule::after, .slide-content .info-box::after, .slide-content .main-image::after, .slide-content .top-image::after, .slide-content .feature::after, .slide-content .stage-card-large::after, .slide-content .answer-explanation::after, .slide-content .option-card::after, .slide-content .text-item::after, .slide-content .key-learnings::after, .slide-content .learning-item::after, .slide-content .guideline-item::after, .slide-content .hint-item::after, .slide-content .analysis-hints-redesigned::after, .slide-content .case-question-redesigned::after, .slide-content .case-image-full::after, .slide-content .mystery-question::after, .slide-content .mystery-option::after, .slide-content .final-case::after, .slide-content .final-option::after, .slide-content .final-question::after, .slide-content .assertion-content::after, .slide-content .farewell-image::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--primary, #20b2aa); border-radius: inherit; pointer-events: none; z-index: 4; opacity: 0.85; clip-path: inset(0 100% 0 0); animation: slideBlockSweep 1.1s cubic-bezier(0.55, 0.05, 0.25, 1) forwards; } /* Barre el borde y despues se desvanece, dejando la tarjeta como estaba. */ @keyframes slideBlockSweep { 0% { clip-path: inset(0 100% 0 0); opacity: 0.85; } 55% { clip-path: inset(0); opacity: 0.85; } 100% { clip-path: inset(0); opacity: 0; } } @media (prefers-reduced-motion: reduce) {.slide.dibujando::after, .slide-header::after { animation: none; opacity: 0; }} .slide-header { background: var(--gradient-primary); color: white; padding: 16px 24px; display: flex; align-items: center; gap: 16px; transition: all 0.3s ease; } .slide-number { background: rgba(255, 255, 255, 0.2); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; flex-shrink: 0; } .slide-title { font-size: 1.3rem; font-weight: 600; } .slide-content{padding:0} /* Layout Grid */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; height: 100%; min-height: 400px; } .slide:nth-child(6) .slide-content, .slide:nth-child(7) .slide-content, .slide:nth-child(8) .slide-content, .slide:nth-child(9) .slide-content, .slide:nth-child(10) .slide-content, .slide:nth-child(11) .slide-content, .slide:nth-child(12) .slide-content { padding: 24px; } .grid-1 { width: 100%; display: grid; gap: 20px; } .text-section { display: flex; flex-direction: column; gap: 16px; padding: 24px; justify-content: center; } .intro-text { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 8px; } .info-box { background: var(--primary-bg-medium); border: 1px solid var(--primary-border-light); border-radius: var(--radius-md); padding: 16px; transition: all 0.2s ease; } .info-box:hover { transform: translateY(-1px); border-color: var(--primary); } .info-box h3 { color: var(--primary-dark); font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .info-box p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; margin: 0; } .features { display: grid; gap: 16px; padding: 24px; justify-content: center; } .feature { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius-md); transition: all 0.2s ease; border: 1px solid transparent; } .feature:hover { background: var(--bg-primary); border-color: var(--primary); transform: translateX(4px); } .feature-icon { font-size: 1.8rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--gradient-primary); border-radius: 50%; flex-shrink: 0; transition: transform 0.2s ease; } .feature:hover .feature-icon { transform: scale(1.05); } .feature-content h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .feature-content p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; margin: 0; } .intro-capsule { text-align: center; width: 100%; padding: 20px; background: var(--primary-bg-light); border-radius: var(--radius-lg); border: 1px solid var(--primary-border-medium); margin-bottom: 16px; } .intro-capsule .intro-text { font-size: 1.1rem; color: var(--text-primary); font-weight: 500; margin-bottom: 8px; } .intro-capsule .subtitle { font-size: 1rem; color: var(--primary-dark); font-weight: 600; } .main-image { overflow: hidden; border: 2px solid var(--primary); border-radius: var(--radius-md); position: relative; width: 100%; height: 100%; transition: all 0.3s ease; margin: 24px; margin-left: 0; height: calc(100% - 48px); } .main-image:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .main-image:hover img { transform: scale(1.05); } /* Metamorfosis */ .metamorphosis-intro { text-align: center; padding: 20px; background: var(--primary-bg-light); border-radius: var(--radius-lg); border: 1px solid var(--primary-border-medium); margin-bottom: 24px; } .metamorphosis-intro .intro-text { font-size: 1.1rem; color: var(--text-primary); font-weight: 500; margin-bottom: 8px; } .metamorphosis-intro .subtitle { font-size: 1rem; color: var(--primary-dark); font-weight: 600; } .metamorphosis-grid-large { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; } .stage-card-large { background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 3px solid var(--primary); transition: all 0.3s ease; } .stage-card-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .stage-image-large { width: 100%; height: 250px; overflow: hidden; position: relative; background: var(--bg-tertiary); } .stage-image-large img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .stage-card-large:hover .stage-image-large img { transform: scale(1.08); } .stage-info { padding: 16px; } .stage-info h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .stage-info p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; margin: 0; } /* Desarrollo de Ideas */ .grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; height: auto; } .top-image { width: 100%; height: 240px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--primary); margin-bottom: 24px; transition: all 0.3s ease; box-shadow: var(--shadow-sm); } .top-image:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .top-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .top-image:hover img { transform: scale(1.05); } .text-item { background: var(--primary-bg-medium); border: 1px solid var(--primary-border-light); border-radius: var(--radius-md); padding: 16px; transition: all 0.3s ease; height: fit-content; } .text-item:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-sm); } .text-item h3 { color: var(--primary-dark); font-size: 1rem; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .text-item .emoji { font-size: 1.3rem; } .text-item p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; margin: 0; } /* Case Study Layout */ .case-study-layout { display: grid; grid-template-columns: 1fr 1fr; /* Tres filas: (observaciones | analisis), la tabla completa, y la imagen. */ grid-template-rows: auto auto auto; gap: 32px; align-items: start; } .observations-section { grid-column: 1; grid-row: 1; } .analysis-section { grid-column: 2; grid-row: 1; } .case-image-full { grid-column: 1 / -1; grid-row: 3; width: 100%; height: 300px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--primary); transition: all 0.3s ease; box-shadow: var(--shadow-sm); margin-top: 16px; } .case-image-full:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .case-image-full img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .case-image-full:hover img { transform: scale(1.05); } .section-title { font-size: 1.2rem; font-weight: 600; color: var(--primary-dark); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); } .observations-list { list-style: none; padding: 0; margin: 0 0 24px 0; } .observations-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); border-left: 4px solid var(--primary); transition: all 0.2s ease; } .observations-list li:hover { background: var(--bg-primary); transform: translateX(4px); } .observations-list li::before { content: "•"; color: var(--primary); font-weight: bold; font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; } .observations-list li span { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.4; } .exercise-options { width: 100%; display: grid; gap: 12px; margin-bottom: 24px; } /* Slide de Cierre */ .farewell-content { display: grid; gap: 24px; width: 100%; } .farewell-image { width: 100%; height: 250px; border-radius: var(--radius-lg); overflow: hidden; border: 3px solid var(--primary); box-shadow: var(--shadow-md); } .farewell-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .farewell-image:hover img { transform: scale(1.05); } .farewell-message { text-align: center; width: 100%; } .farewell-message h2 { color: var(--text-primary); font-size: 1.8rem; font-weight: 700; margin-bottom: 20px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .key-learnings { background: var(--primary-bg-light); border: 2px solid var(--primary-border-medium); border-radius: var(--radius-lg); padding: 20px; width: 100%; margin-bottom: 24px; } .key-learnings h4 { color: var(--primary-dark); font-size: 1.1rem; margin-bottom: 16px; } .learnings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .learning-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-primary); border-radius: var(--radius-sm); border: 1px solid var(--border); transition: all 0.2s ease; } .learning-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--primary); } .learning-icon { font-size: 1.3rem; } /* Responsive Design */ @media (max-width: 768px) { /* `.container` es del renderizador de la planificacion, no el del sitio (que se llama `.shell`). Se acota para que no pueda alcanzar a otra cosa. */ .lesson-container .container { gap: 16px; } } @media (max-width: 768px) {.grid-2 { grid-template-columns: 1fr; gap: 0; min-height: auto; } .text-section { padding: 20px; } .features { padding: 20px; } .main-image { height: 200px; margin: 20px; margin-left: 0; height: 200px; border-radius: var(--radius-md); } .metamorphosis-grid-large { grid-template-columns: 1fr; gap: 16px; } .stage-image-large { height: 200px; } .grid-2x2 { grid-template-columns: 1fr; gap: 16px; } .case-study-layout { grid-template-columns: 1fr; gap: 20px; } .case-image-full { grid-column: 1; grid-row: auto; } .exercise-options, .mystery-options, .final-options { gap: 10px; } .farewell-message h2 { font-size: 1.5rem; } .learnings-grid { grid-template-columns: repeat(1, 1fr); gap: 10px; } .learning-item { padding: 10px; gap: 8px; } .farewell-image { height: 200px; }} /* ===== NUEVO · Planificaciones DUA ===== */ /* La portada de este producto es mas baja que la de las otras seis (site.css la fija en 1920/690) y ancla la ilustracion arriba: asi se pierde la franja blanca del pie del banner, que con texto blanco encima lo dejaba ilegible. Va con `min-height` y no con `aspect-ratio`, que es lo que traia la propuesta: con `aspect-ratio` la altura la manda el ancho y punto, y como `.hero` recorta (overflow:hidden), el titular de tres lineas de esta pagina empujaba los botones y la nota de "3 planificaciones gratis" fuera de la banda, donde se cortaban sin dejar rastro. Con min-height la banda nunca es mas baja que el ratio y crece si el texto lo pide. 28.4vw = 545/1921. */ /* En el teléfono se deja el velo de site.css: sin él, blanco sobre #20b2aa da 2,62:1 y la bajada no se lee. */ @media (min-width:768px){.hero{aspect-ratio:auto;min-height:28.4vw}.hero__media img{object-position:left top}} @media (max-width:767px){.hero{aspect-ratio:auto;background:#20b2aa}.hero__media{inset:auto 0 0 0;height:auto}.hero__media img{height:auto;object-fit:contain;object-position:center bottom}.hero__body{padding-bottom:62%}} .section__head p{max-width:46rem} /* el porqué */ .porque{display:grid;grid-template-columns:1fr 1.15fr;gap:2.5rem;align-items:start} .porque__foto{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--sombra-alta);aspect-ratio:4/5} .porque__foto img{width:100%;height:100%;object-fit:cover;display:block} .bub{position:absolute;color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:var(--radius-pill);box-shadow:var(--sombra-boton);transform:rotate(-4deg);font-size:1rem} .bub--a{left:6%;top:60%;background:var(--primary);color:var(--dark)}.bub--b{right:6%;top:34%;background:var(--purple)}.bub--c{left:34%;top:78%;background:var(--tertiary)} .js .porque__foto .bub{opacity:0;transform:scale(.5) rotate(-4deg)}.js .porque__foto.on .bub{opacity:1;transform:rotate(-4deg);transition:opacity .3s,transform .6s cubic-bezier(.34,1.6,.64,1)} .js .porque__foto.on .bub--a{transition-delay:.4s}.js .porque__foto.on .bub--b{transition-delay:.7s}.js .porque__foto.on .bub--c{transition-delay:1s} .porque__cadena h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 .4rem} .cadena{list-style:none;margin:1.5rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem} .cadena li{background:var(--ground);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sombra-ficha);border-top:8px solid var(--c);transition:transform .8s ease,filter .8s ease,opacity .8s ease} .cadena li img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .cadena li b{display:block;padding:.7rem .9rem 0;font-size:1.05rem;color:var(--c)}.cadena li span{display:block;padding:0 .9rem .9rem;font-size:.9rem;color:var(--ink-soft)} .js .cadena.on li{animation:caer 1s ease both}.js .cadena.on li:nth-child(1){animation-delay:.6s}.js .cadena.on li:nth-child(2){animation-delay:1.4s}.js .cadena.on li:nth-child(3){animation-delay:2.2s} @keyframes caer{to{transform:rotate(-3deg) translateY(10px);filter:grayscale(1);opacity:.55}} .porque__nota{display:flex;align-items:center;gap:1rem;margin:0;font-size:1.15rem}.porque__nota img{width:120px;height:120px;object-fit:cover;object-position:60% 55%;border-radius:var(--radius);box-shadow:var(--sombra-ficha)} /* respuesta al porqué */ .porque__lede{font-size:1.15rem;line-height:1.55}.porque__lede b{color:var(--redpie)} .porque__foto figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(57,62,70,.85),transparent);color:#fff;padding:2rem 1rem .9rem;font-weight:600;font-size:.95rem} .respuesta{margin-top:2.5rem;background:var(--ground);border-radius:var(--radius-xl);padding:2rem 2.2rem;box-shadow:var(--sombra-alta);border-top:10px solid var(--secondary);display:grid;gap:.6rem;justify-items:start} .respuesta h3{margin:0;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.01em}.respuesta p{margin:0;font-size:1.05rem;line-height:1.55;max-width:60rem}.respuesta p b{color:var(--secondary-dark)} .ptag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .7rem;border-radius:var(--radius-pill);margin-left:2.2rem} .ptag--imp{background:var(--primary);color:var(--dark)}.ptag--rep{background:var(--tertiary);color:#fff}.ptag--acc{background:var(--purple);color:#fff} /* principios */ .principios{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem} .principios li{background:var(--c);color:var(--ink,#fff);border-radius:var(--radius-xl);padding:1.4rem 1.8rem;display:grid;grid-template-columns:1fr 1.2fr;gap:.4rem 2rem;align-items:center;box-shadow:var(--sombra-ficha)} .principios li b{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.05}.principios li span{font-size:1.15rem;font-weight:500;opacity:.95}.principios li em{grid-column:2;font-style:normal;opacity:.9;font-size:.95rem} /* seis acciones */ .acciones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} .accion{position:relative;background:var(--ground);border:1px solid var(--rule);border-radius:var(--radius-xl);padding:1.6rem 1.6rem 1.4rem;box-shadow:var(--sombra-ficha)} /* Las tarjetas no llevan `data-anim`: las abre el script de la pagina, de una en una (ver el bloque de la cola). Esto es lo mismo que hace `.js [data-anim]` en site.css, pero sin el `--d`, porque el retardo ya no lo pone el CSS sino el turno en la cola. Detras de `.js`, como todo lo que esconde: sin JavaScript salen las seis, quietas. */ .js .accion{opacity:0;transform:translateY(34px);transition:opacity .5s ease,transform .7s cubic-bezier(.22,.9,.3,1)} .js .accion.on{opacity:1;transform:none} .accion>i{position:absolute;left:1.2rem;top:-1rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--primary);color:var(--dark);font-style:normal;font-weight:700;display:grid;place-items:center;box-shadow:var(--sombra-boton)} .accion h3{margin:.2rem 0 .4rem;font-size:1.25rem}.accion p{color:var(--ink-soft);margin:0 0 1rem;font-size:.98rem} .mini{background:var(--ultralight);border-radius:var(--radius-lg);padding:.9rem 1rem;border-left:6px solid var(--mc,var(--secondary))} .mini--teal{--mc:var(--secondary)}.mini--azul{--mc:var(--tertiary)}.mini--rosa{--mc:var(--purple)}.mini--amarillo{--mc:var(--primary)}.mini--rojo{--mc:var(--redpie)} .mini small{display:block;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;color:var(--mc);margin:.4rem 0 .3rem}.mini small:first-child{margin-top:0} .mini__typ{font-size:1rem;line-height:1.4;color:var(--ink);min-height:1.4em}.mini__typ--q{border:2px dashed var(--secondary);border-radius:var(--radius);padding:.5rem .7rem;background:#fff} .js .mini__typ span:empty::after,.js .mini__typ span.typing::after{content:"|";animation:parpadeo 1s infinite;color:var(--ink-soft)} @keyframes parpadeo{50%{opacity:.1}} .chips{display:flex;flex-wrap:wrap;gap:.4rem}.chips span{background:#fff;border:1px solid var(--tertiary);color:var(--tertiary);font-weight:600;font-size:.85rem;padding:.25rem .7rem;border-radius:var(--radius-pill)} .ticket{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}.ticket li{display:flex;align-items:center;gap:.6rem;font-size:.95rem}.ticket li i{width:1.6rem;height:1.6rem;border-radius:6px;background:var(--secondary);display:grid;place-items:center;font-style:normal;color:#fff;font-weight:700;flex:0 0 auto}.ticket li i svg{width:1rem}.ticket li.no i{background:var(--redpie)} .caso{display:flex;gap:.8rem;align-items:flex-start}.caso img{width:110px;height:110px;border-radius:var(--radius);object-fit:cover;flex:0 0 auto} .alts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}.alts span{font-size:.8rem;background:#fff;border:1px solid var(--rule);padding:.2rem .55rem;border-radius:var(--radius)}.alts span.ok{border-color:var(--secondary);background:rgba(0,173,181,.12);font-weight:700} .niveles{display:flex;gap:.3rem;margin-top:.6rem;align-items:flex-end}.niveles span{flex:1;background:var(--c);color:#fff;font-size:.72rem;font-weight:700;text-align:center;padding:.3rem 0;border-radius:6px} .niveles span:nth-child(3){color:var(--dark)} .js .niveles span{transform:translateY(12px);opacity:0}.js .accion.on .niveles span{transform:none;opacity:1;transition:all .5s cubic-bezier(.34,1.6,.64,1)} .js .accion.on .niveles span:nth-child(2){transition-delay:.15s}.js .accion.on .niveles span:nth-child(3){transition-delay:.3s}.js .accion.on .niveles span:nth-child(4){transition-delay:.45s}.js .accion.on .niveles span:nth-child(5){transition-delay:.6s} .obt{display:flex;gap:.8rem;align-items:center;font-size:.92rem}.obt img{width:90px;height:90px;border-radius:var(--radius);object-fit:cover;flex:0 0 auto} /* en vivo */ .vivo__demo{position:relative;background:var(--ground);border:1px solid var(--rule);border-radius:var(--radius-xl);box-shadow:var(--sombra-alta);padding:1.2rem;min-height:560px;overflow:hidden} .vivo__chat{display:flex;flex-direction:column;gap:.8rem;transition:opacity .4s,transform .4s} .vivo__chat.gone{opacity:0;transform:translateY(-20px);position:absolute;pointer-events:none} .vivo .msg{align-self:flex-start;border:2px dashed var(--secondary);border-radius:var(--radius-lg);padding:.7rem 1rem;max-width:40rem;color:var(--ink)} .picks{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end} .pick{background:var(--secondary);color:#fff;font-weight:700;padding:.6rem 1rem;border-radius:var(--radius);transition:all .4s cubic-bezier(.34,1.6,.64,1)}.js .pick{opacity:0;transform:scale(.6)}.pick.on{opacity:1;transform:none}.pick b{margin-right:.4rem} .vivo .msg,.typebox{transition:opacity .4s}.js .vivo .msg,.js .typebox{opacity:0}.vivo .msg.on,.typebox.on{opacity:1}.vivo .msg:first-child{opacity:1} .typebox{border:2px dashed var(--secondary);border-radius:var(--radius-lg);padding:.8rem 1rem;min-height:5rem;font-size:1.05rem;color:var(--ink)} .js .typebox div::after{content:"|";animation:parpadeo 1s infinite;color:var(--ink-soft)} .agregar{display:block;width:100%;margin-top:.7rem;border:0;background:linear-gradient(135deg,var(--secondary),#4ecdc4);color:#fff;font:inherit;font-weight:700;padding:.7rem;border-radius:var(--radius-pill);box-shadow:var(--sombra-boton);transition:transform .15s}.agregar.press{transform:scale(.97)} .vivo__split{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;grid-template-rows:auto 1fr}.js .vivo__split{display:none}.vivo__split.on{display:grid} .vivo__sum{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem}.vivo__sum span{background:var(--secondary);color:#fff;font-size:.82rem;font-weight:700;padding:.3rem .7rem;border-radius:8px}.vivo__sum span.y{background:var(--primary);color:var(--dark)} .vivo__plan,.vivo__slides{height:560px;overflow:hidden;border-radius:var(--radius-lg);background:#f7f7f7} .vivo__slides{background:#eef1f5;padding:.6rem} .planfeed,.slidefeed{transition:transform .45s cubic-bezier(.22,.9,.3,1)} .slidefeed .pz{margin-bottom:.6rem} .js .pz{display:none}.pz.on{display:block} .js .prow{display:none}.prow.on{display:table-row} .prow.on .content-cell::after{content:"";position:absolute;inset:0;border:1.5px solid var(--acu-teal);border-radius:8px;pointer-events:none;clip-path:inset(0 100% 0 0);animation:slideBlockSweep 1.1s cubic-bezier(.55,.05,.25,1) forwards;opacity:.85} .prow.on .content-cell.desarrollo::after{border-color:var(--acu-pink)}.prow.on .content-cell.cierre::after{border-color:var(--acu-amber)} .prow.on .section-header{animation:hgrow .5s ease both;transform-origin:left}@keyframes hgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} .lesson-container .container{max-width:none;box-shadow:none} img.simg{transition:opacity .6s ease,transform .9s ease}.js img.simg{opacity:0!important;transform:scale(1.04)}img.simg.on{opacity:1!important;transform:none} .case-image-full.top{max-height:200px;margin-bottom:12px;grid-column:1/-1;grid-row:1!important;order:-1}.case-image-full.top img{height:200px;object-fit:cover} .vivo__again{position:absolute;right:1rem;bottom:1rem;border:0;background:var(--dark);color:#fff;font:inherit;font-weight:700;padding:.5rem .9rem;border-radius:var(--radius-pill);cursor:pointer;display:none}.vivo__again.on{display:block} /* lo que te llevas · sincronía */ .sync{display:grid;grid-template-columns:1fr 1.25fr;gap:1.2rem;margin-bottom:1.5rem} .sync__plan,.sync__ppt{position:relative;height:520px;overflow:hidden;border-radius:var(--radius-xl);background:#f7f7f7;box-shadow:var(--sombra-ficha)} .sync__ppt{background:#eef1f5;padding:.7rem} .sync__lbl{position:absolute;left:.8rem;top:.6rem;background:var(--dark);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--radius-pill);z-index:3} .sync__plan .planfeed{padding-top:2.2rem}.sync__ppt .slidefeed{padding-top:2rem} .sync .prow.lit td{box-shadow:inset 0 0 0 4px var(--primary);background:#fff8e6} .vivo__slides .grid-2,.sync__ppt .grid-2{grid-template-columns:1fr}.vivo__slides .main-image,.sync__ppt .main-image{height:220px} .vivo__plan,.vivo__slides{box-shadow:var(--sombra-ficha)} .entrega__lista{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.entrega__lista--dos{grid-template-columns:1fr 1fr} .entrega__lista li{background:var(--ground);border-radius:var(--radius-lg);padding:1rem 1.2rem;box-shadow:var(--sombra-ficha);border-left:8px solid var(--c)}.entrega__lista b{display:block;font-size:1.15rem;color:var(--c)}.entrega__lista span{font-size:.92rem;color:var(--ink-soft)} @media (max-width:900px){.porque,.acciones,.entrega,.sync,.entrega__lista--dos{grid-template-columns:1fr}.sync__plan,.sync__ppt{height:380px}.vivo__split{grid-template-columns:1fr}.vivo__plan,.vivo__slides{height:420px}.principios li{grid-template-columns:1fr}.principios li em{grid-column:1}.cadena{grid-template-columns:1fr 1fr 1fr;gap:.5rem}}