/* ========================================================================== Paginas de contenido del panel -------------------------------------------------------------------------- Lo cargan page.html (politicas, terminos, privacidad) y legales-promociones.html desde {% block styleAfter %}, como product.html carga producto.css. Aparte de style.css a proposito: son dos plantillas de poco trafico y style.css lo baja todo el sitio —el bloque eran 8KB comprimidos en cada pagina—. La miga se queda en style.css (.ph-cat__ruta, .ph-pagina__ruta): esa si la comparten estas paginas y la cabecera de categoria. Este archivo tiene su propio ?v= en las dos plantillas. Al tocarlo hay que subirlo en los dos sitios y en el mismo despliegue, igual que style.css. Sin minificar: se comenta el porque que no se deduce de la regla, y ya. ========================================================================== */ /* ----- Armazon de la pagina ----- */ .ph-pagina { max-width: 1720px; margin: 0 auto; padding: 40px 32px 80px; font-family: var(--ph-cuerpo); color: var(--ph-tinta); /* El tema pone letter-spacing: 1.1px al body por debajo de 992px. Se apaga: separaba el titular, la miga y el aviso mientras el cuerpo iba sin separar, y convivian dos espaciados en la misma pagina. */ letter-spacing: normal; } .ph-pagina__cab { padding-bottom: 26px; border-bottom: 1px solid var(--ph-linea); } .ph-pagina__titulo { margin: 0; font-family: var(--ph-titulo); font-size: 44px; font-weight: 400; line-height: 1.15; color: var(--ph-tinta); } .ph-pagina__cuerpo { padding-top: 36px; } /* ----- Texto pegado desde el editor ----- .ph-texto-panel es todo lo que escribe el administrador: el cuerpo de las politicas y la letra pequeña de cada promocion. Cada documento llega con la tipografia que arrastro quien lo pego (Nunito con line-height 1, 258 parrafos justificados, 3.639 spans a 11px), y no se puede limpiar en la plantilla porque Twig no trae reemplazo por expresion regular. Va a todo el ancho: acotarlo a una columna dejaba media pagina vacia. */ .ph-texto-panel { font-size: 14px; /* el mismo que .ph-desplegables__texto */ line-height: 1.7; color: var(--ph-tinta-suave); letter-spacing: normal; overflow-wrap: break-word; /* "PROVEEDORES/CONTRATISTAS/..." no parte */ } /* Dos reglas de la cascada gobiernan todo lo de abajo: un estilo en linea gana a cualquier selector, y un !important de la hoja gana a un estilo en linea que no lo lleve. De ahi el !important; no es comodidad. [align] va aparte: privacidad trae

sin atributo style. text-align a left deshace el justify. box-sizing porque entregas trae content-box y sacaba la caja del aviso 50px de la columna. */ .ph-texto-panel [style], .ph-texto-panel [align] { box-sizing: border-box !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: normal !important; color: inherit !important; text-align: left !important; } .ph-texto-panel p { margin: 0 0 1.15em; } .ph-texto-panel ul, .ph-texto-panel ol { margin: 0 0 1.4em; padding-left: 1.35em; } .ph-texto-panel li { margin-bottom: .4em; } .ph-texto-panel li:last-child { margin-bottom: 0; } /* font-weight: inherit dejaria sin negrita al . Se le devuelve con (0,2,1), que le gana al reset de arriba (0,2,0). */ .ph-texto-panel strong, .ph-texto-panel strong[style] { font-weight: 700 !important; color: var(--ph-tinta) !important; } /* Un parrafo cuyo unico hijo es un suele ser un titulo de seccion: no hay un solo

en ninguna de estas paginas. Se le da aire y NADA mas: de los 101 que hay, muchos son parrafos enteros en negrita y a cuerpo de titular serian ilegibles. El !important, por el margin:0 de entregas. */ .ph-texto-panel p:has(> strong:only-child) { margin-top: 2em !important; } .ph-texto-panel > p:first-child:has(> strong:only-child) { margin-top: 0 !important; } .ph-texto-panel a { color: var(--ph-tinta); text-decoration: underline; text-underline-offset: 3px; } .ph-texto-panel a:hover { color: var(--ph-oferta); } /* ----- Aviso ----- En legales la clase se pone a mano. En las politicas el aviso llega dentro del HTML del panel, asi que se coge por :first-child, que en las seis es la advertencia de la linea autorizada. Por :first-child y no por el rojo, porque entregas lo trae sin el de color. */ .ph-aviso, .ph-pagina__cuerpo > p:first-child { margin-bottom: 2.4em !important; padding: 20px 24px !important; border-left: 2px solid var(--ph-oferta); background: #fafafa !important; color: var(--ph-tinta-suave); font-size: 14px !important; line-height: 1.65 !important; } /* El #B8312F del panel pasa al rojo del sitio. Misma especificidad que el reset de [style]: decide el orden, por eso va despues. */ .ph-texto-panel [style*="B8312F"], .ph-texto-panel [style*="B8312F"] strong { color: var(--ph-oferta) !important; } /* ----- Tablas de garantias ----- Dos columnas, "esta cubierto" contra "no esta cubierto", sin : la cabecera es la primera fila de . table-layout fijo para repartir 50/50 y que una vineta larga no se lleve la tabla de ancho. */ .ph-texto-panel table { width: 100%; margin: 0 0 2em; border-collapse: collapse; table-layout: fixed; } .ph-texto-panel td { padding: 16px 18px; border: 1px solid var(--ph-linea); vertical-align: top; } .ph-texto-panel tr:first-child td { background: #fafafa; text-align: center; } .ph-texto-panel td > :last-child { margin-bottom: 0; } .ph-texto-panel td p { margin-bottom: .5em; } .ph-texto-panel td ul { margin-bottom: 1em; } /* Dentro de una celda, los 2em de una seccion son un salto enorme. */ .ph-texto-panel td p:has(> strong:only-child) { margin-top: 1.1em !important; } .ph-texto-panel td > p:first-child:has(> strong:only-child) { margin-top: 0 !important; } /* ----- Fichas de /legales-promociones ----- 186 seguidas: filete y no tarjeta, que 186 cajas con borde son una pared. */ .ph-legales { margin-top: 4px; } .ph-legales__item { padding: 30px 0; border-top: 1px solid var(--ph-linea); } .ph-legales__item:last-child { border-bottom: 1px solid var(--ph-linea); } .ph-legales__titulo { margin: 0 0 16px; font-family: var(--ph-titulo); font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--ph-tinta); } @media (max-width: 767.98px) { .ph-pagina { padding: 24px 16px 56px; } .ph-pagina__cab { padding-bottom: 20px; } .ph-pagina__titulo { font-size: 30px; } .ph-pagina__cuerpo { padding-top: 28px; } .ph-aviso, .ph-pagina__cuerpo > p:first-child { padding: 16px 18px !important; } /* La tabla se lleva las sangrias de la pagina y baja de cuerpo. Sigue a dos columnas —~170px cada una—: apilarla destruiria la comparacion, que es el dato. Se probo con display:contents y order, y se descarto: solo cuadra en tablas de dos filas y es donde peor se portan los lectores de pantalla con la semantica de tabla. */ .ph-pagina__cuerpo > table { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; } .ph-texto-panel td { padding: 10px 8px; font-size: 12.5px; } .ph-texto-panel td ul, .ph-texto-panel td ol { padding-left: 1.1em; } .ph-legales__item { padding: 24px 0; } .ph-legales__titulo { font-size: 19px; margin-bottom: 12px; } }