*{box-sizing:border-box}
:root{--yellow:#ffd000;--black:#050606;--white:#f8f8f8}
html{scroll-behavior:smooth}
body{margin:0;background:#050606;color:var(--white);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
.landing{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:#050606}
.scenery{position:absolute;z-index:-2;inset:0 0 auto;height:82%;background-image:url("img/caceres-bg.png");background-size:cover;background-position:center 43%;filter:saturate(.92)}
.shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(3,7,9,.45) 0%,rgba(4,5,5,.36) 28%,rgba(4,5,5,.9) 63%,#050606 82%),linear-gradient(90deg,rgba(0,0,0,.6),transparent 55%,rgba(0,0,0,.2))}
.topbar{position:absolute;z-index:8;top:32px;left:0;right:0;display:flex;justify-content:center;align-items:center;min-height:52px}
.mini-brand{display:none}
.desktop-sticker{display:grid;place-items:center;background:var(--yellow);color:#080808;padding:9px 24px 8px;min-width:300px;min-height:58px;clip-path:polygon(5% 13%,14% 5%,8% 0,34% 2%,57% 0,87% 5%,96% 15%,100% 20%,94% 34%,99% 48%,92% 60%,98% 76%,86% 91%,58% 94%,30% 100%,8% 91%,0 78%,5% 64%,0 47%,7% 30%);font:italic 800 27px "Barlow Condensed",sans-serif;transform:rotate(-1deg)}
.menu-toggle{position:absolute;z-index:9;right:5%;top:0;width:38px;height:42px;background:transparent;border:0;display:flex;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;padding:5px}
.menu-toggle span{height:2px;width:25px;background:#fff;display:block;margin-left:auto;transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-8px) rotate(-45deg)}
.menu{position:absolute;z-index:7;right:5%;top:82px;display:grid;gap:2px;min-width:190px;padding:9px;background:rgba(8,9,9,.97);border:1px solid rgba(255,208,0,.65);border-radius:12px;box-shadow:0 16px 40px #0009}
.menu[hidden],.modal-backdrop[hidden]{display:none}
.menu a,.menu button{border:0;background:transparent;color:#fff;text-align:left;padding:12px;border-radius:7px;cursor:pointer;font-size:14px}
.menu a:hover,.menu button:hover{background:#ffffff12;color:var(--yellow)}
.content{position:relative;width:min(100%,1200px);min-height:100svh;margin:auto;padding:112px 7% 24px;display:flex;flex-direction:column;align-items:center}
.brand{width:100%;text-align:center;margin-top:22px}
.brand h1{margin:0;display:flex;justify-content:center;align-items:baseline;gap:.22em;font:italic 900 clamp(56px,7.2vw,84px)/.96 Inter,Arial,sans-serif;letter-spacing:-.065em}
.brand h1 span{color:#fff}.brand h1 strong{color:var(--yellow);font-weight:900}
.swoosh{height:15px;width:min(440px,64%);margin:14px auto 5px;border-top:8px solid var(--yellow);border-radius:60% 50% 0 0;transform:rotate(-1deg)}
.tagline{font-size:clamp(12px,1.45vw,19px);letter-spacing:.43em;margin:12px 0 0;font-weight:400}
.location-note{position:absolute;left:3%;top:34%;display:flex;flex-direction:column;align-items:center;color:#fff;transform:rotate(-3deg)}
.location-note svg{width:42px;fill:var(--yellow);margin-bottom:4px}
.location-note span,.mobile-location{font:italic 25px/1.05 "Kaushan Script",cursive;text-shadow:0 2px 8px #000}
.location-note i,.mobile-location i{display:block;width:85px;border-bottom:3px solid var(--yellow);transform:rotate(-12deg);margin-top:9px}
.downloads{width:min(100%,560px);display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px}
.download{min-height:82px;border:1.5px solid #f7f7f7;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 16px;transition:transform .2s,filter .2s;box-shadow:0 3px 12px #0002}
.download:hover{transform:translateY(-2px);filter:brightness(1.12)}
.download.ios{background:rgba(4,4,4,.82)}.download.android{background:linear-gradient(110deg,#07951b,#075b18)}
.download svg{width:42px;height:46px;flex-shrink:0;fill:currentColor}.download-copy{display:flex;flex-direction:column;gap:1px}.download-copy small{font-size:15px}.download-copy b{font-size:25px;line-height:1.1;letter-spacing:-.04em}
.contact-row{width:min(100%,760px);display:flex;align-items:center;justify-content:center;gap:36px;margin-top:38px}
.contact-item{display:flex;align-items:center;gap:17px;min-width:0}
.contact-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:#050505;flex-shrink:0}
.contact-icon svg{width:25px;height:25px;fill:currentColor}
.contact-copy{display:flex;flex-direction:column;gap:2px;white-space:nowrap}.contact-copy small{font-size:14px}.contact-copy b{font-size:16px;font-weight:700;letter-spacing:-.025em}
.contact-divider{width:1px;height:45px;background:var(--yellow);opacity:.8}
.motto{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:13px;margin:38px 0 0;font-size:12px;letter-spacing:.38em;text-align:center;white-space:nowrap}
.motto span{width:22px;height:2px;background:var(--yellow);display:block;flex-shrink:0}
.city-art,.mobile-location{display:none}
.modal-backdrop{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.popup{position:relative;width:min(100%,380px);padding:28px 22px 22px;background:linear-gradient(160deg,#151716,#050606);border:1px solid rgba(255,208,0,.72);border-radius:18px;box-shadow:0 22px 70px #000a;text-align:center}
.popup h2{font-size:23px;margin:2px 24px 8px;font-weight:800}
.popup-description{font-size:13px;color:#c9c9c9;margin:0 0 20px}
.popup-close{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.popup-options{display:grid;gap:11px}
.popup-option{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border:1px solid #777;border-radius:11px;background:#0b0c0c;color:#fff;font-weight:700;cursor:pointer;transition:filter .2s,transform .2s}
.popup-option:hover{filter:brightness(1.18);transform:translateY(-1px)}
.popup-option.android{background:linear-gradient(110deg,#07951b,#075b18);border-color:#71d67b}
.popup-option svg{width:25px;height:27px;fill:currentColor}
.popup-option.phone,.popup-option.email{justify-content:flex-start;text-align:left}
.popup-option .option-text{display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
.popup-option small{font-size:11px;font-weight:500;opacity:.8}
@media(min-width:900px){.content{padding-top:112px}.brand{margin-top:20px}.downloads{margin-top:38px}.contact-row{margin-top:38px}.motto{margin-top:38px}}
@media(max-width:700px){
 .landing{min-height:100svh}
 .topbar{top:24px;min-height:42px}
 .desktop-sticker{display:none}
 .mini-brand{display:grid;place-items:center;min-width:220px;min-height:43px;background:var(--yellow);color:#080808;padding:6px 18px;clip-path:polygon(5% 13%,14% 5%,8% 0,34% 2%,57% 0,87% 5%,96% 15%,100% 20%,94% 34%,99% 48%,92% 60%,98% 76%,86% 91%,58% 94%,30% 100%,8% 91%,0 78%,5% 64%,0 47%,7% 30%);font:italic 800 21px "Barlow Condensed",sans-serif;transform:rotate(-1deg)}
 .menu-toggle{right:5%;top:1px;width:32px}.menu-toggle span{width:20px}
 .menu{top:70px;right:5%}
 .scenery{height:63%;background-position:58% center}
 .shade{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.55) 34%,#050606 63%,#050606)}
 .content{padding:95px 7% 16px;min-height:100svh}
 .brand{margin-top:0}
 .brand h1{display:flex;flex-direction:column;align-items:center;gap:0;font-size:clamp(48px,13vw,64px);line-height:.91;letter-spacing:-.07em}
 .brand h1 span,.brand h1 strong{display:block}
 .swoosh{width:78%;height:12px;border-top-width:6px;margin-top:12px}
 .tagline{font-size:11px;letter-spacing:.37em;margin-top:10px}
 .location-note{display:none}
 .downloads{grid-template-columns:1fr;gap:12px;width:min(100%,310px);margin-top:26px}
 .download{min-height:72px;border-radius:13px;justify-content:flex-start;padding:10px 17%;gap:16px}
 .download svg{width:34px;height:40px}
 .download-copy{flex-direction:row;align-items:center;gap:7px}
 .download-copy small{font-size:16px}.download-copy b{font-size:18px;letter-spacing:-.03em}
 .contact-row{width:min(100%,300px);flex-direction:column;align-items:stretch;gap:17px;margin-top:25px}
 .contact-item{gap:16px}
 .contact-icon{width:39px;height:39px;background:transparent;color:var(--yellow)}
 .contact-icon svg{width:32px;height:32px}
 .contact-copy small{font-size:13px}.contact-copy b{font-size:15px;white-space:normal;overflow-wrap:anywhere}
 .contact-divider{width:100%;height:1px}
 .motto{gap:8px;margin:18px 0 95px;font-size:8px;letter-spacing:.24em;white-space:normal;line-height:1.6}
 .motto span{width:18px}
 .city-art{display:block;position:absolute;left:5%;bottom:0;width:69%;height:75px;color:#ffd53d;opacity:.8;pointer-events:none}
 .city-art svg{width:100%;height:100%}
 .mobile-location{display:block;position:absolute;right:7%;bottom:29px;color:var(--yellow);font-size:25px;transform:rotate(-5deg);pointer-events:none}
 .mobile-location i{width:75px;border-bottom-width:2px}
}
@media(max-width:380px){
 .content{padding-left:5%;padding-right:5%}
 .mini-brand{min-width:195px;font-size:19px}
 .brand h1{font-size:46px}
 .downloads{width:100%}
 .download{padding-left:15%;padding-right:8%}
 .contact-row{width:95%}
 .motto{font-size:7px;letter-spacing:.16em;gap:6px;margin-top:16px;margin-bottom:88px}
 .motto span{width:14px}
}
@media(max-height:760px) and (max-width:700px){
 .content{padding-top:82px}
 .downloads{margin-top:18px}
 .contact-row{margin-top:17px;gap:12px}
 .motto{margin-top:12px;margin-bottom:82px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.logo-tchama {
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    object-fit: contain;
}

@media (min-width: 650px) {
    .logo-tchama {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .logo-tchama {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .logo-container {
        width: 100%;
        padding: 0 8px;
    }

    .logo-tchama {
        width: 100%;
        height: auto;
    }
}
