/* Berratolá: sistema visual portado desde src/app/globals.css.
No editar a mano: se regenera desde el proyecto Next.js. */
/* ═══════════════════════════════════════════════════════════════
Tipografías autoalojadas (el diseño activo lo exige: nunca un
a Google Fonts, por rendimiento y por RGPD).
Variables de peso, subconjuntos latin y latin-ext.
═══════════════════════════════════════════════════════════════ */
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("fonts/bricolage-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Literata";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url("fonts/literata-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Literata";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url("fonts/literata-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Literata";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url("fonts/literata-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Literata";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url("fonts/literata-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* En Next.js estas dos las inyectaba next/font como variables del . */
:root {
--font-sign: "Bricolage Grotesque";
--font-read: "Literata";
}
/* ═══════════════════════════════════════════════════════════════
Neutralización del tema padre y de wp-block-library.
Va en :where() a propósito: especificidad 0, así cualquier regla
de componente gana sin necesidad de !important.
═══════════════════════════════════════════════════════════════ */
:where(figure),
:where(blockquote),
:where(dl),
:where(dd),
:where(fieldset) {
margin: 0;
padding: 0;
border: 0;
}
:where(ul),
:where(ol) {
margin: 0;
padding: 0;
}
:where(.wp-block-group),
:where(.wp-block-image),
:where(.entry-content) {
margin: 0;
padding: 0;
max-width: none;
}
/* La barra de administración de WordPress no debe empujar el header fijo. */
body.admin-bar .site-header {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar .site-header {
top: 46px;
}
}
/* Única utilidad de Tailwind que quedaba en el marcado. */
.object-cover {
object-fit: cover;
}
.object-contain {
object-fit: contain;
}
/* Las imágenes que en Next.js usaban aquí son ![]()
planas. */
.photo-frame__img-wrap > img,
.route__photo > img,
.gallery__item > img,
.intro__media > img,
.page-hero__figure > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ═══════════════════════════════════════════════════════════════
BERRATOLÁ : sistema visual
Referencia: rótulo esmaltado gallego + flecha amarilla del Camino
+ brasa de carbón. Verde pino saturado como color comprometido,
un único acento: el amarillo pintado a mano de las señales.
═══════════════════════════════════════════════════════════════ */
:root {
/* Verde esmalte : el color de marca, sostiene ~45% de la superficie */
--color-pine: #0e2b21;
--color-pine-deep: #081c15;
--color-pine-mid: #16392c;
--color-pine-line: #2a5744;
--color-pine-glow: #1d4835;
/* Superficie clara: blanco roto teñido hacia el verde de marca, nunca crema */
--color-bone: #f2f5f1;
--color-bone-deep: #e5ebe4;
--color-bone-line: #cdd6cb;
/* Tinta */
--color-ink: #0c1712;
--color-ink-soft: #22332b;
--color-ink-muted: #3c4f45;
/* Único acento: amarillo de flecha del Camino */
--color-arrow: #f4b301;
--color-arrow-warm: #ffc733;
--color-arrow-deep: #a87703;
/* Neutro de brasa : solo para velos sobre fotografía */
--color-char: #16110e;
--font-display: var(--font-sign), "Helvetica Neue", Arial, sans-serif;
--font-body: var(--font-read), Georgia, "Times New Roman", serif;
--radius-mark: 3px;
--radius-control: 5px;
--radius-media: 10px;
--radius-panel: 14px;
--line-hair: 1px;
--spacing-section: clamp(3.5rem, 7vw, 6.5rem);
--spacing-gutter: clamp(1.25rem, 4vw, 2.5rem);
--shadow-lift: 0 6px 18px -8px rgb(8 28 21 / 0.28);
--shadow-panel: 0 18px 44px -26px rgb(8 28 21 / 0.45);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
/* Escala z semántica */
--z-base: 1;
--z-raised: 10;
--z-sticky: 100;
--z-drawer: 200;
--z-overlay: 300;
--z-skip: 400;
}
/* ───────────────────────────── Base ───────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 5.5rem;
}
body {
margin: 0;
background: var(--color-bone);
color: var(--color-ink);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.06;
text-wrap: balance;
margin: 0;
}
p {
text-wrap: pretty;
}
a {
color: inherit;
text-decoration-thickness: from-font;
text-underline-offset: 0.18em;
}
img,
svg {
display: block;
max-width: 100%;
}
button {
font: inherit;
color: inherit;
}
address {
font-style: normal;
}
:focus-visible {
outline: 3px solid var(--color-arrow);
outline-offset: 2px;
border-radius: var(--radius-mark);
}
::selection {
background: var(--color-arrow);
color: var(--color-pine-deep);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ────────────────────────── Componentes ───────────────────────── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: 0;
left: 0;
z-index: var(--z-skip);
transform: translateY(-120%);
padding: 0.875rem 1.25rem;
background: var(--color-arrow);
color: var(--color-pine-deep);
font-family: var(--font-display);
font-weight: 600;
text-decoration: none;
transition: transform 220ms var(--ease-out-expo);
}
.skip-link:focus {
transform: translateY(0);
}
.container {
width: 100%;
max-width: 76rem;
margin-inline: auto;
padding-inline: var(--spacing-gutter);
}
.section {
padding-block: var(--spacing-section);
}
/* Alternancia deliberada de fondos: el verde es marca, no accidente */
.section--pine {
background: var(--color-pine);
color: var(--color-bone);
background-image: radial-gradient(
120% 90% at 15% 0%,
var(--color-pine-glow) 0%,
transparent 62%
);
}
.section--pine h1,
.section--pine h2,
.section--pine h3 {
color: var(--color-bone);
}
.section--bone-deep {
background: var(--color-bone-deep);
}
/* Texto claro sobre oscuro necesita más aire */
.section--pine p,
.site-footer p {
line-height: 1.72;
}
/* ── Tipografía de sección ── */
.section-title {
font-size: clamp(1.9rem, 4.4vw, 3.1rem);
}
.section-title--wide {
max-width: 26ch;
}
.section-subtitle {
max-width: 60ch;
margin: 0.875rem 0 0;
color: var(--color-ink-muted);
font-size: 1.0625rem;
}
.section--pine .section-subtitle {
color: rgb(242 245 241 / 0.76);
}
/* Etiqueta de contexto: subrayado pintado, no versalitas rastreadas */
.tag {
display: inline-block;
margin-bottom: 1.125rem;
padding-bottom: 0.2rem;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--color-ink-soft);
background-image: linear-gradient(var(--color-arrow), var(--color-arrow));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0.375em;
}
.section--pine .tag,
.page-hero .tag {
color: var(--color-bone);
background-image: linear-gradient(var(--color-arrow), var(--color-arrow));
background-size: 100% 0.3em;
}
/* ── La flecha: elemento de orientación ── */
.waymark {
width: 1.85rem;
height: auto;
flex-shrink: 0;
color: var(--color-arrow);
}
.waymark--down {
transform: rotate(90deg);
}
/* ── Botones ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.875rem;
padding: 0.75rem 1.375rem;
border: none;
border-radius: var(--radius-control);
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.005em;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color 200ms var(--ease-out-quart),
color 200ms var(--ease-out-quart),
transform 180ms var(--ease-out-expo),
box-shadow 200ms var(--ease-out-quart);
}
.btn:active {
transform: translateY(1px) scale(0.985);
}
.btn-primary {
background: var(--color-arrow);
color: var(--color-pine-deep);
}
.btn-primary:hover {
background: var(--color-arrow-warm);
box-shadow: var(--shadow-lift);
}
.btn-secondary {
background: var(--color-pine);
color: var(--color-bone);
}
.btn-secondary:hover {
background: var(--color-pine-mid);
box-shadow: var(--shadow-lift);
}
.btn-outline {
background: transparent;
color: var(--color-ink);
box-shadow: inset 0 0 0 2px var(--color-ink);
}
.btn-outline:hover {
background: var(--color-ink);
color: var(--color-bone);
}
/* Contextos de fondo verde: el contorno oscuro sería invisible */
.section--pine .btn-outline,
.site-footer .btn-outline,
.hero .btn-outline,
.page-hero .btn-outline,
.camino-hero .btn-outline,
.conversion-strip .btn-outline,
.final-cta__band .btn-outline,
.camino__aside .btn-outline,
.mobile-nav__panel .btn-outline,
.location__map-placeholder .btn-outline {
color: var(--color-bone);
box-shadow: inset 0 0 0 2px rgb(242 245 241 / 0.45);
}
.section--pine .btn-outline:hover,
.site-footer .btn-outline:hover,
.hero .btn-outline:hover,
.page-hero .btn-outline:hover,
.camino-hero .btn-outline:hover,
.conversion-strip .btn-outline:hover,
.final-cta__band .btn-outline:hover,
.camino__aside .btn-outline:hover,
.mobile-nav__panel .btn-outline:hover,
.location__map-placeholder .btn-outline:hover {
background: var(--color-bone);
color: var(--color-pine-deep);
}
.btn-ghost {
background: transparent;
color: var(--color-ink);
padding-inline: 0.75rem;
}
.btn-ghost:hover {
background: var(--color-bone-deep);
}
.hero .btn-ghost,
.page-hero .btn-ghost,
.camino-hero .btn-ghost,
.section--pine .btn-ghost {
color: var(--color-bone);
}
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover,
.camino-hero .btn-ghost:hover,
.section--pine .btn-ghost:hover {
background: rgb(242 245 241 / 0.12);
}
.text-link {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-ink);
text-decoration: none;
background-image: linear-gradient(var(--color-arrow), var(--color-arrow));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 2px;
transition: background-size 220ms var(--ease-out-quart);
}
.text-link:hover {
background-size: 100% 0.5em;
}
/* ── Cabecera ── */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--color-pine);
color: var(--color-bone);
transition: box-shadow 260ms var(--ease-out-quart);
}
.site-header--scrolled {
box-shadow: 0 1px 0 0 var(--color-pine-line), var(--shadow-panel);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: 4.5rem;
}
.site-header__logo {
display: flex;
flex-direction: column;
text-decoration: none;
line-height: 1;
}
.site-header__logo-text {
font-family: var(--font-display);
font-size: 1.4375rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-bone);
}
.site-header__logo-sub {
margin-top: 0.3rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-arrow);
}
.site-header__nav {
display: none;
align-items: center;
gap: 0.25rem;
}
.site-header__link {
position: relative;
padding: 0.5rem 0.6875rem;
border-radius: var(--radius-mark);
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 500;
color: rgb(242 245 241 / 0.82);
text-decoration: none;
transition: color 180ms var(--ease-out-quart);
}
.site-header__link::after {
content: "";
position: absolute;
left: 0.6875rem;
right: 0.6875rem;
bottom: 0.25rem;
height: 3px;
background: var(--color-arrow);
transform: scaleX(0);
transform-origin: left;
transition: transform 240ms var(--ease-out-expo);
}
.site-header__link:hover {
color: var(--color-bone);
}
.site-header__link:hover::after {
transform: scaleX(1);
}
.site-header__link--active {
color: var(--color-bone);
font-weight: 600;
}
.site-header__link--active::after {
transform: scaleX(1);
}
.site-header__actions {
display: flex;
align-items: center;
gap: 0.625rem;
}
.site-header__lang {
display: none;
}
.site-header__cta {
display: none;
}
.site-header__menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
background: transparent;
border: none;
border-radius: var(--radius-control);
color: var(--color-bone);
font-size: 1.125rem;
cursor: pointer;
transition: background-color 180ms var(--ease-out-quart);
}
.site-header__menu-btn:hover {
background: rgb(242 245 241 / 0.12);
}
@media (min-width: 62rem) {
.site-header__nav,
.site-header__lang {
display: flex;
}
.site-header__cta {
display: inline-flex;
}
.site-header__menu-btn {
display: none;
}
}
/* ── Navegación móvil ── */
.mobile-nav {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
pointer-events: none;
visibility: hidden;
}
.mobile-nav--open {
pointer-events: auto;
visibility: visible;
}
.mobile-nav__backdrop {
position: absolute;
inset: 0;
z-index: var(--z-base);
background: rgb(8 28 21 / 0.62);
border: none;
cursor: pointer;
animation: fade-in 240ms var(--ease-out-quart);
}
.mobile-nav__panel {
position: absolute;
top: 0;
right: 0;
z-index: var(--z-raised);
display: flex;
flex-direction: column;
gap: 1.25rem;
width: min(21rem, 88vw);
height: 100%;
/* El relleno inferior libera la barra de acciones fija */
padding: 1.25rem var(--spacing-gutter)
calc(5rem + env(safe-area-inset-bottom));
background: var(--color-pine);
color: var(--color-bone);
overflow-y: auto;
transform: translateX(102%);
transition: transform 340ms var(--ease-out-expo);
}
.mobile-nav--open .mobile-nav__panel {
transform: translateX(0);
}
.mobile-nav__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.mobile-nav__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
background: transparent;
border: none;
border-radius: var(--radius-control);
color: var(--color-bone);
font-size: 1.125rem;
cursor: pointer;
transition: background-color 180ms var(--ease-out-quart);
}
.mobile-nav__close:hover {
background: rgb(242 245 241 / 0.12);
}
.mobile-nav__list {
display: flex;
flex-direction: column;
gap: 0.125rem;
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav__link {
display: block;
padding: 0.8125rem 0;
border-bottom: var(--line-hair) solid var(--color-pine-line);
font-family: var(--font-display);
font-size: 1.3125rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--color-bone);
text-decoration: none;
transition: color 180ms var(--ease-out-quart);
}
.mobile-nav__link:hover {
color: var(--color-arrow);
}
.mobile-nav__link--active {
color: var(--color-arrow);
}
.mobile-nav__cta {
margin-top: auto;
}
@media (min-width: 62rem) {
.mobile-nav {
display: none;
}
}
/* ── Barra de acción móvil ── */
.mobile-action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-sticky);
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 0.375rem;
padding: 0.5rem var(--spacing-gutter);
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
background: var(--color-pine);
border-top: var(--line-hair) solid var(--color-pine-line);
}
.mobile-action-bar .btn {
min-height: 2.75rem;
padding-inline: 0.5rem;
font-size: 0.875rem;
}
.mobile-action-bar__secondary {
color: var(--color-bone);
}
.mobile-action-bar__secondary:hover {
background: rgb(242 245 241 / 0.12);
}
@media (min-width: 62rem) {
.mobile-action-bar {
display: none;
}
}
body:has(.mobile-action-bar) {
padding-bottom: 4.25rem;
}
@media (min-width: 62rem) {
body:has(.mobile-action-bar) {
padding-bottom: 0;
}
}
/* ── Hero: verde saturado, composición asimétrica, foto decisiva ── */
.hero {
position: relative;
padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
background: var(--color-pine);
color: var(--color-bone);
background-image: radial-gradient(
100% 80% at 82% 8%,
var(--color-pine-glow) 0%,
transparent 60%
);
overflow: hidden;
}
.hero__layout {
display: grid;
gap: clamp(2rem, 5vw, 3.25rem);
}
/* Flujo vertical: el reset va antes del espaciado para que no lo anule */
.hero__copy > * {
margin: 0;
}
.hero__copy > * + * {
margin-top: 1.375rem;
}
.hero__title {
font-size: clamp(2.75rem, 9vw, 5.25rem);
font-weight: 800;
letter-spacing: -0.032em;
max-width: 17ch;
}
.hero__lead {
max-width: 46ch;
font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
color: rgb(242 245 241 / 0.82);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
/* La flecha señala hacia la acción, como sobre el granito */
.hero__pointer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.75rem;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 500;
color: rgb(242 245 241 / 0.6);
}
/* Tres datos exactos: una columna en móvil y tres arriba,
nunca dos, para no dejar una celda vacía en la rejilla */
.hero__facts {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
margin: 2.25rem 0 0;
background: var(--color-pine-line);
border: var(--line-hair) solid var(--color-pine-line);
border-radius: var(--radius-media);
overflow: hidden;
}
.hero__facts > div {
padding: 0.9375rem 1.0625rem;
background: var(--color-pine);
}
.hero__facts dt {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-arrow);
}
.hero__facts dd {
margin: 0.3rem 0 0;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--color-bone);
}
@media (min-width: 30rem) {
.hero__facts {
grid-template-columns: repeat(3, 1fr);
}
}
.hero__figure {
position: relative;
margin: 0;
}
@media (min-width: 56rem) {
.hero__layout {
grid-template-columns: 1.05fr 0.95fr;
align-items: stretch;
}
/* Rompe la simetría: la foto sangra hasta el borde del viewport
y ocupa todo el alto de la fila, sin dejar hueco bajo ella */
.hero__figure {
margin-right: calc(
(var(--spacing-gutter) + max(0px, (100vw - 76rem) / 2)) * -1
);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.hero__figure .photo-frame__img-wrap {
aspect-ratio: auto;
height: 100%;
min-height: 27rem;
}
}
/* ── Marco fotográfico ── */
.photo-frame {
position: relative;
margin: 0;
border-radius: var(--radius-media);
overflow: hidden;
background: var(--color-pine-mid);
box-shadow: var(--shadow-panel);
}
.photo-frame__img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.photo-frame__img-wrap--wide {
aspect-ratio: 5 / 4;
}
.photo-frame__img-wrap--tall {
aspect-ratio: 3 / 4;
}
.photo-frame img {
transition: transform 620ms var(--ease-out-expo);
}
.photo-frame__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2.5rem 1rem 0.875rem;
background: linear-gradient(transparent, rgb(22 17 14 / 0.86));
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--color-bone);
}
.object-cover {
object-fit: cover;
}
/* ── Distintivo Camino ── */
.camino-badge {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
padding: 0.375rem 0.6875rem;
border-radius: 999px;
background: var(--color-arrow);
color: var(--color-pine-deep);
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
}
.camino-badge--link {
transition:
background-color 200ms var(--ease-out-quart),
transform 200ms var(--ease-out-expo);
}
.camino-badge--link:hover {
background: var(--color-arrow-warm);
transform: translateY(-1px);
}
/* ── Introducción / historia ── */
.intro__layout {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
}
.intro__content > * {
margin: 0;
}
.intro__content > * + * {
margin-top: 1.125rem;
}
.intro__content > .section-title {
margin-top: 0.5rem;
}
.intro__text {
max-width: 64ch;
color: var(--color-ink-muted);
}
.intro__pull {
max-width: 34ch;
margin: 2rem 0 0;
padding-left: 1.25rem;
border-left: 3px solid var(--color-arrow);
font-family: var(--font-display);
font-size: clamp(1.25rem, 2.8vw, 1.625rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.24;
color: var(--color-ink);
}
.section--pine .intro__text {
color: rgb(242 245 241 / 0.82);
}
.section--pine .intro__pull {
color: var(--color-bone);
}
.intro__cta-row {
margin-top: 1.875rem;
}
.intro__stack {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.875rem;
align-items: start;
align-content: start;
}
@media (min-width: 56rem) {
.intro__layout {
grid-template-columns: 1fr 0.8fr;
align-items: center;
}
/* Desfase óptico: las dos fotos no se alinean, dan profundidad */
.intro__stack-item--offset:first-of-type {
margin-top: 2.75rem;
}
}
/* ── Poste indicador: sustituye la rejilla de tarjetas iguales ── */
.signpost {
margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
padding: 0;
list-style: none;
border-top: var(--line-hair) solid var(--color-bone-line);
}
.signpost__row {
border-bottom: var(--line-hair) solid var(--color-bone-line);
}
.signpost__link {
display: block;
padding: clamp(1rem, 2.4vw, 1.5rem) 0;
text-decoration: none;
transition:
background-color 260ms var(--ease-out-quart),
padding-inline 300ms var(--ease-out-expo);
}
.signpost__link:hover {
background: var(--color-arrow);
padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
/* Destino y flecha juntos, como en un mojón del Camino */
.signpost__title {
display: flex;
align-items: center;
gap: 0.875rem;
font-size: clamp(1.5rem, 4vw, 2.125rem);
color: var(--color-ink);
}
.signpost__mark {
display: flex;
transition: transform 320ms var(--ease-out-expo);
}
.signpost__link:hover .signpost__mark {
transform: translateX(0.5rem);
}
.signpost__link:hover .waymark {
color: var(--color-pine-deep);
}
.signpost__text {
max-width: 56ch;
margin: 0.3125rem 0 0;
color: var(--color-ink-muted);
font-size: 0.9375rem;
}
.signpost__link:hover .signpost__text {
color: var(--color-pine-deep);
}
.home-teasers__contact {
margin: 2rem 0 0;
}
/* ── Galería ── */
.gallery__head {
display: grid;
gap: 0.875rem;
max-width: 76rem;
margin-inline: auto;
padding-inline: var(--spacing-gutter);
}
@media (min-width: 56rem) {
.gallery__head {
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 2rem;
}
}
/* Tira a sangre: rompe la rejilla, pero la primera foto se alinea
con el título en lugar de quedar cortada por el borde */
.gallery__strip {
--strip-inset: calc(var(--spacing-gutter) + max(0px, (100vw - 76rem) / 2));
display: grid;
grid-auto-flow: column;
grid-auto-columns: 15rem;
gap: 0.875rem;
margin-top: 2rem;
padding-inline: var(--strip-inset) var(--spacing-gutter);
padding-bottom: 0.5rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
/* Sin esto el snap arrastra el scroll y corta la primera foto */
scroll-padding-inline-start: var(--strip-inset);
scrollbar-width: thin;
}
.gallery__strip-item {
margin: 0;
scroll-snap-align: start;
}
.gallery__strip-item--wide {
grid-column: span 1;
}
.gallery__strip-item:hover img {
transform: scale(1.045);
}
.gallery__strip-caption {
display: none;
}
.gallery__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
max-width: 76rem;
margin: 2rem auto 0;
padding-inline: var(--spacing-gutter);
}
.gallery__foot-text {
margin: 0;
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 500;
}
@media (min-width: 56rem) {
.gallery__strip {
grid-auto-columns: 18rem;
}
}
/* ── Cómo funciona: secuencia real, la flecha se gana su sitio ── */
.how-it-works__layout {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
}
/* Cuando el título lo aporta la cabecera de página no hay dos columnas
que llenar: los pasos ocupan el ancho y se limitan con max-width */
.how-it-works__layout--embedded > * {
max-width: 46rem;
}
@media (min-width: 56rem) {
.how-it-works__layout:not(.how-it-works__layout--embedded) {
grid-template-columns: 0.8fr 1.2fr;
}
}
.how-it-works__steps {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.how-it-works__step {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: 1rem;
padding: 1.125rem 0;
border-bottom: var(--line-hair) solid var(--color-bone-line);
counter-increment: step;
}
.how-it-works__step:first-child {
border-top: var(--line-hair) solid var(--color-bone-line);
}
.how-it-works__number {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
color: var(--color-arrow-deep);
}
.how-it-works__number::before {
content: counter(step, decimal-leading-zero);
}
.how-it-works__label {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
line-height: 1.35;
color: var(--color-ink);
}
.how-it-works__notes {
display: grid;
gap: 0.5rem;
margin: 1.75rem 0 0;
padding: 0;
list-style: none;
}
.how-it-works__notes li {
position: relative;
padding-left: 1.375rem;
color: var(--color-ink-muted);
font-size: 0.9375rem;
}
.how-it-works__notes li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 0.5rem;
height: 0.5rem;
background: var(--color-arrow);
border-radius: var(--radius-mark);
}
.how-it-works__footer {
margin-top: 1.875rem;
}
/* ── Camino ── */
.camino__layout,
.camino-tips__inner {
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 56rem) {
.camino__layout {
grid-template-columns: 1.15fr 0.85fr;
}
}
.camino__text {
max-width: 56ch;
margin: 1rem 0 0;
}
.camino__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
.camino__aside {
padding: 1.5rem;
background: var(--color-pine);
color: var(--color-bone);
border-radius: var(--radius-panel);
}
.camino__aside-label {
display: block;
margin-bottom: 0.625rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-arrow);
}
.camino__aside-distance {
margin: 0.75rem 0 0;
font-family: var(--font-display);
font-weight: 600;
}
.camino-tips__list {
display: grid;
gap: 1.125rem;
margin: 1.75rem 0 0;
padding: 0;
list-style: none;
counter-reset: tip;
}
.camino-tips__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.875rem;
align-items: start;
max-width: 62ch;
counter-increment: tip;
}
.camino-tips__marker {
width: 1.375rem;
height: 1.375rem;
margin-top: 0.2rem;
display: grid;
place-items: center;
background: var(--color-arrow);
border-radius: 50%;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
color: var(--color-pine-deep);
}
.camino-tips__marker::before {
content: counter(tip);
}
.camino-tips__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.875rem;
}
/* ── Itinerario del Camino ── */
.route__head {
max-width: 64ch;
}
.route__stages {
display: grid;
gap: clamp(2.5rem, 5vw, 4rem);
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.route__stage-head {
padding-bottom: 0.875rem;
border-bottom: 1px solid var(--color-bone-line);
}
.route__place {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
letter-spacing: -0.015em;
line-height: 1.2;
}
.route__note {
max-width: 58ch;
margin: 0.4375rem 0 0;
color: var(--color-ink-muted);
font-size: 0.9375rem;
}
.route__list {
position: relative;
display: grid;
gap: clamp(1.75rem, 3.5vw, 2.5rem);
margin: 0;
padding: 1.75rem 0 0;
list-style: none;
}
/* La línea es la ruta; los números son los mojones */
.route__list::before {
content: "";
position: absolute;
top: 1.75rem;
bottom: 0.75rem;
left: 0.9375rem;
width: 1px;
background: linear-gradient(
var(--color-bone-line) 70%,
transparent
);
}
.route__stop {
display: grid;
grid-template-columns: 1.875rem minmax(0, 1fr);
gap: 0 1.125rem;
align-items: start;
}
.route__num {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 1.875rem;
height: 1.875rem;
border-radius: var(--radius-mark);
background: var(--color-pine);
color: var(--color-arrow);
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.route__name {
margin: 0;
font-family: var(--font-display);
font-size: 1.1875rem;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.3;
}
.route__text {
max-width: 58ch;
margin: 0.5rem 0 0;
color: var(--color-ink-soft);
}
.route__photo {
position: relative;
display: block;
grid-column: 2;
margin: 1.125rem 0 0;
aspect-ratio: 4 / 3;
border-radius: var(--radius-media);
overflow: hidden;
background: var(--color-pine-mid);
box-shadow: var(--shadow-lift);
}
.route__photo--portrait {
aspect-ratio: 4 / 5;
}
@media (min-width: 48rem) {
.route__stop--illustrated {
grid-template-columns: 1.875rem minmax(0, 1fr) 19rem;
}
.route__photo {
grid-column: 3;
grid-row: 1;
margin: 0.1875rem 0 0;
aspect-ratio: 3 / 2;
}
/* Torres, cruceiros y campanarios no caben en horizontal */
.route__photo--portrait {
aspect-ratio: 4 / 5;
}
}
/* Berratolá: la única parada donde se puede comer algo */
.route__stop--here .route__body {
padding: clamp(1.125rem, 2.5vw, 1.625rem);
margin-top: -0.25rem;
border-radius: var(--radius-panel);
background: var(--color-pine);
color: var(--color-bone);
box-shadow: var(--shadow-panel);
}
.route__stop--here .route__num {
background: var(--color-arrow);
color: var(--color-pine-deep);
}
.route__stop--here .route__text {
color: rgb(242 245 241 / 0.82);
}
.route__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0.5rem 0 0;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-arrow);
}
.route__badge .waymark {
width: 1.5rem;
}
.route__actions {
margin-top: 1.25rem;
}
.route__credits {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding-top: 1.5rem;
border-top: 1px solid var(--color-bone-line);
}
.route__credits-title {
margin: 0;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
}
.route__credits-text {
max-width: 62ch;
margin: 0.375rem 0 0;
color: var(--color-ink-muted);
font-size: 0.875rem;
}
.route__credits-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
gap: 0.3125rem 1.5rem;
margin: 0.875rem 0 0;
padding: 0;
list-style: none;
color: var(--color-ink-muted);
font-size: 0.8125rem;
}
.route__credits-list a {
color: inherit;
text-decoration-color: var(--color-bone-line);
}
.route__credits-list a:hover {
color: var(--color-ink);
}
.route__name a {
text-decoration: none;
}
.route__name a:hover {
text-decoration: underline;
text-underline-offset: 0.18em;
}
.route__more {
margin: 0.75rem 0 0;
}
.route__more a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
color: var(--color-pine);
}
.route__more a:hover {
color: var(--color-pine-mid);
}
.route__more .waymark {
width: 1.15rem;
}
.route__stop--here .route__more a {
color: var(--color-arrow);
}
.route__stage-head {
display: grid;
gap: 1.25rem;
align-items: end;
}
.route__stage-photo {
position: relative;
margin: 0;
aspect-ratio: 16 / 9;
border-radius: var(--radius-media);
overflow: hidden;
background: var(--color-pine-mid);
}
@media (min-width: 52rem) {
.route__stage-head {
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
gap: 1.75rem;
}
.route__stage-photo {
aspect-ratio: 4 / 3;
}
}
/* ── Índice visual de paradas ── */
.route-index {
padding-bottom: 0;
}
.route-index__head {
max-width: 64ch;
}
.route-index__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 40rem) {
.route-index__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.route-index__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
}
.route-index__card {
display: grid;
grid-template-rows: auto auto 1fr auto;
min-height: 8.5rem;
padding: 0.85rem 0.9rem 0.95rem;
border-radius: var(--radius-media);
background: var(--color-bone-deep);
color: inherit;
text-decoration: none;
transition:
transform 220ms var(--ease-out-expo),
background-color 200ms var(--ease-out-quart);
}
.route-index__card--photo {
min-height: 13.5rem;
padding: 0;
overflow: hidden;
color: var(--color-bone);
}
.route-index__media {
position: relative;
grid-row: 1 / -1;
grid-column: 1;
min-height: 13.5rem;
}
.route-index__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgb(8 28 21 / 0.08) 20%,
rgb(8 28 21 / 0.72) 100%
);
}
.route-index__card--photo .route-index__num,
.route-index__card--photo .route-index__name,
.route-index__card--photo .route-index__place {
position: relative;
z-index: 1;
grid-column: 1;
padding-inline: 0.9rem;
}
.route-index__card--photo .route-index__num {
grid-row: 1;
padding-top: 0.85rem;
color: var(--color-arrow);
}
.route-index__card--photo .route-index__name {
grid-row: 3;
align-self: end;
}
.route-index__card--photo .route-index__place {
grid-row: 4;
padding-bottom: 0.85rem;
color: rgb(242 245 241 / 0.72);
}
.route-index__card:hover {
transform: translateY(-2px);
background: var(--color-bone-line);
}
.route-index__card--photo:hover {
background: transparent;
}
.route-index__card--here {
background: var(--color-pine);
color: var(--color-bone);
}
.route-index__card--here:hover {
background: var(--color-pine-mid);
}
.route-index__num {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-arrow-deep);
}
.route-index__card--here .route-index__num {
color: var(--color-arrow);
}
.route-index__name {
margin-top: 0.35rem;
font-family: var(--font-display);
font-size: 0.98rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.25;
text-wrap: balance;
}
.route-index__place {
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--color-ink-muted);
}
.route-index__stages {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-top: 1.5rem;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
}
.route-index__stages a {
text-decoration: none;
color: var(--color-pine);
}
.route-index__stages a:hover {
text-decoration: underline;
}
/* ── Hero fotográfico del Camino ── */
.camino-hero {
position: relative;
isolation: isolate;
min-height: min(78dvh, 42rem);
display: grid;
align-items: end;
color: var(--color-bone);
background: var(--color-pine-deep);
}
.camino-hero > img {
z-index: 0;
}
.camino-hero__veil {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
180deg,
rgb(8 28 21 / 0.18) 0%,
rgb(8 28 21 / 0.55) 48%,
rgb(8 28 21 / 0.88) 100%
);
}
.camino-hero__copy {
position: relative;
z-index: 2;
padding-block: clamp(5.5rem, 12vw, 8rem) clamp(2.25rem, 5vw, 3.5rem);
}
.camino-hero__copy > * + * {
margin-top: 1.05rem;
}
.camino-hero__title {
max-width: 16ch;
font-size: clamp(2.25rem, 7vw, 4.25rem);
color: var(--color-bone);
letter-spacing: -0.03em;
}
.camino-hero__lead {
max-width: 46ch;
font-size: clamp(1.0625rem, 2vw, 1.25rem);
color: rgb(242 245 241 / 0.88);
}
.camino-hero__context {
max-width: 54ch;
font-size: 0.9375rem;
color: rgb(242 245 241 / 0.68);
}
.camino-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
/* ── Ficha de parada ── */
.poi__hero {
position: relative;
min-height: min(62dvh, 34rem);
background: var(--color-pine-deep);
}
.poi__hero--portrait {
min-height: min(72dvh, 40rem);
}
.poi__hero--plain {
display: grid;
place-items: center;
min-height: 16rem;
background:
radial-gradient(80% 70% at 20% 0%, var(--color-pine-glow), transparent 58%),
var(--color-pine);
}
.poi__hero--plain .waymark {
width: 4.5rem;
}
.poi__hero--here {
background: var(--color-pine);
}
.poi__hero-credit {
position: absolute;
right: var(--spacing-gutter);
bottom: 0.75rem;
z-index: 1;
margin: 0;
font-size: 0.6875rem;
color: rgb(242 245 241 / 0.7);
}
.poi__body {
padding-block: clamp(2rem, 4vw, 3.25rem) var(--spacing-section);
}
.poi__kicker {
margin: 0;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-ink-muted);
}
.poi__kicker a {
color: var(--color-pine);
text-decoration: none;
}
.poi__kicker a:hover {
text-decoration: underline;
}
.poi__title {
margin: 0.65rem 0 0;
max-width: 18ch;
font-size: clamp(2rem, 5.5vw, 3.35rem);
}
.poi__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0.85rem 0 0;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-arrow-deep);
}
.poi__layout {
display: grid;
gap: clamp(2rem, 4vw, 3.25rem);
margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 56rem) {
.poi__layout {
grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.7fr);
align-items: start;
}
}
.poi__text,
.poi__note {
max-width: 62ch;
color: var(--color-ink-soft);
}
.poi__note {
margin: 1.15rem 0 0;
}
.poi__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.poi__aside {
padding: 1.25rem 1.35rem 1.4rem;
border-radius: var(--radius-panel);
background: var(--color-bone-deep);
}
.poi__aside-label {
margin: 0;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-pine);
}
.poi__aside-text {
margin: 0.4rem 0 0;
font-size: 0.9375rem;
color: var(--color-ink-soft);
}
.poi__nearby {
margin-top: 1.35rem;
}
.poi__nearby ul {
margin: 0.45rem 0 0;
padding: 0;
list-style: none;
}
.poi__nearby a {
display: block;
padding: 0.28rem 0;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
}
.poi__nearby a:hover {
text-decoration: underline;
}
.poi__back {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 1.35rem;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
color: var(--color-pine);
}
.poi__back .waymark {
width: 1.2rem;
}
.poi__pager {
display: grid;
gap: 1rem;
margin-top: clamp(2.25rem, 4vw, 3rem);
padding-top: 1.5rem;
border-top: 1px solid var(--color-bone-line);
}
@media (min-width: 40rem) {
.poi__pager {
grid-template-columns: 1fr 1fr;
}
}
.poi__pager-link {
display: grid;
gap: 0.2rem;
text-decoration: none;
}
.poi__pager-link--next {
text-align: right;
}
.poi__pager-dir {
font-size: 0.75rem;
color: var(--color-ink-muted);
}
.poi__pager-name {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.015em;
}
/* ── Ubicación ── */
.location__layout {
display: grid;
gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 56rem) {
.location__layout {
grid-template-columns: 0.95fr 1.05fr;
align-items: start;
}
}
.location__address {
margin: 1.25rem 0 0;
font-family: var(--font-display);
font-size: 1.0625rem;
line-height: 1.5;
}
.location__address strong {
display: block;
font-size: 1.1875rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.location__data {
display: grid;
gap: 0.875rem;
margin: 1.5rem 0 0;
}
.location__data dt {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.location__data dd {
margin: 0.1875rem 0 0;
font-family: var(--font-display);
font-size: 1.0625rem;
font-variant-numeric: tabular-nums;
}
.location__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
.location__map {
border-radius: var(--radius-panel);
overflow: hidden;
background: var(--color-bone-deep);
}
.location__map-frame {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
border: 0;
}
.location__map-placeholder {
display: grid;
place-items: center;
gap: 1.125rem;
aspect-ratio: 4 / 3;
padding: 1.5rem;
text-align: center;
background: var(--color-pine);
background-image: radial-gradient(
90% 90% at 50% 30%,
var(--color-pine-glow) 0%,
transparent 62%
);
}
.location__map-placeholder p {
margin: 0;
max-width: 30ch;
color: rgb(242 245 241 / 0.78);
font-size: 0.9375rem;
}
/* ── Horarios ── */
.opening-hours {
margin-top: 1.75rem;
}
.opening-hours__title {
font-size: 1.0625rem;
}
.opening-hours__season {
margin-top: 1.125rem;
}
.opening-hours__season-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
margin: 0 0 0.4375rem;
font-size: 0.9375rem;
font-weight: 600;
}
.opening-hours__season-period {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-arrow-deep);
}
.section--pine .opening-hours__season-period,
.site-footer .opening-hours__season-period {
color: var(--color-arrow);
}
.opening-hours__list {
display: grid;
gap: 0;
margin: 0;
}
.opening-hours__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.4375rem 0;
border-bottom: var(--line-hair) dotted var(--color-bone-line);
}
.opening-hours__row dt {
font-size: 0.9375rem;
color: var(--color-ink-muted);
}
.opening-hours__row dd {
margin: 0;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.section--pine .opening-hours__row,
.site-footer .opening-hours__row {
border-bottom-color: var(--color-pine-line);
}
.section--pine .opening-hours__row dt,
.site-footer .opening-hours__row dt {
color: rgb(242 245 241 / 0.7);
}
/* ── Contacto ── */
.contact__layout {
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 56rem) {
.contact__layout {
grid-template-columns: 0.9fr 1.1fr;
}
}
.contact__notice {
max-width: 48ch;
margin: 1rem 0 0;
color: var(--color-ink-muted);
}
.contact__list {
display: grid;
gap: 0;
margin: 0;
}
.contact__list > div {
padding: 1rem 0;
border-bottom: var(--line-hair) solid var(--color-bone-line);
}
.contact__list dt {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.contact__list dd {
margin: 0.25rem 0 0;
font-family: var(--font-display);
font-size: 1.125rem;
font-variant-numeric: tabular-nums;
}
.contact__link {
color: var(--color-ink);
text-decoration: none;
background-image: linear-gradient(var(--color-arrow), var(--color-arrow));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 2px;
transition: background-size 220ms var(--ease-out-quart);
}
.contact__link:hover {
background-size: 100% 0.45em;
}
.contact__maps {
margin-top: 1.75rem;
}
/* ── Franja de conversión ── */
.conversion-strip,
.final-cta__band {
background: var(--color-pine);
color: var(--color-bone);
background-image: radial-gradient(
90% 120% at 88% 50%,
var(--color-pine-glow) 0%,
transparent 58%
);
}
.conversion-strip__inner,
.final-cta__layout {
display: grid;
gap: 1.5rem;
padding-block: clamp(2.5rem, 5vw, 3.75rem);
align-items: center;
}
@media (min-width: 48rem) {
.conversion-strip__inner,
.final-cta__layout {
grid-template-columns: 1fr auto;
gap: 2.5rem;
}
}
.conversion-strip__title,
.final-cta__title {
font-size: clamp(1.625rem, 3.6vw, 2.375rem);
color: var(--color-bone);
}
.conversion-strip__text,
.final-cta__text {
max-width: 52ch;
margin: 0.75rem 0 0;
color: rgb(242 245 241 / 0.82);
}
.conversion-strip__actions,
.final-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.final-cta__trust {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
font-family: var(--font-display);
font-size: 0.875rem;
color: rgb(242 245 241 / 0.7);
}
/* ── Cabecera de página interior ── */
.page-hero {
position: relative;
padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
background: var(--color-pine);
color: var(--color-bone);
background-image: radial-gradient(
110% 90% at 8% 0%,
var(--color-pine-glow) 0%,
transparent 58%
);
}
.page-hero__copy > * {
margin: 0;
}
.page-hero__copy > * + * {
margin-top: 1.125rem;
}
.page-hero__title {
font-size: clamp(2.125rem, 6vw, 3.75rem);
max-width: 22ch;
color: var(--color-bone);
}
.page-hero__lead {
max-width: 52ch;
font-size: clamp(1.0625rem, 2vw, 1.1875rem);
color: rgb(242 245 241 / 0.84);
}
.page-hero__context {
max-width: 60ch;
font-size: 0.9375rem;
color: rgb(242 245 241 / 0.66);
}
.page-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.625rem;
}
/* ── Contenido editorial ── */
.page-content__claim {
max-width: 30ch;
margin: 0 0 clamp(2rem, 4vw, 3rem);
padding-left: 1.25rem;
border-left: 3px solid var(--color-arrow);
font-family: var(--font-display);
font-size: clamp(1.375rem, 3.4vw, 2rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.18;
color: var(--color-ink);
}
.page-content__grid {
display: grid;
gap: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 56rem) {
.page-content__grid {
grid-template-columns: repeat(2, 1fr);
}
.page-content__block--offset {
margin-top: 2.5rem;
}
}
.page-content__block p {
max-width: 62ch;
margin: 0.75rem 0 0;
color: var(--color-ink-muted);
}
.page-content__title {
font-size: clamp(1.3125rem, 2.8vw, 1.625rem);
}
/* ── Carta digital ── */
.digital-menu__header {
max-width: 44ch;
}
.digital-menu__subtitle {
margin: 0.875rem 0 0;
color: var(--color-ink-muted);
font-size: 1.0625rem;
}
.digital-menu__notices {
display: grid;
gap: 0.625rem;
margin: 1.75rem 0 0;
}
.digital-menu__notice {
margin: 0;
padding: 0.8125rem 1rem;
background: var(--color-bone-deep);
border-radius: var(--radius-control);
font-size: 0.875rem;
line-height: 1.55;
color: var(--color-ink-soft);
}
.digital-menu__notice--warn {
background: #fdf1cf;
color: #4a3703;
}
.digital-menu__meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 1.5rem;
padding-block: 0.875rem;
border-top: var(--line-hair) solid var(--color-bone-line);
border-bottom: var(--line-hair) solid var(--color-bone-line);
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--color-ink-soft);
}
.digital-menu__meta p {
margin: 0;
}
.digital-menu__category {
padding-block: clamp(2rem, 4vw, 2.75rem) 0;
}
.digital-menu__category-title {
font-size: clamp(1.5rem, 3.4vw, 2rem);
padding-bottom: 0.25rem;
background-image: linear-gradient(var(--color-arrow), var(--color-arrow));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 2.5rem 4px;
}
.digital-menu__category-desc {
margin: 0.75rem 0 0;
color: var(--color-ink-muted);
font-size: 0.9375rem;
}
.digital-menu__list {
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
}
.digital-menu__item {
padding: 0.9375rem 0;
border-bottom: var(--line-hair) solid var(--color-bone-line);
}
.digital-menu__item-head {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.digital-menu__item-name {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.015em;
}
/* Línea de puntos entre plato y precio, como en una carta impresa */
.digital-menu__item-head::after {
content: "";
flex: 1;
height: 1px;
margin-bottom: 0.28em;
background-image: linear-gradient(
to right,
var(--color-bone-line) 0 2px,
transparent 2px 5px
);
background-size: 5px 1px;
background-repeat: repeat-x;
}
.digital-menu__badge {
margin-left: 0.375rem;
color: var(--color-arrow-deep);
font-size: 0.8125rem;
}
.digital-menu__price {
flex-shrink: 0;
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--color-ink);
}
.digital-menu__item-desc,
.digital-menu__item-note {
max-width: 62ch;
margin: 0.375rem 0 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-ink-muted);
}
.digital-menu__item-note {
font-style: italic;
}
.digital-menu__footer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.875rem;
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: 1.75rem;
border-top: 3px solid var(--color-ink);
}
.digital-menu__footer-note {
margin: 0;
font-size: 0.9375rem;
color: var(--color-ink-muted);
}
/* ── Reseñas ── */
.reviews__rating {
margin: 1rem 0 0;
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.reviews__list {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
margin: 1.75rem 0 0;
padding: 0;
list-style: none;
}
.reviews__item {
padding: 1.25rem;
background: var(--color-bone-deep);
border-radius: var(--radius-panel);
}
.reviews__link {
display: inline-block;
margin-top: 1.5rem;
}
/* ── Consentimiento de cookies ── */
.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-overlay);
background: var(--color-pine-deep);
color: var(--color-bone);
border-top: 3px solid var(--color-arrow);
animation: rise-in 320ms var(--ease-out-expo);
}
@media (max-width: 61.999rem) {
.cookie-consent {
bottom: 4.25rem;
}
}
.cookie-consent__inner {
display: grid;
gap: 1.125rem;
padding-block: 1.25rem;
}
@media (min-width: 48rem) {
.cookie-consent__inner {
grid-template-columns: 1fr auto;
align-items: center;
gap: 2rem;
}
}
.cookie-consent__title {
font-size: 1.0625rem;
color: var(--color-bone);
}
.cookie-consent__text {
max-width: 68ch;
margin: 0.4375rem 0 0;
font-size: 0.875rem;
color: rgb(242 245 241 / 0.78);
}
.cookie-consent__text a {
color: var(--color-arrow);
}
.cookie-consent__actions {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.cookie-consent .btn-secondary {
background: transparent;
color: var(--color-bone);
box-shadow: inset 0 0 0 2px rgb(242 245 241 / 0.4);
}
.cookie-consent .btn-secondary:hover {
background: rgb(242 245 241 / 0.12);
}
/* ── Migas ── */
.breadcrumbs {
padding-block: 1rem 0;
}
main:has(.camino-hero) .breadcrumbs,
main:has(.poi__hero) .breadcrumbs {
position: absolute;
left: 0;
right: 0;
z-index: var(--z-raised);
padding-top: 1.15rem;
color: rgb(242 245 241 / 0.72);
}
main:has(.camino-hero) .breadcrumbs a,
main:has(.poi__hero) .breadcrumbs a {
color: rgb(242 245 241 / 0.86);
}
main:has(.camino-hero),
main:has(.poi__hero) {
position: relative;
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin: 0;
padding: 0;
list-style: none;
font-family: var(--font-display);
font-size: 0.8125rem;
color: var(--color-ink-muted);
}
.breadcrumbs__item + .breadcrumbs__item::before {
content: "→";
margin-right: 0.375rem;
color: var(--color-arrow-deep);
}
.breadcrumbs__item a {
text-decoration: none;
}
.breadcrumbs__item a:hover {
text-decoration: underline;
}
/* ── FAQ ── */
.seo-faq__list {
display: grid;
gap: 0;
margin: 1.75rem 0 0;
max-width: 68ch;
}
.seo-faq__item {
padding: 1.125rem 0;
border-bottom: var(--line-hair) solid var(--color-bone-line);
}
.seo-faq__item dt {
margin: 0 0 0.4375rem;
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-ink);
}
.seo-faq__item dd {
margin: 0;
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-ink-muted);
}
/* ── Páginas legales ── */
.legal-page {
padding-block: clamp(2rem, 5vw, 3.5rem);
max-width: 48rem;
}
.legal-page__header {
padding-bottom: 1.5rem;
border-bottom: 3px solid var(--color-ink);
}
.legal-page__back {
display: inline-block;
margin-bottom: 1rem;
font-family: var(--font-display);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
color: var(--color-ink-muted);
}
.legal-page__back:hover {
color: var(--color-ink);
}
.legal-page__content {
margin-top: 2rem;
}
.prose h2 {
margin: 2rem 0 0.625rem;
font-size: 1.25rem;
}
.prose p,
.prose li {
color: var(--color-ink-muted);
max-width: 68ch;
}
.prose p {
margin: 0.75rem 0 0;
}
/* ── 404 ── */
.not-found {
display: grid;
place-content: center;
gap: 1.25rem;
min-height: 60dvh;
padding-block: 3rem;
text-align: left;
}
.not-found h1 {
font-size: clamp(2rem, 6vw, 3.25rem);
}
.not-found p {
max-width: 46ch;
margin: 0;
color: var(--color-ink-muted);
}
.not-found__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* ── Selector de idioma ── */
.language-selector {
display: inline-flex;
}
.language-select {
appearance: none;
padding: 0.5rem 1.75rem 0.5rem 0.625rem;
background-color: transparent;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 15px) calc(0.5em + 4px),
calc(100% - 10px) calc(0.5em + 4px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
border: var(--line-hair) solid currentColor;
border-radius: var(--radius-control);
color: inherit;
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
}
.language-select option {
color: var(--color-ink);
background: var(--color-bone);
}
.site-header__lang .language-select,
.mobile-nav__lang .language-select,
.site-footer__lang .language-select {
border-color: rgb(242 245 241 / 0.35);
color: var(--color-bone);
}
/* ── Pie ── */
.site-footer {
background: var(--color-pine-deep);
color: var(--color-bone);
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.site-footer__grid {
display: grid;
gap: 2rem;
}
@media (min-width: 40rem) {
.site-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 62rem) {
.site-footer__grid {
grid-template-columns: 1.4fr 1fr 0.8fr 0.9fr;
gap: 2.5rem;
}
}
.site-footer__name {
margin: 0;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.site-footer__tagline {
margin: 0.25rem 0 0.875rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-arrow);
}
.site-footer__address {
margin: 0;
font-size: 0.9375rem;
color: rgb(242 245 241 / 0.72);
max-width: 26ch;
}
.site-footer__heading {
margin: 0 0 0.75rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--color-arrow);
}
.site-footer__block p {
margin: 0;
font-size: 0.9375rem;
color: rgb(242 245 241 / 0.72);
}
.site-footer__links {
display: grid;
gap: 0.4375rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__links a {
font-family: var(--font-display);
font-size: 0.9375rem;
color: rgb(242 245 241 / 0.82);
text-decoration: none;
}
.site-footer__links a:hover {
color: var(--color-arrow);
}
.site-footer__block .btn {
width: 100%;
}
.site-footer__lang {
margin-top: 0.875rem;
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.875rem 1.5rem;
margin-top: clamp(2rem, 4vw, 3rem);
padding-block: 1.25rem;
border-top: var(--line-hair) solid var(--color-pine-line);
font-size: 0.8125rem;
}
.site-footer__legal nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.site-footer__legal a {
color: rgb(242 245 241 / 0.66);
text-decoration: none;
}
.site-footer__legal a:hover {
color: var(--color-arrow);
}
.site-footer__copy {
margin: 0;
margin-left: auto;
color: rgb(242 245 241 / 0.5);
}
/* ── Entrada orquestada del hero ── */
.rise {
animation: rise-in 700ms var(--ease-out-expo) backwards;
}
.rise-1 {
animation-delay: 60ms;
}
.rise-2 {
animation-delay: 150ms;
}
.rise-3 {
animation-delay: 240ms;
}
.rise-4 {
animation-delay: 330ms;
}
@keyframes rise-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}