/* =================================================================== fenix.css — Sistema de estilos global del proyecto Fenix Tours Reemplaza progresivamente a: - css/webflow.css - css/fenix-9d234e.webflow.css Estrategia: mantenemos los MISMOS nombres de clase que usa el HTML actual (.container, .section, .title, .nav-link, .button, ...). Solo cambia quién las define. Para que esto funcione, hay que cargar fenix.css DESPUÉS de los CSS de Webflow en el . Unidades: rem en general (1rem = 16px). El px se reserva para bordes finos (1px) y detalles puntuales donde rem no aporta. =================================================================== */ /* =================================================================== 1. VARIABLES =================================================================== */ :root { /* ---------- Paleta ---------- */ --color-naranja: #ff9000; /* Acento principal */ --color-naranja-claro: #ff9771; /* Hover dropdown */ --color-naranja-hover: #d47800; /* Hover de enlaces del formulario */ --color-texto: #5a5a5a; /* Cuerpo de texto */ --color-titulo: #1e1e1e; /* Encabezados, sección oscura */ --color-blanco: #fff; --color-crema: #f1eee7; /* Fondo inputs / contact-link */ --color-crema-hover: #f7f5f0; /* Hover inputs */ --color-borde: #dcdcdc; /* Bordes claros */ --color-link-secundario: #626262; /* Hover de enlaces genéricos */ --color-error: #f41a1a; --color-gris-medio: #d2d2d2; /* Dropdown links en móvil */ /* ---------- Tipografía ---------- */ --fuente-base: "Roboto", sans-serif; --fuente-script: "Roboto"; /* ---------- Layout ---------- */ --contenedor-max: 72.5rem; /* 1160px */ --contenedor-padding: 1.875rem; /* 30px */ --contenedor-padding-movil: 1.25rem; /* 20px */ --seccion-padding: 3.4375rem; /* 55px */ --seccion-padding-tablet: 2.5rem; /* 40px */ --seccion-padding-movil: 1.25rem; /* 20px */ --altura-hero: 50dvh; --top-nav-altura: auto; /* 100px */ --top-nav-altura-tablet: 5rem; /* 80px */ /* Altura total de la navbar fija (top-nav + bottom-nav). Se usa como padding-top en los heros para que el contenido no quede tapado. En tablet/móvil el bottom-nav colapsa porque .nav-menu pasa a ser un dropdown absoluto, así que el valor baja a la altura del top-nav solo. */ --navbar-total: 9.375rem; /* 150px */ } /* =================================================================== 2. RESET MÍNIMO (reemplaza la base de webflow.css: box-sizing global, body margin, img max-width) =================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; background-color: var(--color-blanco); font-family: var(--fuente-base); color: var(--color-texto); font-size: 0.9375rem; /* 15px */ line-height: 1.25rem; /* 20px */ font-weight: 400; } img { max-width: 100%; display: inline-block; vertical-align: middle; } /* =================================================================== 3. TIPOGRAFÍA GLOBAL =================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-base); color: var(--color-titulo); font-weight: 700; } h1 { margin: 1.25rem 0 0.625rem; font-size: 3.25rem; /* 52px */ line-height: 4.0625rem; /* 65px */ text-transform: capitalize; } h2 { margin: 1.25rem 0; font-size: 2.5rem; /* 40px */ line-height: 3.125rem; /* 50px */ text-transform: capitalize; } h3 { margin: 1.25rem 0 0.625rem; font-size: 2rem; /* 32px */ line-height: 2.5rem; /* 40px */ text-transform: capitalize; } h4 { margin: 1.25rem 0 0.625rem; font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ } h5 { margin: 1.125rem 0 0.625rem; font-size: 1.125rem; /* 18px */ line-height: 1.375rem; /* 22px */ text-transform: capitalize; } h6 { margin: 0.625rem 0; font-size: 0.75rem; /* 12px */ line-height: 1.125rem; /* 18px */ } p { margin: 1.25rem 0; line-height: 1.5; } a { font-family: var(--fuente-base); color: var(--color-titulo); font-weight: 700; text-decoration: none; cursor: pointer; transition: color 400ms ease; } a:hover { color: var(--color-link-secundario); } ul, ol { margin: 1.25rem 0; padding-left: 2.5rem; } li { padding: 0.1875rem 0; color: var(--color-titulo); } form { text-align: left; } label { display: block; margin-bottom: 0.3125rem; font-family: var(--fuente-base); color: var(--color-titulo); font-size: 0.75rem; /* 12px */ font-weight: 500; letter-spacing: 0.125rem; text-transform: uppercase; } blockquote { margin: 1.25rem 0; padding: 0.625rem 1.25rem; border-left: 5px solid var(--color-naranja); color: var(--color-titulo); font-size: 1.125rem; line-height: 1.375rem; font-style: italic; } /* =================================================================== 4. CONTENEDOR / SECCIÓN Mantenemos los nombres .container y .section que ya usa el HTML. =================================================================== */ .container { max-width: var(--contenedor-max); margin: 0 auto; padding: 0 var(--contenedor-padding); } .container.flex-container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .section { padding: var(--seccion-padding) 0; } .section.dark { background-color: var(--color-titulo); } .section.relative { position: relative; } /* =================================================================== 5. HERO DE SUBPÁGINA (cabecera con foto) =================================================================== */ .subpage-hero-section { min-height: var(--altura-hero); padding-top: var(--navbar-total); padding-bottom: 4.6875rem; /* 75px */ background-position: 0 0, 50% 50%; background-size: auto, cover; } .subpage-hero-section.our-history { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/manu/hero_landscape.webp"); } .subpage-hero-section.product-page { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/manu/20los_verdes.webp"); } .subpage-hero-section.sales-page { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/manu/100decoracion-cesar-.webp"); background-position: bottom; } .subpage-hero-section.about-us-page { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/manu/home-Lanzarote.webp"); } /* =================================================================== 6. TÍTULO HERO + FADE-IN INICIAL Sustituye los estilos inline opacity:0 + transform:translate3d que tenía el

de Webflow. =================================================================== */ .title { font-size: 4.375rem; /* 70px */ line-height: 5.25rem; /* 84px */ font-weight: 900; text-transform: capitalize; } .title.white { color: var(--color-blanco); } .title-wrapper { display: flex; flex-direction: column; align-items: center; padding: 1.875rem 0; /* 30px */ text-align: center; } .title-wrapper.half-width { max-width: 37.5rem; /* 600px */ } /* Heros de subpágina con solo h1 (highlights, our_suggestions, contact_us): el navbar se queda arriba por su flujo normal y el title-wrapper crece para ocupar el resto del alto y centra el h1 verticalmente. */ .subpage-hero-section:has(> .container > .title-wrapper) { display: flex; flex-direction: column; } .subpage-hero-section:has(> .container > .title-wrapper) > .container { flex: 1; display: flex; flex-direction: column; } .subpage-hero-section > .container > .title-wrapper { flex: 1; justify-content: center; } /* Fade-in inicial al cargar la página */ @keyframes fenix-fade-up { from { opacity: 0; transform: translate3d(0, 3.125rem, 0); /* 50px */ } to { opacity: 1; transform: translate3d(0, 0, 0); } } .fade-in-load { opacity: 0; animation: fenix-fade-up 800ms ease forwards; } /* Retardos para encadenar fade-in en varios elementos seguidos */ .fade-in-load.retardo-1 { animation-delay: 150ms; } .fade-in-load.retardo-2 { animation-delay: 300ms; } /* =================================================================== 7. SUBTÍTULO DECORATIVO (Sacramento) =================================================================== */ .subtitle { margin-bottom: -1.25rem; font-family: var(--fuente-script); color: var(--color-naranja); font-size: 2.25rem; /* 36px */ font-weight: 500; line-height: 2.25rem; text-transform: uppercase; } /* =================================================================== 8. QUOTE / PÁRRAFO DESTACADO =================================================================== */ .quote-wrapper { max-width: 37.5rem; /* 600px */ text-align: center; } .quote-paragraph { margin-top: 1.875rem; color: var(--color-titulo); font-size: 1.25rem; /* 20px */ font-style: italic; } /* =================================================================== 9. BOTÓN =================================================================== */ .button { display: inline-block; margin-top: 1.25rem; padding: 0.9375rem 2.125rem; /* 15px 34px */ border: 0; border-radius: 1.5625rem; /* 25px */ background-color: var(--color-naranja); color: var(--color-blanco); font-size: 1.125rem; /* 18px */ font-weight: 700; text-transform: capitalize; text-decoration: none; cursor: pointer; transition: background-color 400ms ease; } .button:hover { background-color: var(--color-naranja-hover); color: var(--color-blanco); } /* =================================================================== 10. GRID 2 / 4 COLUMNAS =================================================================== */ .grid { display: grid; grid-auto-columns: 1fr; gap: 1rem; /* 16px */ } .grid-2-column { grid-template-columns: 1fr 1fr; column-gap: 0; } .grid-2-column.wide { column-gap: 3.75rem; /* 60px */ } .grid-4-column { grid-template-columns: repeat(4, 1fr); } /* =================================================================== 11. TARJETA DE TEXTO =================================================================== */ .text-card { margin: 5rem 0; /* 80px */ padding: 0 6.25rem; /* 100px */ text-align: left; } .text-card.reduced-margin { margin: 0 0 0.625rem; padding: 0 2.5rem; /* 40px */ } .white-text { color: var(--color-blanco); } .flush-with-top { margin-top: 0; padding-top: 0; } /* =================================================================== 12. NAVBAR Versión sin webflow.js: el menú hamburguesa lo gestiona js/navbar.js añadiendo/quitando la clase .abierto a .nav-menu y .menu-button. =================================================================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; background-color: rgba(15, 23, 35, 0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); color: var(--color-blanco); z-index: 1000; } /* Top nav: grid de 3 columnas (logo centrado, info de contacto a la derecha). Al estar la navbar fija ocupa todo el ancho del viewport, así que sus hijos directos necesitan su propio max-width + padding horizontal para alinearse con el .container del resto de la página. */ .top-nav-container { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; height: var(--top-nav-altura); max-width: var(--contenedor-max); margin: 0 auto; padding: 0 var(--contenedor-padding); column-gap: 1rem; } /* Posicionamiento de los hijos del top-nav (reemplaza los #w-node-* de Webflow) */ .nav-brand { justify-self: center; text-decoration: none; } .top-nav-container > .contact-info-container { justify-self: end; } /* Icono del teléfono a la izquierda del top-nav */ .social-link { display: inline-block; max-width: 100%; margin-right: 0.625rem; transition: opacity 400ms ease, transform 400ms ease; } .social-link:hover { opacity: 0.8; transform: translate(0, -1px); } .bottom-nav-container { display: flex; justify-content: center; align-items: center; max-width: var(--contenedor-max); margin: 0 auto; } .nav-menu { display: flex; padding-bottom: 1rem; } .nav-link { display: flex; align-items: center; margin: 0 0.9375rem; padding: 0; font-family: var(--fuente-base); color: var(--color-blanco); font-size: 1.25rem; /* 20px */ font-weight: 700; text-transform: capitalize; text-decoration: none; } .nav-link:hover, .nav-link.activo { color: var(--color-naranja); } /* ---------- Botón hamburguesa ---------- */ /* 3 rayas blancas. Al añadirle .abierto se animan a una X. */ .menu-button { display: none; position: relative; width: 2.5rem; /* 40px */ height: 2.5rem; padding: 0; background: transparent; border: 0; cursor: pointer; } .menu-button .barra { position: absolute; left: 0.375rem; /* 6px */ right: 0.375rem; height: 0.1875rem; /* 3px */ background-color: var(--color-blanco); border-radius: 0.125rem; transition: transform 250ms ease, opacity 250ms ease, top 250ms ease, bottom 250ms ease; } .menu-button .barra:nth-child(1) { top: 0.6875rem; } /* 11px */ .menu-button .barra:nth-child(2) { top: 50%; transform: translateY(-50%); } .menu-button .barra:nth-child(3) { bottom: 0.6875rem; } /* Estado abierto: las tres barras forman una X */ .menu-button.abierto .barra:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .menu-button.abierto .barra:nth-child(2) { opacity: 0; } .menu-button.abierto .barra:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); } /* =================================================================== 13. INFO DE CONTACTO EN LA NAV =================================================================== */ .contact-info-container { display: flex; flex-direction: column; } .contact-info-container.mobile { display: none; } .contact-link { margin-right: 0.625rem; color: var(--color-crema); font-weight: 400; transition: opacity 200ms ease; text-decoration: none; } .contact-link:hover { opacity: 0.8; color: var(--color-crema); } /* =================================================================== 14. FOOTER =================================================================== */ .footer-content-wrapper, .footer-content-wrapper2, .footer-content-wrapper3, .footer-content-wrapper4, .footer-content-wrapper5 { padding: 3.125rem 0; /* 50px */ background-position: center; background-size: auto, cover; } .footer-content-wrapper { background-image: linear-gradient(180deg, #00000040, #000000), url("../images/manu/hero_beach.webp"); } .footer-content-wrapper2 { background-image: linear-gradient(180deg, #00000040, #000000), url("../images/manu/hero_music.webp"); } .footer-content-wrapper3 { background-image: linear-gradient(180deg, #00000040, #000000), url("../images/manu/hero_mirador5.webp"); } .footer-content-wrapper4 { background-image: linear-gradient(180deg, #00000040, #000000), url("../images/manu/a-Los-JAMEOS-DEL-AGUA.webp"); } .footer-content-wrapper5 { background-image: linear-gradient(180deg, #00000040, #000000), url("../images/manu/timanfaya_diablo.webp"); background-position: top; } .footer-links-wrapper { border-top: 2px solid var(--color-blanco); } .footer-section { border-top: 2px solid var(--color-blanco); } .white-link { display: block; color: var(--color-blanco); text-decoration: none; } .white-link:hover { color: var(--color-titulo); text-decoration: none; } .white-link.inline { display: inline-block; margin-right: 0.625rem; } /* =================================================================== 15. UTILIDADES =================================================================== */ .lista-limpia { list-style: none; margin: 0; padding: 0; } /* =================================================================== 16. RESPONSIVE — TABLET (≤ 991px) En este breakpoint colapsa el navbar a hamburguesa. =================================================================== */ @media (max-width: 991px) { /* En tablet/móvil el .bottom-nav-container queda vacío porque .nav-menu pasa a ser dropdown absoluto. Sólo nos ocupa la altura del top-nav. */ :root { --navbar-total: var(--top-nav-altura-tablet); } .section { padding: var(--seccion-padding-tablet) 0; } .title { font-size: 4.0625rem; /* 65px */ line-height: 4.875rem; /* 78px */ } .title.white { margin-top: 0.625rem; } .top-nav-container { height: var(--top-nav-altura-tablet); } .contact-info-container { display: none; } .contact-info-container.mobile { display: flex; flex-direction: column; padding: 0.625rem 0 0.625rem 0.9375rem; border-top: 1px solid var(--color-texto); } .nav-link { margin-bottom: 0.625rem; } .grid-2-column { column-gap: 0.9375rem; } .text-card { padding: 0 2.5rem; } /* Hamburguesa: nav-menu se vuelve panel desplegable animado */ .menu-button { display: block; justify-self: end; } /* Panel siempre renderizado pero oculto con opacity/visibility para que la transición funcione (display: none no es animable). El truco con visibility + transition-delay evita que los enlaces sean clicables cuando el panel está cerrado. */ .nav-menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 1.25rem 0.3125rem 0.625rem; border-radius: 0.9375rem; background-color: rgba(30, 30, 30, 0.95); z-index: 1000; /* Estado CERRADO: invisible, desplazado hacia arriba */ opacity: 0; visibility: hidden; transform: translateY(-0.625rem); transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms; } .nav-menu.abierto { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 0s; } } /* =================================================================== 17. RESPONSIVE — MÓVIL (≤ 767px) =================================================================== */ @media (max-width: 767px) { h1 { font-size: 2.875rem; /* 46px */ line-height: 3.75rem; /* 60px */ } h2 { font-size: 2.0625rem; /* 33px */ line-height: 2.5rem; } h3 { font-size: 1.75rem; /* 28px */ line-height: 2.3125rem; /* 37px */ } h5 { font-size: 1rem; /* 16px */ line-height: 1.25rem; } .title { font-size: 2.8125rem; /* 45px */ line-height: 3.125rem; /* 50px */ } .title-wrapper { padding: 1.25rem 0; } .grid-4-column { grid-template-columns: 1fr 1fr; } .grid-2-column { grid-template-columns: 1fr; grid-template-rows: auto auto; } .text-card { margin: 1.25rem 0; } .text-card.reduced-margin { margin: 0.3125rem 0; padding: 0; } .quote-paragraph { font-size: 1.125rem; } } /* =================================================================== 18. RESPONSIVE — MÓVIL PEQUEÑO (≤ 479px) =================================================================== */ @media (max-width: 479px) { .section { padding: var(--seccion-padding-movil) 0; } .container { padding: 0 var(--contenedor-padding-movil); } .title { font-size: 2.1875rem; /* 35px */ line-height: 2.5rem; } .title-wrapper { padding: 0.625rem 0; text-align: center; } .top-nav-container { height: var(--top-nav-altura-tablet); grid-template-columns: 0.75fr 1fr 0.75fr; column-gap: 0.3125rem; } .white-link.inline { margin-bottom: 0.3125rem; } } /* =================================================================== ==================================================================== 19. COMPONENTES ADICIONALES (usados por index, exclusive_services, highlights y our_suggestions). Portados de fenix-9d234e.webflow.css. ==================================================================== =================================================================== */ /* ----- 19.1 — Modifier "accent" (fondo naranja) ----- */ .accent { background-color: var(--color-naranja); } /* ----- 19.2 — Divider ----- */ .divider { width: 100%; height: 1px; margin: 1.875rem 0; /* 30px */ background-color: var(--color-borde); } /* ----- 19.3 — Hero principal (home). La imagen de fondo la define manu.css (.hero-section). ----- */ .hero-section { min-height: var(--altura-hero); padding-top: 4.6875rem; /* 75px */ padding-bottom: 4.6875rem; } .hero-content-wrapper { display: flex; max-width: 50rem; /* 800px */ margin: 2.5rem auto 0; /* 40px arriba, auto los lados */ padding: 1.875rem 0; /* 30px */ flex-direction: column; justify-content: flex-start; align-items: center; color: var(--color-blanco); font-size: 1.125rem; /* 18px */ text-align: center; } /* ----- 19.4 — CTA y callout ----- */ .cta-section { display: flex; padding: 3.4375rem 0; /* 55px */ flex-direction: column; justify-content: center; align-items: center; } .callout-block { position: absolute; left: auto; top: auto; right: 0; bottom: 0; z-index: 99; display: flex; width: 9.375rem; /* 150px */ height: 9.375rem; flex-direction: column; justify-content: center; align-items: center; background-color: var(--color-naranja); } /* ----- 19.5 — Imágenes ----- */ .circle-image { width: 8.75rem; /* 140px */ height: 8.75rem; border-radius: 50%; object-fit: cover; } .small-circle-image { width: 4.0625rem; /* 65px */ height: 4.0625rem; border-radius: 50%; object-fit: cover; } .full-image { width: 100%; height: 100%; max-height: 42.5rem; /* 680px */ object-fit: cover; } .full-image-container { position: relative; display: flex; overflow: hidden; max-height: 42.5rem; flex-direction: column; justify-content: center; align-items: center; } .square-image { min-height: 5.9375rem; /* 95px */ min-width: 5.9375rem; object-fit: cover; } .cover-image { object-fit: cover; } .landscape-image { max-width: 90%; object-fit: cover; } .block-image { height: 80%; max-width: 80%; object-fit: cover; } /* ----- 19.6 — Bloques de contenido (con o sin borde) ----- */ .content-block { display: flex; padding: 0.8125rem 0; /* 13px */ flex-direction: column; align-items: center; text-align: center; } .content-block.width-65 { max-width: 4.0625rem; /* 65px */ padding: 0; } /* ----- 19.7 — Productos (listados de tours/precios) ----- */ .product-grid { column-gap: 1.25rem; /* 20px */ row-gap: 3.125rem; /* 50px */ } .product-wrapper { display: grid; grid-auto-columns: 1fr; column-gap: 1rem; row-gap: 1rem; grid-template-columns: 0.25fr 1fr; grid-template-rows: auto; border-bottom: 1px dashed var(--color-borde); } .product-wrapper:active { background-color: var(--color-crema); } /* Alternar disposición: las cards pares colocan la imagen a la derecha */ .product-wrapper:nth-child(even) { grid-template-columns: 1fr 0.25fr; } .product-wrapper:nth-child(even) > img { grid-column: 2; grid-row: 1; } .product-wrapper:nth-child(even) > div { grid-column: 1; grid-row: 1; text-align: right; } .product-title { margin: 0; } .product-subtitle { margin-top: 0; color: var(--color-naranja); } .product-description { margin-top: 0.625rem; color: var(--color-texto); font-size: 1rem; font-weight: 400; } .sale-content-wrapper { display: flex; min-height: 30.625rem; /* 490px */ margin: 0 2.5rem 0.625rem; /* 0 40px 10px */ padding: 0 3.75rem 1.25rem; /* 0 60px 20px */ flex-direction: column; justify-content: center; align-items: center; background-color: var(--color-crema); text-align: center; } /* ----- 19.8 — Estadísticas ----- */ .stats-wrapper { display: flex; height: 18.75rem; /* 300px */ justify-content: center; align-items: center; } .statistic { margin: 0 1.25rem; text-align: center; } .salmon-label { margin-top: 0.3125rem; color: var(--color-blanco); } /* ----- 19.9 — Doble imagen y dibujos decorativos ----- */ .double-image-wrapper { position: relative; width: 100%; height: 80vh; } .bottom-right { position: absolute; left: auto; top: auto; right: 0; bottom: 0; } .bottom-left { position: absolute; left: 0; top: auto; right: auto; bottom: 0; } .top-right { position: absolute; left: auto; top: 0; right: 0; bottom: auto; } .drawing-left { position: absolute; left: 0; top: 0; right: auto; bottom: auto; max-height: 12.5rem; /* 200px */ } .drawing-right { position: absolute; left: auto; top: 0; right: 0; bottom: auto; max-height: 12.5rem; } /* ----- 19.10 — Grids adicionales ----- */ .grid-1-third { display: grid; grid-auto-columns: 1fr; column-gap: 3.75rem; /* 60px */ row-gap: 1rem; grid-template-columns: 0.5fr 1fr; grid-template-rows: auto; } .grid-3-column { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; } .quality-control-grid { display: grid; justify-items: start; align-items: start; grid-auto-columns: 1fr; column-gap: 0.3125rem; row-gap: 1rem; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto; } /* ----- 19.11 — Modifiers extra ----- */ .no-margins { margin-top: 0; margin-bottom: 0; } .offset-section { position: relative; padding-bottom: 3.4375rem; /* 55px */ } .paragraph { color: var(--color-texto); } /* ----- 19.12 — Utilidades de alineación dentro de grids/flex ---------- Reemplazan los #w-node-* IDs auto-generados por Webflow. Los IDs en el HTML se conservan (los usa el JS de Manu como ancla); estas clases controlan la presentación de forma reutilizable. ----------------------------------------------------------------- */ .alinear-centro { align-self: center; } .alinear-inicio { align-self: start; } .alinear-fin { align-self: end; } .justificar-centro { justify-self: center; } /* =================================================================== 20. RESPONSIVE DE LOS COMPONENTES ADICIONALES =================================================================== */ @media (max-width: 991px) { .grid-1-third { grid-template-columns: 1fr; } .stats-wrapper { height: 15.625rem; /* 250px */ } .product-grid { grid-template-columns: 1fr; } .sale-content-wrapper { margin-right: 1.25rem; margin-left: 1.25rem; padding-right: 2.5rem; padding-left: 2.5rem; } .double-image-wrapper { height: 60vh; min-height: 50vh; } .cta-section { padding: 2.5rem 0; } /* Reordenar al final del grid en tablet (≤991px) */ .al-final-en-tablet { order: 9999; } } @media (max-width: 767px) { .section.relative { padding: 2.5rem 0; } .hero-section { padding-top: 2.5rem; } .hero-content-wrapper { padding: 1.25rem 0; font-size: 1rem; } .circle-image { width: 6.875rem; /* 110px */ height: 6.875rem; } .sale-content-wrapper { min-height: 23.75rem; /* 380px */ } .drawing-left, .drawing-right { width: 9.375rem; /* 150px */ } /* Reordenar al final del grid en móvil (≤767px) */ .al-final-en-movil { order: 9999; } } @media (max-width: 479px) { .circle-image { width: 6.25rem; /* 100px */ height: 6.25rem; } .stats-wrapper { height: 11.25rem; /* 180px */ } .square-image { min-height: 5rem; /* 80px */ min-width: 5rem; } .sale-content-wrapper { margin-right: 0; margin-left: 0; padding-right: 1.25rem; padding-left: 1.25rem; } .drawing-left, .drawing-right { width: 3.75rem; /* 60px */ } .callout-block { width: 6.25rem; /* 100px */ height: 6.25rem; } .grid-3-column { column-gap: 0.625rem; } .offset-section { padding-bottom: 2.25rem; /* 36px */ } }