/** * Caracool Churra — la cabecera, el pie, la tienda y las reglas de Lenis. * * Desde la 0.1.3 aquí vive todo el CSS del menú: la rejilla de celdas con * su filete, los círculos y su barrido, la entrada escalonada y los dos * estados de color. Desde la 0.1.4, también el pie (la columnata), y desde * la 0.2.5, los botones y el margen del carrito y del pago. El CSS * personalizado de la plantilla de cabecera en Elementor queda vacío, para * que el menú esté en un solo sitio, con número de versión y trasladable a * otra web. * * La rejilla y la entrada cuelgan de [data-elementor-type="header"], que * está en el HTML aunque el JavaScript no cargue. Los colores cuelgan de * .ch-cab, que la pone el módulo de cabecera al arrancar, porque dependen de * lo que haya debajo y eso solo se sabe midiendo. */ /* ── Cabecera: colocación y color ─────────────────────────────────────── */ .ch-cab { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 99; transition: color .45s ease; } .ch-cab--sobre-oscuro { color: var(--ch-cab-sobre-oscuro, #FAF5EC); } .ch-cab--sobre-claro { color: var(--ch-cab-sobre-claro, #241610); } /* Elementor le pone el color a cada widget por su cuenta, así que hay que quitárselo para que todo siga al de la cabecera. Es la excepción que justifica los !important: sin ellos gana el widget. */ .ch-cab .elementor-nav-menu a.elementor-item, .ch-cab .elementor-nav-menu a.elementor-item:hover, .ch-cab .elementor-nav-menu a.elementor-item.elementor-item-active, .ch-cab .elementor-heading-title, .ch-cab .elementor-widget-text-editor { color: currentColor !important; } /* El logotipo va como SVG en línea. El widget de icono de Elementor le pone su propio relleno —el color Primary del Kit—, así que hay que quitárselo igual que al menú, o el logo se queda de un color fijo mientras el resto de la cabecera cambia. */ .ch-cab .elementor-icon, .ch-cab .elementor-icon svg, .ch-cab .elementor-icon svg * { color: currentColor !important; fill: currentColor !important; } .ch-cab .elementor-icon svg [fill="none"] { fill: none !important; } /* Red de seguridad por si algún día el logo vuelve a ser un : sobre fondo claro se invierte, que no es exacto pero se lee. */ .ch-cab--sobre-claro img { filter: invert(1); } /* ── Cabecera: rejilla ────────────────────────────────────────────────── */ /* El logo se mide por su alto: el widget lo pinta cuadrado y lo aplasta. */ [data-elementor-type="header"] .elementor-widget-icon svg { width: auto; height: 1em; display: block; } /* El enlace del icono es inline-block dentro de una caja de texto, y eso le cuelga 6 px de descendente por debajo: el widget mide 51 px con un logo de 45 y ya no queda sitio para centrarlo. Con el envoltorio en flex la caja mide lo que mide el logo y el centrado de Elementor tiene efecto. */ [data-elementor-type="header"] .elementor-widget-icon .elementor-icon-wrapper { display: flex; } /* La rejilla de celdas es solo para tableta y escritorio. En el móvil el menú se esconde detrás del botón (ver «Cabecera: móvil», más abajo); si estas reglas valieran ahí, el menú horizontal se quedaría a la vista encima del botón, como pasaba hasta la 0.2.3. */ @media (min-width: 768px) { /* La celda del logo es el contenedor que lo tiene dentro. Lleva el mismo filete que las entradas del menú, así las líneas forman una sola. */ [data-elementor-type="header"] > .e-con .e-con:has(.elementor-widget-icon) { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); } /* Cada entrada del menú es una celda de igual ancho, con el texto centrado en la franja que queda por encima del filete. El logo se centra en esa misma franja desde Elementor (contenido centrado en su contenedor), así que los dos comparten línea media. */ [data-elementor-type="header"] .elementor-widget-nav-menu, [data-elementor-type="header"] .elementor-widget-nav-menu > .elementor-widget-container { height: 100%; } [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main { display: flex; align-items: stretch; height: 100%; } [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu { display: flex; gap: 4px; width: 100%; align-items: stretch; } [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li { flex: 1 1 0; min-width: 0; display: flex; } [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main a.elementor-item { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 0 16px; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); } } /* ── Cabecera: los círculos ───────────────────────────────────────────── */ /* Un aro de 8 px delante de cada entrada. Al pasar por encima se rellena de izquierda a derecha y, al salir, se vacía por la derecha: el relleno es un degradado plano que crece con background-size, anclado a la izquierda mientras hay ratón y a la derecha cuando se va. Lleva 1 px de margen arriba porque un círculo centrado con la caja del texto se ve un pelo alto frente a las minúsculas. */ [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main a.elementor-item::before { content: ""; position: static; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 1px; border-radius: 50%; border: 1px solid currentColor; background-color: transparent; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 100%; background-position: right center; opacity: .35 !important; transition: opacity .35s ease, background-size .5s cubic-bezier(.62, .05, .01, .99); } [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main a.elementor-item:hover::before, [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main a.elementor-item.elementor-item-active::before { opacity: 1 !important; background-size: 100% 100%; background-position: left center; } /* ── Cabecera: entrada ────────────────────────────────────────────────── */ /* Al cargar, primero el logo y luego las cinco entradas, una tras otra, con el mismo gesto del hero: suben 12 px y aparecen. El hero arranca a los 0,45 s de la cabecera, cuando esta va por la mitad; sus retardos están en el CSS de la página de inicio y ya llevan ese margen sumado. */ @media (prefers-reduced-motion: no-preference) { @keyframes ch-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } [data-elementor-type="header"] > .e-con .e-con:has(.elementor-widget-icon), [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li { animation: ch-entra .7s cubic-bezier(.22, .61, .36, 1) both; } [data-elementor-type="header"] > .e-con .e-con:has(.elementor-widget-icon) { animation-delay: .15s; } [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(1) { animation-delay: .30s; } [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(2) { animation-delay: .38s; } [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(3) { animation-delay: .46s; } [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(4) { animation-delay: .54s; } [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(5) { animation-delay: .62s; } [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:nth-child(n+6) { animation-delay: .70s; } } /* ── Cabecera: móvil ──────────────────────────────────────────────────── */ /* En el teléfono la cabecera es una sola fila: el logo a la izquierda y el botón del menú a la derecha. El menú se abre a pantalla completa, sobre fondo tinta, con las mismas entradas en grande, su aro y su filete, y abajo el teléfono, cómo llegar y reservar (esos tres enlaces los copia ch-frente.js del pie, para no escribir los datos dos veces). Todo esto pisa reglas que Elementor imprime por widget, con más especificidad que la nuestra; de ahí los !important, igual que con el color del menú. */ @media (max-width: 767px) { /* La fila. Los contenedores de Elementor se colocan con variables; se cambian las variables y, por si acaso, la propiedad. */ [data-elementor-type="header"] > .e-con { --flex-direction: row; --flex-wrap: nowrap; --justify-content: space-between; --align-items: center; --padding-top: 14px; --padding-bottom: 14px; --padding-left: 20px; --padding-right: 20px; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; padding: 14px 20px !important; } [data-elementor-type="header"] > .e-con > .e-con { --width: auto; width: auto !important; flex: 0 0 auto !important; padding: 0 !important; position: relative; z-index: 2; } [data-elementor-type="header"] > .e-con > .e-con:has(.elementor-widget-icon) { z-index: 3; } /* El logo, más pequeño. */ [data-elementor-type="header"] .elementor-widget-icon .elementor-icon { font-size: 34px !important; } [data-elementor-type="header"] .elementor-widget-icon .elementor-icon svg { height: 34px !important; } /* El botón: dos rayas finas del color de la cabecera, que se cruzan en una X al abrir. Los iconos de Elementor se esconden. */ [data-elementor-type="header"] .elementor-menu-toggle { position: relative; z-index: 3; width: 44px; height: 44px; margin: 0 -10px 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: currentColor !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } [data-elementor-type="header"] .elementor-menu-toggle svg, [data-elementor-type="header"] .elementor-menu-toggle i { display: none !important; } [data-elementor-type="header"] .elementor-menu-toggle::before, [data-elementor-type="header"] .elementor-menu-toggle::after { content: ""; position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .45s cubic-bezier(.22, 1, .36, 1), top .45s cubic-bezier(.22, 1, .36, 1); } [data-elementor-type="header"] .elementor-menu-toggle::before { top: 17px; } [data-elementor-type="header"] .elementor-menu-toggle::after { top: 25px; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active::before { top: 21px; transform: rotate(45deg); } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active::after { top: 21px; transform: rotate(-45deg); } [data-elementor-type="header"] .elementor-menu-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; } /* Con el menú abierto la cabecera va sobre tinta: crema, mida lo que mida debajo. */ .ch-cab:has(.elementor-menu-toggle.elementor-active) { color: var(--ch-cab-sobre-oscuro, #FAF5EC); } .ch-cab:has(.elementor-menu-toggle.elementor-active) img { filter: none; } /* La página de detrás no se mueve mientras el menú está abierto. */ html:has(.ch-cab .elementor-menu-toggle.elementor-active), html:has(.ch-cab .elementor-menu-toggle.elementor-active) body { overflow: hidden !important; } /* El panel. Elementor lo despliega a lo alto con scaleY y max-height; aquí ocupa la pantalla y aparece fundiéndose. */ [data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: 100vh; height: 100dvh; max-height: none !important; margin: 0 !important; padding: 104px 28px max(28px, env(safe-area-inset-bottom)) !important; box-sizing: border-box; display: flex !important; flex-direction: column; overflow-y: auto !important; overscroll-behavior: contain; transform: none !important; background: var(--e-global-color-secondary, #241610) !important; color: var(--ch-cab-sobre-oscuro, #FAF5EC); opacity: 0; visibility: hidden; pointer-events: none; z-index: 1; transition: opacity .35s ease, visibility 0s linear .35s !important; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease, visibility 0s linear 0s !important; } /* Las entradas, en grande y en cursiva, cada una con su filete. */ [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu { display: flex !important; flex-direction: column; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); } [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu > li { display: block; } [data-elementor-type="header"] .elementor-nav-menu--dropdown a.elementor-item { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 16px; padding: 16px 0 !important; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-left: 0 !important; background: transparent !important; color: currentColor !important; font-family: var(--e-global-typography-primary-font-family, "Bodoni Moda"), serif !important; font-style: italic !important; font-weight: 500 !important; font-size: clamp(32px, 9.5vw, 44px) !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: none !important; } /* El aro, como en las celdas del escritorio; la página actual, rellena. El widget le pone al pseudoelemento posición absoluta y opacidad cero (es el de su puntero), así que hay que quitárselas. */ [data-elementor-type="header"] .elementor-nav-menu--dropdown a.elementor-item::before { content: "" !important; position: static !important; flex: 0 0 auto; width: 9px !important; height: 9px !important; margin-top: 4px; border-radius: 50%; border: 1px solid currentColor; background: transparent !important; opacity: .35 !important; transform: none !important; } [data-elementor-type="header"] .elementor-nav-menu--dropdown a.elementor-item::after { display: none !important; } [data-elementor-type="header"] .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active::before { opacity: 1 !important; background: currentColor !important; } /* Abajo, los tres enlaces del pie. */ .ch-menu-pie { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.4; } .ch-menu-pie a { color: currentColor !important; text-decoration: none; opacity: .8; } .ch-menu-pie a.ch-menu-pie__reserva { opacity: 1; margin-top: 8px; padding: 14px 22px; border: 1px solid currentColor; border-radius: 2px; } /* La entrada: el panel se funde y las entradas suben una tras otra, con el gesto de la cabecera. */ @media (prefers-reduced-motion: no-preference) { [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu > li, [data-elementor-type="header"] .ch-menu-pie { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .7s cubic-bezier(.22, .61, .36, 1); } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li, [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .ch-menu-pie { opacity: 1; transform: none; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(1) { transition-delay: .08s; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(2) { transition-delay: .14s; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(3) { transition-delay: .20s; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(4) { transition-delay: .26s; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(5) { transition-delay: .32s; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(n+6) { transition-delay: .38s; } [data-elementor-type="header"] .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .ch-menu-pie { transition-delay: .42s; } } } /* ── Los heros: entrada ───────────────────────────────────────────────── */ /** * El hero de una página interior entra detrás de la cabecera, con el mismo * gesto y los mismos tiempos que el de la portada. En Elementor basta con * ponerle la clase `ch-hero` al contenedor del hero; lo de dentro no se * toca. * * El gesto lo decide lo que es cada hijo, no el orden: * * el titular (el hijo que lleva un H1) se revela por debajo de una máscara * el filete (un contenedor sin widgets) se dibuja de izquierda a derecha * todo lo demás sube 16 px y aparece * * Los retardos sí van por posición, porque el ritmo es el de la portada y no * es un escalonado regular: el filete tarda 1,2 s en dibujarse y el titular * entra justo después. Del quinto hijo en adelante se escalonan solos. * * La portada no lleva esta clase: su hero tiene la flor, los dos rótulos y el * botón, y su coreografía vive en el CSS de la página. */ @media (prefers-reduced-motion: no-preference) { @keyframes ch-hero-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes ch-hero-filete { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes ch-hero-revela { from { clip-path: inset(-6% -12% 100% -12%); } to { clip-path: inset(-6% -12% -18% -12%); } } .ch-hero > * { opacity: 0; animation: ch-hero-sube .9s cubic-bezier(.22, 1, .36, 1) var(--ch-hero-t, .55s) forwards; } /* El filete: un contenedor sin nada dentro. Se dibuja desde la izquierda y no sube, así que recupera su opacidad de salida. */ .ch-hero > .e-con:not(:has(.elementor-widget)) { opacity: 1; transform: scaleX(0); transform-origin: left center; animation: ch-hero-filete 1.2s cubic-bezier(.22, 1, .36, 1) var(--ch-hero-t, .65s) forwards; } /* El titular sale de debajo de una máscara. El desbordamiento de la máscara es holgado para que no recorte ni las cursivas ni los acentos. */ .ch-hero > :has(h1) { opacity: 1; clip-path: inset(-6% -12% 100% -12%); animation: ch-hero-revela 1.2s cubic-bezier(.22, 1, .36, 1) var(--ch-hero-t, 1.3s) forwards; } .ch-hero > :nth-child(1) { --ch-hero-t: .55s; } .ch-hero > :nth-child(2) { --ch-hero-t: .65s; } .ch-hero > :nth-child(3) { --ch-hero-t: 1.30s; } .ch-hero > :nth-child(4) { --ch-hero-t: 1.60s; } .ch-hero > :nth-child(5) { --ch-hero-t: 1.68s; } .ch-hero > :nth-child(n+6) { --ch-hero-t: 1.76s; } } /* En movimiento reducido no hay entrada, el barrido se vuelve un fundido y el cambio de color es instantáneo. */ @media (prefers-reduced-motion: reduce) { .ch-cab { transition: none; } [data-elementor-type="header"] .elementor-widget-nav-menu .elementor-nav-menu--main a.elementor-item::before { transition: opacity .2s ease; } } /* ── Pie: la columnata ────────────────────────────────────────────────── */ /* Plantilla «Pie principal» (Theme Builder). Estructura que espera este CSS: raíz > fila de cuatro columnas (logo, contacto, reservas, redes) + barra inferior. Todo se localiza por posición, sin IDs de Elementor: la primera columna no lleva raya; las otras tres llevan una a la izquierda (::before) que dibuja un punto al bajar (::after). Los rótulos llevan un aro delante y los enlaces de redes también. Los colores salen del Kit. */ [data-elementor-type="footer"] { color: var(--e-global-color-cremaclara, #FAF5EC); } /* Los enlaces heredan el color del pie; el Kit los pintaría del Primary. */ [data-elementor-type="footer"] a, [data-elementor-type="footer"] .elementor-widget a { color: inherit; } [data-elementor-type="footer"] .elementor-widget-icon svg { width: auto; height: 1em; display: block; } [data-elementor-type="footer"] .elementor-widget-icon .elementor-icon-wrapper { display: flex; } /* Las columnas con raya. */ [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con:not(:first-child) { position: relative; } [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--e-global-color-filete, rgba(250, 245, 236, .22)); transform-origin: top center; pointer-events: none; } [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con:not(:first-child)::after { content: ""; position: absolute; left: -3.5px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; } /* Los aros: delante del primer rótulo de cada columna y de los enlaces de redes. Son el punto del menú, con el mismo barrido al pasar por encima. */ [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con > .elementor-widget-heading:first-child .elementor-heading-title, [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con:last-child > .elementor-widget-heading .elementor-heading-title { display: flex; align-items: center; gap: 12px; } [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con > .elementor-widget-heading:first-child .elementor-heading-title::before, [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con:last-child > .elementor-widget-heading .elementor-heading-title::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 1px; border-radius: 50%; border: 1px solid currentColor; background-color: transparent; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 100%; background-position: right center; opacity: .35; transition: opacity .35s ease, background-size .5s cubic-bezier(.62, .05, .01, .99); } [data-elementor-type="footer"] > .e-con > .e-con:first-child > .e-con:last-child > .elementor-widget-heading:hover .elementor-heading-title::before { opacity: 1; background-size: 100% 100%; background-position: left center; } /* La barra de abajo, en fino y apagada. */ [data-elementor-type="footer"] > .e-con > .e-con:last-child { opacity: .6; } [data-elementor-type="footer"] > .e-con > .e-con:last-child .elementor-widget { white-space: nowrap; } [data-elementor-type="footer"] > .e-con > .e-con:last-child a { border-bottom: 1px solid transparent; transition: border-color .35s ease; } [data-elementor-type="footer"] > .e-con > .e-con:last-child a:hover { border-bottom-color: currentColor; } /* La entrada va con reloj y se dispara al llegar: el módulo del pie (en ch-frente.js) pone la clase ch-pie--entra cuando asoma un tercio, y entonces arranca la secuencia del laboratorio: primero las rayas, con su punto bajando (0,1 / 0,25 / 0,4 s); luego suben los bloques (0,3 s el logotipo y 1,0 / 1,15 / 1,3 los demás) y por último pasa la ola por los aros (de 1,2 a 1,74 s). Una vez por carga. Sin la clase, o con movimiento reducido, el pie sale completo y quieto: no hay nada que dependa de que el JavaScript llegue. La ola va sin relleno (fill none) a propósito: si se quedara aplicada, pisaría al hover de los aros. */ @media (prefers-reduced-motion: no-preference) { @keyframes ch-raya { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes ch-gota { 0% { top: 0; opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes ch-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes ch-ola { 0% { background-size: 0% 100%; background-position: left center; opacity: .35; } 30% { background-size: 100% 100%; background-position: left center; opacity: 1; } 60% { background-size: 100% 100%; background-position: right center; opacity: 1; } 100% { background-size: 0% 100%; background-position: right center; opacity: .35; } } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:not(:first-child)::before { animation: ch-raya 1.1s cubic-bezier(.22, 1, .36, 1) both; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:not(:first-child)::after { animation: ch-gota 1.1s cubic-bezier(.22, 1, .36, 1) both; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(2)::before, .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(2)::after { animation-delay: .1s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(3)::before, .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(3)::after { animation-delay: .25s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(4)::before, .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(4)::after { animation-delay: .4s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con > .elementor-widget { animation: ch-sube .8s cubic-bezier(.22, 1, .36, 1) both; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(1) > .elementor-widget { animation-delay: .3s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(2) > .elementor-widget { animation-delay: 1s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(3) > .elementor-widget { animation-delay: 1.15s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(4) > .elementor-widget { animation-delay: 1.3s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con > .elementor-widget-heading:first-child .elementor-heading-title::before, .ch-pie--entra > .e-con > .e-con:first-child > .e-con:last-child > .elementor-widget-heading .elementor-heading-title::before { animation: ch-ola 1.6s cubic-bezier(.62, .05, .01, .99) none; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(2) > .elementor-widget-heading:first-child .elementor-heading-title::before { animation-delay: 1.2s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(3) > .elementor-widget-heading:first-child .elementor-heading-title::before { animation-delay: 1.35s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(4) > .elementor-widget-heading:nth-child(1) .elementor-heading-title::before { animation-delay: 1.5s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(4) > .elementor-widget-heading:nth-child(2) .elementor-heading-title::before { animation-delay: 1.62s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(4) > .elementor-widget-heading:nth-child(3) .elementor-heading-title::before { animation-delay: 1.74s; } .ch-pie--entra > .e-con > .e-con:first-child > .e-con:nth-child(4) > .elementor-widget-heading:nth-child(4) .elementor-heading-title::before { animation-delay: 1.86s; } } /* Lo único que sigue atado al scroll es el botón fijo de reservar, que se apaga al entrar el pie. El pie declara una línea de tiempo con nombre y el body la sube de ámbito para que la vea un elemento de fuera; la regla que la usa está en el CSS del contenedor del hero, en la portada. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-elementor-type="footer"] { view-timeline-name: --ch-pie; view-timeline-axis: block; } body { timeline-scope: --ch-pie; } } } /* ── Lenis ──────────────────────────────────────────────────────────── */ /* Las reglas que necesita la librería, traídas aquí para no cargar dos hojas por una línea. Salen de lenis@1.1.20/dist/lenis.css tal cual. */ html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:clip}.lenis.lenis-smooth iframe{pointer-events:none} /* ── La aguada ───────────────────────────────────────────────────────── * Una caja con aguada se monta en Elementor con dos clases y dos números: * * - el contenedor de la sección, con la foto de fondo, lleva la clase * `ch-aguada` (y `ch-oscuro`, para que la cabecera se ponga en crema); * - dentro, un contenedor vacío con la clase `ch-velo`: es el que apaga * la foto, y aquí se coloca y se le pone el backdrop-filter; * - los dos números del apagado los escribe cada caja en su propio CSS * personalizado (`selector{--ec-apagado:.35;--ec-oscuro:.55}`): lo que * le queda de saturación y de brillo a la foto fuera de las manchas, * con 1 = intacta. Si la caja no los escribe, valen estos. * * Lo demás lo pone el script: el lienzo justo encima del velo, con su * mismo z-index, y el resto de hijos por encima de los dos. */ .ch-aguada { --ec-apagado: .35; --ec-oscuro: .55; } .ch-aguada > .ch-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; -webkit-backdrop-filter: saturate(var(--ec-apagado)) brightness(var(--ec-oscuro)); backdrop-filter: saturate(var(--ec-apagado)) brightness(var(--ec-oscuro)); } .ch-aguada > :not(.ch-velo):not(.ch-aguada__lienzo) { position: relative; z-index: 2; } .ch-aguada__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* ── Los enlaces de la casa ──────────────────────────────────────────── * Un contenedor con la clase `ch-enlaces` (Avanzado → Clases CSS) pone a * los enlaces de texto de dentro el aspecto de la casa: sin subrayado, en * rojo azulejo, con la bola del menú delante. Al pasar el ratón, el aro se * rellena de izquierda a derecha en los mismos 0,5 s que en el menú, y el * texto se aparta un poco y se rellena de tinta con el mismo gesto pero * más despacio (1 s), como los botones de Motion; al salir, los dos se * vacían por la derecha. Todo va sobre el propio : el relleno del texto * es un degradado plano recortado a las letras (background-clip: text) * que crece con background-size; el aro es un pseudoelemento con su fondo * y su borde tira de `color`, que sigue siendo el del enlace (lo único * transparente es el relleno de las letras). Los colores salen del Kit. * * Solo coge los enlaces de los widgets de texto (Encabezado y Editor de * texto): el botón de reservar que va en la misma columna del contacto se * queda como botón. Y el `[href][href]` repetido no es un error: el widget * de Encabezado estila sus enlaces con cuatro clases * (`.elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] > a`, * y su `:hover`) y les pone `color: inherit`; repetir el atributo sube el * peso sin tocar la estructura, y así gana esta hoja también en reposo. * * Ángel lo eligió el 10 de septiembre entre tres laboratorios * (`Web2026/ElChurra_enlaces_*.html`): sin latido ni escala en el aro, * que a 8 px se emborrona. Va en el contacto (la columna de datos) y en * el cierre de la carta. */ .ch-enlaces { --ch-enlace: var(--e-global-color-primary, #93210B); --ch-enlace-lleno: var(--e-global-color-secondary, #241610); --ch-enlace-aro: .6; --ch-enlace-paso: .35em; --ch-enlace-bola: .5s; --ch-enlace-texto: 1s; --ch-enlace-curva: cubic-bezier(.62, .05, .01, .99); } .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href] { position: relative; display: inline-block; padding-left: calc(8px + .55em); color: var(--ch-enlace); text-decoration: none; /* El correo del restaurante no cabe de una pieza en la columna del móvil y sacaba barra horizontal: que parta por donde haga falta. */ overflow-wrap: anywhere; background-image: linear-gradient(var(--ch-enlace-lleno), var(--ch-enlace-lleno)), linear-gradient(var(--ch-enlace), var(--ch-enlace)); background-repeat: no-repeat; background-size: 0% 100%, 100% 100%; background-position: right center, left center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: color var(--ch-enlace-bola) var(--ch-enlace-curva), background-size var(--ch-enlace-texto) var(--ch-enlace-curva), padding-left var(--ch-enlace-texto) var(--ch-enlace-curva); } /* Varios enlaces seguidos en un párrafo: la bola separa, no hace falta «·». */ .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]:not(:last-child) { margin-right: 1.2em; } .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]::before { content: ""; position: absolute; left: 0; top: calc(50% - 4px + 1px); width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; background-color: transparent; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 100%; background-position: right center; opacity: var(--ch-enlace-aro); transition: opacity .35s ease, background-size var(--ch-enlace-bola) var(--ch-enlace-curva); } /* Si el enlace parte en dos líneas, la bola centrada en la caja se queda entre las dos. Con `lh` se ancla a la primera línea; donde no haya `lh` (navegadores viejos) sigue valiendo el centrado de arriba. */ @supports (top: 1lh) { .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]::before { top: calc(.5lh - 4px + 1px); } } .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]:hover, .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]:focus-visible { color: var(--ch-enlace-lleno); background-size: 100% 100%, 100% 100%; background-position: left center, left center; padding-left: calc(8px + .55em + var(--ch-enlace-paso)); } .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]:hover::before, .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]:focus-visible::before { opacity: 1; background-size: 100% 100%; background-position: left center; } @media (prefers-reduced-motion: reduce) { .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href] { transition: background-size .2s ease, color .2s ease; } .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]:hover, .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]:focus-visible { padding-left: calc(8px + .55em); } .ch-enlaces :is(.elementor-widget-heading, .elementor-widget-text-editor) a[href][href]::before { transition: opacity .2s ease; } } /* ── Tienda: carrito y pago ───────────────────────────────────────────── */ /* Los bloques de carrito y de pago de WooCommerce pintan sus botones con las clases wc-block-components-button y wp-element-button. El de «Realizar el pedido» es un