/* ========================================================================== ESTILOS — EMMAX Reservas (single page) Estructura: página con el collage de fondo, un "escenario" central donde vistas.js monta las vistas (splash → formulario → confirmación → gracias), el selector de idiomas flotante y el pie con el horario. ========================================================================== */ body { font-family: var(--fuente-principal); color: var(--color-texto); min-height: 100dvh; overflow-x: hidden; /* Columna: el escenario ocupa lo que sobra y el pie del horario queda SIEMPRE justo debajo. Si hay altura de sobra (laptop) el pie se ve sin hacer scroll; si el contenido es alto (móvil) empuja y hay que bajar. */ display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- Oculto visualmente pero LEGIBLE por buscadores y lectores de pantalla. El titular de la app es el logo (una imagen), así que el

de texto que necesitan Google y la accesibilidad se pinta con esta clase: no se ve, pero está en el DOM. NO usar display:none (eso sí lo ignoran ambos). -------------------------------------------------------------------------- */ .oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- RESPALDO SIN JAVASCRIPT — lo único que se ve si el JS no se ejecuta. Todo el contenido de la app lo pinta el JS, así que sin él la página queda en blanco: esta tarjeta da al menos el teléfono para llamar. Se estila con los mismos tokens que el resto (papel crema, tinta del logo), para que si aparece no parezca una pantalla de error. -------------------------------------------------------------------------- */ .respaldo-sin-js { max-width: 32rem; margin: 15dvh auto 0; padding: 2rem 1.5rem; border-radius: 1rem; background-color: var(--color-crema); box-shadow: var(--sombra); color: var(--color-negro); font-family: var(--fuente-principal); text-align: center; line-height: 1.6; & p { margin: 0 0 0.75rem; } & p:last-child { margin-bottom: 0; font-size: 0.9rem; opacity: 0.75; } /* El teléfono es LO IMPORTANTE de esta tarjeta: que se vea que se pulsa. */ & a { display: inline-block; margin-top: 0.25rem; padding: 0.5rem 1rem; border-radius: 2rem; background-color: var(--color-azul); color: var(--color-texto-invertido, #fff); font-weight: 600; text-decoration: none; white-space: nowrap; } } /* -------------------------------------------------------------------------- FONDO — el collage de postales, fijo detrás de todo. Va en un pseudo-elemento para poder animarlo (fade-in + Ken Burns) sin mover el layout. La animación vive en transiciones.css. -------------------------------------------------------------------------- */ .pagina::before { content: ""; position: fixed; inset: 0; z-index: -1; /* Mobile-first: por defecto el encuadre vertical */ background-image: var(--fondo-vertical); background-size: cover; background-position: center; animation: fondo-entrada 1.6s ease-out both; } /* Pantallas apaisadas (laptop, tablet horizontal o móvil girado): el encuadre horizontal. Usamos `orientation` y NO `min-width` porque lo que decide qué imagen encaja es la FORMA del viewport, no su anchura: un móvil girado es ancho y necesita la horizontal, y una ventana estrecha y alta la vertical. El navegador descarga solo la que aplica. */ @media (orientation: landscape) { .pagina::before { background-image: var(--fondo-horizontal); } } /* -------------------------------------------------------------------------- ESCENARIO — contenedor central de las vistas -------------------------------------------------------------------------- */ .escenario { /* Ocupa el alto que deje el pie (ver body) */ flex: 1; display: flex; flex-direction: column; align-items: center; /* Arriba, exactamente el alto de .barra-superior, que es fija: así el contenido queda pegado debajo sin que la barra llegue a pisarlo. */ padding: var(--altura-barra) 1rem 1rem; /* Cuánto sube el contenido respecto al centro EXACTO, en %: 0 = centrado clavado, 100 = pegado arriba del todo. En MÓVIL va a 100 (pegado bajo la barra), que es donde se ha ajustado campo a campo el espacio con el teclado abierto; el valor de laptop está en el @media de 60rem. */ --subida: 100; } /* Vistas cortas y "de celebración": en móvil se centran en el hueco, como siempre. Se mira QUÉ vista hay dentro (`:has`) en vez de darles `margin-block: auto` como antes, porque ese margen aquí ya no haría nada: los huecos de abajo son flexibles, y flex-grow reparte el espacio sobrante ANTES de que los márgenes automáticos puedan tocarlo — se quedan sin nada que repartir. */ .escenario:has(.splash), .escenario:has(.gracias) { --subida: 0; } /* Los dos huecos, arriba y abajo del contenido, hechos con pseudo-elementos. Reparten el espacio SOBRANTE en la proporción que marca --subida: con 15, 42.5% arriba y 57.5% abajo. Se hace así y no con `justify-content` ni con `margin: auto`, porque ambos centran a partes iguales y no admiten una proporción. La gracia añadida es que estos huecos tienen tamaño base 0 y NO encogen: cuando el contenido no cabe (un móvil bajo en el paso 3) valen cero y no roban ni un píxel ni añaden scroll, mientras que un padding fijo sí lo haría. */ .escenario::before, .escenario::after { content: ""; flex-basis: 0; flex-shrink: 0; } .escenario::before { flex-grow: calc(50 - var(--subida) / 2); } .escenario::after { flex-grow: calc(50 + var(--subida) / 2); } /* -------------------------------------------------------------------------- LOGO — el mismo elemento "viaja" entre vistas gracias a que en todas lleva view-transition-name: logo (ver transiciones.css). El logo va sobre tarjeta sólida, como una postal más del collage. -------------------------------------------------------------------------- */ /* OJO: el nesting nativo NO permite concatenar sufijos BEM (&--splash), así que las variantes van en selectores completos */ .logo { display: block; border-radius: var(--border-radius); box-shadow: var(--sombra); } /* Splash: grande y centrado, entra con la animación de aparición */ .logo--splash { width: min(80dvw, 26rem); animation: logo-entrada var(--t-splash) cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } /* Cabecera del formulario: discreto, para dejar sitio al formulario y ahorrar scroll (es el único sitio donde el logo no es protagonista). A la MITAD de alto que antes: cada píxel aquí es scroll en el móvil, y en el splash y en "gracias" el logo ya sale grande y de protagonista. */ .logo--cabecera { width: min(17dvw, 4.75rem); margin: 0 auto 0.7rem; } /* Reclamo bajo el logo, solo en la primera pantalla. Va SOBRE el collage, no dentro de la tarjeta, así que lleva fondo propio para leerse sobre cualquier zona. Y va envuelto en el componente borde-brillante, que le pone el borde animado: es lo primero que ve el comensal y así engancha la vista. La envoltura solo ajusta el componente a esta pieza; el efecto es suyo. */ /* OJO a la doble clase: borde-brillante.css se carga DESPUÉS de este archivo, así que con un solo `.reserva__reclamo-borde` sus valores por defecto ganaban por orden de cascada y estos ajustes no se aplicaban (el radio salía 20px en vez de 50). Con `.borde-brillante` delante, la regla es más específica. */ .borde-brillante.reserva__reclamo-borde { /* Forma de píldora, más fino y algo más rápido que en la tarjeta de gracias: aquí es un adorno pequeño, no el protagonista */ --brillo-radio: 50px; --brillo-grosor: 2px; --brillo-velocidad: 5s; --brillo-desenfoque: 8px; --brillo-opacidad: 0.45; --brillo-superficie: var(--campo-fondo); width: fit-content; margin: -0.2rem auto 0.9rem; } /* La frase debe caber en UNA línea: la píldora con dos líneas se convierte en un óvalo. El español es el más largo de los tres idiomas y medía 365px de los 375 de un iPhone SE, así que en móviles de 360px (Galaxy, Pixel) se partía. De ahí que el tamaño y el aire laterales encojan con la pantalla (vw) en vez de ser fijos: así entra de una línea hasta ~300px de ancho. Los topes de clamp() mantienen el tamaño de siempre en pantallas grandes. */ .reserva__reclamo { padding: 0.45rem clamp(0.6rem, 3vw, 1.1rem); text-align: center; font-size: clamp(0.72rem, 3.3vw, 0.85rem); font-weight: 500; letter-spacing: 0.02em; text-wrap: balance; /* si algún día no cupiera, parte por donde menos duele */ } /* Vista de gracias: la mitad de grande que antes. Ocupando media pantalla se comía la vista y dejaba en segundo plano el mensaje, que es lo que hay que leer aquí ("su reserva no es definitiva hasta que se la confirmemos"). */ .logo--gracias { width: min(35dvw, 11rem); margin: 0 auto 1.5rem; } /* -------------------------------------------------------------------------- FORMULARIO — tarjeta "liquid glass" sobre el collage -------------------------------------------------------------------------- */ .reserva { width: 100%; max-width: 28rem; } .formulario { /* Rejilla de 2 columnas: los campos largos ocupan la fila entera y los cortos (.campo--medio: teléfono, fecha, hora, comensales) se emparejan solos de dos en dos */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; padding: 1.5rem 1.25rem; border-radius: calc(var(--border-radius) + 6px); background: var(--vidrio-fondo); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra); /* El efecto líquido: desenfoca y satura lo que hay detrás */ backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); /* Cada campo (label + control) */ & .campo { grid-column: span 2; display: flex; flex-direction: column; gap: 0.3rem; &.campo--medio { grid-column: span 1; } & label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Aclaración bajo el campo (p. ej. "Opción sujeta a disponibilidad"): discreta, que informe sin competir con la etiqueta */ & .campo__nota { font-size: 0.72rem; font-style: italic; line-height: 1.35; opacity: 0.7; /* Respeta los \n del texto: así una aclaración larga se parte donde nosotros queramos en vez de ensanchar el campo */ white-space: pre-line; } & input, & select, & textarea { font-family: inherit; font-size: 1rem; padding: 0.55rem 0.75rem; border-radius: var(--border-radius); border: 1px solid var(--campo-borde); background: var(--campo-fondo); color: var(--color-texto); outline: none; transition: border-color var(--t-rapido), box-shadow var(--t-rapido); &:focus { border-color: var(--color-acento); box-shadow: 0 0 0 3px rgba(43, 78, 162, 0.2); } } /* Peticiones especiales. `resize: none` porque el alto lo fija el CSS y dejar que se estire a mano descuadra la tarjeta; el texto sigue desplazándose dentro si es largo. */ & textarea { resize: none; line-height: 1.4; } } /* Opciones tipo píldora (salón/terraza, primera visita): radios ocultos + etiquetas clicables */ & .opciones { display: flex; gap: 0.5rem; & input[type="radio"] { /* Oculto pero accesible (focus visible en la píldora) */ position: absolute; opacity: 0; pointer-events: none; } & .opciones__pildora { flex: 1; text-align: center; padding: 0.5rem 0.6rem; border-radius: 50px; border: 1px solid var(--pildora-borde); background: var(--pildora-fondo); font-size: 0.95rem; cursor: pointer; transition: background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido); } & input[type="radio"]:checked + .opciones__pildora { background: var(--color-primario); color: var(--color-texto-invertido); border-color: var(--color-primario); } & input[type="radio"]:focus-visible + .opciones__pildora { box-shadow: 0 0 0 3px rgba(43, 78, 162, 0.35); } } /* Campo TRAMPA contra bots (honeypot). Lo sacamos de la pantalla en vez de usar display:none porque muchos bots ignoran los campos ocultos así; fuera de viewport lo rellenan igual y se delatan. Invisible para una persona, y sin ocupar sitio en la rejilla. */ & .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Aclaración de un campo de MEDIA fila (comensales): ocupa las dos columnas justo debajo de su fila, así entra de una línea y los dos controles de arriba siguen alineados. */ & .nota-fila { grid-column: span 2; margin-top: -0.45rem; /* pegada a la fila de la que habla */ font-size: 0.72rem; font-style: italic; line-height: 1.35; opacity: 0.7; } /* Nota de campos obligatorios */ & .nota-campos { grid-column: span 2; font-size: 0.75rem; text-align: center; opacity: 0.75; } /* Aviso de "esto es para dentro de nada", al elegir la hora. En ROJO y con el mismo texto que en la pantalla de gracias (decisión de Manu): es el mismo mensaje, así que se ve igual en los dos sitios. Sigue SIN bloquear el envío —la reserva es válida, solo puede no dar tiempo a confirmarla—, el rojo es solo para que no pase desapercibido. */ & .nota-inminente { grid-column: span 2; display: none; font-size: 0.85rem; font-weight: 600; line-height: 1.4; color: var(--color-error); text-align: center; &.activa { display: block; animation: aviso-entrada var(--t-rapido) ease-out; } } /* Aviso de validación (campos vacíos o día cerrado) */ & .aviso { grid-column: span 2; display: none; font-size: 0.9rem; font-weight: 600; color: var(--color-error); text-align: center; white-space: pre-line; &.activo { display: block; animation: aviso-entrada var(--t-rapido) ease-out; } } /* Botón de enviar */ & .boton-enviar { grid-column: span 2; font-family: inherit; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.8rem; margin-top: 0.3rem; border-radius: 50px; background: var(--color-primario); color: var(--color-texto-invertido); cursor: pointer; transition: transform var(--t-rapido), letter-spacing var(--t-rapido); /* HOVER SIN COLOR (decisión de Manu, 28/07): el botón NO cambia de tono, se abre el tracking del texto. El acento del cliente se quedaba en el hover, así que cada app nueva heredaba un hover de otro color; con el texto animado, el par blanco/negro vale para toda la flota sin tocar nada. Solo en punteros de verdad: en móvil el hover no existe. */ @media (hover: hover) { &:hover { letter-spacing: 0.14em; transform: scale(1.02); } } &:active { transform: scale(0.97); } } } /* -------------------------------------------------------------------------- LAPTOP — la tarjeta se ensancha y el formulario pasa a 4 columnas. En pantallas anchas, dos columnas estrechas dejaban el formulario alto y obligaban a hacer scroll teniendo espacio de sobra a los lados. Con cuatro columnas cabe casi entero de un vistazo. -------------------------------------------------------------------------- */ @media (min-width: 60rem) { /* En laptop la barra superior estorba menos y sobra altura: con la mitad de hueco arriba el contenido queda mejor centrado */ .escenario { padding-top: 2.5rem; } /* Aquí sí sobra altura de verdad (medido: el formulario ocupaba 439px de 900 y dejaba 365 muertos por debajo), así que el contenido se centra pero un 15% por encima del centro exacto: centrado a ras parece caído. ESTE es el número a tocar para subirlo o bajarlo. Van los tres selectores y no solo `.escenario` para poder repetir los de `:has`: son más específicos, así que sin nombrarlos aquí seguirían con el 0 de móvil y splash y gracias se quedarían abajo mientras el resto sube. */ .escenario, .escenario:has(.splash), .escenario:has(.gracias) { --subida: 15; } .reserva, .confirmacion { max-width: 46rem; } .formulario { /* 12 columnas (no 4): se divide entre 3 y entre 4, así cada fila se reparte EXACTA y no queda un hueco muerto a la derecha. Es lo que hace que el formulario se vea centrado en vez de pegado a un lado. */ grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 1.75rem 1.5rem; /* Anchos POR CAMPO, no por posición: cada uno lleva el suyo mire el paso que mire, así que repartir los campos de otra forma en config.campos no descoloca nada. · fecha + hora + comensales → 4/12 cada uno (fila exacta) · zona y primera visita → fila entera, apiladas y centradas · peticiones → fila entera (es texto largo) · nombre (9/12) + teléfono (3/12) → una fila */ & .campo { grid-column: span 6; } & .campo.campo--medio { grid-column: span 4; } & .campo.campo--nombre { grid-column: span 9; } & .campo.campo--telefono { grid-column: span 3; } /* La aclaración de grupos va a lo ancho bajo su fila: con fecha, hora y comensales ocupando tres cuartos, en el cuarto restante saldría en columna estrecha y muy alta. */ & .nota-fila, & .nota-inminente { grid-column: span 12; text-align: center; } /* Las dos preguntas de píldoras se APILAN y van CENTRADAS: ocupan el ancho entero, pero las píldoras se limitan para no estirarse de lado a lado, y con ellas se centran su etiqueta y su aclaración, para que cada pregunta se lea como un bloque completo y no descolgada. */ /* Peticiones especiales: fila entera, es un campo de texto largo */ & .campo.campo--peticiones { grid-column: span 12; } & .campo.campo--zona, & .campo.campo--primeraVisita { grid-column: span 12; text-align: center; /* OJO: ancho explícito, no max-width. Con max-width + margin auto, al ser un elemento flexible en columna, el contenedor se encogía a su contenido y "DINING ROOM" se partía en dos líneas por 2px. */ & .opciones { width: min(26rem, 100%); margin-inline: auto; } } & .nota-campos, & .aviso, & .boton-enviar { grid-column: span 12; } } } /* -------------------------------------------------------------------------- FORMULARIO POR PASOS — barra de progreso, título y navegación El formulario se reparte en 3 pantallas (ver `paso` en config.campos): en móvil, con el teclado abierto, 8 campos de golpe obligaban a un scroll a ciegas. El cuarto círculo es la confirmación, que ya existía. -------------------------------------------------------------------------- */ .progreso { grid-column: 1 / -1; display: flex; justify-content: space-between; position: relative; margin-bottom: 0.4rem; list-style: none; /* Línea que une los círculos, por detrás */ &::before, &::after { content: ""; position: absolute; top: 13px; /* mitad del círculo */ left: 13px; right: 13px; height: 2px; background: var(--pildora-borde); } /* La parte ya recorrida, en el color de marca. El ancho lo pone el JS en --avance (fracción de pasos completados). */ &::after { right: auto; width: calc((100% - 26px) * var(--avance, 0%) / 100%); background: var(--color-primario); transition: width var(--t-medio) ease; } } .progreso__paso { position: relative; /* por encima de las líneas */ display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex: 1; } .progreso__numero { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pildora-borde); background: var(--campo-fondo); font-size: 0.78rem; font-weight: 600; transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido); } .progreso__texto { font-size: 0.62rem; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.65; text-align: center; } /* Paso ya completado y paso actual: ambos en el color de marca, el actual además con un halo para distinguirlo de un vistazo */ .progreso__paso.hecho .progreso__numero, .progreso__paso.actual .progreso__numero { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-texto-invertido); } .progreso__paso.actual .progreso__numero { box-shadow: 0 0 0 4px rgba(43, 78, 162, 0.18); } .progreso__paso.actual .progreso__texto { opacity: 1; font-weight: 600; } /* Título de la pantalla ("¿Quién reserva?") */ .paso__titulo { grid-column: 1 / -1; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.2rem; } /* Atrás + Siguiente en la misma fila */ .paso__navegacion { grid-column: 1 / -1; display: flex; gap: 0.6rem; margin-top: 0.3rem; /* El principal (Siguiente/Enviar) manda: se lleva el espacio sobrante */ & .boton-enviar { flex: 1; margin-top: 0; } } .boton-atras { flex: 0 0 auto; padding: 0.8rem 1.2rem; border-radius: 50px; border: 1px solid var(--boton-secundario-borde); background: transparent; color: var(--color-primario); font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: background var(--t-rapido), border-color var(--t-rapido), letter-spacing var(--t-rapido), padding var(--t-rapido), transform var(--t-rapido); /* Mismo gesto de texto que los botones sólidos, pero aquí SUMADO al hover de contorno que ya tenía (que no lleva color de cliente: es un blanco translúcido), no en su lugar. OJO al `flex: 0 0 auto`: este botón lo mide su texto, así que al abrir el tracking CRECE y le robaría sitio al "Siguiente" de al lado, que es `flex: 1`. Para que el vecino no salte, lo que gana en tracking se le quita de padding y el ancho total se queda igual. Los dos números van EN PAREJA: +0.06em de tracking son 0.96px por letra, y las etiquetas tienen de 4 a 6 (BACK / ATRÁS / ZURÜCK), o sea entre 3.8 y 5.8px. Se compensa por el medio —0.15rem menos de padding por lado, 4.8px en total—, así que el vecino se mueve como mucho 1px en cualquier idioma. Si se cambia uno de los dos valores, recalcular el otro. */ @media (hover: hover) { &:hover { border-color: var(--color-primario); background: var(--boton-secundario-hover); padding-inline: 1.05rem; letter-spacing: 0.1em; } } &:active { transform: scale(0.97); } } /* -------------------------------------------------------------------------- VISTA CONFIRMACIÓN — resumen de la reserva + mensaje antes de enviar. Reutiliza la misma tarjeta "liquid glass" del formulario para que el paso se sienta parte del mismo flujo. -------------------------------------------------------------------------- */ .confirmacion { width: 100%; max-width: 28rem; } .confirmacion__tarjeta { padding: 1.5rem 1.25rem; border-radius: calc(var(--border-radius) + 6px); background: var(--vidrio-fondo); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } .confirmacion__titulo { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; text-align: center; margin-bottom: 0.35rem; line-height: 1.3; } /* Segunda frase del título ("le confirmaremos lo antes posible"): es lo que pasa DESPUÉS de enviar, no lo que hay que hacer aquí, así que va en tamaño de texto normal y sin negrita. Con el mismo peso que el titular eran tres líneas gordas en móvil compitiendo entre sí. */ .confirmacion__subtitulo { margin-bottom: 1.1rem; font-size: 0.9rem; text-align: center; line-height: 1.35; opacity: 0.8; } /* Resumen "etiqueta: valor" en dos columnas (label izquierda, dato derecha) */ /* El mensaje EXACTO que recibirá el restaurante, a modo de cita */ .confirmacion__mensaje { padding: 0.85rem 1rem; border-radius: var(--border-radius); border-left: 3px solid var(--color-acento); background: var(--cita-fondo); font-size: 0.95rem; line-height: 1.5; white-space: pre-line; } /* Botones: editar (secundario, contorno) + enviar (primario, protagonista). El .boton-enviar del formulario está anidado en .formulario y no llega aquí, así que estos botones tienen sus propios estilos. */ .confirmacion__acciones { display: flex; gap: 0.6rem; margin-top: 1.2rem; /* `a` además de `button` porque el de enviar es un ENLACE de verdad (lleva el href de WhatsApp: aguanta mucho mejor dentro del navegador de Instagram). Sin nombrarlo aquí se quedaba sin tipografía, sin forma de píldora y sin el subrayado quitado. */ & button, & a { /* Centra el texto del enlace igual que lo hace un botón por su cuenta */ display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.8rem 1rem; border-radius: 50px; cursor: pointer; transition: transform var(--t-rapido), letter-spacing var(--t-rapido), padding var(--t-rapido), background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido); &:active { transform: scale(0.97); } } & .boton-editar { flex: 0 0 auto; background: transparent; color: var(--color-primario); border: 1px solid var(--boton-secundario-borde); /* Gemelo del .boton-atras: mismo hover de contorno MÁS el gesto de texto, y la misma compensación de padding porque también lo mide su contenido (el "Enviar por WhatsApp" de al lado es flex:1 y saltaría). Aquí las etiquetas se separan más que en el Atrás —Edit(4), Editar(6), Bearbeiten(10)—, así que los 0.96px por letra van de 3.8 a 9.6px: se compensa por el medio, 0.21rem menos de padding por lado. Es el que peor ajusta de los dos, ±3px según el idioma, y aun así no se nota. */ @media (hover: hover) { &:hover { border-color: var(--color-primario); background: var(--boton-secundario-hover); padding-inline: 0.79rem; letter-spacing: 0.12em; } } } & .boton-enviar-wa { flex: 1; background: var(--color-primario); color: var(--color-texto-invertido); /* Mismo hover sin color que el .boton-enviar del formulario: se abre el tracking, el tono no se toca (ver la nota larga allí) */ @media (hover: hover) { &:hover { letter-spacing: 0.12em; transform: scale(1.02); } } } } /* -------------------------------------------------------------------------- VISTA GRACIAS -------------------------------------------------------------------------- */ .gracias { width: 100%; max-width: 28rem; text-align: center; } /* La tarjeta es la superficie del componente borde-brillante: el fondo y el radio los pone él. Va SÓLIDA a propósito (no liquid glass): este mensaje contiene un aviso importante y tiene que leerse sin competir con el collage */ .gracias__tarjeta { padding: 1.25rem 1.5rem; box-shadow: var(--sombra); } .gracias__texto { font-size: 1.15rem; line-height: 1.5; white-space: pre-line; } /* Refuerzo permanente: la reserva no es firme hasta que se confirma */ .gracias__aviso { margin-top: 0.85rem; font-size: 0.95rem; font-weight: 600; line-height: 1.45; } /* "Cómo llegar" en la pantalla de gracias: acción de cortesía, con el mismo aire de píldora que los controles pero secundario — el protagonista sigue siendo el mensaje de la reserva. Es un