/* Tipografías cargadas desde Google Fonts (Playfair Display + Inter) */
:root{
  --bg:#ffffff;
  --paper:#f8f7f4;
  --navy:#1b2540;        /* azul marino */
  --gold:#d8c69c;        /* dorado suave */
  --muted:#6b6b6b;
  --radius:14px;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', sans-serif;
  background:var(--paper);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Header / nav */
.navbar{
  background:transparent;
}

.navbar-nav .nav-link {
    font-size: 1.20rem;  /* Ajusta entre 1.05rem y 1.1rem según prefieras */
    margin-right:10px;
    font-weight: 500;    /* Opcional: un poquito más de peso para elegancia */
}

.navbar-brand{ font-weight:600; color:var(--navy); }
.brand-title{ font-family:'Playfair Display', serif; font-size:1.05rem; color:var(--navy); }

/* HERO */
.hero{
  padding:80px 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));
}
.hero .display-4{
  font-family:'Playfair Display', serif;
  color:var(--navy);
  line-height:1.05;
}
.hero .accent{
  color:var(--gold);
  font-weight:600;
}

/* HERO card (imagen placeholder) */
.hero-card{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(27,37,64,0.04);
}

/* SECCIONES generales */
.section{ padding:60px 0; }
h2{ font-family:'Playfair Display', serif; color:var(--navy); margin-bottom:0.5rem; }
.lead{ color:var(--muted); }

/* Placeholder figures */
.placeholder-box{
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(27,37,64,0.06);
  color:var(--muted);
  font-style:italic;
  padding:18px;
}

/* Cards / servicios */
.service-box{
  background:#fff;
  border-radius:12px;
  padding:28px;
  border:1px solid rgba(27,37,64,0.06);
  transition:transform .28s ease, box-shadow .28s ease;
}
.service-box:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(27,37,64,0.06); }

/* Links y botones */
a{ color:var(--navy); }
.btn-primary{
  background:var(--navy);
  border-color:var(--navy);
  box-shadow:none;
}
.btn-primary:hover{ background:#151a2b; border-color:#151a2b; }

/* Footer */
.footer{ padding:36px 0; color:var(--muted); }

/* Small UI details */
small{ color:var(--muted); }

/* RESPONSIVE */
@media (max-width: 992px){
  .hero{ padding:60px 0; }
  .hero .display-4{ font-size:2rem; }
}
@media (max-width: 576px){
  .hero{ padding:40px 0; text-align:left; }
  .hero .display-4{ font-size:1.6rem; }
  .hero .lead{ font-size:0.98rem; }
}

/* Accesibilidad mínima */
img{ max-width:100%; height:auto; display:block; }

/* Pequeña animación de enfoque para inputs */
input:focus, textarea:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(27,37,64,0.06);
  border-color: var(--navy);
}


/* HERO más equilibrado y editorial */
.hero {
    /*padding: 140px 0;        /* vertical */
}

.hero .row {
    padding-left: 40px;
    padding-right: 40px;
}

@media (max-width: 768px) {
    .hero {
        padding: 100px 0;
    }
    .hero .row {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* HERO elegante */
.hero-style {
  height: 60vh;
  background: linear-gradient(130deg, #faf9f7, #f1eee8);
  padding: 40px;
}

.subtitle-premium {
  font-size: .9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8c8c8c;
  margin-bottom: 10px;
}

.title-premium {
  font-family: "Playfair Display", serif;
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.divider-premium {
  width: 60px;
  height: 1.5px;
  background: #b09d7f;
  margin-top: 20px;
}

/* Texto editorial */
.narrow-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0;
}

/* Iconos premium */
.premium-icon {
  font-size: 2rem;
  color: #b58c5a;
  margin-bottom: 15px;
}
.premium-h3 {
  font-family: "Playfair Display", serif;
  margin-bottom: 10px;
}

/* Moodwall */
.moodwall {
  height: 300px;
  background: linear-gradient(135deg, #e7e4dc, #dcd7cf);
  border-radius: 14px;
  margin: 50px 0;
}

/* Tiles premium */
.tile {
  height: 180px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ece9e3, #dfdbd4);
}

.tile img{
  border-radius:12px;
}

/* Premium headings */
.premium-h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: #2f2f2f;
}

/* HERO premium */
.hero-style {
  height: 60vh;
  background: linear-gradient(130deg, #faf9f7, #f1eee8); /* beige suave */
  padding: 40px;
}

.subtitle-premium {
  font-size: .9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6c757d; /* gris elegante */
  margin-bottom: 10px;
}

.title-premium {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 1px;
}

.divider-premium {
  width: 60px;
  height: 2px;
  background: #bfa56a; /* dorado suave */
  margin-top: 20px;
}

/* Bloques iconos */
.icon-box {
  font-size: 2rem;
  color: #2c3e50; /* azul marino */
  margin-bottom: 15px;
}

/* Tiles y moodboard */
.tile {
  height: 170px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ece9e3, #dfdbd4);
  border: 1px solid #bfa56a; /* borde dorado sutil */
}

.gold-accent {
  box-shadow: 0 4px 8px rgba(191,165,106,0.3);
}

/* Visual strip / divisor dorado */
.visual-strip {
  height: 50px;
  position: relative;
}

.gold-divider {
  width: 80px;
  height: 2px;
  background: #bfa56a; /* dorado */
  margin: auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

/* Tipografía premium */
.premium-h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: #1a1a1a;
}

/* Narrow sections */
.narrow-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0;
}

/* HERO */
.hero-services {
  height: 45vh;
  background: linear-gradient(130deg, #faf9f7, #f1eee8);
  padding: 40px;
}

/* Service cards */
.service-card {
  background: #ffffff;
  border-radius: 14px;
  transition: all .3s ease;
  border: 1px solid #eae7e1;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.service-icon {
  font-size: 2.4rem;
  color: #2c3e50; /* azul marino */
}

.gold-line {
  width: 40px;
  height: 2px;
  background: #bfa56a;
}

.price {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  color: #1a1a1a;
  margin: 12px 0;
}

/* Featured pack (el del medio) */
.featured-pack {
  border: 1px solid #bfa56a !important;
  box-shadow: 0 8px 20px rgba(191,165,106,0.25) !important;
}

/* Extras */
.extra-box {
  background: #faf9f7;
  border-radius: 14px;
  border: 1px solid #e5e1da;
  transition: .3s;
}

.extra-box:hover {
  border-color: #bfa56a;
}

/* HERO */
.hero-services {
  height: 45vh;
  background: linear-gradient(130deg, #faf9f7, #f1eee8);
  padding: 40px;
}

/* Service cards */
.service-card {
  background: #ffffff;
  border-radius: 14px;
  transition: all .3s ease;
  border: 1px solid #eae7e1;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.service-icon {
  font-size: 2.4rem;
  color: #2c3e50; /* azul marino */
}

.gold-line {
  width: 40px;
  height: 2px;
  background: #bfa56a;
}

.price {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  color: #1a1a1a;
  margin: 12px 0;
}

/* Featured pack (el del medio) */
.featured-pack {
  border: 1px solid #bfa56a !important;
  box-shadow: 0 8px 20px rgba(191,165,106,0.25) !important;
}

/* Extras */
.extra-box {
  background: #faf9f7;
  border-radius: 14px;
  border: 1px solid #e5e1da;
  transition: .3s;
}

.extra-box:hover {
  border-color: #bfa56a;
}

/* Cards de servicios: igual altura en todas las resoluciones */
.service-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #eae7e1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Contenido interno siempre alineado arriba */
.service-card .card-body {
  flex-grow: 1;
}

/* Iconos */
.service-icon {
  font-size: 2.4rem;
  color: #2c3e50;
}

/* Línea dorada */
.gold-line {
  width: 40px;
  height: 2px;
  background: #bfa56a;
  margin: 12px auto;
}

/* Precio */
.price {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  margin: 12px 0;
}

/* Botón siempre abajo */
.service-card .btn {
  margin-top: auto;
}

/* Pack destacado con borde dorado */
.featured-pack {
  border-color: #bfa56a !important;
  box-shadow: 0 8px 20px rgba(191,165,106,0.25);
}

.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #25d366; /* verde WhatsApp */
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  text-decoration: none;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: transform 0.3s, box-shadow 0.3s;
}

.whatsapp-float img {
  width: 30px;
  height: 30px;
}

.whatsapp-float:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.whatsapp-float span {
  display: inline-block;
  font-size: 16px;
}

.btn-cta {
    background: #bfa56a;       /* Dorado elegante */
    color: #fff;               /* Texto blanco */
    font-weight: 600;
    font-size: 1.25rem;        /* Más grande que un botón normal */
    padding: 12px 30px;
    margin-left:10px;
    border-radius: 50px;       /* Bordes redondeados tipo “pill” */
    box-shadow: 0 4px 12px rgba(191, 165, 106, 0.4); /* Sombra suave dorada */
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background: #c9b076;       /* Dorado más brillante al hover */
    transform: translateY(-2px); /* Levanta un poquito al pasar el ratón */
    box-shadow: 0 6px 16px rgba(191, 165, 106, 0.5);
}
