de las dos páginas. */ /* El encabezado es sticky y mide 70px (68 + su borde de 2px). Sin este margen, el botón baja hasta aquí y deja el título de la sección justo debajo del encabezado, tapado: la persona aterriza sin ver a qué llegó. Se deja algo de aire de más para que no quede pegado. */ #registro { scroll-margin-top: 5.5rem; } /* ---------- LECTOR DE MUESTRA · /leer ---------- Las páginas del reporte van como imágenes sobre un fondo más oscuro que el resto del sitio: así el papel blanco de cada página se lee como papel y no se funde con el fondo, que es lo que hace que una galería de documentos parezca un documento y no una lista de imágenes sueltas. */ .lector-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 1rem; background: #fff; border-bottom: 2px solid var(--brand); padding: .75rem 1.25rem; min-height: 64px; } .lb-volver { display: inline-flex; align-items: center; gap: .4375rem; font-size: .875rem; font-weight: 700; color: var(--ink-mute); flex-shrink: 0; } .lb-volver:hover { color: var(--accent); } .lb-doc { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .875rem; font-weight: 700; color: var(--brand); padding-left: 1rem; border-left: 1px solid var(--line); } .lb-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-doc svg { flex-shrink: 0; color: var(--accent); } .lb-fin { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .lb-pag { font-size: .8125rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; } .lb-pag strong { color: var(--brand); font-weight: 800; } .lector-intro { background: #fff; border-bottom: 1px solid var(--line); padding: 2.75rem 1.25rem 2.25rem; } .lector-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; list-style: none; margin: 1.5rem 0 0; font-size: .8125rem; color: var(--ink-mute); } .lector-meta li { display: flex; align-items: center; } .lector-meta li + li::before { content: '·'; margin-right: 1.25rem; color: var(--line); } .lector-aviso { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; padding: .625rem 1rem; background: var(--brand-soft); border: 1px solid var(--accent); font-size: .8125rem; color: var(--ink-soft); } .lector-aviso svg { color: var(--accent); flex-shrink: 0; } .lector-paginas { background: #E9E9EC; padding: 2rem 1rem 2.5rem; } .lector-pag { max-width: 54rem; margin: 0 auto 1.75rem; } .lector-pag img { width: 100%; height: auto; display: block; background: #fff; /* mientras carga, hueco blanco y no gris */ box-shadow: 0 6px 28px -10px rgba(23, 23, 26, .45); } .lector-pag figcaption { text-align: center; font-size: .75rem; color: var(--ink-mute); margin-top: .625rem; font-variant-numeric: tabular-nums; } /* El muro. Va sobre fondo oscuro para que el corte se note: la lectura se acaba aquí y empieza la decisión de compra. */ .lector-muro { background: var(--brand); color: #fff; padding: 3.5rem 1.25rem 4rem; } .lector-muro .h2, .lector-muro .eyebrow { color: #fff; } .lector-muro .lead { color: rgba(255, 255, 255, .78); } .muro-cabeza { margin-bottom: 2.5rem; } .muro-candado { width: 3.5rem; height: 3.5rem; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; } .muro-lista { max-width: 46rem; margin: 0 auto 2.5rem; } .muro-lista .arrow-list li { color: rgba(255, 255, 255, .85); font-size: .9375rem; } .muro-lista .arrow-list li strong { color: #fff; } /* La tarjeta del formulario vuelve a blanco: un formulario sobre negro se lee peor y aquí es lo único que tiene que rellenarse. */ .lector-muro .form-card { border-color: var(--accent); } .lector-muro .registro-nota { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); } .lector-muro .registro-nota .h3 { color: #fff; } .lector-muro .registro-nota .arrow-list li { color: rgba(255, 255, 255, .85); } .lector-muro .registro-aviso { border-top-color: rgba(255, 255, 255, .2); } .lector-muro .registro-aviso p { color: rgba(255, 255, 255, .75); } .lector-muro .registro-aviso strong { color: #fff; } .lector-muro .registro-aviso a { color: var(--accent); } @media (max-width: 760px) { /* En móvil no cabe todo: se esconde el nombre del documento y el contador, que son referencia, y se conserva lo accionable (volver y comprar). */ .lector-bar { padding: .625rem .875rem; gap: .625rem; } .lb-doc, .lb-pag { display: none; } .lb-volver span { display: none; } .lector-paginas { padding: 1.25rem .75rem 1.75rem; } .lector-pag { margin-bottom: 1.25rem; } } /* Los tres pasos: qué pasa después de dejar los datos. Es lo que baja la desconfianza de un formulario que no cobra en el momento. */ .pasos { display: grid; gap: 1px; background: var(--brand); border: 2px solid var(--brand); margin-bottom: 2rem; } .pasos > div { background: #fff; padding: 1.375rem 1.25rem; } .paso-n { font-size: .75rem; font-weight: 900; color: var(--accent); letter-spacing: .1em; margin-bottom: .5rem; } .pasos h3 { font-size: 1rem; margin-bottom: .375rem; } .registro-grid { display: grid; gap: 1.5rem; align-items: start; } /* El precio, arriba del formulario. Quien llega hasta aquí bajó desde el hero y ya no lo tiene a la vista; repetirlo evita el registro de alguien que no sabía cuánto cuesta. */ .registro-precio { border-bottom: 2px solid var(--brand); padding-bottom: 1.125rem; margin-bottom: 1.375rem; } .rp-label { display: block; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); margin-bottom: .375rem; } .rp-v { display: block; font-size: 2rem; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -0.02em; } .rp-iva { font-size: .8125rem; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; } .rp-total { display: block; font-size: .8125rem; color: var(--ink-soft); margin-top: .5rem; } .rp-total strong { font-weight: 800; color: var(--brand); } /* Nota en la caja de precio del hero: explica por qué el botón no cobra */ .price-nota-registro { font-size: .8125rem; color: var(--ink-soft); border-left: 3px solid var(--accent); padding: .125rem 0 .125rem .75rem; margin-bottom: 1.25rem; } /* Confirmación tras enviar. Sustituye al formulario en el sitio, para que la respuesta aparezca donde estaba la vista, no en otra página. */ .registro-ok { text-align: center; padding: 1rem 0; } .registro-ok:focus { outline: none; } .ok-mark { width: 4rem; height: 4rem; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; } .registro-ok h3 { margin-bottom: .75rem; } .registro-ok p { color: var(--ink-soft); font-size: .9375rem; } .registro-ok .btn { margin-top: 1rem; } .registro-nota { background: var(--brand-soft); border: 2px solid var(--brand); padding: 1.5rem 1.375rem; } .registro-nota h3 { margin-bottom: 1rem; } .registro-nota .arrow-list li { font-size: .875rem; } .registro-aviso { border-top: 1px solid var(--brand-line); margin-top: 1.25rem; padding-top: 1rem; } .registro-aviso p + p { margin-top: .375rem; color: var(--ink-soft); } @media (min-width: 640px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cover { padding: 2.5rem 2.25rem; } .cover h3 { font-size: 1.875rem; } .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* El par nombre/teléfono y empresa/puesto caben en dos columnas a partir de aquí; en móvil se apilan, que es lo que hace .field-pair por defecto. */ .registro-grid .field-pair { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { /* El formulario manda; la nota lateral acompaña sin competir. */ .registro-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2rem; } } @media (min-width: 1024px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { /* En móvil el precio deja de estar a la vista al hacer scroll: la barra fija lo mantiene, que es donde se pierde la mayoría de las compras. */ .buy-bar { display: flex; } body { padding-bottom: 4.75rem; } .wa-float { bottom: 5.25rem; } } @media (max-width: 640px) { .price-box { box-shadow: 8px 8px 0 0 var(--brand); padding: 1.25rem; } .cover { box-shadow: 8px 8px 0 0 var(--accent); } .price-v { font-size: 2.5rem; } }