/* Sección Reservas (#reservas .reservation) */ .reservation { position: relative; text-align: center; overflow: hidden; padding-bottom: var(--space-6); /* menos que el padding-block por defecto de section (base.css): con la insignia ya no hace falta tanto aire debajo del todo */ } .reservation-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Sin overlay: el fondo (pizarra.png) ya es prácticamente negro, un filtro encima solo aplanaría la textura de piedra sin aportar nada al contraste del texto. */ .reservation-inner { position: relative; z-index: 2; max-width: 34rem; margin-inline: auto; } /* Título como imagen (reserva-tu-mesa.png, recuperado de web/old con la misma tipografía distresed del logo) en vez de texto — ver context.md §17 sobre no referenciar web/old directamente */ .reservation-title { margin: 0; line-height: 0; } .reservation-title img { width: min(100%, 26rem); height: auto; margin-inline: auto; } /* Mismo botón "Reserva" que el banner de inicio (Forma 1 de hero.css): esquinas opuestas redondeadas + barra blanca animada recorriendo el borde. .hero-btn ya trae el color/tipografía base; aquí solo se replica la forma, porque en el hero esa forma depende de un selector de hijo directo (.hero-actions > .hero-btn) que no aplica fuera de esa sección. */ .reservation-inner .hero-btn { margin-top: var(--space-6); border-radius: 24px 6px 24px 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .reservation-inner .hero-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, transparent, #ffffff, transparent) no-repeat; background-size: 50% 100%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: border-sweep 3s ease-in-out infinite; /* @keyframes border-sweep viene de hero.css, cargado antes en */ pointer-events: none; } /* Insignia "Recomendado" — prueba social justo debajo del botón de reserva, en el flujo normal (la sección ya centra su contenido con text-align:center en .reservation) */ .reservation-badge-link { display: inline-block; margin-top: var(--space-6); width: clamp(190px, 40vw, 280px); border-radius: 0.75rem; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45)); transition: transform var(--transition); } .reservation-badge-link:hover, .reservation-badge-link:focus-visible { transform: translateY(-2px); } .reservation-badge-link img { width: 100%; height: auto; border-radius: 0.75rem; }