/* Sección «Experiencias» de la portada (experiencias.js). Tarjetas ilustradas «Próximamente». Usa los tokens de styles.css. */
.section--sea{background:radial-gradient(900px 420px at 85% 0%,rgba(246,183,60,.35),transparent),linear-gradient(180deg,#0b5f69 0%,#0d6f7a 45%,#12324a 100%);color:#fff;overflow:hidden;padding-top:80px}
.section--sea .lead{color:rgba(255,255,255,.8)}
/* cielo ilustrado de fondo: sol, pájaros y colinas */
.xp-sky{position:absolute;inset:0;pointer-events:none}
.xp-sun{position:absolute;top:36px;right:7%;width:clamp(80px,10vw,140px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff2b3,#f6b73c 60%,#ff8a5c);box-shadow:0 0 60px 20px rgba(246,183,60,.35);opacity:.9;animation:xpSun 8s ease-in-out infinite}
@keyframes xpSun{50%{transform:translateY(-10px)}}
.xp-birds{position:absolute;top:70px;left:0;width:min(70vw,560px);height:auto;opacity:.8;overflow:visible}
.xp-bird{animation:xpFly 22s linear infinite}
@keyframes xpFly{from{transform:translateX(-120px)}to{transform:translateX(1500px)}}
.xp-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:220px;display:block}
.xp-h1{fill:rgba(0,0,0,.14)}
.xp-h2{fill:rgba(0,0,0,.24)}
/* rejilla de tarjetas */
.xp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px;position:relative;z-index:1}
.xp-card{position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .45s var(--ease),background .35s,border-color .35s;overflow:hidden;color:#fff}
.xp-card::before{content:"";position:absolute;inset:auto -50px -70px auto;width:190px;height:190px;border-radius:50%;background:hsl(var(--h),80%,60%);opacity:.16;transition:transform .6s var(--ease);pointer-events:none}
.xp-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.12);border-color:rgba(246,183,60,.6)}
.xp-card:hover::before{transform:scale(1.9)}
.xp-card--feat{grid-column:span 2}
.xp-card__art{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,hsl(var(--h),70%,50%),hsl(calc(var(--h) + 40),75%,36%));display:grid;place-items:center;isolation:isolate}
.xp-card--feat .xp-card__art{aspect-ratio:auto;min-height:220px}
.xp-card__art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.xp-card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-card__em{font-size:4.2rem;filter:drop-shadow(0 14px 18px rgba(0,0,0,.3))}
.xp-card__soon{position:absolute;top:10px;left:10px;z-index:2;background:var(--sun);color:var(--ink);font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.xp-card__zone{position:absolute;bottom:10px;left:10px;z-index:2;background:rgba(23,42,34,.7);color:#fff;font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.xp-card__ilus{position:absolute;bottom:8px;right:8px;z-index:2;background:rgba(23,42,34,.55);color:rgba(255,255,255,.9);font-size:.62rem;font-weight:600;padding:3px 8px;border-radius:999px}
.xp-card h3{font-size:1.18rem;color:#fff;line-height:1.15}
.xp-card--feat h3{font-size:1.45rem}
.xp-card>p{color:rgba(255,255,255,.76);font-size:.9rem}
.xp-tags{display:flex;flex-wrap:wrap;gap:6px}
.xp-tags span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 10px;font-size:.76rem;font-weight:700}
.xp-card__price{font-family:var(--font-d);font-weight:800;color:var(--sun)}
.xp-card__near{font-size:.86rem;color:rgba(255,255,255,.76)}
.xp-card__near a{color:var(--sun);font-weight:800}
.xp-card .btn{margin-top:auto;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.42);color:#fff;padding:11px 16px;font-size:.88rem;gap:8px}
.xp-card .btn:hover{background:#25d366;border-color:#25d366;color:#fff;transform:translateY(-2px)}
.xp-card .btn svg{flex:none}
/* dibujos: movimiento ambiental sutil */
.xp-art__float{animation:xpFloat 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.xp-art__rock{animation:xpRock 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.xp-art__bob{animation:xpBob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.xp-art__spin{animation:xpSpin 1.6s linear infinite;transform-box:fill-box;transform-origin:center}
.xp-art__slide{animation:xpSlide 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.xp-art__dash{stroke-dasharray:10 10;animation:xpDash 1.4s linear infinite}
.xp-art__wave{animation:xpWave 4s linear infinite}
.xp-art__cloud{animation:xpCloud 14s linear infinite}
@keyframes xpFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes xpRock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes xpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes xpSpin{to{transform:rotate(360deg)}}
@keyframes xpSlide{0%{transform:translateX(-70px)}50%{transform:translateX(70px)}100%{transform:translateX(-70px)}}
@keyframes xpDash{to{stroke-dashoffset:-40}}
@keyframes xpWave{to{transform:translateX(-80px)}}
@keyframes xpCloud{from{transform:translateX(-60px)}to{transform:translateX(380px)}}
.note--light{color:rgba(255,255,255,.75);position:relative;z-index:1;text-align:center;margin-top:26px}
.note--light a{color:var(--sun);font-weight:800}
@media(max-width:620px){.xp-card--feat{grid-column:auto}.xp-card--feat .xp-card__art{aspect-ratio:16/10;min-height:0}.xp-card--feat h3{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.xp-sun,.xp-bird,.xp-art__float,.xp-art__rock,.xp-art__bob,.xp-art__spin,.xp-art__slide,.xp-art__dash,.xp-art__wave,.xp-art__cloud{animation:none}}
.xp-card__det{margin:8px 0 0;padding-left:18px;font-size:.84rem;line-height:1.45;opacity:.9}
.xp-card__det li{margin:3px 0}
.xp-card__en{margin-top:8px;font-size:.84rem;font-style:italic;opacity:.85}
.xp-card__en-btn{display:block;margin-top:8px;text-align:center;font-size:.82rem;font-weight:700;text-decoration:underline}
