@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');

:root{
  --red:#c8102e;
  --red-dark:#970b20;
  --black:#111114;
  --soft-black:#1d1d22;
  --gray:#6f7178;
  --light:#f5f5f6;
  --white:#ffffff;
  --radius:28px;
  --shadow:0 24px 70px rgba(0,0,0,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--black);
  background:#fff;
  overflow-x:hidden;
}

h1,h2,h3{font-weight:900;letter-spacing:-.04em}
h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.2rem,8vw,7.4rem);
  line-height:.95;
}
h2{font-size:clamp(2.1rem,4vw,4rem);line-height:1}
h3{font-size:1.7rem}
p{color:var(--gray);line-height:1.7}

.section-padding{padding:105px 0}
.light-section{background:var(--light)}
.shadow-premium{box-shadow:var(--shadow)}
.tag{
  display:inline-flex;
  padding:.45rem .9rem;
  border-radius:999px;
  background:rgba(200,16,46,.09);
  color:var(--red);
  font-weight:800;
  font-size:.83rem;
  margin-bottom:1rem;
}
.section-heading{
  max-width:780px;
  margin:0 auto 48px;
  text-align:center;
}
.section-heading p{font-size:1.08rem;margin-top:1rem}

.btn{
  border-radius:999px;
  font-weight:800;
  padding:.85rem 1.3rem;
  transition:.25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-red{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  box-shadow:0 18px 38px rgba(200,16,46,.25);
}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-xl{padding:1.05rem 2rem;font-size:1.02rem}
.btn-sm-pill{padding:.65rem 1rem}
.btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--black)}
.btn-link-dark{color:var(--black);text-decoration:none;font-weight:800}

/* NAV */
.oe-navbar{
  padding:1.15rem 0;
  background:rgba(10,10,12,.26);
  backdrop-filter:blur(18px);
  transition:.25s ease;
}
.oe-navbar.scrolled{
  background:rgba(10,10,12,.88);
  padding:.7rem 0;
}
.oe-logo{
  color:#fff!important;
  font-family:'Playfair Display',serif;
  font-size:1.9rem;
  letter-spacing:.02em;
  font-weight:900;
}
.oe-logo strong{color:var(--red)}
.oe-navbar .nav-link{
  color:rgba(255,255,255,.86)!important;
  font-weight:700;
  margin:0 .35rem;
}
.oe-toggler{border:none;box-shadow:none!important}
.oe-toggler span{
  display:block;
  width:32px;
  height:3px;
  background:#fff;
  margin:6px 0;
  border-radius:999px;
}

/* HERO */
.hero-section{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  background:
    linear-gradient(100deg,rgba(0,0,0,.70),rgba(0,0,0,.28),rgba(160,0,20,.42)),
    url('https://images.unsplash.com/photo-1574258495973-f010dfbb5371?auto=format&fit=crop&w=1800&q=85') center/cover no-repeat;
  border-bottom-left-radius:28px;
  border-bottom-right-radius:28px;
  overflow:hidden;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 75% 35%,rgba(200,16,46,.46),transparent 38%);
}
.hero-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding-top:120px;
  transform:translateY(-35px);
}
.eyebrow{
  color:rgba(255,255,255,.82);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:900;
}
.hero-subtitle{
  color:rgba(255,255,255,.96);
  font-size:clamp(1.15rem,2.2vw,1.85rem);
  font-weight:500;
  margin:0 auto 245px;
  text-shadow:0 8px 24px rgba(0,0,0,.45);
}
.hero-actions{
  display:flex;
  gap:1.15rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:0;
}

/* PROMOS */
.promo-slide{
  min-height:360px;
  padding:55px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.78)),
    url('https://images.unsplash.com/photo-1511499767150-a48a237f0083?auto=format&fit=crop&w=1600&q=85') center/cover;
}
.promo-slide-dark{
  color:#fff;
  background:
    linear-gradient(90deg,rgba(10,10,12,.92),rgba(10,10,12,.55)),
    url('https://images.unsplash.com/photo-1509695507497-903c140c43b0?auto=format&fit=crop&w=1600&q=85') center/cover;
}
.promo-slide-dark p{color:rgba(255,255,255,.82)}
.promo-kicker{font-weight:900;color:var(--red);text-transform:uppercase;letter-spacing:.12em}
.promo-slide h3{font-size:clamp(2.2rem,5vw,4.2rem);max-width:680px}
.promo-slide p{max-width:560px;font-size:1.08rem}

/* ABOUT */
.about-card,.branch-card,.premium-card,.appointment-card,.assist-card,.contact-form,.contact-info{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 16px 50px rgba(0,0,0,.08);
}
.about-card{padding:38px}
.about-card li{margin:1rem 0;color:var(--soft-black);font-weight:600}

/* BRANCH */
.branch-card{padding:35px;height:100%}
.branch-card h3{font-size:2rem}
.branch-hours{font-weight:600}
.branch-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}

/* PRODUCTS */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.premium-card{
  min-height:150px;
  padding:25px;
  display:flex;
  align-items:end;
  font-size:1.15rem;
  font-weight:900;
  background:linear-gradient(160deg,#fff,#f4f4f5);
  transition:.25s ease;
}
.premium-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}

/* LC */
.lc-section{
  background:linear-gradient(135deg,#111114,#2b0b12);
  color:#fff;
}
.lc-section p{color:rgba(255,255,255,.78)}
.steps-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.step-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:25px;
  backdrop-filter:blur(18px);
}
.step-card span{color:var(--red);font-weight:900}
.step-card h4{font-weight:900;margin:.7rem 0}
.step-wide{grid-column:span 2}

/* SHOP */
.shop-card{
  min-height:170px;
  border-radius:24px;
  background:#111114;
  color:#fff;
  display:flex;
  align-items:end;
  padding:22px;
  font-weight:900;
  box-shadow:0 18px 42px rgba(0,0,0,.15);
}

/* APPOINTMENT */
.appointment-section{
  background:linear-gradient(180deg,#fff,#f5f5f6);
}
.appointment-card{
  max-width:920px;
  margin:auto;
  padding:35px;
}
label{
  font-weight:900;
  margin-bottom:.5rem;
}
.form-control,.form-select{
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  padding:.9rem 1rem;
}
.time-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:12px 0 18px;
}
.time-grid button{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:16px;
  min-height:52px;
  font-weight:900;
  transition:.2s ease;
}
.time-grid button:hover,.time-grid button.active{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}

/* ASSIST */
.assist-card{padding:30px}

/* CONVENIO */
.convenio-section{
  background:#111114;
}
.convenio-box{
  border-radius:34px;
  padding:65px;
  background:
    linear-gradient(100deg,rgba(200,16,46,.88),rgba(20,20,24,.78)),
    url('https://images.unsplash.com/photo-1560264280-88b68371db39?auto=format&fit=crop&w=1600&q=85') center/cover;
  color:#fff;
  box-shadow:var(--shadow);
}
.convenio-box p{color:rgba(255,255,255,.84);max-width:680px}

/* CONTACT */
.contact-info,.contact-form{padding:32px;height:100%}

/* FOOTER */
.footer{
  background:#0b0b0d;
  color:#fff;
  padding:28px 0;
}
.footer p{margin:0;color:rgba(255,255,255,.66)}

.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:68px;
  height:68px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  z-index:50;
  display:grid;
  place-items:center;
  font-size:2rem;
  text-decoration:none;
  box-shadow:0 18px 40px rgba(37,211,102,.35);
}

/* MOBILE */
@media(max-width:991px){
  .oe-navbar .navbar-collapse{
    margin-top:1rem;
    padding:1rem;
    background:rgba(10,10,12,.96);
    border-radius:20px;
  }
  .hero-actions .btn{width:100%;max-width:420px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .section-padding{padding:78px 0}
}

@media(max-width:575px){
  .hero-section{border-radius:0;min-height:100svh}
  .oe-logo{font-size:1.45rem}
  .hero-content{text-align:center}
  .hero-actions{gap:.75rem}
  .btn-xl{padding:.95rem 1.2rem}
  .promo-slide{padding:32px;min-height:330px}
  .product-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .step-wide{grid-column:span 1}
  .time-grid{grid-template-columns:repeat(2,1fr)}
  .appointment-card{padding:22px}
  .convenio-box{padding:38px 24px}
  .whatsapp-float{width:60px;height:60px;right:16px;bottom:16px}
}
.logo-img{
    height: 58px;
    width: auto;
    object-fit: contain;
    transition: .3s ease;
}

.oe-navbar.scrolled .logo-img{
    height: 50px;
}

@media(max-width:575px){
    .logo-img{
        height: 42px;
    }
}
@media(max-width:575px){
  .hero-content{
    padding-top:105px;
    transform:translateY(-25px);
  }

  .hero-subtitle{
    margin:0 auto 190px;
    font-size:1.25rem;
    line-height:1.35;
  }

  .hero-actions{
    gap:.8rem;
  }
}
.time-grid button.ocupado{
  background:#e9e9ec;
  color:#8b8d94;
  border-color:#d7d7dc;
  cursor:not-allowed;
  text-decoration:line-through;
  box-shadow:none;
}

.time-grid button.ocupado:hover{
  background:#e9e9ec;
  color:#8b8d94;
  transform:none;
}
/* PROMOCIONES DINÁMICAS ESCRITORIO / MÓVIL */
.promo-slide-img{
  width:100%;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
}

.promo-slide-img img{
  display:block;
  width:100%;
  height:auto;
}

.promo-img-mobile{
  display:none !important;
}

.promo-img-desktop{
  display:block !important;
}

@media(max-width:767px){
  .promo-img-desktop{
    display:none !important;
  }

  .promo-img-mobile{
    display:block !important;
  }
}