/* ============================================================================ Eventos El Rodeo · componentes del sitio (web.css) ---------------------------------------------------------------------------- Encima de base.css (tokens, botones, motor de revelados). Aquí viven los componentes de página y la coreografía fina. Todo CSS del navegador: cero librerías, cero listeners de scroll, y prefers-reduced-motion lo apaga todo (el bloque final de base.css ya lo hace). ========================================================================= */ /* Sin @import a base.css a propósito: los dos van enlazados desde el de cada página, en orden. Un @import no se descubre hasta que este fichero ha llegado entero, así que encadenaba tres descargas en fila —web, base, fuentes— con el render parado en cada una. Enlazados, el navegador los pide a la vez. Si se añade una página nueva, tiene que enlazar los tres. */ /* La web pública vive SIEMPRE en la noche: es la marca. */ body { background: var(--noche); color: var(--sobre-foto); } a { color: var(--champan); } ::selection { background: var(--champan); color: #191813; } /* ── Utilidades de página ──────────────────────────────────────────────── */ .seccion--carbon { background: var(--carbon); } .centrado { text-align: center; } .centrado p { margin-inline: auto; } .medida { max-width: 62ch; margin-inline: auto; } .texto-suave { color: var(--salvia); } /* Cabecera de sección: etiqueta + título + raya que se dibuja al llegar */ .cab-seccion { margin-bottom: 2.4rem; } .cab-seccion .etiqueta { color: var(--champan); } .cab-seccion h2 { font-size: var(--t-h2); margin-top: 0.7rem; } @supports (animation-timeline: view()) { .cab-seccion .regla { animation: ke-regla linear both; animation-timeline: view(); animation-range: entry 20% entry 70%; } @keyframes ke-regla { from { width: 0; opacity: 0; } to { width: 64px; opacity: 1; } } .regla--izquierda.regla { animation-name: ke-regla-izq; } @keyframes ke-regla-izq { from { width: 0; opacity: 0; } to { width: 64px; opacity: 1; } } } /* ── Navegación: transparente sobre el hero, cristal al bajar ─────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem clamp(1.25rem, 4vw, 3rem); } .nav__marca { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-size: 1.22rem; color: var(--sobre-foto); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; } .nav__marca img { width: 24px; height: 24px; } .nav ul { display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .nav ul a { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sobre-foto-suave); text-decoration: none; transition: color var(--rapido) var(--curva); } .nav ul a:hover { color: var(--champan); } /* El cristal: se materializa conforme la página baja. Con timeline de scroll es progresivo; sin soporte, el fondo va fijo desde el principio (peor es una nav ilegible sobre contenido claro). */ .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(20 20 18 / 0.86); border-bottom: 1px solid rgb(217 184 119 / 0.16); backdrop-filter: blur(10px); } @supports (animation-timeline: scroll()) { .nav::before { opacity: 0; animation: ke-nav linear both; animation-timeline: scroll(); animation-range: 0 240px; } @keyframes ke-nav { to { opacity: 1; } } } /* ── La flor mágica: la insignia real y la moderna, girando como moneda ── Dos caras en 3D: la flor dorada de verdad (la insignia de la casa) y su redibujo vectorial. Giro lento con pausas: cada cara se deja mirar. En reducción de movimiento se queda quieta la real, que es la de siempre. */ .flor-magica { position: relative; display: inline-block; width: 26px; height: 26px; vertical-align: -5px; perspective: 220px; } .flor-magica > span { position: absolute; inset: 0; transform-style: preserve-3d; } .flor-magica img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; } .flor-magica img:last-child { transform: rotateY(180deg); } /* El polvo de hadas: dos capas de chispas (pseudoelementos con box-shadows múltiples) que estallan EXACTAMENTE cuando la moneda voltea. La segunda capa va desfasada medio ciclo (-4,5 s de 9 s), así que cubre el segundo volteo con las mismas fotogramas. El halo dorado viaja dentro de la misma sombra. */ .flor-magica::before, .flor-magica::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #fff3d0; pointer-events: none; opacity: 0; box-shadow: 10px -8px 0 -1px #d9b877, -11px -5px 0 0 #fff3d0, 8px 9px 0 -1px #d9b877, -8px 10px 0 -1.5px #ffe9b8, 13px 2px 0 -1.5px #fff3d0, -14px 1px 0 -1px #d9b877, 2px -13px 0 -1.5px #ffe9b8, -3px 13px 0 -1px #fff3d0, 0 0 12px 5px rgb(217 184 119 / 0.35); } @media (prefers-reduced-motion: no-preference) { .flor-magica > span { animation: ke-flor 9s cubic-bezier(0.68, -0.3, 0.32, 1.3) infinite; } @keyframes ke-flor { 0% { transform: rotateY(0deg); } 38% { transform: rotateY(0deg); } /* la real, quieta y mirándote */ 50% { transform: rotateY(180deg); } 88% { transform: rotateY(180deg); } /* la moderna, su momento */ 100% { transform: rotateY(360deg); } } /* La neblina va en las CARAS, nunca en el elemento 3D: un filter sobre el que gira aplana el preserve-3d y el truco de las dos caras muere. */ .flor-magica img { animation: ke-neblina 9s linear infinite; } /* La flor moderna, en su turno (50%-88% del ciclo), gira sobre sí misma con INERCIA: arranca lanzada y se va frenando como una peonza. Su transform lleva SIEMPRE el rotateY(180deg) de cara trasera dentro de los fotogramas: si se quedara fuera, la animación lo pisaría y la cara se desalinearía. */ .flor-magica img:last-child { animation: ke-neblina 9s linear infinite, ke-peonza 9s linear infinite; } @keyframes ke-peonza { 0%, 50% { transform: rotateY(180deg) rotate(0deg); } 57% { transform: rotateY(180deg) rotate(520deg); } /* el latigazo */ 66% { transform: rotateY(180deg) rotate(650deg); } 76% { transform: rotateY(180deg) rotate(700deg); } 88% { transform: rotateY(180deg) rotate(720deg); } /* frenada suave */ 100% { transform: rotateY(180deg) rotate(720deg); } } @keyframes ke-neblina { 0%, 36% { filter: blur(0) brightness(1); } 44% { filter: blur(2.5px) brightness(1.5); } 52%, 86% { filter: blur(0) brightness(1); } 94% { filter: blur(2.5px) brightness(1.5); } 100% { filter: blur(0) brightness(1); } } .flor-magica::before { animation: ke-polvo 9s linear infinite; } .flor-magica::after { animation: ke-polvo 9s linear infinite; animation-delay: -4.5s; transform: translate(-50%,-50%) rotate(48deg); } @keyframes ke-polvo { 0%, 37% { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(0deg); } 44% { opacity: 1; transform: translate(-50%,-50%) scale(1.05) rotate(25deg); } 56% { opacity: 0; transform: translate(-50%,-50%) scale(1.7) rotate(70deg); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(70deg); } } } @media (prefers-reduced-motion: reduce) { .flor-magica img:last-child { display: none; } .flor-magica::before, .flor-magica::after { display: none; } } /* ── Hero de portada: Ken Burns + parallax + entrada coreografiada ─────── */ .hero { position: relative; background: var(--noche); overflow: hidden; } .hero__foto { position: absolute; inset: -8% 0; } .hero__foto picture { width: 100%; height: 100%; display: block; } .hero__foto img { width: 100%; height: 100%; object-fit: cover; } /* Ken Burns: un acercamiento lentísimo al cargar. Una sola vez y quieto. */ @media (prefers-reduced-motion: no-preference) { .hero__foto img { animation: ke-burns 16s var(--curva) both; } @keyframes ke-burns { from { transform: scale(1.12); } to { transform: scale(1.02); } } } /* El velo. El centro sube de 0,40 a 0,52 y no es capricho: el viñeteado dejaba la zona MENOS oscurecida justo en el centro, que es exactamente donde va el texto. Medido sobre la captura, el subtítulo se quedaba en 3,89:1 contra la parte soleada del césped —por debajo del 4,5:1 que pide un texto de ese cuerpo—. Con 0,52 sube a 5,11:1 y el titular a 5,78:1, y la foto sigue viéndose: doce centésimas no se notan mirando, pero sí leyendo a pleno sol. */ .hero__velo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgb(20 20 18 / 0.52) 0%, rgb(20 20 18 / 0.74) 64%, rgb(20 20 18 / 0.93) 100%); } /* La miga de las páginas interiores va sobre la foto del hero, y ahí la salvia se queda en 2,76:1. Sobre foto mandan los roles fijos, como ya dice base.css. Subrayada porque al perder el color de enlace hay que seguir distinguiéndola. */ /* Crema PLENO y no el suave: medido sobre las cinco portadas interiores, el suave se quedaba en 4,33:1 contra la parte mas clara del fondo a esa altura y el pleno sube a 4,89:1. Ocho centesimas de color salen mas baratas que seguir oscureciendo la fotografia. Subrayada porque al dejar el color de enlace hay que seguir distinguiendola de la parte que no es enlace. */ .hero .miga a, .hero-int .miga a { color: var(--sobre-foto); text-decoration: underline; text-underline-offset: 0.25em; } .hero .miga a:hover, .hero-int .miga a:hover { color: var(--champan-sobre-foto); } .hero__dentro { position: relative; display: grid; justify-items: center; align-content: center; text-align: center; min-height: min(100svh, 820px); padding-block: clamp(6rem, 14vw, 8rem); } .hero h1 { font-size: var(--t-hero); color: var(--sobre-foto); margin-top: 1.1rem; line-height: 1.08; } .hero__sub { color: var(--sobre-foto-suave); margin: 0 auto 2.3rem; max-width: 46ch; } .hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* Entrada por piezas: cada .h-paso llega con retardo creciente */ @media (prefers-reduced-motion: no-preference) { /* El estado oculto vive DENTRO de la animación (fill both aplica el `from` durante el retardo), nunca en el elemento: si la animación no corre por lo que sea, lo peor que pasa es que el titular se ve. Con el patrón contrario (opacity:0 en el elemento + forwards) un fallo deja el hero VACÍO — se vio en la captura: todo entraba menos el h1. */ .h-paso { animation: ke-paso 900ms var(--curva) both; } .h-paso:nth-child(1) { animation-delay: 150ms; } .h-paso:nth-child(2) { animation-delay: 320ms; } .h-paso:nth-child(3) { animation-delay: 520ms; } .h-paso:nth-child(4) { animation-delay: 680ms; } .h-paso:nth-child(5) { animation-delay: 840ms; } @keyframes ke-paso { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } } } /* ── La finca: foto y texto a dos columnas en pantalla ancha ───────────── */ .finca { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 880px) { .finca { grid-template-columns: 1.05fr 1fr; } .finca .regla--izquierda { margin-inline: 0; } } /* ── Tarjetas de celebración: losas con el título dentro ───────────────── */ .losas { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.6rem; } .losa { position: relative; display: block; overflow: hidden; border-radius: var(--radio); aspect-ratio: 3/4; text-decoration: none; color: var(--sobre-foto); } .losa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--curva), filter 1100ms var(--curva); } .losa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 20 18 / 0.12) 30%, rgb(20 20 18 / 0.85) 100%); transition: background 600ms var(--curva); } .losa__texto { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.4rem 1.3rem; text-align: left; } .losa__texto h3 { font-size: 1.55rem; color: var(--sobre-foto); } .losa__texto p { font-size: 0.9rem; color: var(--sobre-foto-suave); margin-top: 0.3rem; max-width: 30ch; } .losa__mas { display: inline-block; margin-top: 0.7rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champan); transition: letter-spacing 400ms var(--curva); } .losa:hover img, .losa:focus-visible img { transform: scale(1.06); filter: brightness(1.08); } .losa:hover .losa__mas { letter-spacing: 0.34em; } /* ── Manifiesto: la frase de la casa, en grande ────────────────────────── */ .manifiesto { padding-block: var(--aire-seccion); text-align: center; } .manifiesto blockquote { margin: 0 auto; max-width: 24ch; font-family: var(--display); font-size: clamp(1.9rem, 1rem + 3.6vw, 3.6rem); line-height: 1.25; color: var(--sobre-foto); } .manifiesto blockquote em { font-style: normal; color: var(--champan); } .manifiesto figcaption { margin-top: 1.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--salvia); } /* ── Números ───────────────────────────────────────────────────────────── */ .datos { display: grid; gap: 2.4rem 3rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 2.8rem; } .dato b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 1.5rem + 3vw, 3.9rem); color: var(--champan); line-height: 1; } .dato span { font-size: 0.75rem; color: var(--salvia); letter-spacing: 0.18em; text-transform: uppercase; } /* ── La cocina: editorial a dos columnas ───────────────────────────────── */ .cocina { display: grid; gap: 2.6rem; align-items: start; } @media (min-width: 900px) { .cocina { grid-template-columns: 0.9fr 1.1fr; } .cocina__intro { position: sticky; top: 6.5rem; text-align: left; } .cocina__intro .regla { margin-inline: 0; } } .plato-lista { list-style: none; margin: 0; padding: 0; text-align: left; } .plato-lista li { padding: 0.85rem 0.2rem; border-bottom: 1px solid #2e2d28; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; transition: padding-left 350ms var(--curva); } .plato-lista li:hover { padding-left: 0.7rem; } .plato-lista .p-nombre { font-family: var(--display); font-size: 1.15rem; color: var(--sobre-foto); } .plato-lista .p-nota { font-size: 0.78rem; color: var(--salvia); letter-spacing: 0.08em; white-space: nowrap; } .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; } .chip { border: 1px solid #3a3833; border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.78rem; color: var(--sobre-foto-suave); transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva); } .chip:hover { border-color: var(--champan); color: var(--champan); } /* ── Galería: mosaico asimétrico con revelado por recorte ──────────────── */ .mosaico { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.6rem; } @media (min-width: 820px) { .mosaico { grid-template-columns: repeat(4, 1fr); } } .mosaico figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radio); } .mosaico figure.ancha { grid-column: span 2; } .mosaico img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform 1100ms var(--curva); } .mosaico figure.alta img { aspect-ratio: 3/4; } /* El paneo documental: cuando la foto entra en foco (clase .enfocada por el observador), pasea MUY despacio por su encuadre, ida y vuelta. Sustituye al zoom de hover en el mosaico: una animación infinita pisaría la transición del hover de todos modos, y el paseo ya da la vida que daba el zoom. */ @media (prefers-reduced-motion: no-preference) { /* Las fotos viven en reposo YA un punto acercadas (1.06): así, cuando el vigía las enfoca y arranca el paseo, no hay salto de escala — el bucle empieza exactamente donde estaban. Y el paseo es un MERODEO en bucle cerrado (el 100% vuelve al 0%), no un péndulo: cuatro paradas por el encuadre y vuelta a casa, sin costura, para siempre. */ .mosaico img { transform: scale(1.06) translate3d(1.5%, 1%, 0); } .mosaico figure.enfocada img { animation: ke-paseo 26s ease-in-out infinite; } @keyframes ke-paseo { 0% { transform: scale(1.06) translate3d(1.5%, 1%, 0); } 28% { transform: scale(1.09) translate3d(-1%, 2%, 0); } 54% { transform: scale(1.04) translate3d(-2%, -1.2%, 0); } 78% { transform: scale(1.08) translate3d(1%, -1.8%, 0); } 100% { transform: scale(1.06) translate3d(1.5%, 1%, 0); } } /* Cada foto, a su ritmo y arrancando en un punto distinto del paseo: la galería respira desacompasada, como algo vivo, no como un ballet. */ .mosaico figure:nth-child(2n).enfocada img { animation-duration: 32s; animation-delay: -11s; } .mosaico figure:nth-child(3n).enfocada img { animation-duration: 29s; animation-delay: -19s; } } .mosaico figcaption { position: absolute; inset: auto 0 0 0; padding: 1.6rem 1rem 0.8rem; background: linear-gradient(180deg, transparent, rgb(20 20 18 / 0.82)); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--sobre-foto-suave); opacity: 0; transform: translateY(8px); transition: opacity 450ms var(--curva), transform 450ms var(--curva); } .mosaico figure:hover figcaption { opacity: 1; transform: none; } /* Revelado por recorte: la foto se abre desde un marco cerrado al entrar */ @supports (animation-timeline: view()) { .abrir { animation: ke-abrir linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; } @keyframes ke-abrir { from { clip-path: inset(14% 14% 14% 14%); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } } } /* ── Derivas: parallax por capas ─────────────────────────────────────────── Piezas que cruzan la pantalla a ritmos distintos mientras haces scroll: la profundidad que pedía el dueño («más parallax»). Solo transform, GPU pura. Con .abrir se combinan en una sola declaración con DOS animaciones: dos clases que pisan el mismo shorthand se anularían entre sí. */ @supports (animation-timeline: view()) { .deriva-s { animation: ke-deriva-s linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .deriva-b { animation: ke-deriva-b linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes ke-deriva-s { from { transform: translateY(4.5%); } to { transform: translateY(-4.5%); } } @keyframes ke-deriva-b { from { transform: translateY(-3%); } to { transform: translateY(3%); } } .abrir.deriva-s { animation: ke-abrir linear both, ke-deriva-s linear both; animation-timeline: view(), view(); animation-range: entry 5% entry 55%, cover 0% cover 100%; } .abrir.deriva-b { animation: ke-abrir linear both, ke-deriva-b linear both; animation-timeline: view(), view(); animation-range: entry 5% entry 55%, cover 0% cover 100%; } } /* ── El pase de diapositivas ambiental ───────────────────────────────────── Cinco escenas de la finca fundiéndose en bucle, cada una con su deriva de zoom. Sin flechas, sin números, sin puntitos: es un cuadro vivo, no un carrusel que pide clics. CSS puro; cada imagen comparte los mismos fotogramas y solo cambia su retardo (ciclo de 25 s, ventana de 5 s). */ .diapos { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radio); } .diapos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .diapos img { animation: ke-diapo 25s linear infinite; } .diapos img:nth-child(1) { animation-delay: 0s; } .diapos img:nth-child(2) { animation-delay: 5s; } .diapos img:nth-child(3) { animation-delay: 10s; } .diapos img:nth-child(4) { animation-delay: 15s; } .diapos img:nth-child(5) { animation-delay: 20s; } @keyframes ke-diapo { 0% { opacity: 0; transform: scale(1.08); } 4% { opacity: 1; } 21% { opacity: 1; } 27% { opacity: 0; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.0); } } } /* Sin animaciones (ajuste del sistema): se queda la primera escena, quieta. Sin esta regla, el apagado general congelaría el bucle en opacidad cero y el cuadro se quedaría NEGRO para quien pide menos movimiento. */ @media (prefers-reduced-motion: reduce) { .diapos img { animation: none !important; } .diapos img:first-child { opacity: 1; } } /* ── La sección del sistema (KitEventos) ───────────────────────────────── */ .sistema { position: relative; overflow: hidden; } .sistema::before { /* Un resplandor champán respirando al fondo: presencia sin estorbar */ content: ""; position: absolute; inset: -20% -10%; background: radial-gradient(ellipse at 30% 20%, rgb(217 184 119 / 0.07), transparent 55%), radial-gradient(ellipse at 75% 85%, rgb(143 174 152 / 0.05), transparent 50%); pointer-events: none; } .sistema__credenciales { display: inline-grid; gap: 0.3rem; margin-top: 1.2rem; border: 1px solid rgb(217 184 119 / 0.35); border-radius: var(--radio); padding: 1rem 1.6rem; font-size: 0.95rem; color: var(--sobre-foto-suave); } .sistema__credenciales b { color: var(--champan); font-weight: 600; letter-spacing: 0.04em; } /* ── Las fichas de muestra: chips que abren su diálogo ─────────────────── */ .chip--boton { cursor: pointer; background: none; font-family: var(--texto); } .chip--boton::after { content: " +"; color: var(--champan); font-weight: 600; } dialog.muestra { border: 1px solid rgb(217 184 119 / 0.3); border-radius: var(--radio); background: var(--carbon); color: var(--sobre-foto); padding: 0; max-width: min(92vw, 520px); margin: auto; } dialog.muestra::backdrop { background: rgb(10 10 9 / 0.7); backdrop-filter: blur(6px); } @media (prefers-reduced-motion: no-preference) { dialog.muestra[open] { animation: ke-muestra 380ms var(--curva); } @keyframes ke-muestra { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: none; } } } .muestra__cerrar { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgb(20 20 18 / 0.65); color: var(--sobre-foto); font-size: 1rem; cursor: pointer; } .muestra__cerrar:hover { color: var(--champan); } .muestra__foto img { width: 100%; max-height: 300px; object-fit: cover; display: block; } /* La ficha con varias fotos se pasa sola, como una presentación de la casa. Cada foto lleva su pie entrecomillado con el nombre del plato tal y como aparece en la carta. Fondo oscuro y «contain»: un plato no se recorta — se enseña entero, que para eso se ha emplatado. */ .muestra__galeria { position: relative; background: var(--noche); overflow: hidden; aspect-ratio: 4 / 3; /* altura estable, mezclando fotos altas y anchas */ border-bottom: 1px solid rgb(217 184 119 / 0.18); } .muestra__pista { position: absolute; inset: 0; } .muestra__diapo { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 900ms var(--curva), visibility 900ms; } .muestra__diapo.es-actual { opacity: 1; visibility: visible; } /* Detrás de cada foto, ella misma ampliada y desenfocada: las verticales ya no dejan dos bandas negras planas, sino un telón del color del propio plato. */ .muestra__diapo::before { content: ''; position: absolute; inset: -10%; background: var(--telon) center / cover no-repeat; filter: blur(28px) brightness(0.4) saturate(0.75); } .muestra__diapo img, .muestra__diapo video { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; /* Hueco para el pie: en una foto vertical y larga —una tira de fotomatón, sin ir más lejos— el degradado del pie se comía la parte de abajo, que es donde van los nombres. */ padding-bottom: 42px; box-sizing: border-box; } /* El vídeo no lleva telón: no hay de dónde sacarlo y se ve bien sobre el negro. */ .muestra__diapo:has(video)::before { display: none; } .muestra__diapo figcaption { z-index: 2; position: absolute; left: 0; right: 0; bottom: 0; padding: 2.6rem 1.1rem 1.9rem; background: linear-gradient(to top, rgb(10 10 9 / 0.94) 38%, transparent); /* Prata sin cursiva: no tiene itálica real y la sintética afea la letra. */ font-family: var(--display); color: var(--champan); font-size: 1rem; line-height: 1.35; text-align: center; } .muestra__flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(20 20 18 / 0.5); color: var(--sobre-foto); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background 240ms, color 240ms; } .muestra__flecha:hover { background: rgb(20 20 18 / 0.85); color: var(--champan); } .muestra__flecha--iz { left: 0.5rem; } .muestra__flecha--de { right: 0.5rem; } .muestra__puntos { position: absolute; left: 0; right: 0; bottom: 0.6rem; z-index: 2; display: flex; justify-content: center; gap: 0.45rem; } .muestra__punto { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgb(240 236 228 / 0.45); cursor: pointer; transition: background 240ms, transform 240ms; } .muestra__punto.es-actual { background: var(--champan); transform: scale(1.4); } .muestra__cuerpo { padding: 1.5rem 1.7rem 1.7rem; } .muestra__cuerpo h3 { font-size: 1.5rem; color: var(--sobre-foto); } .muestra__texto { color: var(--sobre-foto-suave); margin-top: 0.9rem; } .muestra__pie { color: var(--salvia); font-size: 0.82rem; margin-top: 1rem; letter-spacing: 0.04em; } /* ── Preguntas: acordeón con apertura suave ────────────────────────────── */ .faq { max-width: 760px; margin: 2.4rem auto 0; text-align: left; } .faq details { border-bottom: 1px solid #2e2d28; } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.15rem 0.2rem; font-family: var(--display); font-size: 1.18rem; color: var(--sobre-foto); transition: color var(--rapido) var(--curva); } .faq summary:hover { color: var(--champan); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--champan); font-family: var(--texto); font-size: 1.2rem; transition: transform 350ms var(--curva); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .faq__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--curva); } .faq details[open] .faq__cuerpo { grid-template-rows: 1fr; } .faq .faq__cuerpo > div { overflow: hidden; } .faq .faq__cuerpo p { color: var(--salvia); padding: 0 0.2rem 1.2rem; max-width: 66ch; } /* ── Formulario: el original de la casa, vestido de noche ──────────────── */ .formulario { display: grid; gap: 1.1rem; text-align: left; } @media (min-width: 720px) { .formulario { grid-template-columns: 1fr 1fr; } .formulario .campo--todo { grid-column: 1 / -1; } } .campo label { display: block; margin-bottom: 0.35rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--salvia); } .campo input, .campo select, .campo textarea { width: 100%; padding: 0.8rem 0.9rem; background: rgb(238 240 234 / 0.045); border: 1px solid #3a3833; border-radius: var(--radio); color: var(--sobre-foto); font-family: var(--texto); font-size: 1rem; transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--champan); background: rgb(238 240 234 / 0.07); } /* Y con el teclado, el anillo de vuelta. El `outline:none` de arriba gana por especificidad al `:focus-visible` global de base.css, asi que estos tres campos eran los unicos de la web que se quedaban sin marca al tabular: el borde champan de 1 px es bonito pero no llega al grosor que pide la norma para hacer de indicador. Champan y no ambar hondo porque este formulario va sobre oscuro. */ .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--champan); outline-offset: 2px; } .campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--champan) 50%), linear-gradient(135deg, var(--champan) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; } .campo select option { background: var(--carbon); color: var(--sobre-foto); } .campo--acepto { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--salvia); } .campo--acepto input { width: auto; margin-top: 0.25rem; accent-color: var(--champan); } .form-estado { font-size: 0.95rem; padding: 0.9rem 1.1rem; border-radius: var(--radio); } .form-estado--ok { background: rgb(143 174 152 / 0.12); color: var(--salvia); border: 1px solid rgb(143 174 152 / 0.4); } .form-estado--mal { background: rgb(217 130 100 / 0.1); color: #e0a389; border: 1px solid rgb(217 130 100 / 0.4); } /* Brillo de lujo en el botón principal: un destello que lo cruza al pasar */ .boton--principal { position: relative; overflow: hidden; } .boton--principal::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent); transition: left 700ms var(--curva); } .boton--principal:hover::after { left: 120%; } /* ── Contacto ──────────────────────────────────────────────────────────── */ .contacto { display: grid; gap: 2.4rem; } @media (min-width: 900px) { .contacto { grid-template-columns: 0.9fr 1.1fr; text-align: left; } } .contacto__dato { margin-bottom: 1.05rem; } .contacto__dato .que { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--salvia); display: block; margin-bottom: 0.2rem; } .contacto__dato a, .contacto__dato span.valor { font-size: 1.12rem; color: var(--sobre-foto); text-decoration: none; } .contacto__dato a:hover { color: var(--champan); } /* ── Hero de página interior ───────────────────────────────────────────── */ .hero-int { position: relative; overflow: hidden; background: var(--noche); } .hero-int__foto { position: absolute; inset: -8% 0; } .hero-int__foto img { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: no-preference) { .hero-int__foto img { animation: ke-burns 14s var(--curva) both; } } /* El velo de las paginas interiores, con la curva corregida. Tenia su punto MAS CLARO —0,35— justo a media altura, que es donde caen la miga y el titular. Con la foto de bodas, que lleva la carpa blanca al sol detras del texto, el titular se quedaba en 1,96:1 y la miga en 1,74:1: se veia en la captura, no hacia falta medirlo. Y no se puede resolver oscureciendo la foto entera, porque contra un blanco puro haria falta un 0,68 plano y la fotografia dejaria de verse. Asi que el refuerzo va donde esta el texto: la franja de arriba se queda clara —ahi se ve la finca— y a partir del 30% el velo sube de golpe. */ .hero-int__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 20 18 / 0.50) 0%, rgb(20 20 18 / 0.44) 16%, rgb(20 20 18 / 0.68) 30%, rgb(20 20 18 / 0.82) 60%, var(--noche) 100%); } .hero-int__dentro { position: relative; display: grid; justify-items: center; align-content: end; text-align: center; min-height: min(62svh, 540px); padding: 7rem 1.25rem 3.2rem; } .hero-int h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); color: var(--sobre-foto); } .miga { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; } .miga a { color: var(--salvia); text-decoration: none; } .miga a:hover { color: var(--champan); } /* ── El día, como una línea de tiempo ──────────────────────────────────── */ .dia { max-width: 640px; margin: 2.4rem auto 0; text-align: left; position: relative; padding-left: 1.9rem; } .dia::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--champan), #3a3833); } .hito { position: relative; padding-bottom: 1.7rem; } .hito::before { content: ""; position: absolute; left: -1.9rem; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--noche); border: 2px solid var(--champan); } .hito h3 { font-size: 1.3rem; color: var(--sobre-foto); } .hito p { color: var(--salvia); font-size: 0.95rem; margin-top: 0.25rem; } /* ── Qué incluye: lista con marca champán ──────────────────────────────── */ .incluye { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.85rem 2.4rem; text-align: left; } @media (min-width: 720px) { .incluye { grid-template-columns: 1fr 1fr; } } .incluye li { position: relative; padding-left: 1.5rem; color: var(--sobre-foto-suave); } .incluye li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 1px; background: var(--champan); } /* ── CTA final de página ───────────────────────────────────────────────── */ .cta-final { text-align: center; } .cta-final .boton { margin: 0.4rem 0.4rem 0; } /* ── Pie ───────────────────────────────────────────────────────────────── */ .pie { border-top: 1px solid #2e2d28; padding-block: 2.6rem; font-size: 0.87rem; color: var(--salvia); } .pie__rejilla { display: grid; gap: 1.8rem; } @media (min-width: 780px) { .pie__rejilla { grid-template-columns: 1.2fr 1fr 1fr; } } .pie h4 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--sobre-foto); margin-bottom: 0.6rem; } .pie a { color: var(--salvia); text-decoration: none; } .pie a:hover { color: var(--champan); } .pie__legal { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid #262521; text-align: center; font-size: 0.78rem; } .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } /* La lista con iconos: todo alineado a la misma vertical, icono champán */ .pie-lista { gap: 0.65rem !important; } .pie-lista li { display: flex; align-items: center; gap: 0.65rem; } .pie-ic { width: 16px; height: 16px; flex: none; color: var(--champan); opacity: 0.9; } .pie-lista--enlaces li { padding-left: calc(16px + 0.65rem); } /* parejos con los de icono */ .pie-lista--enlaces a { position: relative; transition: color var(--rapido) var(--curva); } .pie-lista--enlaces a::before { content: "→"; position: absolute; left: -1.25rem; color: var(--champan); opacity: 0; transform: translateX(-4px); transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva); } .pie-lista--enlaces a:hover::before { opacity: 1; transform: none; } /* Las redes: medallones con borde champán que se encienden al pasar */ .redes { display: flex; gap: 0.7rem; margin-top: 1.1rem; } .redes a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgb(217 184 119 / 0.4); border-radius: 50%; color: var(--salvia); transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva), background var(--rapido) var(--curva); } .redes a:hover { color: #191813; background: var(--champan); border-color: var(--champan); transform: translateY(-2px); } .red-ic { width: 17px; height: 17px; } /* ── Detalles globales ─────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: var(--alto-nav, 5.5rem); } /* lo que mida la barra, que en movil no es lo mismo */ .saltar { position: absolute; left: -9999px; z-index: 60; background: var(--champan); color: #191813; padding: 0.7rem 1.2rem; border-radius: var(--radio); font-weight: 600; } .saltar:focus { left: 1rem; top: 1rem; } /* ── nav-movil: la barra, en el movil ───────────────────────────────────── En el movil los seis enlaces no caben en una linea y `flex-wrap` los partia en TRES, con lo que la barra se comia un cuarto de la pantalla y tapaba lo que hubiera debajo. Aqui la marca se centra en su fila y los enlaces van en una sola linea que se arrastra con el dedo. La mascara de los lados es la pista de que hay mas: sin ella, nadie descubre que aquello se desliza. */ @media (max-width: 760px) { .nav { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.72rem 0 0.5rem; } .nav__marca { justify-content: center; max-width: 100%; font-size: 1.12rem; } .nav ul { flex-wrap: nowrap; /* Sin esto la lista NO se cine al ancho de la barra: un elemento flex mide por omision lo que mida su contenido (min-width:auto), asi que los seis enlaces la estiraban a 643 px, el overflow no llegaba a actuar y la marca —estirada al mismo ancho— se iba de cuadro en vez de centrarse. */ min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; /* que arrastrar la barra no mueva la pagina */ gap: 1.4rem; padding: 0 1.25rem 0.2rem; scrollbar-width: none; /* la barra de scroll afea y aqui sobra */ scroll-snap-type: x proximity; scroll-padding-inline: 1.25rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%); } .nav ul::-webkit-scrollbar { display: none; } .nav ul li { scroll-snap-align: start; } .nav ul a { white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.2em; } } /* Los botones del hero: en el movil, a lo ancho. «Ver celebraciones» con versalitas espaciadas mide mas que la pantalla, y medio boton fuera de cuadro es medio boton que nadie pulsa. */ @media (max-width: 560px) { .hero__acciones { flex-direction: column; align-items: stretch; gap: 0.7rem; } .hero__acciones .boton { width: 100%; padding-inline: 1rem; } .boton { letter-spacing: 0.16em; } } /* La carta, en el movil ───────────────────────────────────────────────────── En dos columnas, «Salmorejo con virutas de jamón» parte en dos líneas y el «al centro» queda espachurrado contra el borde. En pantalla estrecha el plato ocupa su línea entera y la nota va debajo, en pequeño: se lee como una carta de verdad y deja de haber texto tocando el margen. */ @media (max-width: 560px) { .plato-lista li { display: block; padding-block: 0.78rem; } .plato-lista .p-nombre { font-size: 1.06rem; line-height: 1.3; display: block; } .plato-lista .p-nota { display: block; margin-top: 0.25rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; white-space: normal; } /* El desplazamiento al pasar por encima no pinta nada en una pantalla táctil. */ .plato-lista li:hover { padding-left: 0.2rem; } } /* Grupos de dos botones: en el movil, del mismo ancho y apilados. Uno ancho y otro estrecho, cada uno con su centro, se ve descuidado en una pantalla estrecha; ademas el dedo agradece el area grande. */ @media (max-width: 560px) { .acciones-par { display: flex; flex-direction: column; gap: 0.7rem; } .acciones-par .boton { width: 100%; padding-inline: 1rem; } } /* La brasa: la barrita que se desliza bajo el enlace de la sección en la que vas. Va dentro de la lista, así que se mueve con ella cuando la lista se desplaza. */ .nav ul { position: relative; } .nav__brasa { position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--champan); border-radius: 2px; opacity: 0; transition: transform 420ms var(--curva), width 420ms var(--curva), opacity 260ms; pointer-events: none; } .nav ul a.es-actual { color: var(--champan); } @media (prefers-reduced-motion: reduce) { .nav__brasa { transition: opacity 200ms; } } /* El enlace de una ficha: para ver la cosa de verdad, no para leer sobre ella. */ .muestra__enlace { margin: 0.9rem 0 0; } .muestra__enlace a { display: inline-block; padding: 0.55rem 1.1rem; border-radius: var(--radio); border: 1px solid var(--champan); color: var(--champan); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva); } .muestra__enlace a:hover { background: var(--champan); color: #191813; } /* ── El mosaico vivo ────────────────────────────────────────────────────── Cada hueco enseña varias piezas de su tema y va cambiando. El fundido va con dos capas superpuestas: la que entra sube de opacidad mientras la que sale baja, así no hay ni un fotograma con el hueco vacío. */ .mosaico--vivo { cursor: pointer; } .mosaico--vivo img, .mosaico--vivo video, .mosaico--vivo picture { transition: opacity 620ms var(--curva), transform 620ms var(--curva); } /* La que ESTÁ va en el flujo y la que SE VA flota encima mientras se desvanece. Al revés no funciona: sacando las dos del flujo con `position:absolute`, el figure se queda sin altura, el grid colapsa y la sección sale vacía —solo con su título—. Y ponerle una proporción fija al hueco tampoco vale: pelea con el `stretch` del grid y deja bandas negras alrededor de cada foto. Dejando una en el flujo, el mosaico se maqueta exactamente igual que antes de todo esto. */ .mosaico--vivo > video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; background: #17150f; } .mosaico--vivo.alta > video { aspect-ratio: 3/4; } .mosaico__sale { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; } .mosaico__entra { opacity: 0; transform: scale(1.04); } .mosaico__sale { opacity: 0; } .mosaico--vivo figcaption { transition: opacity 300ms var(--curva); } .mosaico__pie--cambia { opacity: 0; } /* Al pasar el ratón o al enfocar: un acercamiento lento y el pie se levanta. En el móvil el `:focus-within` lo dispara el propio toque, que es cuando se mira. */ .mosaico--vivo:hover > img, .mosaico--vivo:hover > video, .mosaico--vivo:focus-visible > img, .mosaico--vivo:focus-visible > video { transform: scale(1.05); } .mosaico--vivo::after { content: "Toca para ver más"; position: absolute; right: 10px; top: 10px; z-index: 2; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 20px; background: rgb(20 20 18 / .62); color: var(--sobre-foto); opacity: 0; transition: opacity 260ms var(--curva); pointer-events: none; } .mosaico--vivo:hover::after, .mosaico--vivo:focus-visible::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mosaico--vivo img, .mosaico--vivo video, .mosaico--vivo picture { transition: none; } .mosaico--vivo:hover > img, .mosaico--vivo:hover > video { transform: none; } }