/* ========================================================================== Cellphone Etiquette — estilos Rediseño 2026: paleta rosa / violeta / coral sobre crema, tipografía Fredoka (títulos y botones) + Inter (cuerpo), tarjetas con borde y sombra "sticker", ilustraciones planas a color. ========================================================================== */ :root { /* Paleta principal */ --pink: #ff8ec9; --pink-deep: #ef6bb0; --pink-soft: #ffe8f5; --violet: #6a67e0; --violet-deep: #4d49c6; --violet-ink: #241a52; --violet-soft: #ecebfd; --coral: #ff6a45; --coral-deep: #e84f2b; --coral-soft: #ffe6dc; --sun: #ffc940; --sun-deep: #f0ac0a; --mint: #35d0a6; --mint-deep: #1cb48c; --mint-soft: #e0faf3; /* Legado: algunas reglas siguen usando estos nombres */ --logo-yellow: var(--sun); --logo-violet: var(--violet); --navy: var(--violet-ink); --navy-deep: #180f3c; --navy-hover: #2f2570; --bg: #fffaf3; --bg-alt: #fff1e4; --surface: #ffffff; --ink: #241a3d; --ink-soft: #665d80; --line: #241a3d; --line-soft: #ece3f5; /* Estados del quiz */ --ok: #148a5c; --ok-bg: #dff7ec; --ok-line: #1cb48c; --bad: #d43d1f; --bad-bg: #ffe6dc; --bad-line: #ff6a45; --radius: 22px; --radius-sm: 14px; --shadow-card: 6px 6px 0 rgba(36, 26, 61, 0.9); --shadow-pop: 5px 5px 0 var(--ink); } /* ---------- Fuentes ---------- Cargadas desde en el de cada página (más rápido que @import). */ /* ---------- Reset básico ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } .container { width: min(100% - 2.5rem, 68rem); margin-inline: auto; } /* ---------- Decoraciones (confetti / blobs) ---------- */ .decor { position: absolute; z-index: 0; pointer-events: none; user-select: none; } .decor svg { display: block; width: 100%; height: 100%; } section { position: relative; } /* ---------- Tipografía de título ---------- */ .section-title, .quiz-verdict { font-family: "Fredoka", "Inter", sans-serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; } .section-title { font-size: clamp(1.7rem, 4vw, 2.5rem); color: var(--violet-ink); margin: 0 0 1rem; } .section-title--onnavy { color: #fff; } .section-kicker, .hero-kicker, .unit-kicker, .page-hero-kicker, .proposal-picks-label, .reflection-kicker { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 1rem; padding: 0.3rem 0.9rem; border-radius: 999px; font-family: "Fredoka", sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: var(--sun); color: var(--violet-ink); border: 2px solid var(--ink); } /* ---------- Botones ---------- */ .btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.8rem; border: 2.5px solid var(--ink); border-radius: 999px; font-family: "Fredoka", sans-serif; font-weight: 600; font-style: normal; font-size: 1rem; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-pop); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); } .btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); } .btn:focus-visible { outline: 3px solid var(--violet-ink); outline-offset: 2px; } .hero .btn:focus-visible, .pitch .btn:focus-visible, .all-done .btn:focus-visible { outline-color: #fff; } .btn-light { background: #fff; color: var(--violet-ink); } .btn-light:hover { background: var(--sun); } .btn-ghost { background: transparent; border-color: #fff; color: #fff; box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.35); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); box-shadow: 7px 7px 0 rgba(255, 255, 255, 0.35); } .btn-ghost-dark { border-color: var(--ink); color: var(--violet-ink); background: #fff; } .btn-ghost-dark:hover { background: var(--pink-soft); } .btn-navy { background: var(--coral); color: #fff; } .btn-navy:hover { background: var(--coral-deep); } .btn-sm { padding: 0.55rem 1.2rem; font-size: 0.9rem; box-shadow: 4px 4px 0 var(--ink); } .btn-sm:hover { box-shadow: 6px 6px 0 var(--ink); } .btn[disabled] { opacity: 0.45; cursor: not-allowed; } .btn[disabled]:hover { transform: none; box-shadow: var(--shadow-pop); } /* ============== PÁGINA OFICIAL PARA COLEGIOS (schools.html) ============== */ .top-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.8rem; margin-bottom: 2.2rem; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 0.95rem; } .top-nav a { color: rgba(255, 255, 255, 0.92); text-decoration: none; padding: 0.2rem 0.1rem; } .top-nav a:hover { color: var(--sun); } .top-nav .top-nav-cta { padding: 0.25rem 0.9rem; border-radius: 999px; background: var(--sun); color: var(--violet-ink); border: 2px solid var(--ink); } .top-nav .top-nav-cta:hover { background: #fff; color: var(--violet-ink); } .two-col { display: grid; gap: 1.5rem; margin-top: 2rem; } @media (min-width: 760px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } } .info-card { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.6rem 1.7rem; } .info-card h3 { margin: 0 0 0.8rem; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--violet-ink); } .info-card ul { margin: 0; padding: 0 0 0 1.2rem; color: var(--ink-soft); display: grid; gap: 0.45rem; } @media (min-width: 700px) and (max-width: 899px) { .how-steps.how-steps--four { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .how-steps.how-steps--four { grid-template-columns: repeat(4, 1fr); } } /* ==================== CONFIANZA (cifras + reseñas) ==================== */ .trust { padding: 3.5rem 0; background: var(--bg-alt); text-align: center; } .trust--pink { background: var(--pink-soft); } .next-step.next-step--violet { background: var(--violet); } /* Los pasos numerados de "Designed for" sobre violeta */ .next-step .how-steps { margin-top: 2rem; } .next-step .how-step { text-align: center; } .trust .section-title { max-width: 34rem; margin-inline: auto; } .trust-stats { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; } @media (min-width: 620px) { .trust-stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .trust-stats { grid-template-columns: repeat(4, 1fr); } } /* ---------- Prensa ---------- */ .press { padding: 3.5rem 0; background: var(--bg); text-align: center; } /* Titulares de prensa: rejilla, todos a la vista */ .press-grid { list-style: none; margin: 2.2rem 0 2.5rem; padding: 0; display: grid; gap: 1.2rem; text-align: left; } @media (min-width: 640px) { .press-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .press-grid { grid-template-columns: repeat(3, 1fr); } } .press-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); } .press-card blockquote { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 1.05rem; line-height: 1.35; color: var(--violet-ink); } .press-more { font-size: 0.88rem; font-weight: 600; color: var(--coral); text-decoration: none; } .press-more:hover { text-decoration: underline; } .press-logo { margin-top: auto; height: 68px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; padding-top: 1.1rem; border-top: 2px dashed var(--line-soft); } /* El de Fox News es cuadrado: se equilibra ópticamente con los wordmarks */ .press-logo[alt="Fox News"] { height: 58px; } .press-note { margin: 1.6rem auto 0; max-width: 46rem; font-size: 0.92rem; color: var(--ink-soft); } .press-note a { color: var(--violet-deep); font-weight: 600; white-space: nowrap; } /* ---------- Founding schools ---------- */ .testimonials .founding-sub { max-width: 44rem; margin: 0 auto 2rem; text-align: center; } /* ---------- Carrusel horizontal de prensa ---------- */ .quote-rail { margin-top: 2.2rem; display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0.4rem 0 1.4rem; scrollbar-width: thin; } .quote-rail::-webkit-scrollbar { height: 8px; } .quote-rail::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 999px; } .quote-card { flex: 0 0 min(21rem, 78vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.9rem; margin: 0; padding: 1.5rem 1.4rem; text-align: left; background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; } a.quote-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(36, 26, 61, 0.9); } .quote-card blockquote { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 1.08rem; line-height: 1.35; color: var(--violet-ink); } .quote-source { margin-top: auto; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral); } .rail-hint { margin: 0; font-size: 0.88rem; color: var(--ink-soft); } .founding-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; text-align: left; } @media (min-width: 800px) { .founding-list { grid-template-columns: repeat(3, 1fr); } } .founding-list li { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.4rem 1.5rem; } .founding-list h3 { margin: 0 0 0.35rem; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--violet-ink); } .founding-list p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); } .trust-stats li { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.5rem 1rem; } .trust-stats strong { display: block; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; color: var(--coral); } .trust-stats span { display: block; margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-soft); } .testimonials { padding: 3.8rem 0; background: var(--bg); text-align: center; } .testimonial-grid { display: grid; gap: 1.4rem; margin-top: 2.2rem; text-align: left; } @media (min-width: 860px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial { position: relative; margin: 0; padding: 2.4rem 1.5rem 1.5rem; background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); } .testimonial::before { content: "\201C"; position: absolute; top: 0.35rem; left: 1.2rem; font-family: "Fredoka", sans-serif; font-size: 3.6rem; line-height: 1; color: var(--pink); } .testimonial blockquote { margin: 0 0 1.2rem; font-size: 1.02rem; line-height: 1.6; color: var(--ink); } .testimonial figcaption { display: grid; gap: 0.15rem; padding-top: 1rem; border-top: 2px dashed var(--line-soft); } .testimonial-name { font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--violet-ink); } .testimonial-role { font-size: 0.88rem; color: var(--ink-soft); } /* ============================== HERO ============================== */ .hero { position: relative; background: var(--violet); background-image: radial-gradient( circle at 12% 18%, rgba(255, 255, 255, 0.14), transparent 40% ), radial-gradient(circle at 88% 82%, rgba(255, 255, 255, 0.12), transparent 45%); color: #fff; padding: 4.5rem 0 4rem; text-align: center; overflow: hidden; } .hero .container { position: relative; z-index: 1; } .hero-kicker { background: var(--sun); } /* Logotipo oficial (assets/logo.png), no recrear con texto */ .hero-title { margin: 0 auto; max-width: 40rem; } .hero-title img { width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.12)); } .hero-sub { max-width: 34rem; margin: 1.5rem auto 2.1rem; font-size: 1.15rem; color: rgba(255, 255, 255, 0.95); } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .hero-stats { list-style: none; margin: 2.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; font-size: 1rem; font-family: "Fredoka", sans-serif; color: rgba(255, 255, 255, 0.96); } .hero-stats strong { color: var(--sun); font-size: 1.2em; } .hero-stats .dot { color: rgba(255, 255, 255, 0.5); } .hero-illustration { margin: 2.6rem auto 0; max-width: 34rem; position: relative; z-index: 1; background: #6b6ae0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .hero-illustration img { width: 100%; height: auto; } .how-illustration { margin: 2.6rem auto 0; max-width: 30rem; background: #6d7ee8; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .how-illustration img { width: 100%; height: auto; } .pitch-illustration { margin: 0 auto 2.2rem; max-width: 30rem; background: #ea6a56; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .pitch-illustration img { width: 100%; height: auto; } /* ============ PÁGINA DE LA BIBLIOTECA DE VÍDEOS (videos.html) ============ */ .page-hero { position: relative; background: var(--coral); background-image: radial-gradient( circle at 85% 10%, rgba(255, 255, 255, 0.16), transparent 42% ), radial-gradient(circle at 8% 90%, rgba(255, 255, 255, 0.14), transparent 45%); color: #fff; padding-bottom: 3.5rem; overflow: hidden; } .site-bar { display: flex; justify-content: center; padding-block: 1.5rem 0.5rem; position: relative; z-index: 1; } .site-bar-logo img { display: block; width: min(260px, 65vw); height: auto; transition: transform 0.15s ease; } .site-bar-logo:hover img { transform: scale(1.03); } .page-hero-body { text-align: center; padding-top: 1.5rem; position: relative; z-index: 1; } .page-hero-kicker { background: var(--sun); color: var(--violet-ink); } .page-hero-title { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 600; line-height: 1.15; font-size: clamp(1.8rem, 4.5vw, 2.7rem); } .page-hero-sub { max-width: 46rem; margin: 1.2rem auto 0; color: rgba(255, 255, 255, 0.94); line-height: 1.65; } .page-hero-meta { margin: 1.2rem 0 0; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .page-hero-illustration { margin: 2.2rem auto 0; max-width: 30rem; position: relative; z-index: 1; background: #e66857; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .page-hero-illustration img { width: 100%; height: auto; } .videos-grid-section { padding: 3.8rem 0; background: var(--bg); } .videos-grid { display: grid; gap: 2rem; } @media (min-width: 760px) { .videos-grid { grid-template-columns: 1fr 1fr; } } .video-card { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 6px 6px 0 var(--pink); transition: transform 0.15s ease, box-shadow 0.15s ease; } .video-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--pink); } .video-frame { position: relative; background: #000; } .video-frame video { width: 100%; display: block; } .video-card-meta { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; } .video-num { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--violet); } .video-card-meta h2 { flex: 1; margin: 0; font-family: "Fredoka", sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--violet-ink); } .video-plays { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-alt); border: 1.5px solid var(--line-soft); border-radius: 999px; padding: 0.28rem 0.7rem; white-space: nowrap; } .video-plays.is-locked { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); } .video-lock { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.9rem; padding: 1rem; text-align: center; background: rgba(36, 26, 61, 0.94); color: #fff; } .video-lock[hidden] { display: none; } .video-lock p { margin: 0; } /* Tarjeta teaser: Season 2 coming soon */ .video-card--soon { display: grid; place-content: center; gap: 0.5rem; text-align: center; padding: 2.5rem 1.5rem; background: var(--violet-soft); border: 2.5px dashed var(--violet); box-shadow: none; min-height: 16rem; } .video-card--soon:hover { transform: none; box-shadow: none; } .soon-badge { justify-self: center; margin: 0; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--sun); color: var(--violet-ink); font-family: "Fredoka", sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--ink); } .soon-title { margin: 0.5rem 0 0; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.4rem; color: var(--violet-ink); } .soon-text { margin: 0; max-width: 22rem; color: var(--ink-soft); font-size: 0.95rem; } /* Botón de selección de cada tarjeta */ .video-select { display: block; width: 100%; padding: 0.75rem 1rem; border: 0; border-top: 2.5px solid var(--ink); background: var(--surface); color: var(--violet-ink); font: inherit; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .video-select:hover { background: var(--pink-soft); } .video-select:focus-visible { outline: 3px solid var(--violet-ink); outline-offset: -3px; } .video-select[aria-pressed="true"] { background: var(--violet-ink); color: #fff; } .video-card.is-selected { box-shadow: 6px 6px 0 var(--mint); } .video-card.is-selected:hover { box-shadow: 8px 8px 0 var(--mint); } /* Barra fija de progreso de selección */ .selection-bar { position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; max-width: 34rem; margin-inline: auto; background: var(--violet-ink); color: #fff; border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--sun); padding: 0.85rem 1.2rem; animation: feedback-in 0.3s ease both; } .selection-bar[hidden] { display: none; } .selection-bar p { margin: 0; font-size: 0.95rem; } .selection-bar strong { color: var(--sun); } .selection-bar-hint { color: rgba(255, 255, 255, 0.8); } /* Sección de la propuesta */ .proposal { padding: 3.8rem 0 4rem; background: var(--pink-soft); } .proposal-sub { max-width: 44rem; margin: 0 0 2rem; color: var(--ink-soft); } .proposal-form { max-width: 44rem; background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--violet); padding: 1.8rem 1.6rem; } .proposal-picks-label { background: var(--violet-soft); color: var(--violet-ink); border-color: var(--violet); } .proposal-picks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; } .pick-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1.5px dashed var(--line-soft); background: var(--bg-alt); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); } .pick-chip.is-filled { border: 2px solid var(--ink); background: var(--coral); color: #fff; padding-right: 0.55rem; } .pick-chip-remove { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.25); color: #fff; font-size: 0.7rem; line-height: 1; cursor: pointer; transition: background-color 0.15s ease; } .pick-chip-remove:hover { background: rgba(255, 255, 255, 0.42); } .pick-chip-remove:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } .proposal-fields { display: grid; gap: 0 1.2rem; } @media (min-width: 640px) { .proposal-fields { grid-template-columns: 1fr 1fr; } .proposal-fields .field--wide { grid-column: 1 / -1; } } /* ========================= HOW IT WORKS ========================= */ .how { padding: 4rem 0 3.5rem; text-align: center; background: var(--bg); } .how-steps { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; } .how-step { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.8rem 1.5rem; } .how-step:nth-of-type(1) { box-shadow: 6px 6px 0 var(--sun); } .how-step:nth-of-type(2) { box-shadow: 6px 6px 0 var(--pink); } .how-step:nth-of-type(3) { box-shadow: 6px 6px 0 var(--mint); } .how-num { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--sun); color: var(--violet-ink); font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.25rem; } .how-step:nth-of-type(2) .how-num { background: var(--pink); color: #fff; } .how-step:nth-of-type(3) .how-num { background: var(--mint); color: #fff; } .how-step h3 { margin: 1rem 0 0.35rem; font-family: "Fredoka", sans-serif; font-size: 1.1rem; color: var(--violet-ink); } .how-step p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .how-note { margin: 2.2rem auto 0; font-weight: 600; color: var(--violet-ink); } @media (min-width: 700px) { .how-steps { grid-template-columns: repeat(3, 1fr); } } /* ============================= UNITS ============================= */ .unit { padding: 3.5rem 0; border-top: 2px solid var(--line-soft); } .unit:nth-of-type(even) { background: var(--bg-alt); } .unit-header { max-width: 46rem; } .unit-intro { color: var(--ink-soft); margin: 0 0 1.8rem; } .unit-body { display: grid; gap: 1.6rem; align-items: start; } .unit-video video { width: 100%; border-radius: var(--radius); border: 2.5px solid var(--ink); box-shadow: var(--shadow-card); background: #000; } @media (min-width: 880px) { .unit-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; } } /* ------------------------------ QUIZ ------------------------------ */ .quiz { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--violet); padding: 1.6rem; } .quiz-progress-label { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .quiz-bar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-bottom: 1.3rem; border: 1.5px solid var(--ink); } .quiz-bar-fill { height: 100%; width: 0; border-radius: inherit; background: var(--violet); transition: width 0.3s ease; } .quiz-question { margin: 0 0 1.1rem; font-family: "Fredoka", sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: var(--violet-ink); } .quiz-options { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; } .quiz-option { width: 100%; text-align: left; padding: 0.85rem 1rem; font-size: 0.98rem; line-height: 1.4; font-family: inherit; color: var(--ink); background: var(--bg-alt); border: 2px solid var(--line-soft); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } .quiz-option:hover:not(:disabled) { border-color: var(--violet); background: #fff; transform: translateX(2px); } .quiz-option:focus-visible { outline: 3px solid var(--violet-ink); outline-offset: 2px; } .quiz-option:disabled { cursor: default; opacity: 0.75; } .quiz-option.is-correct { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); font-weight: 700; opacity: 1; } .quiz-option.is-wrong { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); opacity: 1; } /* Feedback */ .quiz-feedback { margin-top: 1.1rem; border-radius: var(--radius-sm); padding: 1rem 1.1rem; border: 2px solid; animation: feedback-in 0.25s ease both; } .quiz-feedback.is-ok { background: var(--ok-bg); border-color: var(--ok-line); } .quiz-feedback.is-bad { background: var(--bad-bg); border-color: var(--bad-line); } .quiz-verdict { display: inline-block; font-size: 1.05rem; margin: 0 0 0.35rem; } .quiz-feedback.is-ok .quiz-verdict { color: var(--ok); } .quiz-feedback.is-bad .quiz-verdict { color: var(--bad); } .quiz-feedback p { margin: 0; font-size: 0.95rem; } .quiz-next { margin-top: 1rem; } @keyframes feedback-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Transición entre preguntas */ .quiz-stage { animation: stage-in 0.3s ease both; } @keyframes stage-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* Resultado */ .quiz-result { text-align: center; padding: 0.5rem 0; } .quiz-score { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 2.8rem; color: var(--violet-ink); margin: 0.4rem 0; } .quiz-result-msg { margin: 0 0 1.2rem; color: var(--ink-soft); } /* Tarjeta de reflexión: se lee como "esto se habla, no se puntúa" */ .reflection { margin-top: 1.4rem; text-align: left; background: var(--mint-soft); border: 2.5px dashed var(--mint-deep); border-radius: var(--radius); padding: 1.2rem 1.3rem; } .reflection-kicker { background: var(--mint); color: #06342a; border-color: var(--mint-deep); } .reflection p { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.55; } /* =========================== NEXT STEP =========================== */ .next-step { padding: 4rem 0; background: var(--coral); color: #fff; text-align: center; overflow: hidden; } .next-step .container { position: relative; z-index: 1; } .next-step .unit-kicker { background: var(--violet-ink); color: #fff; border-color: var(--ink); } .next-step .section-title { max-width: 42rem; margin-inline: auto; color: #fff; } .next-step-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.8rem; } .next-step-note { margin: 1.3rem 0 0; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; } .next-step-illustration { margin: 0 auto 2rem; max-width: 16rem; position: relative; z-index: 1; } /* ========================= CLOSING PITCH ========================= */ .pitch { background: var(--violet-soft); padding: 4rem 0; } .pitch-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; } .pitch-list li { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--pink); padding: 1.4rem 1.4rem; display: flex; gap: 1rem; align-items: flex-start; } .pitch-list li:nth-child(2n) { box-shadow: 6px 6px 0 var(--sun); } .pitch-icon { flex: none; width: 2.8rem; height: 2.8rem; } .pitch-list h3 { margin: 0 0 0.3rem; font-family: "Fredoka", sans-serif; font-size: 1.08rem; color: var(--violet-ink); } .pitch-list p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); } .pitch-cta { margin-top: 2.4rem; text-align: center; } @media (min-width: 700px) { .pitch-list { grid-template-columns: 1fr 1fr; } } /* ===================== CONTACT + CALENDLY ===================== */ .contact { padding: 4rem 0 4.5rem; background: var(--violet-ink); color: #fff; overflow: hidden; } .contact .container { position: relative; z-index: 1; } .contact .section-title { display: inline-block; } .contact-sub { color: rgba(255, 255, 255, 0.88); margin: 0 0 2rem; max-width: 40rem; } .contact-grid { display: grid; gap: 2rem; align-items: start; } @media (min-width: 880px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .contact-form { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--sun); padding: 1.8rem 1.6rem; } .hp-field { position: absolute; left: -9999px; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; color: var(--violet-ink); } .field .opt { font-weight: 400; color: var(--ink-soft); } .field input, .field select, .field textarea { width: 100%; padding: 0.65rem 0.8rem; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line-soft); border-radius: var(--radius-sm); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(106, 103, 224, 0.2); } .field input.is-invalid, .field select.is-invalid { border-color: var(--bad-line); } .form-status { min-height: 1.4em; margin: 0 0 0.8rem; font-weight: 600; } .form-status.is-ok { color: var(--ok); } .form-status.is-bad { color: var(--bad); } .calendly-box { background: var(--surface); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--mint); padding: 1.8rem 1.6rem; } .calendly-box h3 { margin: 0 0 0.3rem; font-family: "Fredoka", sans-serif; color: var(--violet-ink); } .calendly-box > p { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: 0.95rem; } .calendly-slot .calendly-inline-widget { min-width: 100%; height: 640px; } /* ============== "ALL THREE UNITS DONE" NOTICE ============== */ .all-done { position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; max-width: 40rem; margin-inline: auto; background: var(--violet-ink); color: #fff; border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--sun); padding: 0.9rem 1.2rem; animation: feedback-in 0.3s ease both; } .all-done[hidden] { display: none; } .all-done p { margin: 0; font-size: 0.95rem; } .all-done-actions { display: flex; align-items: center; gap: 0.6rem; } .all-done-close { background: none; border: none; color: rgba(255, 255, 255, 0.8); font-size: 1rem; cursor: pointer; padding: 0.3rem; border-radius: 6px; } .all-done-close:hover { color: #fff; } .all-done-close:focus-visible { outline: 2px solid var(--sun); } /* ============================= FOOTER ============================= */ .footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.85); padding: 2.2rem 0; font-size: 0.92rem; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 2rem; } .footer-brand { margin: 0; } .footer-brand img { display: block; width: 220px; height: auto; } .footer p { margin: 0; } .footer a { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.4); } .footer a:hover { color: var(--sun); } /* ==================== REDUCED MOTION ==================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== PÁGINAS DE PACK (middle-school.html / high-school.html) Acento por nivel, selector de nivel y bloque de solicitud. ========================================================================== */ /* --- Acento por nivel: menta en middle, coral en high --- */ body.level-middle { --accent: var(--mint); --accent-deep: var(--mint-deep); } body.level-high { --accent: var(--coral); --accent-deep: var(--coral-deep); } /* --- Selector de nivel, en la cabecera --- */ .level-switch { display: flex; width: max-content; gap: 0.4rem; padding: 0.35rem; margin: 0 auto 1.5rem; background: rgba(255, 255, 255, 0.16); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); } .level-switch a { display: inline-flex; align-items: center; padding: 0.45rem 1.1rem; border-radius: 999px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 0.92rem; text-decoration: none; color: #fff; white-space: nowrap; } .level-switch a:hover { background: rgba(255, 255, 255, 0.18); } .level-switch a[aria-current="page"] { background: var(--accent); color: var(--violet-ink); } .level-switch a[aria-current="page"]:hover { background: var(--accent); } /* --- El acento del nivel tiñe unidades y pasos --- */ .pack-page .unit-kicker { background: var(--accent); } .pack-page .unit-video video { box-shadow: 8px 8px 0 var(--accent); } /* --- Bloque de solicitud --- Fondo violeta propio: el coral de .next-step deja invisible el acento coral de high school, y choca con el menta de middle. */ .request-section { background: var(--violet-deep); } .request-grid { display: grid; gap: 2rem; align-items: start; text-align: left; margin-top: 2rem; } @media (min-width: 900px) { .request-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); } } .request-gets { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.9rem; } .request-gets li { position: relative; padding-left: 2.1rem; color: rgba(255, 255, 255, 0.95); line-height: 1.5; } .request-gets li::before { content: ""; position: absolute; left: 0; top: 0.1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); } .request-gets li::after { content: ""; position: absolute; left: 0.42rem; top: 0.42rem; width: 0.55rem; height: 0.3rem; border-left: 2.5px solid var(--violet-ink); border-bottom: 2.5px solid var(--violet-ink); transform: rotate(-45deg); } .request-lede { margin: 0.6rem 0 0; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.95); } .request-form { box-shadow: 6px 6px 0 var(--accent); } /* Dos campos por fila cuando hay sitio: el formulario parece más corto */ .field-row { display: grid; gap: 0 1rem; } @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } } .request-form .btn { width: 100%; justify-content: center; } .request-note { margin: 0.9rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); text-align: center; } /* --- Una sola pagina, dos packs: se muestra la variante del nivel activo --- */ .lvl { display: none; } html[data-level="middle"] .lvl-middle, html[data-level="high"] .lvl-high { display: revert; } /* .btn es inline-flex: display:revert lo dejaria en inline */ html[data-level="middle"] a.btn.lvl-middle, html[data-level="high"] a.btn.lvl-high { display: inline-flex; } /* El logotipo del hero lleva a la portada (no en index.html, que ya es la portada) */ .hero-home { display: block; text-decoration: none; transition: transform 0.15s ease; } .hero-home:hover { transform: translateY(-2px); } .hero-home:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 8px; } .calendly-note { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ink-soft); text-align: center; } /* ====================================================================== AJUSTES SOLO PARA MÓVIL (< 760px) Todo lo que hay dentro de @media (max-width: 759.98px) es exclusivo del móvil: la versión de escritorio queda exactamente igual que antes. Las tres reglas de fuera del media query sirven precisamente para que el botón hamburguesa y el velo NO existan en escritorio. ====================================================================== */ .nav-bar { display: none; } .nav-toggle { display: none; } .nav-scrim { display: none; } @media (max-width: 759.98px) { /* ---------- 1. Botón hamburguesa ---------- Sin fondo ni caja: solo las tres rayas. Va en position:fixed, así que no ocupa sitio en el flujo y el titular puede subir. */ .nav-bar { display: block; position: fixed; top: 0.85rem; right: 1rem; z-index: 70; margin: 0; } .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; cursor: pointer; background: none; border: 0; border-radius: 10px; box-shadow: none; -webkit-tap-highlight-color: transparent; } .nav-toggle span { display: block; width: 24px; height: 3px; border-radius: 3px; background: var(--ink); transition: transform 0.22s ease, opacity 0.18s ease; } .nav-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } /* Aspa cuando el cajón está abierto */ .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ---------- 2. Menú como cajón lateral de altura completa ---------- */ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(24, 15, 60, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .nav-scrim.is-open { opacity: 1; visibility: visible; } .top-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(78vw, 310px); height: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.15rem; margin: 0; padding: 4.6rem 1rem 1.4rem; overflow-y: auto; text-align: left; background: var(--surface); border-left: 3px solid var(--ink); box-shadow: -8px 0 24px rgba(24, 15, 60, 0.22); transform: translateX(100%); visibility: hidden; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s; } .top-nav.is-open { transform: translateX(0); visibility: visible; } .top-nav a { padding: 0.85rem 0.85rem; border-radius: 12px; font-size: 1.05rem; color: var(--violet-ink); border-bottom: 2px solid var(--line-soft); } .top-nav a:last-child { border-bottom: 0; } .top-nav a:active { background: var(--violet-soft); } .top-nav .top-nav-cta { margin-top: 0.6rem; text-align: center; border-bottom: 0; } /* Bloquea el scroll del fondo mientras el cajón está abierto */ body.nav-open { overflow: hidden; } /* ---------- 3. El hero recupera la altura que tenía antes ---------- Como el botón ya no ocupa sitio en el flujo, subimos el contenido hasta donde empezaba el menú original. */ .home-page .hero { padding-top: 2.8rem; } /* ---------- 4. Pastilla amarilla del hero en una sola línea ---------- */ .pack-page .hero-kicker { flex-wrap: nowrap; white-space: nowrap; max-width: 100%; font-size: 0.7rem; letter-spacing: 0.02em; padding: 0.32rem 0.8rem; } /* "School program ·" sobra en pantallas estrechas: la pastilla se queda en "Middle school · Grades 6–8" y cabe en una línea */ .pack-page .hero-kicker .kicker-lead { display: none; } /* ---------- 5. Círculo amarillo de la sección "Send a request" ---------- */ /* En móvil la sección es mucho más alta, así que el 10% caía encima del titular. Lo subimos por encima de la pastilla. */ .request-section > .decor:first-of-type { top: 1.2% !important; left: 4% !important; } }