/* ============================================ MOBILE-FIRST: los estilos base manejan <720px. Este archivo contiene los overrides de tablet (≥720px) y desktop (≥1024px). El límite de tablet se bajó de 768 → 720 para que los viewports reales de tablet de alrededor de 744 (la composición de tablet de Figma está diseñada a ese tamaño) reciban las reglas de tablet en vez de las de mobile. ============================================ */ /* ============================================ MOBILE (por defecto, <720px) - Navbar minimal: brand + CTA solamente - Enlaces de navegación ocultos (sin menú hamburguesa) - Los pills vuelven en desktop (≥1024) ============================================ */ @media (max-width: 720px) { /* NAVBAR — MOBILE El efecto vidrio ahora se mantiene en mobile (heredado del bloque @supports de style.css). El CTA flotante se movió al nivel para escapar del containing block del backdrop-filter, por lo que la trampa ya no existe. */ .navbar__links { display: none; } .navbar__inner { padding: var(--space-24); } .navbar__logo { width: 40px; height: 40px; } .navbar__name { color: var(--brand-dark); } /* Oculta el CTA del navbar en mobile — el gemini flotante toma su lugar como acción persistente en mobile. */ .navbar .btn-cta { display: none; } /* CTA FLOTANTE — MOBILE */ .btn-cta--floating { display: inline-flex; position: fixed; bottom: calc(var(--space-48) + env(safe-area-inset-bottom, 0px)); right: var(--space-16); z-index: 1000; } /* HERO — MOBILE*/ .hero { padding-bottom: 0; } .hero__container { gap: var(--space-64); } .hero__row { gap: var(--space-64); } .hero__content { gap: var(--space-56); } .hero__copy { gap: var(--space-32); } .hero__eyebrow { margin-bottom: var(--space-24); } .hero__eyebrow span { font-size: var(--font-size-xs); } .hero__heading { font-size: var(--font-size-2xl); letter-spacing: 0.031em; } .hero__image { height: 300px; aspect-ratio: auto; } /* CTA del hero */ .hero .btn-primary { padding: var(--space-12) var(--space-24); border-radius: 32px; box-shadow: var(--shadow-button); } .stat__label { font-size: var(--font-size-xs); } /* DIVISOR — MOBILE */ .divider { margin-block: 104px; } /* SOBRE MÍ — MOBILE */ .about-me__container { gap: var(--space-64); } .about-me__content { gap: var(--space-64); } .about-me__eyebrow span { font-size: var(--font-size-xs); } .about-me__name { font-size: var(--font-size-display-xs); } .about-me__subtitle { font-size: var(--font-size-xs); } /* MODALIDADES — MOBILE */ .modes__heading { font-size: var(--font-size-display-xs); } .modes__cards { gap: 31px; } .modes-card__title { font-size: 20px; text-align: left; } .modes-card__description { font-size: var(--font-size-md); } /* RECURSOS — MOBILE */ .resources__heading { font-size: var(--font-size-display-xs); } .resources__subtitle { font-size: var(--font-size-lg); } /* El ancho de la card deja un peek deliberado de 40px de la siguiente: contenedor − peek − gap (16). Capado al ancho de card de tablet/desktop de Figma (347) en viewports de mobile más anchos para que las cards no crezcan desproporcionadamente. */ .resources__cards .resource-card { flex: 0 0 calc(100% - 56px); max-width: 347px; } /* Las cards de mobile son más angostas que los 347 de tablet/desktop; bajamos el título a 16 para que se mantenga en 1 línea en el rango mainstream de 380+. Por debajo de 380, puede seguir wrappeando (aceptable). */ .resource-card__title { font-size: var(--font-size-md); } /* TESTIMONIOS — MOBILE */ .testimonials__heading { font-size: var(--font-size-display-xs); } .testimonials__subtitle { display: none; } .testimonials__cards { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--space-32); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: none; padding-bottom: var(--space-8); } .testimonials__cards::-webkit-scrollbar { display: none; } /* El ancho de la card deja un peek de 40px de la siguiente: contenedor − peek − gap (32). Capado al ancho de card de desktop de Figma (361) en viewports de mobile más anchos. */ .testimonial-card { flex: 0 0 calc(100% - 72px); max-width: 361px; scroll-snap-align: start; } /* CTA FINAL (START) — MOBILE */ .start { padding: 0; } .start__container { gap: var(--space-72); } .start__contact { gap: var(--space-48); border-radius: 0; } .start__heading { font-size: var(--font-size-display-sm); font-weight: var(--font-weight-semibold); } /* En mobile el
partía la frase en dos fragmentos que a su vez wrapeaban en 4 líneas desparejas. Lo ocultamos y dejamos que text-wrap: balance arme un bloque más uniforme; max-width en ch evita que el bloque ocupe todo el ancho en viewports mobile más amplios. */ .start__description br { display: none; } .start__description { max-width: 32ch; margin-inline: auto; text-wrap: balance; } .start__cards { gap: var(--space-32); padding: 0 var(--space-16); } .info-card { padding: var(--space-32); } .btn-cream { padding: var(--space-12) var(--space-8); } /* PIE DE PÁGINA — MOBILE */ .footer { padding: var(--space-56) var(--space-16) var(--space-128); } .footer__container { gap: var(--space-48); } @media (max-width: 360px) { .navbar__title { display: none; } } } /* TABLET (≥720px) */ /* ============================================ TABLET (≥720px) — overrides de todas las secciones ============================================ */ @media (min-width: 720px) { /* NAVBAR */ .navbar__inner { padding: var(--space-24) var(--space-48); } .navbar__links { display: none; } /* HERO */ .hero { padding: var(--space-80) var(--section-pad-x-tablet) var(--space-64); } .hero__container { gap: var(--space-64); } .hero__row { gap: var(--space-64); } .hero__content { gap: var(--space-56); } .hero__copy { gap: var(--space-32); } .hero__eyebrow { display: none; } .hero__heading { font-size: var(--font-size-display-xl); } .hero__heading-break { display: none; } .hero__subtitle { font-size: var(--font-size-lg); } .btn-primary { font-size: var(--font-size-xl); } .hero .btn-primary { padding: var(--space-12) var(--space-24); border-radius: 32px; box-shadow: var(--shadow-button); font-size: var(--font-size-xl); } .hero__image { height: 445px; aspect-ratio: auto; } .hero__stats { justify-content: space-between; flex-wrap: nowrap; gap: var(--space-40); } .hero__stats .stat { flex: 0 0 auto; } .divider { width: calc(100% - 2 * var(--section-pad-x-tablet)); } .about-me { padding: 0 var(--section-pad-x-tablet); } .about-me__container { gap: var(--space-64); } .about-me__content { gap: var(--space-64); } .about-me__name { font-size: var(--font-size-display-lg); } .about-me__paragraph, .feature-item__text { font-size: var(--font-size-lg); } .btn-outline { font-size: var(--font-size-xl); } .about-me__image { aspect-ratio: auto; height: 648px; } .modes { padding: 0 var(--section-pad-x-tablet); } .modes__container { gap: var(--space-64); } .modes__heading { font-size: var(--font-size-display-lg); } .modes__subtitle { font-size: var(--font-size-lg); } .modes__cards { gap: 32px; } .modes-card { padding: var(--space-40); gap: var(--space-40); } .modes-card__title { font-size: var(--font-size-display-sm); } .modes-card__description { font-size: var(--font-size-md); } .modes-card__features .feature-item__text { font-size: var(--font-size-lg); } .btn-cream { font-size: var(--font-size-xl); } .resources { padding: 0 var(--section-pad-x-tablet); } .resources__container { gap: var(--space-64); } .resources__heading { font-size: var(--font-size-display-lg); } .resources__subtitle { font-size: var(--font-size-lg); } .resources__cards { gap: var(--space-40); } .resources__cards .resource-card { flex-basis: 347px; } .testimonials { padding: 0 var(--section-pad-x-tablet); } .testimonials__container { gap: var(--space-64); } .testimonials__heading { font-size: var(--font-size-display-lg); } .testimonials__subtitle { display: none; } .testimonials__cards { grid-template-columns: 1fr; gap: var(--space-32); } .start { padding: 0; } .start__container { gap: var(--space-72); } .start__contact { gap: var(--space-48); border-radius: 0; } .start__heading { font-size: var(--font-size-display-lg); } .start__description { font-size: var(--font-size-lg); } .start__cards { grid-template-columns: 1fr; gap: var(--space-32); padding: 0 var(--space-48); } .info-card { padding: var(--space-32); } .footer { padding: var(--space-56) var(--space-48); } .footer__container { gap: var(--space-48); } .footer__top { flex-direction: column; gap: var(--space-32); } } /* ============================================ DESKTOP (≥1024px) — overrides de todas las secciones ============================================ */ @media (min-width: 1024px) { /* NAVBAR */ .navbar__inner { padding: var(--navbar-padding-y-desktop) var(--section-pad-x-desktop); } .navbar__links { display: flex; flex-direction: row; gap: var(--space-8); } /* HERO */ .hero { padding: var(--space-64) var(--section-pad-x-desktop); } .hero__row { flex-direction: row; align-items: center; gap: 119px; } .hero__content { flex: 1 1 0; align-self: stretch; justify-content: space-between; gap: var(--space-32); } .hero__heading { font-size: var(--font-size-3xl); max-width: 450px; } .hero__subtitle { font-size: var(--font-size-lg); } .btn-primary { font-size: var(--font-size-xl); } .hero__image { flex: 0 0 auto; width: 548px; height: 443px; aspect-ratio: auto; } .hero__stats { gap: var(--space-40); } .stat { flex: 0 0 auto; min-width: 144px; } .stat__number { font-size: var(--font-size-2xl); } .hero__copy { gap: var(--space-24); } .hero__eyebrow { display: flex; } .hero .btn-primary { padding: var(--space-12); border-radius: var(--radius-pill); box-shadow: none; } .hero__stats { justify-content: flex-start; flex-wrap: wrap; } .divider { width: calc(100% - 2 * var(--section-pad-x-desktop)); } .about-me { padding: 0 var(--section-pad-x-desktop); } .about-me__container { flex-direction: row; align-items: center; gap: var(--space-64); } .about-me__content { flex: 1 1 0; align-self: stretch; gap: var(--space-64); } .about-me__name { font-size: var(--font-size-display-lg); } .about-me__paragraph, .feature-item__text { font-size: var(--font-size-lg); } .btn-outline { font-size: var(--font-size-xl); } .about-me__media { flex: 0 0 auto; width: 548px; height: 548px; } .about-me__image { height: 100%; aspect-ratio: auto; } .modes { padding: 0 var(--section-pad-x-desktop); } .modes__heading { font-size: var(--font-size-display-lg); } .modes__cards { flex-direction: row; align-items: center; gap: var(--space-24); } .modes-card { flex: 0 0 548px; width: 548px; max-width: 548px; padding: var(--space-40); gap: var(--space-40); } .modes-card__title { font-size: var(--font-size-display-sm); } .modes-card__features .feature-item__text { font-size: var(--font-size-lg); } .btn-cream { font-size: var(--font-size-xl); } .resources { padding: 0 var(--section-pad-x-desktop); } .resources__heading { font-size: var(--font-size-display-lg); } .resources__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40); overflow: visible; scroll-snap-type: none; touch-action: auto; padding-bottom: 0; } .resources__cards .resource-card { min-width: 0; } .testimonials { padding: 0 var(--section-pad-x-desktop); } .testimonials__heading { font-size: var(--font-size-display-lg); } .testimonials__subtitle { display: block; } .testimonials__cards { grid-template-columns: repeat(2, 1fr); } .start { padding: 0 var(--section-pad-x-desktop); } .start__contact { border-radius: var(--radius-lg); } .start__heading { font-size: var(--font-size-display-lg); } /* Figma 2440:1415 — botón fijo de 336×56. La altura computada por defecto es ~51 (padding 12 + 20×1.366 lh); este lock-in restaura el ritmo exacto de Figma. */ .start__contact .btn-cream { min-height: 56px; } .start__cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-80); padding: 0; } .footer { padding: var(--space-56) var(--section-pad-x-desktop); } .footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--space-24); } }