` que emite Shopify en estas URLs no reserva nada arriba (`padding-top: 0`, medido), y el nav flota encima. Con 96px de padding el título quedaba 23px POR DEBAJO del header en escritorio y 63px en teléfono. NO se usa `--layout-offset`: vale 108px y el header real termina en 119. Es el mismo desfase de 11px que el handoff ya documenta para el hero. Aquí se compone el alto real —nav 84px en escritorio, 76 en teléfono— y se le suma la barra de anuncio solo cuando existe, vía la clase que el layout pone en el ``. Así el aire es correcto con la barra encendida y apagada, sin números mágicos que se descuadren si se apaga. */ .shopify-policy__container { padding-top: calc(84px + var(--space-7, 48px)); } .has-announcement-bar .shopify-policy__container { padding-top: calc(84px + var(--annbar-height, 36px) + var(--space-7, 48px)); } /* ── Título ── Mismo tratamiento que los títulos de sección del resto del sitio, en la tinta de headings, no en la de cuerpo. */ .shopify-policy__title { margin-bottom: var(--space-7, 48px); padding-bottom: var(--space-5, 24px); border-bottom: 1px solid var(--color-border-hair, rgba(38, 38, 38, 0.2)); } .shopify-policy__title h1 { font-family: var(--font-display); font-size: var(--text-h3, clamp(28px, 1.5vw + 22px, 40px)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--neu-head, #3f3f47); margin: 0; text-wrap: balance; } /* ── Cuerpo ── */ .shopify-policy__body .rte > *:first-child { margin-top: 0; } .shopify-policy__body .rte > *:last-child { margin-bottom: 0; } .shopify-policy__body p { margin: 0 0 var(--space-5, 24px); } /* Los subtítulos del contenido. Se estilan los cuatro niveles porque cada política los usa distinto: términos arranca en h2, privacidad en h3, y envío no usa ninguno. */ .shopify-policy__body h1, .shopify-policy__body h2, .shopify-policy__body h3, .shopify-policy__body h4, .shopify-policy__body h5 { font-family: var(--font-display); font-weight: 700; color: var(--neu-head, #3f3f47); line-height: 1.25; /* Margen superior generoso y el inferior corto: así el subtítulo se lee pegado a su párrafo y separado del bloque anterior. */ margin: var(--space-7, 48px) 0 var(--space-3, 12px); text-wrap: balance; } /* Tres de las cinco políticas traen un `h1` DENTRO del cuerpo, además del que pone Shopify arriba. Es un defecto del contenido —se corrige en Admin quitando ese título repetido— pero mientras exista no puede verse MÁS grande que el título de la página, que es lo que pasaba: 28.9px contra 28px, y encima en la tinta de cuerpo. Se le da el mismo trato que a un h2. */ .shopify-policy__body h1, .shopify-policy__body h2 { font-size: var(--text-h5, 22px); } /* El `max()` pone un piso: `--text-h6` baja a 14px en teléfono y ahí el subtítulo quedaba del mismo tamaño que el cuerpo (14.44px), distinguible solo por las versalitas. */ .shopify-policy__body h3 { font-size: max(15px, var(--text-h6, 16px)); text-transform: uppercase; letter-spacing: 0.06em; } .shopify-policy__body h4, .shopify-policy__body h5 { font-size: var(--text-body, 15px); text-transform: uppercase; letter-spacing: 0.06em; } .shopify-policy__body strong { font-weight: 700; color: var(--neu-head, #3f3f47); } /* ── Listas ── El contenido trae `ul` sin estilo propio; sin esto los `li` salen sin viñeta y sin sangría, indistinguibles de un párrafo. */ El `:not([class])` NO es adorno: el contenido de "Información de contacto" se pegó desde un theme Dawn y trae `ul.multicolumn-list`, que es una maquetación de tarjetas, no una lista de viñetas. Sin ese guard le salía una viñeta café y una sangría de 24px a un bloque que no las quiere. Cualquier lista con clase propia se deja en paz. */ .shopify-policy__body ul:not([class]), .shopify-policy__body ol:not([class]) { margin: 0 0 var(--space-5, 24px); padding-left: var(--space-5, 24px); } .shopify-policy__body ul:not([class]) li, .shopify-policy__body ol:not([class]) li { margin-bottom: var(--space-2, 8px); } .shopify-policy__body ul:not([class]) li::marker, .shopify-policy__body ol:not([class]) li::marker { color: var(--color-date, #8A5F3B); } /* ── Enlaces ── Subrayado con separación: en un texto legal los enlaces deben distinguirse sin depender solo del color. */ .shopify-policy__body a { color: var(--color-date, #8A5F3B); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } @media (hover: hover) { .shopify-policy__body a:hover { text-decoration-thickness: 2px; } } /* ── Tablas, por si algún día el contenido trae una ── Con `overflow-x` propio: una tabla ancha nunca debe hacer que la PÁGINA se desplace de lado. */ .shopify-policy__body table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 var(--space-5, 24px); font-size: 14px; } .shopify-policy__body th, .shopify-policy__body td { padding: var(--space-3, 12px); border: 1px solid var(--color-border-hair, rgba(38, 38, 38, 0.2)); text-align: left; } .shopify-policy__body th { font-family: var(--font-display); font-weight: 700; color: var(--neu-head, #3f3f47); } /* ── Móvil ── Se recorta el aire vertical, que a 96px arriba deja la pantalla casi vacía en un teléfono, y el lateral baja al mismo margen que usa el resto del sitio bajo 750px. */ @media (max-width: 750px) { .shopify-policy__container { padding-top: calc(76px + var(--space-6, 32px)); padding-bottom: var(--space-8, 64px); padding-inline: 20px; } .has-announcement-bar .shopify-policy__container { padding-top: calc(76px + var(--annbar-height, 36px) + var(--space-6, 32px)); } .shopify-policy__title { margin-bottom: var(--space-6, 32px); padding-bottom: var(--space-4, 16px); } .shopify-policy__body h2, .shopify-policy__body h3, .shopify-policy__body h4, .shopify-policy__body h5 { margin-top: var(--space-6, 32px); } }