/*
 * Tema «Hoja y arcilla» · cuidadospersonales.es — Bioestètic, estética natural en Lleida
 * Los colores del logotipo (oliva y tierra) sobre lino, fotos recortadas en forma de hoja y la carta de tratamientos.
 * Tipografías: Marcellus (titulares) y Plus Jakarta Sans (texto). Paleta, escala y espacios en :root.
 */
:root {
  --lino: #f8f5ee;
  --lino-2: #f0eadf;
  --blanco: #fffefb;
  --arcilla-clara: #f0e2d3;
  --salvia-clara: #e6ead6;
  --oliva: #5d6f1e;
  --oliva-oscuro: #45531a;
  --bosque: #2b3a1c;
  --bosque-2: #364824;
  --tierra: #593e33;
  --arcilla: #b8805f;
  --tinta: #262a1f;
  --tenue: #5b6052;
  --filete: #ddd5c6;
  --hoja-clara: #cfd9a6;
  --sobre-bosque: #f4f2e8;
  --tenue-bosque: #c7cdb4;

  --f-titulos: "Marcellus", "Iowan Old Style", Georgia, serif;
  --f-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(1.375rem, 2.2vw, 1.625rem);
  --t-2xl: clamp(1.75rem, 3.4vw, 2.5rem);
  --t-3xl: clamp(2.125rem, 4.6vw, 3.5rem);
  --t-4xl: clamp(2.5rem, 5.8vw, 4.75rem);

  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;

  --ancho: 76rem;
  --cabecera: 5.5rem;
  --hoja: 9rem 1.25rem 9rem 1.25rem;
  --hoja-inversa: 1.25rem 9rem 1.25rem 9rem;
  --r: 1.25rem;

  --ancho-texto: 42rem;
  --ancho-amplio: 76rem;
  --radio: .75rem;
  --color-texto: var(--tinta);
  --color-fondo: var(--lino);
  --color-suave: var(--lino-2);
  --color-borde: var(--filete);
  --color-acento: var(--oliva);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--f-texto);
  --fuente-titulos: var(--f-titulos);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--oliva) var(--lino-2); accent-color: var(--oliva); }
html.menu-abierto { overflow: hidden; }
body { margin: 0; background: var(--lino); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.7; }
::selection { background: var(--hoja-clara); color: var(--bosque); }
img { max-width: 100%; height: auto; }
a { color: var(--oliva-oscuro); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
a:hover { color: var(--bosque); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-titulos); font-weight: 400; line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; margin: 0; color: var(--tinta); }
p { text-wrap: pretty; }
main:focus { outline: none; }
.envoltorio { width: min(100% - 2.75rem, var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--bosque); color: #fff; padding: .75rem 1.25rem; border-radius: 999px; text-decoration: none; transition: top .18s ease; }
.saltar:focus { top: 1rem; }
.icono { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------------------------------------------------------------- componentes */
.antetitulo { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 var(--e-2); font-size: var(--t-s); font-weight: 600; letter-spacing: .03em; color: var(--oliva); }
.antetitulo .icono { width: 1.15rem; height: 1.15rem; }
.antetitulo a { color: inherit; }
.antetitulo-claro { color: var(--hoja-clara); }
.titular { font-size: var(--t-3xl); }
.titular em, .portada-titular em, .cta-titulo em { font-style: normal; color: var(--oliva); }
.titular-pequeno { font-size: var(--t-2xl); margin-bottom: var(--e-4); }
.bloque { padding-block: var(--e-7); }
.bloque-suave { background: var(--lino-2); }
.bloque-cabecera { margin-bottom: var(--e-5); max-width: 46rem; }
.bloque-cabecera-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3); max-width: none; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .75rem 1.5rem; border: 1.5px solid var(--oliva); border-radius: 999px; background: var(--oliva); color: #fff; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.boton:hover { background: var(--oliva-oscuro); border-color: var(--oliva-oscuro); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(43, 58, 28, .7); }
.boton:active { transform: translateY(0); }
.boton .icono { width: 1.15rem; height: 1.15rem; }
.boton-linea { background: transparent; color: var(--oliva-oscuro); }
.boton-linea:hover { background: var(--salvia-clara); color: var(--bosque); border-color: var(--oliva); }
.boton-claro { background: var(--sobre-bosque); border-color: var(--sobre-bosque); color: var(--bosque); }
.boton-claro:hover { background: #fff; border-color: #fff; color: var(--bosque); }
.boton-linea-claro { background: transparent; border-color: rgba(244, 242, 232, .55); color: var(--sobre-bosque); }
.boton-linea-claro:hover { background: rgba(244, 242, 232, .12); border-color: var(--sobre-bosque); color: #fff; }
.botones-fila { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--e-4); }
.enlace-flecha { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-weight: 600; color: var(--oliva-oscuro); text-decoration: none; }
.enlace-flecha .icono { width: 1.1rem; height: 1.1rem; transition: transform .18s ease; }
.enlace-flecha:hover .icono { transform: translateX(3px); }
.etiqueta { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: 999px; background: var(--salvia-clara); color: var(--oliva-oscuro); font-size: .875rem; font-weight: 600; }

/* fotos con forma de hoja (como las del logotipo) */
.hoja-foto { margin: 0; }
.hoja-foto img { display: block; width: 100%; border-radius: var(--hoja); object-fit: cover; aspect-ratio: 4 / 3; }
.hoja-foto-inversa img { border-radius: var(--hoja-inversa); }

/* ---------------------------------------------------------------- franja y cabecera */
.franja { background: var(--bosque); color: var(--tenue-bosque); font-size: .875rem; }
.franja-fila { display: flex; justify-content: flex-end; gap: var(--e-4); min-height: 2.25rem; align-items: center; }
.franja p { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.franja .icono { width: 1rem; height: 1rem; color: var(--hoja-clara); }
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(248, 245, 238, .96); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--filete); }
.cabecera-fila { display: flex; align-items: center; gap: var(--e-3); min-height: var(--cabecera); }
.marca { display: flex; align-items: center; margin-right: auto; min-height: 2.75rem; color: var(--tinta); text-decoration: none; }
.marca-logo { display: block; height: 4.25rem; width: auto; aspect-ratio: 960 / 652; object-fit: cover; object-position: 50% 100%; }
.marca-nombre { font-family: var(--f-titulos); font-size: 1.75rem; }
.navegacion { display: flex; align-items: center; }
.navegacion .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.navegacion .menu a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .8rem; border-radius: 999px; color: var(--tinta); font-size: .975rem; font-weight: 500; text-decoration: none; }
.navegacion .menu a:hover { background: var(--salvia-clara); color: var(--bosque); }
.navegacion .menu a[aria-current="page"] { color: var(--oliva-oscuro); background: var(--salvia-clara); }
.navegacion-datos { display: none; }
.cabecera-tel { min-height: 2.75rem; padding: .5rem 1.15rem; font-size: .95rem; }
.menu-boton { display: none; }

@media (max-width: 63.99rem) {
  :root { --cabecera: calc(4rem - 1px); }
  /* con backdrop-filter la cabecera hace de bloque contenedor del menú fijo y lo recortaba a su altura */
  html.menu-abierto .cabecera { backdrop-filter: none; background: var(--lino); }
  .franja { display: none; }
  .marca-logo { height: 3.1rem; }
  .cabecera-fila { gap: .5rem; }
  .cabecera-tel { width: 2.75rem; height: 2.75rem; padding: 0; }
  .cabecera-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-boton { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1.5px solid var(--filete); border-radius: 50%; background: var(--blanco); color: var(--tinta); cursor: pointer; }
  .menu-boton-rayas, .menu-boton-rayas::before, .menu-boton-rayas::after { display: block; width: 1.1rem; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .2s ease, background-color .2s ease; }
  .menu-boton-rayas { position: relative; }
  .menu-boton-rayas::before, .menu-boton-rayas::after { content: ""; position: absolute; left: 0; }
  .menu-boton-rayas::before { top: -6px; }
  .menu-boton-rayas::after { top: 6px; }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas { background: transparent; }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas::before { transform: translateY(6px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-boton-rayas::after { transform: translateY(-6px) rotate(-45deg); }
  .navegacion { position: fixed; inset: var(--cabecera) 0 0; z-index: 30; display: none; flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) 1.375rem calc(var(--e-4) + env(safe-area-inset-bottom)); background: var(--lino); overflow-y: auto; overscroll-behavior: contain; }
  .navegacion.abierto { display: flex; }
  .navegacion .menu { flex-direction: column; gap: 0; }
  .navegacion .menu li { border-bottom: 1px solid var(--filete); }
  .navegacion .menu a { width: 100%; min-height: 3.5rem; padding: 0; border-radius: 0; font-family: var(--f-titulos); font-size: 1.75rem; font-weight: 400; }
  .navegacion .menu a:hover, .navegacion .menu a[aria-current="page"] { background: none; color: var(--oliva); }
  .navegacion .menu a::after { content: ""; width: .55rem; height: .55rem; margin-left: auto; margin-right: .35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .45; }
  .navegacion .menu a[aria-current="page"]::after { opacity: 1; }
  .navegacion-datos { display: grid; gap: .25rem; padding: var(--e-3); border-radius: var(--r); background: var(--salvia-clara); }
  .navegacion-datos a, .navegacion-datos p { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin: 0; color: var(--bosque); font-size: 1rem; text-decoration: none; overflow-wrap: anywhere; }
  .navegacion-datos .icono { color: var(--oliva); }
}

/* ---------------------------------------------------------------- portada */
.portada { padding-block: var(--e-6) var(--e-7); overflow: hidden; }
.portada-rejilla { display: grid; gap: var(--e-5); align-items: center; }
.portada-titular { font-size: var(--t-4xl); line-height: 1.06; max-width: 14ch; }
.portada-subtitulo { margin: var(--e-3) 0 0; font-size: var(--t-l); line-height: 1.6; color: var(--tenue); max-width: 34rem; }
.portada-imagen { position: relative; }
.hoja-foto-grande img { aspect-ratio: 5 / 6; object-position: 68% 50%; border-radius: 14rem 1.5rem 14rem 1.5rem; }
.portada-ficha { position: absolute; left: -1.5rem; bottom: 2rem; width: min(17rem, 80%); padding: var(--e-3); background: var(--blanco); border-radius: var(--r); box-shadow: 0 24px 48px -24px rgba(43, 58, 28, .45); }
.portada-ficha p { margin: 0 0 .5rem; font-size: var(--t-s); line-height: 1.5; color: var(--tenue); }
.portada-ficha strong { color: var(--tinta); font-weight: 600; }
.portada-ficha-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--oliva) !important; }
.portada-ficha-tel { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-top: .25rem; font-family: var(--f-titulos); font-size: 1.375rem; color: var(--bosque); text-decoration: none; }
.portada-ficha-tel .icono { color: var(--oliva); }
@media (min-width: 52rem) {
  .portada-rejilla { grid-template-columns: 1.05fr .95fr; gap: var(--e-6); }
}
/* sellos de confianza bajo los botones (los tres pilares del centro) */
.portada-sellos { list-style: none; margin: var(--e-5) 0 0; padding: var(--e-3) 0 0; border-top: 1px solid var(--filete); display: flex; flex-wrap: wrap; gap: .75rem var(--e-3); }
.portada-sellos li { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-s); font-weight: 600; line-height: 1.3; color: var(--bosque); }
.portada-sello-icono { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 1.2rem .25rem 1.2rem .25rem; background: var(--salvia-clara); color: var(--oliva-oscuro); }
.portada-sello-icono .icono { width: 1.15rem; height: 1.15rem; }

/* materias primas */
.ingredientes { background: radial-gradient(120% 160% at 0% 0%, var(--bosque-2) 0%, var(--bosque) 55%); color: var(--sobre-bosque); padding-block: var(--e-6); }
.ingredientes-titulo { font-size: var(--t-2xl); line-height: 1.15; color: var(--sobre-bosque); margin-bottom: var(--e-4); text-align: center; }
.ingredientes-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-2); }
.ingredientes-lista li { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; font-weight: 500; line-height: 1.35; }
.ingrediente-icono { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 2.3rem .45rem 2.3rem .45rem; border: 1.5px solid rgba(207, 217, 166, .5); background: rgba(207, 217, 166, .06); color: var(--hoja-clara); }
.ingrediente-icono .icono { width: 2rem; height: 2rem; }
@media (min-width: 48rem) { .ingredientes-lista { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 64rem) {
  .ingredientes-rejilla { display: grid; grid-template-columns: 15rem 1fr; gap: var(--e-5); align-items: center; }
  .ingredientes-titulo { margin: 0; text-align: left; }
  .ingredientes-lista li + li { border-left: 1px solid rgba(207, 217, 166, .18); }
}
@media (max-width: 47.99rem) { .ingredientes-lista li:last-child { grid-column: 1 / -1; } }

/* carta de tratamientos (portada) */
.grupos { display: grid; gap: var(--e-4); }
@media (min-width: 48rem) { .grupos { grid-template-columns: repeat(2, 1fr); } }
.grupo-tarjeta { display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 0 var(--filete), 0 30px 60px -44px rgba(43, 58, 28, .5); }
.grupo-imagen { display: block; overflow: hidden; }
.grupo-imagen img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s ease; }
.grupo-tarjeta:hover .grupo-imagen img { transform: scale(1.03); }
.grupo-texto { display: flex; flex-direction: column; flex: 1; padding: var(--e-4); }
.grupo-cuenta { margin: 0 0 .35rem; font-size: var(--t-s); font-weight: 600; color: var(--oliva); }
.grupo-texto h3 { font-size: var(--t-2xl); }
.grupo-texto h3 a { color: inherit; text-decoration: none; }
.grupo-texto h3 a:hover { color: var(--oliva-oscuro); }
/* la carta como lista numerada: cada tratamiento enlaza a su descripción */
.grupo-lista { list-style: none; margin: var(--e-3) 0; padding: 0; display: grid; flex: 1; align-content: start; border-top: 1px solid var(--filete); }
.grupo-lista li { border-bottom: 1px solid var(--filete); }
.grupo-lista a { display: flex; align-items: center; gap: var(--e-2); min-height: 3.25rem; padding-block: .35rem; color: var(--tinta); text-decoration: none; }
.grupo-lista-n { min-width: 1.75rem; font-size: .8125rem; font-weight: 600; color: var(--tierra); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.grupo-lista-nombre { flex: 1; font-family: var(--f-titulos); font-size: 1.25rem; line-height: 1.25; }
.grupo-lista .icono { width: 1.1rem; height: 1.1rem; color: var(--oliva); opacity: .45; transition: opacity .18s ease, transform .18s ease; }
.grupo-lista a:hover { color: var(--oliva-oscuro); }
.grupo-lista a:hover .icono, .grupo-lista a:focus-visible .icono { opacity: 1; transform: translateX(3px); }

/* experiencia (foto a sangre): texto a la izquierda y la foto respirando a la derecha */
.experiencia { position: relative; isolation: isolate; display: grid; min-height: 36rem; align-items: center; padding-block: var(--e-7); color: var(--sobre-bosque); overflow: hidden; background: var(--bosque); }
.experiencia-fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.experiencia::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(43, 58, 28, .96) 0%, rgba(43, 58, 28, .88) 34%, rgba(43, 58, 28, .35) 68%, rgba(43, 58, 28, .08) 100%); }
.experiencia-caja { width: min(100% - 2.75rem, var(--ancho)); }
.experiencia-interior { max-width: 33rem; }
.experiencia-hoja { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--e-3); border-radius: 2rem .4rem 2rem .4rem; border: 1.5px solid var(--hoja-clara); color: var(--hoja-clara); }
.experiencia-texto { margin: 0; font-family: var(--f-titulos); font-size: clamp(1.5rem, 2.5vw, 2.125rem); line-height: 1.34; text-wrap: pretty; }
.experiencia-texto::after { content: ""; display: block; width: 4rem; height: 2px; margin-top: var(--e-4); background: var(--hoja-clara); opacity: .7; }
.experiencia .botones-fila, .experiencia .boton { margin-top: var(--e-4); }

/* cómo trabajamos: cabecera con el bodegón y los tres pilares en columnas abiertas */
.pilares-rejilla { display: grid; gap: var(--e-4); align-items: center; }
.pilares-rejilla .bloque-cabecera { margin-bottom: 0; }
.pilares-foto { margin: 0; overflow: hidden; border-radius: var(--hoja-inversa); background: var(--arcilla-clara); }
/* el bodegón tiene fondo blanco: con «multiply» el blanco toma el color arcilla del marco */
.pilares-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 72% 62%; mix-blend-mode: multiply; }
.pilares { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-5); }
.pilares li { position: relative; padding-top: var(--e-3); border-top: 1px solid var(--filete); }
.pilares li::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 2px; background: var(--oliva); }
.pilar-cabeza { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--e-3); }
.pilar-icono { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 2rem .4rem 2rem .4rem; background: var(--arcilla-clara); color: var(--tierra); }
.pilar-icono .icono { width: 1.6rem; height: 1.6rem; }
.pilar-numero { font-family: var(--f-texto); font-weight: 300; font-size: 3rem; line-height: 1; letter-spacing: -.02em; color: #9a6a4c; font-variant-numeric: tabular-nums; }
.pilares h3 { font-size: var(--t-2xl); }
.pilares p { margin: .75rem 0 0; color: var(--tenue); }
@media (min-width: 48rem) { .pilares { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .pilares-rejilla { grid-template-columns: 1fr 1.2fr; gap: var(--e-6); } }

/* tarjetas del blog */
.blog-bloque { background: var(--lino-2); }
.tarjetas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.tarjeta { position: relative; display: flex; flex-direction: column; padding: var(--e-4); border-radius: var(--r); background: var(--blanco); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 1px 0 var(--filete); }
.tarjeta-1 { background: var(--salvia-clara); }
.tarjeta-2 { background: var(--arcilla-clara); }
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(43, 58, 28, .6); }
.tarjeta-hoja { position: absolute; top: -.75rem; right: -.75rem; color: var(--oliva); opacity: .12; }
.tarjeta-hoja .icono { width: 6.5rem; height: 6.5rem; stroke-width: 1; }
.tarjeta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 var(--e-2); font-size: var(--t-s); color: var(--tenue); }
.tarjeta-1 .etiqueta, .tarjeta-2 .etiqueta { background: var(--blanco); }
.tarjeta-titulo { font-size: var(--t-xl); line-height: 1.25; }
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta-titulo a:focus-visible { outline: none; }
.tarjeta:has(a:focus-visible) { outline: 3px solid var(--oliva); outline-offset: 3px; }
.tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; }
.tarjeta-resumen { margin: var(--e-2) 0 0; color: var(--tenue); font-size: var(--t-s); line-height: 1.6; flex: 1; }
/* la entrada más reciente del blog, destacada a todo el ancho y en verde bosque */
.tarjetas-con-destacada .tarjeta-destacada { grid-column: 1 / -1; padding: var(--e-5) var(--e-4); background: var(--bosque); color: var(--sobre-bosque); box-shadow: 0 30px 60px -40px rgba(43, 58, 28, .8); }
.tarjeta-destacada .tarjeta-hoja { top: -2.5rem; right: -1.5rem; width: 15rem; color: var(--hoja-clara); opacity: .2; }
.tarjeta-destacada .tarjeta-hoja svg { display: block; width: 100%; height: auto; }
.tarjeta-destacada .rama-relleno { fill: currentColor; fill-opacity: .35; }
.tarjeta-destacada .tarjeta-meta { color: var(--tenue-bosque); }
.tarjeta-destacada .etiqueta { background: var(--salvia-clara); }
.tarjeta-minutos::before { content: "·"; margin-right: .6rem; }
.tarjeta-destacada .tarjeta-titulo { font-size: clamp(1.875rem, 3.4vw, 2.875rem); line-height: 1.14; }
.tarjeta-destacada .tarjeta-titulo a { color: var(--sobre-bosque); }
.tarjeta-destacada .tarjeta-resumen { font-size: var(--t-m); line-height: 1.7; color: var(--tenue-bosque); max-width: 34rem; }
.tarjeta-destacada .tarjeta-leer { color: var(--hoja-clara); font-size: var(--t-m); }
.tarjeta-destacada .tarjeta-comentarios { color: var(--tenue-bosque); }
.tarjeta-destacada .tarjeta-cuerpo { position: relative; }
@media (min-width: 56rem) {
  .tarjetas-con-destacada .tarjeta-destacada { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--e-6); align-items: end; padding: var(--e-6) var(--e-5); }
  .tarjeta-destacada .tarjeta-cuerpo { padding-right: 6rem; }
}
.tarjeta-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); margin: var(--e-3) 0 0; font-size: var(--t-s); }
.tarjeta-leer { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--oliva-oscuro); }
.tarjeta-leer .icono { width: 1.05rem; height: 1.05rem; }
.tarjeta-comentarios { color: var(--tenue); }

/* visítanos */
.visita { background: var(--bosque); color: var(--sobre-bosque); }
.visita .titular { color: var(--sobre-bosque); }
.visita a { color: var(--sobre-bosque); }
.visita-rejilla { display: grid; gap: var(--e-5); align-items: stretch; }
@media (min-width: 60rem) { .visita-rejilla { grid-template-columns: 1fr 1.1fr; gap: var(--e-6); } }
.datos { margin: var(--e-4) 0 0; display: grid; gap: 0; }
.datos > div { display: grid; gap: .2rem; padding-block: var(--e-2); border-top: 1px solid rgba(244, 242, 232, .16); }
.datos dt { display: flex; align-items: center; gap: .55rem; font-size: var(--t-s); font-weight: 600; color: var(--hoja-clara); }
.datos dt .icono { width: 1.1rem; height: 1.1rem; }
.datos dd { margin: 0; font-size: var(--t-l); line-height: 1.45; overflow-wrap: anywhere; }
.datos dd a { display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration-color: rgba(244, 242, 232, .4); }
.visita-mapa { position: relative; isolation: isolate; min-height: 26rem; border-radius: var(--hoja-inversa); overflow: hidden; background: var(--arcilla-clara); display: flex; }
/* panel de la dirección: la ciudad en grande y la rama de hojas, sin repetir fotos de la portada */
.visita-rama { position: absolute; z-index: 0; right: -2rem; top: 2rem; width: min(72%, 28rem); color: var(--oliva); opacity: .5; pointer-events: none; }
.visita-rama svg, .cabecera-rama svg { display: block; width: 100%; height: auto; }
.visita-rama .rama-relleno { fill: var(--hoja-clara); }
.visita-lugar { position: absolute; z-index: 0; top: var(--e-4); left: var(--e-4); right: var(--e-4); display: grid; justify-items: start; gap: .35rem; margin: 0; color: var(--tierra); }
.visita-lugar-icono { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--e-2); border-radius: 1.75rem .35rem 1.75rem .35rem; background: var(--blanco); color: var(--oliva); box-shadow: 0 12px 24px -16px rgba(89, 62, 51, .6); }
.visita-lugar-ciudad { font-family: var(--f-titulos); font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1; color: var(--tierra); }
.visita-lugar-calle { font-size: var(--t-l); color: var(--tierra); }
.visita-lugar ~ .x-mapa figcaption span { display: none; }
.visita-mapa .mapa { position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-end; margin: 0; padding: var(--e-3); background: none; border-radius: 0; }
.visita-mapa .mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; aspect-ratio: auto; }
.visita-mapa .mapa:not(.x-mapa) figcaption { display: none; }
.visita-mapa figcaption { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: var(--e-3); background: var(--blanco); color: var(--tinta); border-radius: var(--r); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5); justify-content: flex-start; }
.visita-mapa figcaption span { flex-basis: 100%; text-align: left; font-weight: 600; }
.visita-mapa figcaption a { color: var(--oliva-oscuro); display: inline-flex; align-items: center; min-height: 2.75rem; }
.x-mapa button, .visita-mapa .x-mapa-cargar { min-height: 2.75rem; padding: .5rem 1.25rem; border-radius: 999px; border: 1.5px solid var(--oliva); background: var(--oliva); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.x-mapa button:hover { background: var(--oliva-oscuro); }

/* llamada final */
.cta { padding-block: var(--e-6); }
.cta-caja { position: relative; display: grid; gap: var(--e-3); align-items: center; padding: var(--e-5) var(--e-4); border-radius: var(--hoja); background: var(--salvia-clara); overflow: hidden; }
.cta-hoja { position: absolute; right: -1rem; bottom: -2rem; color: var(--oliva); opacity: .14; }
.cta-hoja .icono { width: 12rem; height: 12rem; stroke-width: .8; }
.cta-titulo { font-size: var(--t-2xl); }
.cta-caja p { margin: .5rem 0 0; color: var(--tenue); font-size: var(--t-l); }
.cta-caja .botones-fila { margin-top: 0; position: relative; }
/* la hoja decorativa del fondo no debe verse a través del botón de línea */
.cta-caja .boton-linea { background: var(--salvia-clara); }
.cta-caja .boton-linea:hover { background: var(--blanco); }
@media (min-width: 56rem) { .cta-caja { grid-template-columns: 1fr auto; padding: var(--e-5) var(--e-6); } }

/* ---------------------------------------------------------------- páginas interiores */
.pagina-cabecera { padding-block: var(--e-5); background: var(--lino-2); border-bottom: 1px solid var(--filete); }
.pagina-cabecera-rejilla { display: grid; gap: var(--e-4); align-items: center; }
.pagina-cabecera-foto .pagina-cabecera-imagen img { aspect-ratio: 16 / 10; }
@media (min-width: 56rem) {
  .pagina-cabecera-foto { padding-block: var(--e-5); }
  .pagina-cabecera-foto .pagina-cabecera-rejilla { grid-template-columns: 1.1fr .9fr; gap: var(--e-6); }
}
.pagina-titular { font-size: var(--t-3xl); max-width: 22ch; }
.pagina-entradilla { margin: var(--e-2) 0 0; font-size: var(--t-l); color: var(--tenue); max-width: 40rem; }
/* cabeceras sin foto: rama de hojas de trazo fino a la derecha */
.pagina-cabecera-rama { position: relative; overflow: hidden; }
.pagina-cabecera-rama > .envoltorio { position: relative; z-index: 1; }
.cabecera-rama { position: absolute; z-index: 0; right: max(1rem, calc((100% - var(--ancho)) / 2 - 1rem)); bottom: -3.5rem; width: 19rem; color: var(--oliva); opacity: .42; pointer-events: none; }
.cabecera-rama .rama-relleno { fill: var(--arcilla-clara); }
@media (max-width: 47.99rem) { .cabecera-rama { display: none; } }
/* datos de la entrada bajo el título: temas, fecha y minutos de lectura */
.pagina-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: var(--e-3) 0 0; font-size: var(--t-s); color: var(--tenue); }
.pagina-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.pagina-meta .icono { width: 1.05rem; height: 1.05rem; color: var(--oliva); }
.pagina-meta .etiqueta { min-height: 2.75rem; padding-inline: 1.1rem; background: var(--blanco); border: 1px solid var(--filete); text-decoration: none; }
.pagina-meta .etiqueta:hover { border-color: var(--oliva); background: var(--salvia-clara); }
.migas ol { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font-size: var(--t-s); color: var(--tenue); }
.migas li:not(:last-child)::after { content: "·"; margin-left: .4rem; color: var(--arcilla); }
.migas a { color: var(--tenue); display: inline-flex; min-height: 1.5rem; align-items: center; }
.pagina-cuerpo { padding-block: var(--e-5) var(--e-6); }
.lectura { max-width: 46rem; }
.texto-largo { font-size: 1.125rem; line-height: 1.75; }
.texto-largo > * { margin-left: 0; }
.contenido h2 { font-size: var(--t-2xl); color: var(--tierra); letter-spacing: .02em; }
.contenido h3 { font-size: var(--t-xl); }
.contenido .separador { border-top: 0; height: 12px; margin: .5rem 0 1.5rem; background: radial-gradient(circle, var(--arcilla) 2px, transparent 2.5px) left center / 14px 12px repeat-x; max-width: 5rem; }
.contenido figure.imagen img { border-radius: var(--hoja); aspect-ratio: 1024 / 354; object-fit: cover; }
.contenido .tratamiento-linea strong { display: block; font-family: var(--f-titulos); font-weight: 400; font-size: var(--t-xl); line-height: 1.3; color: var(--tinta); margin-bottom: .2rem; }
/* botón dentro de un párrafo (p. ej. «Cambiar mi elección sobre las cookies»): compacto y en línea con el texto */
.contenido p > .boton { min-height: 2.75rem; margin-block: .2rem; padding: .4rem 1.1rem; font-size: .95rem; vertical-align: middle; }
.contenido blockquote { border-left-color: var(--oliva); font-style: normal; color: var(--tierra); }
.contenido .boton { color: #fff; }
.contenido .boton:hover { color: #fff; }

/* carta de tratamientos (páginas) */
.carta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: carta; }
.carta-item { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); padding-block: var(--e-4); border-bottom: 1px solid var(--filete); }
.carta-item:first-child { border-top: 1px solid var(--filete); }
/* al llegar desde la portada (#tratamiento), el número se marca en oliva */
.carta-item { scroll-margin-top: calc(var(--cabecera) + 1.5rem); }
.carta-item:target .carta-numero { background: var(--oliva); color: #fff; }
.carta-numero { transition: background-color .3s ease, color .3s ease; }
.carta-numero { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1.75rem .35rem 1.75rem .35rem; background: var(--salvia-clara); color: var(--oliva-oscuro); font-weight: 600; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.carta-nombre { font-size: var(--t-2xl); color: var(--tinta); }
.carta-item p { margin: .6rem 0 0; font-size: 1.125rem; line-height: 1.7; color: var(--tinta); max-width: 40rem; }
.carta-rejilla { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 60rem) { .carta-rejilla { grid-template-columns: 1fr 20rem; gap: var(--e-6); } .carta-lateral { position: sticky; top: calc(var(--cabecera) + var(--e-3)); } }
.carta-lateral { display: grid; gap: var(--e-3); }
.grupo-mini { position: relative; display: block; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; background: var(--bosque); isolation: isolate; }
.grupo-mini img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .75; transition: opacity .2s ease, transform .4s ease; }
.grupo-mini:hover img { opacity: .6; transform: scale(1.03); }
.grupo-mini-texto { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; padding: var(--e-3); background: linear-gradient(transparent, rgba(43, 58, 28, .85)); }
.grupo-mini .grupo-cuenta { color: var(--hoja-clara); margin: 0; }
.grupo-mini-titulo { font-family: var(--f-titulos); font-size: var(--t-2xl); line-height: 1.1; color: #fff; }
.grupos-compactos { display: grid; gap: var(--e-3); }
@media (min-width: 48rem) { .grupos-compactos { grid-template-columns: repeat(2, 1fr); } }
.ingredientes-mini { padding: var(--e-3); background: var(--blanco); border-radius: var(--r); box-shadow: 0 1px 0 var(--filete); }
.ingredientes-mini-titulo { margin: 0 0 var(--e-2); font-family: var(--f-titulos); font-size: var(--t-l); line-height: 1.25; }
.ingredientes-columna { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ingredientes-columna li { display: flex; align-items: center; gap: .75rem; font-weight: 500; }
.ingredientes-columna .ingrediente-icono { width: 2.5rem; height: 2.5rem; border-color: var(--filete); color: var(--oliva); border-radius: 1.4rem .3rem 1.4rem .3rem; }
.ingredientes-columna .ingrediente-icono .icono { width: 1.3rem; height: 1.3rem; }

/* página de tratamientos */
.intro-tratamientos { padding-block: var(--e-6) var(--e-4); }
.intro-texto { font-family: var(--f-titulos); font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.35; color: var(--tierra); max-width: 54rem; }
.intro-texto > * { max-width: none; margin-left: 0; }
.grupos-indice { display: flex; flex-wrap: wrap; gap: .75rem; padding-bottom: var(--e-3); }
.grupos-indice a { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .5rem 1.25rem; border-radius: 999px; border: 1.5px solid var(--oliva); color: var(--oliva-oscuro); font-weight: 600; text-decoration: none; }
.grupos-indice a:hover { background: var(--salvia-clara); }
.grupos-indice span { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--oliva); color: #fff; font-size: .875rem; }
.grupo-seccion { scroll-margin-top: calc(var(--cabecera) + 1rem); }
.grupo-seccion-alterna { background: var(--lino-2); }
.grupo-seccion-rejilla { display: grid; gap: var(--e-5); align-items: start; }
.grupo-seccion-cabecera .hoja-foto { margin: var(--e-3) 0 var(--e-2); }
@media (min-width: 60rem) { .grupo-seccion-rejilla { grid-template-columns: 26rem 1fr; gap: var(--e-7); } .grupo-seccion-cabecera { position: sticky; top: calc(var(--cabecera) + var(--e-3)); } }

/* entrada: entradilla con capitular, ladillos, cierre con hoja y anterior/siguiente */
.texto-entrada > p:first-child { font-size: 1.3125rem; line-height: 1.66; color: var(--tinta); }
.texto-entrada > p:first-child::first-letter { float: left; margin: .06em .14em 0 0; font-family: var(--f-titulos); font-size: 3.55em; line-height: .84; color: var(--oliva); }
.texto-entrada .tratamiento-linea { margin-top: var(--e-5); }
.texto-entrada .tratamiento-linea strong { font-size: var(--t-2xl); color: var(--tierra); line-height: 1.2; }
.texto-entrada .tratamiento-linea strong::after { content: ""; display: block; width: 5rem; height: 12px; margin-top: .5rem; background: radial-gradient(circle, var(--arcilla) 2px, transparent 2.5px) left center / 14px 12px repeat-x; }
.fin-hoja { max-width: var(--ancho-texto); display: flex; align-items: center; gap: var(--e-2); margin: var(--e-5) 0 0; color: var(--arcilla); }
.fin-hoja::before, .fin-hoja::after { content: ""; flex: 1; height: 1px; background: var(--filete); }
.fin-hoja .icono { width: 1.5rem; height: 1.5rem; }
.vecinos { max-width: var(--ancho-texto); display: grid; gap: var(--e-2); margin-top: var(--e-5); }
@media (min-width: 40rem) { .vecinos { grid-template-columns: 1fr 1fr; } }
.vecino { display: flex; flex-direction: column; gap: .45rem; padding: var(--e-3); border-radius: var(--r); background: var(--blanco); box-shadow: 0 1px 0 var(--filete); color: var(--tinta); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.vecino:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: 0 22px 44px -30px rgba(43, 58, 28, .6); }
.vecino-siguiente { align-items: flex-end; text-align: right; }
.vecino-rotulo { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--t-s); font-weight: 600; color: var(--oliva-oscuro); }
.vecino-rotulo .icono { width: 1.05rem; height: 1.05rem; }
.vecino-titulo { font-family: var(--f-titulos); font-size: var(--t-l); line-height: 1.3; text-wrap: balance; }
.vecino-vacio { visibility: hidden; }
@media (max-width: 39.99rem) { .vecino-vacio { display: none; } }

/* entrada: comentarios */
.comentarios { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--filete); }
.comentarios-titulo { font-size: var(--t-2xl); margin-bottom: var(--e-3); }
.comentarios-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.comentario { padding: var(--e-3); background: var(--blanco); border-radius: var(--r); box-shadow: 0 1px 0 var(--filete); }
.comentario-autor { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 0 0 .5rem; }
.comentario-autor time { font-size: var(--t-s); color: var(--tenue); }
.comentario-inicial { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 1.4rem .3rem 1.4rem .3rem; background: var(--arcilla-clara); color: var(--tierra); font-family: var(--f-titulos); font-size: 1.2rem; }
.comentario-texto p { margin: 0; }

/* blog: filtros */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--e-4); }
.filtros a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--filete); background: var(--blanco); color: var(--tinta); font-weight: 500; text-decoration: none; }
.filtros a:hover { border-color: var(--oliva); }
.filtros a[aria-current="page"] { background: var(--oliva); border-color: var(--oliva); color: #fff; }
.filtros span { font-size: .875rem; opacity: .75; }

/* contacto */
.formulario-bloque { background: var(--lino-2); }
.formulario-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.formulario-rejilla > * { min-width: 0; }
@media (min-width: 60rem) { .formulario-rejilla { grid-template-columns: .8fr 1.2fr; gap: var(--e-7); } }
.formulario-texto { color: var(--tenue); font-size: var(--t-l); }
.formulario { padding: var(--e-4) var(--e-3); background: var(--blanco); border-radius: var(--r); box-shadow: 0 30px 60px -44px rgba(43, 58, 28, .55); }
@media (min-width: 40rem) { .formulario { padding: var(--e-5); } }
.x-contacto label { font-size: var(--t-s); font-weight: 600; }
.x-contacto input:not([type=checkbox]), .x-contacto textarea, .x-buscador input { font: inherit; font-size: 1rem; min-height: 3rem; padding: .75rem 1rem; border: 1.5px solid var(--filete); border-radius: .75rem; background: var(--lino); color: var(--tinta); }
.x-contacto input:focus, .x-contacto textarea:focus, .x-buscador input:focus { outline: 3px solid var(--hoja-clara); outline-offset: 0; border-color: var(--oliva); }
.x-contacto .x-acepto label { font-weight: 400; font-size: var(--t-s); line-height: 1.5; }
.x-contacto .x-acepto input { width: 1.25rem; height: 1.25rem; flex: none; }
.x-contacto .boton, .x-buscador button { min-height: 3rem; border-radius: 999px; background: var(--oliva); border: 1.5px solid var(--oliva); color: #fff; font-weight: 600; padding-inline: 1.5rem; }
.x-contacto .boton { width: 100%; justify-content: center; }
.x-contacto .boton:hover, .x-buscador button:hover { background: var(--oliva-oscuro); }
.x-buscador { margin-top: var(--e-3); max-width: 36rem; }

/* búsqueda */
.listado-total { margin: var(--e-2) 0 0; color: var(--tenue); }
.resultados { list-style: none; margin: 0; padding: 0; }
.resultados li { padding-block: var(--e-3); border-bottom: 1px solid var(--filete); }
.resultado-tipo { margin: 0 0 .25rem; font-size: var(--t-s); font-weight: 600; color: var(--oliva); }
.resultados h2 { font-size: var(--t-xl); }
.resultados h2 a { color: var(--tinta); text-decoration: none; }
.resultados h2 a:hover { color: var(--oliva-oscuro); text-decoration: underline; }
.resultados p:last-child { margin: .4rem 0 0; color: var(--tenue); }
.sin-resultados { font-size: var(--t-l); color: var(--tenue); }
.paginacion a, .paginacion span[aria-current] { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; border-radius: 999px; }

/* ---------------------------------------------------------------- pie */
.pie { background: var(--bosque); color: var(--tenue-bosque); border-top: 1px solid var(--bosque-2); }
.pie a { color: var(--sobre-bosque); text-decoration-color: rgba(244, 242, 232, .35); }
.pie a:hover { color: #fff; }
.pie-rejilla { display: grid; gap: var(--e-5); padding-block: var(--e-6) var(--e-5); }
@media (min-width: 56rem) { .pie-rejilla { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e-6); } }
.pie-logo-caja { margin: 0; }
.pie-logo { display: block; height: 6.5rem; width: auto; aspect-ratio: 960 / 652; object-fit: cover; object-position: 50% 100%; }
.pie-nombre { font-family: var(--f-titulos); font-size: 2rem; color: var(--sobre-bosque); margin: 0; }
.pie-texto { max-width: 26rem; margin: var(--e-3) 0 0; line-height: 1.6; }
.pie-grupo h2 { font-family: var(--f-texto); font-size: var(--t-s); font-weight: 600; letter-spacing: .04em; color: var(--hoja-clara); margin-bottom: var(--e-2); }
.pie-grupo address { font-style: normal; display: grid; gap: .5rem; }
.pie-grupo address p { display: flex; align-items: flex-start; gap: .6rem; margin: 0; line-height: 1.5; }
.pie-grupo address .icono { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--hoja-clara); }
.pie-grupo address a { display: inline-flex; align-items: center; min-height: 1.5rem; overflow-wrap: anywhere; }
.pie-grupo ul { list-style: none; margin: 0; padding: 0; }
.pie-grupo li a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.pie-grupo li a:hover { text-decoration: underline; }
.pie-final { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-2); padding-block: var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(244, 242, 232, .14); font-size: var(--t-s); }
.pie-final p { margin: 0; }
.pie-final ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-3); }
.pie-final a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------------------------------------------------------------- móvil */
@media (max-width: 47.99rem) {
  :root { --hoja: 5rem .9rem 5rem .9rem; --hoja-inversa: .9rem 5rem .9rem 5rem; }
  .bloque { padding-block: var(--e-6); }
  .portada { padding-block: var(--e-4) var(--e-6); }
  .hoja-foto-grande img { aspect-ratio: 1 / 1; border-radius: 8rem 1rem 8rem 1rem; }
  .portada-ficha { position: relative; left: auto; bottom: auto; width: auto; margin: -3rem var(--e-3) 0; }
  .botones-fila .boton { flex: 1 1 100%; }
  .grupo-texto { padding: var(--e-3); }
  .pilares { margin-top: var(--e-5); gap: var(--e-4); }
  .pilar-numero { font-size: 2.5rem; }
  .tarjeta { padding: var(--e-3); }
  .tarjetas-con-destacada .tarjeta-destacada { padding: var(--e-4) var(--e-3); }
  .tarjeta-destacada .tarjeta-titulo { font-size: var(--t-2xl); }
  .visita-mapa { min-height: 25rem; }
  .visita-lugar { top: var(--e-3); left: var(--e-3); right: var(--e-3); }
  .visita-rama { top: -1.5rem; right: -1.5rem; width: 46%; opacity: .45; }
  .cta-caja { padding: var(--e-4) var(--e-3); border-radius: 3rem .9rem 3rem .9rem; }
  .carta-item { gap: var(--e-2); grid-template-columns: 1fr; }
  .carta-nombre { font-size: 1.625rem; }
  /* experiencia: la foto arriba, fundida con el verde, y el texto debajo */
  .experiencia { display: block; min-height: 0; padding-block: 0 var(--e-6); }
  .experiencia-fondo { position: relative; display: block; height: 15rem; }
  .experiencia::before { bottom: auto; height: 15rem; background: linear-gradient(180deg, rgba(43, 58, 28, .1) 30%, var(--bosque) 100%); }
  .experiencia-caja { margin-top: -2.5rem; position: relative; }
  .texto-entrada > p:first-child { font-size: 1.1875rem; }
}

/* ---------------------------------------------------------------- movimiento e impresión */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .franja, .cabecera, .pie, .cta, .visita-mapa, .botones-fila, .filtros, .saltar, .x-buscador, .formulario-bloque { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .visita, .experiencia, .ingredientes { background: none !important; color: #000 !important; }
  .visita *, .experiencia *, .ingredientes * { color: #000 !important; }
  .experiencia-fondo { display: none; }
}
.visita .boton-claro { color: var(--bosque); }
.visita .boton-claro:hover { color: var(--bosque); }

/* columna de lectura con lateral (páginas y entradas) */
.columna-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.columna-rejilla > * { min-width: 0; }
@media (min-width: 60rem) { .columna-rejilla { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e-6); } .lateral { position: sticky; top: calc(var(--cabecera) + var(--e-3)); } }
.texto-largo h2, .texto-largo h3, .texto-largo h4 { margin-left: 0; }
.lateral { display: grid; gap: var(--e-3); }
.lateral-datos { display: grid; gap: var(--e-2); padding: var(--e-3); border-radius: var(--r); background: var(--salvia-clara); }
.lateral-datos p { display: flex; gap: .6rem; margin: 0; line-height: 1.5; color: var(--bosque); }
.lateral-datos p .icono { color: var(--oliva); margin-top: .15rem; }
.lateral-datos .boton { width: 100%; }
@media (max-width: 59.99rem) { .lateral { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } }