/* somnia.es · copia fiel de la web de Squarespace (28/10/2026). Los colores y la letra son los del tema
   de Squarespace (material/somnia-es/css/), que ya eran los de la marca: verde #384646 (accent), azul
   #252A3E (black), crema #E6E7E2 (lightAccent) y gris azulado #8798AA (darkAccent); Poppins 300 en el
   texto y 500 en los títulos. La rejilla de cada sección la trae su propio CSS (el de Squarespace), que
   usa las variables --sqs-*: aquí van sus valores. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/a/poppins-400-latin.7d93459d86.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/a/poppins-500-latin.cd36de204a.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/a/poppins-600-latin.f4e80d9dfd.woff2") format("woff2"); }

:root {
  --verd: #384646; --blau: #252A3E; --crema: #E6E7E2; --acer: #8798AA; --blanc: #fff;
  --or: #7a6024; --or-ratlla: #a98a3e; --or-clar: #d2ba83;
  --maxPageWidth: 1400px; --pagePadding: 2vw;
  --sqs-site-gutter: var(--pagePadding); --sqs-mobile-site-gutter: 6vw; --sqs-site-max-width: var(--maxPageWidth);
  --fons: var(--blanc); --text: var(--blau); --titol: var(--blau); --enllac: var(--or); --boto: var(--verd);
  /* Los del tema de Squarespace, para los velos de las imágenes («hsla(var(--white-hsl), .93)») */
  --white-hsl: 0,0%,100%; --black-hsl: 228,25.25%,19.41%; --accent-hsl: 180,11.11%,24.71%;
  --lightAccent-hsl: 72,9.43%,89.61%; --darkAccent-hsl: 210.86,17.07%,59.8%;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--blanc); color: var(--blau); font: 300 1rem/1.8 "Poppins", system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.salta { position: absolute; left: -999px; } .salta:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--blanc); padding: .5rem 1rem; }
:focus-visible { outline: 2px solid var(--or-ratlla); outline-offset: 3px; }

/* La escala de títulos de Squarespace (heading-1…4: 4, 2,8, 2,2 y 1,2), con su misma fórmula */
h1, h2, h3, h4 { font-weight: 500; margin: 0 0 .5em; color: var(--titol); letter-spacing: 0; }
h1 { --v: 4; } h2 { --v: 2.8; } h3 { --v: 2.2; } h4 { --v: 1.2; }
/* El título que pasa a h1 (un h1 por página) conserva el tamaño de su nivel original */
h1.com-h2 { --v: 2.8; } h1.com-h3 { --v: 2.2; } h1.com-h4 { --v: 1.2; }
/* Para lectores de pantalla y buscadores: no se ve, pero se lee */
.amagat { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3, h4 { font-size: calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); line-height: calc(1.4em * (1 + (1 - var(--v)) / 25)); }
@media (min-width: 768px), (orientation: landscape) {
  h1, h2, h3, h4 { font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * .012 * 1400px + 1rem), calc(var(--v) * 1rem))); }
}
p { margin: 0 0 1em; }
.al-center { text-align: center; } .al-right { text-align: right; }
/* Los tamaños «grande» (1,4) y «pequeño» (0,9) del texto de Squarespace, con la misma fórmula fluida que los títulos */
.gran { --v: 1.4; } .petit { --v: .9; }
.gran, .petit { font-size: calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); }
@media (min-width: 768px), (orientation: landscape) {
  .gran, .petit { font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * .012 * 1400px + 1rem), calc(var(--v) * 1rem))); }
}
strong, b { font-weight: 600; }
/* Los resaltados dibujados a mano de Squarespace (una curva bajo la palabra): aquí, un subrayado */
mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
.text a, .entrada-cos a { color: var(--enllac); text-decoration: underline; text-decoration-color: var(--or-ratlla); text-underline-offset: 3px; }
.text a:hover, .entrada-cos a:hover { color: #5c4819; }
/* Las listas, con raya (el CSS propio de la web) */
.text ul, .entrada-cos ul { list-style: none; padding-left: 1.4em; }
.text ul li::before, .entrada-cos ul li::before { content: "—"; display: inline-block; width: 1.4em; margin-left: -1.4em; }

/* ── Cabecera ── */
.cap { position: sticky; top: 0; z-index: 20; background: var(--verd); color: var(--crema); }
/* Tres columnas iguales a los lados: el menú queda en el centro de la página, no del hueco que deja el logo (Pep, 29/10) */
.cap-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 1rem 2vw; min-height: 100px; box-sizing: border-box; }
.cap-in > .marca { justify-self: start; }
.cap-in > .idiomes, .cap-in > .menu-boto { justify-self: end; grid-column: 3; grid-row: 1; }
/* El selector de idioma: los tres, el actual subrayado */
.idiomes { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; letter-spacing: .04em; }
.idiomes a { display: inline-block; padding: .5rem .45rem; text-decoration: none; opacity: .75; }
.idiomes a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.idiomes a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.menu-mobil .idiomes { font-size: 1rem; margin-top: 1rem; gap: .6rem; }
.marca img { width: auto; height: 65px; }
.nav { display: flex; gap: 2rem; font-size: .95rem; font-weight: 300; }
.nav a { text-decoration: none; padding: .5rem 0; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.menu-boto { display: none; background: none; border: 0; color: inherit; width: 44px; height: 44px; cursor: pointer; }
.menu-boto span, .menu-boto span::before, .menu-boto span::after { display: block; width: 26px; height: 1.5px; background: currentColor; position: relative; margin: auto; content: ""; }
.menu-boto span::before { position: absolute; top: -8px; } .menu-boto span::after { position: absolute; top: 8px; }
.menu-mobil { padding: 1rem 6vw 2rem; display: grid; gap: .4rem; font-size: 1.4rem; }
.menu-mobil a { text-decoration: none; padding: .4rem 0; }
.menu-mobil[hidden] { display: none; }   /* que una regla propia no le gane al hidden */
@media (max-width: 767px) { .nav, .cap-in > .idiomes { display: none; } .menu-boto { display: block; } .marca img { height: 58px; }
  .cap-in { grid-template-columns: 1fr auto; } .cap-in > .menu-boto { grid-column: 2; } }

/* ── Secciones (temas de Squarespace) ── */
.seccio { position: relative; background: var(--fons); color: var(--text); padding: 3.3vmax 0; overflow: hidden; }
.tema-white, .tema-white-bold, .tema- { --fons: var(--blanc); --text: var(--blau); --titol: var(--blau); }
.tema-white-bold { --titol: var(--verd); }
.tema-light, .tema-light-bold { --fons: var(--crema); --text: var(--blau); --titol: var(--blau); }
.tema-light-bold { --titol: var(--verd); }
.tema-dark, .tema-dark-bold { --fons: var(--acer); --text: var(--blanc); --titol: var(--blanc); --enllac: var(--or-clar); --boto: var(--blanc); }
.tema-bright, .tema-bright-inverse { --fons: var(--verd); --text: var(--blanc); --titol: var(--blanc); --enllac: var(--or-clar); --boto: var(--blanc); }
.tema-black, .tema-black-bold { --fons: var(--blau); --text: var(--blanc); --titol: var(--blanc); --enllac: var(--or-clar); --boto: var(--blanc); }
.seccio-fons { position: absolute; inset: 0; }
.seccio-fons picture, .seccio-fons img { width: 100%; height: 100%; object-fit: cover; }
.seccio-fons .vel { position: absolute; inset: 0; background: #000; }
.seccio > .fluid-engine, .seccio > .seccio-in { position: relative; }
/* La foto de cabecera de las páginas (la primera sección, sin altura propia): como en la web, casi cuadrada en el móvil y
   un 56 % del ancho en escritorio (medido en las capturas del 28/10) */
.regio { min-height: 94vw; padding: 0; } @media (min-width: 768px) { .regio { min-height: 56vw; } }
/* El separador curvo de Squarespace («section divider»): el borde de abajo sube en curva hacia la derecha
   y deja ver la sección siguiente, que se mete debajo */
/* cada separador, por encima del siguiente (el z-index va en la plantilla, decreciente) */
.divisor { margin-bottom: -7vw; padding-bottom: calc(3.3vmax + 7vw);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7vw + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V3C65 6 35 8.5 0 10Z'/%3E%3C/svg%3E") bottom / 100% 7vw no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7vw + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V3C65 6 35 8.5 0 10Z'/%3E%3C/svg%3E") bottom / 100% 7vw no-repeat; }
.divisor + .seccio { padding-top: calc(3.3vmax + 7vw); }
/* Las alturas de sección de Squarespace (33, 66 y 100 % de la pantalla), sin contar la cabecera fija, y el contenido en medio */
.section-height--small { min-height: 33vh; } .section-height--medium { min-height: 66vh; } .section-height--large { min-height: calc(100vh - 100px); }
@media (max-width: 767px) { .section-height--large { min-height: calc(100vh - 100px); } }
.seccio[class*="section-height--"] { display: flex; flex-direction: column; justify-content: center; }
.seccio.vertical-alignment--top { justify-content: flex-start; } .seccio.vertical-alignment--bottom { justify-content: flex-end; }
.seccio > .fluid-engine { width: 100%; }
/* Sin foto de fondo, la altura la da el contenido: estirada al 33 o 66 % de la pantalla, una sección corta
   quedaba con un blanco arriba y otro abajo (Pep, 28/10) */
.seccio[class*="section-height--"]:not(.amb-fons) { min-height: 0; }
.seccio.nomes-fons { padding: 0; }
.amb-fons { --text: var(--blanc); --titol: var(--blanc); }
.amb-fons.tema-white, .amb-fons.tema-light, .amb-fons.tema-light-bold, .amb-fons.tema-white-bold { --text: var(--blau); --titol: var(--blau); }

/* La rejilla: cada bloque ocupa su celda (el sitio, en el CSS de la sección) */
.fe-block { position: relative; display: flex; flex-direction: column; min-width: 0; }
.fe-block > .bloc { width: 100%; }
.fe-block > .bloc-imatge { height: 100%; }
.bloc-imatge picture, .bloc-imatge img { width: 100%; height: 100%; object-fit: cover; }
.bloc-imatge.ajusta img { object-fit: contain; }
/* La imagen ajustada llena su casilla sin empujarla: si no, su alto natural agrandaría la fila (la «§») */
.fe-block > .bloc-imatge.ajusta { contain: size; }
.bloc-imatge { position: relative; }
.vel-imatge { position: absolute; inset: 0; pointer-events: none; }
.bloc-imatge a { display: block; height: 100%; }
.bloc-imatge figcaption { font-size: .8rem; padding-top: .5rem; }
.text > :last-child { margin-bottom: 0; }
/* Un bloque de texto con fondo (las tarjetas de los manuales): se centra en su celda */
.amb-fons-bloc { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: .8rem 1rem; }
.amb-fons-bloc > * { margin: 0; }
.c-white { color: #fff; } .c-black { color: var(--blau); } .c-accent { color: var(--verd); } .c-lightAccent { color: var(--crema); } .c-darkAccent { color: var(--acer); }
.text li > p, .entrada-cos li > p { margin: 0; }
.text li > p:first-child, .entrada-cos li > p:first-child { display: inline; }   /* la raya, en la misma línea; los párrafos siguientes, debajo */

/* Botones: el «pill» con borde de la web */
.boto { display: inline-block; border: 1px solid var(--boto); color: var(--boto); background: transparent; border-radius: 300px;
        padding: 1.5rem 2.2rem; font: 500 1rem/1.2 "Poppins", sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.boto:hover { background: var(--boto); color: var(--fons); }
.bloc-boto { display: flex; justify-content: center; align-items: center; height: 100%; }
.bloc-boto.al-left { justify-content: flex-start; } .bloc-boto.al-right { justify-content: flex-end; }
/* «sqs-stretched»: el botón llena la casilla, con el texto en medio */
.bloc-boto.estirat { align-items: stretch; }
.bloc-boto.estirat .boto { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 767px) { .boto { padding: 1.2rem 1.8rem; } }
.linia { border: 0; border-top: 1px solid currentColor; width: 100%; margin: auto 0; opacity: .8; }

/* Enlaces a lo de fuera (mapa, vídeo, Instagram): una tarjeta, sin cargar nada de fuera */
.fora { display: flex; gap: .8rem; align-items: center; border: 1px solid currentColor; border-radius: 6px; padding: 1rem 1.2rem; text-decoration: none; margin: 1rem 0; }
.fora small { display: block; opacity: .75; }

/* Las redes */
.xarxes { display: flex; gap: .6rem; justify-content: center; }
.xarxes a { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid currentColor; border-radius: 50%; }
.xarxes svg { width: 20px; height: 20px; fill: currentColor; }

/* Desplegables (preguntas) */
.acordio details { border-bottom: 1px solid currentColor; padding: 1rem 0; }
.acordio summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.acordio summary::after { content: "+"; font-size: 1.4rem; line-height: 1; }
.acordio details[open] summary::after { content: "–"; }
.acordio summary::-webkit-details-marker { display: none; }
.acordio details > div { padding-top: .8rem; }

/* Formularios */
.form { display: grid; gap: 1rem; }
.form label { display: grid; gap: .3rem; font-size: .85rem; }
/* Como en la web: sin caja, solo la raya de abajo */
.form input:not([type="checkbox"]), .form textarea { font: inherit; padding: .6rem 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; }
.form textarea { border: 1px solid currentColor; padding: .6rem; }
.form .casella { display: flex; gap: .6rem; align-items: flex-start; }
.form .ajuda { font-size: .8rem; opacity: .8; margin: .2rem 0 .6rem; }
/* La casilla de privacidad: su título, el texto legal en pequeño y la casilla con su frase (como en Squarespace) */
.form .casella-grup { border: 0; margin: 0; padding: 0; min-width: 0; }
.form .casella-grup legend { font-size: .85rem; padding: 0; margin-bottom: .3rem; }
.form .avis { font-size: .85rem; }
/* El campo trampa: fuera de la vista y del teclado, no con display:none (los robots lo saltarían) */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form-avis { font-weight: 500; }
.form-falla { color: #B0392E; }
.form-clausula { font-size: .8rem; line-height: 1.6; opacity: .85; margin: .2rem 0 0; }
.form [aria-invalid="true"] { border-color: #B0392E; outline: 1px solid #B0392E; }
/* Sin JavaScript, el receptor vuelve a /contacto#enviado o #error: el aviso se ve con :target */
#enviado:target, #error:target { display: block; }

/* ── Lista (carrusel de «Nuestros singulares») ── */
.llista-titol { text-align: center; padding: 0 2vw; }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: 22vw; gap: 2.6vw; overflow-x: auto; scroll-snap-type: x mandatory;
            padding: 1rem 2vw 1.5rem; scrollbar-width: thin; }
.carrusel > li { list-style: none; scroll-snap-align: start; }
.carrusel a { text-decoration: none; }
.carrusel { margin: 0; scroll-padding-left: 2vw; }
.carrusel picture, .carrusel img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.carrusel h3 { --v: 2; margin-top: 1rem; }
.carrusel .desc { font-size: .9rem; }
.llista-boto { text-align: center; margin-top: 2.5rem; }
/* Las flechas: discretas, a los lados de las fotos; las enciende web.js (sin JS, se desliza igual) */
.carrusel-caixa { position: relative; }
.carrusel { scrollbar-width: none; } .carrusel::-webkit-scrollbar { display: none; }
.carrusel-fletxa { position: absolute; top: calc(1rem + 22vw * 4 / 3 / 2); transform: translateY(-50%); z-index: 2; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(37, 42, 62, .55); color: #fff; font: 300 1.8rem/1 "Poppins", sans-serif; cursor: pointer;
  display: grid; place-items: center; padding: 0 0 4px; transition: background .2s, opacity .2s; }
.carrusel-fletxa:hover, .carrusel-fletxa:focus-visible { background: rgba(37, 42, 62, .85); }
.carrusel-fletxa:disabled { opacity: 0; pointer-events: none; }
.carrusel-fletxa.enrere { left: 1vw; } .carrusel-fletxa.endavant { right: 1vw; }
.carrusel-fletxa[hidden] { display: none; }   /* que la regla display de arriba no le gane al hidden */
@media (max-width: 767px) { .carrusel-fletxa { top: calc(1rem + 92vw * 4 / 3 / 2); width: 38px; height: 38px; font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .carrusel { scroll-behavior: auto; } }
@media (max-width: 767px) { .carrusel { grid-auto-columns: 92%; } }

/* ── Blog ── */
.blog-graella { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2vw; padding: 0 2vw; list-style: none; margin: 0; }
.blog-graella article { text-align: center; }
.blog-graella picture, .blog-graella img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.blog-graella time { display: block; font-size: .8rem; margin: 1rem 0 .4rem; font-weight: 400; }
.blog-graella h2 { --v: 1.9; margin: 0; }
.blog-graella a { text-decoration: none; }
@media (max-width: 900px) { .blog-graella { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .blog-graella { grid-template-columns: 1fr; } }
.blog-cap { text-align: center; padding: 3rem 2vw 2rem; }
.blog-cap p { max-width: 46rem; margin: 0 auto; }
.molles { font-size: .8rem; padding: 1rem 2vw 0; }
.molles a { color: inherit; }

.entrada { max-width: 760px; margin: 0 auto; padding: 1.5rem 6vw 3rem; }
@media (min-width: 900px) { .entrada { padding-left: 0; padding-right: 0; } }
.entrada-data { font-size: .8rem; font-weight: 400; }
.entrada h1 { --v: 3.4; margin: .6rem 0 2rem; color: var(--verd); }
.entrada-cos h2, .entrada-cos h3 { color: var(--verd); font-weight: 600; margin-top: 2rem; }
.entrada-cos { font-size: .95rem; }
.entrada-cos .bloc-imatge { margin: 1.5rem 0; }
.entrada-cos .bloc-imatge img { height: auto; }
.entrada-cos blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 2px solid var(--or-ratlla); font-style: italic; }
.entrada-peu { margin-top: 3rem; border-top: 1px solid var(--crema); padding-top: 1.2rem; font-size: .85rem; display: grid; gap: .6rem; }
.entrada-peu a { margin-right: .8rem; }
.entrada-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; font-size: .9rem; }
.entrada-nav a { text-decoration: none; max-width: 45%; }
.entrada-nav small { display: block; opacity: .7; }
.cos-crema { background: var(--crema); }

/* ── Pie ── */
.peu { background: var(--verd); color: var(--crema); padding: 3rem 6vw; font-size: .9rem; }
.peu-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; align-items: start; max-width: 1400px; margin: 0 auto; }
.peu-logo img { height: 52px; width: auto; }
.peu h2 { color: var(--crema); --v: 1; font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }
.peu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.peu a { color: inherit; display: inline-block; padding: .2rem 0; }
.peu .xarxes { justify-content: flex-start; }
/* «.peu a» (inline-block, con relleno) le ganaba al círculo y descentraba el icono */
.peu .xarxes a { display: grid; padding: 0; }
@media (max-width: 767px) { .peu-in { grid-template-columns: 1fr 1fr; } .peu-in > :first-child, .peu-in > :nth-child(2) { grid-column: 1 / -1; }
  .peu-in > :nth-child(2) .xarxes { justify-content: center; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Formularios en ventana (en Squarespace, «lightbox»): el <dialog> va a la capa superior, fuera de cualquier apilado */
.ventana { border: 0; padding: 2.5rem 2rem 2rem; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
           background: var(--crema); color: var(--blau); --text: var(--blau); --titol: var(--blau); --enllac: var(--or); --boto: var(--blau); --fons: var(--crema); }
.ventana h3 { --v: 1.6; }
.ventana::backdrop { background: rgba(37, 42, 62, .6); }
.ventana .tanca { position: absolute; top: .6rem; right: .8rem; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: inherit; }

/* ══ El estilo fino de tuzona.somnia.es (Pep, 30/10: «Dale un estilo más fino a todo somnia.es: el estilo que
   trabajamos para tuzona.somnia.es»). Los tokens y criterios son los de su hoja (material/tuzona/, zona.css del
   hub, 16/09–07/10): papel claro y superficie casi blanca, tinta casi negra, titulares en Cormorant Garamond en verde
   bosque, dorado solo para filetes, rótulos y enlaces, botones rectangulares de borde fino y el :hover del hub.
   Va como capa al final: la rejilla de Squarespace y los tamaños de cada bloque no cambian. ══ */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/a/cormorant-garamond-latin.d80df8ff5a.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/a/cormorant-garamond-italic-latin.6f2f5c3b1a.woff2") format("woff2"); }
:root {
  --papel: #EFF0EA; --superficie: #FAFAF7; --tinta: #22282B; --tinta-suave: #5B6668; --linea: rgba(34, 40, 43, .14);
  --sombra: 0 1px 2px rgba(34, 40, 43, .06); --oro-txt: #705B26; --oro-claro: #D9BE7A;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --hover-primario: #2b3636; --hover-fondo: rgba(56, 70, 70, .07); --hover-dur: .12s; --hover-texto-claro: #F6F5F0;
  --or: var(--oro-txt); --or-ratlla: #A98A3E; --or-clar: var(--oro-claro);
}
body { background: var(--superficie); color: var(--tinta); line-height: 1.7; }
.tema-white, .tema-white-bold, .tema- { --fons: var(--superficie); --text: var(--tinta); --titol: var(--verd); }
.tema-light, .tema-light-bold { --fons: var(--papel); --text: var(--tinta); --titol: var(--verd); }
.amb-fons.tema-white, .amb-fons.tema-light, .amb-fons.tema-light-bold, .amb-fons.tema-white-bold { --text: var(--tinta); --titol: var(--verd); }

/* Titulares: Cormorant Garamond 600, un punto más grandes que la Poppins de antes (la serif tiene el ojo más pequeño) */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; text-wrap: balance; }
h1 { --v: 4.3; } h2 { --v: 3.1; } h3 { --v: 2.5; } h4 { --v: 1.45; }
h1.com-h2 { --v: 3.1; } h1.com-h3 { --v: 2.5; } h1.com-h4 { --v: 1.45; }
h1, h2, h3, h4 { line-height: 1.15; }
.carrusel h3 { --v: 2.3; }
/* Los del pie y los de los formularios no son titulares: rótulos en versalitas, como el «ojo» de tuzona */
.peu h2, .form .casella-grup legend { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.peu h2 { color: var(--oro-claro); }

/* Enlaces de texto: se encienden en dorado */
.text a, .entrada-cos a { color: var(--oro-txt); text-decoration-color: var(--or-ratlla); text-decoration-thickness: 1px; transition: color var(--hover-dur) ease; }
.text a:hover, .entrada-cos a:hover { color: var(--verd); }
.tema-black .text a, .tema-bright .text a, .tema-dark .text a, .amb-fons:not(.tema-white):not(.tema-light):not(.tema-light-bold):not(.tema-white-bold) .text a { color: var(--oro-claro); }
mark { text-decoration-color: var(--or-ratlla); }
.linia { border-top-color: var(--or-ratlla); opacity: 1; }

/* Botones: rectangulares, borde fino, sin píldora */
.boto { border-radius: 3px; padding: .85rem 1.6rem; font: 500 .95rem/1.2 "Poppins", sans-serif; letter-spacing: .01em;
        transition: background var(--hover-dur) ease, color var(--hover-dur) ease, border-color var(--hover-dur) ease; }
.tema-white .boto, .tema-light .boto, .tema-light-bold .boto, .tema-white-bold .boto, .tema- .boto, .ventana .boto { --boto: var(--verd); }
.tema-black .boto, .tema-bright .boto, .tema-dark .boto { --boto: var(--oro-claro); }
.tema-black .boto:hover, .tema-bright .boto:hover, .tema-dark .boto:hover { background: transparent; color: var(--hover-texto-claro); border-color: var(--hover-texto-claro); }
.boto:hover { background: var(--hover-primario); border-color: var(--hover-primario); color: var(--hover-texto-claro); }
@media (max-width: 767px) { .boto { padding: .8rem 1.3rem; } }

/* Cabecera y menú: más finos */
.nav { font-weight: 400; letter-spacing: .02em; font-size: .9rem; }
.nav a:hover, .nav a[aria-current] { text-decoration-color: var(--oro-claro); text-decoration-thickness: 1px; }

/* Formularios y ventana: líneas suaves, superficie casi blanca */
.form input:not([type="checkbox"]), .form textarea { border-color: var(--linea); }
.form input:not([type="checkbox"]):focus, .form textarea:focus { outline: none; border-color: var(--verd); }
.form textarea { background: var(--superficie); border-radius: 3px; }
.ventana { background: var(--superficie); border-radius: 4px; box-shadow: var(--sombra); --fons: var(--superficie); }
.form-clausula { color: var(--tinta-suave); opacity: 1; }

/* Tarjetas, citas y blog: filete dorado y sombra mínima */
.entrada-cos blockquote { border-left-color: var(--or-ratlla); }
.blog-graella article, .llista-entrades article { border-bottom: 1px solid var(--linea); }
.fora { border-color: var(--linea); border-radius: 4px; background: var(--superficie); box-shadow: var(--sombra); }
/* Las imágenes ajustadas (la «§» del Manifiesto, logos) traen fondo blanco: sobre el papel dejaban un rectángulo */
.bloc-imatge.ajusta img { mix-blend-mode: multiply; }