/**
 * FELTOO - Pàgines de plantilla (Fase 3.3)
 *
 * Un sol estil per a totes. L'única variable per plantilla és --accent
 * (accent_color), aplicada a dos elements i cap més:
 *   1. els números dels passos (.feltoo-tpl-steps li::before)
 *   2. les marques +/– de les preguntes (summary::after)
 * Els telèfons no porten accent: marc metàl·lic igual per a totes (7.1.9).
 * Tot limitat a .feltoo-tpl perquè la capçalera i el peu del tema no canviïn.
 * Fonts: Fraunces + Satoshi, com la home.
 */

.feltoo-tpl {
    --paper: #E8E4DF;
    --card: #F5F2ED;
    --ink: #474F40;  /* to del text del disseny de referència (7.1.6) */
    --moss: #5a6b4f;
    --sage: #a4a66a;
    --line: rgba(56, 62, 47, .16);
    --shadow: rgba(56, 62, 47, .14);
    --accent: var(--sage);
    /* Fons per bandes, de dalt a baix (redisseny 7.1.6) */
    --hero-bg: linear-gradient(to bottom right, #D6CBC2 0%, #D1C5BC 50%, #BCA59C 100%);
    --hero-line: #AAA09A;
    --band: #EBE7E3;
    --band-card: linear-gradient(180deg, #E0D9D3, #EBE7E3);
    --light: #F4F0ED;
    --white: #F9F9F9;
    /* Títol final: taupe enfosquit, >= 3:1 sobre --white */
    --taupe: #96887D;
    --header-h: 7.35rem;
    --crumb-h: 1.65rem;
    /* Amplada dels telèfons. A mòbil, com a molt ~62vh d'alçada (el telèfon fa ~2.12 × l'amplada) */
    --pw: min(277px, 78vw, 29.2vh);

    background: var(--light);
    color: var(--ink);
    font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    margin-block: 0;
}

.feltoo-tpl *,
.feltoo-tpl *::before,
.feltoo-tpl *::after { box-sizing: border-box; }

.feltoo-tpl img,
.feltoo-tpl video { max-width: 100%; }

.feltoo-tpl h1,
.feltoo-tpl h2,
.feltoo-tpl h3 {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 400;
    margin: 0;
    line-height: 1.12;
    color: var(--ink);
    letter-spacing: normal;
}
.feltoo-tpl h1 { font-size: clamp(2.4rem, 7vw, 3.5rem); font-weight: 300; letter-spacing: -.01em; }
.feltoo-tpl h2 { font-size: 1.67rem; font-weight: 300; }
/* Escala: text 17 → H3 21.3 → H2 26.7 → H1 38.4–56, cada nivell >= 1.25× l'anterior */
.feltoo-tpl h3 { font-size: 1.33rem; }
.feltoo-tpl p { margin: 0 0 1.1em; }
/* El CSS addicional del lloc posa p { font-family: Manrope }: aquí, Satoshi del .feltoo-tpl.
   :where() deixa l'especificitat a (0,1,0), i les classes de més avall (signatura, intro) manen. */
.feltoo-tpl :where(p) { font-family: inherit; }
.feltoo-tpl a { color: inherit; }

.feltoo-tpl-wrap { width: min(1000px, 100% - 2.5rem); margin-inline: auto; }
/* Alineat a l'esquerra amb la resta de la pàgina, no centrat */
.feltoo-tpl-narrow > * { max-width: 38rem; }

/* ---------- capçalera del tema: transparent sobre el hero ----------
   Només a aquestes pàgines (body amb <main class="feltoo-tpl">). Els estils
   del tema van inline després d'aquest fitxer: el prefix body:has() els guanya.
   La capçalera és estàtica (no sticky), surt del flux i el main li deixa lloc. */
body:has(> main.feltoo-tpl) { background: var(--white, #F9F9F9); }
body:has(> main.feltoo-tpl) .feltoo-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: transparent;
}
body:has(> main.feltoo-tpl) .feltoo-logo img { opacity: .9; }
body:has(> main.feltoo-tpl) .feltoo-nav a { color: #474F40; }
body:has(> main.feltoo-tpl) .feltoo-nav-btn { border-color: #474F40; }
body:has(> main.feltoo-tpl) .feltoo-nav-btn:hover { background: #474F40; color: #fff; }
@media (min-width: 1025px) {
    body:has(> main.feltoo-tpl) .feltoo-header { padding: 2.3rem 5.25rem; }
    body:has(> main.feltoo-tpl) .feltoo-logo img { height: 24px !important; }
}
/* isolation: el fons del hero (z-index -1) queda sobre el del main i no sota.
   overflow: clip retalla la part del fons del hero que puja per sobre de la pàgina. */
main.feltoo-tpl { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
/* Només amb la capçalera del tema: la mínima de recanvi continua dins del flux */
body:has(> .feltoo-header) > main.feltoo-tpl { padding-top: var(--header-h); }

/* ---------- breadcrumb (Rank Math) ---------- */
.feltoo-tpl-breadcrumb { padding-top: .4rem; line-height: 1.6; font-size: .8125rem; letter-spacing: .02em; color: var(--ink); }
.feltoo-tpl-breadcrumb p { margin: 0; }
.feltoo-tpl-breadcrumb a { text-decoration: none; }
.feltoo-tpl-breadcrumb a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* ---------- hero ---------- */
/* El degradat puja per sota del breadcrumb i de la capçalera transparent
   fins a dalt de la pàgina: capçalera i hero es veuen com un sol bloc */
.feltoo-tpl-hero { position: relative; padding: 2rem 0 2.75rem; }
.feltoo-tpl-hero::before {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--header-h) + var(--crumb-h)));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: var(--hero-bg);
}
.feltoo-tpl-hero-grid { display: grid; gap: 2.5rem; }
/* p.classe i no .classe: si no, .feltoo-tpl p (més específic) es menja els marges */
p.feltoo-tpl-eyebrow {
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0;
}
.feltoo-tpl-hero h1 {
    color: #fff;  /* com al disseny; 1.6:1 sobre el hero, decidit així */
    margin: .35rem 0 0;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--hero-line);
}
p.feltoo-tpl-deck {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(1.45rem, 1.2rem + 1.01vw, 1.85rem);
    font-weight: 300;
    line-height: 1.28;
    margin: 0;
    padding: 1.05rem 0 .93rem;
    border-bottom: 1px solid var(--hero-line);
}
p.feltoo-tpl-lede {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: .065em;
    padding: .15rem 0 .9rem;
    margin: 0 0 2rem;
    border-bottom: 1px solid var(--hero-line);
}

/* El vídeo dins d'un telèfon: és on es mirarà.
   Un sol estil per als dos telèfons (hero i segona captura): iPhone amb notch,
   marc de grafit fi. Pantalla 9:19.5, com un iPhone real; el vídeo (9:16) hi
   va sencer, sense retallar ni deformar, amb negre a dalt i a baix.
   El notch cau dins la franja negra de dalt.
   Mides relatives a --pw perquè a mòbil es redueixi tot igual. */
.feltoo-tpl-phone,
.feltoo-tpl-still {
    --bezel: calc(var(--pw) * .032);
    --radius: calc(var(--pw) * .155);
    --screen-radius: calc(var(--radius) - 3px - var(--bezel));  /* concèntric amb el marc */
    position: relative;
    width: var(--pw);
    padding: var(--bezel);
    border: 3px solid transparent;
    border-radius: var(--radius);
    background:
        linear-gradient(#050505, #050505) padding-box,
        linear-gradient(145deg, #57595c 0%, #2c2d2f 25%, #46484b 50%, #232426 75%, #4a4c4f 100%) border-box;
    box-shadow:
        0 1px 2px rgba(20, 22, 18, .2),
        0 14px 28px -10px rgba(56, 62, 47, .25),
        0 42px 80px -26px rgba(56, 62, 47, .35);
}
.feltoo-tpl-phone video,
.feltoo-tpl-phone img,
.feltoo-tpl-still img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 19.5;
    object-fit: contain;
    border-radius: var(--screen-radius);
    background: #000;
}
/* Notch a dalt de la pantalla: cos amb les cantonades de baix arrodonides,
   "orelles" corbes on toca el marc, altaveu i càmera frontal. Sense
   pointer-events: els controls del vídeo continuen funcionant. */
.feltoo-tpl-phone::before,
.feltoo-tpl-still::before {
    --nw: calc(var(--pw) * .50);   /* amplada del cos */
    --nh: calc(var(--pw) * .075);  /* alçada */
    --ne: calc(var(--pw) * .02);   /* orelles */
    content: "";
    position: absolute;
    top: var(--bezel);
    left: 50%;
    z-index: 1;
    width: calc(var(--nw) + 2 * var(--ne));
    height: var(--nh);
    transform: translateX(-50%);
    pointer-events: none;
    background:
        /* càmera frontal */
        radial-gradient(circle closest-side, #23314d 35%, #0b0c10 60%, transparent 66%) calc(50% + var(--nw) * .2) 38% / calc(var(--nh) * .42) calc(var(--nh) * .42) no-repeat,
        /* altaveu */
        linear-gradient(#26272a, #26272a) 50% 34% / calc(var(--nw) * .3) calc(var(--nh) * .1) no-repeat,
        /* forma (orelles, cos i cantonades de baix) en un sol SVG: sense les
           costures que quedaven entre peces de degradat.
           Unitats = 1% de --pw: 54 = --nw + 2 × --ne, 7.5 = --nh, radis 2 (orelles) i 4.5 (cantonades de baix) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 7.5'%3E%3Cpath d='M0 0H54A2 2 0 0 0 52 2V3A4.5 4.5 0 0 1 47.5 7.5H6.5A4.5 4.5 0 0 1 2 3V2A2 2 0 0 0 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Botons laterals: volum (2) a l'esquerra i encesa a la dreta, sobresurten 2px */
.feltoo-tpl-phone::after,
.feltoo-tpl-still::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 24%;
    width: 3px;
    height: 9%;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(90deg, #232426, #4a4c4f);
    box-shadow:
        0 calc(var(--pw) * .2) 0 #333437,
        calc(var(--pw) + 1px) calc(var(--pw) * .06) 0 #333437;
}
.feltoo-tpl-phone { margin-inline: auto; }
/* Botó de play propi (sense controls natius fins que es prem). El botó cobreix
   tota la pantalla del telèfon (tota és clicable); la icona, al centre. */
.feltoo-tpl-play {
    position: absolute;
    inset: var(--bezel);
    z-index: 2;
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: var(--screen-radius);
    background: transparent;
    cursor: pointer;
}
.feltoo-tpl-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--pw) * .24);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(20, 22, 18, .45);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* Sense margin-left: el camí ja té el centroide del triangle al centre */
.feltoo-tpl-play svg { width: 42%; height: 42%; fill: currentColor; }
.feltoo-tpl-play:hover .feltoo-tpl-play-icon { background: rgba(20, 22, 18, .6); }
.feltoo-tpl-play:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.feltoo-tpl-play[hidden] { display: none; }
p.feltoo-tpl-caption { text-align: center; font-size: .86rem; color: var(--moss); margin-top: 1rem; }

/* ---------- botons ---------- */
.feltoo-tpl-cta {
    display: inline-block;
    background: var(--ink);
    color: #ECE7E2;
    font-family: "Satoshi", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.6;
    padding: 1rem 1.9rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid var(--ink);
}
.feltoo-tpl a.feltoo-tpl-cta { color: #ECE7E2; }
.feltoo-tpl-cta:hover { background: var(--moss); border-color: var(--moss); }
.feltoo-tpl a:focus-visible,
.feltoo-tpl summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.feltoo-tpl p.feltoo-tpl-cta-note { font-size: .96rem; letter-spacing: .02em; margin: .9rem 0 0 .7rem; }
.feltoo-tpl p.feltoo-tpl-privacy { font-size: .88rem; letter-spacing: .03em; margin: 2.5rem 0 0 .5rem; }
.feltoo-tpl-ghost {
    display: inline-block;
    margin-top: 3.5rem;
    padding: 0 1.2rem .35rem;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-size: .9rem;
    letter-spacing: .02em;
    text-decoration: none;
}

/* ---------- seccions ---------- */
/* Sense línies entre seccions: cada banda té el seu fons */
.feltoo-tpl-section { padding: 4rem 0; background: var(--light); }
.feltoo-tpl-hero + .feltoo-tpl-section { background: linear-gradient(180deg, var(--band), #EFEBE8); }
.feltoo-tpl-section + .feltoo-tpl-section:not(.feltoo-tpl-closing) { padding-top: 0; }
.feltoo-tpl-hero + .feltoo-tpl-section + .feltoo-tpl-section { padding-top: 5rem; }
.feltoo-tpl-section + .feltoo-tpl-section:not(.feltoo-tpl-closing) > .feltoo-tpl-wrap {
    border-top: 1px solid var(--line);
    padding-top: 2.5rem;
}
.feltoo-tpl-hero + .feltoo-tpl-section + .feltoo-tpl-section > .feltoo-tpl-wrap { border-top: 0; padding-top: 0; }
.feltoo-tpl-two { display: grid; gap: 2.2rem; }

.feltoo-tpl-two h2 { text-transform: uppercase; letter-spacing: .02em; }
.feltoo-tpl-spec { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.feltoo-tpl-spec li {
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 1.2rem;
    align-items: baseline;
}
.feltoo-tpl-spec li span:first-child { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: .92rem; }
.feltoo-tpl-spec li span:last-child { font-size: .875rem; letter-spacing: .02em; }

/* Preu: targeta */
.feltoo-tpl-two > div:last-child {
    align-self: start;
    background: var(--band-card);
    border-radius: 20px;
    padding: 1.6rem 1.25rem 1.25rem;
    text-align: center;
}
.feltoo-tpl-two > div:last-child .feltoo-tpl-cta { display: block; }
p.feltoo-tpl-price { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: 3.4rem; line-height: 1; margin: 1.6rem 0 1.4rem; }
.feltoo-tpl-price small {
    display: block;
    font-family: "Satoshi", system-ui, sans-serif;
    font-size: .8125rem;
    letter-spacing: .02em;
    line-height: 1.5;
    max-width: 16em;
    margin: .9rem auto 0;
}

.feltoo-tpl-steps { list-style: none; counter-reset: s; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.feltoo-tpl-steps li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; gap: .9rem; align-items: start; }
.feltoo-tpl-steps li::before {
    content: counter(s);
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.3rem;
    color: var(--accent); /* accent 1/2 */
    line-height: 1.2;
}
.feltoo-tpl-steps h3 { margin-bottom: .2rem; }
.feltoo-tpl-steps p { margin: 0; color: var(--moss); }

.feltoo-tpl-essay h2 { margin-bottom: .5rem; }
.feltoo-tpl-essay p { font-size: 1rem; font-weight: 400; line-height: 1.65; letter-spacing: .01em; }
/* Segona captura del vídeo: el mateix telèfon (vegeu .feltoo-tpl-phone), inclinat,
   surt per la dreta i queda tallat per la vora de la pàgina (main fa overflow: clip) */
.feltoo-tpl-still {
    margin: 2.5rem -12vw 0 auto;
    transform: rotate(-20deg);
}
@media (min-width: 1025px) {
    /* Al lateral, com al disseny: comença cap a dos terços de la pàgina i
       en sobresurt per la dreta. Pot passar per sobre de l'inici de la secció
       següent, on el text és a l'esquerra. */
    .feltoo-tpl-has-still { position: relative; min-height: 34rem; }
    .feltoo-tpl-has-still .feltoo-tpl-essay > * { max-width: 34rem; }
    .feltoo-tpl-still {
        position: absolute;
        z-index: 1;
        top: 4rem;
        right: calc(-1 * min(6vw, 90px));
        margin: 0;
    }
}
.feltoo-tpl-signature { font-family: "Fraunces", Georgia, serif; font-style: italic; color: var(--moss); }

/* Graella dels hubs: les targetes del carrusel (vegeu .feltoo-tpl-slide), 2 / 3 / 4 per fila.
   Cada targeta és el seu propi contenidor: --card-w (radi del pòster) = la seva amplada. */
.feltoo-tpl-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.1rem; margin-top: 1.6rem; }
.feltoo-tpl-gallery .feltoo-tpl-slide { width: auto; container-type: inline-size; --card-w: 100cqw; }
/* "Other … templates": carrusel infinit, només CSS.
   La pista porta dos grups idèntics i es desplaça -50% (un grup) en bucle.
   Cada grup inclou el gap al final (padding-right) perquè els dos grups facin
   exactament el mateix i la costura no salti. Durada = targetes × temps per
   targeta (--count ve del PHP). La graella dels hubs (.feltoo-tpl-gallery) no canvia. */
.feltoo-tpl-carousel {
    --feltoo-carousel-card-time: 4.5s;
    --gap: 1.1rem;
    --per-view: 1.3;
    container-type: inline-size;
    overflow: hidden;
    margin-top: 1.6rem;
}
.feltoo-tpl-carousel-track {
    display: flex;
    width: max-content;
    animation: feltoo-carousel calc(var(--count, 8) * var(--feltoo-carousel-card-time)) linear infinite;
}
.feltoo-tpl-carousel-group { display: flex; gap: var(--gap); padding-right: var(--gap); }
.feltoo-tpl-carousel:focus-within .feltoo-tpl-carousel-track,
.feltoo-tpl-carousel.is-paused .feltoo-tpl-carousel-track { animation-play-state: paused; }
/* Només amb ratolí: al mòbil el :hover es queda enganxat després de tocar */
@media (hover: hover) {
    .feltoo-tpl-carousel:hover .feltoo-tpl-carousel-track { animation-play-state: paused; }
}
@keyframes feltoo-carousel { to { transform: translateX(-50%); } }
.feltoo-tpl-slide {
    --card-w: calc((100cqw + var(--gap)) / var(--per-view) - var(--gap));
    /* width i no només flex-basis: si no, l'amplada intrínseca del grup es
       calcula amb el text sense partir i el -50% no cau on toca */
    flex: 0 0 auto;
    width: var(--card-w);
    display: block;
    text-align: center;
    text-decoration: none;
}
/* Com la pantalla del telèfon del hero, sense telèfon: mateix radi en proporció
   a l'amplada (~12%) */
.feltoo-tpl-slide-thumb {
    display: block;
    aspect-ratio: 9 / 16;
    border-radius: calc(var(--card-w) * .12);
    overflow: hidden;
    background: linear-gradient(170deg, #efece2, #cfd2bb);
    margin-bottom: .7rem;
}
.feltoo-tpl-slide-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feltoo-tpl-slide strong { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 1.02rem; display: block; }
.feltoo-tpl-slide em { display: block; font-style: normal; font-size: .875rem; line-height: 1.45; color: var(--moss); margin-top: .2rem; }
.feltoo-tpl-slide:focus-visible { outline-offset: -2px; }
@media (min-width: 800px) {
    .feltoo-tpl-carousel { --per-view: 4; }
}
/* Totes les targetes caben en una fila: quieta i sense les còpies
   (--still: 1 targeta, a tot arreu; --still-wide: fins a 4, a l'escriptori) */
.feltoo-tpl-carousel--still .feltoo-tpl-carousel-track { animation: none; }
.feltoo-tpl-carousel--still .feltoo-tpl-carousel-group { padding-right: 0; }
.feltoo-tpl-carousel--still .feltoo-tpl-carousel-group[aria-hidden="true"],
.feltoo-tpl-carousel--still .feltoo-tpl-slide[aria-hidden="true"] { display: none; }
@media (min-width: 800px) {
    .feltoo-tpl-carousel--still-wide .feltoo-tpl-carousel-track { animation: none; }
    .feltoo-tpl-carousel--still-wide .feltoo-tpl-carousel-group { padding-right: 0; }
    .feltoo-tpl-carousel--still-wide .feltoo-tpl-carousel-group[aria-hidden="true"],
    .feltoo-tpl-carousel--still-wide .feltoo-tpl-slide[aria-hidden="true"] { display: none; }
}
/* Sense moviment: una fila amb scroll manual, sense les còpies */
@media (prefers-reduced-motion: reduce) {
    .feltoo-tpl-carousel { overflow-x: auto; }
    .feltoo-tpl-carousel-track { animation: none; }
    .feltoo-tpl-carousel-group[aria-hidden="true"],
    .feltoo-tpl-slide[aria-hidden="true"] { display: none; }
}

/* [feltoo_templates] dins d'un article del blog: sobre el fons de l'article, sense
   caixa. Graella de 3 (2 per fila al mòbil). Els enllaços del contingut de l'article
   (TT4 i el CSS addicional del lloc) porten color i subratllat: aquí, com a les
   pàgines de plantilla. .feltoo-tpl.feltoo-tpl-embed (0,2,0) guanya els selectors
   del contingut (.wp-block-post-content a, a:where(...)). */
.feltoo-tpl.feltoo-tpl-embed { background: transparent; overflow: visible; margin-block: 2.5rem; }
.feltoo-tpl.feltoo-tpl-embed .feltoo-tpl-slide-thumb { background: transparent; }
.feltoo-tpl.feltoo-tpl-embed .feltoo-tpl-slide-thumb img { width: 100%; height: 100%; max-width: none; margin: 0; }
.feltoo-tpl.feltoo-tpl-embed a.feltoo-tpl-slide,
.feltoo-tpl.feltoo-tpl-embed a.feltoo-tpl-slide:hover,
.feltoo-tpl.feltoo-tpl-embed a.feltoo-tpl-slide:focus { color: var(--ink); text-decoration: none; box-shadow: none; }
.feltoo-tpl.feltoo-tpl-embed a.feltoo-tpl-slide strong { color: var(--ink); }
.feltoo-tpl.feltoo-tpl-embed a.feltoo-tpl-slide em { color: var(--moss); }
.feltoo-tpl.feltoo-tpl-embed a.feltoo-tpl-ghost,
.feltoo-tpl.feltoo-tpl-embed a.feltoo-tpl-ghost:hover { color: var(--ink); text-decoration: none; margin-top: 2rem; }
@media (min-width: 800px) {
    .feltoo-tpl.feltoo-tpl-embed .feltoo-tpl-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Només a la previsualització, per a editors */
.feltoo-tpl-draft { display: inline-block; font-size: .75rem; color: var(--moss); border: 1px solid var(--line); padding: 0 .4rem; margin-bottom: .3rem; }

/* ---------- hubs (Fase 3.6): entrada escrita a l'editor de blocs ----------
   Hero: H1, frase (.feltoo-tpl-deck) i paràgraf (.feltoo-tpl-lede) com a les
   plantilles, a l'amplada de la columna de text (sense el telèfon). Seccions:
   com "About this template" (.feltoo-tpl-essay). */
.feltoo-tpl-hub-intro > :last-child { margin-bottom: 0; }
.feltoo-tpl-essay li { font-size: 1rem; font-weight: 400; line-height: 1.65; letter-spacing: .01em; }
.feltoo-tpl-hub-content > :last-child { margin-bottom: 0; }
.feltoo-tpl-hub-content h2 { margin: 2.2rem 0 .8rem; }
.feltoo-tpl-hub-content h3 { margin: 1.6rem 0 .5rem; }
.feltoo-tpl-hub-content ul,
.feltoo-tpl-hub-content ol { margin: 0 0 1.1em; padding-left: 1.2em; }
.feltoo-tpl-hub-content li { margin-bottom: .35em; }
.feltoo-tpl-hub-content a { text-underline-offset: .2em; }

/* ---------- pàgines de contingut (7.1.48): casella "Feltoo content page" ----------
   Hero dels hubs (H1 i entradeta) i, a sota, tot el contingut seguit a la
   columna de lectura (.feltoo-tpl-essay, .feltoo-tpl-hub-content). Aquí només
   el que els hubs no porten: botó dins del text i altres blocs de l'editor. */
.feltoo-tpl-page .feltoo-tpl-section { padding-bottom: 5rem; }
.feltoo-tpl-page-content > :first-child { margin-top: 0; }
.feltoo-tpl-page-content strong { font-weight: 500; }
/* Paràgraf amb només un enllaç: el botó de les landings */
.feltoo-tpl p.feltoo-tpl-cta-row { margin: 2rem 0; }
.feltoo-tpl-page-content a.feltoo-tpl-cta { font-size: 1rem; text-decoration: none; text-align: center; }
.feltoo-tpl-cta strong,
.feltoo-tpl-cta b { font-weight: inherit; }
/* Altres blocs, sobris i dins de la columna */
.feltoo-tpl-page-content figure { margin: 2rem 0; }
.feltoo-tpl-page-content img { height: auto; display: block; }
.feltoo-tpl-page-content figcaption { font-size: .86rem; color: var(--moss); margin-top: .6rem; }
.feltoo-tpl-page-content blockquote {
    margin: 2rem 0;
    padding: .2rem 0 .2rem 1.3rem;
    border-left: 2px solid var(--sage);
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.2rem;
}
.feltoo-tpl-page-content blockquote p { font-size: inherit; font-family: inherit; }
.feltoo-tpl-page-content blockquote cite { display: block; font-family: "Satoshi", system-ui, sans-serif; font-size: .86rem; font-style: normal; color: var(--moss); }
.feltoo-tpl-page-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.feltoo-tpl-page-content table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.feltoo-tpl-page-content .wp-block-table { overflow-x: auto; }
.feltoo-tpl-page-content th,
.feltoo-tpl-page-content td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.feltoo-tpl-page-content th { font-weight: 500; }

/* [feltoo_template_grid layout="carousel"] (per defecte a les pàgines de contingut):
   al mòbil, el carrusel de les landings amb 2,3 targetes a la vista; a l'escriptori,
   la graella del hub (4 per fila), quieta i sense les còpies del bucle, a l'amplada
   de la pàgina encara que sigui dins de la columna de lectura. */
.feltoo-tpl-narrow > .feltoo-tpl-showcase { max-width: none; }
.feltoo-tpl-showcase { margin: 2.2rem 0; }
.feltoo-tpl-showcase .feltoo-tpl-carousel { --per-view: 2.3; margin-top: 0; }
.feltoo-tpl-showcase .feltoo-tpl-slide strong { font-weight: 400; }
.feltoo-tpl-showcase a.feltoo-tpl-slide { text-decoration: none; }
@media (min-width: 800px) {
    .feltoo-tpl-showcase .feltoo-tpl-carousel { overflow: visible; }
    .feltoo-tpl-showcase .feltoo-tpl-carousel-track { animation: none; width: auto; display: block; }
    .feltoo-tpl-showcase .feltoo-tpl-carousel-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.1rem; padding-right: 0; }
    .feltoo-tpl-showcase .feltoo-tpl-carousel-group[aria-hidden="true"],
    .feltoo-tpl-showcase .feltoo-tpl-slide[aria-hidden="true"] { display: none; }
    .feltoo-tpl-showcase .feltoo-tpl-slide { width: auto; container-type: inline-size; --card-w: 100cqw; }
}

.feltoo-tpl details { border-bottom: 1px solid var(--line); padding: .95rem 0; }
.feltoo-tpl details:first-of-type { margin-top: 1rem; }
.feltoo-tpl summary { cursor: pointer; font-size: 1.03rem; list-style: none; }
.feltoo-tpl summary::-webkit-details-marker { display: none; }
.feltoo-tpl summary::after {
    content: "+";
    float: right;
    color: var(--accent); /* accent 2/2 */
    font-size: 1.2rem;
    line-height: 1;
}
.feltoo-tpl details[open] summary::after { content: "–"; }
.feltoo-tpl details p { margin: .7rem 0 0; color: var(--moss); max-width: 62ch; }

.feltoo-tpl-closing { background: var(--white); padding: 5rem 0 4rem; }
.feltoo-tpl-closing .feltoo-tpl-wrap { text-align: center; }
.feltoo-tpl-closing .feltoo-tpl-narrow > * { margin-inline: auto; }
.feltoo-tpl-closing h2 {
    font-size: clamp(2.6rem, 8vw, 3.6rem);
    font-weight: 300;
    color: var(--taupe);
    margin-bottom: 1.1rem;
}
.feltoo-tpl-closing p.feltoo-tpl-cta-note { margin: .9rem auto 0; }

/* ---------- capçalera i peu mínims (només si falten les funcions del tema) ---------- */
.feltoo-tpl-fallback-header,
.feltoo-tpl-fallback-footer {
    background: #E8E4DF;
    color: #383E2F;
    font-family: "Satoshi", system-ui, sans-serif;
    padding: 1.1rem 0;
}
.feltoo-tpl-fallback-header .feltoo-tpl-wrap,
.feltoo-tpl-fallback-footer .feltoo-tpl-wrap { display: flex; justify-content: space-between; gap: 1rem; }
.feltoo-tpl-fallback-header a,
.feltoo-tpl-fallback-footer a { color: inherit; }
.feltoo-tpl-fallback-header a:first-child { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; text-decoration: none; }
.feltoo-tpl-fallback-footer { border-top: 1px solid rgba(56, 62, 47, .16); font-size: .88rem; }

/* Títols grans a mòbil: interlineat més tancat quan ocupen dues línies */
@media (max-width: 799px) {
    .feltoo-tpl h1 { line-height: 1.08; }
    .feltoo-tpl-closing h2 { line-height: 1.05; }
}
/* El CSS addicional del lloc (Editor del lloc > Estils) força a mòbil, amb
   !important, h1 15px, h2 15px i h3 30px a tot el web. Aquí es restableix
   l'escala d'aquestes pàgines: main.feltoo-tpl (0,1,2) guanya h1.wp-block-heading (0,1,1). */
@media (max-width: 768px) {
    main.feltoo-tpl h1 { font-size: clamp(2.4rem, 7vw, 3.5rem) !important; line-height: 1.08 !important; }
    main.feltoo-tpl h2 { font-size: 1.67rem !important; line-height: 1.12 !important; }
    main.feltoo-tpl h3 { font-size: 1.33rem !important; line-height: 1.12 !important; }
    main.feltoo-tpl .feltoo-tpl-closing h2 { font-size: clamp(2.6rem, 8vw, 3.6rem) !important; line-height: 1.05 !important; }
}

/* Hero a mòbil: primer el vídeo dins del telèfon (el mateix marc que a
   escriptori), i a sota eyebrow, títol i botó; la frase i el paràgraf, després.
   Sense duplicar HTML: .hero-copy s'aplana (display: contents) i els seus fills
   i .hero-media s'ordenen amb order.
   Mida del telèfon: l'alçada útil (svh) menys la capçalera i el que va a sota
   fins al botó (~11rem: eyebrow, títol, botó i marges), dividida per 2.09
   (alçada del telèfon / amplada). Mínim 220px: en pantalles baixes el botó
   queda per sota de la primera pantalla. Màxim 340px.
   El breadcrumb s'amaga a mòbil però continua al markup (SEO). */
@media (max-width: 799px) {
    .feltoo-tpl { --crumb-h: 0px; }
    .feltoo-tpl-breadcrumb { display: none; }
    .feltoo-tpl-hero {
        --pw: min(100vw - 48px, max(220px, min(340px, (100vh - var(--header-h) - 11rem) / 2.09)));
        padding: .5rem 0 2.5rem;
        text-align: center;
    }
    @supports (height: 100svh) {
        .feltoo-tpl-hero { --pw: min(100vw - 48px, max(220px, min(340px, (100svh - var(--header-h) - 11rem) / 2.09))); }
    }
    .feltoo-tpl-hero .feltoo-tpl-wrap { width: calc(100% - 48px); }
    .feltoo-tpl-hero-grid { display: flex; flex-direction: column; gap: 0; }
    .feltoo-tpl-hero-copy { display: contents; }
    .feltoo-tpl-hero-media { order: 1; margin: 0 0 .9rem; }
    p.feltoo-tpl-eyebrow { order: 2; font-size: .8rem; }
    .feltoo-tpl-hero h1 { order: 3; padding-bottom: .6rem; }
    main.feltoo-tpl .feltoo-tpl-hero h1 { font-size: 2.1rem !important; }
    .feltoo-tpl-hero .feltoo-tpl-cta { order: 4; display: block; margin-top: .9rem; }
    .feltoo-tpl-hero p.feltoo-tpl-cta-note { order: 5; margin: .7rem 0 0; }
    p.feltoo-tpl-deck { order: 6; margin-top: 2rem; border-top: 1px solid var(--hero-line); }
    p.feltoo-tpl-lede { order: 7; text-align: left; }
    /* Hub: sense telèfon ni botó al mig, la frase va just sota el H1 i la seva línia */
    .feltoo-tpl-hub-intro p.feltoo-tpl-deck { margin-top: 0; border-top: 0; }
    .feltoo-tpl-hero p.feltoo-tpl-privacy { order: 8; margin: 0; }
    .feltoo-tpl-hero p.feltoo-tpl-caption { display: none; }
}

@media (min-width: 800px) {
    .feltoo-tpl { --pw: 277px; }
    /* El telèfon del hero (2.065 × l'amplada d'alt, més el peu, que pot fer dues línies) cap
       sencer a la primera pantalla: s'encongeix amb l'alçada de la finestra.
       Només el del hero; el de la segona captura continua a 277px. */
    .feltoo-tpl-hero {
        --pw: min(277px, calc((100vh - var(--header-h) - var(--crumb-h) - 6.5rem) / 2.065));
        padding-top: .5rem;
    }
    /* Sense espai entre columnes: les línies del text arriben fins al telèfon.
       Telèfon i text centrats verticalment l'un amb l'altre. */
    .feltoo-tpl-hero-grid { grid-template-columns: 1fr var(--pw); column-gap: 0; align-items: center; }
    /* Amplada del text com al disseny; les línies continuen fins al telèfon */
    p.feltoo-tpl-deck { padding-right: 29%; }
    p.feltoo-tpl-lede { padding-right: 14%; }
    .feltoo-tpl-two { grid-template-columns: 1.85fr 1fr; gap: 3.5rem; }
    .feltoo-tpl-gallery { grid-template-columns: repeat(3, 1fr); }
    .feltoo-tpl-phone { margin: 0; }
    .feltoo-tpl-hub-intro { padding-right: var(--pw); }
}
@media (min-width: 1025px) {
    .feltoo-tpl-gallery { grid-template-columns: repeat(4, 1fr); }
}

/* Alçada de la capçalera del tema a cada amplada (paddings de feltoo_get_header_styles) */
@media (min-width: 769px) and (max-width: 1024px) {
    .feltoo-tpl { --header-h: 5rem; }
    .feltoo-tpl-hero-grid { column-gap: 2rem; }
}
@media (max-width: 768px) {
    .feltoo-tpl { --header-h: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .feltoo-tpl * { transition: none !important; animation: none !important; }
}