/* Web de varias páginas (index.html, aceite.html, historia.html,
olivar.html y preguntas.html).
Usa los mismos tokens de css/style.css; aquí solo lo nuevo. */
/* Página actual en el menú */
/* Cabecera: al pasar por encima, una línea verde crece bajo cada enlace del menú
(la página actual la tiene siempre puesta) */
.main-nav a { position: relative; display: inline-block; padding: .35rem 0; transition: color .25s ease; }
.main-nav a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: var(--c-acento); transform: scaleX(0); transform-origin: left;
transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 4px; }
@media (hover: hover) {
.main-nav a:hover { color: var(--c-acento); }
.main-nav a:hover::after { transform: scaleX(1); }
.logo { transition: color .25s ease; }
.logo:hover { color: var(--c-acento); }
.site-header .btn-sm { transition: transform .2s ease, box-shadow .2s ease, opacity .2s; }
.site-header .btn-sm:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 16px rgb(0 0 0 / .15); }
}
@media (prefers-reduced-motion: reduce) {
.main-nav a::after, .logo, .site-header .btn-sm, .cab-red { transition: none; }
.site-header .btn-sm:hover { transform: none; }
}
/* Cabecera de las páginas interiores */
.p-cabecera {
max-width: 820px; margin: 0 auto; text-align: center;
padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.p-cabecera h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: .4rem 0 1rem; text-wrap: balance; }
.p-cabecera-intro { font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: var(--c-texto-suave); margin: 0 auto; max-width: 48ch; }
.p-interior .section:first-of-type { padding-top: clamp(1rem, 3vw, 2rem); }
/* Inicio: qué es, en corto */
.p-quees { max-width: 760px; text-align: center; }
.p-quees p { font-family: var(--f-titulo); font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.45; margin: 0 auto 2rem; max-width: 38ch; }
/* Inicio: puertas a las páginas */
.p-bloques { padding-top: 0; }
.p-bloques-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.p-bloque { display: grid; gap: .4rem; text-decoration: none; }
.p-bloque .media { aspect-ratio: 4 / 5; margin-bottom: .6rem; }
.p-bloque h3 { font-size: 1.5rem; margin: 0; }
.p-bloque p { margin: 0; color: var(--c-texto-suave); }
.p-bloque-mas { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-acento); margin-top: .4rem; }
.p-bloque:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
/* Inicio: pasos después de reservar */
.p-pasos-titulo { font-size: clamp(1.4rem, 3vw, 2rem); margin: 4rem auto 1.5rem; }
.reserva > .p-pasos { max-width: var(--ancho-max); }
.p-pasos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.p-pasos li { border-top: 1px solid #55523f; padding-top: 1rem; }
.p-paso-num { font-family: var(--f-titulo); color: #c9b56a; }
.p-pasos h3 { font-size: 1.25rem; margin: .3rem 0 .4rem; }
.p-pasos p { margin: 0; color: #cfcabb; font-size: .95rem; }
.check a { color: inherit; }
/* Enlace "ver todas" */
.p-mas { display: inline-block; margin-top: 1.5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-acento); text-decoration: none; }
.p-mas:hover { text-decoration: underline; }
/* Nuestra historia: foto y texto alternados */
.p-familia { display: grid; gap: clamp(3rem, 8vw, 6rem); }
.p-familia-parte { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.p-familia-parte:nth-child(even) .media { order: 2; }
.p-familia-parte h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.p-familia-parte p { color: var(--c-texto-suave); max-width: 52ch; }
/* El olivar: foto ancha + línea de tiempo */
.p-olivar-foto { max-width: calc(var(--ancho-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.p-linea { position: relative; max-width: 980px; margin: 0 auto; }
.p-linea-eje { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; translate: -1px 0; background: var(--c-linea); }
.p-linea-eje i { position: absolute; inset: 0; background: var(--c-acento); transform: scaleY(0); transform-origin: top; }
.p-hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 5vw, 4rem); }
.p-hito { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.p-hito-tarjeta {
grid-column: 1; margin-right: clamp(1.5rem, 4vw, 3.5rem); text-align: right;
padding: clamp(1.2rem, 3vw, 2rem); background: var(--c-fondo-alt);
opacity: .35; filter: grayscale(1); translate: 0 16px;
transition: opacity .6s ease, filter .6s ease, translate .6s ease;
}
.p-hito:nth-child(even) .p-hito-tarjeta { grid-column: 2; margin: 0 0 0 clamp(1.5rem, 4vw, 3.5rem); text-align: left; }
.p-hito-punto {
position: absolute; left: 50%; top: 1.6rem; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%;
background: var(--c-fondo); border: 2px solid var(--c-linea); transition: background-color .4s, border-color .4s;
}
.p-hito-anio { font-family: var(--f-titulo); color: var(--c-acento); font-size: 1.1rem; margin: 0 0 .3rem; }
.p-hito h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 .5rem; }
.p-hito-tarjeta p:last-child { margin: 0; color: var(--c-texto-suave); }
.p-hito.encendido .p-hito-tarjeta { opacity: 1; filter: none; translate: 0 0; }
.p-hito.encendido .p-hito-punto { background: var(--c-acento); border-color: var(--c-acento); }
/* Precio según unidades (página "El aceite") */
.p-precio { margin: 2rem 0 0; }
.p-precio-formato { margin: 0 0 1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-texto-suave); }
.p-precio-elegir { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.p-precio-elegir label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.p-precio-elegir select, .p-precio-elegir input {
font: inherit; color: var(--c-texto); background: transparent;
padding: .6rem .8rem; min-height: 44px; min-width: 6.5rem;
border: 1px solid var(--c-linea); border-radius: var(--radio);
}
.p-precio-elegir input { width: 6.5rem; }
.p-precio-elegir select:focus-visible, .p-precio-elegir input:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.p-precio-total { font-family: var(--f-titulo); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 .25rem; font-variant-numeric: tabular-nums; }
.p-precio-ud { margin: 0 0 1.5rem; color: var(--c-texto-suave); font-variant-numeric: tabular-nums; }
.p-precio-btn { display: block; text-align: center; margin-top: 1.5rem; }
/* Reserva en dos pasos: la cesta y los datos */
.r-paso { border: 0; padding: 0; margin: 2rem 0 0; min-width: 0; }
.r-paso-titulo { font-family: var(--f-titulo); font-size: clamp(1.3rem, 2.6vw, 1.7rem); padding: 0; margin-bottom: 1.25rem; }
.r-paso-titulo span { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; margin-right: .4em; border: 1px solid #55523f; border-radius: 50%; font-size: .7em; color: #cfcabb; }
.r-cesta { border: 1px solid #55523f; border-radius: var(--radio); padding: 1.25rem; margin-bottom: 1.5rem; font-variant-numeric: tabular-nums; }
.r-producto { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 1px solid #55523f; }
.r-producto p { margin: 0; }
.r-producto-nombre { font-family: var(--f-titulo); font-size: 1.15rem; }
.r-producto-formato { color: #a9a493; font-size: .9rem; }
.r-linea { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; color: #cfcabb; }
.r-linea span:last-child { text-align: right; }
.r-total { color: #fff; font-family: var(--f-titulo); font-size: 1.35rem; border-top: 1px solid #55523f; margin-top: .5rem; padding-top: .9rem; }
.r-cesta-nota { margin: .75rem 0 0; font-size: .85rem; color: #a9a493; }
.r-resumen { margin: 0; color: #cfcabb; }
.r-cambiar { background: none; border: 0; padding: .5rem .25rem; color: #fff; font: inherit; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; }
.reserva .p-precio-elegir select, .reserva .p-precio-elegir input { color: #fff; border-color: #55523f; }
.reserva .p-precio-elegir option { color: var(--c-texto); }
.reserva .p-precio-ud { color: #cfcabb; }
/* Reserva rápida del inicio y página de reserva */
.r-rapida .r-cesta { margin-top: 2rem; }
.r-rapida .r-producto-nombre { margin: 0 0 1rem; color: #a9a493; font-family: var(--f-texto); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.r-pagina .r-paso:first-child { margin-top: 0; }
.campos .campo-nombre { grid-column: 1 / -1; }
.r-cambiar:focus-visible, .reserva .p-precio-elegir select:focus-visible, .reserva .p-precio-elegir input:focus-visible { outline: 2px solid #cfcabb; outline-offset: 2px; }
/* La marca ("Solance AOVE") se escribe normal en content.js y se ve en mayúsculas */
.logo, .hero-title, .pie-logo { text-transform: uppercase; }
.logo, .main-nav a, .site-header .btn-sm { white-space: nowrap; }
/* Con "Solance AOVE" y el botón largo no cabe todo en una línea hasta ~1024px:
el menú pasa antes a hamburguesa (el botón de reservar sigue visible) */
@media (max-width: 1024px) {
.nav-toggle { display: block; }
.main-nav { position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--c-fondo); border-bottom: 1px solid var(--c-linea); padding: 1rem var(--gutter); display: none; }
.main-nav.open { display: block; }
.main-nav ul { flex-direction: column; gap: 1rem; }
}
/* Instagram en la cabecera fija: icono discreto antes del botón de reservar */
.cab-red { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: -.75rem; color: var(--c-texto); border-radius: 50%; transition: color .2s, background-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
.cab-red:hover { color: var(--c-acento); background: color-mix(in srgb, var(--c-acento) 10%, transparent); transform: scale(1.08); }
}
.cab-red:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
@media (max-width: 800px) { .cab-red { margin-right: -1rem; } }
/* Instagram en la portada: @usuario abajo a la derecha, sobre el vídeo */
.hero-red {
position: absolute; right: var(--gutter); bottom: 2rem; z-index: 1;
display: inline-flex; align-items: center; gap: .6rem;
color: #fff; text-decoration: none; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
padding: .5rem 0; opacity: .85; transition: opacity .2s;
}
.hero-red:hover { opacity: 1; }
.hero-red:hover span { text-decoration: underline; text-underline-offset: .35em; }
.hero-red:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero-red span { text-transform: none; letter-spacing: .08em; font-size: .9rem; }
@media (max-width: 800px) {
/* En móvil el botón fijo ocupa la parte baja: el enlace va dentro del flujo, bajo el contenido */
.hero { align-content: end; }
.hero-red { position: static; margin-top: 1rem; }
}
/* Pie en cuatro columnas: marca · contacto · explorar · información */
.site-footer { display: block; padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem; }
.pie-cols { max-width: var(--ancho-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem 3rem; }
.pie-titulo { font-family: var(--f-texto); font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin: .4rem 0 1.25rem; }
.pie-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
/* Desplegable «Legal» del pie: en ordenador va abierto y sin título;
en móvil se abre y se cierra tocando «Legal» */
.pie-legal { margin-top: .7rem; }
.pie-legal > summary { display: none; }
@media (max-width: 800px) {
.pie-legal { margin-top: 1rem; border-top: 1px solid #2b2a20; }
.pie-legal > summary {
display: flex; align-items: center; justify-content: space-between;
min-height: 44px; padding: .75rem 0; cursor: pointer; list-style: none;
color: #e9e4d8;
}
.pie-legal > summary::-webkit-details-marker { display: none; }
.pie-legal > summary::after {
content: ""; width: .55rem; height: .55rem; margin-right: .3rem;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px); transition: transform .25s ease;
}
.pie-legal[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.pie-legal > summary:focus-visible { outline: 2px solid #cfcabb; outline-offset: 2px; }
.pie-legal > .pie-lista { padding-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .pie-legal > summary::after { transition: none; } }
/* Enlaces del pie: igual que el menú de arriba, una línea que crece al pasar
por encima (en claro, porque el pie es oscuro) */
.pie-lista a, .pie-boton { position: relative; display: inline-block; padding-bottom: .15rem; text-decoration: none; transition: color .25s ease; }
.pie-lista a::after, .pie-boton::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: #e9e4d8; transform: scaleX(0); transform-origin: left;
transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pie-lista a:focus-visible, .pie-boton:focus-visible { color: #fff; }
@media (hover: hover) {
.pie-lista a:hover, .pie-boton:hover { color: #fff; }
.pie-lista a:hover::after, .pie-boton:hover::after { transform: scaleX(1); }
.pie-logo { transition: color .25s ease; }
.pie-logo:hover { color: #cfcabb; }
}
.pie-logo { display: inline-block; margin-bottom: 1.25rem; font-family: var(--f-titulo); font-size: 1.6rem; letter-spacing: .3em; color: #fff; text-decoration: none; }
.pie-logo img { height: 56px; width: auto; }
.pie-marca p:first-of-type { font-family: var(--f-titulo); font-style: italic; font-size: 1.15rem; color: #e9e4d8; }
.site-footer .pie-suave { margin-top: .4rem; font-size: .85rem; color: #a9a493; }
.pie-redes { display: flex; gap: .75rem; margin-top: 1.5rem; }
.pie-red { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #55523f; border-radius: 50%; color: #e9e4d8; transition: border-color .2s, color .2s, background-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
.pie-red:hover { border-color: #cfcabb; color: #fff; background: rgb(255 255 255 / .06); transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.pie-lista a::after, .pie-boton::after, .pie-red, .pie-logo { transition: none; }
.pie-red:hover { transform: none; }
}
.site-footer a:focus-visible { outline: 2px solid #cfcabb; outline-offset: 3px; }
.site-footer .pie-copy { max-width: var(--ancho-max); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid #2b2a20; font-size: .8rem; color: #a9a493; }
@media (max-width: 900px) {
.pie-cols { grid-template-columns: 1fr 1fr; }
.pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.pie-cols { grid-template-columns: 1fr; }
}
/* Botón "Configurar cookies" del pie, con aspecto de enlace */
.pie-boton { background: none; border: 0; padding: 0 0 .15rem; font: inherit; color: inherit; cursor: pointer; text-align: left; }
/* Aviso de cookies: los tres botones con el mismo peso (guía AEPD) */
.ck {
position: fixed; left: var(--gutter); right: var(--gutter); bottom: 1rem; z-index: 70;
max-width: 760px; margin: 0 auto; padding: 1.25rem 1.5rem;
background: var(--c-oscuro); color: #e9e4d8; border: 1px solid #55523f; border-radius: var(--radio);
box-shadow: 0 10px 40px rgb(0 0 0 / .35); max-height: calc(100svh - 2rem); overflow-y: auto;
}
.ck[hidden] { display: none; }
.ck-titulo { font-size: 1.25rem; color: #fff; margin: 0 0 .5rem; }
.ck-texto { font-size: .9rem; line-height: 1.55; margin: 0 0 1rem; }
.ck a { color: #fff; }
.ck-opciones { display: grid; gap: .75rem; margin: 0 0 1.25rem; padding: 1rem 0; border-block: 1px solid #55523f; font-size: .88rem; }
.ck-opcion { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.ck-opcion input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--c-acento); flex: none; }
.ck-opcion strong { color: #fff; font-weight: 600; }
.ck-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ck-btn {
min-height: 44px; padding: .7rem 1rem; font: inherit; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
background: transparent; color: #fff; border: 1px solid #cfcabb; border-radius: var(--radio); cursor: pointer;
}
.ck-btn:hover { background: #fff; color: var(--c-oscuro); }
.ck-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ck-btn[hidden], .ck-opciones[hidden] { display: none; }
@media (max-width: 560px) {
.ck { bottom: .5rem; padding: 1rem; }
.ck-botones { grid-template-columns: 1fr; }
}
/* Vídeos externos bloqueados hasta aceptar */
.ck-embed { aspect-ratio: 16 / 9; display: grid; place-items: center; gap: 1rem; align-content: center; padding: 1.5rem; text-align: center; background: var(--c-fondo-alt); border: 1px solid var(--c-linea); }
.ck-embed p { margin: 0; max-width: 40ch; color: var(--c-texto-suave); font-size: .9rem; }
.ck-embed iframe { width: 100%; height: 100%; border: 0; }
.ck-embed:has(iframe) { padding: 0; border: 0; }
/* Forma de entrega en la cesta */
.r-entrega { border: 0; padding: 0 0 1rem; margin: 0 0 .5rem; border-bottom: 1px solid #55523f; display: grid; gap: .6rem; min-width: 0; }
.r-entrega legend { padding: 0; margin-bottom: .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.r-opcion { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid #55523f; border-radius: var(--radio); cursor: pointer; }
.r-opcion:has(input:checked) { border-color: #cfcabb; }
.r-opcion input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--c-acento); }
.r-opcion strong { display: block; color: #fff; font-weight: 600; }
.r-opcion small { display: block; color: #a9a493; font-size: .85rem; line-height: 1.5; margin-top: .15rem; }
.r-opcion:has(input:focus-visible) { outline: 2px solid #cfcabb; outline-offset: 2px; }
/* Casillas de consentimiento de la reserva */
.r-checks { margin: 1.5rem 0 1rem; }
.r-checks .check { margin: 0 0 .9rem; align-items: flex-start; }
.r-checks .check input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--c-acento); }
.r-checks em { font-style: normal; color: #a9a493; }
/* Primera capa de privacidad junto al botón de reservar */
.r-privacidad { font-size: .8rem; color: #a9a493; margin: 0 0 1.5rem; }
.r-privacidad a { color: #cfcabb; }
/* Páginas legales */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 2.5rem 0 .75rem; }
.legal h3 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.legal p, .legal li { color: var(--c-texto); }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin-bottom: .35rem; }
.legal-fecha { color: var(--c-texto-suave); font-size: .9rem; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 1rem 0; }
.legal dt { color: var(--c-texto-suave); }
.legal dd { margin: 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-variant-numeric: tabular-nums; }
.legal th, .legal td { text-align: left; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--c-linea); vertical-align: top; }
.legal th { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-texto-suave); font-weight: 400; }
.legal-modelo { border: 1px solid var(--c-linea); padding: 1.25rem 1.5rem; margin: 1rem 0; }
/* Datos que faltan: se ven a propósito para no publicarlos sin rellenar */
mark.pendiente { background: #f1dc8a; color: var(--c-texto); padding: 0 .25em; }
.legal th, .legal td { overflow-wrap: anywhere; }
@media (max-width: 560px) {
.legal table { font-size: .85rem; }
.legal th, .legal td { padding-right: .5rem; }
.legal dl { grid-template-columns: 1fr; gap: .1rem; }
.legal dd { margin-bottom: .6rem; }
}
/* Preguntas frecuentes (página) */
.p-faq-contacto { margin-top: 2.5rem; color: var(--c-texto-suave); }
/* Llamada a reservar al final de las páginas interiores */
.p-llamada { text-align: center; border-top: 1px solid var(--c-linea); max-width: 820px; }
.p-llamada-texto { font-family: var(--f-titulo); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 1.5rem; }
@media (max-width: 800px) {
.p-bloques-lista, .p-familia-parte { grid-template-columns: 1fr; }
.p-familia-parte:nth-child(even) .media { order: 0; }
.p-linea-eje { left: 7px; }
.p-hito { grid-template-columns: 1fr; }
.p-hito-tarjeta, .p-hito:nth-child(even) .p-hito-tarjeta { grid-column: 1; margin: 0 0 0 2.2rem; text-align: left; }
.p-hito-punto { left: 8px; }
.p-pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.p-pasos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.p-hito-tarjeta { transition: none; }
}
/* ---------- Páginas sueltas, sin menú ni pie de la web ----------
mantenimiento.html, reservar.html (Instagram) y fichatecnica2627.html (QR) */
.solo .p-cabecera { padding-top: clamp(3rem, 9vw, 6rem); }
.solo-pie { text-align: center; padding: 2.5rem var(--gutter) 3rem; font-size: .85rem; color: var(--c-texto-suave); }
.solo-pie p { margin: .2rem 0; }
/* Mantenimiento: portada provisional a pantalla completa */
.mant { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: .5rem;
text-align: center; padding: 4rem var(--gutter); background: var(--c-oscuro); color: #fff; }
.mant-eyebrow { color: #c9b56a; margin: 0; }
.mant-marca { font-size: clamp(3rem, 11vw, 7.5rem); letter-spacing: .12em; margin: .4rem 0 0; }
.mant-lema { font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: #cfcabb; margin: 0; }
.mant-aviso { max-width: 34rem; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid #55523f; }
.mant-aviso h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .75rem; }
.mant-aviso p { color: #cfcabb; margin: 0 0 2rem; }
.mant-contacto { list-style: none; padding: 0; margin: clamp(2.5rem, 6vw, 4rem) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; font-size: .85rem; }
.mant-contacto a { color: #cfcabb; text-underline-offset: .2em; }
.mant-contacto a:hover { color: #fff; }
.mant .btn:focus-visible, .mant-contacto a:focus-visible { outline: 2px solid #cfcabb; outline-offset: 3px; }
/* Reserva suelta: condiciones y privacidad en una ventana, sin salir de la página */
.legal-dialogo { width: min(760px, calc(100vw - 2rem)); max-height: min(85svh, 900px); padding: 0; border: 1px solid var(--c-linea);
border-radius: var(--radio); background: var(--c-fondo); color: var(--c-texto); }
.legal-dialogo::backdrop { background: rgb(20 20 15 / .6); }
.legal-dialogo-barra { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 1.25rem; background: var(--c-fondo); border-bottom: 1px solid var(--c-linea); }
.legal-dialogo-barra h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0; }
.legal-dialogo-cerrar { flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--c-linea); border-radius: 50%;
background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit; }
.legal-dialogo-cerrar:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.legal-dialogo-texto { padding: 0 1.25rem 1.5rem; max-width: none; }
.legal-dialogo-texto h2:first-child { margin-top: 1.5rem; }
/* Ficha técnica: la tabla de análisis se desliza en móvil si no cabe */
.ficha-tabla-caja { overflow-x: auto; }
.ficha .ficha-tabla th[scope="row"] { font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--c-texto); }
.ficha-tabla td:last-child { color: var(--c-texto-suave); white-space: nowrap; }
.legal .ficha-nota { font-size: .85rem; color: var(--c-texto-suave); }
/* ---------- Envío de la reserva: enviando → enviada ----------
Se ve una vez por reserva: el botón gira mientras se envía y, al llegar,
el formulario se va y se dibuja un ✓ dorado con el nº de reserva. */
.reserva-form .btn[type="submit"] { position: relative; transition: transform 160ms var(--ease-out), opacity .2s; }
.reserva-form .btn[type="submit"]:active { transform: scale(.97); }
/* Enviando: el texto se oculta sin cambiar el ancho y aparece el indicador */
.reserva-form .btn.cargando { color: transparent; pointer-events: none; opacity: 1; }
.reserva-form .btn.cargando::after {
content: ""; position: absolute; inset: 0; margin: auto; width: 1.15rem; height: 1.15rem;
border: 2px solid rgb(255 255 255 / .3); border-top-color: #fff; border-radius: 50%;
animation: r-girar .7s linear infinite;
}
.reserva-form .campos, .reserva-form .r-checks, .reserva-form .r-resumen { transition: opacity 200ms var(--ease-out); }
.reserva-form.enviando .campos, .reserva-form.enviando .r-checks, .reserva-form.enviando .r-resumen { opacity: .45; pointer-events: none; }
/* Enviada: el formulario se va… */
.reserva-form.saliendo { opacity: 0; transform: translateY(-8px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
/* …y entra el panel: primero el círculo, luego el ✓ y después el texto */
.r-exito { text-align: center; padding: clamp(1.5rem, 5vw, 3rem) 0 1rem; }
.r-exito:focus { outline: none; }
.r-exito-icono { display: block; width: 76px; height: 76px; margin: 0 auto 1.5rem; fill: none; stroke: #c9b56a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r-exito-icono circle { stroke-dasharray: 151; stroke-dashoffset: 151; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; animation: r-trazo 650ms var(--ease-out) forwards; }
.r-exito-icono path { stroke-width: 2.5; stroke-dasharray: 32; stroke-dashoffset: 32; animation: r-trazo 350ms var(--ease-out) 420ms forwards; }
.r-exito h3 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .4rem; }
.r-exito-num { font-family: var(--f-titulo); font-style: italic; font-size: 1.15rem; color: #c9b56a; margin: 0 0 1rem; }
.r-exito-texto { color: #cfcabb; max-width: 44ch; margin: 0 auto 2rem; }
.r-exito-otra { color: #fff; border-color: #55523f; }
.r-exito > :not(svg) { opacity: 0; animation: r-aparece 450ms var(--ease-out) forwards; }
.r-exito > :nth-child(2) { animation-delay: 560ms; }
.r-exito > :nth-child(3) { animation-delay: 620ms; }
.r-exito > :nth-child(4) { animation-delay: 680ms; }
.r-exito > :nth-child(5) { animation-delay: 740ms; }
@keyframes r-girar { to { transform: rotate(1turn); } }
@keyframes r-trazo { to { stroke-dashoffset: 0; } }
@keyframes r-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes r-fundido { to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
.r-exito-otra:hover { border-color: #cfcabb; opacity: 1; }
}
/* Movimiento reducido: sin desplazamientos ni trazos; solo fundidos suaves */
@media (prefers-reduced-motion: reduce) {
.reserva-form .btn[type="submit"]:active { transform: none; }
.reserva-form .btn.cargando::after { animation-duration: 1.6s; }
.reserva-form.saliendo { transform: none; transition: none; }
.r-exito-icono circle, .r-exito-icono path { animation: none; stroke-dashoffset: 0; }
.r-exito > :not(svg) { animation: r-fundido 200ms ease forwards; animation-delay: 0ms; }
}
/* ---------- Campos del formulario: foco, desplegable y errores ---------- */
.campos input, .campos select { transition: border-color 160ms ease, box-shadow 160ms ease; }
.campos input:focus-visible, .campos select:focus-visible {
outline: none; border-color: #c9b56a; box-shadow: 0 0 0 3px rgb(201 181 106 / .18);
}
/* Desplegable cerrado: flecha propia (en todos los navegadores) */
.campos select {
appearance: none; cursor: pointer; padding-right: 2.6rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23cfcabb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
}
@media (hover: hover) and (pointer: fine) {
.campos select:hover, .campos input:hover { border-color: #7a765c; }
}
/* Lista abierta con estilo propio donde el navegador lo permite (Chrome,
Edge, Android). En el resto se queda la lista del sistema. */
@supports (appearance: base-select) {
.campos select, .campos select::picker(select) { appearance: base-select; }
.campos select { display: flex; align-items: center; background-image: none; padding-right: .8rem; }
.campos select::picker-icon {
content: ""; width: 12px; height: 8px; margin-left: auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23cfcabb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
transition: rotate 200ms var(--ease-out);
}
.campos select:open::picker-icon { rotate: 180deg; }
.campos select:open { border-color: #c9b56a; }
.campos select::picker(select) {
margin-top: .4rem; padding: .35rem; border: 1px solid #3d3b2e; border-radius: 4px;
background: #1d1d16; color: #e9e4d8; box-shadow: 0 18px 40px rgb(0 0 0 / .5);
opacity: 0; translate: 0 -4px;
transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out), overlay 150ms allow-discrete, display 150ms allow-discrete;
}
.campos select:open::picker(select) { opacity: 1; translate: 0 0; }
@starting-style { .campos select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
.campos select option {
display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: 2px;
color: #e9e4d8; background: transparent; font-size: .95rem; cursor: pointer;
}
.campos select option[value=""] { display: none; }
.campos select option:hover, .campos select option:focus-visible { background: rgb(201 181 106 / .14); color: #fff; outline: none; }
.campos select option:checked { color: #c9b56a; }
.campos select option::checkmark { order: 1; margin-left: auto; content: "✓"; color: #c9b56a; }
}
/* Errores: borde y mensaje bajo el campo, con un icono «!» */
.campos [aria-invalid="true"] { border-color: #d98a76; }
.campos [aria-invalid="true"]:focus-visible { border-color: #d98a76; box-shadow: 0 0 0 3px rgb(217 138 118 / .2); }
.r-checks [aria-invalid="true"] { outline: 2px solid #d98a76; outline-offset: 2px; }
.campo-error {
display: flex; gap: .45rem; align-items: flex-start; margin: .1rem 0 0;
font-size: .82rem; line-height: 1.4; text-transform: none; letter-spacing: 0; color: #f0b3a4;
animation: r-aparece 200ms var(--ease-out);
}
.campo-error::before {
content: "!"; flex: none; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-top: .05rem;
border-radius: 50%; background: #d98a76; color: var(--c-oscuro); font-size: .7rem; font-weight: 700;
}
.r-checks .campo-error { margin: -.5rem 0 1rem 1.7rem; }
/* Error al enviar: aviso en recuadro, no solo texto */
.form-estado.error {
display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem;
border: 1px solid rgb(217 138 118 / .45); border-left: 3px solid #d98a76; border-radius: 2px;
background: rgb(217 138 118 / .08); color: #f3c7bb; font-size: .9rem;
animation: r-aparece 200ms var(--ease-out);
}
.form-estado.error::before {
content: "!"; flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-top: .1rem;
border-radius: 50%; background: #d98a76; color: var(--c-oscuro); font-size: .75rem; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.campo-error, .form-estado.error { animation: r-fundido 150ms ease forwards; opacity: 0; }
.campos select::picker-icon, .campos select::picker(select) { transition: none; translate: none; }
}
/* El campo «¿Dónde nos conociste?» solo con «Otro» (el display: grid de la etiqueta pisaba el hidden) */
.campos label[hidden] { display: none; }
/* El desplegable no hereda las mayúsculas ni el espaciado de la etiqueta */
.campos select { text-transform: none; letter-spacing: normal; }