/* responsive.css Media queries para tablet, notebook y celular. Se importa AL FINAL del a propósito, para que sus reglas tengan prioridad de cascada sobre style.css en el mismo nivel de especificidad. Pendiente: se completa junto con el Paso 3 (CSS), una vez definido el layout base en desktop. */ /* Header: en mobile ocultamos la nav de texto (logo + CTA quedan). El menú hamburguesa con su toggle se implementa en el Paso 5 (JS). */ @media (max-width: 760px) { .site-nav { display: none; } .header-panel-link { display: none; } } /* Pantallas chicas (celular): el padding fijo de .container y .section pensado para desktop deja poco espacio útil de contenido. Lo reducimos sin cambiar nada del layout, solo el "aire" a los costados y arriba/abajo. */ @media (max-width: 480px) { .container { padding-inline: var(--space-2); } .section, .hero { padding-block: var(--space-6); } /* Con menos aire lateral, el logo + botón del header quedan muy juntos */ .site-header__inner { gap: var(--space-2); } .site-header__logo span { font-size: 1.05rem; } } /* Split-layout (Hero, Sobre Vitabu): de 2 columnas a apilado */ @media (max-width: 860px) { .split-layout { grid-template-columns: 1fr; text-align: center; } .hero__subtitle, .sobre-vitabu__text { margin-inline: auto; } .hero__actions { justify-content: center; } .image-frame { max-width: 320px; margin-inline: auto; } /* Solo el Hero necesita este empujón: su visual va segundo en el DOM pero tiene que verse primero en mobile. Sobre Vitabu no lo necesita porque su visual ya está primero en el HTML. */ .hero .visual-block { order: -1; margin-bottom: var(--space-4); } /* FAQ: el acordeón y el mini-formulario se leen mejor alineados a la izquierda, a diferencia de Hero/Sobre Vitabu que sí quedan centrados. */ .faq__layout { text-align: left; } }