/* Compilado a mano de semanas_bebe.scss (no hay compilador sass en este entorno). Solo contiene los ajustes propios de esta landing; el resto de clases reutilizadas (.services-section, .container-esferas-nuevo, .bloque-faqs__*, etc.) vienen de css/home2025.css, css/carousell/carousellEsferas.css y css/faqs/faqs.css, ya enlazados en el de semanas_bebe.php. */ /* "titulos" es la clase que usan varios de nuestros componentes reutilizados para el título de sección (bannerVariosTextosFlotantes.php en el Bloque 7, y aquí también para los Bloques 3 y 6). Se iguala aquí al estilo real de "Todo lo que necesita según su etapa" (Bloque 2, .carousellEsferas .esferasSubtitulo en carousellEsferas.scss: 32px, Lato 500, sin mayúsculas, alineado a la izquierda) para que todos los titulares de bloque se vean iguales, en vez del h4 centrado que había antes. */ .pagina-semanas-bebe .titulos { font-size: 32px; font-family: Lato, sans-serif; font-weight: 500; text-transform: none; margin: 40px 0 20px; } @media only screen and (min-width: 767px) { .pagina-semanas-bebe .titulos { margin-bottom: 50px; } } .pagina-semanas-bebe .subtitulo { text-align: center; margin-bottom: 20px; } /* Bloque 2 (esferas): CTA "Ver más" bajo el carrusel. Según el Figma (node 26004-1599): píldora gris clara, texto oscuro sin mayúsculas ni negrita, separada 32px del carrusel de esferas. */ .pagina-semanas-bebe .container_ver_mas_semanas_bebe { text-align: center; margin-top: 32px; } .pagina-semanas-bebe .boton-ver-mas-semanas-bebe { display: inline-block; background: #f0f0f0; color: #1C1B1F; text-transform: none; font-weight: 400; font-size: 14px; padding: 10px 24px; border-radius: 24px; text-decoration: none; } .pagina-semanas-bebe .boton-ver-mas-semanas-bebe:hover { background: #e2e2e2; } /* Bloque 7 (#banner-home-semanas_bebe_ultimo, modelo: #banner-home-banners_varios de la home). En home2025.scss, .floatingText-bannerTextoFlotante.segundoTextoFlotante en móvil solo fija el ancho (calc(100% - 20px)) y deja el resto de la posición (right/bottom inline, generados desde 'position' en el PHP) tal cual estaba en desktop; con el ancho casi completo, el "text-align" del bloque desplaza el botón fuera de la esquina inferior derecha. Se fuerza aquí para que quede pegado a esa esquina también en móvil, igual que en desktop. */ @media only screen and (max-width: 767px) { .pagina-semanas-bebe #banner-home-semanas_bebe_ultimo .floatingText-bannerTextoFlotante.segundoTextoFlotante { width: max-content !important; left: auto !important; right: 10px !important; top: auto !important; bottom: 10px !important; } } /* El .container "de fábrica" (bootstrap.min.css, cargado en todas las páginas) se queda fijo en 1028px a partir de 1200px de viewport. El wrapper que pone productos.php alrededor de la plantilla (.container > .span12 > .contenedor.desktop-body) no tiene ese límite porque el resto del sitio (home2025.scss, dentro de
) lo lleva a 1400px por otro camino que no alcanza a productos.php. Sin este bloque, ese wrapper queda en 1400px pero cada uno de los .container de los bloques 1-9 se queda en 1028px, y todo se ve desalineado. Mismo patrón que body.pagina-vuelta-al-cole en css/categorias/nuevas_categorias.scss. box-sizing: border-box porque el sitio no trae un reset global de box-sizing (solo se aplica puntualmente en algunos componentes) y .container aquí pasa a ser width:100%. Sin esto, un .container con padding propio (p.ej. .bloque-faqs del Bloque 9, que define "padding: 0 20px" en css/faqs/faqs.scss) se desborda por los lados en móvil: el ancho final pasa a ser 100% + el padding en vez de incluirlo. margin-top/bottom en !important: home2025.scss trae "main .container{margin:30px auto}" sin override de margen en el breakpoint de tablet (la línea "margin: 60px auto" de ahí está comentada). Pero elegirChupete/css/style.css -que cargamos en esta landing para el patrón guia-chupete-faq del Bloque 9- importa una COPIA compilada de home2025 congelada de antes de que se comentara esa línea: sigue trayendo "margin: 60px auto" en ese breakpoint, con la misma especificidad ("main .container") y cargando después de home2025.css, así que gana y añade 60px de margen vertical de más en tablet/desktop. En vez de tocar ese bundle compartido (lo usan también guarderia/infantil/primaria/Elegir- chupete), forzamos aquí el valor correcto con !important para que ningún duplicado desactualizado -este u otro futuro- pueda colarse en los .container de esta landing. */ body.pagina-semanas-bebe .container { box-sizing: border-box; width: 100%; max-width: 100%; margin-top: 30px !important; margin-bottom: 30px !important; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 767px) { body.pagina-semanas-bebe .container { max-width: 744px; } } @media only screen and (min-width: 1020px) { body.pagina-semanas-bebe .container { max-width: 980px; } } @media only screen and (min-width: 1450px) { body.pagina-semanas-bebe .container { max-width: 1400px; } } /* margin-top: 0 porque es el .container más externo de la página (hijo directo de
): también carga el "margin: 30px auto" genérico de home2025.scss y es el que separa el hero del menú/cabecera. El Bloque 1 (su nieto, ver más abajo) lleva el mismo ajuste por la misma razón. !important por la misma razón que el .container genérico de arriba (bundle desactualizado de elegirChupete/css/style.css). */ body.pagina-semanas-bebe .container:has(> .span12 > .contenedor.desktop-body) { width: 100% !important; max-width: 100%; margin-top: 0 !important; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 767px) { body.pagina-semanas-bebe .container:has(> .span12 > .contenedor.desktop-body) { max-width: 744px; } } @media only screen and (min-width: 1020px) { body.pagina-semanas-bebe .container:has(> .span12 > .contenedor.desktop-body) { max-width: 980px; } } @media only screen and (min-width: 1450px) { body.pagina-semanas-bebe .container:has(> .span12 > .contenedor.desktop-body) { max-width: 1400px; } } body.pagina-semanas-bebe .span12:has(> .contenedor.desktop-body) { width: 100% !important; float: none; max-width: 100%; } body.pagina-semanas-bebe .contenedor.desktop-body { width: 100%; max-width: 100%; } /* Bloque 8 (servicios/seguridad): igual que ".services-section" en la home ("Más ventajas que nunca..."), el fondo debe ir de lado a lado de la pantalla. En la home el bloque no está dentro de ningún .container; aquí sí lo está (el wrapper .container de productos.php, limitado a 1400px más arriba), así que el fondo se queda encajonado y además duplica el padding/margen del inner .container propio del componente. Rompemos el ancho al viewport completo con la técnica habitual (independiente del ancho real del contenedor padre, a diferencia del "width:100vw; margin: 0 -50vw" simplificado que se usa en otras plantillas, que aquí desalinearía el fondo por estar el .container capado a 1400px en vez de a todo el viewport). El .container interno del propio componente sigue centrando su contenido con el ancho normal de la página. */ body.pagina-semanas-bebe #semanas_bebe_seguridad.services-section { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Ajustes pedidos sólo para desktop: en móvil se deja el comportamiento de fábrica de .services-section (home2025.scss). */ @media only screen and (min-width: 767px) { body.pagina-semanas-bebe #semanas_bebe_seguridad.services-section .services-section__title { margin-bottom: 0; } body.pagina-semanas-bebe #semanas_bebe_seguridad.services-section .services.services--count-4 { justify-content: center; } body.pagina-semanas-bebe #semanas_bebe_seguridad.services-section .serviceIconText-container { padding: 0 45px; } } /* Bloque 1 (banner hero): el ".container" "de fábrica" (main .container, en home2025.scss) trae "margin: 30px auto", pensado para separar cada bloque de la home del anterior. En el primer bloque de la página ese margen superior sobra: el hero debe arrancar pegado a la cabecera. Se anula sólo para el primer .container de la landing (por posición, ya que el div no lleva id/clase propia), sin tocar el resto de .container de este mismo bloque 1-9 ni el de otras plantillas que también usan .contenedor.desktop-body (juguetes, verano, vuelta_al_cole). !important por la misma razón que el .container genérico más arriba (bundle desactualizado de elegirChupete/css/style.css). */ body.pagina-semanas-bebe .contenedor.desktop-body > .container:first-child { margin-top: 0 !important; } /* Bloque 9 (FAQ estático, .guia-chupete-faq__*): home2025.scss trae "main .container section { height: 300px }", pensado para los carruseles de esferas de la home; como el wrapper de productos.php también es un .container (ver arriba), esa regla alcanza también a nuestro
del Bloque 9. Al abrir una pregunta el contenido crece por encima de esos 300px fijos, pero la caja no crece con él (overflow visible por defecto): el acordeón abierto queda flotando sobre lo que venga después -el footer- en vez de empujarlo hacia abajo. Se anula esa altura fija sólo para nuestro bloque. */ body.pagina-semanas-bebe section.guia-chupete-faq { height: auto; } /* El carrusel de mini-banners (bloque 4) usa el motor de las esferas (carousellEsferas, ver includes/banners/miniBannerCarousel.php), que ya trae de fábrica el loop infinito y el espacio reservado para las flechas. Lo único que hay que corregir: carousellEsferas.js centra las flechas verticalmente asumiendo items ~cuadrados (esferas circulares); nuestros mini-banners son mucho más anchos que altos, así que forzamos el centrado por CSS sobre el "ancla" propia que envuelve solo flechas+wrapper (sin el título), en vez de confiar en el cálculo del JS. */ .mini-banner-carousell-forma .mini-banner-carousell-arrows-anchor { position: relative; } .mini-banner-carousell-forma .mini-banner-carousell-arrows-anchor .arrowCarousellEsferas-left { top: 50% !important; transform: translateY(-50%) rotate(-135deg) !important; } .mini-banner-carousell-forma .mini-banner-carousell-arrows-anchor .arrowCarousellEsferas-right { top: 50% !important; transform: translateY(-50%) rotate(45deg) !important; } /* En móvil este bloque NO debe comportarse como carrusel: los mini-banners van apilados uno debajo del otro, igual que la píldora de MiniBanerCategorias en productos.php (pedido del cliente). En vez de tocar carousellEsferas.js/css -compartido con el carrusel de esferas del Bloque 2, que sí debe seguir siendo swipeable en móvil-, se anula aquí solo el layout horizontal para este bloque: se ocultan las flechas y las columnas ("productosCarousellEsferas", movida por JS vía la propiedad "left") pasan a apilarse en columna con posición estática. El script de auto-avance de miniBannerCarousel.php también se salta el clic en móvil (ver ese fichero), así no se recalcula "left" en un elemento que ya no se desplaza. !important porque pisa el "left" e inline-width que calcula carousellEsferas.js sobre estos mismos elementos. */ @media only screen and (max-width: 767px) { .mini-banner-carousell-forma .mini-banner-carousell-arrows-anchor .arrowCarousellEsferas { display: none !important; } .mini-banner-carousell-forma .carousellWrapperEsferas { margin: 0 !important; overflow: visible !important; } .mini-banner-carousell-forma .productosCarousellEsferas { display: flex !important; flex-direction: column !important; position: static !important; left: auto !important; gap: 10px; } .mini-banner-carousell-forma .itemEsferas { width: 100% !important; flex: 1 1 auto !important; } } /* Bloque 5: carrusel de reseñas con foto de producto. Mismo motor que el carrusel de reseñas de la home (carousellTutete + js/carousell/carousell.js, ver includes/home/commentsCarouselConImagen.php), pero con tarjeta propia (foto de producto) y solo 2 tarjetas visibles a la vez en vez de 3: no fijamos flex con !important en el item, así el ancho que calcula el JS a partir de data-itemXpage/data-itemXpageMovil es el que manda. */ .commentImgCarousel-container { margin: 0 15px !important; } /* Título/subtítulo de este bloque van más pequeños que el resto de la landing (Figma nodo 26004:1628: título 28px, subtítulo 16px, frente a los 32px/18px por defecto de .titulos/.subtitulo en home2025.css). margin-bottom del título y margin-top del subtítulo: en el resto de bloques ".titulos" es el único titular del bloque, así que su margin-bottom grande (20px móvil / 50px desktop, heredado de .pagina-semanas-bebe .titulos) separa el título del contenido de abajo. Aquí en cambio va seguido de un ".subtitulo" -mismo patrón que la home, pero con el orden invertido (ver comentario en commentsCarouselConImagen.php)-, y ese margin-bottom tan grande sumado al margin-top por defecto del navegador en el

del subtítulo dejaba ambos textos demasiado separados entre sí. Se pegan explícitamente el uno al otro. !important en ambos margin: esta regla compite con "main .container .container_banner .titulos/.subtitulo" de home2025.css (.commentImgCarousel-container también lleva la clase "container_banner"), que tiene más especificidad (1 elemento + 3 clases) que ".commentImgCarousel-container .titulos" (2 clases) y por eso ganaba pese a venir después en el CSS. */ .commentImgCarousel-container .titulos { font-size: 28px; margin-bottom: 8px !important; } .commentImgCarousel-container .subtitulo { font-size: 16px; margin-top: 0 !important; } /* .container_banner (main .container .container_banner en home2025.css) centra el texto de por sí; esta tarjeta lo lleva a la izquierda. .commentBoxImg-row es imagen-izquierda/texto-derecha y NO lleva wrap. */ .commentImgCarousel-container .commentBoxImg-container { display: flex; height: 100%; box-sizing: border-box; background: #f3e2e5; border-radius: 14px; padding: 20px; text-align: left; } @media only screen and (min-width: 767px) { .commentImgCarousel-container .commentBoxImg-container { padding: 24px; min-height: 212px; } } /* Común a las dos copias de estrellas (movil/desktop, ver más abajo). */ .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-stars .commentBoxImg-starvacia { display: none; } /* Estrellas duplicadas (ver commentBoxConImagen.php): en desktop van dentro de ".commentBoxImg-content", junto al texto, pero ahí la columna es demasiado estrecha en móvil para las 5 estrellas en una sola línea. En móvil se oculta esa copia y se muestra en su lugar esta otra, hermana de ".commentBoxImg-row", que sí puede ocupar todo el ancho de la tarjeta. */ .commentImgCarousel-container .commentBoxImg-container > .commentBoxImg-stars.movil { display: none; } @media only screen and (max-width: 767px) { .commentImgCarousel-container .commentBoxImg-container { flex-direction: column; } .commentImgCarousel-container .commentBoxImg-container > .commentBoxImg-stars.movil { display: flex; width: 100%; margin-bottom: 10px; } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-content > .commentBoxImg-stars.desktop { display: none; } } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-row { display: flex; align-items: center; gap: 20px; width: 100%; } @media only screen and (min-width: 767px) { .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-row { gap: 24px; } } /* Medidas del Figma (nodo 26004:1628, "Vuestros favoritos"): caja blanca 232x155px, radio 14px, a partir de 767px; más pequeña en móvil. */ .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-image { flex: 0 0 100px; width: 100px; height: 130px; border-radius: 14px; background: white; display: flex; align-items: center; justify-content: center; overflow: hidden; } @media only screen and (min-width: 767px) { .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-image { flex-basis: 232px; width: 232px; height: 155px; } } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-content { flex: 1 1 auto; min-width: 0; line-height: 1.2; } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-content .commentBoxImg-stars { margin-bottom: 10px; } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-content .commentBoxImg-text { font-size: 18px; line-height: 1.5; color: #000; margin-bottom: 12px; } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-content .commentBoxImg-author { font-size: 14px; font-weight: 700; color: #23171a; text-decoration: underline; margin-bottom: 4px; } .commentImgCarousel-container .commentBoxImg-container .commentBoxImg-content .commentBoxImg-date { font-size: 14px; line-height: 1.8; color: #3f3e3f; } .container section.container-carousell-2025 .carousellTutete#semanasBebeResenas .carousellWrapper { margin: 0 15px !important; } .container section.container-carousell-2025 .carousellTutete#semanasBebeResenas .arrowCarousell { width: 48px !important; height: 48px !important; background: #e59eaf; border-radius: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none !important; } .container section.container-carousell-2025 .carousellTutete#semanasBebeResenas .arrowCarousell img { position: absolute; top: 18px; left: 18px; } .container section.container-carousell-2025 .carousellTutete#semanasBebeResenas .arrowCarousell-left { left: -10px; transform: rotate(180deg) !important; } .container section.container-carousell-2025 .carousellTutete#semanasBebeResenas .arrowCarousell-right { right: -10px; transform: rotate(0deg) !important; }