/* Temas sin desplazamiento horizontal; flechas en los extremos de la ventana. */
#xeraco{overflow:clip}
#xeraco .experience-controls{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:28px}
#xeraco .experience-topics{display:flex;flex-wrap:wrap;overflow:visible;justify-content:center;gap:8px;padding:5px 0;min-width:0}
#xeraco .experience-topics button{flex:0 1 auto;white-space:normal;min-height:44px;padding:10px 15px;font-size:12px}
#xeraco .experience-arrows{margin:0;justify-content:center}
#xeraco .experience-stage{position:relative;overflow:visible}
#xeraco .experience-stage>button{position:absolute;z-index:2;top:calc((100vw - 40px)/2.2 - 36px);width:56px;height:72px;padding:0;display:grid;place-items:center;background:transparent;border:0;border-radius:0;color:var(--ink);font:72px/1 Georgia,serif;text-shadow:0 1px 3px #fffefa;cursor:pointer}
#xeraco #experience-prev{left:-20px}
#xeraco #experience-next{right:-20px}
#xeraco .experience-stage>button:hover{color:var(--clay);background:transparent}
#xeraco .experience-stage>button:focus-visible{outline:2px solid #257092;outline-offset:-4px}
@media(min-width:768px){#xeraco .experience-stage>button{top:clamp(170px,20vw,250px)}#xeraco #experience-prev{left:calc((min(1200px,100vw - 70px) - 100vw)/2)}#xeraco #experience-next{right:calc((min(1200px,100vw - 70px) - 100vw)/2)}}

/* Imágenes auxiliares con presencia y proporción coherente. */
.stories article{display:block}
.stories img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin:0 0 18px;border-radius:11px}
.stories h3{font-size:clamp(24px,2.4vw,31px)}
.stories p{font-size:14px;max-width:34ch}
@media(min-width:768px){.stories{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.stories article{display:block}.stories img{height:auto}}

/* Servicios de la zona de descanso. */
.bedroom-extras{display:grid;gap:1px;margin-top:38px;border-radius:12px;overflow:hidden;background:#d9d5ca}
.bedroom-extras article{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:23px;background:#fffefa}
.bedroom-extras .line-icon{margin:0;color:var(--clay)}
.bedroom-extras .line-icon svg{width:34px;height:34px}
.bedroom-extras strong{display:block;margin-bottom:4px;font-size:15px}
.bedroom-extras p{font-size:13px}
@media(min-width:768px){.bedroom-extras{grid-template-columns:repeat(3,minmax(0,1fr))}.bedroom-extras article{padding:26px 24px}}

/* Selector compacto que no compite con la navegación. */
.language-picker{display:flex;align-items:center;flex:none;margin-left:auto}
.language-picker select{min-height:42px;padding:0 24px 0 7px;border:0;border-radius:0;background:transparent;color:var(--ink);font:600 11px/1 'Segoe UI',Arial,sans-serif;letter-spacing:.08em;cursor:pointer}
.language-picker select:hover{color:var(--clay)}
.language-picker select:focus-visible{outline:3px solid #257092;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
header .language-picker{order:2;margin-left:6px}
header .menu{order:3}
header #nav{order:1}
header .header-cta{order:4}
.legal-content>.language-picker{position:absolute;top:30px;right:clamp(20px,4vw,55px)}
@media(min-width:1100px){header .header-cta{order:3}header .language-picker{order:4;margin-left:0}header .menu{order:2}header #nav{order:2}}

.trail-link{display:inline-flex;align-items:center;gap:12px;width:fit-content;min-height:46px;margin-top:22px;color:var(--ink);font-size:14px;font-weight:600;border-bottom:1px solid currentColor}
.trail-link .line-icon{margin:0;color:var(--clay)}
.trail-link .line-icon svg{width:30px;height:30px}
.trail-link:hover{color:var(--clay)}
.trail-link:active{transform:translateY(1px)}

/* Polaroid protagonista: solapa el borde inferior del hero en móvil. */
.hero{overflow:visible;margin-bottom:clamp(225px,55vw,250px)}
.postcard{display:block;position:absolute;z-index:3;left:50%;right:auto;bottom:clamp(-235px,-52vw,-210px);width:min(450px,calc(100% - 44px));padding:9px;background:#fffefa;box-shadow:0 18px 45px #193e4c32;transform:translateX(-50%) rotate(2deg)}
.postcard img{aspect-ratio:1.4;object-fit:cover}
.postcard span{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 5px 9px;font:clamp(18px,5vw,23px)/1.2 Georgia,'Times New Roman',serif}
.postcard span svg{width:27px;height:27px}
@media(min-width:768px){
 .hero{overflow:hidden;margin-bottom:0}
 .postcard{left:auto;right:35px;bottom:42px;width:min(450px,42vw);padding:12px;transform:rotate(3deg);box-shadow:0 18px 50px #193e4c35}
 .postcard span{padding:16px 7px 11px;font-size:clamp(21px,2.4vw,27px)}
 .postcard span svg{width:31px;height:31px}
}
@media(min-width:1100px){.postcard{right:max(50px,calc((100vw - 1200px)/2));width:450px}}

/* Convivencia: prioridad familiar y condiciones esenciales. */
.family-rules{background:#f3eee3}
.family-rules-layout{display:grid;gap:34px}
.family-rules-copy{max-width:620px}
.family-rules-copy>p:not(.eyebrow){margin-top:20px}
.rules-list{display:grid;gap:12px}
.rule-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:17px;align-items:start;padding:22px 20px;background:#fffefa;border-radius:14px}
.rule-card .line-icon{display:grid;place-items:center;width:52px;height:52px;margin:0;border-radius:50%;background:#e7f0f0;color:var(--ink)}
.rule-card .line-icon svg{width:27px;height:27px}
.rule-card h3{font:600 17px/1.25 'Segoe UI',Arial,sans-serif;letter-spacing:0}
.rule-card p{margin-top:7px;font-size:13px;line-height:1.55}
.rule-card.family-highlight{background:var(--ink);color:#fffefa}
.rule-card.family-highlight .line-icon{background:#fffefa;color:var(--clay)}
.rule-card.family-highlight p{color:#dce8e7}
@media(min-width:768px){.family-rules-layout{grid-template-columns:.75fr 1.25fr;gap:60px;align-items:center}.rules-list{grid-template-columns:1fr 1fr}.rule-card.family-highlight{grid-column:1/-1}.rule-card{padding:25px 23px}}

/* Identidad Casa La Barta. */
.brand-logo-link{display:flex;align-items:center;flex:none;line-height:0;letter-spacing:0}
.brand-logo{display:block;width:auto;height:48px;max-width:min(205px,46vw);object-fit:contain}
footer .brand-logo{height:56px;max-width:220px}
.legal-content .brand-logo-link{width:fit-content}
.legal-content .brand-logo{height:64px;max-width:min(260px,76vw)}
@media(min-width:1100px){header .brand-logo{height:57px;max-width:235px}}

.facts li{display:flex;align-items:center;justify-content:center;gap:8px}
.facts .fact-icon{display:grid;place-items:center;flex:none;color:var(--clay)}
.facts .fact-icon svg{width:18px;height:18px;stroke-width:1.65}
