/* =========================================================
MADRID HORSE TOUR — componentes
Ampliación del sistema editorial: botones, calendario de rutas,
catálogo, reserva paso a paso y panel de administración.
Se carga después de styles.css y reutiliza sus tokens.
========================================================= */
/* =========================================================
MARCA EN EL HEADER
========================================================= */
/* El escudo encogia animando su `height`. Animar la altura de una ![]()
obliga al navegador a rehacer el layout de la fila y a rasterizar la
imagen otra vez en cada fotograma; `scale` es trabajo de compositor y
se ve igual. El origen va abajo a la izquierda porque `.wordmark`
alinea por linea base, que en una imagen es su borde inferior: asi el
escudo se encoge hacia el mismo sitio que antes.
`.wordmark` no declara altura en ningun sitio, de modo que la
transicion que tenia era codigo muerto. */
.wordmark__crest {
width: auto; height: 2.6rem;
transform-origin: left bottom;
transition: transform 0.4s var(--ease);
}
.site-head.scrolled .wordmark__crest { transform: scale(0.808); }
@media (prefers-reduced-motion: reduce) {
.wordmark__crest { transition: none; }
}
.site-head--solid { position: sticky; background: var(--night); }
.site-head--solid::before { opacity: 0; }
.menu--min { gap: 1.4rem; }
@media (max-width: 820px) {
.menu--min { position: static; inset: auto; background: none; flex-direction: row; transform: none; }
.site-head--solid .burger { display: none; }
}
/* `hidden` debe ganar siempre: varios componentes fijan display. */
[hidden] { display: none !important; }
/* =========================================================
LEGIBILIDAD SOBRE FOTOGRAFÍA
Los velos base de styles.css asumen imágenes oscuras; varias de
las fotos del cliente tienen cielos muy claros, así que aquí se
refuerzan los degradados y se añade una sombra sutil al texto.
========================================================= */
.hero__grid, .chapter__text, .donde__inner, .testi__inner, .interlude__quote {
text-shadow: 0 1px 16px rgba(21, 23, 15, 0.55);
}
.hero__eyebrow { color: rgba(246, 242, 232, 0.95); text-shadow: 0 1px 14px rgba(21, 23, 15, 0.9); }
.hero .bleed__veil--hero {
background:
linear-gradient(180deg, rgba(21,23,15,0.55) 0%, rgba(21,23,15,0.10) 26%, rgba(21,23,15,0.5) 62%, rgba(21,23,15,0.95) 100%),
radial-gradient(95% 78% at 22% 86%, rgba(21,23,15,0.78), transparent 64%);
}
.chapter--a .bleed__veil,
.chapter--d .bleed__veil {
background: linear-gradient(0deg, rgba(21,23,15,0.94) 0%, rgba(21,23,15,0.55) 34%, rgba(21,23,15,0.14) 64%, rgba(21,23,15,0.5) 100%);
}
.chapter--b .bleed__veil--right {
background: linear-gradient(270deg, rgba(21,23,15,0.94), rgba(21,23,15,0.42) 52%, transparent 78%),
linear-gradient(0deg, rgba(21,23,15,0.6), transparent 55%);
}
.chapter--c .bleed__veil--center {
background: linear-gradient(90deg, rgba(21,23,15,0.94), rgba(21,23,15,0.42) 50%, transparent 74%),
linear-gradient(0deg, rgba(21,23,15,0.55), transparent 60%);
}
.donde .bleed__veil {
background: linear-gradient(90deg, rgba(21,23,15,0.95), rgba(21,23,15,0.6) 44%, rgba(21,23,15,0.15) 78%),
linear-gradient(0deg, rgba(21,23,15,0.55), transparent 45%);
}
.testi .bleed__veil--testi {
background: linear-gradient(90deg, rgba(21,23,15,0.88), rgba(21,23,15,0.45) 62%, rgba(21,23,15,0.2) 100%),
linear-gradient(0deg, rgba(21,23,15,0.6), transparent 55%);
}
@media (max-width: 820px) {
.chapter--b .bleed__veil--right,
.chapter--c .bleed__veil--center,
.donde .bleed__veil {
background: linear-gradient(0deg, rgba(21,23,15,0.94) 0%, rgba(21,23,15,0.6) 40%, rgba(21,23,15,0.35) 100%);
}
}
/* =========================================================
BOTONES
========================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
padding: 0.95rem 1.9rem;
font-family: var(--sans); font-size: 0.76rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
border: 1px solid currentColor; background: none; color: inherit;
cursor: pointer; text-align: center;
transition: background var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui), transform var(--t-ui) var(--ease-ui);
}
.btn .arrow { transition: transform 0.45s var(--ease); }
@media (hover: hover) {
.btn:hover .arrow { transform: translateX(4px); }
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--night); }
@media (hover: hover) {
.btn--gold:hover { background: #dbbc82; border-color: #dbbc82; }
}
.btn--gold:disabled { opacity: 0.55; cursor: progress; }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--bone); }
@media (hover: hover) {
.btn--ink:hover { background: var(--ochre); border-color: var(--ochre); }
}
.btn--ghost { background: none; border-color: currentColor; opacity: 0.85; }
@media (hover: hover) {
.btn--ghost:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
}
.btn--sm { padding: 0.68rem 1.25rem; font-size: 0.7rem; letter-spacing: 0.14em; }
.linkish {
font: inherit; color: var(--accent); text-decoration: underline;
text-underline-offset: 3px; padding: 0; cursor: pointer;
}
/* =========================================================
HERO — variantes
========================================================= */
.hero__actions { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); flex-wrap: wrap; margin-top: 2.6rem; }
.hero__actions .hero__enter { margin-top: 0; }
.hero--short { min-height: 78svh; }
.hero__title--short { font-size: clamp(2.8rem, 8vw, 6.4rem); }
.hero__title--short em { color: var(--gold); }
/* =========================================================
PILARES (home)
========================================================= */
.pilares {
list-style: none; max-width: var(--maxw); margin: clamp(4rem, 9vw, 8rem) auto 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3vw, 3rem);
border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3.5rem);
}
.pilar__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.12; margin: 0 0 0.8rem; }
.pilar__desc { font-size: 0.92rem; line-height: 1.6; color: var(--dim); }
@media (max-width: 1000px) { .pilares { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; } }
@media (max-width: 620px) { .pilares { grid-template-columns: 1fr; } }
/* =========================================================
INTERLUDIO con cita
========================================================= */
.interlude__quote { position: relative; z-index: 2; max-width: 22ch; margin: 0 auto; }
.interlude__text {
font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em;
font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.14; text-align: center;
}
.interlude__text em { color: var(--gold); }
.interlude__by { margin-top: 2rem; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); text-align: center; }
/* =========================================================
LO QUE DISTINGUE — tarjetas con foto
========================================================= */
.distingue { padding: clamp(5rem, 12vw, 10rem) var(--edge) clamp(2rem, 5vw, 4rem); }
.distingue__head { max-width: var(--maxw); margin: 0 auto; }
.distingue__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(2.2rem, 5.5vw, 4.8rem); line-height: 1.04; margin: 1.3rem 0 1.3rem; }
.distingue__title em { color: var(--ochre); font-weight: 400; }
.distingue__note { max-width: 48ch; color: var(--dim); font-size: clamp(1rem, 1.35vw, 1.15rem); }
.cards {
max-width: var(--maxw); margin: clamp(3rem, 6vw, 5rem) auto 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 2.4vw, 2.4rem);
}
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(42,40,29,0.08); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) {
.card:hover .card__media img { transform: scale(1.045); }
}
.card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.16; margin: 1.2rem 0 0.7rem; }
.card__desc { font-size: 0.92rem; line-height: 1.62; color: var(--dim); }
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, 1fr); row-gap: 2.8rem; } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.parque__note--sec { margin-top: 1.2rem; font-size: 1rem; }
/* =========================================================
DÓNDE ESTAMOS
========================================================= */
.donde { min-height: 86svh; display: flex; align-items: center; overflow: hidden; padding: clamp(5rem, 10vw, 9rem) var(--edge); }
.donde__inner { position: relative; z-index: 2; max-width: 56ch; }
.donde__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.04; margin: 1.3rem 0 1.6rem; }
.donde__title em { color: var(--gold); font-weight: 400; }
.donde__text { color: rgba(246,242,232,0.8); line-height: 1.7; margin-bottom: 1.1rem; }
.reservar__cta { margin: 2.4rem 0 0.6rem; }
/* =========================================================
CALENDARIO DE RUTAS
========================================================= */
.cal { padding: clamp(4rem, 9vw, 8rem) var(--edge); }
.cal__head { max-width: var(--maxw); margin: 0 auto; }
.cal__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.04; margin: 1.2rem 0 1.2rem; }
.cal__title em { color: var(--ochre); font-weight: 400; }
.cal__note { max-width: 56ch; color: var(--dim); }
.cal__notice {
max-width: var(--maxw); margin: 2.2rem auto 0; padding: 1.15rem 1.4rem;
border: 1px solid color-mix(in srgb, var(--ochre) 40%, transparent);
background: color-mix(in srgb, var(--ochre) 8%, transparent);
font-size: 0.92rem; line-height: 1.6;
}
.cal__notice p + p { margin-top: 0.6rem; }
.cal__notice a { color: var(--ochre); text-decoration: underline; text-underline-offset: 3px; }
.cal__notice code { font-size: 0.86em; background: rgba(42,40,29,0.08); padding: 0.1em 0.35em; }
/* ---- filtros ---- */
.filtros {
max-width: var(--maxw); margin: clamp(2rem, 4vw, 3rem) auto 0;
display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
padding-bottom: 1.4rem; border-bottom: 1px solid var(--line);
}
.filtros__group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip {
padding: 0.6rem 1.15rem; border: 1px solid var(--line); background: none;
font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
color: var(--dim); cursor: pointer;
transition: border-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.chip:hover { border-color: var(--accent); color: var(--fg); }
}
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.filtros__select { display: flex; align-items: center; gap: 0.8rem; }
.filtros__select span { font-size: var(--micro-lg); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.filtros__select select {
appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line);
padding: 0.5rem 1.6rem 0.5rem 0; font-family: var(--serif); font-size: 1.05rem; color: inherit; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a5672c' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right center;
}
.filtros__select select:focus { outline: none; border-color: var(--accent); }
.filtros__select option { background: var(--paper); color: var(--ink); }
/* ---- rejilla general ---- */
.cal__grid {
max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
display: grid; grid-template-columns: minmax(320px, 0.85fr) 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 980px) { .cal__grid { grid-template-columns: 1fr; } }
/* ---- mes ---- */
@media (min-width: 981px) { .cal__month { position: sticky; top: 6.5rem; } }
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.cal__label { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.85rem); letter-spacing: -0.01em; }
.cal__arrow {
width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); font-size: 1.1rem; line-height: 1;
color: inherit; cursor: pointer;
transition: border-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.cal__arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
}
.cal__arrow:disabled { opacity: 0.28; cursor: default; }
.cal__dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal__dows span { text-align: center; font-size: var(--micro-lg); letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day {
position: relative; aspect-ratio: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
border: 1px solid transparent; font-size: 0.92rem; color: var(--dim);
background: none;
transition: border-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
.day--empty { border: 0; }
.day--off { color: var(--faint); opacity: 0.5; }
.day--on {
cursor: pointer; border-color: var(--line); color: var(--fg); font-weight: 500;
background: color-mix(in srgb, var(--ochre) 5%, transparent);
}
@media (hover: hover) {
.day--on:hover { border-color: var(--ochre); background: color-mix(in srgb, var(--ochre) 12%, transparent); }
}
.day--on.is-sel { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.day--on.is-sel .dot { box-shadow: 0 0 0 1px rgba(246,242,232,0.5); }
.day--full { opacity: 0.62; }
.day.is-hoy .day__n { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ochre); }
.day__n { line-height: 1; }
.day__dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); display: inline-block; }
.dot--corta { background: var(--gold); }
.dot--larga { background: var(--ochre); }
.dot--full { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.55; }
.cal__legend { list-style: none; display: flex; gap: 1.3rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.cal__legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.74rem; letter-spacing: 0.03em; color: var(--dim); }
.cal__vacio { grid-column: 1 / -1; padding: 2rem 0; color: var(--dim); font-size: 0.95rem; }
/* ---- panel de salidas ---- */
.cal__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.cal__panel-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
.cal__clear { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); cursor: pointer; }
@media (hover: hover) {
.cal__clear:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.salidas { list-style: none; }
.salida {
display: grid; grid-template-columns: 96px 1fr auto; gap: clamp(1rem, 2vw, 1.6rem);
align-items: center; padding: 1.35rem 0; border-bottom: 1px solid var(--line);
}
.salida--vacia { display: block; padding: 2rem 0; color: var(--dim); font-size: 0.95rem; }
.salida.is-full { opacity: 0.62; }
.salida__media { aspect-ratio: 1; overflow: hidden; background: rgba(42,40,29,0.08); }
.salida__media img { width: 100%; height: 100%; object-fit: cover; }
.salida__fecha { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); }
.salida__nota { font-style: italic; letter-spacing: 0.04em; text-transform: none; }
.salida__ruta { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.42rem); line-height: 1.1; margin: 0.35rem 0 0.3rem; }
.salida__meta { font-size: 0.82rem; color: var(--dim); }
.salida__accion { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; text-align: right; }
.salida__precio { font-family: var(--serif); font-size: 1.28rem; white-space: nowrap; }
.salida__precio em { font-style: normal; font-size: var(--micro); letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; }
.salida__ficha { font-size: var(--micro-lg); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
@media (hover: hover) {
.salida__ficha:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
}
.plazas { display: block; margin-top: 0.7rem; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--dim); }
.plazas--pocas { color: var(--ochre); font-weight: 500; }
.plazas--full { color: var(--faint); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; }
.plazas__bar { display: block; height: 2px; background: var(--line); margin-top: 0.45rem; max-width: 180px; }
.plazas__bar i { display: block; height: 100%; background: var(--ochre); }
@media (max-width: 620px) {
.salida { grid-template-columns: 68px 1fr; }
.salida__accion { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}
/* =========================================================
CATÁLOGO DE RUTAS
========================================================= */
.catalogo { padding: clamp(5rem, 11vw, 9rem) var(--edge); }
.catalogo__head { max-width: var(--maxw); margin: 0 auto; }
.catalogo__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.04; margin-top: 1.2rem; }
.catalogo__title em { color: var(--gold); font-weight: 400; }
.catalogo__sub {
max-width: var(--maxw); margin: clamp(3rem, 6vw, 5rem) auto 1.8rem;
font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--gold);
padding-bottom: 0.9rem; border-bottom: 1px solid var(--line);
}
.rutas {
max-width: var(--maxw); margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 2.6vw, 2.6rem);
}
@media (max-width: 1080px) { .rutas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .rutas { grid-template-columns: 1fr; } }
.ruta { display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(246,242,232,0.025); }
.ruta__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.ruta__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) saturate(0.96); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
@media (hover: hover) {
.ruta:hover .ruta__media img { transform: scale(1.04); filter: brightness(1) saturate(1); }
}
.ruta__body { padding: clamp(1.4rem, 2.2vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.ruta__nombre { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1; }
.ruta__meta { margin-top: 0.5rem; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.ruta__desc { margin-top: 1rem; font-size: 0.92rem; line-height: 1.62; color: var(--dim); }
.ruta__tarifa { margin-top: 1.1rem; display: inline-block; width: fit-content; padding: 0.35rem 0.75rem; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); font-size: var(--micro-lg); letter-spacing: 0.08em; color: var(--gold); }
.ruta__precio { margin-top: 1rem; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.04; color: var(--gold); }
.ruta__precio em { font-style: normal; font-size: 0.28em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-left: 0.4em; }
.ruta__incluyek { margin-top: 1.6rem; font-size: var(--micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.ruta__incluye { list-style: none; margin-top: 0.7rem; display: grid; gap: 0.35rem; }
.ruta__incluye li { font-size: 0.86rem; color: var(--dim); padding-left: 1.1rem; position: relative; }
.ruta__incluye li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: 0.8em; }
.fechitas { list-style: none; margin-top: 0.7rem; display: grid; gap: 0.3rem; }
.fechita { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.84rem; padding-bottom: 0.3rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.fechita span { color: var(--fg); }
.fechita em { font-style: normal; font-size: 0.76rem; color: var(--faint); }
.fechita.is-full { opacity: 0.5; }
.ruta__agotada { margin-top: 1.4rem; font-size: 0.86rem; color: var(--faint); font-style: italic; }
.ruta__acciones { margin-top: auto; padding-top: 1.8rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ruta__ficha { font-size: var(--micro-lg); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
@media (hover: hover) {
.ruta__ficha:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
}
/* =========================================================
PREGUNTAS
========================================================= */
.faq { padding: clamp(5rem, 11vw, 9rem) var(--edge); }
.faq__head { max-width: var(--maxw); margin: 0 auto; }
.faq__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.04; margin-top: 1.2rem; }
.faq__title em { color: var(--ochre); font-weight: 400; }
.faq__grid {
max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 820px) { .faq__grid { grid-template-columns: 1fr; } }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
list-style: none; cursor: pointer; padding: 1.25rem 2rem 1.25rem 0; position: relative;
font-family: var(--serif); font-weight: 400; font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
color: var(--ochre); font-size: 1.2rem; transition: transform 0.35s var(--ease);
}
.qa[open] summary::after { content: '−'; }
.qa p { padding-bottom: 1.4rem; font-size: 0.94rem; line-height: 1.68; color: var(--dim); max-width: 56ch; }
.faq__help { max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; color: var(--dim); font-size: 0.95rem; }
.faq__help a { color: var(--accent); }
/* =========================================================
MODALES
========================================================= */
/* El bloqueo de scroll lo aplica `MHT.bloquearScroll`, que ademas guarda y
devuelve la posicion. `overflow: hidden` a secas no sujeta el dedo en iOS
y al soltarlo la pagina volvia arriba. `.modal-abierto` se queda solo
para lo que sigue siendo cosa del dialogo: retirar la barra y el boton
de subir mientras esta abierto. */
body.scroll-bloqueado {
position: fixed;
left: 0; right: 0; width: 100%;
overflow: hidden;
}
.modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: clamp(0.5rem, 3vw, 2.5rem); }
/* Entrada y salida no son simetricas, y no deben serlo. Lo que esta en la
regla base es la SALIDA —es el estado al que se vuelve al quitar `is-on`—
y va corta: al cerrar, el dialogo estorba. Lo que esta en `.is-on` es la
ENTRADA, y se puede permitir el pausado editorial de la casa.
Ademas la salida duraba 450ms mientras `cerrarModal` ocultaba el panel a
los 240: la animacion se cortaba por la mitad y el dialogo desaparecia de
golpe. Ahora la salida cabe en esos 240ms. */
.modal__backdrop {
position: absolute; inset: 0;
background: rgba(10, 8, 5, 0.72); backdrop-filter: blur(6px);
opacity: 0; transition: opacity 0.18s var(--ease-ui);
}
.modal.is-on .modal__backdrop { opacity: 1; transition: opacity 0.3s var(--ease); }
.modal__panel {
position: relative; z-index: 2; width: min(720px, 100%); max-height: 92svh; overflow-y: auto;
background: var(--paper); color: var(--ink);
border: 1px solid rgba(42,40,29,0.12); box-shadow: 0 40px 90px -30px rgba(10,8,5,0.7);
transform: translateY(24px) scale(0.985); opacity: 0;
transition: transform 0.2s var(--ease-ui), opacity 0.16s var(--ease-ui);
scrollbar-width: thin;
}
.modal.is-on .modal__panel {
transform: none; opacity: 1;
transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}
.modal__panel--wide { width: min(1080px, 100%); }
.modal__close {
position: sticky; top: 0; left: 100%; z-index: 5; width: 3rem; height: 3rem; flex: none;
font-size: 1.5rem; line-height: 1; color: var(--ink);
background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(4px);
}
@media (hover: hover) {
.modal__close:hover { color: var(--ochre); }
}
.modal__body { padding: 0 clamp(1.4rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); margin-top: -3rem; }
/* ---- ficha de ruta ---- */
.ficha { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 3vw, 3rem); padding-top: 3rem; }
@media (max-width: 820px) { .ficha { grid-template-columns: 1fr; } }
.ficha__media { position: sticky; top: 1rem; align-self: start; aspect-ratio: 3 / 4; overflow: hidden; }
.ficha__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .ficha__media { position: static; aspect-ratio: 3 / 2; } }
.ficha__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.04; margin: 1rem 0 0.6rem; }
.ficha__meta { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); margin-bottom: 1.6rem; }
.ficha__p { font-size: 0.96rem; line-height: 1.72; color: rgba(42,40,29,0.78); margin-bottom: 1rem; }
.ficha__h { margin: 2rem 0 0.9rem; font-size: var(--micro-lg); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.ficha__itin { margin-left: 1.1rem; display: grid; gap: 0.8rem; }
.ficha__itin li { font-size: 0.93rem; line-height: 1.65; color: rgba(42,40,29,0.78); }
.ficha__inc { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ficha__inc li { padding: 0.35rem 0.8rem; border: 1px solid rgba(42,40,29,0.16); font-size: 0.8rem; }
.ficha__fechas { list-style: none; display: grid; gap: 0.4rem; }
.ficha__fechas li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(42,40,29,0.1); font-size: 0.92rem; }
.ficha__fechas li em { font-style: normal; font-size: 0.8rem; color: var(--faint); }
.ficha__fechas li.is-full { opacity: 0.5; }
.ficha__acciones { margin-top: 2.2rem; }
/* =========================================================
RESERVA PASO A PASO
========================================================= */
.resv { padding: 3rem clamp(1.4rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.4rem); margin-top: -3rem; }
.resv__head { padding-bottom: 1.6rem; border-bottom: 1px solid rgba(42,40,29,0.12); }
.resv__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.06; margin: 0.9rem 0 1.5rem; }
.resv__steps { list-style: none; display: flex; gap: clamp(0.8rem, 2vw, 1.8rem); flex-wrap: wrap; }
.resv__steps li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.resv__steps li span {
width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center;
border: 1px solid currentColor; border-radius: 50%; font-size: var(--micro-lg); letter-spacing: 0;
}
.resv__steps li.is-on { color: var(--ochre); font-weight: 600; }
.resv__steps li.is-done { color: rgba(42,40,29,0.55); }
.resv__steps li.is-done span { background: var(--ochre); border-color: var(--ochre); color: var(--paper); }
.resv__step { border: 0; padding: 1.8rem 0 0; display: none; }
.resv__step.is-on { display: block; }
.resv__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 560px) { .resv__two { grid-template-columns: 1fr; } }
.resv .field { margin-bottom: 1.4rem; }
.resv .field span { color: rgba(42,40,29,0.5); }
.resv .field input, .resv .field select, .resv .field textarea {
background: none; border: 0; border-bottom: 1px solid rgba(42,40,29,0.2);
padding: 0.6rem 0; font-family: var(--sans); font-size: 1rem; color: var(--ink); width: 100%;
}
.resv .field input:focus, .resv .field select:focus, .resv .field textarea:focus { outline: none; border-color: var(--ochre); }
.field__hint { display: block; margin-top: 0.5rem; font-size: 0.76rem; color: var(--faint); }
.resv__legend { margin: 1.8rem 0 1.2rem; font-size: var(--micro-lg); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre); padding-bottom: 0.7rem; border-bottom: 1px solid rgba(42,40,29,0.1); }
.resv__ruta { display: flex; gap: 1.2rem; align-items: center; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(42,40,29,0.1); margin-bottom: 1.6rem; }
.resv__ruta img { width: 88px; height: 88px; object-fit: cover; flex: none; }
.resv__ruta h4 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.1; }
.resv__ruta p { font-size: 0.82rem; color: rgba(42,40,29,0.6); margin-top: 0.25rem; }
.resv__tarifa { color: var(--ochre) !important; font-weight: 500; }
/* ---- elegir dia dentro del asistente ----
Reutiliza .cal__* y .day, que estan escritos con los tokens del tema.
El panel del modal pinta papel pero no declara tema, asi que los
tokens se fijan aqui, y solo aqui, para no tocar el resto del modal.
Las celdas dejan de ser cuadradas: siete columnas cuadradas en un
modal de 720 px hacen un calendario de media pantalla. */
.resv__cal {
--fg: var(--ink);
--dim: rgba(42, 40, 29, 0.78);
--faint: rgba(42, 40, 29, 0.66);
--line: rgba(42, 40, 29, 0.2);
margin-bottom: 1.8rem;
}
.resv__cal .cal__nav { margin-bottom: 1rem; }
.resv__cal .cal__label { font-size: 1.15rem; text-transform: capitalize; }
.resv__cal .cal__label:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; }
.resv__cal .day { aspect-ratio: auto; min-height: 46px; font-size: 0.9rem; }
.resv__cal .day[disabled] { cursor: default; }
.resv__vacio, .resv__elegido { margin-top: 1rem; font-size: 0.88rem; color: rgba(42, 40, 29, 0.66); }
.resv__elegido.is-on { color: var(--ink); }
.resv__elegido strong { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; }
.resv__jinetes { margin-top: 0.4rem; }
.stepper { display: flex; align-items: center; border: 1px solid rgba(42,40,29,0.2); width: fit-content; }
.stepper__btn { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; color: var(--ink); transition: background var(--t-ui) var(--ease-ui); }
@media (hover: hover) {
.stepper__btn:hover { background: rgba(42,40,29,0.06); }
}
.stepper input {
width: 3.4rem; text-align: center; border: 0 !important; border-left: 1px solid rgba(42,40,29,0.2) !important;
border-right: 1px solid rgba(42,40,29,0.2) !important; padding: 0.6rem 0 !important;
font-family: var(--serif) !important; font-size: 1.15rem !important; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { appearance: none; }
.resv__incluye { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
.resv__incluye li { padding: 0.3rem 0.7rem; border: 1px solid rgba(42,40,29,0.15); font-size: 0.78rem; color: rgba(42,40,29,0.7); }
.resv__inck { border: 0 !important; padding: 0.3rem 0 !important; font-size: var(--micro) !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint) !important; width: 100%; }
.check { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.5; cursor: pointer; }
.check input { margin-top: 0.22rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ochre); flex: none; }
.check em { color: var(--faint); font-style: italic; }
.resv__pago { margin-top: 1.8rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(42,40,29,0.14); background: rgba(42,40,29,0.03); }
.resv__pago-k { font-size: var(--micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); margin-bottom: 0.6rem; }
.resv__pago-v { font-size: 0.88rem; line-height: 1.6; color: rgba(42,40,29,0.72); }
.resv__foot { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(42,40,29,0.12); }
.resv__resumen { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.resumen__linea { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: rgba(42,40,29,0.7); }
.resumen__linea em { font-style: normal; }
.resumen__linea--sec { color: var(--ochre); }
.resumen__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.8rem; margin-top: 0.4rem; border-top: 1px solid rgba(42,40,29,0.14); }
.resumen__total span { font-size: var(--micro-lg); letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.resumen__total strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ochre); }
.resv__error { min-height: 1.2em; margin-bottom: 1rem; font-size: 0.88rem; line-height: 1.5; color: #9c3b26; }
.resv__error a { color: inherit; text-decoration: underline; }
.resv__acciones { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.resv__acciones .btn { flex: 1; min-width: 160px; }
.resv__ayuda { margin-top: 1.2rem; font-size: 0.8rem; color: var(--faint); text-align: center; }
.resv__ayuda a { color: var(--ochre); }
/* =========================================================
PÁGINA DE CONFIRMACIÓN
========================================================= */
.gracias { min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: clamp(6rem, 14svh, 10rem) var(--edge) clamp(3rem, 8svh, 6rem); }
.gracias .bleed__veil {
background:
linear-gradient(0deg, rgba(21,23,15,0.9), rgba(21,23,15,0.78) 55%, rgba(21,23,15,0.9) 100%),
radial-gradient(120% 90% at 50% 45%, rgba(21,23,15,0.35), rgba(21,23,15,0.85));
}
.gracias__inner { position: relative; z-index: 2; max-width: 62ch; margin: 0 auto; }
.gracias__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.04; margin: 1.2rem 0 1.4rem; }
.gracias__title em { color: var(--gold); font-weight: 400; }
.gracias__note { color: rgba(246,242,232,0.8); line-height: 1.7; max-width: 52ch; }
.gracias__datos { margin: 2.6rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.4rem 2rem; }
.gracias__datos dt { font-size: var(--micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.4rem; }
.gracias__datos dd { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.gracias__loc { color: var(--gold) !important; letter-spacing: 0.06em; }
.gracias__acciones { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.6rem; }
.gracias__pie { margin-top: 2.2rem; font-size: 0.84rem; color: var(--faint); }
.footer__base--solo { border-top: 1px solid var(--line); padding-top: 1.6rem; margin-top: 0; }
.footer__base--solo a { color: var(--dim); }
/* =========================================================
EL VÍDEO DE LA TRAVESÍA
Tres piezas para una sola película de 2:36. El fichero pesa
demasiado para arrancar solo al entrar en pantalla —eso era
razonable con el bucle mudo de treinta segundos que había
antes, no con esto—, así que en los dos sitios hay que
pulsar y en los dos suena.
.reel__play el botón sobre el póster de la sección
.filmcard la tarjeta de la esquina del hero
.cine la ventana a la que abre la tarjeta
Canto vivo en todo salvo los dos círculos de reproducir,
que es la excepción escrita del sistema.
========================================================= */
/* --- el botón sobre el póster ------------------------------ */
.reel__play {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.9rem; padding: 1.2rem;
background: linear-gradient(180deg, rgba(21,23,15,0.18), rgba(21,23,15,0.42));
color: var(--bone); cursor: pointer;
transition: background var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.reel__play:hover { background: linear-gradient(180deg, rgba(21,23,15,0.10), rgba(21,23,15,0.34)); }
}
.reel__play-i {
width: 4.4rem; height: 4.4rem; border-radius: 50%;
display: grid; place-items: center; background: var(--gold);
transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
.reel__play:hover .reel__play-i { transform: scale(1.06); }
}
.reel__play-i svg { width: 1.15rem; height: 1.35rem; fill: var(--night); margin-left: 3px; }
.reel__play-t { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1; }
.reel__play-d {
font-size: var(--micro-lg); letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(246, 242, 232, 0.72);
}
/* Con el vídeo ya lanzado sobran el botón y su velo. */
.reel__marco.es-viendo .reel__play { display: none; }
/* --- la tarjeta del hero ----------------------------------- */
.filmcard {
position: absolute; z-index: 2;
right: var(--edge); bottom: clamp(3rem, 8svh, 7rem);
display: flex; align-items: center; gap: 0.9rem;
padding: 0.7rem 1.1rem 0.7rem 0.7rem;
background: rgba(21, 23, 15, 0.52);
border: 1px solid rgba(246, 242, 232, 0.2);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
color: var(--bone); text-align: left; cursor: pointer;
transition: background var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.filmcard:hover { background: rgba(21, 23, 15, 0.72); border-color: rgba(246, 242, 232, 0.38); }
}
.filmcard__m { width: 104px; height: 66px; object-fit: cover; display: block; }
.filmcard__txt { display: block; }
.filmcard__t { display: block; font-size: 0.95rem; line-height: 1.25; }
.filmcard__s {
display: block; margin-top: 0.25rem;
font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(246, 242, 232, 0.62);
}
.filmcard__p {
flex: none; margin-left: 0.5rem;
width: 2.4rem; height: 2.4rem; border-radius: 50%;
display: grid; place-items: center; background: var(--gold);
transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
.filmcard:hover .filmcard__p { transform: scale(1.08); }
}
.filmcard__p svg { width: 0.7rem; height: 0.82rem; fill: var(--night); margin-left: 2px; }
/* En móvil no hay esquina libre: la tarjeta baja al flujo, debajo
de los botones, y se estira a todo el ancho de la columna. */
@media (max-width: 820px) {
.filmcard {
position: static; width: 100%; margin-top: 1.6rem;
max-width: var(--maxw); margin-inline: auto;
}
/* A 390 px la duración partía en dos líneas y dejaba «con / sonido».
Miniatura algo menor y menos prosa entre letras, y cabe de una. */
.filmcard__m { width: 88px; height: 56px; }
.filmcard__txt { flex: 1; }
.filmcard__s { letter-spacing: 0.1em; white-space: nowrap; }
}
/* --- la ventana -------------------------------------------- */
/* 900, como la ficha de ruta: por encima de la cabecera fija, que
va a 800. A 90 la navegacion se pintaba sobre el video. */
.cine {
position: fixed; inset: 0; z-index: 900;
display: grid; place-items: center; padding: var(--edge);
}
.cine[hidden] { display: none; }
.cine__fondo { position: absolute; inset: 0; background: rgba(10, 11, 7, 0.965); }
/* La tercera medida es la que manda en pantallas bajas: limita el
ancho para que el 16:9 quepa de alto y le deje sitio a la equis. */
.cine__caja { position: relative; width: min(100%, 1400px, (100svh - 10rem) * 16 / 9); }
.cine__video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.cine__x {
position: absolute; top: -2.9rem; right: 0;
width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
font-size: 1.5rem; line-height: 1; color: var(--bone);
border: 1px solid rgba(246, 242, 232, 0.28);
transition: background var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.cine__x:hover { background: rgba(246, 242, 232, 0.12); }
}
/* Con la ventana abierta la página de detrás no se mueve. */
body.cine-abierto { overflow: hidden; }
/* =========================================================
PATROCINADORES
Banda estrecha al pie de la home, justo antes del pie de
página. Los seis logotipos vienen cada uno con su color —
dos verdes, un dorado, un granate — y juntos a todo color
rompen la calma del papel, así que van con la saturación
bajada y la recuperan entera al pasar por encima o al
llegar con el tabulador.
Las alturas no son todas iguales: un logotipo casi cuadrado
necesita más altura que una palabra alargada para pesar lo
mismo en la fila. Las fija `tools/build_partners.py`, que
exporta cada imagen a 3x de su altura en pantalla, y viajan
en los atributos `width`/`height` de cada ![]()
.
========================================================= */
.patros {
padding: clamp(2.4rem, 5vw, 3.6rem) var(--edge) clamp(2.6rem, 5vw, 4rem);
border-top: 1px solid var(--line);
text-align: center;
}
.patros__k { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.patros__fila {
list-style: none;
max-width: var(--maxw);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(1.6rem, 4vw, 3.4rem);
}
.patros__enlace { display: block; }
.patros__logo {
height: auto;
max-width: 100%;
filter: grayscale(0.6);
opacity: 0.82;
transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
@media (hover: hover) {
.patros__enlace:hover .patros__logo,
.patros__enlace:focus-visible .patros__logo { filter: none; opacity: 1; }
}
/* =========================================================
PANEL DE ADMINISTRACIÓN
========================================================= */
.page-admin { background: var(--night); color: var(--bone); }
.acceso { min-height: 100svh; display: grid; place-items: center; padding: 2rem; }
.acceso__box { width: min(400px, 100%); text-align: center; }
.acceso__crest { width: auto; height: 5rem; margin: 0 auto 1.8rem; }
.acceso__title { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; letter-spacing: -0.012em; }
.acceso__note { margin: 0.7rem 0 2.4rem; font-size: 0.88rem; color: rgba(246,242,232,0.5); }
.acceso .field { text-align: left; margin-bottom: 1.6rem; }
.acceso .field span { font-size: var(--micro-lg); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,242,232,0.42); display: block; margin-bottom: 0.5rem; }
.acceso .field input {
width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(246,242,232,0.22);
padding: 0.7rem 0; font-family: var(--sans); font-size: 1.05rem; color: var(--bone);
}
.acceso .field input:focus { outline: none; border-color: var(--gold); }
.acceso .btn { width: 100%; }
.acceso__error { min-height: 1.3em; margin-top: 1.1rem; font-size: 0.86rem; color: #e0956f; }
.admin { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.2rem, 4vw, 3.5rem) 5rem; max-width: 1500px; margin: 0 auto; }
.admin__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.admin__brand { display: flex; align-items: center; gap: 1rem; }
.admin__brand img { width: auto; height: 3rem; }
.admin__k { font-size: var(--micro); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,242,232,0.42); }
.admin__title { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.012em; }
.admin__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.admin__aviso {
margin-top: 1.6rem; padding: 1rem 1.3rem; font-size: 0.88rem; line-height: 1.6;
border: 1px solid rgba(224,149,111,0.4); background: rgba(224,149,111,0.08); color: #e8bfa4;
}
.admin__aviso code { background: rgba(0,0,0,0.3); padding: 0.1em 0.4em; font-size: 0.9em; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin: 2rem 0; background: var(--line); border: 1px solid var(--line); }
.kpi { background: var(--night); padding: 1.4rem 1.5rem; }
.kpi__v { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; color: var(--gold); }
.kpi__k { display: block; margin-top: 0.6rem; font-size: var(--micro-lg); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246,242,232,0.45); }
.admin__tabs { display: flex; gap: 0.5rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.tab { padding: 0.85rem 1.3rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246,242,232,0.5); border-bottom: 2px solid transparent; cursor: pointer; }
@media (hover: hover) {
.tab:hover { color: var(--bone); }
}
.tab.is-on { color: var(--gold); border-bottom-color: var(--gold); }
.admin__panel { display: none; }
.admin__panel.is-on { display: block; }
.admin__filtros { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.admin__filtros input, .admin__filtros select {
background: rgba(246,242,232,0.05); border: 1px solid var(--line); color: var(--bone);
padding: 0.7rem 0.9rem; font-family: var(--sans); font-size: 0.9rem;
}
.admin__filtros input { flex: 1; min-width: 240px; }
.admin__filtros input:focus, .admin__filtros select:focus { outline: none; border-color: var(--gold); }
.admin__filtros option { background: var(--night-2); }
.tabla__wrap { overflow-x: auto; border: 1px solid var(--line); }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 900px; }
.tabla th {
text-align: left; padding: 0.9rem 1rem; font-size: var(--micro); letter-spacing: 0.13em;
text-transform: uppercase; color: rgba(246,242,232,0.45); font-weight: 500;
border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tabla td { padding: 0.95rem 1rem; border-bottom: 1px solid rgba(246,242,232,0.07); vertical-align: middle; }
@media (hover: hover) {
.tabla tr:hover td { background: rgba(246,242,232,0.03); }
}
.tabla td small { color: rgba(246,242,232,0.45); font-size: 0.78rem; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--gold); }
.tabla__ver { font-size: var(--micro-lg); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); cursor: pointer; white-space: nowrap; }
@media (hover: hover) {
.tabla__ver:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.tabla__vacia { padding: 2.5rem 1rem; color: rgba(246,242,232,0.5); font-size: 0.92rem; }
.pill { display: inline-block; padding: 0.25rem 0.65rem; font-size: var(--micro); letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; }
.pill--confirmada { color: #86b98c; }
.pill--pendiente { color: var(--gold); }
.pill--caducada { color: rgba(246,242,232,0.52); } /* 3.57:1 -> 5.14:1 */
.pill--cancelada { color: #d08e78; }
.pill--solicitada { color: var(--gold); border-style: dashed; } /* aun no es una reserva */
.pill--rechazada { color: #d08e78; }
.barra { height: 4px; background: rgba(246,242,232,0.12); max-width: 160px; margin-bottom: 0.4rem; }
.barra i { display: block; height: 100%; background: var(--gold); }
/* ficha de reserva (sobre panel claro) */
.fichaR { padding-top: 3rem; }
.fichaR__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: 0.02em; margin: 0.8rem 0 0.4rem; }
.fichaR__sub { font-size: 0.94rem; color: rgba(42,40,29,0.65); margin-bottom: 1rem; }
.fichaR__h { margin: 2rem 0 0.9rem; font-size: var(--micro-lg); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ochre); padding-bottom: 0.6rem; border-bottom: 1px solid rgba(42,40,29,0.12); }
.fichaR__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 1.6rem; }
.fichaR__dl dt { font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(42,40,29,0.45); margin-bottom: 0.3rem; }
.fichaR__dl dd { font-size: 0.98rem; }
.fichaR__dl dd a { color: var(--ochre); text-decoration: underline; text-underline-offset: 2px; }
.fichaR .mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.82rem; }
.fichaR__p { font-size: 0.94rem; line-height: 1.65; color: rgba(42,40,29,0.78); margin-bottom: 0.6rem; }
.fichaR__auth { list-style: none; display: grid; gap: 0.4rem; font-size: 0.92rem; color: rgba(42,40,29,0.75); }
.fichaR__acciones { margin-top: 2.2rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.fichaR .pill--confirmada { color: #3f7a49; }
.fichaR .pill--pendiente { color: #93671e; } /* 4.18:1 -> 4.51:1 */
.fichaR .pill--caducada { color: rgba(42,40,29,0.66); } /* 2.61:1 -> 4.90:1 */
.fichaR .pill--cancelada { color: #9c3b26; }
/* =========================================================
AJUSTES RESPONSIVE FINALES
========================================================= */
@media (max-width: 820px) {
.donde { min-height: auto; padding-top: 6rem; padding-bottom: 6rem; }
.cal__grid { gap: 3rem; }
.modal { padding: 0; align-items: flex-end; }
.modal__panel { max-height: 94svh; width: 100%; }
}
@media (max-width: 560px) {
.filtros { align-items: stretch; }
.filtros__select { width: 100%; }
.filtros__select select { flex: 1; min-width: 0; }
.cal__legend { gap: 0.9rem; }
.day { font-size: 0.82rem; }
.resv__acciones .btn { min-width: 100%; }
.hero__actions { gap: 1.1rem; }
.hero__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.modal__panel, .modal__backdrop { transition: none; }
.card__media img, .ruta__media img { transition: none; }
}
/* =========================================================
NUESTROS CABALLOS — retratos de los ejemplares
========================================================= */
.caballos { padding: clamp(5rem, 11vw, 9rem) var(--edge); }
.caballos__head { max-width: var(--maxw); margin: 0 auto; }
.caballos__title {
font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em;
font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.04; margin: 1.2rem 0 1.4rem;
}
.caballos__title em { color: var(--gold); font-weight: 400; }
.caballos__note { max-width: 58ch; color: var(--dim); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.7; }
.caballos__grid {
max-width: var(--maxw); margin: clamp(2.6rem, 5vw, 4rem) auto 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.7rem, 1.5vw, 1.3rem);
}
.caballo { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: rgba(246,242,232,0.05); }
.caballo img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(0.92) saturate(0.95);
transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
@media (hover: hover) {
.caballo:hover img { transform: scale(1.05); filter: brightness(1) saturate(1); }
}
.caballos__pie { max-width: var(--maxw); margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; font-size: 0.84rem; color: var(--faint); font-style: italic; font-family: var(--serif); }
@media (max-width: 1000px) { .caballos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .caballos__grid { grid-template-columns: repeat(2, 1fr); } }
/* =========================================================
LA FINCA — mosaico en columnas
========================================================= */
.finca { padding: clamp(5rem, 11vw, 9rem) var(--edge); }
.finca__head { max-width: var(--maxw); margin: 0 auto; }
.finca__title {
font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em;
font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.04; margin: 1.2rem 0 1.4rem;
}
.finca__title em { color: var(--ochre); font-weight: 400; }
.finca__note { max-width: 56ch; color: var(--dim); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.7; }
.mosaico {
max-width: var(--maxw); margin: clamp(2.6rem, 5vw, 4rem) auto 0;
columns: 3; column-gap: clamp(0.7rem, 1.5vw, 1.3rem);
}
.mosaico figure {
break-inside: avoid; margin: 0 0 clamp(0.7rem, 1.5vw, 1.3rem);
overflow: hidden; background: rgba(42,40,29,0.06);
}
.mosaico img {
display: block; width: 100%; height: auto;
transition: transform 1.2s var(--ease);
}
@media (hover: hover) {
.mosaico figure:hover img { transform: scale(1.035); }
}
@media (max-width: 980px) { .mosaico { columns: 2; } }
@media (max-width: 600px) { .mosaico { columns: 1; } }
/* =========================================================
BANDA FOTOGRÁFICA (experiencias)
========================================================= */
.banda {
position: relative; min-height: 44svh; display: flex; align-items: center;
overflow: hidden; padding: clamp(4rem, 8vw, 6.5rem) var(--edge);
}
.banda__inner { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; }
.banda__text {
font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em;
font-size: clamp(1.4rem, 3.2vw, 2.6rem); line-height: 1.18; max-width: 22ch;
text-shadow: 0 1px 16px rgba(21, 23, 15, 0.6);
}
.banda__text em { color: var(--gold); }
.banda .bleed__veil {
background:
linear-gradient(90deg, rgba(21,23,15,0.92), rgba(21,23,15,0.5) 52%, rgba(21,23,15,0.12) 82%),
linear-gradient(0deg, rgba(21,23,15,0.5), transparent 50%);
}
@media (max-width: 820px) {
.banda .bleed__veil { background: linear-gradient(0deg, rgba(21,23,15,0.9), rgba(21,23,15,0.55) 55%, rgba(21,23,15,0.4) 100%); }
}
/* =========================================================
RITMO Y JERARQUÍA
El sistema original daba a cada sección el mismo peso: ocho
tamaños de titular casi idénticos y siete bloques a pantalla
completa. Aquí se fija una escala de tres niveles y un ritmo
vertical único, para que solo destaque lo que debe destacar.
========================================================= */
:root {
--t-hero: clamp(2.7rem, 6.4vw, 5.2rem); /* solo el h1 del hero */
--t-1: clamp(1.9rem, 3.8vw, 3.2rem); /* secciones ancla */
--t-2: clamp(1.45rem, 2.3vw, 2rem); /* secciones de apoyo */
--pad-y: clamp(3.25rem, 6.5vw, 6rem);
}
/* --- nivel hero --- */
.hero__title { font-size: var(--t-hero); }
.hero__title--short { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.hero__sub { max-width: 42ch; }
/* --- nivel 1: las tres secciones ancla --- */
.filo__title,
.exp-intro__title,
.reservar__title { font-size: var(--t-1); }
/* --- nivel 2: secciones de apoyo --- */
.distingue__title,
.caballos__title,
.parque__title,
.destinos__title,
.finca__title,
.cal__title,
.catalogo__title,
.faq__title { font-size: var(--t-2); line-height: 1.08; }
/* --- piezas de voz propia, también más contenidas --- */
.interlude__text { font-size: clamp(1.4rem, 3vw, 2.5rem); }
.testi__quote { font-size: clamp(1.35rem, 2.9vw, 2.4rem); max-width: 24ch; }
.banda__text { font-size: clamp(1.25rem, 2.4vw, 1.9rem); }
.footer__mark { font-size: clamp(1.9rem, 5.5vw, 4.2rem); }
.figure__num { font-size: clamp(2.6rem, 6vw, 5rem); }
/* --- ritmo vertical unificado --- */
.filo, .exp-intro, .distingue, .caballos, .parque, .finca, .faq, .cal, .catalogo, .reservar {
padding-top: var(--pad-y);
padding-bottom: var(--pad-y);
}
.distingue { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.destinos { padding: var(--pad-y) 0 clamp(2rem, 4vw, 3rem); }
.pilares { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.75rem, 3vw, 2.75rem); }
.hero { min-height: 92svh; }
.interlude { min-height: 54svh; padding: clamp(3.5rem, 7vw, 5.5rem) var(--edge); }
.testi { min-height: 62svh; padding: clamp(3.5rem, 7vw, 6rem) var(--edge); }
.slide { height: 58svh; width: min(58vw, 520px); }
.banda { min-height: 34svh; }
/* =========================================================
FAMILIAS DE RUTA (home)
Sustituyen a los cuatro capítulos a pantalla completa, que
repetían la misma composición y duplicaban /experiencias.
========================================================= */
.familias {
max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem);
}
.fam { display: flex; flex-direction: column; color: inherit; }
.fam__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(42,40,29,0.08); margin-bottom: 1.1rem; }
.fam__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) {
.fam:hover .fam__media img { transform: scale(1.05); }
}
.fam__meta { font-size: var(--micro-lg); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre); }
.fam__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.26; margin: 0.45rem 0 0.55rem; }
.fam__desc { font-size: 0.89rem; line-height: 1.6; color: var(--dim); margin-bottom: 0.9rem; }
.fam__link {
margin-top: auto; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 500; color: var(--ochre); display: inline-flex; align-items: center; gap: 0.5rem;
}
@media (hover: hover) {
.fam:hover .fam__link .arrow { transform: translateX(4px); }
}
.fam__link .arrow { transition: transform 0.45s var(--ease); }
.exp-intro__cta { max-width: var(--maxw); margin: clamp(2.2rem, 4vw, 3rem) auto 0; }
@media (max-width: 1000px) { .familias { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; } }
@media (max-width: 520px) { .familias { grid-template-columns: 1fr; } }
/* =========================================================
MÓVIL — densidad y objetivos táctiles
La auditoría encontró 23 objetivos por debajo de 44 px en la
home y 46 en experiencias. Aquí se corrigen con `pointer:
coarse`, sin engordar el diseño en escritorio.
========================================================= */
@media (pointer: coarse), (max-width: 820px) {
/* El area tactil sube a 44x44, pero el icono no: las barras heredaban
top:0 / bottom:0 de la regla base y quedaban separadas los 44 px
enteros de la caja. Se recentran dejando 10 px entre ellas. */
.burger { width: 44px; height: 44px; display: block; }
.burger span { width: 26px; left: 9px; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { bottom: 16px; }
.site-head.menu-open .burger span:nth-child(1) { top: 21px; }
.site-head.menu-open .burger span:nth-child(2) { bottom: 21px; }
.link-underline,
.hero__enter,
.salida__ficha,
.ruta__ficha,
.cal__clear,
.contactlist__v,
.footer__col a,
.menu__link { min-height: 44px; display: inline-flex; align-items: center; }
.btn--sm { min-height: 44px; }
.chip { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.cal__arrow { width: 44px; height: 44px; }
.submit { min-height: 44px; }
.tabla__ver { min-height: 44px; display: inline-flex; align-items: center; }
.qa summary { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.filtros__select select { min-height: 44px; }
.stepper__btn { width: 3rem; height: 3rem; }
.field input, .field select, .field textarea { min-height: 44px; }
.resv .field input, .resv .field select { min-height: 44px; }
}
@media (max-width: 820px) {
/* las rejillas de 4 columnas se apilaban a 1 sin reducir nada mas */
.cards { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
.card__title { font-size: 1.02rem; margin: 0.8rem 0 0.45rem; }
.card__desc { font-size: 0.85rem; }
.pilares { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
.pilar__title { font-size: 1.05rem; }
.pilar__desc { font-size: 0.86rem; }
.mosaico { columns: 2; }
.caballos__grid { grid-template-columns: repeat(3, 1fr); }
.slide { width: 74vw; height: 52svh; }
.figures { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
.figure { margin: 0 !important; grid-column: auto !important; }
.figure__label { font-size: 0.76rem; }
.hero { min-height: 88svh; }
.interlude { min-height: 46svh; }
.testi { min-height: 52svh; }
}
@media (max-width: 560px) {
.cards { grid-template-columns: 1fr; }
.card__media { aspect-ratio: 16 / 10; }
.pilares { grid-template-columns: 1fr; gap: 1.5rem; }
.caballos__grid { grid-template-columns: repeat(2, 1fr); }
.mosaico { columns: 2; column-gap: 0.6rem; }
.mosaico figure { margin-bottom: 0.6rem; }
}
/* --- tarjeta de ruta compactada (el detalle vive en la ficha) --- */
.ruta__body { padding: clamp(1.1rem, 1.8vw, 1.5rem); }
.ruta__meta { margin-top: 0; }
.ruta__nombre { margin-top: 0.5rem; font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.ruta__desc { margin-top: 0.7rem; font-size: 0.88rem; }
.ruta__salidas { margin-top: 0.9rem; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--gold); }
.ruta__pie {
margin-top: auto; padding-top: 1.2rem;
display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.ruta__precio { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ruta__precio em { font-size: 0.34em; }
.ruta__acciones { margin: 0; padding: 0; gap: 0.9rem; }
.ruta__media { aspect-ratio: 16 / 10; }
/* --- móvil: bloques que seguían pesando demasiado --- */
@media (max-width: 820px) {
/* el retrato de Filosofía llegaba a 78svh y dominaba la sección */
.filo__media .media { aspect-ratio: 4 / 5; max-height: 52svh; }
.filo__cap { font-size: 0.78rem; }
.reservar .field { margin-bottom: 1.3rem; }
.contactlist { gap: 1.1rem; margin-top: 2rem; }
.contactlist__v { font-size: 1.15rem; }
}
@media (max-width: 620px) {
/* cuatro tarjetas apiladas eran 2,2 pantallas: se pasan a dos columnas
y se deja solo lo que identifica cada familia de ruta */
.familias { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0.8rem; }
.fam__media { aspect-ratio: 4 / 3; margin-bottom: 0.75rem; }
.fam__desc { display: none; }
.fam__title { font-size: 1.02rem; margin: 0.35rem 0 0.5rem; }
.fam__meta { font-size: var(--micro); letter-spacing: 0.12em; }
.fam__link { font-size: var(--micro); }
}
@media (max-width: 560px) {
/* los pilares ya son cortos: caben en dos columnas */
.pilares { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
/* el pie crecio al subir los objetivos tactiles a 44px */
.footer { padding-top: clamp(2.5rem, 6vw, 4rem); }
.footer__cols { margin-top: 2rem; gap: 1.4rem; padding-bottom: 2rem; }
.footer__col a { font-size: 0.92rem; min-width: 44px; }
.footer__k { margin-bottom: 0; }
}
/* --- dos secciones de papel seguidas leian como un hueco muerto --- */
.section--paper + .section--paper { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* --- seis retratos en una sola fila: mas compacto y mas intencionado --- */
.caballos__grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .caballos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .caballos__grid { grid-template-columns: repeat(2, 1fr); } }
/* =========================================================
MÁS LIMPIO, MÁS NATURAL, MÁS FLUIDO
Tres causas de la sensación de peso: el estroboscopio de
fondos claro/oscuro, la textura de mayúsculas espaciadas en
casi cada elemento, y el aire escaso alrededor del texto.
========================================================= */
/* --- el cuerpo claro de la página necesita acentos en ocre, no en oro --- */
.caballos__title em,
.destinos__title em { color: var(--ochre); }
.caballos__pie { color: var(--faint); }
/* El carrusel y la galería de retratos viven ahora sobre papel:
se les baja el filtro para que no parezcan recortes oscuros. */
.slide__media img { filter: brightness(0.94) saturate(0.98); }
.slide::after { background: linear-gradient(0deg, rgba(21,23,15,0.72), transparent 52%); }
.caballo img { filter: none; }
.caballo { background: rgba(42, 40, 29, 0.06); }
/* --- menos mayúsculas: solo las etiquetas de sección y los botones --- */
.link-underline,
.fam__link,
.ruta__ficha,
.salida__ficha,
.cal__clear,
.destinos__hint,
.hero__enter {
text-transform: none;
letter-spacing: 0.01em;
font-size: 0.92rem;
font-weight: 400;
}
.fam__link { font-size: 0.88rem; }
.destinos__hint { font-style: italic; font-family: var(--serif); }
.chapter__meta, .fam__meta, .ruta__meta, .salida__fecha {
letter-spacing: 0.1em;
}
.btn { letter-spacing: 0.1em; font-size: 0.74rem; }
.btn--sm { letter-spacing: 0.09em; }
/* --- más aire alrededor del texto --- */
.filo__note, .parque__note, .caballos__note, .finca__note,
.distingue__note, .cal__note, .reservar__note, .exp-intro__note {
line-height: 1.75;
}
.lede { line-height: 1.62; }
.fam__desc, .card__desc, .pilar__desc, .ruta__desc { line-height: 1.68; }
.hero__sub { line-height: 1.7; }
/* --- transiciones más cortas: el hover deja de sentirse perezoso --- */
.card__media img, .fam__media img, .ruta__media img,
.mosaico img, .caballo img, .slide__media img {
transition: transform 0.6s var(--ease2);
}
@media (hover: hover) {
.card:hover .card__media img,
.fam:hover .fam__media img,
.ruta:hover .ruta__media img,
.mosaico figure:hover img,
.caballo:hover img { transform: scale(1.03); }
.slide:hover .slide__media img { transform: scale(1.03); filter: brightness(1) saturate(1); }
}
/* --- bordes menos marcados: la tarjeta de ruta pesaba como una caja --- */
.ruta { border-color: color-mix(in srgb, var(--line) 70%, transparent); background: none; }
.mosaico figure, .caballo, .card__media, .fam__media { background: rgba(42, 40, 29, 0.05); }
/* --- al abrir las fotos, dos rótulos perdieron contraste --- */
.interlude__quote { max-width: 32ch; }
.interlude .bleed__veil--soft {
background:
linear-gradient(0deg, rgba(21,23,15,0.55), rgba(21,23,15,0.3) 50%, rgba(21,23,15,0.55)),
radial-gradient(105% 85% at 50% 50%, rgba(21,23,15,0.62), rgba(21,23,15,0.86));
}
/* Los rótulos del carrusel salen de la foto y se apoyan en el papel:
se lee mejor y evita apilar oscurecimientos sobre la imagen. */
.slide { height: auto; }
.slide__media { position: relative; height: 46svh; overflow: hidden; }
.slide::after { content: none; }
.slide__cap { position: static; padding: 1rem 0 0; gap: 0.15rem; }
.slide__name { color: var(--fg); font-size: clamp(1.3rem, 2vw, 1.7rem); }
.slide__desc { color: var(--dim); font-size: 0.86rem; }
.reservar__note + .reservar__note { margin-top: 1rem; }
/* --- velos recalibrados para las fotos nuevas --- */
/* El hero es ahora un sendero soleado, mas luminoso y con mas detalle:
necesita mas sombra bajo el titular, no un oscurecimiento general. */
.hero .bleed__veil--hero {
background:
linear-gradient(180deg, rgba(21,23,15,0.5) 0%, rgba(21,23,15,0.08) 24%, rgba(21,23,15,0.42) 58%, rgba(21,23,15,0.93) 100%),
radial-gradient(80% 68% at 18% 84%, rgba(21,23,15,0.86), transparent 70%);
}
/* La histórica en b/n ya tiene su propio contraste: el velo se afloja
para que se vea la foto y no un rectángulo oscuro. */
.interlude .bleed__veil--soft {
background:
linear-gradient(0deg, rgba(21,23,15,0.42), rgba(21,23,15,0.18) 50%, rgba(21,23,15,0.42)),
radial-gradient(110% 90% at 50% 50%, rgba(21,23,15,0.28), rgba(21,23,15,0.7));
}
.interlude__text { text-shadow: 0 2px 22px rgba(21,23,15,0.9); }
.hero__eyebrow { text-shadow: 0 1px 20px rgba(21,23,15,0.98), 0 0 6px rgba(21,23,15,0.7); }
/* =========================================================
PERFIL DEL JINETE
Digitalización del formulario que el cliente enviaba en PDF.
Se usa en el paso 2 de la reserva y en su propia página.
========================================================= */
.resv__nota { margin: -0.4rem 0 1rem; font-size: 0.84rem; color: var(--faint); line-height: 1.55; }
.equipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.8vw, 1.4rem); margin-bottom: 0.6rem; }
.equipo { border: 1px solid rgba(42,40,29,0.14); padding: 1rem 1.1rem 0.9rem; }
.equipo__k { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.7rem; }
.check--sm { font-size: 0.85rem; margin-bottom: 0.8rem; }
.check--sm input { width: 0.95rem; height: 0.95rem; }
.field--talla { margin-bottom: 0 !important; }
.field--talla span { font-size: var(--micro); }
@media (max-width: 700px) { .equipos { grid-template-columns: 1fr; } }
/* --- página independiente --- */
.page-perfil { background: var(--paper); }
.perfil { padding: clamp(5.5rem, 11vw, 8rem) var(--edge) var(--pad-y); min-height: 70svh; }
.perfil__inner { max-width: 760px; margin: 0 auto; }
.perfil__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: var(--t-1); line-height: 1.04; margin: 1rem 0 1rem; }
.perfil__note { color: var(--dim); line-height: 1.75; max-width: 58ch; }
/* La barra de color a la izquierda es el tic mas reconocible de una
interfaz generada, y aqui no significaba nada: no hay estados que
distinguir, es un solo aviso. Se queda el panel —el tinte si dice algo,
que esta franja es la reserva de quien mira— con filete completo en el
mismo ocre. Una caja, no una pestana. */
.perfil__reserva {
display: flex; flex-direction: column; gap: 0.3rem;
margin: 2rem 0 0; padding: 1.2rem 1.4rem;
background: rgba(var(--ochre-tint), 0.07);
border: 1px solid rgba(var(--ochre-tint), 0.28);
}
.perfil__loc { font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0.06em; color: var(--ochre); }
.perfil__ruta { font-size: 0.92rem; }
.perfil__faltan { font-size: 0.8rem; color: var(--faint); }
.perfil__aviso {
margin: 2rem 0 0; padding: 1.1rem 1.3rem; line-height: 1.6;
border: 1px solid color-mix(in srgb, var(--ochre) 40%, transparent);
background: color-mix(in srgb, var(--ochre) 8%, transparent);
}
.perfil__form { margin-top: 2.2rem; }
.perfil__form .field { margin-bottom: 1.4rem; }
.perfil__form .field span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.perfil__form .field span em { text-transform: none; letter-spacing: 0; font-size: 1.05em; }
.perfil__form input, .perfil__form select, .perfil__form textarea {
width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(42,40,29,0.22);
padding: 0.6rem 0; font-family: var(--sans); font-size: 1rem; color: var(--ink);
}
.perfil__form input:focus, .perfil__form select:focus, .perfil__form textarea:focus { outline: none; border-color: var(--ochre); }
.perfil__form .btn { width: 100%; max-width: 320px; }
.perfil__pie { margin-top: 1.2rem; font-size: 0.82rem; color: var(--faint); }
.menu__link.is-on { color: var(--gold); }
.fichaR__acomp { padding: 0.9rem 0; border-bottom: 1px solid rgba(42,40,29,0.1); }
.fichaR__acompN { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 0.3rem; }
.fichaR__acomp .fichaR__p { font-size: 0.88rem; margin-bottom: 0.25rem; }
/* =========================================================
MAPA DE RUTAS
========================================================= */
.mapa { padding: var(--pad-y) var(--edge); }
.mapa__head { max-width: var(--maxw); margin: 0 auto; }
.mapa__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: var(--t-2); line-height: 1.08; margin: 1.2rem 0 1rem; }
.mapa__title em { color: var(--ochre); font-weight: 400; }
.mapa__intro { max-width: 56ch; color: var(--dim); line-height: 1.75; }
.mapa__caja { max-width: var(--maxw); margin: clamp(2rem, 4vw, 3rem) auto 0; }
.mapa__filtros { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; }
.mapa__lienzo { position: relative; border: 1px solid var(--line); background: color-mix(in srgb, var(--ochre) 4%, transparent); }
/* (retirada) `.mapa__lienzo svg { width:100% }` era del mapa SVG propio.
Con Leaflet deformaba tanto la capa de trazados como el icono del
atributo, que salia a 256x171 px en vez de 12px. */
.mapa__pie { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.2rem; }
.mapa__detalle { font-size: 0.92rem; line-height: 1.6; max-width: 62ch; }
.mapa__detalle span { color: var(--dim); font-size: 0.86rem; }
.mapa__aviso { font-size: 0.76rem; color: var(--faint); font-style: italic; margin-left: auto; }
@media (max-width: 820px) {
.mapa__aviso { margin-left: 0; }
/* los filtros ocupaban siete filas: pasan a una tira deslizable */
.mapa__filtros {
flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
margin-inline: calc(var(--edge) * -1); padding-inline: var(--edge);
padding-bottom: 0.5rem; scrollbar-width: none;
}
.mapa__filtros::-webkit-scrollbar { display: none; }
.mapa__filtros .chip { flex: 0 0 auto; scroll-snap-align: start; }
}
/* =========================================================
PÁGINAS LEGALES
========================================================= */
.page-legal { background: var(--paper); }
.legal { padding: clamp(5.5rem, 11vw, 8rem) var(--edge) var(--pad-y); }
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; font-size: var(--t-1); line-height: 1.04; margin: 1rem 0 2rem; }
.legal__h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.25; margin: 2.4rem 0 0.8rem; color: var(--ochre); }
.legal__p { line-height: 1.8; margin-bottom: 0.9rem; color: var(--dim); }
.legal__p a { color: var(--ochre); text-decoration: underline; text-underline-offset: 3px; }
.legal__ul { margin: 0 0 1rem 1.1rem; }
.legal__ul li { line-height: 1.75; margin-bottom: 0.35rem; color: var(--dim); }
.legal__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem 1.8rem; margin: 0.4rem 0 1rem; }
.legal__dl dt { font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.25rem; }
.legal__dl dd { font-size: 0.95rem; }
.legal__act { margin-top: 2.6rem; font-size: 0.82rem; color: var(--faint); font-style: italic; }
.legal__otras {
margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem;
}
.legal__otras span { font-size: var(--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.legal__otras a { color: var(--ochre); font-size: 0.92rem; }
@media (hover: hover) {
.legal__otras a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.legal__volver { margin-top: 2rem; }
.menu__lang { font-size: 0.78rem; letter-spacing: 0.1em; }
@media (max-width: 820px) {
.menu--min { gap: 0.9rem; flex-wrap: wrap; }
.legal__dl { grid-template-columns: 1fr; gap: 0.8rem; }
}
/* --- selector de idioma --- */
.menu__langs { display: inline-flex; align-items: center; gap: 0.15rem; margin-right: 0.6rem; }
/* Los idiomas van sobre la fotografia, no sobre el fondo plano: el velo
del header la oscurece pero no la iguala, asi que el contraste real
depende de la foto. Con --dim (7.58:1 sobre negro) queda margen aunque
detras haya una zona clara; --faint se quedaba justo. */
.menu__langs .menu__lang {
font-size: 0.72rem; letter-spacing: 0.1em; padding: 0.35rem 0.45rem;
color: var(--dim); transition: color var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.menu__langs .menu__lang:hover { color: var(--fg); }
}
.menu__langs .menu__lang.is-on { color: var(--accent); }
.footer__cols { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__cols { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
.menu__langs { margin: 1rem 0 0; gap: 0.5rem; }
.menu__langs .menu__lang { font-size: 1rem; padding: 0.6rem 0.8rem; }
}
/* --- objetivos táctiles en las páginas legales y de perfil --- */
@media (pointer: coarse), (max-width: 820px) {
.menu__lang { min-width: 44px; justify-content: center; }
.legal__otras a,
.footer__base--solo a { min-height: 44px; display: inline-flex; align-items: center; }
.legal__otras { gap: 0.2rem 1.4rem; }
}
/* =========================================================
CABECERA COMPACTA DE LAS PÁGINAS SECUNDARIAS (móvil)
`.menu--min` no se despliega: es una barra fija. Heredaba la
tipografía del menú desplegable (2rem serif), y en móvil
«Inicio», «Calendario de rutas» y ES/EN/FR partían el logo en
dos líneas y ocupaban media pantalla.
========================================================= */
.menu--min { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.15rem; }
@media (max-width: 820px) {
/* La tipografia grande es solo del menu a pantalla completa. El TAMANO lo
decide `styles.css`, que lo hace fluido con la altura de la ventana; si
se fija aqui gana por orden de carga y el menu no cabe en un movil
pequeno. Aqui solo la familia y el peso. */
.menu:not(.menu--min) .menu__link { font-family: var(--serif); font-weight: 400; }
.menu--min .menu__link {
font-family: var(--sans); font-weight: 400;
font-size: 0.82rem; letter-spacing: 0.01em; line-height: 1;
}
.menu--min .menu__lang { font-size: 0.74rem; letter-spacing: 0.08em; padding: 0.35rem 0.4rem; }
.site-head--solid .site-head__row {
flex-wrap: wrap; row-gap: 0.1rem;
padding-top: 0.7rem; padding-bottom: 0.7rem;
align-items: center;
}
/* el nombre de marca nunca se parte */
.site-head--solid .wordmark { flex: 0 0 auto; gap: 0.55rem; }
.site-head--solid .wordmark__full { white-space: nowrap; font-size: 1rem; }
.site-head--solid .wordmark__crest { height: 1.9rem; }
/* a esta anchura el escudo ya va a su minimo: no encoge mas al bajar */
.site-head--solid.scrolled .wordmark__crest { transform: none; }
.menu--min { flex: 1 1 auto; gap: 0 1rem; }
}
@media (max-width: 430px) {
/* a esta anchura el nombre completo ya no cabe junto a la navegación */
.site-head--solid .wordmark__full { font-size: 0.92rem; }
.menu--min { flex: 1 0 100%; justify-content: flex-start; gap: 0 0.9rem; margin-top: 0.35rem; }
/* empuja el bloque de idiomas al borde derecho de su fila */
.menu--min .menu__link:not(.menu__lang) + .menu__lang { margin-left: auto; }
}
@media (pointer: coarse), (max-width: 820px) {
.wordmark { min-height: 44px; }
.menu--min .menu__link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* El encuadre real del territorio es casi cuadrado, asi que a ancho
completo el mapa se convertia en un bloque de 1.294 x 1.232 px. Se
limita y se centra; los filtros y el pie siguen a ancho completo. */
@media (min-width: 821px) {
.mapa__lienzo { max-width: 780px; margin-inline: auto; }
.mapa__pie { max-width: 780px; margin-inline: auto; }
}
@media (max-width: 560px) {
/* Ocho etiquetas no caben a esta anchura sin solaparse. Se dejan solo
los enclaves clave; el itinerario completo va en «Pasa por», debajo. */
}
/* =========================================================
FOCO, TECLADO Y SALTO AL CONTENIDO
No había ningún estilo de `:focus-visible`: quien navega con
teclado no veía dónde estaba.
========================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 1px;
}
.section[data-theme="night"] :focus-visible { outline-color: var(--gold); }
.chip:focus-visible, .day:focus-visible { outline-offset: 1px; }
.saltar {
position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
z-index: 1000; background: var(--gold); color: #15170f;
padding: 0.8rem 1.6rem; font-size: 0.8rem; letter-spacing: 0.1em;
text-transform: uppercase; font-weight: 600;
transition: transform 0.25s var(--ease);
}
.saltar:focus { transform: translate(-50%, 0); }
/* =========================================================
ESTADOS DE CARGA
El calendario y el mapa piden datos: antes quedaba un hueco
en blanco sin explicación.
========================================================= */
.cargando { position: relative; min-height: 220px; }
.cargando::after {
content: attr(data-cargando);
position: absolute; inset: 0; display: grid; place-content: center;
font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--faint);
}
.esqueleto {
background: linear-gradient(90deg,
color-mix(in srgb, var(--fg) 5%, transparent) 25%,
color-mix(in srgb, var(--fg) 9%, transparent) 37%,
color-mix(in srgb, var(--fg) 5%, transparent) 63%);
background-size: 400% 100%;
animation: brillo 1.4s ease-in-out infinite;
}
@keyframes brillo { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }
/* =========================================================
ERRORES POR CAMPO EN LA RESERVA
Antes solo había una línea de error al final del paso; ahora
el mensaje va junto al campo que lo provoca.
========================================================= */
.field.is-mal input, .field.is-mal select, .field.is-mal textarea { border-color: #9c3b26; }
.field__error {
display: none; margin-top: 0.4rem;
font-size: 0.78rem; line-height: 1.4; color: #9c3b26;
}
.field.is-mal .field__error { display: block; }
.check.is-mal > span { color: #9c3b26; }
/* =========================================================
PANEL: LA TABLA NO CABE EN UN MÓVIL
Forzaba 900 px de ancho y scroll horizontal. En pantalla
estrecha cada fila pasa a ficha, con la etiqueta delante.
========================================================= */
@media (max-width: 780px) {
.tabla__wrap { border: 0; overflow: visible; }
.tabla { min-width: 0; }
.tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabla tr { display: block; border: 1px solid var(--line); margin-bottom: 0.8rem; padding: 0.4rem 0.9rem; }
.tabla td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.42rem 0; text-align: right; }
.tabla td::before {
content: attr(data-k); flex: 0 0 auto; text-align: left;
font-size: var(--micro); letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(246, 242, 232, 0.45);
}
.tabla td:empty { display: none; }
.tabla td.num { text-align: right; }
.tabla .barra { max-width: 120px; margin-left: auto; }
.admin__filtros input { min-width: 0; }
.kpis { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================================
BARRA DE RESERVA FIJA (móvil, página de experiencias)
El botón de reservar quedaba a varias pantallas de distancia
una vez metido en el catálogo.
========================================================= */
.barra-reserva {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
display: none; align-items: center; gap: 0.9rem;
padding: 0.7rem var(--edge) calc(0.7rem + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--night) 94%, transparent);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(246, 242, 232, 0.14);
transform: translateY(110%); transition: transform 0.35s var(--ease);
}
.barra-reserva.is-on { transform: none; }
.barra-reserva__txt { flex: 1; min-width: 0; }
.barra-reserva__k { display: block; font-size: var(--micro); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 242, 232, 0.5); }
.barra-reserva__v { display: block; font-family: var(--serif); font-size: 1rem; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-reserva .btn { flex: 0 0 auto; }
@media (max-width: 820px) { .barra-reserva { display: flex; } .page-exp .footer { padding-bottom: 5.5rem; } }
@media (prefers-reduced-motion: reduce) { .barra-reserva { transition: none; } }
/* --- volver arriba --- */
.arriba {
position: fixed; right: var(--edge); bottom: 1.4rem; z-index: 690;
width: 44px; height: 44px; display: grid; place-content: center;
border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(8px); color: var(--fg); font-size: 1rem;
opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.arriba.is-on { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
.arriba:hover { border-color: var(--accent); color: var(--accent); }
}
@media (max-width: 820px) { .page-exp .arriba { bottom: 5.4rem; } }
/* con un diálogo abierto la barra estorba */
body.modal-abierto .barra-reserva { transform: translateY(110%); }
body.modal-abierto .arriba { opacity: 0; pointer-events: none; }
@media (max-width: 780px) {
/* el nombre + email no debe partirse en tres líneas contra el margen */
.tabla td[data-k="Cliente"] { flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.tabla td[data-k="Cliente"]::before { align-self: flex-start; }
/* la acción cierra la ficha, a lo ancho */
.tabla td:last-child { justify-content: flex-end; border-top: 1px solid var(--line); margin-top: 0.35rem; padding-top: 0.6rem; }
.tabla td:last-child::before { content: none; }
}
/* Los campos llevaban `outline: none` en styles.css y solo cambiaban el
borde: con teclado apenas se distinguía. El anillo vuelve, pero solo
para `:focus-visible`, así el clic con ratón sigue limpio. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.filtros__select select:focus-visible,
.admin__filtros input:focus-visible,
.admin__filtros select:focus-visible,
.acceso .field input:focus-visible,
.stepper input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.saltar:focus { outline: 2px solid #15170f; outline-offset: -5px; }
/* =========================================================
OFICIO TIPOGRÁFICO
Detalles que no se nombran pero se notan: ningún titular
terminaba con una palabra suelta por casualidad, los números
de las tablas no alineaban y los precios podían partirse del
símbolo de euro.
========================================================= */
/* Reparte las líneas del titular en vez de dejar huérfanas.
«Donde el tiempo se / detiene» pasa a partir por el sentido. */
h1, h2, h3, h4,
.hero__title, .filo__title, .exp-intro__title, .distingue__title,
.caballos__title, .parque__title, .destinos__title, .finca__title,
.cal__title, .catalogo__title, .faq__title, .mapa__title, .legal__title,
.card__title, .fam__title, .ruta__nombre, .pilar__title, .salida__ruta,
.interlude__text, .testi__quote, .banda__text, .gracias__title {
text-wrap: balance;
}
/* Evita la última línea de un solo término en los párrafos. */
p, .lede, .filo__note, .card__desc, .fam__desc, .pilar__desc,
.ruta__desc, .legal__p, .faq__grid p, .mapa__intro {
text-wrap: pretty;
}
/* Cifras que se comparan en vertical: mismo ancho de dígito. */
.tabla, .kpi__v, .figure__num, .cal__days, .plazas, .resumen__linea,
.resumen__total, .ruta__precio, .salida__precio, .gracias__datos dd {
font-variant-numeric: tabular-nums;
}
/* El signo de euro no se separa nunca de su cifra, ni la unidad
de su número (norma tipográfica española y francesa). */
.ruta__precio, .salida__precio, .resumen__total strong { white-space: nowrap; }
/* Comilla de apertura colgada: alinea ópticamente el bloque de cita. */
.interlude__text { text-indent: -0.42em; }
.testi__quote::before { content: none; }
/* Ligaduras y cifras proporcionales en la voz serif. */
.hero__title, .filo__title, .interlude__text, .testi__quote,
.footer__mark, .gracias__title {
font-feature-settings: 'liga' 1, 'calt' 1;
font-kerning: normal;
}
/* =========================================================
ROMPER LA REJILLA
Dos secciones seguidas repetían la misma anatomía —filete,
antetítulo, titular con cursiva y rejilla perfectamente
regular—. La asimetría es lo que distingue una maquetación
editorial de una plantilla.
========================================================= */
@media (min-width: 1081px) {
/* «Lo que distingue»: dos filas de anchos distintos en vez de
cuatro columnas idénticas */
.cards { grid-template-columns: repeat(12, 1fr); }
.card:nth-child(1) { grid-column: span 7; }
.card:nth-child(2) { grid-column: span 5; }
.card:nth-child(3) { grid-column: span 5; }
.card:nth-child(4) { grid-column: span 7; }
/* Misma altura de imagen en toda la fila para que los titulares
compartan línea base: la asimetría vive en el ancho, no en un
desajuste de 15px que parecería un descuido. */
.card__media { aspect-ratio: auto; height: 300px; }
.card:nth-child(1) .card__desc,
.card:nth-child(4) .card__desc { max-width: 52ch; }
}
@media (min-width: 1101px) {
/* Los retratos, escalonados: una tira de seis idénticos leía
como un banco de imágenes, no como una galería. */
.caballos__grid { align-items: start; padding-bottom: 2.4rem; }
.caballo:nth-child(even) { transform: translateY(2.4rem); }
}
/* El crédito del fotógrafo va en el pie, no incrustado como marca
de agua: es lo profesional y lo correcto con su autor. */
@media (max-width: 560px) { .footer__base { gap: 0.4rem; } }
/* La cita iba a 22ch: tan estrecha que el balanceo no tenía margen y
«si» quedaba colgado al final de una línea, separado de su oración.
Con más medida rompe por sentido. */
/* `ch` se calcula con la tipografía del propio elemento: en el ,
que hereda el cuerpo pequeño, 32ch eran ~256px. La medida va en el
texto, que es quien lleva los 40px. */
.interlude__quote { max-width: none; }
.interlude__text { max-width: 15em; margin-inline: auto; text-wrap: balance; }
.interlude__by { color: rgba(246, 242, 232, 0.62); letter-spacing: 0.2em; }
.testi__by { color: var(--gold); }
/* =========================================================
MAPA REAL (Leaflet)
El SVG propio se sustituye por cartografía de verdad. Los
estilos por defecto de Leaflet son grises de sistema: aquí se
llevan a la paleta del sitio.
========================================================= */
.mapa__leaflet { width: 100%; height: clamp(360px, 52svh, 560px); background: color-mix(in srgb, var(--ochre) 5%, transparent); }
.mapa__lienzo { position: relative; border: 1px solid var(--line); overflow: hidden; }
.leaflet-container { font-family: var(--sans); background: transparent; }
.leaflet-control-attribution {
background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
font-size: 10px; color: var(--faint);
}
.leaflet-control-attribution a { color: var(--ochre); }
.leaflet-bar a {
background: color-mix(in srgb, var(--paper) 94%, transparent);
color: var(--ink); border-bottom-color: var(--line);
width: 34px; height: 34px; line-height: 34px;
}
@media (hover: hover) {
.leaflet-bar a:hover { background: var(--paper); color: var(--ochre); }
}
.leaflet-bar { border: 1px solid var(--line); box-shadow: none; }
/* etiquetas de enclave con la voz del sitio, no el globo por defecto */
.mapa__etiqueta.leaflet-tooltip {
background: color-mix(in srgb, var(--paper) 92%, transparent);
border: 0; box-shadow: none; color: var(--ink);
font-size: 0.72rem; letter-spacing: 0.02em; padding: 2px 6px;
white-space: nowrap;
}
.mapa__etiqueta.leaflet-tooltip::before { display: none; }
.mapa__etiqueta.es-base {
font-weight: 600; color: var(--ochre);
font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
}
/* velo táctil: el dedo sobre el mapa no debe bloquear el scroll */
.mapa__velo {
position: absolute; inset: 0; z-index: 900;
display: grid; place-content: center;
background: color-mix(in srgb, var(--paper) 42%, transparent);
cursor: pointer;
}
.mapa__velo span {
background: color-mix(in srgb, var(--night) 88%, transparent); color: var(--bone);
padding: 0.6rem 1.1rem; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
}
@media (max-width: 820px) {
.mapa__leaflet { height: clamp(320px, 56svh, 460px); }
.mapa__etiqueta.leaflet-tooltip { font-size: 0.7rem; }
}
/* El estilo estándar de OSM es más vivo de lo que pide la marca: se apaga
para que el trazado en oro sea lo único con color propio. */
.mapa__leaflet .leaflet-tile-pane {
filter: saturate(0.42) contrast(0.92) brightness(1.06) sepia(0.12);
}
/* enlace discreto al modo demostración bajo el formulario de acceso */
.acceso__demo { margin-top: 1.4rem; font-size: 0.84rem; color: rgba(246, 242, 232, 0.5); }
.acceso__demo .linkish { color: var(--gold); }
/* =========================================================
PANEL EN CLARO
El panel nació oscuro como el sitio, pero se usa a diario y
con luz de oficina: en claro cansa menos y los gráficos se
leen mejor. Los estilos originales fijaban colores oscuros a
mano, así que aquí se reescriben en bloque.
========================================================= */
.page-admin {
--panel: #f6f3ec; /* fondo */
--tarjeta: #ffffff; /* superficies */
--raya: rgba(42, 40, 29, 0.13); /* separador decorativo, sin minimo */
--raya-fuerte: rgba(42, 40, 29, 0.51); /* borde de control: 3.02:1 */
--suave: rgba(42, 40, 29, 0.66); /* 4.62:1 sobre panel y sobre tarjeta */
background: var(--panel);
color: var(--ink);
}
.page-admin .acceso { background: var(--panel); }
.page-admin .acceso__box {
background: var(--tarjeta); border: 1px solid var(--raya);
padding: clamp(1.8rem, 4vw, 2.6rem);
}
.page-admin .acceso__note,
.page-admin .acceso .field span { color: var(--suave); }
.page-admin .acceso .field input {
color: var(--ink); border-bottom-color: var(--raya-fuerte); background: none;
}
.page-admin .acceso .field input:focus { border-color: var(--ochre); }
.page-admin .acceso__error { color: #9c3b26; }
.page-admin .acceso__demo { color: var(--suave); }
.page-admin .acceso__demo .linkish { color: var(--ochre); }
.page-admin .admin__head { border-bottom-color: var(--raya); }
.page-admin .admin__k { color: var(--suave); }
.page-admin .admin__aviso {
border-color: rgba(165, 103, 44, 0.35);
background: rgba(165, 103, 44, 0.08);
color: #7c4f21;
}
.page-admin .admin__aviso code { background: rgba(42, 40, 29, 0.08); }
.page-admin .kpis { background: var(--raya); border-color: var(--raya); }
.page-admin .kpi { background: var(--tarjeta); }
.page-admin .kpi__v { color: var(--ochre); }
.page-admin .kpi__k { color: var(--suave); }
.page-admin .admin__tabs { border-bottom-color: var(--raya); }
.page-admin .tab { color: var(--suave); }
@media (hover: hover) {
.page-admin .tab:hover { color: var(--ink); }
}
.page-admin .tab.is-on { color: var(--ochre); border-bottom-color: var(--ochre); }
.page-admin .admin__filtros input,
.page-admin .admin__filtros select {
background: var(--tarjeta); border-color: var(--raya-fuerte); color: var(--ink);
}
.page-admin .admin__filtros option { background: var(--tarjeta); }
.page-admin .tabla__wrap { border-color: var(--raya); background: var(--tarjeta); }
.page-admin .tabla th { color: var(--suave); border-bottom-color: var(--raya); }
.page-admin .tabla td { border-bottom-color: rgba(42, 40, 29, 0.08); }
@media (hover: hover) {
.page-admin .tabla tr:hover td { background: rgba(165, 103, 44, 0.05); }
}
.page-admin .tabla td small { color: var(--suave); }
.page-admin .tabla .mono { color: var(--ochre); }
.page-admin .tabla__ver { color: var(--ochre); }
.page-admin .tabla__vacia { color: var(--suave); }
.page-admin .barra { background: rgba(42, 40, 29, 0.1); }
.page-admin .barra i { background: var(--ochre); }
.page-admin .pill--confirmada { color: #3f7a49; }
.page-admin .pill--pendiente { color: #93671e; }
.page-admin .pill--caducada { color: var(--suave); }
.page-admin .pill--cancelada { color: #9c3b26; }
.page-admin .pill--solicitada { color: #93671e; }
.page-admin .pill--rechazada { color: #9c3b26; }
.fichaR .pill--solicitada { color: #93671e; }
.fichaR .pill--rechazada { color: #9c3b26; }
/* Resolver una solicitud: dos acciones, una de cada signo. Van en la
misma celda que «Ver», asi que pesan lo mismo que el resto de la
fila y se distinguen por el color, no por el tamaño. */
.tabla__ok, .tabla__no {
font-size: var(--micro-lg); letter-spacing: 0.12em; text-transform: uppercase;
cursor: pointer; white-space: nowrap; margin-right: 0.8rem;
}
.tabla__ok { color: #3f7a49; }
.tabla__no { color: #9c3b26; }
@media (hover: hover) {
.tabla__ok:hover, .tabla__no:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.tabla__ok[disabled], .tabla__no[disabled] { opacity: 0.5; cursor: default; }
@media (max-width: 780px) {
.tabla__ok, .tabla__no { min-height: 44px; display: inline-flex; align-items: center; }
}
.fichaR__solic {
margin: 1.4rem 0; padding: 0.9rem 1.1rem; font-size: 0.88rem; line-height: 1.6;
color: var(--ink); background: rgba(var(--ochre-tint), 0.08);
border-left: 2px solid var(--ochre);
}
/* Ocupacion por dia natural: el tope que de verdad limita. */
.diasocup { list-style: none; display: grid; gap: 0.5rem; margin-top: 1.2rem; }
.diasocup__i { display: grid; grid-template-columns: 1fr 120px auto; gap: 1rem; align-items: center; font-size: 0.9rem; }
.diasocup__i .barra { margin: 0; max-width: none; }
.diasocup__n { font-variant-numeric: tabular-nums; color: var(--suave); white-space: nowrap; }
.diasocup__i.es-lleno .diasocup__n { color: #9c3b26; font-weight: 600; }
@media (max-width: 560px) {
.diasocup__i { grid-template-columns: 1fr auto; }
.diasocup__i .barra { grid-column: 1 / -1; }
}
/* Ajustes generales de la temporada. */
.reditor__ajustes {
margin: 1.4rem 0; padding: 1.2rem 1.4rem;
background: var(--tarjeta); border: 1px solid var(--raya);
}
.reditor__ajustes > summary {
cursor: pointer; font-size: var(--micro-lg); letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ochre);
}
.reditor__ajustes[open] > summary { margin-bottom: 1rem; }
/* Los dias cerrados, en fila, para quitarlos de uno en uno. */
.rcerr { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.rcerr__x {
display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px;
padding: 0.3rem 0.7rem; border: 1px solid var(--raya); background: var(--hueso);
font-size: 0.82rem; color: var(--ink); cursor: pointer;
}
@media (hover: hover) {
.rcerr__x:hover { border-color: var(--ochre); color: var(--ochre); }
}
.page-admin .btn--ghost { border-color: var(--raya-fuerte); color: var(--ink); }
@media (hover: hover) {
.page-admin .btn--ghost:hover { border-color: var(--ochre); color: var(--ochre); background: rgba(var(--ochre-tint), 0.06); }
}
@media (max-width: 780px) {
.page-admin .tabla tr { border-color: var(--raya); background: var(--tarjeta); }
.page-admin .tabla td::before { color: var(--suave); }
}
/* =========================================================
GRÁFICOS DEL PANEL
========================================================= */
.graficos {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: 2rem;
}
.grafico {
background: var(--tarjeta); border: 1px solid var(--raya);
padding: clamp(1.2rem, 2.2vw, 1.8rem); min-width: 0;
}
.grafico--ancho { grid-column: 1 / -1; }
.grafico__t { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.01em; }
.grafico__s { margin: 0.35rem 0 1.2rem; font-size: 0.82rem; color: var(--suave); }
.grafico__vacio { font-size: 0.88rem; color: var(--suave); padding: 1.5rem 0; }
@media (max-width: 900px) { .graficos { grid-template-columns: 1fr; } }
/* --- mapa de calor --- */
.hm__wrap { overflow-x: auto; }
.hm { border-collapse: separate; border-spacing: 3px; font-size: 0.78rem; }
.hm th[scope="col"] {
font-size: var(--micro-lg); letter-spacing: 0.1em; text-transform: uppercase;
color: var(--suave); font-weight: 500; padding-bottom: 0.2rem; text-align: center;
}
.hm th[scope="row"] {
text-align: left; font-weight: 400; color: var(--ink);
padding-right: 0.8rem; white-space: nowrap; font-size: 0.82rem;
}
.hm__c {
width: 46px; height: 34px; text-align: center; vertical-align: middle;
border-radius: 2px; font-variant-numeric: tabular-nums;
color: var(--ink); cursor: default;
}
.hm__c span { font-size: 0.74rem; opacity: 0.85; }
.hm__c--no { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(42,40,29,0.05) 4px, rgba(42,40,29,0.05) 5px); }
.hm__leyenda {
display: flex; align-items: center; gap: 0.35rem;
margin-top: 1rem; font-size: 0.72rem; color: var(--suave);
}
.hm__paso { width: 20px; height: 12px; border-radius: 2px; display: inline-block; }
.hm__leyenda em { margin-left: auto; font-style: italic; }
/* --- barras de ingresos --- */
.barras { list-style: none; display: grid; gap: 0.9rem; }
.barras__f { display: grid; grid-template-columns: 1fr; gap: 0.3rem; }
.barras__k { font-size: 0.86rem; }
.barras__b { display: block; height: 8px; background: rgba(42, 40, 29, 0.08); border-radius: 2px; overflow: hidden; }
.barras__b i { display: block; height: 100%; background: var(--ochre); border-radius: 2px; }
.barras__v {
display: flex; justify-content: space-between; gap: 1rem;
font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--ink);
}
.barras__v em { font-style: normal; font-size: 0.76rem; color: var(--suave); }
/* --- ritmo semanal --- */
.ritmo { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.ritmo__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.ritmo__b {
width: 100%; max-width: 44px; background: var(--ochre); opacity: 0.85;
border-radius: 2px 2px 0 0; min-height: 0;
}
@media (hover: hover) {
.ritmo__col:hover .ritmo__b { opacity: 1; }
}
.ritmo__n { font-size: 0.76rem; font-variant-numeric: tabular-nums; margin-top: 0.3rem; color: var(--ink); }
.ritmo__e { font-size: var(--micro); color: var(--suave); white-space: nowrap; height: 1.1em; }
/* --- contacto directo con el cliente --- */
.contacto { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.contacto__b {
font-size: var(--micro-lg); letter-spacing: 0.06em; padding: 0.4rem 0.7rem;
border: 1px solid var(--raya-fuerte); color: var(--ink); white-space: nowrap;
transition: border-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.contacto__b:hover { border-color: var(--ochre); color: var(--ochre); background: rgba(var(--ochre-tint), 0.06); }
}
.contacto__b.es-wa { border-color: rgba(37,140,80,0.4); color: #1f7a45; }
@media (hover: hover) {
.contacto__b.es-wa:hover { background: rgba(37,140,80,0.08); border-color: #1f7a45; }
}
.tabla__acc { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.fichaR__acciones .contacto { gap: 0.8rem; }
@media (pointer: coarse), (max-width: 820px) {
.contacto__b { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 780px) {
.tabla td.tabla__acc { justify-content: flex-end; }
}
/* el localizador no debe partirse, y las acciones caben en una línea */
.page-admin .tabla .mono { white-space: nowrap; }
@media (min-width: 781px) {
.tabla__acc { flex-wrap: nowrap; gap: 0.4rem; }
.tabla__acc .tabla__ver { margin-left: 0.3rem; }
}
/* con cinco indicadores en dos columnas quedaba una celda vacía */
@media (max-width: 780px) {
.kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* =========================================================
ANCLAS BAJO EL HEADER FIJO
Sin `scroll-margin-top` un salto de ancla deja el inicio de la
sección debajo de la barra. Aquí solo se nota porque las
secciones tienen holgura arriba; con menos, se comería el título.
========================================================= */
:where(section[id], article[id], main[id], h2[id], h3[id]) {
scroll-margin-top: 6rem;
}
@media (max-width: 820px) {
:where(section[id], article[id], main[id], h2[id], h3[id]) { scroll-margin-top: 5.5rem; }
}
/* =========================================================
CABECERA DE LAS PÁGINAS SECUNDARIAS EN MÓVIL
Se repartía en tres filas —y «FR» se quedaba solo en la
tercera—, ocupando 162 px. Pasa a dos filas: marca arriba,
navegación e idiomas abajo.
========================================================= */
@media (max-width: 620px) {
.site-head--solid .site-head__row {
flex-wrap: wrap; row-gap: 0.35rem;
padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.site-head--solid .wordmark { flex: 1 1 100%; }
.site-head--solid .wordmark__full { font-size: 1.02rem; }
.site-head--solid .wordmark__crest { height: 2rem; }
/* a esta anchura el escudo ya va a su minimo: no encoge mas al bajar */
.site-head--solid.scrolled .wordmark__crest { transform: none; }
.menu--min {
flex: 1 1 100%; order: 3;
display: flex; align-items: center; flex-wrap: nowrap;
gap: 0.7rem; padding-top: 0.1rem;
border-top: 1px solid var(--line);
}
.menu--min .menu__link {
font-family: var(--sans); font-size: 0.8rem; font-weight: 400;
letter-spacing: 0.01em; white-space: nowrap;
}
/* los idiomas se agrupan a la derecha, en su propia fila lógica */
/* los idiomas mantienen los 44px de objetivo tactil: se compensa
apretando el interlineado de la fila, no encogiendo el destino */
.menu--min .menu__lang {
font-size: 0.74rem; padding: 0 0.35rem;
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
.menu--min .menu__lang:first-of-type { margin-left: auto; }
}
/* =========================================================
ACABADO TIPOGRÁFICO — calibrado para EB Garamond + Schibsted Grotesk
Al cambiar de Fraunces a un Garamond real cambian tres cosas:
la altura de x baja, las astas se alargan y el color de la
página se aclara. Este bloque compensa las tres.
========================================================= */
/* Garamond tiene tamaños ópticos: sin esto, un titular de 5rem
se renderiza con el mismo grosor de asta que un pie de foto. */
:root { --radio-pastilla: 100px; }
body { font-optical-sizing: auto; }
/* Los pies y rótulos pequeños en serif son lo primero que se cae
con un Garamond. Suben medio punto y un peso. */
.filo__cap { font-size: 0.88rem; font-weight: 500; }
.contactlist__v { font-weight: 500; }
/* Cifras que se comparan en columna: ancho fijo para que no bailen
al cambiar de mes, de plazas o de importe. */
.ruta__precio, .resumen__total strong, .resumen__linea,
.day__n, .plazas, .kpi__v, .figure__num, .salida__precio {
font-variant-numeric: tabular-nums;
}
/* HOLGURA DE DESCENDENTES EN CURSIVA
«al paso», «para cada jinete»: la j y la p en cursiva de display
se cortaban contra el borde de la caja. El interlineado ya subió
a 1.02; esto reserva además el remate inferior. */
:is(.hero__title, .filo__title, .exp-intro__title, .caballos__title,
.finca__title, .reservar__title, .destinos__title, .distingue__title,
.interlude__text, .testi__quote):has(em) {
padding-bottom: 0.06em;
}
/* =========================================================
MENOS SEÑALES REPETIDAS
Nueve epígrafes idénticos, cada uno precedido de la misma
rayita, es lo que hacía que la página se leyera como plantilla.
La rayita sobraba: el epígrafe ya se distingue por color,
tamaño y caja. Se quita el trazo, no la palabra.
========================================================= */
/* El epigrafe es inline-flex, asi que el espacio en blanco del marcado no
se pinta: la separacion la daba el `gap`. Poniendolo a cero, «Temporada
2026» quedaba como «TEMPORADA2026». Se conserva un hueco
del tamano de un espacio; en los epigrafes de un solo elemento no
aplica, porque el `gap` solo separa entre hijos. */
.eyebrow { gap: 0.3em; letter-spacing: 0.14em; font-weight: 500; }
/* =========================================================
UNA SOLA FAMILIA DE ESQUINAS
El sistema es de canto vivo. Las únicas excepciones con regla
escrita: los controles con forma de pastilla y los puntos
circulares. Los radios sueltos de 1 y 2 px eran ruido.
========================================================= */
.barras__b i,
.plazas__bar, .plazas__bar i,
.hm__c, .hm__paso { border-radius: 0; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { border-radius: 0; }
/* =========================================================
TIEMPOS DE INTERACCIÓN
Un zoom de foto de 1,3 s se siente pesado: el cursor ya se ha
ido antes de que termine. Se acortan a un rango que responde.
========================================================= */
.slide__media img { transition: transform 0.6s var(--ease), filter 0.4s var(--ease); }
.fam__media img,
.card__media img { transition: transform 0.6s var(--ease); }
.caballo img { transition: transform 0.6s var(--ease), filter 0.4s var(--ease); }
/* =========================================================
RED DE SEGURIDAD SI NO HAY JAVASCRIPT
Las entradas por scroll parten de opacity:0 y es main.js quien
las enciende. Sin JavaScript la página se quedaba en blanco:
62 elementos invisibles y ningún texto a la vista. Esta consulta
los deja visibles de partida, sin depender de nada.
========================================================= */
@media (scripting: none) {
.reveal,
.reveal-media .media__img {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
}
/* =========================================================
TITULARES QUE YA NO LLEVAN EPÍGRAFE
El margen superior de estos titulares servía para separarlos de
su epígrafe. Retirados los epígrafes sobrantes, ese margen ya no
separa de nada y descuadraba el arranque de cada sección.
========================================================= */
.filo__title,
.distingue__title,
.cal__title,
.catalogo__title,
.mapa__title { margin-top: 0; }
/* =========================================================
DISTINTIVO DE RUTA EXCLUSIVA
Va junto al nombre, no superpuesto a la fotografía: así se lee
a cualquier tamaño, no tapa la imagen y no depende de que la
zona de la foto sobre la que caía fuera oscura.
El tamaño va en `em` para que acompañe al titular que lo lleva, pero
con suelo: a 0.5em de un `.fam__title` de movil la insignia caia a
8px, y dentro de `.slide__name` a menos de 7. `max()` conserva el
escalado y corta por abajo en el suelo de legibilidad.
========================================================= */
.marca-x {
display: inline-block;
margin-left: 0.6em;
font-family: var(--sans);
font-size: max(var(--micro), 0.5em);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
vertical-align: 0.32em;
white-space: nowrap;
}
.slide__name .marca-x { font-size: max(var(--micro), 0.42em); vertical-align: 0.42em; }
/* =========================================================
CARRUSEL: CONTROL DE LA ROTACIÓN
El carrusel rota solo, y todo contenido en movimiento necesita
poder pararse. El botón vive en la misma línea que la barra de
progreso, alineado a la derecha.
========================================================= */
.carousel__ctrl {
max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge);
display: flex; justify-content: flex-end;
}
.carousel__pausa {
flex: none; width: 44px; height: 44px;
display: grid; place-content: center;
color: var(--dim);
transition: color var(--t-ui) var(--ease-ui);
}
@media (hover: hover) {
.carousel__pausa:hover { color: var(--fg); }
}
.carousel__pausa::before {
content: ''; width: 9px; height: 11px;
border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
/* En pausa, el icono pasa a triángulo de reproducción. */
.carousel__pausa.is-parado::before {
width: 0; height: 0;
border-left: 9px solid currentColor; border-right: 0;
border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* =========================================================
PANEL: EDITOR DE COORDENADAS DEL MAPA
========================================================= */
.mapaed { background: var(--tarjeta); border: 1px solid var(--raya); padding: clamp(1.2rem, 3vw, 2rem); }
.mapaed__ayuda { margin: 1rem 0 1.4rem; font-size: 0.86rem; color: var(--suave); }
.mapaed__ayuda summary { cursor: pointer; color: var(--ochre); font-weight: 500; padding: 0.4rem 0; }
.mapaed__ayuda p { margin-top: 0.5rem; line-height: 1.6; }
.mapaed__campo { display: block; }
.mapaed__campo > span {
display: block; margin-bottom: 0.5rem;
font-size: var(--micro-lg); letter-spacing: 0.16em; text-transform: uppercase; color: var(--suave);
}
.mapaed__campo textarea {
width: 100%; resize: vertical;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.82rem; line-height: 1.55;
color: var(--ink); background: var(--panel);
border: 1px solid var(--raya-fuerte); padding: 0.9rem 1rem;
}
.mapaed__campo textarea:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.mapaed__pie { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
.mapaed__estado { font-size: 0.84rem; color: var(--suave); margin-left: auto; }
.mapaed__estado.es-error { color: #9c3b26; }
@media (max-width: 620px) {
.mapaed__estado { margin-left: 0; width: 100%; }
}
/* =========================================================
PANEL: EDITOR DE RUTAS Y CALENDARIO
Lo usa gente que no trabaja con webs, así que los objetivos son
grandes, el estado del borrador se ve siempre y los errores salen
en rojo arriba, no escondidos junto al campo.
========================================================= */
.reditor__barra {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
padding: 0.9rem 1.1rem; margin-bottom: 1rem;
background: var(--tarjeta); border: 1px solid var(--raya);
border-left: 4px solid var(--raya-fuerte);
}
.reditor__barra.es-aldia { border-left-color: #3f7a49; }
.reditor__barra.es-pendiente { border-left-color: #93671e; }
.reditor__barra.es-sucio { border-left-color: #9c3b26; }
.reditor__situacion { font-size: 0.92rem; color: var(--ink); margin: 0; }
.reditor__acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.reditor__estado { font-size: 0.86rem; color: var(--suave); min-height: 1.3em; margin: 0 0 0.6rem; }
.reditor__estado.es-error { color: #9c3b26; }
.reditor__problemas {
background: rgba(156, 59, 38, 0.06); border: 1px solid rgba(156, 59, 38, 0.35);
padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--ink);
}
.reditor__problemas-t { font-weight: 600; margin-bottom: 0.4rem; }
.reditor__problemas ul { margin: 0; padding-left: 1.1rem; }
.reditor__problemas li { margin-top: 0.25rem; line-height: 1.5; }
.reditor__historial { background: var(--tarjeta); border: 1px solid var(--raya); padding: 1rem; margin-bottom: 1rem; }
.rhist { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.rhist li {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 0.5rem 0; border-top: 1px solid var(--raya); font-size: 0.88rem;
}
.reditor__cuerpo { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1.2rem; align-items: start; }
.reditor__lista { background: var(--tarjeta); border: 1px solid var(--raya); padding: 0.5rem; }
.reditor__ul { list-style: none; margin: 0; padding: 0; }
.reditor__ul--arch { opacity: 0.6; }
.reditor__sub {
font-size: var(--micro-lg); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--suave); margin: 1rem 0 0.3rem; padding-left: 0.6rem;
}
.reditor__item {
width: 100%; text-align: left; padding: 0.7rem 0.6rem; min-height: 44px;
border-left: 3px solid transparent; transition: background 0.2s var(--ease);
}
@media (hover: hover) {
.reditor__item:hover { background: var(--panel); }
}
.reditor__item.is-on { background: var(--panel); border-left-color: var(--ochre); }
.reditor__item-n { display: block; font-size: 0.94rem; color: var(--ink); }
.reditor__item-m { display: block; font-size: 0.76rem; color: var(--suave); margin-top: 0.15rem; }
.reditor__detalle { background: var(--tarjeta); border: 1px solid var(--raya); padding: clamp(1rem, 2.5vw, 1.6rem); }
.reditor__cab { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.reditor__titulo { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin: 0; }
.reditor__interruptor { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.88rem; }
.reditor__interruptor input { width: 1.1rem; height: 1.1rem; accent-color: var(--ochre); }
.reditor__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.reditor__campo { display: block; margin-bottom: 1rem; }
.reditor__campo > span, .reditor__campo-t {
display: block; margin-bottom: 0.35rem;
font-size: var(--micro-lg); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave);
}
.reditor__campo input, .reditor__campo select, .reditor__campo textarea,
.rsal__campos input {
width: 100%; font-family: inherit; font-size: 0.92rem; color: var(--ink);
background: var(--panel); border: 1px solid var(--raya-fuerte);
padding: 0.55rem 0.7rem; min-height: 44px;
}
.reditor__campo textarea { min-height: 0; line-height: 1.55; resize: vertical; }
.reditor__ayuda { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--suave); font-style: normal; }
.reditor__foto { margin-bottom: 1.2rem; }
.reditor__foto-fila { display: flex; align-items: center; gap: 0.9rem; }
.reditor__foto-m { width: 96px; height: 66px; object-fit: cover; border: 1px solid var(--raya); flex: none; }
.reditor__foto-fila select {
flex: 1; font-family: inherit; font-size: 0.92rem; min-height: 44px;
background: var(--panel); border: 1px solid var(--raya-fuerte); padding: 0.5rem 0.7rem; color: var(--ink);
}
.reditor__trad { margin: 1.2rem 0; border-top: 1px solid var(--raya); padding-top: 0.8rem; }
.reditor__trad summary { cursor: pointer; color: var(--ochre); font-weight: 500; padding: 0.4rem 0; min-height: 44px; display: flex; align-items: center; }
.reditor__idioma { margin-top: 1rem; }
.reditor__idioma-t { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; }
.reditor__pend { color: #93671e; font-style: normal; font-size: 0.78rem; }
.reditor__pie-ficha { border-top: 1px solid var(--raya); padding-top: 1rem; }
.reditor__vacio { color: var(--suave); font-size: 0.9rem; padding: 1rem 0; }
/* --- calendario --- */
.rcal { margin-top: 1.4rem; border-top: 1px solid var(--raya); padding-top: 1.2rem; }
.rcal__cab { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.8rem; }
.rcal__nav { width: 44px; height: 44px; font-size: 1.3rem; color: var(--ochre); }
.rcal__dias, .rcal__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rcal__dias span { text-align: center; font-size: var(--micro-lg); letter-spacing: 0.1em; color: var(--suave); padding-bottom: 0.3rem; }
.rcal__d {
aspect-ratio: 1; min-height: 40px; font-size: 0.86rem; color: var(--ink);
border: 1px solid var(--raya); background: var(--panel);
transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
@media (hover: hover) {
.rcal__d:hover { border-color: var(--ochre); }
}
.rcal__d.es-salida { background: var(--ochre); color: var(--tarjeta); border-color: var(--ochre); font-weight: 600; }
.rcal__d.es-cerrada { background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(var(--ochre-tint), 0.25) 3px, rgba(var(--ochre-tint), 0.25) 6px); border-color: var(--ochre); }
.rcal__d.es-pasado { opacity: 0.45; }
.rcal__d.es-fuera { opacity: 0.28; } /* fuera de temporada */
.rcal__d.es-global { border-style: dashed; } /* cerrado para toda la casa */
.rcal__d[disabled] { cursor: default; }
.rcal__hueco { aspect-ratio: 1; }
/* --- salidas --- */
.rsal { margin-top: 1.4rem; }
.rsal__ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.rsal__i { border-top: 1px solid var(--raya); padding: 0.8rem 0; }
.rsal__i.es-pasada { opacity: 0.55; }
.rsal__fecha { font-size: 0.94rem; color: var(--ink); margin-bottom: 0.5rem; }
.rsal__fecha em { font-style: normal; font-size: 0.78rem; color: var(--suave); }
.rsal__campos { display: flex; gap: 0.7rem; align-items: end; flex-wrap: wrap; }
.rsal__campos label { display: block; }
.rsal__campos label > span {
display: block; margin-bottom: 0.25rem;
font-size: var(--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave);
}
.rsal__nota { flex: 1; min-width: 160px; }
.rsal__cerrar { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; white-space: nowrap; }
.rsal__cerrar input { width: 1.1rem; height: 1.1rem; accent-color: var(--ochre); flex: none; }
/* Sin `display: inline` heredaria el `block` de las demas etiquetas y el
texto caeria debajo de la casilla en vez de a su lado. */
.rsal__cerrar > span {
display: inline; margin: 0;
text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: var(--ink);
}
.rsal__quitar { min-height: 44px; padding: 0 0.8rem; font-size: 0.8rem; color: #9c3b26; }
@media (hover: hover) {
.rsal__quitar:hover { text-decoration: underline; }
}
@media (max-width: 900px) {
.reditor__cuerpo { grid-template-columns: 1fr; }
.reditor__acciones { margin-left: 0; width: 100%; }
.reditor__acciones .btn { flex: 1; }
}
/* El editor en modo demostración: se ve, se trastea, no se guarda. */
.reditor__barra.es-demo { border-left-color: var(--ochre); }
.reditor__barra.es-demo .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* =========================================================
EL PORTAL, AFINADO
La auditoría con ui-ux-pro-max y taste-skill encontró cinco cosas
concretas, y este bloque las corrige como sistema en lugar de ir
regla por regla:
· Once contenedores con borde. La pauta es usar caja solo cuando
la elevación signifique jerarquía real; el resto se agrupa con
filete y aire. Aquí quedan tres superficies, no once.
· Veintiséis rótulos en mayúscula con tracking. Gritar cada
etiqueta de un formulario produce el mismo ritmo de plantilla
que se retiró de la web pública. Bajan a caja baja, y la
mayúscula se reserva para dos sitios.
· Cuatro radios distintos. Pasa a uno: canto vivo, como la web.
· Ningún estado :active. Todo lo pulsable responde al dedo.
· Espaciado sin escala. Se fija una escala densa de panel, de 4 a
48, que es lo que pide una interfaz de trabajo.
La idea rectora: la web pública es editorial, el portal es el lado
de trabajo de la misma casa. Un libro de registro bien compuesto,
donde la jerarquía la hace la tipografía y no las cajas.
========================================================= */
.page-admin {
/* Escala densa: una interfaz de trabajo respira distinto que una portada. */
--e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
--e5: 24px; --e6: 32px; --e7: 48px;
--hueso: #fffdf9;
}
/* --- una sola familia de esquinas: canto vivo --- */
.page-admin *,
.page-admin *::before,
.page-admin *::after { border-radius: 0; }
/* --- rótulos: dejan de gritar ---------------------------------
La mayúscula con tracking se queda en dos sitios y solo dos: la
clave sobre una cifra grande, y la fila de pestañas. En un
formulario, veintiséis etiquetas gritando son ruido. */
.page-admin .reditor__campo > span,
.page-admin .reditor__campo-t,
.page-admin .rsal__campos label > span,
.page-admin .mapaed__campo > span,
.page-admin .fichaR__h,
.page-admin .resv__legend {
text-transform: none;
letter-spacing: 0;
font-size: 0.8rem;
font-weight: 500;
color: var(--suave);
margin-bottom: var(--e2);
}
.page-admin .reditor__sub {
text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 500;
}
/* --- superficies: de once cajas a tres ------------------------
Conservan borde el carril de rutas, los campos y la tabla. Todo lo
demás se separa con filete y aire. */
.page-admin .kpis,
.page-admin .grafico,
.page-admin .mapaed,
.page-admin .reditor__historial {
background: none;
border: 0;
padding-left: 0;
padding-right: 0;
}
.page-admin .reditor__barra {
background: none;
border: 0;
border-bottom: 1px solid var(--raya);
padding: var(--e4) 0;
margin-bottom: var(--e5);
}
/* El estado del borrador se dice con una marca fina junto al texto,
no tiñendo el borde de un recuadro entero. */
.page-admin .reditor__situacion {
position: relative;
padding-left: var(--e4);
font-size: 0.95rem;
}
.page-admin .reditor__situacion::before {
content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 3px;
background: var(--raya-fuerte);
}
.page-admin .reditor__barra.es-aldia .reditor__situacion::before { background: #3f7a49; }
.page-admin .reditor__barra.es-pendiente .reditor__situacion::before { background: #93671e; }
.page-admin .reditor__barra.es-sucio .reditor__situacion::before { background: #9c3b26; }
.page-admin .reditor__barra.es-demo .reditor__situacion::before { background: var(--ochre); }
/* --- cifras: una tira, no cinco tarjetas ----------------------
Cinco cajas iguales en fila es el patrón que ambas skills señalan
como delator. Se convierte en una tira con filete entre columnas. */
.page-admin .kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0;
margin: var(--e6) 0 var(--e7);
border-top: 1px solid var(--raya);
border-bottom: 1px solid var(--raya);
}
.page-admin .kpi {
background: none;
padding: var(--e5);
padding-right: var(--e5);
border-left: 1px solid var(--raya);
}
.page-admin .kpi:first-child { border-left: 0; padding-left: 0; }
.page-admin .kpi__v {
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.page-admin .kpi__k {
margin-top: var(--e1);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--suave);
}
/* --- la hoja de trabajo --------------------------------------- */
.page-admin .reditor__cuerpo { gap: var(--e6); }
.page-admin .reditor__lista {
background: none;
border: 0;
border-right: 1px solid var(--raya);
padding: 0 var(--e5) 0 0;
}
.page-admin .reditor__detalle { background: none; border: 0; padding: 0; }
.page-admin .reditor__item { border-left: 0; padding-left: var(--e3); position: relative; }
.page-admin .reditor__item::before {
content: ''; position: absolute; left: 0; top: var(--e2); bottom: var(--e2); width: 2px;
background: transparent;
transition: background 0.18s var(--ease);
}
.page-admin .reditor__item.is-on::before { background: var(--ochre); }
.page-admin .reditor__item.is-on { background: none; }
.page-admin .reditor__item.is-on .reditor__item-n { font-weight: 500; }
@media (hover: hover) {
.page-admin .reditor__item:hover { background: var(--hueso); }
}
/* El nombre de la ruta es el objeto que se está editando: que se vea. */
.page-admin .reditor__titulo {
font-size: clamp(1.7rem, 2.6vw, 2.2rem);
letter-spacing: -0.015em;
}
.page-admin .reditor__cab {
border-bottom: 1px solid var(--raya);
padding-bottom: var(--e4);
margin-bottom: var(--e5);
}
/* --- campos ---------------------------------------------------- */
.page-admin .reditor__campo input,
.page-admin .reditor__campo select,
.page-admin .reditor__campo textarea,
.page-admin .rsal__campos input,
.page-admin .reditor__foto-fila select,
.page-admin .mapaed__campo textarea {
background: var(--hueso);
border: 1px solid var(--raya);
border-bottom-color: var(--raya-fuerte);
transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
@media (hover: hover) {
.page-admin .reditor__campo input:hover,
.page-admin .reditor__campo textarea:hover,
.page-admin .rsal__campos input:hover { border-color: var(--raya-fuerte); }
}
.page-admin .reditor__campo input:focus,
.page-admin .reditor__campo textarea:focus,
.page-admin .reditor__campo select:focus,
.page-admin .rsal__campos input:focus {
background: var(--tarjeta);
border-color: var(--ochre);
}
/* --- salidas: filas de registro, no fichas -------------------- */
.page-admin .rsal__i { padding: var(--e4) 0; }
@media (hover: hover) {
.page-admin .rsal__i:hover { background: var(--hueso); }
}
.page-admin .rsal__fecha { font-weight: 500; margin-bottom: var(--e3); }
/* --- calendario ------------------------------------------------ */
.page-admin .rcal {
border-top: 1px solid var(--raya);
padding-top: var(--e5);
margin-top: var(--e6);
}
.page-admin .rcal__d {
border-color: var(--raya);
font-variant-numeric: tabular-nums;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
@media (hover: hover) {
.page-admin .rcal__d:hover { background: var(--hueso); border-color: var(--ochre); }
.page-admin .rcal__d.es-salida:hover { background: #74471d; }
}
/* --- respuesta al dedo ----------------------------------------
Todo lo pulsable cede un píxel. Sin esto la interfaz se siente
muerta por muy bien compuesta que esté. */
.page-admin .btn:active:not([disabled]),
.page-admin .tab:active,
.page-admin .rcal__d:active,
.page-admin .reditor__item:active,
.page-admin .rsal__quitar:active,
.page-admin .rcal__nav:active { transform: translateY(1px); }
.page-admin .btn {
transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
color 0.2s var(--ease), transform 0.08s ease;
}
@media (prefers-reduced-motion: reduce) {
.page-admin .btn:active:not([disabled]),
.page-admin .tab:active,
.page-admin .rcal__d:active,
.page-admin .reditor__item:active { transform: none; }
}
/* --- avisos: misma gramática que el resto -----------------------
El aviso era un recuadro relleno, el único que quedaba con fondo de
color. Pasa a la misma marca fina que usa el estado del borrador,
para que el panel tenga una sola forma de decir «atención». */
.page-admin .admin__aviso,
.page-admin .acceso__note--aviso {
background: none;
border: 0;
border-left: 3px solid var(--ochre);
padding: var(--e2) 0 var(--e2) var(--e4);
margin: var(--e5) 0 0;
color: var(--ink);
}
.page-admin .admin__aviso code {
background: rgba(var(--ochre-tint), 0.1);
padding: 0.1em 0.4em;
font-size: 0.9em;
}
/* --- campos: que no se estiren más de lo que piden --------------
Un campo de «Nivel» con 400 px de ancho no se lee mejor, solo hace
que el formulario parezca un formulario de pruebas. Cada uno ocupa
lo que su contenido necesita. */
.page-admin .reditor__rejilla {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 260px));
gap: var(--e5) var(--e5);
align-items: start;
}
.page-admin .reditor__campo input[type="number"] { max-width: 140px; }
/* El resumen y la descripción sí quieren ancho, pero con medida:
una línea de texto muy larga se lee peor, también en un panel. */
.page-admin #rResumen,
.page-admin #rDescripcion,
.page-admin #rIncluye,
.page-admin .reditor__trad textarea { max-width: 70ch; }
.page-admin .reditor__campo:has(#rResumen),
.page-admin .reditor__campo:has(#rDescripcion),
.page-admin .reditor__campo:has(#rIncluye) { margin-bottom: var(--e5); }
/* --- la puerta de entrada ---------------------------------------
Es lo primero que ve el equipo cada mañana. Se compone con el mismo
criterio: sin caja, filete bajo el campo y aire alrededor. */
.page-admin .acceso__box { width: min(360px, 100%); text-align: left; }
.page-admin .acceso__crest { height: 4.2rem; margin: 0 0 var(--e6); }
.page-admin .acceso__title { font-size: 2.1rem; letter-spacing: -0.015em; }
.page-admin .acceso__note { margin: var(--e3) 0 var(--e7); font-size: 0.92rem; }
.page-admin .acceso .field span {
text-transform: none; letter-spacing: 0;
font-size: 0.8rem; font-weight: 500; margin-bottom: var(--e2);
}
.page-admin .acceso .field input {
border-bottom-width: 1px;
transition: border-color 0.18s var(--ease);
}
.page-admin .acceso .btn { width: 100%; margin-top: var(--e3); }
.page-admin .acceso__demo { margin-top: var(--e6); font-size: 0.88rem; }
/* --- aire alrededor del trabajo ---------------------------------
El contenido llegaba casi al borde de la ventana. Un margen mayor y
una medida máxima hacen que el panel se lea como una hoja, no como
una tabla pegada al cristal. */
.page-admin .admin {
max-width: 1400px;
margin: 0 auto;
padding-left: clamp(var(--e5), 4vw, 72px);
padding-right: clamp(var(--e5), 4vw, 72px);
}
/* --- la cabecera respira ---------------------------------------- */
.page-admin .admin__head {
padding-bottom: var(--e5);
border-bottom: 1px solid var(--raya);
}
.page-admin .admin__k {
font-size: var(--micro-lg);
letter-spacing: 0.2em;
color: var(--suave);
}
.page-admin .admin__title { font-size: 1.8rem; letter-spacing: -0.015em; }
/* --- pestañas: la única otra mayúscula que queda ----------------- */
.page-admin .admin__tabs {
gap: var(--e5);
border-bottom: 1px solid var(--raya);
margin-bottom: var(--e6);
}
.page-admin .tab {
padding: var(--e3) 0;
font-size: 0.72rem;
letter-spacing: 0.14em;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
/* --- entrada: los campos, con la misma forma que el resto --------
Eran de línea inferior, y al darles 44 px de alto táctil el texto se
quedaba arriba y la raya abajo, con un hueco muerto en medio que
parecía un error de maqueta. Pasan a campo con marco, como los del
editor: misma gramática en todo el portal y el problema desaparece. */
.page-admin .acceso .field { gap: 0; margin-bottom: var(--e5); }
.page-admin .acceso .field input {
background: var(--hueso);
border: 1px solid var(--raya);
border-bottom-color: var(--raya-fuerte);
padding: 0.6rem 0.7rem;
font-size: 1rem;
color: var(--ink);
}
@media (hover: hover) {
.page-admin .acceso .field input:hover { border-color: var(--raya-fuerte); }
}
.page-admin .acceso .field input:focus {
background: var(--tarjeta);
border-color: var(--ochre);
}
/* La tarjeta de acceso sí gana su caja: es una tarea única sobre una
página vacía, que es justo cuando una caja significa algo. Pero sin
marco, solo con la superficie y aire de sobra. */
.page-admin .acceso__box {
border: 0;
padding: clamp(var(--e6), 6vw, 56px);
}
/* --- el calendario, a su medida --------------------------------
Con la hoja de trabajo ancha, las celdas cuadradas se iban a 120 px
y el mes ocupaba una pantalla entera. Un calendario es un selector
de fechas, no un mural: se acota y las celdas vuelven a un tamano
comodo de pulsar sin gritar. */
.page-admin .rcal { max-width: 460px; }
.page-admin .rcal__d { min-height: 44px; font-size: 0.9rem; }
.page-admin .rcal__dias span { font-size: 0.7rem; }
.page-admin .rcal__cab { justify-content: space-between; }
.page-admin .rcal__cab strong { font-size: 1rem; font-weight: 500; }
/* La miniatura de la foto y su selector, emparejados. */
.page-admin .reditor__foto-fila { max-width: 520px; }
.page-admin .reditor__foto-m { width: 112px; height: 76px; }
/* --- el portal en un movil --------------------------------------
Cinco pestanas no caben en 381 px y desbordaban la pagina 88 px a la
derecha. Se convierten en una fila que se arrastra, con parada en
cada una, que es lo que se espera de una barra de pestanas estrecha.
Y el carril de rutas cambia su filete de la derecha por uno abajo,
porque al apilarse dejaba una raya suelta en el borde. */
@media (max-width: 900px) {
.page-admin .admin__tabs {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: var(--e5);
/* el filete inferior acompana al scroll sin cortarse */
padding-bottom: 1px;
}
.page-admin .admin__tabs::-webkit-scrollbar { display: none; }
.page-admin .tab { flex: 0 0 auto; scroll-snap-align: start; }
.page-admin .reditor__lista {
border-right: 0;
border-bottom: 1px solid var(--raya);
padding: 0 0 var(--e5);
}
.page-admin .kpi { padding: var(--e4) var(--e4) var(--e4) 0; }
.page-admin .kpi:first-child { padding-left: 0; }
.page-admin .rcal { max-width: 100%; }
}
/* Los botones del portal no se estiran a ancho igual en movil: forzarlo
partia «Publicar en la web» en dos lineas. Cada uno ocupa lo suyo. */
@media (max-width: 900px) {
.page-admin .reditor__acciones .btn { flex: 0 1 auto; }
.page-admin .reditor__acciones { gap: var(--e2); }
}
/* Lista de partes pendientes dentro del aviso del panel. */
.page-admin .admin__aviso-l { margin: var(--e2) 0 0; padding-left: var(--e4); }
.page-admin .admin__aviso-l li { margin-top: var(--e1); line-height: 1.55; }
/* =========================================================
BANDA DE VISTA PREVIA
Aparece solo en /experiencias?vista=borrador, que es la página de
verdad leyendo el borrador en vez de lo publicado. Va fija arriba
para que no haya forma de confundir una cosa con la otra.
========================================================= */
.borrador-banda {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
gap: 1rem; flex-wrap: wrap;
padding: 0.6rem 1rem;
background: #8a5624; color: #f6f2e8;
font-family: var(--sans); font-size: 0.84rem; line-height: 1.4;
text-align: center;
box-shadow: 0 1px 0 rgba(21, 23, 15, 0.18);
}
.borrador-banda strong { font-weight: 600; }
.borrador-banda a {
color: #f6f2e8; text-decoration: underline; text-underline-offset: 3px;
white-space: nowrap; padding: 0.3rem 0; min-height: 44px;
display: inline-flex; align-items: center;
}
/* La cabecera del sitio es fija: se baja para no quedar tapada. */
.con-banda-borrador .site-head { top: 46px; }
@media (max-width: 620px) {
.borrador-banda { font-size: 0.78rem; padding: 0.5rem 0.8rem; }
.con-banda-borrador .site-head { top: 62px; }
}
/* --- subir fotografías desde la ficha de la ruta --------------- */
.page-admin .reditor__foto-ctrl { flex: 1; display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.page-admin .reditor__foto-subir { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.page-admin .reditor__foto-subir label.btn { margin: 0; cursor: pointer; }
.page-admin .reditor__foto-borrar {
font-size: 0.8rem; color: #9c3b26; min-height: 44px; padding: 0 var(--e2);
}
@media (hover: hover) {
.page-admin .reditor__foto-borrar:hover { text-decoration: underline; }
}
.page-admin .reditor__foto-estado { font-size: 0.8rem; color: var(--suave); }
.page-admin .reditor__foto-estado.es-error { color: #9c3b26; }
@media (max-width: 620px) {
.page-admin .reditor__foto-fila { flex-direction: column; align-items: stretch; }
.page-admin .reditor__foto-m { width: 100%; height: 160px; }
}
/* --- traducción automática en la ficha de la ruta -------------- */
.page-admin .reditor__idioma-cab {
display: flex; align-items: center; justify-content: space-between;
gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3);
}
.page-admin .reditor__idioma-t { margin: 0; }
.page-admin .reditor__auto {
font-style: normal; font-size: 0.78rem; font-weight: 400; color: #93671e;
}
.page-admin .reditor__idioma-estado {
font-size: 0.8rem; color: var(--suave); min-height: 1.2em; margin-top: var(--e2);
}
.page-admin .reditor__idioma-estado.es-error { color: #9c3b26; }
/* =========================================================
AVISO DE PRIVACIDAD
Barra al pie, no ventana modal: no tapa la pagina, no atrapa el foco y
se puede seguir leyendo con ella puesta. Entra desplazandose desde abajo
con la curva de la casa, y se va con la corta, que al cerrar estorba.
Va en el tema noche pase lo que pase —aparece sobre secciones de papel y
de noche indistintamente—, asi que los colores son literales y no del
tema, y estan comprobados contra ese fondo.
========================================================= */
.privacidad {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
display: flex; align-items: center; justify-content: space-between;
gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
padding: clamp(1rem, 2.2vw, 1.4rem) var(--edge);
background: color-mix(in srgb, #15170f 94%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid rgba(246, 242, 232, 0.16);
color: #f6f2e8;
transform: translateY(100%);
transition: transform 0.2s var(--ease-ui);
}
.privacidad.is-on {
transform: none;
transition: transform 0.5s var(--ease);
}
.privacidad__txt {
flex: 1 1 32ch; margin: 0; max-width: 88ch;
font-size: 0.86rem; line-height: 1.6;
color: rgba(246, 242, 232, 0.78); /* 9.0:1 sobre el fondo de la barra */
}
.privacidad__enlace {
color: #cba86a; /* 8.05:1 */
text-decoration: underline; text-underline-offset: 3px;
white-space: nowrap;
}
.privacidad__acciones { display: flex; gap: 0.7rem; flex: 0 0 auto; flex-wrap: wrap; }
/* En la barra el fantasma va sobre fondo oscuro, no sobre el tema de turno. */
.privacidad .btn--ghost { border-color: rgba(246, 242, 232, 0.4); color: #f6f2e8; }
@media (max-width: 620px) {
/* Al pasar a columna, el eje principal es el vertical, y ahi `flex-basis`
deja de ser un ancho para ser un ALTO: las 32ch del texto convertian la
barra en medio movil de alto con un hueco enorme dentro. En columna el
texto no reparte espacio, solo ocupa el suyo. */
.privacidad {
flex-direction: column; align-items: stretch;
flex-wrap: nowrap; justify-content: flex-start;
gap: 0.9rem;
}
.privacidad__txt { flex: 0 0 auto; max-width: none; }
.privacidad__acciones .btn { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.privacidad, .privacidad.is-on { transition: none; }
}
/* La barra tapa el boton de subir y la de reserva mientras esta puesta. */
.privacidad ~ .arriba, .privacidad ~ .barra-reserva { display: none; }
/* =========================================================
PANEL DE PREFERENCIAS DE COOKIES
Este si es un dialogo: lo abre el visitante a proposito, asi que se
comporta como tal —velo, foco atrapado, Escape— a diferencia del aviso
del pie, que no bloquea nada.
========================================================= */
.cprefs { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 2rem); }
.cprefs__velo {
position: absolute; inset: 0;
background: rgba(10, 8, 5, 0.72);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0; transition: opacity 0.18s var(--ease-ui);
}
.cprefs.is-on .cprefs__velo { opacity: 1; transition: opacity 0.3s var(--ease); }
.cprefs__caja {
position: relative; z-index: 2;
width: min(620px, 100%); max-height: 88svh; overflow-y: auto;
padding: clamp(1.4rem, 3.5vw, 2.4rem);
background: var(--paper); color: var(--ink);
border: 1px solid rgba(42, 40, 29, 0.12);
box-shadow: 0 40px 90px -30px rgba(10, 8, 5, 0.7);
transform: translateY(18px) scale(0.99); opacity: 0;
transition: transform 0.2s var(--ease-ui), opacity 0.16s var(--ease-ui);
scrollbar-width: thin;
}
.cprefs.is-on .cprefs__caja {
transform: none; opacity: 1;
transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.legal__prefs { margin-top: 1.2rem; }
.cprefs__x {
position: absolute; top: 0.5rem; right: 0.6rem;
width: 2.75rem; height: 2.75rem; font-size: 1.4rem; line-height: 1;
color: var(--ink);
}
.cprefs__titulo {
font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em;
font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1;
margin: 0 2.5rem 0.6rem 0;
}
.cprefs__titulo:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; }
.cprefs__intro { font-size: 0.92rem; line-height: 1.65; color: rgba(42, 40, 29, 0.78); margin-bottom: 1.6rem; }
.cprefs__lista { list-style: none; display: grid; gap: 0; }
.cprefs__fila { padding: 1.1rem 0; border-top: 1px solid rgba(42, 40, 29, 0.13); }
.cprefs__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cprefs__nombre { font-size: 1rem; font-weight: 500; }
.cprefs__estado {
font-size: var(--micro); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--faint); white-space: nowrap;
}
.cprefs__desc { margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.6; color: rgba(42, 40, 29, 0.7); max-width: 62ch; }
/* Interruptor. El checkbox real sigue ahi, solo que tapado por la pista:
asi funcionan el teclado, el foco y los lectores de pantalla sin tener
que reinventar nada con roles. */
.cprefs__sw { position: relative; flex: none; width: 3rem; height: 1.6rem; cursor: pointer; }
.cprefs__sw input {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: pointer;
}
.cprefs__pista {
position: absolute; inset: 0; border-radius: 100px;
background: rgba(42, 40, 29, 0.16);
transition: background var(--t-ui) var(--ease-ui);
}
.cprefs__pista::after {
content: ''; position: absolute; top: 0.2rem; left: 0.2rem;
width: 1.2rem; height: 1.2rem; border-radius: 50%;
background: var(--paper);
box-shadow: 0 1px 3px rgba(10, 8, 5, 0.35);
transition: transform var(--t-ui) var(--ease-ui);
}
.cprefs__sw input:checked + .cprefs__pista { background: var(--ochre); }
.cprefs__sw input:checked + .cprefs__pista::after { transform: translateX(1.4rem); }
.cprefs__sw input:focus-visible + .cprefs__pista { outline: 2px solid var(--ochre); outline-offset: 3px; }
.cprefs__pie {
display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end;
margin-top: 1.8rem; padding-top: 1.4rem;
border-top: 1px solid rgba(42, 40, 29, 0.13);
}
/* El fantasma del panel va sobre papel, no sobre el tema de turno. */
.cprefs .btn--ghost { border-color: rgba(42, 40, 29, 0.42); color: var(--ink); }
@media (max-width: 560px) {
.cprefs__pie { justify-content: stretch; }
.cprefs__pie .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.cprefs__velo, .cprefs__caja, .cprefs.is-on .cprefs__velo, .cprefs.is-on .cprefs__caja,
.cprefs__pista, .cprefs__pista::after { transition: none; }
}
/* =========================================================
MAPA SIN CONSENTIMIENTO
El hueco del mapa no se deja vacio: se explica por que no esta y se
ofrece cargarlo, que es un si explicito y vale como consentimiento.
========================================================= */
.mapa__sin {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1.2rem; text-align: center;
min-height: min(52svh, 420px);
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--line-strong);
background: rgba(var(--ochre-tint), 0.04);
}
.mapa__sin-txt {
margin: 0; max-width: 46ch;
font-size: 0.92rem; line-height: 1.65; color: var(--dim);
}
/* =========================================================
RESPUESTA AL PULSAR
Igual que en el panel, pero con la medida que pide esta escala. El
portal usa `translateY(1px)` porque sus controles son pequeños y
densos; aquí los botones son pastillas grandes y una cesión de
escala se lee mejor que un desplazamiento de un píxel.
La vuelta va en `--t-press` y no en `--t-ui`: al soltar, el control
tiene que estar ya en su sitio. Una vuelta larga se siente gomosa.
Va fuera de `(hover: hover)` a propósito: es en el dedo donde más
falta hace, porque no hay ningún otro aviso de que algo se ha
pulsado.
========================================================= */
.btn:not([disabled]):active,
.menu__cta:active,
.chip:active,
.cal__arrow:not(:disabled):active,
.day:not(.day--empty):not([disabled]):active,
.stepper__btn:not([disabled]):active,
.contacto__b:active,
.fam__link:active,
.tabla__ver:active,
.linkish:active {
transform: scale(0.97);
transition-duration: var(--t-press);
}
/* Los que no llevaban `transform` en su lista de transiciones no podrían
volver con suavidad: se les añade. */
.menu__cta, .chip, .cal__arrow, .day, .stepper__btn,
.contacto__b, .fam__link, .tabla__ver, .linkish {
transition-property: background, color, border-color, opacity, transform;
transition-duration: var(--t-ui);
transition-timing-function: var(--ease-ui);
}
@media (prefers-reduced-motion: reduce) {
.btn:not([disabled]):active,
.menu__cta:active, .chip:active, .cal__arrow:not(:disabled):active,
.day:not(.day--empty):not([disabled]):active,
.stepper__btn:not([disabled]):active, .contacto__b:active,
.fam__link:active, .tabla__ver:active, .linkish:active { transform: none; }
}