/* ============================================================ PORTADA — las dos puertas de búsqueda ============================================================ Lo que arregla este fichero: hasta ahora la portada tenía UNA puerta grande (la tarjeta de la búsqueda guiada, con borde punteado y un botón fucsia enorme) y otra escondida en un enlace de texto de 0,92 rem («✨ ¿Qué te apetece?»). Aunque las dos llevan a un buscador, el diseño decía que una era la buena y la otra el repuesto. Alfonso lo quiere al revés: «que se vea igual de potente el qué te apetece hoy y la guiada. Y que se entienda que una es con más detalle». La solución: DOS BALDOSAS GEMELAS, lado a lado también en el móvil de 375 px. Mismo marco, mismo color, mismo tamaño, misma llamada a la acción abajo del todo — y como el CSS es literalmente el mismo (una sola clase `.puerta`), ninguna PUEDE pesar más que la otra. Y la diferencia, sin hacer trampa: cada baldosa lleva su contador de preguntas («3 preguntas» / «6 preguntas»). Ese número no está escrito aquí ni en la plantilla: se cuenta de config/vibes.php. Es el dato más honesto que tenemos para decir «una es más rápida y la otra más fina» sin que ninguna parezca de segunda. Va aparte de app.css (que es de otro agente) y se enlaza desde templates/public/home.php, igual que admin enlaza propuestas.css y taller.css. Aquí no se inventa ni un color: todo son los tokens de :root. ============================================================ */ /* --- El bloque entero ----------------------------------------------------- Va pegado bajo el hero y por encima de todo lo demás: es lo primero que se toca al entrar. `#recorrido-invitacion` (el id que lleva en la plantilla) es el contrato con assets/js/guiada.js, que esconde ESTE bloque entero mientras el recorrido está desplegado — las dos puertas se van juntas, no se queda media portada colgando. */ .puertas { margin: 0 0 14px; } /* Las dos, en fila, TAMBIÉN a 375 px: apiladas, la de arriba parecería la principal por el simple hecho de leerse antes. `flex: 1 1 0` con `min-width: 0` las parte exactamente por la mitad; si algún día se pintara una sola (degradación: sin copy no hay puerta), esa misma regla la deja a lo ancho sin ningún hueco reservado al lado. */ .puertas__par { display: flex; align-items: stretch; gap: 10px; } /* --- Una puerta ----------------------------------------------------------- Una es