/* ========================================================================= estilo2 — «Franja de entrada» Capa de tema. ESCRITA A MANO: no la genera Tailwind, así que tocarla NUNCA obliga a recompilar public/css/app.css. Qué hace: las vistas del sitio traen el vocabulario neutro de Tailwind (bg-white, stone-*) escrito a pelo — 829 usos en 38 archivos, pero solo unas 56 clases distintas. Aquí se reasignan esas clases a las variables del tema que emite partials/theme-head.blade.php desde los tokens de la BD. Resultado: las 21 vistas públicas adoptan el tema sin editar ni un Blade. Cómo gana sin !important: las utilidades de Tailwind son selectores de UNA clase (0,1,0) y aquí se prefijan con `body.tema-e2` (0,2,0). Además este archivo se enlaza después de app.css. En todo app.css hay un solo !important. El solo lleva la clase `tema-e2` cuando el estilo activo (o en vista previa) la declara en su token `body_class`, así que el tema `default` y el AdminCP no evalúan nada de esto. ⚠️ Al añadir clases nuevas a un Blade, comprueba que estén cubiertas aquí: curl -s | grep -oE 'class="[^"]*"' \ | grep -oE '\b(bg|text|border|ring|divide)-(white|black|stone-[0-9]+)\b' \ | sort -u Lo que salga y no esté en este archivo es una isla sin tematizar. MAPA DE COLOR calcita #f7f8f6 superficies basalto #14181a anclas oscuras neblina #eaece8 fondo de página cantuta #b4234f acento (--brand-600) roca #dfe2dd zonas hundidas andén #2f6b4f disponible ========================================================================= */ /* ------------------------------------------------------- 0. Tipografía Autoalojada en /fonts/. El HTML no pide nada a terceros (conquista de la auditoría SEO), así que NADA de fonts.googleapis.com ni @import remoto. Los @font-face viven aquí y no en app.css a propósito: así no obligan a recompilar Tailwind y solo se descargan cuando el tema está activo. Tres papeles, y solo tres: Archivo (variable, wdth 110-125 · wght 700) → display, con moderación: H1/H2 y el código de circuito. Grotesca de señalética; el eje de anchura da el rótulo institucional sin recurrir a la serif de alto contraste. Instrument Sans (variable, 400-600) → todo el texto. IBM Plex Mono (500) → SOLO los datos del pase (hora, cupos, precio, código). Es lo que hace que un número parezca una credencial y no una etiqueta de tienda. El subconjunto latin cubre es/en; latin-ext entra solo si hace falta, por unicode-range (acentos de pt: ã, õ, ç ya están en latin). Pesos: 142 KB los seis archivos, ~81 KB en una página en español. ⚠️ public/fonts/ hay que ESPEJARLO a public_html/fonts/; si falta, la fuente cae al fallback del sistema sin dejar ni una línea en laravel.log. */ @font-face { font-family: 'Iskay Display'; src: url('/fonts/archivo-v25-latin.woff2') format('woff2'); font-weight: 700; font-stretch: 110% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Iskay Display'; src: url('/fonts/archivo-v25-latin-ext.woff2') format('woff2'); font-weight: 700; font-stretch: 110% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Iskay Sans'; src: url('/fonts/instrument-sans-v4-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Iskay Sans'; src: url('/fonts/instrument-sans-v4-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Iskay Mono'; src: url('/fonts/ibm-plex-mono-v20-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Iskay Mono'; src: url('/fonts/ibm-plex-mono-v20-latin-ext.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Display: expandido y apretado de interletraje, como un rótulo. Se aplica a los titulares reales, no a cualquier cosa en negrita. */ body.tema-e2 h1, body.tema-e2 h2, body.tema-e2 .fuente-display { font-family: var(--font-display, 'Iskay Display'), system-ui, sans-serif; font-stretch: 118%; font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; } /* Datos: solo donde hay una cifra que leer como credencial. */ body.tema-e2 .fuente-dato { font-family: 'Iskay Mono', ui-monospace, monospace; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* -------------------------------------------------------------- 1. Base */ body.tema-e2 { background-color: var(--surface-2); color: var(--ink-1); } /* Foco visible en todo el tema: el anillo de Tailwind se pierde sobre mineral. */ body.tema-e2 :focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; } /* --------------------------------------------------- 2. Superficies claras */ body.tema-e2 .bg-white, body.tema-e2 .focus\:bg-white:focus { background-color: var(--surface-1); } body.tema-e2 .bg-stone-50 { background-color: var(--surface-2); } body.tema-e2 .bg-stone-100, body.tema-e2 .bg-stone-200 { background-color: var(--surface-3); } body.tema-e2 .bg-stone-300 { background-color: #cdd3cc; } body.tema-e2 .bg-stone-400 { background-color: #aab2ab; } body.tema-e2 .hover\:bg-stone-50:hover { background-color: var(--surface-2); } body.tema-e2 .hover\:bg-stone-100:hover, body.tema-e2 .hover\:bg-stone-200:hover { background-color: var(--surface-3); } /* ------------------------------------------------- 3. Anclas de basalto Cabeceras de página, botones sólidos y paneles de calendario. En el tema base son gris piedra; aquí son el ancla oscura de la identidad. */ body.tema-e2 .bg-stone-700, body.tema-e2 .bg-stone-800, body.tema-e2 .bg-stone-900, body.tema-e2 .bg-stone-950 { background-color: var(--surface-dark); } body.tema-e2 .hover\:bg-stone-700:hover { background-color: #232a2c; } body.tema-e2 .bg-stone-900\/80 { background-color: rgba(20, 24, 26, 0.82); } /* Los degradados de los hero (from-stone-900 via-stone-900 to-stone-700|800) pasan a basalto con una veta ligeramente más clara: sigue leyéndose como piedra, no como un degradado decorativo. */ body.tema-e2 .from-stone-900 { --tw-gradient-from: #14181a var(--tw-gradient-from-position); --tw-gradient-to: rgba(20, 24, 26, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } body.tema-e2 .via-stone-900 { --tw-gradient-to: rgba(20, 24, 26, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #171c1e var(--tw-gradient-via-position), var(--tw-gradient-to); } body.tema-e2 .to-stone-700, body.tema-e2 .to-stone-800 { --tw-gradient-to: #262e30 var(--tw-gradient-to-position); } /* ------------------------------------------------------------- 4. Tinta */ body.tema-e2 .text-stone-800, body.tema-e2 .text-stone-900 { color: var(--ink-1); } body.tema-e2 .text-stone-600, body.tema-e2 .text-stone-700 { color: var(--ink-2); } /* stone-300/400/500 son las etiquetas pequeñas: se suben a ink-3 para que cumplan AA (4.6:1 sobre neblina; en el tema base rondaban 3:1). */ body.tema-e2 .text-stone-300, body.tema-e2 .text-stone-400, body.tema-e2 .text-stone-500 { color: var(--ink-3); } body.tema-e2 .hover\:text-stone-800:hover { color: var(--ink-1); } /* ---------------------------------------- 5. Tinta DENTRO de lo oscuro Los mismos stone-300/400/500 se usan también sobre los paneles oscuros (calendario, hero). Ahí ink-3 sería ilegible: se invierten. Esta regla depende de que el contenedor oscuro lleve una de las clases del §3, que es como está escrito hoy en todas las vistas. */ body.tema-e2 .bg-stone-900 .text-stone-300, body.tema-e2 .bg-stone-900 .text-stone-400, body.tema-e2 .bg-stone-900 .text-stone-500, body.tema-e2 .from-stone-900 .text-stone-300, body.tema-e2 .from-stone-900 .text-stone-400, body.tema-e2 .from-stone-900 .text-stone-500, body.tema-e2 .bg-black .text-stone-300, body.tema-e2 .bg-black .text-stone-400 { color: rgba(234, 236, 232, 0.72); } body.tema-e2 .from-stone-900 .text-stone-600, body.tema-e2 .from-stone-900 .text-stone-700, body.tema-e2 .from-stone-900 .text-stone-800, body.tema-e2 .from-stone-900 .text-stone-900, body.tema-e2 .bg-stone-900 .text-stone-800, body.tema-e2 .bg-stone-900 .text-stone-900 { color: var(--ink-inverse); } /* FUERA DEL REMAPEO A PROPÓSITO — comprobado contra el HTML servido: bg-white/5|10|20|90, hover:bg-white/10|20, ring-white/10|20|50, text-white, text-white/90, hover:text-white, text-stone-200 → son velos y texto claros SOBRE basalto; ahí ya funcionan (15:1). bg-black/50|90, hover:bg-black/70, ring-black/10 → cortinas de modal y fondo del lightbox: el negro translúcido es correcto en cualquier tema. Si alguna de estas aparece algún día sobre fondo claro, habrá que tratarla caso por caso; no vale meterlas en bloque. */ /* ------------------------------------------------ 5b. Acento por contexto Las vistas usan los tonos claros del acento (300/400/500) indistintamente sobre claro y sobre oscuro, porque en el tema base el ámbar aguantaba las dos cosas. La cantuta no: en claro hay que bajar a 600/700 (5.4:1 y 7.0:1) y en oscuro subir a 300/400 (8.2:1 y 5.6:1). Afecta a los iconos de los pasos, las estrellas de las reseñas y los rótulos de sección. */ body.tema-e2 .text-amber-300, body.tema-e2 .text-amber-400, body.tema-e2 .text-amber-500 { color: var(--brand-600); } body.tema-e2 .bg-stone-900 .text-amber-300, body.tema-e2 .bg-stone-950 .text-amber-300, body.tema-e2 .from-stone-900 .text-amber-300, body.tema-e2 .bg-black .text-amber-300 { color: var(--brand-300); } body.tema-e2 .bg-stone-900 .text-amber-400, body.tema-e2 .bg-stone-900 .text-amber-500, body.tema-e2 .bg-stone-950 .text-amber-400, body.tema-e2 .bg-stone-950 .text-amber-500, body.tema-e2 .from-stone-900 .text-amber-400, body.tema-e2 .from-stone-900 .text-amber-500, body.tema-e2 .bg-black .text-amber-400 { color: var(--brand-400); } /* Los CTA sólidos suben de 500 a 600: blanco sobre 500 da 4.53:1, justo en el límite; sobre 600 da 6.4:1. */ body.tema-e2 .bg-amber-500 { background-color: var(--brand-600); } body.tema-e2 .hover\:bg-amber-600:hover { background-color: var(--brand-700); } /* --------------------------------------------- 5c. Cabecera y pie (basalto) Llevan la clase `e2-chrome` desde la rama estilo2 del layout. Lo que viva ahí dentro se pinta claro: el selector de idioma viene del tema base con tinta oscura y sobre basalto quedaba en 2.9:1. Los paneles desplegables SÍ son claros, así que dentro de ellos se restituye la tinta oscura. */ body.tema-e2 .e2-chrome .text-stone-700, body.tema-e2 .e2-chrome .text-stone-600 { color: var(--ink-inverse); } body.tema-e2 .e2-chrome .text-stone-400, body.tema-e2 .e2-chrome .text-stone-500 { color: rgba(234, 236, 232, 0.66); } body.tema-e2 .e2-chrome .border-stone-200 { border-color: var(--line-dark); } body.tema-e2 .e2-chrome .hover\:bg-stone-50:hover { background-color: rgba(234, 236, 232, 0.10); } /* Dentro de un panel claro del chrome (el desplegable de idioma), la tinta vuelve a ser oscura. 0,3,0 gana a las reglas de arriba. */ body.tema-e2 .e2-chrome .bg-white .text-stone-700, body.tema-e2 .e2-chrome .bg-white .text-stone-600 { color: var(--ink-2); } body.tema-e2 .e2-chrome .bg-white .text-stone-400, body.tema-e2 .e2-chrome .bg-white .text-stone-500 { color: var(--ink-3); } /* ------------------------- 5d. Caja clara DENTRO de una banda de basalto Mismo problema que 5c, otra procedencia. La banda superior de /buscar (`from-stone-900`) lleva el buscador DENTRO, y el buscador es una tarjeta blanca. Las reglas del §5 invierten la tinta de todo lo que cuelga de la banda, así que ahí dentro el texto salía casi blanco sobre blanco: el rótulo, el nombre del boleto, la fecha y los dos botones "Cambiar…" eran ilegibles. Dentro de `.bg-white` la tinta vuelve a ser la de fondo claro. 0,4,1 gana. Hoy la única vista donde esto ocurre es `public/search.blade.php`; en las demás (booking, checkout, disponibilidad) la banda CIERRA antes de las tarjetas. La regla se escribe genérica igualmente: si mañana otra vista anida una caja clara en una banda oscura, ya está resuelta. */ body.tema-e2 .from-stone-900 .bg-white .text-stone-800, body.tema-e2 .from-stone-900 .bg-white .text-stone-900, body.tema-e2 .bg-stone-900 .bg-white .text-stone-800, body.tema-e2 .bg-stone-900 .bg-white .text-stone-900 { color: var(--ink-1); } body.tema-e2 .from-stone-900 .bg-white .text-stone-600, body.tema-e2 .from-stone-900 .bg-white .text-stone-700, body.tema-e2 .bg-stone-900 .bg-white .text-stone-600, body.tema-e2 .bg-stone-900 .bg-white .text-stone-700 { color: var(--ink-2); } body.tema-e2 .from-stone-900 .bg-white .text-stone-300, body.tema-e2 .from-stone-900 .bg-white .text-stone-400, body.tema-e2 .from-stone-900 .bg-white .text-stone-500, body.tema-e2 .bg-stone-900 .bg-white .text-stone-300, body.tema-e2 .bg-stone-900 .bg-white .text-stone-400, body.tema-e2 .bg-stone-900 .bg-white .text-stone-500 { color: var(--ink-3); } /* Los bordes de los botones "Cambiar ruta"/"Cambiar fecha": el §6 los deja en la línea oscura, correcta sobre basalto pero desdibujada sobre la tarjeta. */ body.tema-e2 .from-stone-900 .bg-white .border-stone-300, body.tema-e2 .bg-stone-900 .bg-white .border-stone-300 { border-color: #a9b1aa; } /* --------------------------------------------------- 6. Líneas y anillos */ body.tema-e2 .ring-stone-100, body.tema-e2 .ring-stone-200 { --tw-ring-color: var(--line-1); } body.tema-e2 .ring-stone-300 { --tw-ring-color: #c3cac2; } body.tema-e2 .ring-stone-700 { --tw-ring-color: rgba(234, 236, 232, 0.16); } body.tema-e2 .border-stone-100 { border-color: var(--line-2); } body.tema-e2 .border-stone-200 { border-color: var(--line-1); } body.tema-e2 .border-stone-300, body.tema-e2 .hover\:border-stone-300:hover { border-color: #c3cac2; } body.tema-e2 .border-stone-400 { border-color: #a9b1aa; } body.tema-e2 .divide-stone-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line-2); } body.tema-e2 .divide-stone-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line-1); } /* -------------------------------------------------------- 7. Elevación El tema base separa por sombra difusa. Aquí la jerarquía la marcan la línea y una sombra corta y fría: piedra apoyada, no tarjeta flotando. */ body.tema-e2 .shadow-sm { --tw-shadow: var(--shadow-sm); --tw-shadow-colored: var(--shadow-sm); } body.tema-e2 .shadow, body.tema-e2 .shadow-md { --tw-shadow: var(--shadow-md); --tw-shadow-colored: var(--shadow-md); } body.tema-e2 .shadow-lg, body.tema-e2 .shadow-xl, body.tema-e2 .shadow-2xl { --tw-shadow: var(--shadow-lg); --tw-shadow-colored: var(--shadow-lg); } /* ==================================================== 7a. HERO APILADO Dos registros, uno sobre otro en TODOS los anchos: la montaña a sangre (convence) y debajo la franja de basalto con el buscador (decide). Antes se partía 7/5 a partir de 1024px. Se retiró el 2026-08-16: la versión apilada —la que se veía al estrechar el navegador— lee mejor porque la foto ocupa el ancho completo y el buscador queda solo, centrado, sin competir con ella. La única concesión al escritorio es acotar las medidas para que nada crezca sin límite: la foto tiene tope de alto y el contenido se alinea al mismo compás de 72rem que usan las rejillas de abajo. */ .e2-hero { display: grid; grid-template-columns: 1fr; background-color: var(--surface-dark); } .e2-hero__foto { position: relative; /* Proporcional al ancho, pero con tope: sin él, a 1920px la portada mediría 880px de alto y empujaría todo el catálogo fuera de la vista. */ min-height: min(46vw, 30rem); overflow: hidden; } .e2-hero__img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; /* La portada es panorámica (2,36:1) y la franja a sangre es aún más achatada, así que `cover` SIEMPRE recorta en vertical en escritorio. Lo que se elige aquí es POR DÓNDE: anclado al 10 % se conserva la franja de cielo y las cimas —que es lo que da la escala— y el recorte se lleva el primer plano de roca, que no aporta y encima queda tras el titular. Centrado (el defecto) partía la montaña por la mitad. En móvil la caja es más alta que ancha en proporción, el recorte cae en los lados y este valor no interviene. */ object-position: center 10%; } /* El velo mantiene legible el titular sin apagar la foto: más denso abajo, que es donde cae el texto. */ .e2-hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 26, 0.28) 0%, rgba(20, 24, 26, 0.20) 45%, rgba(20, 24, 26, 0.86) 100%); } /* El titular se apoya en el borde inferior de la foto, pero alineado al mismo compás que las rejillas: `left/right: 0` + `max-width` + `margin: auto` centra un absoluto sin sacarlo del flujo del velo. */ .e2-hero__titulo { position: absolute; left: 0; right: 0; bottom: 1.5rem; margin: 0 auto; max-width: 72rem; /* 72rem + 1rem = el mismo `max-w-6xl px-4` de las secciones de abajo, para que el H1 caiga en la misma vertical que «Populares». */ padding: 0 1rem; color: #fff; font-size: clamp(1.9rem, 5.2vw, 3.4rem); text-wrap: balance; } .e2-hero__panel { padding: 1.5rem 1.25rem 2rem; } /* El buscador va al MISMO COMPÁS que el resto de la página: 72rem, los mismos que el `max-w-6xl` de «Populares» y las rejillas de abajo. Con el padding de 2rem del panel, a 1920px ambos empiezan en el mismo píxel (384) y la franja deja de leerse como una pieza suelta. Historia, porque contradice lo que hay escrito arriba en §0.21 de STATUS: el 2026-08-16 el usuario pidió el buscador «centrado y más pequeño» y esto quedó en 42rem. El 2026-08-25, viéndolo en vivo con una ruta ya elegida, pidió lo contrario: que el home replicara la fila de /buscar. A 42rem esa fila no cabe —el botón se lleva 14rem y al nombre del boleto le quedaban ~11rem—, así que el ancho es lo que hace posible la fila. No es un descuido: es la petición. `flight-search` lo comparten los dos temas; lo que sea general va en su Blade y lo que sea de este tema, aquí. */ .e2-hero__caja { margin: 0 auto; width: 100%; max-width: 72rem; } .e2-hero__caja .p-5 { padding: 1rem; } .e2-hero__caja select { padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 1rem; line-height: 1.5rem; } /* El resumen (ruta + fecha, paso 3) NO se apila aquí: con 72rem la fila cabe y es lo que el usuario pidió replicar de /buscar. La clase `buscador-resumen` del Blade se conserva como asidero por si algún día hay que afinarlo, pero hoy no lleva ninguna regla a propósito. Por debajo de 640px el apilado vuelve solo, que lo pone `sm:flex-row` del componente. */ .e2-hero__rotulo { margin: 0 0 0.9rem; color: rgba(234, 236, 232, 0.62); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } @media (min-width: 1024px) { .e2-hero__titulo { bottom: 2.5rem; } .e2-hero__panel { padding: 2.25rem 2rem 2.75rem; } } /* ========================================================== 7b. EL PASE La firma del tema. Todo su diseño vive aquí (no en utilidades de Tailwind) para poder iterarlo sin recompilar nada. El componente está en themes/estilo2/components/pase.blade.php. La perforación separa identidad (qué circuito) de operación (precio, hora, cupo). Es el único sitio donde el tema se permite un gesto. */ .pase { display: flex; flex-direction: column; overflow: hidden; background-color: var(--surface-1); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-sm); transition: box-shadow 160ms ease, transform 160ms ease; } .pase:hover { box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-md); transform: translateY(-2px); } .pase--agotado { /* Agotado no se esconde: se apaga. Sigue siendo información útil. */ opacity: 0.72; } .pase__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--surface-3); } .pase__img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition: transform 400ms ease; } .pase:hover .pase__img { transform: scale(1.04); } .pase__sinfoto { display: grid; height: 100%; place-items: center; font-size: 1.75rem; color: var(--ink-3); } /* El código de circuito, en display expandida sobre basalto: el rótulo de la entrada. `small` lleva la palabra «Circuito» en minúscula y pequeña para que el código mande. */ .pase__codigo { position: absolute; left: 0; top: 0.75rem; display: flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0.75rem 0.3rem 0.7rem; background-color: var(--surface-dark); color: var(--ink-inverse); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.05rem; line-height: 1; } .pase__codigo small { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } .pase__etiqueta { position: absolute; left: 0; top: 0.75rem; padding: 0.3rem 0.7rem; background-color: var(--surface-dark); color: var(--ink-inverse); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; } .pase__cuerpo { display: flex; flex: 1 1 auto; flex-direction: column; padding: 0.95rem 1rem 1rem; } .pase__nombre { margin: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--ink-1); } .pase__nombre a { color: inherit; text-decoration: none; } .pase__nombre a:hover { color: var(--brand-700); } /* La perforación. Los dos semicírculos de los extremos son el troquel del billete; la línea de puntos, el corte. */ .pase__perforacion { position: relative; height: 1px; margin: 0.85rem -1rem 0.85rem; background-image: linear-gradient(to right, var(--line-1) 0 6px, transparent 6px 12px); background-size: 12px 1px; background-repeat: repeat-x; } .pase__perforacion::before, .pase__perforacion::after { content: ''; position: absolute; top: -6px; height: 12px; width: 12px; background-color: var(--surface-2); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-1); } .pase__perforacion::before { left: -6px; } .pase__perforacion::after { right: -6px; } .pase__datos { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; /* La separación con el botón vive aquí y no en el margen del CTA: ese margen pasó a `auto` para anclarlo al fondo, y `auto` no admite un mínimo. */ padding-bottom: 0.9rem; } .pase__precio-rotulo { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .pase__precio-cifra { display: block; font-size: 1.15rem; color: var(--ink-1); } .pase__operacion { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; } .pase__fecha { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .pase__fecha time, .pase__fecha-val { margin-left: 0.3rem; text-transform: none; letter-spacing: 0; color: var(--ink-2); } .pase__horas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; } .pase__hora { padding: 0.1rem 0.35rem; background-color: var(--surface-3); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--ink-1); } .pase__cupo { font-size: 0.72rem; font-weight: 600; } .pase__cupo--disponible { color: var(--anden); } .pase__cupo--pocas { color: var(--brand-700); } .pase__cupo--agotado { color: var(--ink-3); text-decoration: line-through; } .pase__estado { font-size: 0.72rem; color: var(--ink-3); } .pase__cta { /* Empuja el botón al fondo del cuerpo. Sin esto se queda pegado a lo que tenga encima, y como el título ocupa 2 o 3 líneas y los horarios 1 o 2 filas, cada tarjeta lo dejaba a una altura distinta: la fila salía escalonada (hasta 47px de diferencia entre las 4 de «Populares»). Las tarjetas del tema default ya lo resuelven así con `mt-auto`; esto alinea el pase con ese patrón en vez de inventar otro. La separación mínima con lo de arriba la pone `.pase__datos`. */ margin-top: auto; padding: 0.55rem 0.9rem; background-color: var(--surface-dark); color: var(--ink-inverse); border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; text-align: center; text-decoration: none; transition: background-color 160ms ease; } .pase__cta:hover { background-color: var(--brand-700); } .pase--agotado .pase__cta { background-color: var(--surface-3); color: var(--ink-2); } /* Entrada escalonada de las franjas: el único momento orquestado del tema. Se anula por completo si el visitante pide menos movimiento. */ @media (prefers-reduced-motion: no-preference) { .pase__hora { animation: pase-entra 340ms ease both; } .pase__hora:nth-child(2) { animation-delay: 60ms; } .pase__hora:nth-child(3) { animation-delay: 120ms; } .pase__hora:nth-child(4) { animation-delay: 180ms; } @keyframes pase-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } } /* ========================================= 7e. LA FRANJA DE DOTACIÓN El registro de tours y paquetes. Se activa con `pase--viaje` desde themes/estilo2/components/pase.blade.php. Por qué no es un billete: el pase se parte por la perforación porque un boleto TIENE dos mitades —qué compras arriba, si puedes entrar abajo—. Un viaje no se parte: no hay hora de entrada ni cupo del Estado. Repetir ahí el troquel era vestir de billete algo que no lo es. El gesto propio es esta franja: una banda de roca que cruza la tarjeta de lado a lado con lo que el viaje LLEVA. Contesta lo que se pregunta quien compara tours —qué me dan por ese precio— y se apoya en un dato que ya existe cargado en el admin (Experiencia::incluye). Lo demás lo hereda del pase sin duplicar una sola regla: el chasis (anillo, radio, sombra, alzado), la foto, el rótulo de esquina, el precio y el CTA anclado al fondo. Eso es lo que las mantiene en la misma familia. */ .pase__franja { display: flex; align-items: center; gap: 0.55rem; /* Los -1rem la sacan del padding del cuerpo: la franja cruza entera, de borde a borde. A media caña no sería una franja, sería una caja. */ margin: 0.85rem -1rem; padding: 0.5rem 1rem; background-color: var(--surface-3); } .pase__franja-rotulo { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .pase__dotacion { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; } /* Cada servicio en su propio troquel claro sobre la roca: separa los dibujos entre sí y les da el mismo peso, que es lo que impide que la franja se lea como una fila de adornos. El verde andén es el mismo con el que el billete dice que hay sitio — aquí dice que está incluido. */ .pase__ico { position: relative; display: grid; place-items: center; height: 22px; width: 22px; border-radius: var(--radius-sm); background-color: var(--surface-1); color: var(--anden); box-shadow: inset 0 0 0 1px var(--line-1); } .pase__ico svg { height: 14px; width: 14px; } .pase__ico--mas { width: auto; padding: 0 0.3rem; font-size: 0.68rem; color: var(--ink-3); } /* La diana. El troquel sigue midiendo 22 px, pero se apunta a 34: con 22 y 0.4rem de separación había que cazar el icono, y encima `.pase:hover` eleva la tarjeta 2 px justo al entrar el puntero, o sea que el blanco se mueve mientras lo buscas. Invisible y sin fondo: solo amplía el área sensible. */ .pase__ico::before { content: ''; position: absolute; /* 6 px arriba y abajo (no hay vecinos: la franja tiene 8 px de aire), pero solo 3 a los lados, que es la mitad del hueco de 0.4rem. Con 6 en los cuatro lados las dianas contiguas se solapan y la de la derecha se queda el hueco entero. Resultado: 28 × 34 px por icono, sin ambigüedad. */ inset: -6px -3px; border-radius: inherit; } /* El globo. Sustituye al `title` nativo, que tardaba ~1 s en aparecer, se colocaba junto al puntero en vez de junto al icono y no existe al tocar con el dedo. Este sale al instante y en el idioma del tema. Va anclado a la DERECHA y no centrado a propósito: `.pase` lleva `overflow: hidden`, la fila de iconos está pegada al borde derecho de la tarjeta y un globo centrado sobre el último icono se saldría y quedaría cortado. Con `right: 0` crece siempre hacia dentro. */ .pase__ico[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); right: 0; z-index: 2; padding: 0.2rem 0.45rem; background-color: var(--surface-dark); color: var(--ink-inverse); border-radius: var(--radius-sm); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; opacity: 0; visibility: hidden; /* Sin esto el globo se interpone bajo el puntero y parpadea. */ pointer-events: none; transition: opacity 120ms ease, visibility 120ms; } .pase__ico[data-tip]:hover::after, .pase__ico[data-tip]:focus-visible::after { opacity: 1; visibility: visible; } /* El precio de niño ocupa la ranura donde el billete dice «quedan 64», y en el mismo verde: en las dos es la línea que da una razón para seguir. */ .pase__nino { font-size: 0.72rem; font-weight: 600; color: var(--anden); } /* ============================================================ 7d. EL RIEL El andén: cada categoría del home ocupa UNA fila y el resto del catálogo se alcanza empujando. Componente en themes/estilo2/components/riel.blade.php. Escrito a mano igual que el pase, para poder cambiar el número de tarjetas por fila sin recompilar Tailwind. */ .e2-riel { position: relative; } .e2-riel__pista { display: flex; /* Explícito aunque sea el valor por omisión de flex: de esto depende que las tarjetas de una fila midan lo mismo y, con el CTA anclado al fondo, que los botones caigan en la misma línea. Es justo el tipo de cosa que se rompe sola si alguien toca `align-items` más arriba. */ align-items: stretch; /* Mismo ritmo horizontal que la rejilla que sustituye (gap-6 = 1.5rem), para que el cambio no descuadre el resto de la sección. */ gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* Ni la barra de scroll ni su hueco: el riel se maneja con las flechas, con el dedo o con el trackpad. */ scrollbar-width: none; -ms-overflow-style: none; /* El pase se levanta 2px y proyecta sombra al pasar el ratón. `overflow-y` NO puede ser `visible` junto a `overflow-x: auto` — el navegador lo fuerza a `auto` —, así que el respiro se da con padding y se devuelve con margen negativo para no mover nada de sitio. Sin esto la tarjeta sale recortada. */ padding: 0.5rem 0.25rem 0.75rem; margin: -0.5rem -0.25rem -0.75rem; } .e2-riel__pista::-webkit-scrollbar { display: none; } /* El ancho de la tarjeta lo pone el riel: `.pase` no declara ninguno, lo hereda del padre (antes, de la celda del grid). */ .e2-riel__pista > * { flex: 0 0 86%; /* Un item de flex trae `min-width: auto`, que le deja crecer por encima de su base si el contenido no cabe. Sin esto, un nombre de producto largo podría ensanchar la tarjeta y descuadrar la fila. */ min-width: 0; scroll-snap-align: start; } /* 2 por fila: 2 tarjetas + 1 hueco. */ @media (min-width: 640px) { .e2-riel__pista > * { flex-basis: calc((100% - 1.5rem) / 2); } } /* 4 por fila: 4 tarjetas + 3 huecos de 1.5rem = 4.5rem. */ @media (min-width: 1024px) { .e2-riel__pista > * { flex-basis: calc((100% - 4.5rem) / 4); } } .e2-riel__flecha { position: absolute; top: 50%; z-index: 10; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; transform: translateY(-50%); background-color: var(--surface-raised); color: var(--ink-1); border: 0; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-md); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .e2-riel__flecha:hover { /* Cantuta, la misma familia que .pase__cta:hover. */ background-color: var(--brand-600); color: #ffffff; } .e2-riel__flecha svg { width: 1.25rem; height: 1.25rem; } /* Sobresalen del contenedor: el px-4 de la sección les deja sitio y ningún padre recorta. */ .e2-riel__flecha--prev { left: -0.75rem; } .e2-riel__flecha--next { right: -0.75rem; } @media (min-width: 640px) { .e2-riel__flecha--prev { left: -1.25rem; } .e2-riel__flecha--next { right: -1.25rem; } } @media (prefers-reduced-motion: reduce) { .e2-riel__pista { scroll-behavior: auto; } } /* ================================================= 7c. LA CREDENCIAL Encabezado de la ficha de boleto: la página de conversión hablando el mismo idioma que la tarjeta. El código de circuito, en bloque de basalto a la izquierda, actúa de troquel. Ver themes/estilo2/public/tours/_encabezado.blade.php. */ .e2-credencial { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .e2-credencial__codigo { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 4.5rem; padding: 0.55rem 0.8rem 0.65rem; background-color: var(--surface-dark); color: var(--ink-inverse); border-radius: var(--radius-md); font-size: 1.75rem; line-height: 1; } .e2-credencial__codigo small { font-family: var(--font-sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.66; margin-bottom: 0.25rem; } .e2-credencial__ruta { margin: 0 0 0.15rem; color: var(--brand-700); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .e2-credencial__titulo { margin: 0; color: var(--ink-1); font-size: clamp(1.5rem, 3.4vw, 2.1rem); text-wrap: balance; } .e2-credencial__duracion { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0.25rem 0.7rem; background-color: var(--surface-3); border-radius: 999px; color: var(--ink-2); font-size: 0.82rem; } /* ------------------------------------------- 8. Contenido de los artículos articulos/show.blade.php trae un