/* ============================================================ INTRO.CSS · Páginas de introducción de cada nivel (nuevos-intro, constructores-intro, lideres-intro) El mismo CSS sirve para los 3 niveles. El color se controla con el atributo data-nivel en el . Cada nivel define sus 3 colores clave en variables locales: --nivel : color primario (títulos, palabra de la miga) --btn1 : color del botón 1 --btn2 : color del botón 2 ============================================================ */ /* ---------- Paletas por nivel: ver base.css ---------- El mapeo [data-nivel] vive en base.css para que TODAS las páginas (intro e internas) hereden la paleta. */ /* ---------- Base de la página de intro ---------- */ .intro { min-height: 100vh; background-color: var(--pagina); display: flex; flex-direction: column; } /* Marco: contenedor relativo para que la barra flote encima del cuerpo */ .intro__marco { position: relative; flex: 1; display: flex; flex-direction: column; } /* Barra flotante: superpuesta sobre la parte superior del cuerpo */ .bar-nav--flotante { position: absolute; top: 0; left: 0; right: 0; z-index: 10; } /* ============================================================ CUERPO: 2 mitades de 720 (regla del 1440) ============================================================ */ .intro__cuerpo { flex: 1; display: grid; grid-template-columns: 1fr 1fr; /* dos mitades iguales */ max-width: var(--ancho-maximo); width: 100%; margin: 0 auto; } /* ---------- MITAD IZQUIERDA: banner ---------- */ .intro__banner { position: relative; /* SIN overflow:hidden aquí, para que el ícono no se corte. El recorte de la foto se hace en la capa de fondo. */ aspect-ratio: 720 / 1024; min-height: 520px; display: flex; flex-direction: column; justify-content: flex-end; } .intro__banner-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; /* el recorte va aquí, no en el banner */ } .intro__banner-fondo img { width: 100%; height: 100%; object-fit: cover; } /* Grupo ícono + caja: van juntos y anclados abajo. Al crecer la caja de alto, el ícono sube con ella (lo pediste). */ .intro__grupo-caja { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } /* Ícono grande blanco del nivel, montado sobre el borde superior de la caja. El margin negativo lo hace "morder" la caja; como está en el flujo, sube automáticamente cuando la caja se hace más alta. z-index alto para que quede por encima de la caja y se vea completo. */ .intro__icono-nivel { position: relative; z-index: 2; width: clamp(150px, 27%, 220px); height: auto; aspect-ratio: 1; margin-bottom: -48px; /* la mitad de abajo se apoya sobre la caja */ filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } /* Caja de texto: ancho fijo con "aire" a los lados, alto automático (Hug). Solo esquinas de arriba redondeadas. Efecto vidrio real. */ .intro__caja-texto { align-self: stretch; /* ocupa el ancho del banner (con su padding) */ padding: var(--caja-pad-vert) var(--caja-pad-lat); border-radius: 24px 24px 0 0; /* Fill del nivel al 85% (Figma) + desenfoque = vidrio */ background-color: color-mix(in srgb, var(--caja) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--color-blanco); } .intro__caja-texto p { font-size: 1.05rem; line-height: 1.55; } /* ---------- MITAD DERECHA: contenido ---------- */ .intro__contenido { /* Padding lateral = margen estándar del proyecto (80px de Figma). Vertical generoso; el justify-content centra el bloque. */ padding: var(--espacio-xl) var(--margen-lateral); display: flex; flex-direction: column; justify-content: center; /* centra verticalmente */ gap: var(--espacio-lg); } .intro__titulo { color: var(--nivel); font-size: 2rem; font-weight: 900; margin-bottom: var(--espacio-sm); } .intro__texto { color: var(--color-texto); font-size: 1.05rem; line-height: 1.55; } .intro__instruccion { font-style: italic; color: var(--color-texto); margin-bottom: var(--espacio-md); } /* Bloque de botones: define el ancho de la COLUMNA (los botones la llenan). max-width limita cuánto se estiran en pantallas grandes (como el frame de Figma). gap = separación uniforme entre botones (12 en Figma → ~espacio-md). */ .intro__botones { display: flex; flex-direction: column; gap: var(--espacio-sm); width: 100%; max-width: 440px; /* ancho de la columna de acciones (Figma) */ } /* ---------- Botones de acción: ver components.css ---------- */ /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet y móvil: las dos mitades se apilan en una columna */ @media (max-width: 860px) { .intro__cuerpo { grid-template-columns: 1fr; /* una sola columna */ } /* El banner deja de forzar la proporción vertical de escritorio. En pila, la foto es una franja generosa (se ve bien la escena y el ícono completo). No importa que crezca el scroll. */ .intro__banner { aspect-ratio: auto; min-height: 72vh; } /* Ícono un poco más chico para que no invada la barra */ .intro__icono-nivel { width: clamp(120px, 22vw, 180px); margin-bottom: -40px; } .intro__contenido { padding: var(--espacio-lg) var(--espacio-md); gap: var(--espacio-md); } /* Botones ocupan todo el ancho disponible en pila */ .btn-accion { max-width: 100%; } } /* Móvil chico */ @media (max-width: 600px) { .intro__banner { min-height: 68vh; } .intro__caja-texto { /* padding proporcional para que no coma tanto espacio en móvil */ padding: var(--espacio-lg) var(--espacio-md); } .intro__titulo { font-size: 1.6rem; } .btn-accion { font-size: 1.1rem; } .bar-nav__logo { width: 150px; } }