/*
Theme Name: Revelbox BCN
Theme URI: https://revelbox.es
Author: Revelbox
Description: Tema ligero para Revelbox, migrado desde Shopify y optimizado para captación local.
Version: 1.0.0
Text Domain: revelbox
*/

:root{--rb-green:#0d5a45;--rb-mint:#8bd8c4;--rb-ink:#111;--rb-off:#f7f7f4;--rb-grey:#ecece8;--rb-max:1240px}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;color:var(--rb-ink);background:#fff;font-family:Inter,Arial,sans-serif;line-height:1.5}

a{color:inherit;text-decoration:none}

.wrap{width:min(var(--rb-max),calc(100% - 40px));margin:auto}

.topbar{background:var(--rb-ink);color:#fff;font-size:13px;padding:8px 0;text-align:center}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid #ddd}

.header-in{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}

.brand{font-family:Impact,'Arial Narrow',sans-serif;font-size:30px;letter-spacing:.5px}

.brand b{color:var(--rb-green)}

nav{display:flex;gap:30px;font-size:14px}

nav a:hover{opacity:.55}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;background:var(--rb-green);color:#fff;border:0;border-radius:0;font-weight:700;cursor:pointer}

.btn.dark{background:#111}

.hero{min-height:650px;display:flex;align-items:flex-end;position:relative;background:linear-gradient(135deg,#173d34,#101010);background-size:cover;background-position:center}

.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.05) 65%)}

.hero-content{position:relative;z-index:2;color:#fff;padding:90px 0}

.hero h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(58px,8vw,108px);line-height:.9;max-width:1000px;margin:0 0 26px}

.hero p{font-size:20px;max-width:650px}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}


/* FRANJA */

.ticker{
background:var(--rb-mint);
padding:11px 20px;
text-align:center;
white-space:nowrap;
overflow:hidden;
font-family:Arial,sans-serif;
font-size:14px;
font-weight:700;
text-transform:uppercase;
word-spacing:normal;
letter-spacing:0;
}

.ticker-text{
display:inline;
word-spacing:-3px;
letter-spacing:0;
}

.ticker-dot{
display:inline-block;
width:54px;
text-align:center;
word-spacing:0;
letter-spacing:0;
}


/* RESTO WEB */

.section{padding:90px 0}

.section.alt{background:var(--rb-off)}

.eyebrow{text-transform:uppercase;font-size:13px;letter-spacing:1.8px;font-weight:800;color:var(--rb-green)}

h2{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(44px,6vw,78px);line-height:.95;margin:10px 0 35px}

.locations{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.location{min-height:380px;background:#ddd;display:flex;align-items:flex-end;padding:35px;position:relative;overflow:hidden}

.location:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,.05))}

.location>*{position:relative;z-index:2;color:#fff}

.location h3{font-family:Impact,'Arial Narrow',sans-serif;font-size:46px;font-weight:400;text-transform:uppercase;margin:0}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d5d5d0;border:1px solid #d5d5d0}

.feature{background:#fff;padding:38px 28px}

.feature .ico{font-size:30px}

.feature h3{font-size:18px;margin:20px 0 10px}

.feature p{font-size:14px;color:#555}

.lead{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

.lead-card{background:var(--rb-green);color:#fff;padding:50px}

.lead-card h2{font-size:56px}

.form{display:grid;gap:12px}

.form input,.form select,.form textarea{width:100%;padding:15px;border:1px solid #bbb;background:#fff;font:inherit}

.form textarea{min-height:120px}

.fine{font-size:12px;opacity:.75}

.footer{background:#111;color:#fff;padding:60px 0 30px}

.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}

.footer small{color:#aaa}

.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:70;background:#25D366;color:#fff;padding:14px 18px;border-radius:99px;font-weight:800;box-shadow:0 8px 30px #0003}

@media(max-width:800px){
nav{display:none}
.header-in{height:64px}
.hero{min-height:560px}
.hero-content{padding:60px 0}
.locations,.lead{grid-template-columns:1fr}
.features{grid-template-columns:1fr 1fr}
.section{padding:65px 0}
.footer-grid{grid-template-columns:1fr}
.lead-card{padding:32px}
.ticker{text-align:left;overflow-x:auto}
}

@media(max-width:480px){
.features{grid-template-columns:1fr}
.wrap{width:min(100% - 28px,var(--rb-max))}
.hero h1{font-size:56px}
.btn{width:100%}
}