/* ============================================
   La Capria Suite Hotel — One Page
   ============================================ */

:root {
    --bg:           #0a0a0f;
    --bg-alt:       #0e0e14;
    --bg-card:      #16161f;
    --surface:      #1c1c28;
    --border:       rgba(255,255,255,0.06);
    --text:         #e8e4df;
    --text-muted:   #8a8692;
    --gold:         #c4a265;
    --gold-light:   #d4b87a;
    --gold-dark:    #9a7d4e;
    --white:        #fff;
    --overlay:      rgba(10,10,15,0.65);

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Outfit', -apple-system, sans-serif;
    --nav-h: 80px;
    --max-w: 1280px;
    --gap: clamp(1rem, 3vw, 2.5rem);
    --ease: 0.4s cubic-bezier(.25,.46,.45,.94);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-weight:300; font-size:16px; line-height:1.7; color:var(--text); background:var(--bg); overflow-x:hidden; }
a { text-decoration:none; color:inherit; transition:color var(--ease); }
img { display:block; max-width:100%; height:auto; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--gap); }
.text-center { text-align:center; }

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; line-height:1.2; color:var(--white); }
h1 { font-size:clamp(2.5rem,5vw,4.5rem); }
h2 { font-size:clamp(2rem,4vw,3.2rem); }
h3 { font-size:clamp(1.3rem,2.5vw,1.6rem); }

.section-label { font-family:var(--font-body); font-weight:300; font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; display:block; }
.section-title { margin-bottom:1rem; }
.section-title::after { content:''; display:block; width:50px; height:1px; background:var(--gold); margin-top:1.2rem; }
.section-title.centered::after { margin-left:auto; margin-right:auto; }

/* --- NAV (White) --- */
nav { position:fixed; top:0; left:0; width:100%; z-index:1000; height:var(--nav-h); display:flex; align-items:center; background:rgba(255,255,255,.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,.06); transition:box-shadow var(--ease); }
nav.scrolled { box-shadow:0 2px 30px rgba(0,0,0,.08); }
.nav-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--gap); width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo img { height:48px; width:auto; }
.nav-links { list-style:none; display:flex; gap:2.2rem; }
.nav-links a { font-size:.82rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:#4a4a4a; position:relative; padding:.5rem 0; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--gold); transition:width var(--ease); }
.nav-links a:hover, .nav-links a.active { color:var(--gold-dark); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-phone { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:400; color:var(--gold-dark); }
.nav-phone:hover { color:var(--gold); }
.nav-lang { display:flex; gap:.25rem; font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; border-left:1px solid rgba(0,0,0,.1); padding-left:1rem; }
.nav-lang a { color:#999; padding:.3rem .4rem; }
.nav-lang a.on { color:var(--gold-dark); font-weight:600; }
.nav-lang a:hover { color:var(--gold); }
.nav-lang span { color:#ccc; font-size:.7rem; line-height:1; align-self:center; }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:5px; }
.burger span { display:block; width:24px; height:1.5px; background:#4a4a4a; transition:var(--ease); }
.burger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

/* --- HERO --- */
.hero { position:relative; height:100vh; min-height:600px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 2s ease; animation:heroZoom 12s ease-in-out infinite alternate; }
.hero-bg img.active { opacity:1; }
@keyframes heroZoom { 0%{transform:scale(1.05)} 100%{transform:scale(1.12)} }
.hero-overlay { position:absolute; inset:0; z-index:2; background:linear-gradient(to bottom,rgba(10,10,15,.35) 0%,rgba(10,10,15,.45) 30%,rgba(10,10,15,.5) 50%,rgba(10,10,15,.6) 80%,rgba(10,10,15,.85) 100%); }
.hero-content { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--gap); }
.hero-content h1 { font-weight:300; font-style:italic; letter-spacing:.02em; max-width:700px; text-shadow:0 2px 40px rgba(0,0,0,.5); opacity:0; transform:translateY(30px); animation:fadeUp 1.2s .5s forwards; }
.hero-line { width:60px; height:1px; background:var(--gold); opacity:0; animation:fadeUp 1.2s .8s forwards; }
.scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:0; animation:fadeUp 1.2s 1.2s forwards; }
.scroll-hint span { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); }
.scroll-hint .line { width:1px; height:40px; background:linear-gradient(to bottom,var(--gold),transparent); animation:pulse 2s ease infinite; }
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:.3;transform:scaleY(.6)} }

/* --- SECTIONS --- */
section { padding:clamp(5rem,10vw,8rem) 0; }

/* Intro */
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:center; }
.intro-content p { color:var(--text-muted); margin-bottom:1.5rem; font-size:.95rem; }
.intro-image { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px; }
.intro-image img { width:100%; height:100%; object-fit:cover; }
.intro-image::after { content:''; position:absolute; inset:0; border:1px solid var(--gold); opacity:.15; pointer-events:none; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.75rem; padding:.9rem 2.2rem; font-family:var(--font-body); font-weight:400; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; border:1px solid var(--gold); color:var(--gold); background:transparent; cursor:pointer; transition:var(--ease); position:relative; overflow:hidden; }
.btn::before { content:''; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--ease); z-index:-1; }
.btn:hover { color:var(--bg); }
.btn:hover::before { transform:scaleX(1); }
.btn svg { width:14px; height:14px; transition:transform var(--ease); }
.btn:hover svg { transform:translateX(4px); }
.btn-filled { background:var(--gold); border-color:var(--gold); color:var(--bg); }
.btn-filled::before { background:var(--gold-dark); }
.btn-filled:hover { color:var(--white); }
.cta-buttons { display:flex; gap:1.2rem; flex-wrap:wrap; }

/* Features */
.features { padding:4rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.feat-item svg { width:32px; height:32px; stroke:var(--gold); margin-bottom:1rem; }
.feat-item h4 { font-size:1.1rem; margin-bottom:.5rem; }
.feat-item p { font-size:.82rem; color:var(--text-muted); }

/* Rooms — 3 column */
.rooms-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); margin-top:3rem; }
.room-card { background:var(--bg-card); border:1px solid var(--border); overflow:hidden; transition:border-color var(--ease); }
.room-card:hover { border-color:rgba(196,162,101,.2); }
.room-card img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s ease; }
.room-card:hover img { transform:scale(1.05); }
.room-info { padding:1.2rem 1.5rem; text-align:center; }
.room-info h3 { font-size:1.2rem; }

/* Gallery 4x4 */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:3rem; }
.gallery-item { position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item::after { content:''; position:absolute; inset:0; background:rgba(10,10,15,.3); opacity:0; transition:opacity var(--ease); }
.gallery-item:hover::after { opacity:1; }
.gallery-item .zoom { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:2; opacity:0; transition:var(--ease); color:var(--white); }
.gallery-item:hover .zoom { opacity:1; transform:translate(-50%,-50%) scale(1); }
.gallery-placeholder { background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,5rem); margin-top:3rem; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; margin-bottom:2rem; }
.contact-item svg { flex-shrink:0; width:20px; height:20px; stroke:var(--gold); margin-top:2px; }
.contact-item h4 { font-size:1.1rem; margin-bottom:.3rem; }
.contact-item p, .contact-item a { font-size:.9rem; color:var(--text-muted); }
.contact-item a:hover { color:var(--gold); }
.map-wrap { margin-top:1rem; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--border); }
.map-wrap iframe { width:100%; height:100%; filter:brightness(.8) contrast(1.1) saturate(.3); transition:filter var(--ease); }
.map-wrap:hover iframe { filter:brightness(.9) saturate(.6); }

/* Form */
.res-form { background:var(--bg-card); border:1px solid var(--border); padding:clamp(2rem,4vw,3rem); }
.res-form h3 { font-size:1.8rem; margin-bottom:.3rem; }
.res-form .sub { color:var(--text-muted); font-size:.85rem; margin-bottom:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.5rem; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:.85rem 1rem; font-family:var(--font-body); font-size:.9rem; font-weight:300; color:var(--text); background:var(--bg); border:1px solid var(--border); outline:none; transition:border-color var(--ease); appearance:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); }
.form-group select { background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8692' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.form-group textarea { resize:vertical; min-height:100px; }
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(138,134,146,.5); }
.form-group input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(.6); cursor:pointer; }
.btn-submit { width:100%; justify-content:center; padding:1.1rem 2rem; margin-top:.5rem; }
.form-msg { padding:1rem; margin-bottom:1.5rem; font-size:.85rem; display:none; }
.form-msg.ok { display:block; background:rgba(80,180,80,.1); border:1px solid rgba(80,180,80,.2); color:#7dcc7d; }
.form-msg.err { display:block; background:rgba(220,80,80,.1); border:1px solid rgba(220,80,80,.2); color:#dc7070; }

/* Footer */
footer { background:#2e2e40; border-top:1px solid rgba(255,255,255,0.1); }
.footer-top { padding:4rem 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:3rem; }
.footer-logo { height:50px; width:auto; margin-bottom:1.2rem; }
.footer-desc { font-size:.85rem; color:#b8b4c0; line-height:1.7; margin-bottom:1.5rem; max-width:320px; }
.footer-social { display:flex; gap:1rem; }
.footer-social a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(255,255,255,0.15); color:#b8b4c0; transition:var(--ease); }
.footer-social a:hover { border-color:var(--gold); color:var(--gold); }
.footer-col h4 { font-size:1.2rem; margin-bottom:1.5rem; color:#e0dce6; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.8rem; }
.footer-col ul li a, .footer-col ul li span { font-size:.85rem; color:#b8b4c0; }
.footer-col ul li a:hover { color:var(--gold); }
.fc-item { display:flex; align-items:flex-start; gap:.75rem; }
.fc-item svg { flex-shrink:0; stroke:var(--gold-light); margin-top:3px; }
.footer-bottom { padding:1.5rem 0; border-top:1px solid rgba(255,255,255,0.1); }
.footer-bottom p { font-size:.75rem; color:#9a96a4; text-align:center; }
.footer-bottom a { color:var(--gold); }

/* Reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }

/* Guest Counter */
.guest-counter { display:flex; align-items:center; gap:0; border:1px solid var(--border); width:fit-content; }
.gc-btn { width:48px; height:48px; background:var(--bg); border:none; color:var(--gold); font-size:1.3rem; cursor:pointer; transition:var(--ease); display:flex; align-items:center; justify-content:center; }
.gc-btn:hover { background:var(--surface); color:var(--gold-light); }
.gc-val { width:56px; height:48px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:1.1rem; font-weight:400; color:var(--white); background:var(--bg); border-left:1px solid var(--border); border-right:1px solid var(--border); }

/* Consent Checkbox */
.form-consent { margin:1.2rem 0 .5rem; }
.consent-label { display:flex; align-items:flex-start; gap:.75rem; cursor:pointer; font-size:.82rem; color:var(--text-muted); line-height:1.5; }
.consent-label input[type="checkbox"] { margin-top:3px; accent-color:var(--gold); width:16px; height:16px; flex-shrink:0; cursor:pointer; }
.consent-label a { color:var(--gold); text-decoration:underline; }
.consent-label a:hover { color:var(--gold-light); }

/* Responsive */
@media(max-width:1024px) {
    .rooms-grid { grid-template-columns:repeat(2,1fr); }
    .feat-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
    :root { --nav-h:70px; }
    .burger { display:flex; }
    .nav-links { position:fixed; top:var(--nav-h); left:0; width:100%; background:rgba(255,255,255,.97); backdrop-filter:blur(20px); flex-direction:column; align-items:center; padding:2rem 0; gap:0; transform:translateY(-100%); opacity:0; pointer-events:none; transition:var(--ease); border-bottom:1px solid rgba(0,0,0,.06); }
    .nav-links.open { transform:translateY(0); opacity:1; pointer-events:all; }
    .nav-links li { padding:.8rem 0; }
    .nav-phone { display:none; }
    .intro-grid { grid-template-columns:1fr; }
    .intro-image { max-height:400px; }
    .rooms-grid { grid-template-columns:1fr; }
    .gallery-grid { grid-template-columns:repeat(2,1fr); }
    .contact-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; gap:2rem; }
    .feat-grid { grid-template-columns:1fr 1fr; gap:1rem; }
}
@media(max-width:480px) {
    .gallery-grid { gap:4px; }
    .feat-grid { grid-template-columns:1fr; }
    .cta-buttons { flex-direction:column; }
}