/* * Tienda: migas, listados, tarjeta de producto, búsqueda y paginación (Plan 3). Valores del JSON de Elementor y medidas * del navegador sobre la web de hoy (2026-09-25, la-caribena; capturas/medidas-plan3/). D10: botones rosa con texto * blanco de 19 px en 700 y texto pequeño rosa en --rosa-texto (base.css). * El CSS de WooCommerce sigue cargado (el mini-carrito del Plan 2 y las estrellas de las reseñas lo usan) y en sus * páginas el body lleva .woocommerce: sus reglas pesan (0,2,1) o más. Las que compiten llevan aquí .woocommerce o una * clase de más para ganar, como hace cabecera.css con el mini-carrito; pruebas/tienda.py lo comprueba con estilos * calculados. */ /* Migas de WooCommerce: 14 px en gris, hoy #767676 (4,47:1 sobre el fondo: pasa a --gris-texto, 4,53:1). Los enlaces, en bloque de 24 px de alto (WCAG 2.5.8): hoy miden 18. */ .woocommerce .woocommerce-breadcrumb, .woocommerce-breadcrumb { margin: 0 0 14px; color: var(--gris-texto); font-size: 14px; letter-spacing: -.2px; line-height: 24px; } .woocommerce .woocommerce-breadcrumb a, .woocommerce-breadcrumb a { display: inline-block; color: var(--gris-texto); } /* Listado (/tienda/ y archivos genéricos): el h1 de hello-elementor (40 px en 500) y el recuento y el orden de WooCommerce. */ .listado { padding-block: 0 60px; } /* hoy las migas de /tienda/ van pegadas a la cabecera y el h1, 39 px más abajo */ .listado__titulo { margin: 8px 0 16px; color: var(--cuerpo); font: 500 40px/48px var(--letra); } .listado__orden { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; } .listado__orden .woocommerce-result-count { margin: 0; } .woocommerce-ordering select { height: 44px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 5px; background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07); color: #000; font: 16px var(--letra); } .listado__vacio { margin: 40px 0; text-align: center; } /* Rejilla: 4 columnas en /tienda/ (22,05 % con 3,8 % de hueco: el CSS de WooCommerce), 2 por debajo de 769 px como su smallscreen; 2 en los listados con filtros y 3 en landings, relacionados y búsqueda (30 px de hueco, el de los loop-grid), con 1 columna en móvil y 2 en tableta, como Elementor. */ .rejilla { display: grid; grid-template-columns: repeat(var(--columnas, 1), minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; } .rejilla--4 { --columnas: 2; gap: 48px 4%; } @media (min-width: 769px) { .rejilla--4 { --columnas: 4; column-gap: 3.8%; } } @media (min-width: 768px) { .rejilla--2, .rejilla--3 { --columnas: 2; } } @media (min-width: 1025px) { .rejilla--3 { --columnas: 3; } } /* Tarjeta de marca (bucles 2595-2652 y 3053): caja blanca con sombra, 10 px de relleno y 5 de separación; foto al 60 %; título de 28 px (24 en infusiones, cacaos y búsqueda); líneas de 16 px en 600, mayúsculas; precio de 40 px en burdeos; corazón de 40×40 y botón. */ .tarjeta { height: 100%; } .tarjeta--marca { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px; background: #fff; box-shadow: var(--sombra); text-align: center; } /* La foto va en un contenedor de Elementor con 10 px de relleno por los cuatro lados, y su 60 % es de ese contenedor: 192 px en una tarjeta de 360, y 25 px hasta la caja del título (medido en la búsqueda y en las landings). */ .tarjeta--marca .tarjeta__imagen { width: calc(.6 * (100% - 20px)); margin: 10px auto; } .tarjeta__imagen img { width: 100%; height: auto; } .tarjeta__titulo { margin: 0; } .tarjeta--marca .tarjeta__titulo { padding: 10px; font: 600 28px/32px var(--letra); text-transform: uppercase; } .tarjeta--marca .tarjeta__titulo a { color: var(--cuerpo); } .tarjeta--infusion .tarjeta__titulo, .tarjeta--cacao .tarjeta__titulo, .tarjeta--busqueda .tarjeta__titulo { font-size: 24px; } .tarjeta--infusion .tarjeta__titulo a { color: var(--rosa); } /* 24 px en 600 es texto grande: 3,26:1 basta */ .tarjeta--cacao .tarjeta__titulo a, .tarjeta--busqueda .tarjeta__titulo a { color: var(--amarillo-texto); } .tarjeta__lineas { margin: 0; padding: 10px 0; list-style: none; color: var(--enfasis); font: 600 16px/1.2 var(--letra); letter-spacing: -.2px; text-transform: uppercase; } .tarjeta__lineas li + li { margin-top: 6px; } /* paso de 25 px entre líneas, como hoy en origen, infusión y cacao */ .tarjeta--blend .tarjeta__lineas li + li, .tarjeta--capsulas .tarjeta__lineas li + li { margin-top: 16px; } /* 35 px en blend y cápsulas */ .tarjeta__lineas .tarjeta__linea--peso { text-transform: none; } /* «30gr PESO NETO», como hoy */ .tarjeta__agotado { margin: 0; color: #a00; font-weight: 600; } /* el rojo de «Sin existencias» de WooCommerce, 7,8:1 */ /* 40 px por debajo: hoy el botón empieza 79 px bajo la caja del precio de Elementor (3053 y 2614, medido). */ .tarjeta__precio { margin: 10px 0 40px; color: var(--burdeos); font: 600 40px/1 var(--letra); text-transform: uppercase; } /* Infusiones y cacaos (2637 y 2652): hoy su precio es un producto simple, sin «Desde», y la línea de 20 px del precio queda 10 px más arriba que la de los cafés (29 px: el «Desde» se alinea por la base y la estira). Medido en product_cat-cacaos y product_cat-infusiones, en las dos vistas: botón a 70 px del borde de la caja del precio, 60 del centro de la cifra. Aquí la línea es de 40 px: 35 de margen dan esos 60. */ .tarjeta--infusion .tarjeta__precio, .tarjeta--cacao .tarjeta__precio { margin-bottom: 35px; } .tarjeta__precio .woocommerce-Price-amount { font-weight: 700; } .tarjeta__precio .desde { font-size: 18px; text-transform: none; } .tarjeta__acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; margin-top: auto; padding-bottom: 10px; } .tarjeta a.button.button { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 16px; border-radius: 3px; background: var(--rosa); color: #fff; font: 700 19px/1 var(--letra); /* hoy 16 px en 600: D10, regla 1 */ text-transform: uppercase; text-decoration: none; } .tarjeta a.button.button:hover { background: var(--rosa); color: #fff; text-decoration: none; } /* el :hover de WooCommerce es gris */ .tarjeta .added_to_cart { flex-basis: 100%; } /* Botón de deseos. */ .deseos { margin: 0; } .deseos__boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; cursor: pointer; font: inherit; } .deseos--icono .deseos__boton { width: 40px; height: 40px; border-radius: 5px; background: var(--rosa); color: #fff; } .deseos--icono .deseos__boton .icono { width: 18px; height: 18px; } .deseos--icono .deseos__boton[aria-pressed="true"] { background: var(--burdeos); } /* Tarjeta de /tienda/ y de los archivos genéricos: la de WooCommerce en hello-elementor. Foto cuadrada a todo el ancho, nombre de 16 px en 500 (rosa: D10, regla 2), precio de 40 px en 700 y botón. */ .tarjeta--tienda { display: flex; flex-direction: column; align-items: flex-start; } .tarjeta--tienda .tarjeta__imagen { width: 100%; margin-bottom: 16px; } .tarjeta--tienda .tarjeta__titulo { padding: 8px 0; font: 500 16px/19.2px var(--letra); } .tarjeta--tienda .tarjeta__titulo a { color: var(--rosa-texto); } .tarjeta--tienda .tarjeta__lineas { padding: 0; font: 400 14px/1.4 var(--letra); letter-spacing: 0; text-transform: none; } .tarjeta--tienda .tarjeta__precio { margin: 0 0 7px; font: 400 14px/66px var(--letra); text-transform: none; } .tarjeta--tienda .tarjeta__precio .woocommerce-Price-amount { font-size: 40px; } .tarjeta--tienda .tarjeta__acciones { justify-content: flex-start; margin-top: 16px; padding: 0; } .tarjeta--tienda .deseos { order: 2; } /* hoy los botones de JetCompareWishlist van después del de compra */ .tarjeta--tienda a.button.button { text-transform: none; } /* «Leer más», «Seleccionar opciones»: hoy en minúsculas aquí */ /* Paginación de WooCommerce: enlaces de 32 px de alto. */ .woocommerce-pagination { margin-top: 40px; text-align: center; } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 4px; margin: 0; padding: 0; border: 0; list-style: none; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 8px; } .woocommerce nav.woocommerce-pagination ul li a.page-numbers { color: var(--rosa-texto); } .woocommerce nav.woocommerce-pagination ul li span.current { background: none; color: var(--cuerpo); font-weight: 700; } /* hoy #816f98 sobre #e9e6ed, 3,65:1 */ /* Búsqueda (1518): titulares de 34 y 30 px en 500, en mayúsculas; «Anterior / Siguiente» de 20 px en 600. Los márgenes de sus contenedores: el de los titulares, 2 % arriba y 10 px de relleno; el de la rejilla, 60 px arriba y abajo y 10 de relleno (80 px entre el subtítulo y la rejilla, y 70 bajo «Anterior / Siguiente»). El 2 % es del ancho, como en Elementor: el padding en % se mide sobre el ancho del bloque que contiene. */ .busqueda { padding-block: calc(2% + 10px) 70px; } .busqueda__titulo, .busqueda__subtitulo { margin: 0 0 20px; color: var(--cuerpo); font: 500 34px/53px var(--letra); letter-spacing: -.5px; text-align: center; text-transform: uppercase; } .busqueda__subtitulo { margin-bottom: 80px; font-size: 30px; } .busqueda__paginas { display: flex; justify-content: center; gap: 20px; margin-top: 20px; font: 600 20px/60px var(--letra); text-transform: uppercase; } .busqueda__paginas a, .busqueda__paginas span { display: inline-block; } /* 60 px de alto: el objetivo táctil no depende de la fuente */ .busqueda__paginas a { color: var(--rosa-texto); } /* 20 px en 600 no es texto grande: D10, regla 2 */ /* Cabecera de foto de los listados (1315, 1317, 1322, 1978 y 1995): 200 px, contenido en la caja de 1140, título de 40 px en 600 y subtítulo de 18 px en 500, en mayúsculas; en móvil, centrados y con el interlineado de Elementor (1,2em). Foto y velo de cada una, del JSON. */ .cabecera-archivo { position: relative; display: flex; align-items: center; min-height: 200px; overflow: hidden; background: #000; } /* Con una clase de más: «.woocommerce img» (0,1,1) le pone height: auto, y en móvil, donde la cabecera crece con el título, la foto se quedaba en 97 px con una franja negra debajo. */ .cabecera-archivo .cabecera-archivo__foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .cabecera-archivo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: .7; } /* 30 px de relleno: los 10 del contenedor exterior y los 20 del interior (37f2ff4 y 8738c1a), medido: título en x=170 a 1440 y en x=30 a 390, y la cabecera de 257 px en móvil con el título en tres líneas. El hueco de 10 es el margen de arriba del subtítulo en el JSON. */ .cabecera-archivo__texto { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 30px; } .cabecera-archivo__titulo { margin: 0; color: #fff; font: 600 40px/40px var(--letra); text-transform: uppercase; } .cabecera-archivo__subtitulo { margin: 0; color: var(--rosa); font: 500 18px/20px var(--letra); word-spacing: 4px; text-transform: uppercase; } .cabecera-archivo--origen .cabecera-archivo__foto { object-position: right bottom; } .cabecera-archivo--origen::before { opacity: .5; } .cabecera-archivo--origen .cabecera-archivo__subtitulo { color: var(--amarillo); } .cabecera-archivo--capsulas .cabecera-archivo__foto { object-fit: none; object-position: right center; } /* background-size: auto */ .cabecera-archivo--blend .cabecera-archivo__foto { object-position: left center; } .cabecera-archivo--infusiones .cabecera-archivo__foto { object-position: right center; } /* velo: el .7 de la regla general, no su 0,49 */ .cabecera-archivo--cacaos .cabecera-archivo__foto { object-position: center top; } .cabecera-archivo--cacaos::before { opacity: .6; } @media (max-width: 767px) { .cabecera-archivo__texto { text-align: center; } .cabecera-archivo__titulo { line-height: 48px; } .cabecera-archivo__subtitulo { line-height: 1.2; } .cabecera-archivo--blend .cabecera-archivo__foto { object-position: center top; } } /* Listado con filtros: filtros al 20 % y productos al 80 % con 10 px de relleno; en móvil, filtros arriba en dos columnas (la fase B los rehace: anexo §8.4). Hoy el contenedor de las migas lleva un 2 % de margen arriba (del ancho: 29 px a 1440 y 8 a 390) y 10 de relleno, y su texto tiene un interlineado de 10 px arriba de una caja de 24: el centro del texto queda a 2 % + 15 px de la cabecera. Aquí el texto va centrado en 24 px: 2 % + 3 px. Debajo, hasta la columna de filtros y la rejilla, 49 px desde el centro del texto (10 de relleno de las migas, 10 de la sección y 10 de cada columna): 27 de margen. */ .listado--filtros { padding-block: calc(2% + 3px) 50px; } /* abajo, con los 10 de la columna: 60 px de la rejilla al boletín, como hoy */ .listado--filtros .woocommerce-breadcrumb { margin-bottom: 27px; padding-left: 20px; } /* el widget lleva 20 px de margen a la izquierda */ .listado__cuerpo { display: grid; grid-template-columns: 20% 80%; } .listado__filtros, .listado__productos { padding: 10px; } @media (max-width: 767px) { .listado__cuerpo { grid-template-columns: 1fr; } } /* Hoy cada filtro es un contenedor con 10 px de relleno, 20 de hueco entre ellos (0 en móvil) y su título con interlineado de 10: el centro del título a 15 px de la columna, la primera casilla a 49,5 y 29 px de paso entre casillas. Con la leyenda en 19 px y las opciones en 24 (WCAG 2.5.8), los mismos centros salen de 5 px arriba, 13 bajo la leyenda, 5 entre opciones y 33 entre filtros (13 en móvil). 10 px a la izquierda, como el texto de hoy. */ .filtros { display: flex; flex-direction: column; gap: 33px; padding: 5px 10px 8px; } @media (max-width: 767px) { .filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; } } .filtros__grupo { margin: 0; padding: 0; border: 0; } .filtros__titulo { margin-bottom: 13px; padding: 0; color: var(--cuerpo); font: 600 16px/1.2 var(--letra); letter-spacing: -.2px; } .filtros__opcion { display: flex; align-items: center; gap: 5px; min-height: 24px; color: var(--cuerpo); font-size: 16px; line-height: 1.2; cursor: pointer; } .filtros__opcion input { width: 16px; height: 16px; margin: 0; accent-color: var(--rosa-texto); } .filtros__opcion + .filtros__opcion { margin-top: 5px; } .filtros__cuenta { color: var(--gris-texto); } .filtros[data-js] .filtros__aplicar { display: none; } /* Landings de Café (1291) y Otros (1957). Medidas de la web de hoy (capturas/medidas-plan3/product_cat-cafe-* y product_cat-otros-*) y el JSON de las dos plantillas; lo que corrige al brief, en capturas/rulings-plan-3.md (Tarea 6). Las fotos llevan la clase del bloque delante: «.woocommerce img» (0,1,1) les pondría height: auto y enseñarían la parte de arriba de la foto en vez del centro (como en la cabecera de los listados, Tarea 5). */ .landing-cabecera { position: relative; display: flex; align-items: center; min-height: 300px; overflow: hidden; background: #000; } .landing-cabecera--otros { justify-content: center; min-height: 350px; margin-bottom: 70px; text-align: center; } /* el espaciador de 50 px (8ea62ba) y sus 20 de relleno */ .landing-cabecera .landing-cabecera__foto, .landing-banner .landing-banner__foto, .landing-mas .landing-mas__foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* La textura 2421 del ::before de hoy, en multiply sobre la foto: casi blanca, no la oscurece. Sin velo negro: el #02010169 del JSON es el fondo del contenedor, que la foto tapa. */ .landing-cabecera .landing-cabecera__textura { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: multiply; } .landing-cabecera__texto { position: relative; z-index: 2; padding: 20px; } .landing-cabecera--cafe .landing-cabecera__titulo { margin: 0; color: #fff; font: 600 40px/40px var(--letra); text-transform: uppercase; } .landing-cabecera--cafe .landing-cabecera__titulo b { font-weight: 800; } .landing-cabecera--cafe .landing-cabecera__subtitulo { margin: 10px 0 0; color: var(--rosa); font: 500 18px/20px var(--letra); text-transform: uppercase; } .landing-cabecera--otros .landing-cabecera__titulo { margin: 0 0 20px; color: #fff; font: 500 34px/1.2 var(--letra); letter-spacing: -.5px; } /* hoy 10 px: se monta en móvil */ .landing-cabecera--otros .landing-cabecera__subtitulo { margin: 10px 0; color: #fff; font: 600 30px/1.2 var(--letra); text-transform: uppercase; } @media (max-width: 767px) { .landing-cabecera--cafe .landing-cabecera__texto { text-align: center; } .landing-cabecera--cafe .landing-cabecera__titulo { line-height: 48px; } .landing-cabecera--cafe .landing-cabecera__subtitulo { line-height: 1.2; } } /* Sección: 20 px de margen y 30 de relleno arriba, que no se funden con el margen de lo anterior: título a 50 px de la cabecera y a 70 del banner (sus 40 de margen), como hoy. El subtítulo de 20 px de alto, 35 bajo el título; la rejilla, 50 más abajo (70 en la de cápsulas, tras los iconos: su contenedor lleva 10 de relleno y 40 de margen). «ver todos», 20 px en 600 con −1 px de espaciado (JSON); hoy su centro queda 45 px bajo la rejilla. Los títulos siguen en 40 px en móvil, como hoy en 4 de las 5 secciones. */ .landing-seccion { margin-top: 20px; padding-top: 30px; } .landing-seccion__titulo { margin: 0; color: var(--cuerpo); font: 600 40px/40px var(--letra); text-align: center; text-transform: uppercase; } .landing-seccion__subtitulo { margin: 35px 0 50px; color: var(--cuerpo); font: 500 18px/20px var(--letra); word-spacing: 4px; text-align: center; text-transform: uppercase; } .landing-iconos + .landing-seccion .landing-seccion__subtitulo { margin-bottom: 70px; } .landing-seccion__ver { margin: 32px 0 40px; text-align: center; } .landing-seccion__ver a { display: inline-block; color: var(--cuerpo); font: 600 20px/25px var(--letra); letter-spacing: -1px; text-transform: uppercase; } /* En Otros, «ver todas/todos» lleva 30 px de margen debajo dentro de la fila (8b4cbd8 y ccfc8b4): 30 px más hasta el banner y hasta el boletín que en Café. */ .landing-cabecera--otros ~ .landing-seccion .landing-seccion__ver { padding-bottom: 30px; } /* Móvil: los ajustes de cada sección en el JSON, que hoy solo tienen algunas. Van por posición porque las dos plantillas comparten el marcado de la sección (caribena_seccion_landing()). */ @media (max-width: 767px) { /* Café, orígenes (f2423c7 y 6007da5): 5 px de margen en vez de 30/40, y el título en 30 px. */ .landing-cabecera--cafe ~ .landing-banner + .landing-seccion { padding-top: 5px; } .landing-cabecera--cafe ~ .landing-banner + .landing-seccion .landing-seccion__titulo { font-size: 30px; } .landing-cabecera--cafe ~ .landing-banner + .landing-seccion .landing-seccion__subtitulo { margin-bottom: 15px; } /* Café, cápsulas (6044975): 40 px de margen bajo la rejilla. */ .landing-iconos + .landing-seccion .landing-seccion__ver { margin-top: 52px; } /* Otros, infusiones (7ddd107): interlineado de 1,3. Su «ver todas», sin los 30 px de debajo: en móvil el banner lleva 10 px de margen (23e0725) y hoy queda a 62 px del texto, los 40 del «ver todas» y no 30 + 70. */ .landing-cabecera--otros ~ .landing-seccion:first-of-type .landing-seccion__titulo { line-height: 1.3; } .landing-cabecera--otros ~ .landing-seccion:first-of-type .landing-seccion__ver { padding-bottom: 0; } /* Otros, cacaos (73ca1bd y d03bd75): título con interlineado de 1,2 y 40 px a los lados; subtítulo sin margen y con 10 px de relleno. */ .landing-banner--otros + .landing-seccion .landing-seccion__titulo { padding-inline: 40px; line-height: 1.2; } .landing-banner--otros + .landing-seccion .landing-seccion__subtitulo { margin: 30px 0 60px; } } .landing-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 250px; margin: 60px 0 40px; overflow: hidden; } .landing-banner--otros { margin-top: 70px; } .landing-banner__titulo { position: relative; margin: 0; padding: 10px; color: #fff; font: 600 40px/1.2 var(--letra); word-spacing: 10px; text-align: center; text-transform: uppercase; } .landing-banner--otros .landing-banner__titulo { word-spacing: normal; } /* 10 px solo en «Café de Origen» (JSON) */ @media (max-width: 767px) { .landing-banner--otros { margin: 10px 0 0; } } /* 23e0725 */ /* «¡Hay Más!» (29e3a81): 301 px de alto como mínimo, velo negro al 58 % y el contenido centrado en vertical. El párrafo mide el 54,464 % del ancho de la página, alineado a la izquierda (también en móvil, como hoy). */ .landing-mas { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 301px; margin-top: 60px; overflow: hidden; } .landing-mas::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: .58; } .landing-mas .landing-mas__dentro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: none; padding: 0; } .landing-mas__titulo { margin: -10px 0 0; color: #fff; font: 600 40px/45px var(--letra); text-transform: uppercase; } .landing-mas__texto { width: 54.464%; margin: 30px 0 0; color: #fff; font: 300 16px/23px var(--letra); } /* hoy capitalize: P6 */ @media (max-width: 767px) { .landing-mas__titulo { margin-top: 15px; } .landing-mas__texto { margin: 10px 0 76px; } } /* Caja de iconos (7083221): 1140 px, blanca con sombra y 20/30 de relleno, 50 px por encima del final de «¡Hay Más!» (su contenedor sube 60 y lleva 10 de relleno). Iconos al 50 % de su columna y 20 px por encima del texto. */ .landing-iconos { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); width: auto; max-width: 1140px; margin: -50px auto 60px; padding: 20px 0 30px; list-style: none; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .5); text-align: center; } .landing-iconos__item img { width: 50%; margin: 0 auto 20px; } .landing-iconos__item p { margin: 0; color: #000; font: 600 14px/22px var(--letra); letter-spacing: -.5px; text-transform: capitalize; } @media (max-width: 767px) { .landing-iconos { grid-template-columns: 1fr 1fr; row-gap: 20px; margin-inline: 10px; } } /* Mi lista de deseos, con productos: debajo de la rejilla, «¡Añádelos ahora a tu carrito!» a 40 px en 600, en burdeos y en mayúsculas, como hoy (el heading de la página 3194 en Elementor, sin tamaño propio en móvil). Su interlineado de hoy, 30 px, no se copia: en móvil el título va en tres líneas y los acentos pisan la de arriba. */ .lista-deseos .rejilla { margin-top: 40px; } .lista-deseos__titulo { margin: 40px 0 60px; color: var(--burdeos); font: 600 40px/1.2 var(--letra); text-align: center; text-transform: uppercase; }