/* YOULO — Guía de Navidad 2026 (/barcelona/youlo-self-photo/plan-de-navidad/guia/). Page-scoped: .ylg-* */
.ylg{--ylg-black:#292929;--ylg-black2:#3E3E3E;--ylg-bg:#F8F6F4;--ylg-cream:#EFEBE5;--ylg-white:#FFFFFF;--ylg-yellow:#DDC73F;--ylg-yellow-h:#BEA81F;--ylg-line:rgba(41,41,41,.14);--ylg-line-d:rgba(255,255,255,.16);color:var(--ylg-black);font-family:'soleilLight',sans-serif;font-size:16px;line-height:1.6;overflow-x:clip}
.ylg *,.ylg *::before,.ylg *::after{box-sizing:border-box}
.ylg :where(h1,h2,h3,h4,p,ol,ul,figure){margin:0;padding:0}
.ylg :where(ol,ul){list-style:none}
.ylg img{display:block;max-width:100%}
.ylg a{color:inherit}
.ylg-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.ylg-sec{padding:88px 0}
.ylg-white{background:var(--ylg-white)}.ylg-bg{background:var(--ylg-bg)}.ylg-cream{background:var(--ylg-cream)}
.ylg-dark{background:var(--ylg-black);color:var(--ylg-white)}

.ylg-crumbs{background:var(--ylg-black);color:rgba(255,255,255,.6);padding:18px max(20px,calc((100% - 1200px) / 2)) 0}
.ylg-crumbs ol{display:flex;flex-wrap:wrap;gap:4px;font-size:13px;line-height:22px}
.ylg-crumbs li+li::before{content:'›';margin-right:4px;color:rgba(255,255,255,.4)}
.ylg-crumbs [aria-current]{color:rgba(255,255,255,.85)}
.ylg-crumbs a{text-decoration:none}.ylg-crumbs a:hover{text-decoration:underline}

.ylg-eyebrow{display:flex;align-items:center;gap:8px;font-family:'soleilBold',sans-serif;font-weight:700;font-size:13px;line-height:18px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.ylg-eyebrow--c{justify-content:center}
.ylg-star,.ylg-x{color:var(--ylg-yellow);letter-spacing:0}
.ylg-h1,.ylg-display,.ylg-h3,.ylg-h4,.ylg-steps h3,.ylg-tips h3,.ylg-n,.ylg-tn,.ylg-btn,.ylg-end__phone{font-family:'Bernoru-BlackMedium',sans-serif;font-weight:900}
.ylg-h1{font-size:76px;line-height:.88;margin-bottom:22px}
.ylg-h2{margin-bottom:22px;font-weight:400}
.ylg-h2 .ylg-display{display:block;font-size:60px;line-height:.92}
.ylg-h2--sm .ylg-display{font-size:46px}
.ylg-h3{font-size:26px;line-height:1;margin-bottom:6px}
.ylg-h4{font-size:24px;line-height:1;margin-bottom:8px}
.ylg-hl{background:linear-gradient(transparent 58%,var(--ylg-yellow) 58%,var(--ylg-yellow) 90%,transparent 90%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ylg-dark .ylg-hl{background:none;color:var(--ylg-yellow);padding:0}
.ylg-lead{font-size:20px;line-height:28px;max-width:640px;margin-bottom:36px}
.ylg-lead p+p{margin-top:14px}
.ylg-lead--sm{font-size:18px;line-height:26px}
.ylg-dark .ylg-lead{color:rgba(255,255,255,.86)}
.ylg-muted{font-size:16px;line-height:24px;color:var(--ylg-black2);margin-bottom:14px}
.ylg-ai{font-size:13px;line-height:18px;color:rgba(255,255,255,.6);margin:-24px 0 28px}

.ylg-btn{display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:24px;padding:14px 26px;border-radius:4px;background:var(--ylg-yellow);color:var(--ylg-black);text-decoration:none;border:2px solid var(--ylg-yellow);transition:background .15s,border-color .15s}
.ylg-btn:hover{background:var(--ylg-yellow-h);border-color:var(--ylg-yellow-h)}
.ylg-btn--ghost{background:transparent;color:var(--ylg-yellow)}
.ylg-btn--ghost:hover{background:var(--ylg-yellow);color:var(--ylg-black);border-color:var(--ylg-yellow)}
.ylg a.ylg-btn{color:var(--ylg-black)}.ylg a.ylg-btn--ghost{color:var(--ylg-yellow)}.ylg a.ylg-btn--ghost:hover{color:var(--ylg-black)}
.ylg-btn:focus-visible,.ylg a:focus-visible{outline:2px solid var(--ylg-yellow);outline-offset:3px}
.ylg-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ylg-ctas--c{justify-content:center}

.ylg-hero{padding:0}
.ylg-hero__grid{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:56px;padding-top:40px;padding-bottom:72px}
.ylg-hero__sub{font-family:'soleilBold',sans-serif;font-weight:700;font-size:20px;line-height:26px;margin-bottom:6px}
.ylg-hero .ylg-lead{margin-bottom:30px}
.ylg-toc{margin-top:26px;font-size:15px;color:rgba(255,255,255,.7)}
.ylg-toc a{color:var(--ylg-white)}
.ylg-hero__img img{width:100%;height:auto;aspect-ratio:990/1360;object-fit:cover;border-radius:8px}

.ylg-fig img,.ylg-acc img{width:100%;height:auto;border-radius:8px;background:var(--ylg-cream)}
.ylg-fig figcaption b{display:block;font-family:'soleilBold',sans-serif;font-weight:700;font-size:15px;line-height:19px;margin:10px 0 2px}
.ylg-fig figcaption span{display:block;font-size:14px;line-height:19px;color:var(--ylg-black2);margin-top:6px}
.ylg-fig figcaption b+span{margin-top:0}
.ylg-dark .ylg-fig figcaption span{color:rgba(255,255,255,.75)}
.ylg-g2,.ylg-g3,.ylg-g4,.ylg-g5,.ylg-g6{display:grid;gap:16px}
.ylg-g2{grid-template-columns:repeat(2,1fr);gap:12px}
.ylg-g3{grid-template-columns:repeat(3,1fr);gap:32px}
.ylg-g4{grid-template-columns:repeat(4,1fr);gap:28px 16px}
.ylg-g5{grid-template-columns:repeat(5,1fr);gap:10px}
.ylg-g6{grid-template-columns:repeat(6,1fr);gap:24px 14px}

.ylg-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ylg-split--narrow{grid-template-columns:400px 1fr}
.ylg-split--tips{grid-template-columns:420px 1fr;align-items:center}
.ylg-split--looks{grid-template-columns:380px 1fr}
.ylg-split--fun{grid-template-columns:380px 1fr;align-items:start}
.ylg-split--fun>div:last-child{padding-top:150px}

.ylg-steps li{display:grid;grid-template-columns:84px 1fr;align-items:center;padding:22px 0;border-top:1px solid var(--ylg-line)}
.ylg-steps li:last-child{border-bottom:1px solid var(--ylg-line)}
.ylg-n{font-size:68px;line-height:.8}
.ylg-n i{font-style:normal;background:linear-gradient(transparent 62%,var(--ylg-yellow) 62%,var(--ylg-yellow) 94%,transparent 94%);padding:0 6px}
.ylg-steps h3{font-size:28px;line-height:1;margin-bottom:6px}
.ylg-steps p{font-size:17px;line-height:24px;color:var(--ylg-black2)}

.ylg-note{background:var(--ylg-cream);border-radius:8px;padding:20px 22px;font-size:17px;line-height:24px}
.ylg-note b{font-family:'soleilBold',sans-serif;font-weight:700}
.ylg-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0 28px}
.ylg-sw li{position:relative;height:130px;border-radius:8px;padding:12px;display:flex;align-items:flex-end;font-family:'soleilBold',sans-serif;font-weight:700;font-size:15px;color:var(--ylg-white)}
.ylg-sw li.ylg-sw--light{color:var(--ylg-black);box-shadow:inset 0 0 0 1px var(--ylg-line)}
.ylg-sw .ylg-x{position:absolute;top:8px;right:10px;font-size:18px}

.ylg-acc{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.ylg-acc li{background:var(--ylg-white);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:10px;display:flex;flex-direction:column;justify-content:space-between}
.ylg-acc img{background:none;border-radius:4px;aspect-ratio:3/4;object-fit:contain}
.ylg-acc span{font-family:'soleilRegular',sans-serif;font-size:13px;line-height:16px;text-align:center;margin-top:6px}

.ylg-tips li{display:grid;grid-template-columns:56px 1fr;padding:22px 0;border-top:1px solid var(--ylg-line-d)}
.ylg-tips li:last-child{border-bottom:1px solid var(--ylg-line-d)}
.ylg-tn{font-size:50px;line-height:.85;color:var(--ylg-yellow)}
.ylg-tips h3{font-size:24px;line-height:1;margin-bottom:6px}
.ylg-tips p{font-size:16px;line-height:22px;color:rgba(255,255,255,.8)}

.ylg-looks{display:flex;flex-direction:column;gap:36px}
.ylg-look{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
.ylg-look p,.ylg-col>p{font-size:16px;line-height:22px;color:var(--ylg-black2);margin-bottom:16px}
.ylg-col{display:flex;flex-direction:column}
.ylg-fig--big img{margin-top:8px}
.ylg-split--fun .ylg-lead{margin-bottom:20px}

.ylg-faq{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin-top:8px}
.ylg-q{padding:18px 0;border-top:1px solid var(--ylg-line)}
.ylg-q:nth-last-child(-n+2){border-bottom:1px solid var(--ylg-line)}
.ylg-q h3{font-family:'soleilBold',sans-serif;font-weight:700;font-size:17px;line-height:22px;margin-bottom:4px}
.ylg-q p{font-size:15px;line-height:22px;color:var(--ylg-black2)}

.ylg-end{text-align:center}
.ylg-end .ylg-lead{margin:0 auto 26px}
.ylg-end__h{font-size:64px;line-height:.92;margin:6px 0 18px}
.ylg-end__phone{display:inline-block;font-size:46px;line-height:1;color:var(--ylg-yellow);text-decoration:none;margin-bottom:10px}
.ylg-end__mail{display:block;font-family:'soleilBold',sans-serif;font-weight:700;font-size:22px;margin-bottom:8px;text-decoration:none}
.ylg-end__addr{font-size:17px;color:rgba(255,255,255,.7);margin-bottom:32px}
.ylg-dark a.ylg-end__phone{color:var(--ylg-yellow)}.ylg-dark a.ylg-end__mail{color:var(--ylg-white)}

@media (max-width:1100px){
 .ylg-acc{grid-template-columns:repeat(5,1fr)}
 .ylg-g6{grid-template-columns:repeat(3,1fr)}
 .ylg-split,.ylg-split--narrow,.ylg-split--tips,.ylg-split--looks,.ylg-split--fun{grid-template-columns:1fr;gap:40px}
 .ylg-h1{font-size:64px}
 .ylg-split--tips .ylg-g2,.ylg-split--fun .ylg-fig--big{max-width:520px}
 .ylg-split--fun>div:last-child{padding-top:0}
}
@media (max-width:767px){
 .ylg-wrap{padding:0 16px}
 .ylg-crumbs{padding:12px 16px 0}
 .ylg-sec{padding:56px 0}
 .ylg-hero__grid{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:48px}
 .ylg-hero__img{order:-1}
 .ylg-hero__img img{aspect-ratio:4/3;object-position:50% 30%}
 .ylg-h1{font-size:48px;line-height:.9}
 .ylg-h2 .ylg-display,.ylg-h2--sm .ylg-display{font-size:42px;line-height:.92}
 .ylg-end__h{font-size:42px}
 .ylg-lead{font-size:17px;line-height:25px;margin-bottom:28px}
 .ylg-lead--sm{font-size:16px;line-height:24px}
 .ylg-btn{font-size:20px;padding:13px 20px;width:100%}
 .ylg-ctas{flex-direction:column}
 .ylg-g3,.ylg-faq,.ylg-look{grid-template-columns:1fr}
 .ylg-g4,.ylg-g6{grid-template-columns:repeat(2,1fr);gap:22px 12px}
 .ylg-g5{grid-template-columns:repeat(3,1fr)}
 .ylg-acc{grid-template-columns:repeat(3,1fr);gap:8px}
 .ylg-sw{grid-template-columns:repeat(3,1fr);gap:8px}
 .ylg-sw li{height:92px;font-size:14px}
 .ylg-steps li{grid-template-columns:64px 1fr;padding:18px 0}
 .ylg-n{font-size:54px}
 .ylg-steps h3{font-size:24px}
 .ylg-q:nth-last-child(2){border-bottom:0}
 .ylg-end__phone{font-size:34px}
 .ylg-end__mail{font-size:18px}
 .ylg-fig figcaption span{font-size:14px;line-height:19px}
 .ylg-eyebrow,.ylg-crumbs ol,.ylg-ai,.ylg-acc span{font-size:14px}
}