/* VMC Solutions — "El asiento" Concepto: la diagonal que parte el isotipo en dos gotas es la partida doble. Eje de diseño: 19.1 grados desde la vertical, medido del vector del logo. Paleta: muestreada del .ai y corroborada contra los computed styles de su web. NO EDITAR AQUI. Fuente: _i18n-src/vmc.css · build.mjs copia a assets/. */ :root{ /* --- paleta verificada --- */ --navy:#00003A; /* canvas; wordmark sobre claro */ --navy-2:#0B1560; /* superficie elevada — 1.22:1 sobre el canvas, no se funde */ --navy-3:#121D75; /* superficie elevada 2 */ --azul:#0000CC; /* arranque del degradado */ --violeta:#6C329D; /* punto medio del degradado (no es color propio) */ --naranja:#FF6905; /* final del degradado, acento unico */ --naranja-cl:#FF8F3C; /* acento legible a tamaño pequeño sobre navy */ --tinta:#F2F3FB; /* texto principal */ --tinta-2:#A9AEDA; /* texto secundario */ --tinta-3:#868CBB; /* texto terciario / mono — 5.4:1 en el punto MAS CLARO del degradado */ --linea:rgba(255,255,255,.17); --linea-fuerte:rgba(255,255,255,.30); /* --- el eje de la marca --- */ --diag:-19.1deg; --grad:linear-gradient(199deg,var(--azul) 0%,var(--violeta) 52%,var(--naranja) 100%); --grad-h:linear-gradient(90deg,var(--azul) 0%,var(--violeta) 52%,var(--naranja) 100%); --f-display:'Jost',system-ui,sans-serif; --f-body:'IBM Plex Sans',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace; --max:1240px; --pad:clamp(1.25rem,5vw,3.5rem); --sec:clamp(4.5rem,10vw,8rem); } *,*::before,*::after{box-sizing:border-box} /* El color base vive en para que la capa de degradado del body pueda pintarse por ENCIMA de el (un z-index:-1 sobre un body con color de fondo quedaria escondido detras). */ html{-webkit-text-size-adjust:100%;background:var(--navy)} body{ margin:0;background:transparent;color:var(--tinta); font-family:var(--f-body);font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.62;-webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Ambiente de marca en toda la pagina: el mismo arco azul -> violeta -> naranja del isotipo, a opacidad muy baja. Va FIJO al viewport, asi que no se repite ni se estira en paginas largas y no cuesta repintado al hacer scroll. */ body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(120vw 90vh at 8% -6%, rgba(0,0,204,.30), transparent 60%), radial-gradient(95vw 80vh at 96% 22%, rgba(108,50,157,.22), transparent 58%), radial-gradient(105vw 85vh at 78% 104%, rgba(255,105,5,.13), transparent 56%), radial-gradient(85vw 70vh at 4% 78%, rgba(0,0,204,.16), transparent 58%) } img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.04;letter-spacing:-.015em;margin:0} p{margin:0} ul{margin:0;padding:0;list-style:none} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .sec{padding-block:var(--sec)} /* accesibilidad ------------------------------------------------------------ */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--naranja); color:#1A0A00;padding:.9rem 1.4rem;font-weight:600;border-radius:0 0 4px 0} .skip:focus{left:0} :focus-visible{outline:2px solid var(--naranja-cl);outline-offset:3px;border-radius:2px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* tipografia de servicio --------------------------------------------------- */ .mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--tinta-3);font-weight:500} .kicker{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em; text-transform:uppercase;color:var(--naranja-cl);font-weight:500} .lede{color:var(--tinta-2);font-size:clamp(1.05rem,1rem + .38vw,1.28rem);line-height:1.58;max-width:62ch} .h2{font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem)} .h3{font-size:clamp(1.35rem,1.2rem + .8vw,1.85rem)} /* la diagonal: el device de la marca --------------------------------------- */ .diag-rule{ position:relative;width:1px;align-self:stretch; background:var(--linea);transform:rotate(var(--diag));transform-origin:center; } .diag-rule::after{ content:'';position:absolute;inset:0;background:var(--grad); opacity:.9; /* se dibuja al entrar en pantalla: la unica animacion fuerte de la pagina */ transform:scaleY(var(--draw,0));transform-origin:top; transition:transform 1.15s cubic-bezier(.16,.84,.28,1); } .diag-rule::before{ content:'';position:absolute;top:0;bottom:0;left:-7px;right:-7px; background:var(--grad);filter:blur(11px);opacity:calc(var(--draw,0) * .5); transition:opacity 1.15s ease; } /* nav ---------------------------------------------------------------------- */ .nav{ position:sticky;top:0;z-index:90;background:rgba(0,0,58,.86); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--linea); } .nav-in{display:flex;align-items:center;gap:1.5rem;min-height:74px} .brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;text-decoration:none;padding:.4rem 0} .brand img{height:44px;width:auto} .nav-links{display:flex;align-items:center;gap:.3rem} .nav-links a{ text-decoration:none;color:var(--tinta-2);font-size:.925rem;font-weight:500; padding:.85rem .9rem;border-radius:4px;position:relative; display:inline-flex;align-items:center;min-height:44px; transition:color .18s ease } .nav-links a:hover{color:var(--tinta)} .nav-links a[aria-current="page"]{color:var(--tinta)} .nav-links a[aria-current="page"]::after{ content:'';position:absolute;left:.9rem;right:.9rem;bottom:.55rem;height:2px;background:var(--grad-h) } /* Servicios: desplegable con
, sin una linea de JS. Oracle EPM cuelga de el. Abre con click o Enter, cierra igual, y con el JS caido sigue siendo un menu que funciona. En movil no flota: se despliega en el flujo. */ .nav-desp{position:relative} .nav-desp > summary{ list-style:none;cursor:pointer;color:var(--tinta-2);font-size:.925rem;font-weight:500; padding:.85rem .9rem;border-radius:4px;display:inline-flex;align-items:center;gap:.4rem; min-height:44px;transition:color .18s ease } .nav-desp > summary::-webkit-details-marker{display:none} .nav-desp > summary:hover,.nav-desp[open] > summary{color:var(--tinta)} .nav-desp > summary:focus-visible{outline:2px solid var(--naranja-cl);outline-offset:2px} .nav-desp > summary svg{transition:transform .22s ease;opacity:.75} .nav-desp[open] > summary svg{transform:rotate(180deg)} .nav-desp > summary[aria-current]{color:var(--tinta);position:relative} .nav-desp > summary[aria-current]::after{ content:'';position:absolute;left:.9rem;right:1.9rem;bottom:.55rem;height:2px;background:var(--grad-h) } .nav-links .nav-desp-m{ position:absolute;top:calc(100% + .35rem);left:0;min-width:13rem;z-index:60; background:var(--navy-2);border:1px solid var(--linea);border-radius:4px; padding:.35rem;display:grid; box-shadow:0 1.5rem 3rem -1rem rgba(0,0,0,.6) } .nav-links .nav-desp-m a{white-space:nowrap;width:100%} .nav-cta{ text-decoration:none;font-weight:600;font-size:.9rem;color:#1A0A00;background:var(--naranja); padding:.8rem 1.15rem;border-radius:4px;display:inline-flex;align-items:center;min-height:44px; transition:filter .18s ease } .nav-cta:hover{filter:brightness(1.09)} .lang{ text-decoration:none;font-family:var(--f-mono);font-size:.78rem;font-weight:500;letter-spacing:.1em; color:var(--tinta-2);border:1px solid var(--linea-fuerte);border-radius:4px; padding:0 .8rem;display:inline-flex;align-items:center;min-height:44px;min-width:52px; justify-content:center;transition:border-color .18s ease,color .18s ease } .lang:hover{color:var(--tinta);border-color:var(--tinta-2)} .burger{ display:none;background:none;border:1px solid var(--linea-fuerte);border-radius:4px; width:46px;height:46px;cursor:pointer;padding:0;align-items:center;justify-content:center } .burger span{display:block;width:19px;height:1.5px;background:var(--tinta);position:relative} .burger span::before,.burger span::after{ content:'';position:absolute;left:0;width:19px;height:1.5px;background:var(--tinta); transition:transform .25s ease,top .25s ease } .burger span::before{top:-6px} .burger span::after{top:6px} .nav.open .burger span{background:transparent} .nav.open .burger span::before{top:0;transform:rotate(45deg)} .nav.open .burger span::after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed;inset:0;height:100dvh;background:var(--navy);z-index:80; display:none;flex-direction:column;padding:96px var(--pad) 2rem;gap:.25rem;overflow-y:auto } .nav.open + .drawer,.drawer.open{display:flex} .drawer a{ text-decoration:none;color:var(--tinta);font-family:var(--f-display); font-size:1.6rem;font-weight:500;padding:.85rem 0;border-bottom:1px solid var(--linea); display:flex;align-items:center;min-height:56px } /* en el cajon movil el desplegable NO flota: se abre en el flujo, con sangria */ .drawer .nav-desp > summary{ color:var(--tinta);font-family:var(--f-display);font-size:1.6rem;font-weight:500; padding:.85rem 0;border-bottom:1px solid var(--linea);min-height:56px; display:flex;align-items:center;justify-content:space-between;border-radius:0 } .drawer .nav-desp > summary svg{width:15px;height:15px} .drawer .nav-desp > summary[aria-current]::after{display:none} .drawer .nav-desp-m{display:grid;padding-left:1.15rem} .drawer .nav-desp-m a{font-size:1.25rem;color:var(--tinta-2);min-height:52px} .drawer .drawer-cta{ margin-top:1.5rem;background:var(--naranja);color:#1A0A00;border:0;border-radius:4px; justify-content:center;font-family:var(--f-body);font-size:1rem;font-weight:600 } /* hero ----------------------------------------------------------------------- Vuelve el fondo navy: sobre la foto las particulas no se leian (7% de cobertura a alfa 20/255 desaparece contra una imagen oscura y cargada). Capas, de atras a delante: 0 isotipo · 1 diagonal · 2 particulas · 3 texto. */ /* Sin `border-bottom`: era una raya de 1px de lado a lado y, sumada a las particulas y la diagonal terminando a filo contra el `overflow:hidden`, dibujaba un corte duro entre el hero y la seccion siguiente. Ahora las capas decorativas se desvanecen (mascaras de abajo) y el limite lo marca el ritmo del espaciado, no un filete. */ .hero{ position:relative;min-height:clamp(600px,92dvh,900px);display:flex;align-items:center; overflow:hidden;isolation:isolate } .hero-mark{ position:absolute;right:-8%;top:50%;translate:0 -50%;z-index:0; width:min(52vw,640px);opacity:.11;pointer-events:none;user-select:none } .hero-diag{ position:absolute;top:-18%;bottom:-18%;left:58%;width:2px;z-index:1; transform:rotate(var(--diag));transform-origin:center;pointer-events:none; /* la mascara gira con el elemento, asi que 180deg va a lo LARGO de la diagonal: apaga su extremo inferior en vez de cortarlo en seco */ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 66%,transparent 92%); mask-image:linear-gradient(180deg,#000 0,#000 66%,transparent 92%) } .hero-diag::after{ content:'';position:absolute;inset:0;background:var(--grad); transform:scaleY(var(--draw,0));transform-origin:top; transition:transform 1.4s cubic-bezier(.16,.84,.28,1) .15s } .hero-diag::before{ content:'';position:absolute;top:0;bottom:0;left:-14px;right:-14px;background:var(--grad); filter:blur(26px);opacity:calc(var(--draw,0) * .5);transition:opacity 1.4s ease .15s } /* particulas: sobre el fondo, por debajo del texto. Nunca capturan el puntero. */ .hero-nebula{ position:absolute;inset:0;z-index:2;width:100%;height:100%; pointer-events:none;display:block; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 97%); mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 97%) } .hero-in{position:relative;z-index:3;max-width:50rem;padding-block:clamp(3rem,9vh,6rem)} .hero h1{ font-size:clamp(2.5rem,1.5rem + 4.6vw,5rem);margin:1.1rem 0 0;letter-spacing:-.03em; text-wrap:balance } .hero h1 .g{ background:var(--grad-h);-webkit-background-clip:text;background-clip:text; color:transparent;padding-right:.06em } .hero .lede{margin-top:1.6rem} .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.4rem} .btn{ text-decoration:none;font-weight:600;font-size:.975rem;border-radius:4px; padding:1rem 1.5rem;display:inline-flex;align-items:center;gap:.5rem;min-height:52px; transition:filter .18s ease,border-color .18s ease,color .18s ease } .btn-1{background:var(--naranja);color:#1A0A00} .btn-1:hover{filter:brightness(1.09)} .btn-2{border:1px solid var(--linea-fuerte);color:var(--tinta-2)} .btn-2:hover{color:var(--tinta);border-color:var(--tinta-2)} /* el asiento: debe / haber -------------------------------------------------- */ .asiento{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.5rem,4vw,3.5rem); align-items:stretch;margin-top:3rem} .col{padding-block:.5rem} .col-h{display:flex;align-items:baseline;gap:.7rem;padding-bottom:1rem; border-bottom:1px solid var(--linea);margin-bottom:1.5rem} .col-h b{font-family:var(--f-display);font-size:1.4rem;font-weight:500;letter-spacing:.01em} .col-debe b{color:var(--tinta-2)} .col-haber b{ background:var(--grad-h);-webkit-background-clip:text;background-clip:text;color:transparent } .col p{font-size:1.06rem;line-height:1.62} .col-debe p{color:var(--tinta-2)} /* recorrido EPM: las 7 etapas del ciclo financiero, en orden ---------------- Sustituye al grafo radial del 6-ago. Un grafo pide "explorame"; un cierre contable tiene orden, y el orden ES la informacion. Estado base sin JS 100% funcional: los pasos son reales y el panel del modulo 01 lo escribe el build. epm-network.js solo intercambia; nunca es requisito. */ .sec-epm{position:relative;overflow:hidden;isolation:isolate} .sec-epm .h2,.sec-epm .lede{position:relative;z-index:1} /* --- el cielo: una sola escena, no una pila de efectos --- Un arco planetario cortado por el borde superior, el eje de la marca como rayo, y grano. El degradado del arco es EL de la marca: azul, violeta, naranja, en ese orden. Nada de esto es interactivo ni informa: aria-hidden. */ /* La mascara es lo que impide que se vea el corte. Sin ella, grano + estrellas + bruma terminan a filo en el borde de la seccion y dibujan una linea horizontal de lado a lado contra el fondo de la siguiente. Se difumina arriba y abajo, y el tramo opaco cubre entero el arco. */ .epm-cielo{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 55%,transparent 96%); mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 55%,transparent 96%) } .epm-cielo > *{position:absolute;display:block} .ec-astro,.ec-luz{right:-26vw;top:-53vw;width:72vw;aspect-ratio:1;border-radius:50%} .ec-astro{ background:conic-gradient(from 0deg, transparent 0 46%, rgba(0,0,204,.20) 48%, #0000CC 50.5%, #2B22B8 53%, #6C329D 58.5%, #A03E72 63.5%, #FF6905 69%, #FF8F3C 72.5%, rgba(255,105,5,.14) 77%, transparent 82%) } .ec-astro::after{ content:'';position:absolute;inset:2px;border-radius:50%; background: radial-gradient(circle at 22% 78%,rgba(108,50,157,.34) 0%,transparent 42%), radial-gradient(circle at 48% 52%,#040428 0%,#01012E 58%,var(--navy) 100%) } .ec-luz{ background:conic-gradient(from 0deg, transparent 0 45%, rgba(0,0,204,.42) 48%, rgba(60,50,220,.72) 52%, rgba(140,70,190,.85) 57%, rgba(200,80,120,.6) 62%, rgba(255,105,5,.85) 68%, rgba(255,143,60,.7) 73%, rgba(255,105,5,.2) 78%, transparent 83%); filter:blur(46px);opacity:.85 } .ec-rayo{width:1px;transform-origin:center; background:linear-gradient(180deg,transparent,rgba(169,174,218,.42),transparent)} .ec-r1{right:14%;top:-4%;height:34%;transform:rotate(28deg)} .ec-r2{right:31%;top:0;height:30%;transform:rotate(var(--diag));opacity:.6} .ec-r3{right:3%;top:2%;height:26%;transform:rotate(44deg);opacity:.45} .ec-bruma{ left:-10%;bottom:-24%;width:62%;aspect-ratio:1.6; background:radial-gradient(ellipse,rgba(0,0,204,.26) 0%,transparent 68%);filter:blur(80px) } .ec-estrellas{inset:0;width:100%;height:100%} .ec-grano{ inset:0;opacity:.05;mix-blend-mode:overlay;background-size:160px 160px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") } /* --- los 7 pasos --- .epm-ruta NO lleva position:relative a proposito: asi el cielo se posiciona contra .sec-epm y sangra a ancho de viewport, y el arco lo corta el borde de la pantalla, no el ancho del contenedor. Lo de dentro sube con z-index. */ .epm-ruta{margin-top:clamp(2.5rem,5vw,4rem)} .epm-pasos{ position:relative;z-index:1;display:grid; /* el numero de columnas lo pone el build (`--pasos`): al entrar el octavo modulo el 14-ago, un 7 escrito a mano habria dejado uno fuera. */ grid-template-columns:repeat(var(--pasos,7),minmax(0,1fr));gap:0 clamp(.5rem,1.2vw,1.25rem); margin-bottom:clamp(2.25rem,4vw,3.25rem) } .ep-paso{ display:grid;grid-template-rows:auto auto auto auto;align-content:start; text-decoration:none;color:inherit;padding:.25rem .25rem 0;--tono:var(--tinta-3) } .ep-paso.on{--tono:var(--naranja)} .ep-tit{ font-family:var(--f-display);font-weight:600; font-size:clamp(.86rem,.68rem + .46vw,1.02rem);line-height:1.26;letter-spacing:-.01em; color:var(--tinta-2);margin-bottom:.4rem;min-height:3.78em; /* `break-word`, no `anywhere`: con 8 columnas (~130 px) `anywhere` partia «presupuestació|n» y dejaba una letra sola en su propia linea. Asi solo parte cuando la palabra de verdad no cabe, y entonces con guion. */ overflow-wrap:break-word;hyphens:auto;transition:color .35s ease } /* Los circulos tienen que quedar en la MISMA linea aunque un titulo ocupe tres lineas y otro una. Con subgrid lo resuelve el grid; sin el, min-height. El subgrid solo se aplica en el layout de 7 columnas, donde los 7 pasos caben en una sola banda de filas: por debajo, grid-row:1/-1 los apilaria unos encima de otros (lo hizo, en movil, el 10-ago). */ @media (min-width:1181px){ @supports (grid-template-rows:subgrid){ .epm-pasos{grid-template-rows:auto auto auto auto} .ep-paso{grid-row:1/-1;grid-template-rows:subgrid} .ep-tit,.ep-prod{min-height:0} } } .ep-paso.on .ep-tit,.ep-paso:hover .ep-tit,.ep-paso:focus-visible .ep-tit{color:var(--tinta)} .ep-prod{font-size:.85rem;line-height:1.3;color:var(--tinta-3);margin-bottom:1.4rem; min-height:2.6em;transition:color .35s ease} .ep-paso.on .ep-prod{color:var(--tinta-2)} .ep-fila{display:flex;align-items:center;gap:.75rem;margin-bottom:1.4rem} .ep-circ{ flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center; border:1px solid color-mix(in srgb,var(--tono) 45%,transparent); background:radial-gradient(circle,color-mix(in srgb,var(--tono) 14%,transparent) 0%,transparent 72%); color:var(--tono); transition:border-color .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.16,1,.3,1),background .4s ease } .ep-paso:hover .ep-circ,.ep-paso:focus-visible .ep-circ{ border-color:color-mix(in srgb,var(--tono) 75%,transparent);transform:translateY(-2px) } .ep-paso.on .ep-circ{ border-color:var(--naranja); background:radial-gradient(circle,rgba(255,105,5,.2) 0%,transparent 72%); box-shadow:0 0 0 1px rgba(255,105,5,.3),0 0 24px 3px rgba(255,105,5,.34), inset 0 0 18px rgba(255,143,60,.16) } .ep-linea{ flex:1;height:1px;min-width:0;color:color-mix(in srgb,var(--tono) 55%,transparent); background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 9px); transition:color .4s ease } .ep-paso:last-child .ep-linea{display:none} .ep-desc{font-size:.855rem;line-height:1.58;color:var(--tinta-3);max-width:23ch; transition:color .35s ease} .ep-paso.on .ep-desc{color:var(--tinta-2)} .ep-paso:focus-visible{outline:2px solid var(--naranja-cl);outline-offset:8px;border-radius:4px} /* --- el panel: debajo del recorrido, nunca a un lado --- */ .epm-panel{ position:relative;z-index:1; background:color-mix(in srgb,var(--navy-2) 78%,transparent); border:1px solid var(--linea);border-radius:4px; padding:clamp(1.6rem,2.8vw,2.5rem); display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.2fr); gap:clamp(1.75rem,3vw,3rem);align-items:start } .ep-nom{margin:0 0 .45rem;text-wrap:balance} .ep-sub{color:var(--naranja-cl);font-weight:600;font-size:.97rem;margin:0 0 1.3rem} .ep-largo{color:var(--tinta-2);line-height:1.72;margin:0 0 1.9rem;max-width:42ch} .ep-cta{display:inline-flex} /* sin numeracion: los filetes ya dan el ritmo. La `.caps` general del sitio lleva un `01/02/03` en la primera columna; aqui no, por peticion del 10-ago. */ .ep-caps{margin-top:0} .ep-caps li{grid-template-columns:1fr;gap:0;padding:.85rem 0} .ep-caps li:first-child{border-top:0;padding-top:0} /* la maqueta: formas, nunca cifras. Y cada modulo con la SUYA — lo que ese modulo produce de verdad. El marco es el mismo que usara la captura real de VMC cuando exista, para que sustituir una por otra no mueva ni un pixel. */ .maqueta{ border:1px solid var(--linea);border-radius:4px;overflow:hidden; background:linear-gradient(160deg,rgba(18,29,117,.5),rgba(0,0,58,.6)) } .mq-barra{display:flex;align-items:center;gap:.4rem;padding:.7rem .85rem; border-bottom:1px solid var(--linea)} .mq-barra i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15)} .mq-barra .mq-der{margin-left:auto;display:flex;gap:.35rem} .mq-barra .mq-der b{display:block;width:11px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)} .mq-lienzo,.mq-shot{display:block;width:100%;aspect-ratio:16/10} .mq-shot{object-fit:cover;object-position:top left} /* La maqueta con captura real es un