/* Remaqueta movil de los decks comerciales (marketing/demos//presentacion.html). Se inyecta al final de por scripts/build_profesionales_site.js, asi que pisa las reglas de slide (297x167 mm) sin tocar el original que va al PDF. Solo pantalla: en impresion el deck sigue siendo el de siempre. */ @media screen { html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { padding-bottom: 6rem; } .m-nav { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; font-size: .85rem; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(10px); background: rgba(255,255,255,.86); color: #146a88; border-bottom: 1px solid rgba(0,0,0,.08); } .m-nav a { color: inherit; text-decoration: none; } .m-nav span { color: #7f8f9b; font-weight: 600; } body[data-theme="dark"] .m-nav { background: rgba(29,33,38,.86); color: #7de3c5; border-bottom-color: rgba(255,255,255,.08); } body[data-theme="dark"] .m-nav span { color: #9aa7b2; } /* Cada slide pasa a ser una tarjeta apilada a ancho completo. */ .slide { width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 1.5rem 1.1rem 3.2rem !important; page-break-after: auto; display: flex; flex-direction: column; } .slide + .slide { border-top: 1px solid rgba(0,0,0,.08); } body[data-theme="dark"] .slide + .slide { border-top-color: rgba(255,255,255,.08); } .kicker { font-size: .72rem; margin-bottom: .5rem; } h1 { font-size: 1.75rem !important; margin: 0 0 .7rem !important; line-height: 1.15 !important; } h2 { font-size: 1.35rem !important; margin: 0 0 .7rem !important; line-height: 1.2 !important; } p, li { font-size: 1rem !important; line-height: 1.5 !important; } ul { margin: .5rem 0 0 !important; padding-left: 1.2rem !important; } li { margin-bottom: .55rem !important; } .note { font-size: .88rem !important; margin-top: 1rem !important; } /* Columnas -> filas; capturas debajo del texto, a ancho completo. */ .row { display: flex; flex-direction: column !important; gap: 1.1rem !important; flex: none !important; } .col { justify-content: flex-start !important; } .shots { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem !important; align-items: start !important; justify-content: stretch !important; margin-top: .3rem; } .shots:has(> .shot:only-child) { grid-template-columns: minmax(0, 72%); justify-content: center !important; } .shot, .shot.two { height: auto !important; width: 100% !important; max-width: 100%; border-radius: 14px !important; border-width: 1px !important; box-shadow: 0 6px 18px rgba(0,0,0,.14) !important; object-fit: contain !important; } .grid { grid-template-columns: 1fr !important; gap: .8rem !important; margin-top: 1rem !important; } .card { padding: 1rem !important; border-radius: 14px !important; } .card .t { font-size: 1.05rem !important; } .card p { font-size: .95rem !important; } /* Portada. */ .cover { min-height: min(70svh, 620px) !important; justify-content: center !important; } .cover img.logo { height: 56px !important; margin-bottom: 1.2rem !important; } .cover h1 { font-size: 1.9rem !important; } .cover .sub { font-size: 1.05rem !important; max-width: none !important; margin-top: .6rem !important; } .cover .tag { font-size: .95rem !important; } .cover .bar { height: 5px !important; } .cover .meta { position: static !important; margin-top: 1.4rem; font-size: .78rem !important; } .sections { flex-wrap: wrap; gap: .4rem !important; margin-top: .9rem !important; } .sections span { font-size: .75rem !important; padding: .25rem .7rem !important; } .soon { font-size: .68rem !important; padding: .1rem .5rem !important; } /* Pie de slide: numero pequenyo a la derecha, sin posicion absoluta. */ .foot { position: absolute !important; left: 1.1rem !important; right: 1.1rem !important; bottom: .9rem !important; font-size: .7rem !important; } .slide { position: relative !important; } .steps li { margin-bottom: .8rem !important; } } @media screen and (min-width: 700px) { .slide { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 3.5rem !important; } .m-nav { padding: .8rem 1.5rem; } }