/* ============================================================================ TT-FORMS — sistema de formularios de TicoTrip ---------------------------------------------------------------------------- Nace de tres quejas concretas de Edwin sobre el modal de reserva en móvil: 1. "las letras no son legibles, no tienen separación correcta" Causa real, DOBLE: a) La regla global `h1,h2,h3,h4 { font-family: Anton; uppercase; letter-spacing: 0 }` mete una tipografía de CARTEL (Anton: un solo peso, ultra condensada, pensada para 100px) en texto funcional de 18px. Los trazos se tocan. El h3 del modal encima lo empeoraba con letter-spacing NEGATIVO (-.01em). b) La web carga Oswald en 300/400/500, pero el CSS pedía 600 y 700. El navegador FALSIFICA esos pesos engrosando el contorno, y en una condensada eso cierra los huecos internos. Doble apelmazamiento. 2. "las fechas se ven feas" Era un del sitio — también el "Destino de interés" del modal del home y el planificador, que NO están dentro de .modal-reserva. Cuando los tokens vivían solo ahí, esos triggers pedían variables inexistentes: sin fondo, sin borde, "el botón sale sin color" (reporte de Edwin, 26-ago). Todos los campos del sitio son claros por dentro (blanco/crema + texto olivo), así que un solo juego global sirve en cualquier contexto, incluido el planificador de fondo oscuro. */ :root { --ttf-ink: #1F2818; /* olivo — texto principal */ --ttf-muted: #5C6938; /* salvia — texto secundario */ --ttf-faint: #8B7F5A; /* apagado — placeholders */ --ttf-ground: #F2EBDD; /* crema — fondo del modal */ --ttf-surface: #FFFFFF; /* campos y panel */ --ttf-tint: #F8F3E8; /* hover suave */ --ttf-line: #D9CDB8; /* bordes */ --ttf-gold: #D9A441; --ttf-accent: #D17F1E; /* naranja de acción */ --ttf-ok: #2E7D32; --ttf-bad: #C53030; /* Curvas fuertes: las nativas de CSS son demasiado tímidas y hacen que la interfaz se sienta lenta. ease-out para entradas (arranca rápido = se siente que responde al instante). NUNCA ease-in en UI. */ --ttf-out: cubic-bezier(.23, 1, .32, 1); --ttf-inout: cubic-bezier(.77, 0, .175, 1); } /* ══════════════════════════════════════════════════════════════════ 1 · REPARACIÓN TIPOGRÁFICA ══════════════════════════════════════════════════════════════════ */ /* Título del modal — momento display, se queda en Anton pero con aire. Anton en mayúsculas necesita tracking POSITIVO o los palos se juntan. */ .modal-reserva.modal-reserva .modal-title { font-family: var(--font-display, 'Anton', Impact, sans-serif); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 5.4vw, 30px); line-height: 1.08; letter-spacing: .022em; color: var(--ttf-ink); margin: 0 0 26px; padding-right: 44px; } /* Título del paso — sigue siendo Anton (es la voz de la marca) pero deja de apelmazarse: tracking positivo en vez de negativo. */ .modal-reserva.modal-reserva .step h3 { font-family: var(--font-display, 'Anton', Impact, sans-serif); font-weight: 400; text-transform: uppercase; font-size: clamp(21px, 5vw, 27px); line-height: 1.12; letter-spacing: .02em; color: var(--ttf-ink); margin: 0 0 8px; } /* Título de cada opción — ACÁ ESTABA EL PEOR PROBLEMA. Anton en mayúsculas a 18px era un muro de letras. Pasa a Oswald en caja normal: se lee de un vistazo y además crea jerarquía real (Anton = paso, Oswald = opción). */ .modal-reserva.modal-reserva .card-option h4 { font-family: var(--font-sans, 'Oswald', system-ui, sans-serif); font-weight: 500; text-transform: none; font-size: 17px; line-height: 1.3; letter-spacing: .004em; color: var(--ttf-ink); margin: 0 0 7px; text-wrap: balance; } /* Etiquetas de campo — 700 falsificado → 500 real, más pequeñas y con tracking. Se leen como etiquetas, no como gritos. */ .modal-reserva.modal-reserva .field label { font-family: var(--font-sans, 'Oswald', system-ui, sans-serif); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ttf-muted); margin-bottom: 9px; } .modal-reserva.modal-reserva .step-desc { font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--ttf-muted); margin: 0 0 26px; max-width: 46ch; } /* Línea de meta de cada tarjeta. Los espacios duros del HTML impiden que quiebre dentro de un segmento; acá solo se afina el ritmo. */ .modal-reserva.modal-reserva .card-option p { font-family: var(--font-sans, 'Oswald', system-ui, sans-serif); font-weight: 300; font-size: 12px; letter-spacing: .045em; line-height: 1.5; color: var(--ttf-muted); margin: 0; text-wrap: pretty; } .modal-reserva.modal-reserva .card-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .16em; color: var(--ttf-accent); margin-bottom: 9px; } /* ══════════════════════════════════════════════════════════════════ 2 · TARJETAS DE OPCIÓN — estado, foco y respuesta al toque ══════════════════════════════════════════════════════════════════ */ .modal-reserva.modal-reserva .card-option { padding: 18px 46px 18px 18px; /* sitio a la derecha para la marca */ border: 1.5px solid var(--ttf-line); border-radius: 14px; background: var(--ttf-surface); /* Propiedades explícitas, nunca `all`: `all` anima cosas que no querés y obliga al navegador a vigilarlas todas. */ transition: border-color .18s var(--ttf-out), background-color .18s var(--ttf-out), box-shadow .18s var(--ttf-out), transform .14s var(--ttf-out); } /* Marca de selección: hasta ahora el único indicio de "elegido" era un cambio de borde. Ahora hay un círculo que se llena, como un radio de verdad. */ .modal-reserva.modal-reserva .card-option::after { content: ""; position: absolute; top: 50%; right: 17px; width: 21px; height: 21px; margin-top: -10.5px; border: 1.5px solid var(--ttf-line); border-radius: 50%; background: transparent no-repeat center/11px 11px; transition: border-color .18s var(--ttf-out), background-color .18s var(--ttf-out); } .modal-reserva.modal-reserva .card-option:has(input:checked) { border-color: var(--ttf-accent); background: rgba(217, 164, 65, .09); box-shadow: 0 6px 18px -8px rgba(209, 127, 30, .38); } .modal-reserva.modal-reserva .card-option:has(input:checked)::after { border-color: var(--ttf-accent); background-color: var(--ttf-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E"); } /* El hover solo donde hay puntero de verdad: en táctil se dispara al tocar y deja la tarjeta "pegada" en estado hover. */ @media (hover: hover) and (pointer: fine) { .modal-reserva.modal-reserva .card-option:hover { border-color: var(--ttf-accent); background: var(--ttf-tint); } .modal-reserva.modal-reserva .card-option:hover::after { border-color: var(--ttf-accent); } } /* Respuesta al toque: sin esto la tarjeta no acusa recibo del dedo. */ .modal-reserva.modal-reserva .card-option:active { transform: scale(.99); } /* ACCESIBILIDAD — el radio real es opacity:0, así que quien navega con teclado no veía DÓNDE estaba parado. Ahora el foco se ve. */ .modal-reserva.modal-reserva .card-option:has(input:focus-visible) { outline: 2px solid var(--ttf-accent); outline-offset: 3px; border-color: var(--ttf-accent); } .modal-reserva.modal-reserva .card-option.error { border-color: var(--ttf-bad); background: rgba(197, 48, 48, .04); } /* Entrada escalonada: las tarjetas no aparecen todas de golpe. Decorativo y corto — pasado 80ms por tarjeta la interfaz se siente lenta. */ .modal-reserva.modal-reserva .step.active .card-option { animation: ttfCardIn .34s var(--ttf-out) backwards; } .modal-reserva.modal-reserva .step.active .card-option:nth-child(1) { animation-delay: .04s } .modal-reserva.modal-reserva .step.active .card-option:nth-child(2) { animation-delay: .09s } .modal-reserva.modal-reserva .step.active .card-option:nth-child(3) { animation-delay: .14s } @keyframes ttfCardIn { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } } /* ══════════════════════════════════════════════════════════════════ 3 · CAMPOS ══════════════════════════════════════════════════════════════════ */ .modal-reserva.modal-reserva .field input[type="text"], .modal-reserva.modal-reserva .field input[type="email"], .modal-reserva.modal-reserva .field input[type="tel"], .modal-reserva.modal-reserva .field textarea { border: 1.5px solid var(--ttf-line); border-radius: 12px; padding: 15px 16px; font-family: var(--font-sans, 'Oswald', system-ui, sans-serif); font-weight: 400; /* 16px exactos: por debajo de eso iOS hace zoom al enfocar y descoloca todo el modal. Es la razón del número, no un capricho estético. */ font-size: 16px; color: var(--ttf-ink); transition: border-color .18s var(--ttf-out), box-shadow .18s var(--ttf-out); } .modal-reserva.modal-reserva .field input::placeholder, .modal-reserva.modal-reserva .field textarea::placeholder { color: var(--ttf-faint); font-weight: 300; } .modal-reserva.modal-reserva .field input:focus, .modal-reserva.modal-reserva .field textarea:focus { outline: none; border-color: var(--ttf-accent); border-width: 1.5px; box-shadow: 0 0 0 3.5px rgba(209, 127, 30, .16); background: var(--ttf-surface); } /* ══════════════════════════════════════════════════════════════════ 4 · TT-SELECT — el desplegable propio ------------------------------------------------------------------ El