/* Páginas de experiencias (artistas, talleres…): misma base que la guía + paleta propia */
.exp{--violeta:#2B1446;--violeta-2:#3F1F63;--turquesa:#2FA7D6;--naranja:#F08A2E}
.exp .serif{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400}

/* Barra: transparente sobre el hero violeta, sólida al bajar */
.exp .top{color:var(--crema)}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:var(--crema);
  background:radial-gradient(ellipse 70% 60% at 85% 20%,rgba(47,167,214,.35),transparent 70%),radial-gradient(ellipse 60% 50% at 10% 100%,rgba(240,138,46,.22),transparent 70%),var(--violeta);
  padding:calc(var(--hh) + 40px) 0 60px}
.hero .espiral{position:absolute;width:min(70vw,760px);right:-12vw;bottom:-18vw;color:rgba(240,138,46,.16);animation:gira 90s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;width:100%}
.hero .kicker{color:var(--dorado)}
.hero h1{margin-top:14px;font-size:clamp(3rem,8.4vw,6.6rem);font-weight:800;letter-spacing:-.05em;line-height:.95}
.hero h1 em{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;letter-spacing:-.02em;color:var(--dorado)}
.hero .lead{margin-top:20px;font-size:clamp(1.15rem,2.2vw,1.5rem);opacity:.92;max-width:520px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .btn-linea{color:var(--crema);text-decoration:none}
.firma{margin-top:28px;font-size:14px;opacity:.75}
.firma a{color:inherit}

.collage{position:relative;height:min(78vh,640px);min-height:420px}
.collage figure{position:absolute;margin:0;border-radius:18px;overflow:hidden;background:#fff;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.4);transition:transform .25s ease-out;will-change:transform}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.collage .c1{width:46%;aspect-ratio:4/5;left:0;top:6%;--r:-7deg;transform:rotate(var(--r));animation:flota 9s ease-in-out infinite}
.collage .c3{width:30%;aspect-ratio:236/640;right:2%;top:0;--r:6deg;transform:rotate(var(--r));animation:flota 11s ease-in-out infinite reverse}
.collage .c2{width:40%;aspect-ratio:258/616;left:33%;bottom:0;--r:-1.5deg;transform:rotate(var(--r));z-index:2;animation:flota 10s ease-in-out -3s infinite}
@keyframes flota{50%{translate:0 -12px}}

/* EXPERIENCIA */
.exp-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,5vw,64px);align-items:start}
.exp-grid h2 em,.sec h2 em{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;color:var(--violeta-2);letter-spacing:-.02em}
.exp-txt p{font-size:clamp(1.12rem,1.9vw,1.34rem);line-height:1.6}
.exp-txt p+p{margin-top:18px;color:var(--gris)}
.exp-txt p:first-child::first-letter{float:left;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;font-size:4.2em;line-height:.8;margin:6px 10px 0 0;color:var(--naranja)}
.experiencia .ficha{margin-top:clamp(36px,5vw,56px)}
.exp .dato dt{color:var(--violeta-2)}

/* LO QUE VERÁS */
.ver3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:32px}
.ver{background:#fff;border:1px solid #E6E2D6;border-radius:24px;padding:28px 26px;transition:transform .3s,box-shadow .3s}
.ver:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(43,20,70,.14)}
.ver i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--violeta);color:var(--dorado)}
.ver svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ver h3{margin-top:18px;font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
.ver p{margin-top:8px;color:var(--gris)}

/* GALERÍA (usa el visor de guia.js) */
.exp .galeria{columns:4 220px}

/* VÍDEOS (Instagram) */
.oscura{background:var(--violeta);color:var(--crema)}
.oscura .kicker{color:var(--dorado)}
.oscura h2 em{color:var(--turquesa) !important}
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:34px}
.reel{margin:0}
.ig{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;cursor:pointer}
.ig img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .3s,transform .6s}
.ig:hover img{opacity:1;transform:scale(1.03)}
.ig .play{position:absolute;inset:0;display:grid;place-items:center}
.ig .play b{width:72px;height:72px;border-radius:50%;background:var(--dorado);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ig .play b::after{content:"";margin-left:6px;border-left:22px solid var(--tinta);border-top:13px solid transparent;border-bottom:13px solid transparent}
.ig iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.reel figcaption{margin-top:12px;font-size:14px;line-height:1.45}
.reel figcaption b{display:block;font-size:1.05rem}
.reel figcaption span{display:block;opacity:.75;margin-top:2px}
.reel figcaption a{display:inline-block;margin-top:6px;color:var(--dorado);font-weight:700;text-decoration:none}

/* ADEMÁS */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chips li{padding:12px 18px;border-radius:999px;background:#fff;border:1px solid #E6E2D6;font-weight:700}
.chips li:nth-child(3n+1){border-color:var(--turquesa)}
.chips li:nth-child(3n+2){border-color:var(--naranja)}
.chips li:nth-child(3n){border-color:var(--violeta-2)}

/* CTA */
.cta-arte{position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 0%,var(--violeta-2),var(--violeta) 65%)}
.cta-arte .espiral{position:absolute;width:420px;left:-120px;top:-140px;color:rgba(47,167,214,.18);animation:gira 70s linear infinite reverse}
.cta-arte > *{position:relative}
.cta-arte h2 em{font-family:"Fraunces",Georgia,serif;font-style:italic;color:var(--dorado)}
.cta-arte .tel{margin-top:12px;font-weight:700;opacity:.85}
.otro-plan{display:inline-block;margin-top:22px;color:var(--crema);opacity:.85;font-weight:600}

@media (max-width:860px){
  .hero-in,.exp-grid{grid-template-columns:1fr}
  .collage{height:auto;min-height:0;aspect-ratio:1/1;max-width:440px;width:100%;margin:10px auto 0}
  .hero{min-height:auto}
}
@media (prefers-reduced-motion: reduce){ .collage figure,.espiral{animation:none !important} }
@media (max-width:600px){ .exp .galeria{columns:2 140px;column-gap:8px} .exp .galeria span{font-size:11px} }