/* =========================================================================== Ajustes SOLO de la home nueva y de /agendado (las dos llevan ). Vive dentro de borrador/ a propósito: no toca ninguna página publicada y viaja con los borradores el día que se publiquen. =========================================================================== */ /* En celular las etiquetas chicas del sitio (9,6 y 10 px) quedan por debajo de lo que se lee cómodo con el brazo extendido. Acá suben a ~11,5 px. */ @media (max-width: 720px) { .llamada .badge, .llamada .eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; } /* Menos aire muerto entre bloques: en una pantalla de 780 px de alto, 64 px arriba y abajo de cada sección eran un scroll entero de nada. */ .llamada .section { padding-block: 48px; } .llamada .section-head { margin-bottom: 28px; } .llamada .paso { padding: 16px; gap: 14px; grid-template-columns: 36px minmax(0, 1fr); } .llamada .paso__num { width: 36px; height: 36px; font-size: 1.05rem; } .llamada .paso-titulo { margin-top: 40px; } .llamada .pie { padding-block: 40px; } } /* LOS 5 PASOS, para leer de un vistazo: sin tarjetas (cinco cajas iguales no se escanean, se leen), número dorado lleno que guía el ojo por la izquierda, título grande y una sola línea de apoyo con la palabra clave en negrita. */ .llamada .pasos { gap: 0; max-width: 560px; margin-inline: auto; } .llamada .paso { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 4px; border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line-soft); } .llamada .paso:last-child { border-bottom: 0; } .llamada .paso__num { width: 44px; height: 44px; background: var(--gold); border: 0; color: var(--bg); font-size: 1.3rem; font-weight: 700; } .llamada .paso h3 { font-size: 1.18rem; line-height: 1.25; color: var(--text); } .llamada .paso p { margin-top: 3px; font-size: 0.95rem; line-height: 1.45; color: var(--muted-2); } .llamada .paso p b { color: var(--gold-soft); font-weight: 600; } @media (max-width: 720px) { .llamada .paso { padding: 16px 0; gap: 14px; grid-template-columns: 40px minmax(0, 1fr); } .llamada .paso__num { width: 40px; height: 40px; font-size: 1.2rem; } } /* HERO DE LA HOME · ritmo y cortes de renglón controlados */ .llamada .home-hero { padding-top: clamp(36px, 6vw, 72px); } .llamada .home-hero .badge { margin-bottom: 0; } .llamada .home-hero h1 { margin-top: clamp(20px, 3vw, 30px); max-width: none; /* El tamaño sale del ancho: el renglón más largo ("Comisioná 5 cifras al mes") tiene que entrar entero también en un celular de 360 px. */ font-size: clamp(1.6rem, 7.1vw, 3.6rem); line-height: 1.12; text-wrap: initial; } /* En escritorio los dos renglones son fijos; en celular el titular vuelve a fluir (si no, "volviéndote un Closer Unicornio" no entra en 360 px) pero "Closer Unicornio" nunca se parte. */ .llamada .h1__l { display: block; white-space: nowrap; } .llamada .h1__fijo { white-space: nowrap; } @media (max-width: 720px) { .llamada .home-hero h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); text-wrap: balance; } .llamada .h1__l { display: inline; white-space: normal; } } .llamada .hero__sub--tres { margin-top: clamp(18px, 2.6vw, 26px); max-width: 48ch; } .llamada .hero__sub--tres span { white-space: nowrap; } .llamada .home-hero .paso-titulo { margin-top: clamp(36px, 5vw, 56px); } @media (max-width: 720px) { .llamada .home-hero .paso-titulo { margin-top: 34px; gap: 10px; font-size: 1.3rem; } } /* El video de la home va sin marco: sin borde, sin fondo propio y sin sombra, directo sobre el violeta, igual que el calendario. Solo conserva las esquinas apenas redondeadas del propio video. */ .llamada .video--home { border: 0; background: transparent; box-shadow: none; border-radius: 12px; } .llamada .video--home .video__ph b { font-size: 1rem; font-weight: 400; color: var(--muted-2); } /* Fila de perfiles de Instagram en la home */ .llamada .equipos .section-head { margin-bottom: 0; } .llamada .equipos .igrow { margin-top: clamp(24px, 3.4vw, 36px); } @media (max-width: 720px) { /* En celular una captura ocupa casi toda la pantalla y asoma la siguiente: se entiende de un vistazo que la fila sigue. */ .llamada .equipos .igrow img { width: min(78vw, 300px); } } /* Botón del hero, debajo del video */ .llamada .home-hero .hero__cta { margin-top: clamp(24px, 3.4vw, 34px); } .llamada .home-hero .video--home { margin-top: clamp(28px, 4vw, 44px); } .llamada .agenda .section-head { margin-bottom: clamp(20px, 3vw, 30px); } /* Al bajar con el botón, que el título del calendario no quede pegado arriba */ .llamada .agenda .cal--suelto { scroll-margin-top: 110px; } /* =========================================================================== AIRE ENTRE BLOQUES (home y /agendado) Cada sección traía hasta 112 px arriba y 112 abajo: entre dos bloques quedaban 224 px de nada, que en pantalla se leían como huecos. Ahora el salto entre secciones queda en ~120 px en escritorio y ~80 en celular: se nota el cambio de bloque sin que parezca que falta algo. =========================================================================== */ .llamada .section { padding-block: clamp(40px, 5vw, 60px); } .llamada .section-head { margin-bottom: clamp(24px, 3.4vw, 40px); } .llamada .home-hero { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(36px, 4.5vw, 52px); } .llamada .agendado-hero { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 44px); } @media (max-width: 720px) { .llamada .section { padding-block: 40px; } .llamada .section-head { margin-bottom: 22px; } } /* El "trabado" del botón Agendar Sesión: el scroll llegaba bien al calendario, pero cuando Calendly terminaba de cargar y crecía (720 → ~1070 px), el anclaje de scroll de Chrome corría la página ~280 px para abajo y dejaba a la persona en el medio del calendario, con el título fuera de pantalla. Todo lo de arriba tiene alto fijo (imágenes con aspect-ratio), así que el anclaje no hace falta en estas páginas. */ body.llamada { overflow-anchor: none; } /* Los dos botones "Agendar Sesión" iguales: en celular el sitio estira los botones de .cta-row a todo el ancho, y el del hero no. Mismo tamaño en los dos. */ .llamada .cta-row { margin-top: clamp(28px, 4vw, 40px); } .llamada .cta-row .btn { width: auto; } .llamada [data-scroll="#agenda"].btn { padding: 16px 34px; font-size: 1.05rem; min-width: 0; }