/* CASA ROCÍO / 02 · Paleta. Edita estos colores para cambiar toda la colección. */
:root {
  --cream: #f8efdf;
  --sand: #efdfc7;
  --linen: #e7d1ae;
  --coffee: #35281f;
  --muted: #6d5b4d;
  --copper: #785236;
  --ink: var(--coffee);
  --paper: var(--cream);
  --gold: #e7cda9;
  --serif: 'Rocio Italiana', Georgia, serif;
  --sans: 'Rocio Sans', Arial, sans-serif;
}

/* 03 · Estructura y navegación */
body { background: var(--cream); color: var(--coffee); }
body .header, body.inner-page .header, body .header.is-scrolled {
  background: linear-gradient(110deg,#ecd4ade6,#f7e7cfe6 65%,#e4c69cde); color: var(--coffee); border-bottom: 1px solid #fff9;
  backdrop-filter: blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%); box-shadow: 0 8px 32px #35281f18,inset 0 1px #fff7;
}
.header .contact { background:linear-gradient(130deg,#fff5,#ead3b033); box-shadow:inset 0 1px #fff8,0 4px 16px #35281f0c; }
.header .brand { position:relative; padding-left:51px; font-size:31px; letter-spacing:-.5px; }
.header .brand:before,footer .brand:before { content:''; position:absolute; width:36px; height:44px; left:0; top:0; background:currentColor; mask:url('/assets/brand-mark.svg') center/contain no-repeat; -webkit-mask:url('/assets/brand-mark.svg') center/contain no-repeat; }
.header .brand span { letter-spacing:1.5px; margin-top:7px; }
footer .brand { position:relative; padding-left:48px; }
.header nav a[aria-current]:after { background: var(--copper); }
.header .contact { border-color: #88624266; }
.header nav.open { background: var(--cream); }
.header nav a[aria-current] { color: var(--copper); }
.eyebrow, .intro-section .eyebrow, .editorial-copy .eyebrow, .reviews .eyebrow { color: var(--copper); }
em, .intro-section em, .editorial-copy em, .reviews em { color: var(--copper); }
.pill { background: var(--coffee); border-color: var(--coffee); color: var(--cream); transition: background .2s, box-shadow .2s; }
.pill:hover { background: #604733; box-shadow: 0 7px 24px #35281f22; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--copper); outline-offset: 5px; }
.rocio-icon { display: inline-block; width: 1em; height: 1em; margin-left: .25em; vertical-align: -.1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* 04 · Portada: imágenes nítidas, revelado circular y fundido */
.hero { color: var(--cream); background: var(--coffee); }
.hero .eyebrow, .hero em, .hero-note span { color: #efd7b7; }
.hero .pill { background: var(--sand); color: var(--coffee); border-color: var(--sand); }
.hero-shade, .cinematic-hero .hero-shade {
  background: linear-gradient(90deg,#251a139e, #251a1340 55%, transparent), linear-gradient(0deg,#251a13ad,transparent 38%);
  pointer-events: none;
}
.hero-photo { animation: none; }
.hero-dissolve { position: absolute; inset: 0; overflow: hidden; }
.hero-dissolve { z-index:0; }
.hero-shade { z-index:1; }
.hero-note, .hero-bottom { z-index:2; }
.hero-film { z-index:0; }
.hero-dissolve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.hero-dissolve svg { position: absolute; width: 0; height: 0; }
.hero-film { display: none; }
.hero[data-custom-video=true] .hero-film { display: block; }
.hero[data-custom-video=true] .hero-dissolve { display: none; }
.hero-note { background: #35281f30; max-width: 240px; }
.hero-note p { font-size: 22px; }
.hero .film-control { display:none; }
.hero-bottom .stats span, .hero-bottom .location small { color: #f0e6d8; }
.hero-copy { max-width: 850px; }
.hero-copy h1, .hero-copy .intro, .hero-copy .eyebrow { text-shadow:0 2px 18px #251a1340; }
.hero .play { min-height: 44px; }

/* 05 · Recorrido: cinco capítulos originales, sin quitar el modo interactivo */
.journey { height: 410vh; color: var(--cream); }
.journey-sticky { background: var(--coffee); }
.scene-shade { background: linear-gradient(0deg,#251a13d9,transparent 50%,#251a1360); }
.story-panel { color: var(--coffee); background:linear-gradient(140deg,#fcf1ddeF,#efdfc7eB); backdrop-filter:blur(28px) saturate(125%); -webkit-backdrop-filter:blur(28px) saturate(125%); border: 1px solid #fffb; border-radius: 4px 44px 4px 4px; box-shadow: 0 20px 70px #35281f22,inset 0 1px 0 #fffc; }
.story-panel em, .story-panel .eyebrow, .story-detail span { color: var(--copper); }
.story-panel .eyebrow:before { background:var(--copper); }
.story-text { color: var(--muted); }
.story-detail { border-color: #88624235; }
.story-panel .tour-contact { margin-top: 20px; }
.story-panel .text-link { margin-top: 12px; }
.chapter-nav button { color: #f3e8d3b3; }
.chapter-nav button.active { color: #f8e4c8; border-color: #f8e4c8; }
.spatial-label em { color: #f3ddbf; }
.scene-image { filter: none; }

/* 06 · Estancia, galería, ubicación y transiciones de entrada/salida */
.intro-section, .reviews { background: var(--sand); }
.home-gallery, .rooms, .gallery-section, .rules, .location-layout, .contact-section { background: var(--cream); }
.essentials, .editorial-section, .page-intro { background:linear-gradient(125deg,#f7ead3,#eddbbd); }
.essential-grid article { border:1px solid #fff6; background:linear-gradient(140deg,#fff3,#d6b79122); border-radius:18px; padding:24px; box-shadow:inset 0 1px #fff6,0 10px 26px #62432708; backdrop-filter:blur(12px); }
.filters button { background:#fff2; box-shadow:inset 0 1px #fff5; }
.page-intro { border-bottom-color: #88624225; }
.page-intro:after { -webkit-text-stroke-color: #88624220; }
.intro-section>p:not(.eyebrow), .editorial-copy p, .title-row>p, .room-grid p, .essential-grid p,
.rules details p, .location-layout p:not(.eyebrow), .location-layout small, .contact-section>p,
.gallery-count, .caption, .reviews small, .quotes cite { color: var(--muted); }
.features li, .rules details, .quotes blockquote { border-color: #88624230; }
.features li:before, .essential-grid article>span, .rating span, .photo-card small { color: var(--copper); }
.filters button { border-color: #88624250; min-height: 44px; }
.filters button[aria-pressed=true] { background: var(--coffee); border-color: var(--coffee); color: var(--cream); }
.photo-card img { background: var(--linen); border-radius: 3px; }
.photo-card:hover img { filter: brightness(1.04); }
.editorial-image img, .room-grid img, .location-layout>img { border-radius: 3px 36px 3px 3px; }
.editorial-image:after { background: #35281faa; }
.park-section { color: var(--cream); overflow: hidden; }
.park-section em, .park-section .eyebrow { color: #eed5b2; }
.park-section:after { background: linear-gradient(90deg,#35281fb8,#35281f0d 80%); }
.park-section>img { height: 112%; top: -6%; transform: translate3d(0,var(--park-shift,0px),0); }
.closing { background: var(--sand); border-color: #88624230; }
.closing>p:not(.eyebrow), .closing small { color: var(--muted); }
.scroll-reveal { filter: blur(3px); transition: opacity .55s ease var(--reveal-delay,0ms), transform .65s ease var(--reveal-delay,0ms), filter .65s ease; }
.scroll-reveal.is-revealed, .visual-editing .scroll-reveal { filter: none; }
.scroll-reveal:focus-within { opacity: 1; transform: none; filter: none; }

/* 07 · Bienvenida y visor */
.welcome-intro { background: radial-gradient(ellipse at 50% 80%,#f7ecdb,var(--linen)); color: var(--coffee); }
.welcome-intro em, .welcome-intro .eyebrow { color: var(--copper); }
.welcome-name { color: var(--muted); }
.welcome-mark { -webkit-text-stroke-color: #88624220; }
.welcome-enter { border-color: #88624270; background: #fff4; }
.welcome-line { background: var(--copper); }
.page-transition { background: var(--sand); }
.page-transition span { color: var(--coffee); }
dialog { background: #2d231d; color: var(--cream); }
dialog::backdrop { background: #241c15dd; backdrop-filter: blur(7px); }

/* 08 · Pie, avisos y editor (sin cambios en su persistencia) */
footer { background: var(--coffee); color: #e8d9c6; flex-wrap: wrap; }
footer .brand { color: var(--cream); }
.footer-legal { display:flex; flex-wrap:wrap; gap:12px 24px; border-top:1px solid #faf6ef30; padding-top:24px; margin-top:12px; flex-basis:100%; justify-content:center; }
.footer-legal a, .footer-legal button { font-size:12px; padding:8px 0; text-decoration:underline; text-underline-offset:4px; }
body .visual-edit-launch { background: var(--cream); color: var(--coffee); border-color: var(--copper); }
.visual-editor .editor-tabs button[aria-selected=true], .visual-editor .cloud-publish { background: var(--coffee); border-color: var(--coffee); color: var(--cream); }
body .visual-editor { background: var(--cream); color: var(--coffee); }
.live-update { position:fixed; bottom:20px; left:20px; z-index:300; background:var(--coffee); color:var(--cream); border:1px solid var(--linen); border-radius:12px; padding:16px; max-width:calc(100% - 40px); }
.live-update button { text-decoration:underline; margin-left:12px; }

/* 09 · Móvil y accesibilidad */
@media(max-width:700px) {
  .header .brand { font-size:25px; padding-left:38px; }
  .header .brand:before { width:29px; height:38px; top:1px; }
  .header .brand span { font-size:7px; letter-spacing:1px; }
  .header { gap:8px; }
  .header .contact { font-size:11px; padding:8px 10px; }
  .essential-grid article { padding:18px; }
  .journey { height:370vh; }
  .hero-dissolve img { object-position:60% center; }
  .hero-copy { padding-top:175px; }
  .hero h1 { font-size:clamp(54px,12vw,78px); }
  .story-panel { border-radius:3px 28px 3px 3px; padding:22px; }
  .story-panel h2 { font-size:33px; }
  .story-panel em { font-size:31px; }
  .story-text { line-height:1.65; }
  .scene-shade { background:linear-gradient(0deg,#35281fe8,transparent 65%); }
  footer { align-items:center; }
  .footer-legal { gap:8px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .scroll-reveal { opacity:1; filter:none; transform:none; }
  .park-section>img { transform:none; }
}
.rocio-motion-reduced .scroll-reveal { opacity:1; filter:none; transform:none; transition:none; clip-path:none; }
.rocio-motion-reduced .park-section>img { transform:none; }
.rocio-motion-reduced .scene-image { transition:none; transform:none; }