/* ===================================================================== manahmana — responsive.css Breakpoints y comportamiento móvil (incl. menú off-canvas). Mobile-first sobre style.css: aquí van los ajustes por ancho. ===================================================================== */ /* --------------------------------------------------------------------- Tablet grande / portátil pequeño (≤ 1024px) --------------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --space-3xl: 5.5rem; } .hero__inner { gap: var(--space-xl); } } /* --------------------------------------------------------------------- Tablet / móvil (≤ 860px) — se activa el menú hamburguesa --------------------------------------------------------------------- */ @media (max-width: 860px) { /* Somos facilitadores: sin sticky en móvil → cards apiladas en vertical, imagen arriba y texto debajo (evita el stacking en pantallas pequeñas). */ .facil-card { position: static; top: auto; grid-template-columns: 1fr; min-height: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07); } .facil-card__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; } /* Topbar: compacta, oculta el contacto largo */ .topbar__contact { display: none; } .topbar__inner { justify-content: flex-end; } /* Mostrar hamburguesa */ .site-header__burger { display: flex; } /* Navegación → panel lateral deslizante */ .site-nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px); background: var(--color-bg); box-shadow: -8px 0 40px var(--overlay-15); transform: translateX(100%); transition: transform var(--t-med) var(--ease); padding: calc(88px + var(--space-md)) var(--space-lg) var(--space-lg); z-index: 90; overflow-y: auto; } .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-md); } .site-nav__item { width: 100%; } .site-nav__link { font-size: var(--fs-h4); font-weight: var(--fw-light); } .site-nav__link > .chevron { display: none; } /* Submenús: estáticos y visibles dentro del panel */ .submenu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; margin-top: var(--space-xs); padding: 0 0 0 var(--space-sm); border: 0; box-shadow: none; background: none; } .submenu__link { font-size: var(--fs-body); padding: 0.4rem 0; } /* Estado abierto (lo activa script.js sobre ) */ body.nav-open { overflow: hidden; } body.nav-open .site-nav { transform: translateX(0); } /* Overlay de fondo */ body.nav-open::after { content: ""; position: fixed; inset: 0; background: var(--overlay-15); z-index: 80; } /* Animación de la hamburguesa → aspa */ .site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-header__burger { z-index: 100; } /* Hero → una columna, imagen debajo */ .hero__inner { grid-template-columns: 1fr; gap: var(--space-lg); padding-block: var(--space-2xl); min-height: 0; } .hero__content { max-width: none; } .hero__media { order: -1; } .hero__scroll { right: 1rem; bottom: 1rem; width: 56px; height: 56px; } /* Servicios → tarjetas apiladas */ .servicios__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } /* Footer: marca arriba (2 col) + columnas/CTAs debajo */ .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-xl); } .site-footer__brand { grid-column: 1 / -1; } .site-footer__ctas { align-items: flex-start; } .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .site-footer__social { margin-left: 0; } /* en columna no debe empujarse a la derecha */ } /* --------------------------------------------------------------------- Testimonio: por debajo de 1024px la forma webp no da margen suficiente, así que cae a un panel lavanda sólido (legible, sin desbordes). --------------------------------------------------------------------- */ @media (max-width: 1024px) { .testimonio__card { position: static; container-type: normal; aspect-ratio: auto; background: var(--color-lavender); border-radius: var(--radius-md); } .testimonio__inner { position: static; inset: auto; padding: clamp(2rem, 5vw, 3.5rem); } .testimonio__quote { position: static; transform: none; display: grid; place-items: center; width: 56px; height: 56px; background: var(--color-accent); border-radius: 50%; margin-bottom: var(--space-md); } .testimonio__quote img { width: 24px; height: auto; } /* En móvil la separación cita↔autor la da el margin-top del foot; anulamos el margin-bottom del texto para que no se sumen (≈95px). */ .testimonio__text { font-size: clamp(1.125rem, 2.6vw, 1.5rem); margin-bottom: 0; } .testimonio__foot { margin-top: var(--space-xl); flex-direction: column; align-items: flex-start; gap: var(--space-md); } .testimonio__name { font-size: var(--fs-body); } .testimonio__role { font-size: var(--fs-body-s); } } /* --------------------------------------------------------------------- CTA Diagnóstico: por debajo de 768px la forma webp queda demasiado baja, así que cae a un recuadro lima sólido (el texto entra siempre). --------------------------------------------------------------------- */ @media (max-width: 768px) { .cta-diag__banner { container-type: normal; aspect-ratio: auto; background: var(--color-accent); border-radius: var(--radius-md); } .cta-diag__content { position: static; padding: var(--space-2xl) var(--space-lg); } .cta-diag__title { font-size: clamp(1.5rem, 5.5vw, 2.125rem); margin-bottom: var(--space-sm); } .cta-diag__text { font-size: clamp(1rem, 3.6vw, 1.25rem); max-width: 36ch; margin-bottom: var(--space-lg); } .cta-diag__cta { font-size: var(--fs-body); padding: 0.75rem 1.5rem; } /* Manahbox: tarjeta a ancho completo; sin parallax (móvil lo rinde mal) */ .manahbox { background-attachment: scroll; } .manahbox__card { max-width: none; } .manahbox__title { font-size: clamp(1.75rem, 7vw, 2.25rem); } } /* --------------------------------------------------------------------- Móvil pequeño (≤ 480px) --------------------------------------------------------------------- */ @media (max-width: 480px) { :root { --gutter: 1.125rem; --space-3xl: 4rem; } .topbar__aside { gap: var(--space-xs); } .hero__title { font-size: clamp(2rem, 9vw, 2.5rem); } /* Footer: todo en una columna */ .site-footer__top { grid-template-columns: 1fr; } .site-footer__ctas .btn { width: 100%; } } /* --------------------------------------------------------------------- Ajustes de Páginas Internas por Breakpoint --------------------------------------------------------------------- */ @media (max-width: 1024px) { .profile-detail__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .profile-detail__media { max-width: 480px; margin-inline: auto; } .michelin-banner { grid-template-columns: 1fr; } .michelin-banner__media { min-height: 250px; } } @media (max-width: 860px) { .casos-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: repeat(2, 1fr); } .valores-grid { grid-template-columns: 1fr; } .pilares-grid { grid-template-columns: 1fr; } .case-grid { grid-template-columns: 1fr; gap: var(--space-lg); } /* Hero del caso: la forma con muesca no da margen → panel teal sólido, contenido en flujo normal con tamaños fijos (no cqw). */ .caso-hero { aspect-ratio: auto; background: var(--color-deep); border-radius: var(--radius-lg); container-type: normal; padding: clamp(2rem, 8vw, 3rem) clamp(1.5rem, 6vw, 2.5rem); } .caso-hero__eyebrow { font-size: 1rem; margin-bottom: 1.1rem; } .caso-hero__badge { font-size: clamp(1.75rem, 7vw, 2.25rem); padding: 0.4rem 1.2rem; border-radius: 10px; margin-bottom: 1.5rem; } .caso-hero__lead { font-size: 0.95rem; max-width: 100%; } /* Secciones numeradas: stack, foto bajo el texto. */ .caso-section__grid { grid-template-columns: 1fr; gap: var(--space-lg); } .caso-section__body p { max-width: none; } .caso-media { aspect-ratio: 4 / 3; max-width: 460px; margin-inline: auto; width: 100%; } .videos-grid { grid-template-columns: 1fr; } /* Testimonio: una columna, cita arriba y vídeo debajo. */ .caso-testimonio { grid-template-columns: 1fr; gap: var(--space-lg); } /* Valores: una sola columna. */ .valores-grid { grid-template-columns: 1fr; row-gap: var(--space-xl); } .valor-card__title { font-size: 2rem; } /* Metodología: tarjetas en una columna. */ .metod-grid { grid-template-columns: 1fr; gap: var(--space-2xl); } .metod-card__title { font-size: 2rem; } .form-row { grid-template-columns: 1fr; gap: 0; } .tab-panel__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } .videos-grid { grid-template-columns: 1fr; } .premium-form { padding: var(--space-lg) var(--space-sm); } .tabs-nav { flex-direction: column; align-items: stretch; gap: 0.25rem; } .tabs-btn { padding: 0.75rem; border-bottom: none; border-left: 3px solid transparent; text-align: left; } .tabs-btn.is-active { border-left-color: var(--color-accent); } .profile-detail__name { font-size: var(--fs-h2); } .profile-detail__role { font-size: 20px; } } /* --------------------------------------------------------------------- Páginas de servicio (Cultura / Estrategia / Equipos) --------------------------------------------------------------------- */ @media (max-width: 1024px) { .que-hacemos__grid { grid-template-columns: 1fr; gap: var(--space-md); } .que-hacemos__text { font-size: 1.375rem; line-height: 1.5; } /* 30px es excesivo apilado */ .scasos { grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-xl); } .scaso__cond { font-size: 2rem; } /* 32px en tablet (40px solo en escritorio) */ } @media (max-width: 860px) { /* Casos de éxito: la forma con muesca no da margen → panel teal sólido, contenido en flujo normal y tamaños fijos (no cqw). La forma se quita del stage y cada slide se vuelve el panel; el grid-stack mantiene el fade. */ .ce-stage { aspect-ratio: auto; background: none; container-type: normal; } .ce-slide { background: var(--color-deep); border-radius: var(--radius-lg); padding: clamp(1.75rem, 6vw, 2.75rem); display: flex; flex-direction: column; gap: var(--space-md); } .ce-card__head { position: static; gap: var(--space-xs); } .ce-card__badge { font-size: 1.5rem; padding: 0.3rem 0.6rem; } .ce-card__kicker { font-size: 1.5rem; } .ce-card__text { position: static; right: auto; font-size: var(--fs-body); } .ce-card__cta { position: static; align-self: flex-start; } } @media (max-width: 768px) { /* En táctil el background-attachment: fixed va mal → scroll normal */ .servicios-parallax { background-attachment: scroll; } .valores-parallax { height: clamp(280px, 60vw, 420px); } .valores-parallax::before, .valores-parallax::after { background-attachment: scroll; } .metod-parallax { background-attachment: scroll; } } @media (max-width: 768px) { /* Diagnóstico: preguntas y campos a 1 columna */ .diag-q__options { grid-template-columns: 1fr; } .diag-fields { grid-template-columns: 1fr; } } @media (max-width: 860px) { /* Manahbox "¿Qué es?": tarjetas a 1 columna */ .mb-cards { grid-template-columns: 1fr; } /* Conocimientos: 2 columnas */ .conoc-grid { grid-template-columns: repeat(2, 1fr); } /* Manahbox "¿Cómo funcionan?": texto+foto y pasos a 1 columna */ .mb-funciona__top { grid-template-columns: 1fr; gap: var(--space-xl); } .mb-funciona__media { order: -1; } .mb-steps { grid-template-columns: 1fr; gap: var(--space-lg); } } @media (max-width: 600px) { .scasos { grid-template-columns: 1fr; } .conoc-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- Accesibilidad: respetar reduce-motion --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }