/* CASA ROCÍO / 15 · Ambientes editoriales + cristal interactivo + cierre continuo. */
/* Identidad única: el mismo archivo CR en cabecera, pie y marcas de fondo. */
.welcome-mark { width:clamp(200px,36vw,460px);height:auto;aspect-ratio:1;max-height:70svh;transform:translate(-50%,-50%);background:#98774d;opacity:.09;mask:url('/assets/brand-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/brand-mark.svg') center/contain no-repeat;-webkit-text-stroke:0; }
.page-intro:after { content:'';top:24px;bottom:24px;right:5%;width:clamp(150px,23vw,300px);height:calc(100% - 48px);background:#98774d;opacity:.08;mask:url('/assets/brand-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/brand-mark.svg') center/contain no-repeat;-webkit-text-stroke:0; }
.page-transition span:before { content:'';display:block;width:60px;height:60px;margin:0 auto 20px;background:currentColor;mask:url('/assets/brand-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/brand-mark.svg') center/contain no-repeat; }
.suite-experience { padding:100px 6% 76px;background:linear-gradient(155deg,#f8f5ef,#ede6d9 60%,#f6f0e5);color:var(--coffee); }
.suite-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:42px; }
.suite-heading h2 { font-size:clamp(48px,5.3vw,76px);letter-spacing:-1.6px;margin:0; }
.suite-heading .eyebrow { letter-spacing:3px;font-size:10px;margin-bottom:20px; }
.suite-heading-aside { max-width:300px;padding-bottom:8px; }
.suite-heading-aside p { color:var(--muted);font-size:14px;line-height:1.9;margin:0 0 18px; }
.suite-tabs { display:flex;gap:8px;margin-bottom:26px;max-width:600px;padding:6px;border-radius:60px;border:1px solid #fff9;background:#ffffff45;box-shadow:inset 0 1px #fff9; }
.suite-tabs button { flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:12px 18px;border-radius:36px;font-size:14px;color:#6c6153;transition:background .25s,color .25s,box-shadow .25s; }
.suite-tabs button[aria-selected=true] { background:#fffaf0;color:#41382b;box-shadow:0 3px 13px #6f5d3420,inset 0 1px #fff; }
.suite-tabs button:hover { background:#fff8; }
.suite-tab-index { font-size:10px;opacity:.65; }
.suite-tabs svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3; }
.suite-room { --suite-tint:#e6d8c1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);align-items:center;gap:40px;padding:28px;border:1px solid #ffffffa6;border-radius:8px 40px 8px 8px;background:radial-gradient(ellipse at 0 0,#fff9,transparent 65%),linear-gradient(130deg,#f8f4eb,var(--suite-tint));box-shadow:0 18px 60px #6b593a0b,inset 0 1px #fff9; }
.suite-room[data-palette=lino],.suite-room[data-palette=salvia] { --suite-tint:#e6d8c1; }
.suite-visual { min-width:0;position:relative;isolation:isolate; }
.suite-main { position:relative;margin:0;overflow:hidden;border-radius:4px 24px 4px 4px;background:#e4d9c6; }
.suite-main img { display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; }
.suite-main img.suite-outgoing,.suite-detail img.suite-outgoing { position:absolute;inset:0;pointer-events:none; }
.suite-main figcaption { z-index:2; }
.suite-detail { overflow:hidden; }
.ambience-credit { font-size:10px!important;line-height:1.6!important; }
.ambience-credit a { text-decoration:underline;text-underline-offset:3px; }
/* Welcoming mist: decorative, brief and never intercepts navigation. */
.welcome-intro { background:linear-gradient(120deg,#f8f4ebed,#f0e7d8db);backdrop-filter:blur(9px);pointer-events:none;clip-path:none;transition:opacity .85s ease,filter .85s ease; }
.welcome-intro:before,.welcome-intro:after { width:110vw;height:75vh;left:-35vw;top:-20vh;bottom:auto;border-radius:50%;background:radial-gradient(ellipse,#fffdf7ed,transparent 65%);filter:blur(28px);animation:welcomeCloud 3s ease-out both; }
.welcome-intro:after { left:auto;right:-35vw;top:auto;bottom:-30vh;animation-direction:reverse;opacity:.8; }
.welcome-intro h2,.welcome-intro .eyebrow,.welcome-name { z-index:1; }
.welcome-name { color:var(--coffee); }
.welcome-leaving { clip-path:none;opacity:0;filter:blur(12px); }
.welcome-line,.welcome-enter { display:none; }
@keyframes welcomeCloud { from { transform:translate(10%,20%) scale(1.1); } to { transform:translate(-12%,-12%) scale(1.35); } }
@media(prefers-reduced-motion:reduce) { .welcome-intro { display:none; }.suite-main img,.suite-detail img { animation:none!important; } }
.suite-main figcaption { position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;display:flex;justify-content:space-between;gap:16px;background:linear-gradient(transparent,#1f281dab);color:#fff9ed;font-size:10px;letter-spacing:.5px; }
.suite-photo-note { max-width:70%; }
.suite-photo-counter { display:none; }
.suite-detail { position:relative;z-index:4;width:30%;max-width:155px;margin:-30px 24px 0 auto;border:7px solid #f4eee2;box-shadow:0 8px 24px #5b4b3425;background:#f4eee2;transform:rotate(3deg); }
.suite-detail img { display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; }
.suite-detail figcaption { font:italic 11px/1.3 Georgia,serif;text-align:center;padding:8px 2px 3px;color:#6d5e49; }
.suite-copy { min-width:0;padding:6px 12px 20px 0; }
.suite-copy-top { display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #8a765632;margin-bottom:26px;padding-bottom:18px; }
.suite-copy-top>span:first-child { font-size:9px;letter-spacing:3px; }
.suite-number { font:52px/.9 var(--serif);color:#a38d6870; }
.suite-copy .eyebrow { font-size:9px;letter-spacing:2px;margin-bottom:18px; }
.suite-copy h3 { font:400 clamp(32px,3.2vw,46px)/1.12 var(--serif);margin:0 0 24px;letter-spacing:-.8px; }
.suite-description { font-size:14px;line-height:1.85;color:#6c6051;margin:0 0 26px; }
.suite-facts { display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0 0 26px;padding:0; }
.suite-facts li { padding:6px 10px;border:1px solid #8e775c35;border-radius:24px;background:#fff3;font-size:10px; }
.suite-link { display:flex;justify-content:space-between;align-items:center;border-top:1px solid #8e775c35;padding-top:19px;min-height:44px;font-size:13px; }
.suite-link svg { width:34px;height:34px;padding:8px;border:1px solid #8e775c50;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.4;transition:background .2s,transform .2s; }
.suite-link:hover svg { background:#fff8;transform:translate(2px,-2px); }
.suite-footnote { display:flex;justify-content:space-between;gap:16px;margin-top:22px;font-size:10px;letter-spacing:.6px;color:#84755e; }

/* Un mismo lienzo atraviesa la invitación y el pie legal: sin cambio brusco de fondo. */
.rocio-address { font-style:normal;line-height:1.8;margin:24px 0;padding-left:18px;border-left:2px solid #b6a180;color:var(--coffee); }
.contact-details { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:38px auto 0;text-align:left; }
.contact-details>a { display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid #fff9;border-radius:20px;background:linear-gradient(125deg,#fffaf0bb,#e6d8c16b);box-shadow:inset 0 1px #fff9;transition:transform .25s,background .25s; }
.contact-details>a:hover { transform:translateY(-3px);background:#fffaf0; }
.contact-details span { font-size:9px;letter-spacing:2px;color:var(--copper); }
.contact-details strong { font-size:clamp(13px,1.5vw,18px);font-weight:500;overflow-wrap:anywhere;color:var(--coffee); }
.contact-details small { font-size:12px;color:var(--muted);line-height:1.6; }
@media(max-width:700px) { .contact-details { grid-template-columns:1fr;gap:12px; }.contact-details>a { padding:23px; }.contact-details strong { font-size:17px; } }
.closing-surface { background:radial-gradient(ellipse at 8% 10%,#fffdf6dd,transparent 55%),radial-gradient(ellipse at 93% 92%,#c5a57066,transparent 65%),linear-gradient(120deg,#f4ecdc,#e2d0ac 37%,#f5eddb 61%,#dac299); }
.closing-surface .closing,.closing-surface footer { background:transparent;border:0;box-shadow:none; }
.closing-surface .closing:before { display:none; }
.closing-surface footer { padding-top:30px; }
.closing-surface .footer-legal { border-color:#917c5630; }
.closing .pill { background:linear-gradient(125deg,#fffdf6ec,#eee6d3de);color:#3e4b40;border:1px solid #fff9;box-shadow:inset 0 1px #fff,0 7px 20px #6f542622;backdrop-filter:blur(14px);gap:26px;padding:13px 18px 13px 25px; }
.closing .pill .rocio-icon { width:30px;height:30px;padding:7px;border-radius:50%;background:#586655;color:#fff9e9; }
.closing .pill:hover { background:#fff9e9;box-shadow:inset 0 1px #fff,0 9px 24px #6f54262b; }

/* Luz especular situada con Pointer Events. No bloquea el scroll táctil. */
.hero-bottom { --glass-x:50%;--glass-y:50%;isolation:isolate;overflow:hidden;padding:18px 22px;border:1px solid transparent;border-radius:22px;background:linear-gradient(125deg,#fff7e209,#eee6d605 50%,#bba98b0a);backdrop-filter:blur(7px) saturate(105%);-webkit-backdrop-filter:blur(7px) saturate(105%);box-shadow:none; }
.hero-bottom:before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 170px 110px at var(--glass-x) var(--glass-y),#fff9de77,#fff8e922 48%,transparent 75%);opacity:0;transition:opacity .35s; }
.hero-bottom:after { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;box-shadow:none;background:linear-gradient(120deg,transparent 10%,#ffffff06 35%,transparent 65%); }
.hero-bottom.glass-active:before { opacity:1; }
.hero-bottom .stats { flex:1;justify-content:space-evenly;gap:8px; }
.hero-bottom .stats>span { padding:8px 12px;border:1px solid transparent; }
.hero-bottom .location { min-width:245px; }
.hero-bottom .location small { display:inline-block;margin-top:5px; }
.hero-bottom .scroll-cue { white-space:nowrap; }

@media(min-width:701px) and (max-width:1000px) {
  .suite-room { gap:24px;padding:20px;grid-template-columns:minmax(0,1.3fr) minmax(245px,1fr); }
  .suite-copy { padding-right:0; }.suite-detail { max-width:120px; }.hero-bottom .stats>span { padding-inline:4px; }
}
@media(max-width:700px) {
  .suite-experience { padding:62px 5% 48px; }
  .suite-heading { display:block;margin-bottom:28px;padding:0 2%; }
  .suite-heading h2 { font-size:45px;letter-spacing:-1px; }
  .suite-heading .eyebrow { font-size:9px;letter-spacing:2px;margin-bottom:18px; }
  .suite-heading-aside { margin-top:24px;max-width:none;padding:0;display:flex;align-items:flex-end;gap:15px;justify-content:space-between; }
  .suite-heading-aside p { font-size:12px;line-height:1.75;margin:0;max-width:185px; }
  .suite-heading-aside p br { display:none; }.suite-heading-aside .text-link { font-size:10px;flex-shrink:0; }
  .suite-tabs { gap:2px;padding:4px;margin-bottom:18px; }
  .suite-tabs button { gap:5px;font-size:12px;padding:10px 8px;min-height:46px;justify-content:center; }
  .suite-tab-index { font-size:8px; }.suite-tabs svg { display:none; }
  .suite-room { display:block;padding:12px;border-radius:6px 24px 6px 6px; }
  .suite-main { border-radius:3px 16px 3px 3px; }.suite-main img { aspect-ratio:4/3; }
  .suite-main figcaption { font-size:9px;padding:38px 12px 12px; }
  .suite-detail { width:26%;max-width:96px;margin:-16px 10px 0 auto;border-width:5px; }
  .suite-detail figcaption { font-size:8px;padding:5px 0 1px; }
  .suite-copy { margin-top:-52px;padding:0 10px 16px; }
  .suite-copy-top { width:60%;padding-bottom:12px;margin-bottom:18px; }
  .suite-copy-top>span:first-child { font-size:8px;letter-spacing:2px; }.suite-number { font-size:34px; }
  .suite-copy .eyebrow { font-size:8px;letter-spacing:1.5px;margin-bottom:12px; }
  .suite-copy h3 { font-size:35px;margin-bottom:18px; }
  .suite-description { font-size:13px;line-height:1.8;margin-bottom:20px; }
  .suite-facts { margin-bottom:18px; }.suite-facts li { font-size:9px; }
  .suite-footnote { font-size:9px;align-items:flex-start;line-height:1.7; }.suite-footnote>span:first-child { max-width:165px; }.suite-footnote>span:last-child { text-align:right; }
  .hero-bottom { padding:10px 9px;border-radius:19px; }.hero-bottom .stats { display:flex; }.hero-bottom .stats>span { flex:1;text-align:center;padding:8px 3px; }.hero-bottom .stats b { margin-right:0;font-size:27px; }
  .hero-bottom .location { display:none; }
  .closing .pill { font-size:13px;gap:15px; }.closing h2 { font-size:46px; }
}
@media(prefers-reduced-motion:reduce) { .hero-bottom:before,.hero-bottom .stats>span,.suite-tabs button { transition:none; } }
.rocio-motion-reduced .hero-bottom:before,.rocio-motion-reduced .hero-bottom .stats>span { transition:none; }