/* ============================================================================= vf-web.css — lo que agrega esta reforma a la web pública. Se carga DESPUÉS de style.css y responsive.css para poder ajustar el tema sin editarlo: style.css tiene 9600 líneas y es del theme comprado, así que tocarlo hace imposible actualizarlo y difícil saber qué se cambió y por qué. Todo lo de acá lleva prefijo .vf- salvo cuando corrige explícitamente una regla del tema, y en ese caso está comentado por qué. ========================================================================== */ :root { --vf-azul: #0554f2; --vf-azul-oscuro: #0b2a5b; --vf-navy: #1e2a78; --vf-tinta: #0b0d12; --vf-gris: #59627a; --vf-gris-claro: #f4f7fb; --vf-borde: #dce5f0; --vf-radio: 18px; } /* ══ Preloader ═══════════════════════════════════════════════════════════════ El anillo del tema es naranja (#f35a38) y solo se vuelve azul cuando el body lleva la clase .it-solution — que la tienen 2 páginas de 26. En las otras 15 con pelado giraba un anillo naranja que no es de la marca. Se corrige en la regla base para que dé igual la clase del body. */ .site-preloader .ring { border: 6px solid rgba(5, 84, 242, .18); border-top-color: var(--vf-azul); } .site-preloader h2 { color: var(--vf-navy); } /* Texto solo para lectores de pantalla. Bootstrap 4 ya trae .sr-only, pero se declara acá porque el preloader se pinta antes de que baje ninguna hoja. */ .site-preloader .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ══ Fachada de video ════════════════════════════════════════════════════════ La tarjeta muestra la miniatura de YouTube y solo inserta el reproductor al hacer clic. La página de tutoriales incrustaba 3 iframes al cargar: ~1 MB de scripts de terceros y cookies antes de que nadie pidiera ver nada. */ .vf-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; } .vf-video { background: #fff; border: 1px solid var(--vf-borde); border-radius: var(--vf-radio); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .vf-video:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 42, 91, .13); } /* El botón mantiene la proporción 16:9 con padding-top y no con aspect-ratio, porque el tema todavía soporta navegadores donde aspect-ratio no existe y la tarjeta colapsaría a cero de alto. */ .vf-video-face { position: relative; display: block; width: 100%; padding: 0 0 56.25% 0; border: 0; background: #0b0d12; cursor: pointer; overflow: hidden; } .vf-video-face > img, .vf-video-face > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .vf-video-face > img { transition: transform .4s ease, opacity .3s ease; } .vf-video:hover .vf-video-face > img { transform: scale(1.05); } .vf-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--vf-azul); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: transform .25s ease, background .25s ease; pointer-events: none; } .vf-video-face > img + .vf-video-play svg { width: 26px; height: 26px; margin-left: 3px; } .vf-video:hover .vf-video-play { transform: translate(-50%, -50%) scale(1.1); } .vf-video-body { padding: 20px 22px 24px; } .vf-video-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vf-azul); background: rgba(5, 84, 242, .09); padding: 5px 11px; border-radius: 999px; margin-bottom: 10px; } .vf-video-body h3 { font-size: 19px; line-height: 1.4; margin: 0 0 8px; color: var(--vf-tinta); } .vf-video-body p { font-size: 15px; color: var(--vf-gris); margin: 0; } /* ══ Sub-navegación de secciones ═════════════════════════════════════════════ Barra pegajosa que marca en qué sección está el visitante. */ .vf-linenav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .93); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--vf-borde); } .vf-linenav-inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; } .vf-linenav-inner::-webkit-scrollbar { display: none; } .vf-linenav a { flex: none; padding: 14px 16px; font-size: 15px; font-weight: 700; color: var(--vf-gris); border-bottom: 3px solid transparent; white-space: nowrap; } .vf-linenav a:hover { color: var(--vf-azul); text-decoration: none; } .vf-linenav a.active { color: var(--vf-azul); border-bottom-color: var(--vf-azul); } /* ══ Utilidades ══════════════════════════════════════════════════════════════ */ /* Reserva el espacio de la imagen antes de que baje, para que el texto no salte cuando aparece. Es lo que Google mide como CLS. */ .vf-img-fluid { display: block; width: 100%; height: auto; } .vf-eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vf-azul); margin-bottom: 12px; } /* ══ Responsive ══════════════════════════════════════════════════════════════ El tema corta en 640px y ahí apila los botones a ancho completo. Se respeta ese punto para no tener dos sistemas de cortes conviviendo. */ @media (max-width: 767px) { .vf-videos { grid-template-columns: 1fr; gap: 22px; } .vf-video-body { padding: 16px 18px 20px; } .vf-video-body h3 { font-size: 17px; } .vf-video-play { width: 56px; height: 56px; } } /* ══ Bloque de contacto reutilizable ═════════════════════════════════════════ Cierra el blog, los artículos y las páginas de producto. */ .vf-cta-contacto { background: var(--vf-gris-claro); border-top: 1px solid var(--vf-borde); } .vf-cta-media img { border-radius: var(--vf-radio); box-shadow: 0 20px 46px rgba(11, 42, 91, .16); object-fit: cover; } .vf-cta-body h2 { font-size: 32px; line-height: 1.25; margin: 0 0 12px; color: var(--vf-tinta); } .vf-cta-body > p { font-size: 16px; line-height: 1.7; color: var(--vf-gris); margin-bottom: 26px; } .vf-form .form-group { margin-bottom: 16px; } .vf-form label { display: block; font-size: 14px; font-weight: 700; color: var(--vf-tinta); margin-bottom: 6px; } .vf-form label span[aria-hidden] { color: #e2413a; } .vf-form .form-control { height: auto; padding: 12px 15px; font-size: 15px; border: 1px solid var(--vf-borde); border-radius: 10px; background: #fff; color: var(--vf-tinta); transition: border-color .18s ease, box-shadow .18s ease; } .vf-form .form-control:focus { border-color: var(--vf-azul); box-shadow: 0 0 0 3px rgba(5, 84, 242, .15); outline: none; } /* El error no se marca solo con color: quien no distingue rojo y verde necesita otra señal, así que el borde además engrosa. */ .vf-form .form-control.is-invalid { border-color: #e2413a; border-width: 2px; background: #fff6f5; } .vf-form textarea.form-control { min-height: 96px; resize: vertical; } /* La trampa para robots. No se usa display:none ni visibility:hidden porque los robots más nuevos los detectan y saltan el campo; sacarlo del flujo lo deja invisible para una persona pero presente para el que rellena a ciegas. */ .vf-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .vf-form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 10px; } .vf-form-pie button[disabled] { opacity: .6; cursor: not-allowed; } .vf-wa { font-weight: 700; color: #128c4b; font-size: 15px; } .vf-wa:hover { color: #0d6b39; text-decoration: underline; } .vf-wa i { font-size: 18px; vertical-align: -1px; } .vf-form-estado { margin-top: 16px; font-size: 15px; line-height: 1.6; font-weight: 600; } .vf-form-estado:empty { margin-top: 0; } .vf-form-estado.is-ok { color: #0f7a43; } .vf-form-estado.is-error { color: #c62f28; } /* ══ Blog ════════════════════════════════════════════════════════════════════ */ .vf-post-tema { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vf-azul); background: rgba(5, 84, 242, .09); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; } .vf-post-meta { font-size: 14px; color: var(--vf-gris); margin-bottom: 14px; } @media (max-width: 991px) { .vf-cta-media { margin-bottom: 32px; } .vf-cta-body h2 { font-size: 27px; } } @media (max-width: 575px) { .vf-form-pie { flex-direction: column; align-items: stretch; } .vf-form-pie .btn { width: 100%; } .vf-wa { text-align: center; } } /* ══ Cabecera de página interior ═════════════════════════════════════════════ Reemplaza la franja que usaba un banner promocional de fondo: la promo salía recortada e ilegible y el título blanco encima tampoco se leía. */ .vf-cabecera { position: relative; overflow: hidden; background: #0b2a5b; background-image: linear-gradient(135deg, #05070f 0%, #0e1e4a 46%, #1e3fae 100%); color: #fff; padding: 74px 0 64px; } .vf-cabecera-glow { position: absolute; width: 620px; height: 620px; right: -180px; top: -260px; background: radial-gradient(circle, rgba(90, 160, 255, .34) 0%, rgba(90, 160, 255, 0) 68%); border-radius: 50%; pointer-events: none; } /* El h1 fija su color en la propia regla y no lo hereda del contenedor: en este tema cualquier regla directa sobre h1 le gana a un color heredado, y así fue como un título quedó invisible en el Libro de Reclamaciones. */ .vf-cabecera h1 { position: relative; color: #fff; font-size: 42px; line-height: 1.18; font-weight: 800; letter-spacing: -.5px; margin: 0; max-width: 900px; } .vf-cabecera-bajada { position: relative; margin: 16px 0 0; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .82); max-width: 700px; } .vf-migas { position: relative; font-size: 14px; font-weight: 600; margin-bottom: 16px; color: rgba(255, 255, 255, .66); } .vf-migas a { color: rgba(255, 255, 255, .82); } .vf-migas a:hover { color: #fff; text-decoration: underline; } .vf-migas-sep { margin: 0 9px; color: rgba(255, 255, 255, .42); } .vf-migas [aria-current] { color: #fff; } /* La promo, completa y clicable. */ .vf-promo { display: block; line-height: 0; } .vf-promo img { display: block; width: 100%; height: auto; } @media (max-width: 767px) { .vf-cabecera { padding: 52px 0 46px; } .vf-cabecera h1 { font-size: 30px; } .vf-cabecera-bajada { font-size: 16px; } } /* Las tarjetas del blog se emparejan de alto. El tema las deja del alto de su propio texto, así que dos resúmenes de distinto largo dejaban un escalón. */ .blog-area.full-blog .blog-item-box > .row { display: flex; flex-wrap: wrap; } .blog-area.full-blog .single-item { display: flex; } .blog-area.full-blog .single-item > .item { display: flex; flex-direction: column; width: 100%; } .blog-area.full-blog .single-item > .item .info { flex: 1 1 auto; } /* ══ Titular del inicio ══════════════════════════════════════════════════════ El titular del hero pasó de

a

: es el encabezado principal de la página que más importa posicionar, y como

la portada no tenía ninguno. El tema solo estiliza `.banner-area.it-banner .content h2`, así que se replican esas reglas para h1 y se ve exactamente igual. El hace el salto de línea que antes hacía un mal cerrado. */ .banner-area.it-banner .content h1 { font-size: 60px; font-weight: 600; margin-bottom: 20px; color: inherit; } .banner-area.it-banner .content h1 span { display: block; } @media (max-width: 991px) { .banner-area.it-banner .content h1 { font-size: 36px; } } /* ══ Sección: Libro de Reclamaciones ═════════════════════════════════════════ */ .vf-libro { background: var(--vf-gris-claro); } .vf-libro-mock { background: #fff; border: 1px solid var(--vf-borde); border-radius: 22px; padding: 26px; box-shadow: 0 26px 60px rgba(11, 42, 91, .13); max-width: 480px; } .vf-libro-mock-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--vf-borde); } .vf-libro-qr { flex: none; width: 62px; height: 62px; padding: 6px; background: #fff; border: 1px solid var(--vf-borde); border-radius: 10px; } .vf-libro-qr svg { width: 100%; height: 100%; display: block; } .vf-libro-mock-titulo { font-weight: 800; font-size: 16px; color: var(--vf-tinta); } .vf-libro-mock-sub { font-size: 13px; color: var(--vf-gris); margin-top: 2px; } .vf-libro-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--vf-borde); } .vf-libro-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; color: var(--vf-tinta); } .vf-libro-meta { font-size: 12px; color: var(--vf-gris); margin-top: 3px; } .vf-libro-pill { flex: none; font-size: 12px; font-weight: 800; padding: 6px 13px; border-radius: 999px; white-space: nowrap; } .vf-libro-pill.ok { background: #dcfce7; color: #0f7a43; } .vf-libro-pill.warn { background: #fef3c7; color: #92580a; } .vf-libro-plazo { margin-top: 18px; padding: 15px 17px; background: var(--vf-gris-claro); border: 1px solid var(--vf-borde); border-radius: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .vf-libro-plazo b { font-size: 16px; color: var(--vf-azul-oscuro); } .vf-libro-plazo span { font-size: 13px; color: var(--vf-gris); } .vf-libro-copy h2 { font-size: 34px; line-height: 1.24; margin: 0 0 14px; color: var(--vf-tinta); } .vf-libro-lead { font-size: 17px; line-height: 1.75; color: var(--vf-gris); } /* Lista con palomita. El check es un pseudo-elemento y no un carácter del texto: así los lectores de pantalla leen la frase y no "marca de verificación" delante de cada línea. */ .vf-lista-check { list-style: none; padding: 0; margin: 22px 0 26px; } .vf-lista-check li { position: relative; padding-left: 32px; margin-bottom: 12px; font-size: 16px; line-height: 1.6; color: var(--vf-tinta); } .vf-lista-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(5, 84, 242, .12); } .vf-lista-check li::after { content: ""; position: absolute; left: 6px; top: 10px; width: 8px; height: 4px; border-left: 2px solid var(--vf-azul); border-bottom: 2px solid var(--vf-azul); transform: rotate(-45deg); } .vf-plan-destacado { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 22px; background: #fff; border: 1px solid var(--vf-borde); border-left: 4px solid var(--vf-azul); border-radius: 0 14px 14px 0; margin-bottom: 26px; } .vf-plan-precio { font-size: 30px; font-weight: 800; color: var(--vf-azul-oscuro); white-space: nowrap; } .vf-plan-precio small { font-size: 15px; font-weight: 600; color: var(--vf-gris); } .vf-plan-nombre { font-size: 16px; font-weight: 800; color: var(--vf-tinta); } .vf-plan-tag { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: #fef3c7; color: #92580a; padding: 3px 9px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; } .vf-plan-caracts { font-size: 14px; color: var(--vf-gris); margin-top: 4px; } .vf-ctas { display: flex; flex-wrap: wrap; gap: 14px; } /* ══ Sección: VeruPrinter (franja oscura) ════════════════════════════════════ */ .vf-printer { position: relative; overflow: hidden; background: #05070f; background-image: linear-gradient(135deg, #05070f 0%, #0e1e4a 52%, #14245c 100%); color: #fff; } .vf-printer-glow { position: absolute; width: 640px; height: 640px; left: -220px; bottom: -300px; background: radial-gradient(circle, rgba(5, 84, 242, .32) 0%, rgba(5, 84, 242, 0) 70%); border-radius: 50%; pointer-events: none; } .vf-printer .container { position: relative; } .vf-eyebrow.claro { color: #7fd4ff; } /* El color va en el h2 y no heredado: en este tema cualquier regla directa sobre el encabezado le gana a un color heredado del contenedor. */ .vf-printer-copy h2 { font-size: 34px; line-height: 1.24; margin: 0 0 14px; color: #fff; } .vf-printer-lead { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .82); margin-bottom: 26px; } .vf-printer-planes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .vf-pp-chip { flex: 1 1 130px; padding: 16px 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; } .vf-pp-chip.es-destacado { background: rgba(5, 84, 242, .22); border-color: rgba(127, 212, 255, .5); } .vf-pp-chip b { display: block; font-size: 14px; color: rgba(255, 255, 255, .8); } .vf-pp-precio { display: block; font-size: 24px; font-weight: 800; color: #fff; margin: 4px 0 2px; } .vf-pp-docs { font-size: 13px; color: rgba(255, 255, 255, .68); } /* Teléfono y ticket */ .vf-printer-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; } .vf-fono { position: relative; width: 232px; background: #0b0d12; border: 8px solid #1b2233; border-radius: 34px; padding: 16px 12px 20px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); } .vf-fono-notch { width: 76px; height: 5px; background: #2c3549; border-radius: 999px; margin: 0 auto 14px; } .vf-fono-app { background: #121724; border-radius: 16px; padding: 14px 12px; } .vf-fono-titulo { font-size: 13px; font-weight: 800; color: #7fd4ff; margin-bottom: 12px; letter-spacing: .02em; } .vf-fono-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; color: rgba(255, 255, 255, .72); padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); } .vf-fono-fila .st { color: rgba(255, 255, 255, .5); white-space: nowrap; } .vf-fono-fila .st.ok { color: #4ade80; } .vf-fono-btn { margin-top: 14px; padding: 10px; background: var(--vf-azul); color: #fff; font-size: 12px; font-weight: 700; text-align: center; border-radius: 10px; } .vf-ticket { position: absolute; right: 4%; bottom: 6%; width: 178px; background: #fff; color: #0b0d12; border-radius: 6px; padding: 14px 13px; box-shadow: 0 22px 50px rgba(0, 0, 0, .45); transform: rotate(4deg); } .vf-ticket-head { font-size: 9.5px; font-weight: 800; text-align: center; letter-spacing: .04em; line-height: 1.5; padding-bottom: 9px; border-bottom: 1px dashed #c9cfdb; } .vf-ticket-head span { display: block; font-weight: 600; color: #6b7280; } .vf-ticket-lineas { padding: 10px 0; } .vf-ticket-lineas i { display: block; height: 5px; background: #e8ecf3; border-radius: 3px; margin-bottom: 6px; } .vf-ticket-lineas i:nth-child(2) { width: 78%; } .vf-ticket-lineas i:nth-child(3) { width: 88%; } .vf-ticket-lineas i:nth-child(4) { width: 62%; } .vf-ticket-total { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; padding-top: 9px; border-top: 1px dashed #c9cfdb; } .vf-ticket-barra { margin-top: 11px; height: 26px; background: repeating-linear-gradient(90deg, #0b0d12 0 2px, #fff 2px 4px, #0b0d12 4px 5px, #fff 5px 8px); border-radius: 2px; } @media (max-width: 991px) { .vf-libro-visual { margin-bottom: 40px; } .vf-libro-mock { max-width: 100%; } .vf-libro-copy h2, .vf-printer-copy h2 { font-size: 27px; } .vf-printer-visual { margin-top: 44px; min-height: 340px; } } @media (max-width: 575px) { .vf-ctas { flex-direction: column; } .vf-ctas .btn { width: 100%; text-align: center; } .vf-pp-chip { flex: 1 1 100%; } /* El ticket se saca del solapamiento: en pantallas chicas se montaba encima del teléfono y no se leía ninguno de los dos. */ .vf-ticket { position: static; transform: none; margin: 24px auto 0; } .vf-printer-visual { flex-direction: column; } } /* Ajustes tras revisar el render de las dos secciones nuevas. */ /* El ticket se apoyaba encima del teléfono y tapaba la fila "En cola…". Se corre a la derecha para que se lean los dos. */ .vf-ticket { right: 0; bottom: 10%; } /* El botón secundario del Libro heredaba el borde naranja del tema (`btn-theme border`), que sobre la sección azul desentona. Se alinea al azul de marca, que es el mismo criterio del resto de la reforma. */ .vf-libro .vf-ctas .btn-theme.border { border-color: var(--vf-azul) !important; color: var(--vf-azul); } .vf-libro .vf-ctas .btn-theme.border:hover { background: var(--vf-azul); color: #fff; } /* ══ Páginas de producto (Libro y VeruPrinter) ═══════════════════════════════ */ .vf-h2 { font-size: 34px; line-height: 1.24; margin: 0 0 14px; color: var(--vf-tinta); } .vf-lead { font-size: 17px; line-height: 1.75; color: var(--vf-gris); margin: 0; } /* Tarjetas de igual alto. Sin esto, cuatro textos de distinto largo dejan un escalón que hace ver la fila desalineada. */ .vf-cards { display: flex; flex-wrap: wrap; } .vf-cards > [class*="col-"] { display: flex; margin-bottom: 26px; } .vf-card { width: 100%; background: #fff; border: 1px solid var(--vf-borde); border-radius: var(--vf-radio); padding: 26px 24px; transition: transform .22s ease, box-shadow .22s ease; } .vf-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 42, 91, .12); } .vf-card h3 { font-size: 18px; line-height: 1.35; margin: 0 0 9px; color: var(--vf-tinta); } .vf-card p { font-size: 15px; line-height: 1.7; color: var(--vf-gris); margin: 0; } /* Pasos numerados */ .vf-pasos { display: flex; flex-wrap: wrap; } .vf-pasos > [class*="col-"] { display: flex; margin-bottom: 26px; } .vf-paso { position: relative; width: 100%; background: #fff; border: 1px solid var(--vf-borde); border-radius: var(--vf-radio); padding: 30px 24px 26px; } .vf-paso-n { position: absolute; top: -17px; left: 24px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--vf-azul); color: #fff; font-size: 17px; font-weight: 800; border-radius: 12px; box-shadow: 0 8px 20px rgba(5, 84, 242, .3); } .vf-paso h3 { font-size: 17px; line-height: 1.35; margin: 12px 0 8px; color: var(--vf-tinta); } .vf-paso p { font-size: 15px; line-height: 1.7; color: var(--vf-gris); margin: 0; } /* Tarjeta de plan */ .vf-card-plan { text-align: center; padding: 26px 18px; } .vf-card-plan.es-destacado { border-color: var(--vf-azul); box-shadow: 0 14px 34px rgba(5, 84, 242, .14); } .vf-card-plan-nombre { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--vf-gris); margin-bottom: 8px; } .vf-card-plan-precio { font-size: 27px; font-weight: 800; color: var(--vf-azul-oscuro); line-height: 1.2; } .vf-card-plan-mes { font-size: 13px; color: var(--vf-gris); margin-bottom: 14px; } .vf-card-plan-lista { list-style: none; padding: 0; margin: 0; text-align: left; border-top: 1px solid var(--vf-borde); padding-top: 14px; } .vf-card-plan-lista li { font-size: 14px; line-height: 1.55; color: var(--vf-gris); padding: 5px 0 5px 18px; position: relative; } .vf-card-plan-lista li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; background: var(--vf-azul); border-radius: 50%; } /* Acordeón de preguntas. Se usa
/ nativo y no un acordeón de JavaScript: funciona sin scripts, el navegador ya le da el rol correcto a los lectores de pantalla, y el buscador ve el texto de la respuesta aunque esté plegado — que es la condición para que el FAQPage sirva de algo. */ .vf-faq { background: #fff; border: 1px solid var(--vf-borde); border-radius: 14px; margin-bottom: 12px; overflow: hidden; } .vf-faq summary { cursor: pointer; list-style: none; padding: 19px 52px 19px 22px; font-size: 16.5px; font-weight: 700; color: var(--vf-tinta); position: relative; } .vf-faq summary::-webkit-details-marker { display: none; } /* El signo se dibuja con dos barras, no con un carácter: así no lo lee el lector de pantalla como si fuera parte de la pregunta. */ .vf-faq summary::before, .vf-faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; background: var(--vf-azul); transition: transform .22s ease, opacity .22s ease; } .vf-faq summary::before { width: 13px; height: 2px; margin-top: -1px; } .vf-faq summary::after { width: 2px; height: 13px; margin: -6px 5px 0 0; } .vf-faq[open] summary::after { transform: rotate(90deg); opacity: 0; } .vf-faq summary:focus-visible { outline: 3px solid rgba(5, 84, 242, .35); outline-offset: -3px; } .vf-faq-r { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.75; color: var(--vf-gris); } @media (max-width: 991px) { .vf-h2 { font-size: 27px; } } /* Tarjeta de tutorial interactivo. Es un entero y no una tarjeta con un botón dentro: el área clicable es toda la tarjeta, que es lo que la gente intenta tocar en el móvil. */ .vf-card-inter { display: flex; flex-direction: column; text-decoration: none; } .vf-card-inter:hover { text-decoration: none; } .vf-card-inter p { flex: 1 1 auto; margin-bottom: 16px; } .vf-card-inter-cta { align-self: flex-start; font-size: 15px; font-weight: 800; color: var(--vf-azul); } .vf-card-inter-cta::after { content: "→"; margin-left: 7px; display: inline-block; transition: transform .2s ease; } .vf-card-inter:hover .vf-card-inter-cta::after { transform: translateX(4px); } /* ══ Tienda ══════════════════════════════════════════════════════════════════ */ .vf-tienda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--vf-borde); } .vf-buscador { position: relative; flex: 1 1 300px; } .vf-buscador svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--vf-gris); pointer-events: none; } .vf-buscador input { width: 100%; padding: 13px 16px 13px 44px; font-size: 15px; border: 1px solid var(--vf-borde); border-radius: 12px; background: #fff; color: var(--vf-tinta); } .vf-buscador input:focus { border-color: var(--vf-azul); box-shadow: 0 0 0 3px rgba(5, 84, 242, .15); outline: none; } .vf-chips { display: flex; flex-wrap: wrap; gap: 8px; } .vf-chip { border: 1px solid var(--vf-borde); background: #fff; color: var(--vf-gris); font-size: 13.5px; font-weight: 700; padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: all .18s ease; } .vf-chip:hover { border-color: var(--vf-azul); color: var(--vf-azul); } .vf-chip.activo { background: var(--vf-azul); border-color: var(--vf-azul); color: #fff; } .vf-contador { font-size: 14px; font-weight: 700; color: var(--vf-gris); margin-left: auto; } /* Rejilla de productos */ .vf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .vf-prod { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vf-borde); border-radius: var(--vf-radio); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; } .vf-prod:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 42, 91, .13); } .vf-prod-img { position: relative; display: block; background: #fff; padding: 18px; aspect-ratio: 1 / 1; } /* Reserva de espacio para navegadores sin aspect-ratio: sin esto la tarjeta colapsa a la altura del texto mientras baja la imagen. */ @supports not (aspect-ratio: 1 / 1) { .vf-prod-img { height: 240px; } } .vf-prod-img img { width: 100%; height: 100%; object-fit: contain; } .vf-prod-envio { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: #dcfce7; color: #0f7a43; padding: 5px 11px; border-radius: 999px; } .vf-prod-cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; border-top: 1px solid var(--vf-borde); } .vf-prod-cat { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--vf-azul); margin-bottom: 7px; } .vf-prod-nombre { font-size: 15px; line-height: 1.45; font-weight: 700; margin: 0 0 12px; /* Tres líneas como máximo: los nombres del catálogo llegan a 90 caracteres y sin tope la tarjeta se estira y rompe la rejilla. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vf-prod-nombre a { color: var(--vf-tinta); } .vf-prod-nombre a:hover { color: var(--vf-azul); text-decoration: none; } .vf-prod-precio { margin-top: auto; margin-bottom: 13px; } .vf-prod-precio del { font-size: 13px; color: var(--vf-gris); margin-right: 7px; } .vf-prod-precio strong { font-size: 19px; font-weight: 800; color: var(--vf-azul-oscuro); } .vf-prod-acciones { display: flex; gap: 8px; } .vf-btn-agregar { flex: 1 1 auto; border: 0; border-radius: 10px; background: var(--vf-azul); color: #fff; font-size: 14px; font-weight: 700; padding: 10px 12px; cursor: pointer; transition: background .18s ease; } .vf-btn-agregar:hover { background: #0442c4; } .vf-btn-ver { flex: none; border: 1px solid var(--vf-borde); border-radius: 10px; color: var(--vf-gris); font-size: 13.5px; font-weight: 700; padding: 10px 13px; } .vf-btn-ver:hover { border-color: var(--vf-azul); color: var(--vf-azul); text-decoration: none; } .vf-sin-resultados { text-align: center; padding: 48px 20px; font-size: 16px; color: var(--vf-gris); } .vf-tienda-pie { text-align: center; margin-top: 48px; } .vf-tienda-pie p { font-weight: 700; color: var(--vf-gris); margin-bottom: 14px; } /* ══ Ficha de producto ═══════════════════════════════════════════════════════ */ .vf-ficha-img { position: relative; background: #fff; border: 1px solid var(--vf-borde); border-radius: var(--vf-radio); padding: 34px; text-align: center; } .vf-ficha-img img { max-width: 100%; height: auto; } .vf-ficha-nombre { font-size: 27px; line-height: 1.3; margin: 4px 0 14px; color: var(--vf-tinta); } .vf-ficha-precio { margin-bottom: 20px; } .vf-ficha-precio del { font-size: 17px; color: var(--vf-gris); margin-right: 10px; } .vf-ficha-precio strong { font-size: 33px; font-weight: 800; color: var(--vf-azul-oscuro); } .vf-ficha-desc { font-size: 16px; line-height: 1.75; color: var(--vf-gris); margin-bottom: 22px; } .vf-ficha-meta { margin: 0 0 26px; } .vf-ficha-meta > div { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--vf-borde); } .vf-ficha-meta dt { font-weight: 700; color: var(--vf-tinta); min-width: 90px; margin: 0; } .vf-ficha-meta dd { margin: 0; color: var(--vf-gris); } .vf-ficha-compra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; } .vf-cant input { width: 84px; padding: 12px; text-align: center; font-size: 16px; font-weight: 700; border: 1px solid var(--vf-borde); border-radius: 10px; } .vf-ficha-wa { display: inline-block; } /* ══ Página del pedido ═══════════════════════════════════════════════════════ */ .vf-carrito { display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; } .vf-carrito-tabla { background: #fff; border: 1px solid var(--vf-borde); border-radius: var(--vf-radio); /* La tabla desborda en pantallas chicas: rueda dentro de su caja y no empuja la página entera a scroll horizontal. */ overflow-x: auto; } .vf-carrito-tabla table { width: 100%; border-collapse: collapse; min-width: 540px; } .vf-carrito-tabla th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--vf-gris); padding: 15px 14px; border-bottom: 1px solid var(--vf-borde); } .vf-carrito-tabla td { padding: 14px; border-bottom: 1px solid var(--vf-borde); vertical-align: middle; } .vf-carrito-tabla tr:last-child td { border-bottom: 0; } .vf-c-prod { display: flex; align-items: center; gap: 13px; } .vf-c-prod img { flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: 8px; } .vf-c-prod a { font-size: 14.5px; font-weight: 700; color: var(--vf-tinta); line-height: 1.45; } .vf-c-prod a:hover { color: var(--vf-azul); } .vf-c-precio, .vf-c-sub { font-size: 15px; color: var(--vf-tinta); white-space: nowrap; } .vf-c-sub { font-weight: 800; } .vf-c-cant input { width: 68px; padding: 9px; text-align: center; font-weight: 700; border: 1px solid var(--vf-borde); border-radius: 9px; } .vf-c-quitar button { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--vf-gris); cursor: pointer; /* 44px es el mínimo recomendado para tocar con el dedo. Con solo el ancho de la "×" el botón mide 12px y se falla el toque una vez de cada tres. */ width: 44px; height: 44px; border-radius: 9px; } .vf-c-quitar button:hover { color: #c62f28; background: #fff1f0; } .vf-carrito-resumen { position: sticky; top: 20px; background: #fff; border: 1px solid var(--vf-borde); border-radius: var(--vf-radio); padding: 24px; } .vf-carrito-resumen h2 { font-size: 19px; margin: 0 0 16px; color: var(--vf-tinta); } .vf-resumen-fila { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--vf-borde); } .vf-resumen-fila span { font-size: 14px; color: var(--vf-gris); } .vf-resumen-fila strong { font-size: 24px; font-weight: 800; color: var(--vf-azul-oscuro); } .vf-resumen-nota { font-size: 13.5px; line-height: 1.65; color: var(--vf-gris); margin-bottom: 18px; } .vf-btn-wa { display: block; text-align: center; background: #25d366; color: #fff; font-size: 15px; font-weight: 800; padding: 14px; border-radius: 12px; margin-bottom: 10px; } .vf-btn-wa:hover { background: #1eb956; color: #fff; text-decoration: none; } .vf-btn-vaciar { display: block; width: 100%; border: 1px solid var(--vf-borde); background: #fff; color: var(--vf-gris); font-size: 14px; font-weight: 700; padding: 11px; border-radius: 10px; cursor: pointer; margin-bottom: 14px; } .vf-btn-vaciar:hover { border-color: #c62f28; color: #c62f28; } .vf-seguir { display: block; text-align: center; font-size: 14px; font-weight: 700; color: var(--vf-azul); } .vf-carrito-vacio { text-align: center; padding: 60px 20px; } .vf-carrito-vacio h2 { font-size: 25px; margin-bottom: 10px; color: var(--vf-tinta); } .vf-carrito-vacio p { color: var(--vf-gris); margin-bottom: 24px; } /* ══ Aviso de "agregado" ═════════════════════════════════════════════════════ */ .vf-aviso { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%); z-index: 900; display: flex; align-items: center; gap: 16px; background: var(--vf-tinta); color: #fff; font-size: 14.5px; font-weight: 600; padding: 14px 20px; border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .32); transition: transform .3s ease, opacity .3s ease; opacity: 0; max-width: calc(100vw - 32px); } .vf-aviso.se-ve { transform: translate(-50%, 0); opacity: 1; } .vf-aviso a { color: #7fd4ff; font-weight: 800; white-space: nowrap; } /* Contador del carrito en el menú */ .vf-cart-badge { display: inline-block; min-width: 19px; height: 19px; padding: 0 5px; background: var(--vf-azul); color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; border-radius: 999px; margin-left: 5px; vertical-align: 1px; } .vf-cart-badge.esta-vacio { display: none; } @media (max-width: 991px) { .vf-carrito { grid-template-columns: 1fr; } .vf-carrito-resumen { position: static; } .vf-ficha-img { margin-bottom: 30px; } } @media (max-width: 575px) { .vf-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .vf-prod-cuerpo { padding: 12px 13px 14px; } .vf-prod-nombre { font-size: 13.5px; } .vf-prod-precio strong { font-size: 17px; } /* En pantallas chicas el botón "Ver detalle" duplica lo que ya hace tocar la tarjeta, y le come el espacio al que sí importa. */ .vf-btn-ver { display: none; } .vf-contador { margin-left: 0; } .vf-ficha-nombre { font-size: 22px; } .vf-ficha-precio strong { font-size: 27px; } } /* La imagen de respaldo es el logo: se muestra atenuada y contenida para que se lea como "falta la foto" y no como la foto del producto. */ .vf-img-respaldo { opacity: .35; object-fit: contain !important; padding: 18%; } /* ══ Áreas táctiles ══════════════════════════════════════════════════════════ Medido con emulación real de teléfono (360 y 390 px): varios controles quedaban por debajo del mínimo con el que se puede tocar sin fallar. No se toca TODO lo que mide menos de 44 px: un enlace dentro de un párrafo o una miga de pan tiene el tamaño de su texto y agrandarlo rompería la línea. La regla se aplica a los CONTROLES sueltos, que es donde el dedo falla y no hay nada alrededor que ayude a acertar. */ /* La "×" del modal medía 16×26 px. Es lo único que cierra esa promoción a pantalla completa: fallar el toque deja al visitante atrapado en el aviso. */ .close, button.close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* El botón del menú en móvil: es el ÚNICO acceso a la navegación entera. */ .navbar-toggle { min-width: 44px; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; } /* Las redes del pie y de la barra superior eran enlaces de 19 px de alto. */ /* El tema pinta de blanco los íconos sociales con `.top-bar-area .social li a i`, un selector que solo alcanza a las etiquetas de Font Awesome. El de TikTok NO puede ser un : la hoja del tema es Font Awesome 5.8.1 y `fa-tiktok` llegó en la 5.13, así que se dibuja con un propio. Ese usa `currentColor`, y el color heredado del enlace es el MISMO azul del fondo del botón: sin esta regla el ícono se dibuja, pero azul sobre azul. Aquí recibe el mismo trato que sus hermanos. */ .top-bar-area .social li a svg { color: #ffffff; fill: currentColor; } /* Los cuatro íconos crecen igual al pasar el cursor. El efecto va sobre el ÍCONO y no sobre el botón: agrandar el cuadro azul empujaría a sus vecinos, porque están en una fila en línea. Se listan y juntos para que TikTok —que no puede ser un — se comporte exactamente igual que los demás. */ .top-bar-area .social li a i, .top-bar-area .social li a svg { transition: transform .18s ease; } .top-bar-area .social li a:hover i, .top-bar-area .social li a:focus-visible i, .top-bar-area .social li a:hover svg, .top-bar-area .social li a:focus-visible svg { transform: scale(1.22); } /* Quien pidió menos movimiento en su sistema no debería recibir el rebote. */ @media (prefers-reduced-motion: reduce) { .top-bar-area .social li a i, .top-bar-area .social li a svg { transition: none; } } .social ul li a, .top-bar-area .social ul li a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; } /* El nombre del producto en la tarjeta: se le da aire vertical para que el área de toque llegue al mínimo sin cambiar cómo se ve. */ .vf-prod-nombre a { display: block; padding: 3px 0; } /* La "×" de quitar del pedido ya mide 44×44 por su propia regla. */ /* Los chips de categoría y los botones de la tienda, en móvil. */ @media (max-width: 767px) { .vf-chip { padding: 11px 16px; } .vf-btn-agregar { padding: 12px; } .vf-c-cant input, .vf-cant input { min-height: 44px; } } /* ══ Tamaño de texto ═════════════════════════════════════════════════════════ Por debajo de 12 px no se lee sin acercar la pantalla. La etiqueta del plan destacado estaba en 11 px. Lo que NO se sube: los 10.5 px de la maqueta del teléfono de VeruPrinter. Ahí el texto es decorativo —simula la pantalla de una app— y agrandarlo rompería la ilusión de que es un teléfono. Va marcado aria-hidden, así que ningún lector de pantalla lo anuncia. */ .vf-plan-tag { font-size: 12px; } .vf-prod-cat, .vf-video-tag { font-size: 12px; } /* Redes de la portada. Antes eran cuatro sueltos con un

vacío entre medio para separarlos, dentro de una columna sin fila. */ .vf-redes { list-style: none; padding: 0; margin: 18px 0 0; } .vf-redes li { margin-bottom: 8px; } .vf-redes a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--vf-borde); border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--vf-tinta); background: #fff; transition: border-color .18s ease, transform .18s ease; /* Con el alto del ícono más el relleno pasa holgadamente los 44 px; antes medía 19 px de alto en un teléfono. */ } .vf-redes a:hover { border-color: var(--vf-azul); color: var(--vf-azul); text-decoration: none; transform: translateX(3px); } .vf-redes img { flex: none; width: 40px; height: 40px; object-fit: contain; } /* Enlaces del pie: eran de 26 px de alto. */ .f-item.link ul li a { display: inline-block; padding: 7px 0; } /* Migas de pan: enlaces de texto en línea. No se les fuerza 44 px —agrandar un enlace dentro de una línea de texto la rompe— pero se les da algo de aire vertical para que el toque no dependa de acertar 18 px exactos. */ .vf-migas a { display: inline-block; padding: 4px 0; } /* Nombre del producto en la tarjeta. */ .vf-prod-nombre a { padding: 6px 0; } /* ══ Sin arrastre lateral ════════════════════════════════════════════════════ Medido con emulación real de tablet (768 px): planes.php se iba 10 px por un ícono al borde de la lista de características, y nosotros.php 11 px por las flechas del carrusel, que el tema posiciona fuera de su contenedor. Poco, pero suficiente para que la página se arrastre de lado — y una página que se mueve al tocarla se siente rota. Se usa `clip` y NO `hidden` a propósito: `overflow:hidden` convierte al elemento en un contenedor de scroll, y eso ROMPE `position: sticky` de cualquier descendiente — que es justo lo que usa la sub-navegación de tutoriales. `clip` recorta sin crear contenedor de scroll. En navegadores viejos que no conocen `clip` la declaración se ignora y queda el comportamiento de hoy: se degrada a lo que ya había, no a algo peor. */ html, body { overflow-x: clip; } /* El "(opcional)" de las etiquetas heredaba el 80% de y quedaba en 11.2 px. Es texto real del formulario —le dice al visitante que puede saltarse el campo—, no decoración: tiene que leerse sin acercar la pantalla. */ .vf-form label small, .vf-form label .text-muted { font-size: 12.5px; } /* ══ El botón de menú móvil no va en escritorio ══════════════════════════════ Defecto preexistente, verificado contra la versión anterior a esta reforma: el ☰ se mostraba junto al logo en TODAS las páginas incluso a 1440 px, al lado del menú completo. Son dos formas de navegar compitiendo en la misma barra, y la de arriba no hace nada visible en escritorio. El tema pasa a modo móvil a 1023 px (bootsnav.css:2341), así que a partir de 1024 el botón sobra. No se toca el CSS del tema: se corrige acá, que es donde vive lo de esta reforma. */ @media (min-width: 1024px) { nav.navbar.bootsnav .navbar-toggle { display: none !important; } } /* ══ Panel del pedido ════════════════════════════════════════════════════════ Reemplaza la página aparte del carrito: revisar lo que llevas no debería sacarte de la tienda ni hacerte perder el desplazamiento y los filtros. */ .vf-panel-velo { position: fixed; inset: 0; z-index: 1040; background: rgba(8, 15, 35, .5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } /* El velo empieza con [hidden] para que no exista antes de que corra el script; al abrir se le quita. Sin esto, un tema con CSS cargado y JS lento dejaría un velo invisible capturando clics. */ .vf-panel-velo.se-ve { opacity: 1; visibility: visible; } .vf-panel { position: fixed; top: 0; right: 0; z-index: 1050; width: 420px; max-width: 100vw; height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 50px rgba(11, 42, 91, .22); transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); visibility: hidden; } .vf-panel.se-ve { transform: translateX(0); visibility: visible; } /* Quien tenga activado "reducir movimiento" recibe el panel sin deslizamiento. */ @media (prefers-reduced-motion: reduce) { .vf-panel, .vf-panel-velo { transition: none; } } /* El fondo no se desplaza detrás del panel: en el móvil se siente como si la página se hubiera roto. */ body.vf-panel-abierto { overflow: hidden; } .vf-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--vf-borde); flex: none; } .vf-panel-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--vf-tinta); } /* El tema trae reglas sobre elementos desnudos —`button { padding: 12px 30px }` e `input { min-height: 50px }`— pensadas para los botones grandes de la web. Nuestras reglas ganan en especificidad, pero solo en lo que declaran: lo que callan lo sigue dictando el tema. Y con `box-sizing: border-box` el padding no se puede comprimir, así que un `width: 38px` con 30px de padding a cada lado termina midiendo 60px. De ahí que los controles salieran deformados. Por eso cada control del panel declara su padding y su alto mínimo aunque valgan cero: es lo que corta la herencia del tema. */ .vf-panel-cerrar { border: 0; padding: 0; background: var(--vf-gris-claro); color: var(--vf-tinta); width: 38px; height: 38px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; transition: background .18s ease; } .vf-panel-cerrar:hover { background: #e2e9f3; } .vf-panel-cerrar:focus-visible { outline: 3px solid var(--vf-azul); outline-offset: 2px; } .vf-panel-cuerpo { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0; } .vf-panel-cargando { padding: 26px 22px; color: var(--vf-gris); } .vf-panel-lista { list-style: none; margin: 0; padding: 0; } .vf-panel-item { display: flex; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #f0f4f9; } .vf-panel-item > img { width: 60px; height: 60px; flex: none; object-fit: contain; background: var(--vf-gris-claro); border-radius: 10px; } .vf-panel-info { flex: 1 1 auto; min-width: 0; } .vf-panel-info > a { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--vf-tinta); /* El nombre puede ser muy largo; se corta a dos líneas para que la fila no empuje el resto del pedido fuera de la vista. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vf-panel-info > a:hover { color: var(--vf-azul); } .vf-panel-precio { display: block; font-size: 13px; color: var(--vf-gris); margin: 3px 0 8px; } .vf-panel-cant { display: flex; align-items: center; gap: 0; } .vf-panel-cant button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--vf-borde); background: #fff; color: var(--vf-tinta); font-size: 17px; line-height: 1; cursor: pointer; } .vf-panel-cant button:first-of-type { border-radius: 8px 0 0 8px; } .vf-panel-cant button:last-of-type { border-radius: 0 8px 8px 0; } .vf-panel-cant button:hover { background: var(--vf-gris-claro); } .vf-panel-cant input { width: 46px; height: 30px; min-height: 0; padding: 0; border: 1px solid var(--vf-borde); border-left: 0; border-right: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--vf-tinta); /* Se ocultan las flechitas del navegador: ya hay − y + más grandes y más fáciles de acertar con el dedo. */ -moz-appearance: textfield; } .vf-panel-cant input::-webkit-outer-spin-button, .vf-panel-cant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .vf-panel-lado { flex: none; text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .vf-panel-lado strong { font-size: 15px; color: var(--vf-tinta); white-space: nowrap; } .vf-panel-quitar { border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 700; color: #c62f28; cursor: pointer; } .vf-panel-quitar:hover { text-decoration: underline; } .vf-panel-vacio { padding: 44px 26px; text-align: center; color: var(--vf-gris); } .vf-panel-vacio-t { font-size: 17px; font-weight: 800; color: var(--vf-tinta); margin: 0 0 6px; } .vf-panel-vacio .btn { margin-top: 16px; } .vf-panel-pie { flex: none; /* El tema le da `overflow: hidden` a todo