/* Teddy & Bloom Events — style.css */
/* Paleta pastel elegante + aire editorial */

:root{
  --bg:#FBF6F3; /* rosa melocotón claro */
  --surface:#FFFFFF;
  --text:#2F2A28;
  --text-2:#6E6764;
  --accent:#E1A892; /* coral */
  --accent-2:#E1A892;
  --radius:18px;
  --shadow:0 10px 24px rgba(47,42,40,.08);
  --shadow-soft:0 6px 18px rgba(47,42,40,.06);
  --max:1200px;
  --gap:28px;
}

/* Reset mínimo */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block;height:auto}

/* Tipografías */
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Albert Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-weight:400;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family:"Glass Antiqua", Georgia, serif; color:#131011; line-height:1.2; margin:0 0 12px}
h1{font-size: clamp(32px, 6vw, 56px); font-weight:700}
h2{font-size: clamp(26px, 4.5vw, 40px); font-weight:700}
h3{font-size: clamp(20px, 3.2vw, 24px); font-weight:600}
p{color:var(--text)}
a{color:inherit;text-decoration:none}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding:0 20px}

/* Utilidades */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.sep{border:0;border-top:2px dotted var(--accent-2); margin:42px 0}
.text-muted{color:var(--text-2)}
.mt-18{margin-top:18px}
.mt-16{margin-top:16px}
.gap-12{gap:12px}
.flex-wrap{flex-wrap:wrap}
.flex-center{display:flex;align-items:center}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;font-weight:600;border:1px solid transparent;transition:.25s ease;cursor:pointer}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-soft)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-outline{background:transparent; border-color:var(--text-2); color:var(--text)}
.btn-outline:hover{background:#fff; box-shadow:var(--shadow-soft)}

:where(a,button,.btn,[role="button"]):focus-visible{outline:3px solid var(--accent-2); outline-offset:2px; border-radius:12px}

/* NAVBAR */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(6px)}
.nav{background:rgba(251,246,243,.8); border-bottom:1px solid rgba(252,207,195,.6)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .site{font-family:"Glass Antiqua";font-weight:700;font-size:22px}
.nav-links{display:flex;gap:22px;align-items:center}
.navbar-logo img {
  height: 50px;
  width: auto;
}

@media (max-width: 768px) {
  .navbar-logo img {
    height: 40px;
  }
}

/* Burger */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--text);display:block}

/* Mobile menu */
.mobile{display:none;flex-direction:column;gap:14px;padding:14px 0}
.mobile a{padding:10px 0;border-bottom:1px dotted var(--accent-2)}

/* Hero */
.hero{padding:56px 0}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero img{border-radius:var(--radius); box-shadow:var(--shadow)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px dashed var(--accent-2);color:var(--text-2);background:#fff}
.hero-panel h1 {
  font-size: 3rem;   /* 48px en desktop */
  line-height: 1.3;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .hero-panel h1 {
    font-size: 2rem; /* 32px en móvil */
  }
}

/* Servicios destacados */
.cards{display:grid;grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--surface); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow-soft); transition:.25s ease; height:100%}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card h3{margin-top:10px}
.card p{color:var(--text-2)}
.card .icon{width:40px;height:40px}

/* Alterno */
.alt{padding:56px 0}
.alt .grid-2{grid-template-columns:1fr 1fr}
.alt .media{position:relative}
.alt .media img{border-radius:var(--radius); box-shadow:var(--shadow)}
.alt .media a::after{content:"\1F50D"; position:absolute; right:12px; bottom:12px; font-size:18px}

/* Galería */
.gallery{padding:56px 0}
.grid-gallery{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
.grid-gallery a{overflow:hidden; border-radius:12px; display:block; background:#fff; box-shadow:var(--shadow-soft)}
.grid-gallery img{transition:transform .35s ease; width:100%; height:100%; object-fit:cover}
.grid-gallery a:hover img{transform:scale(1.04)}

/* Partners */
.partners{padding:20px 0 40px}
.partners .swiper-slide{display:flex; align-items:center; justify-content:center}
.partners img{max-height:42px; opacity:.8; filter:grayscale(1); transition:.2s}
.partners img:hover{opacity:1; filter:none}

/* Testimonios */
.testi{padding:20px 0 56px}
.testimonial{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:22px; height:auto}
.testimonial .who{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.testimonial .who img{width:48px;height:48px;border-radius:50%; object-fit:cover}
.testimonial p{color:var(--text-2); margin:0}

/* Contadores */
.counters{padding:20px 0 56px}
.counter-wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.counter{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:28px; text-align:center}
.counter .num{font-size:40px; font-family:"Glass Antiqua"; color:#131011}
.counter .label{color:var(--text-2)}

/* FAQ */
.faq{padding:20px 0 56px}
.accordion{display:grid; gap:14px}
.item{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden}
.q{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:16px 18px; font-weight:600}
.a{max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 18px}
.item.open .a{max-height:260px; padding:0 18px 16px}
.q svg{min-width:22px}

/* CTA final */
.cta{background: linear-gradient(135deg, rgba(245,139,124,.16), rgba(251,246,243,1)); padding:46px 0 64px}
.cta .wrap{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px}

/* Footer */
footer{padding:36px 0 80px; background:#FBF6F3; border-top:0px solid var(--accent-2)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.foot h4{margin:0 0 10px; font-family:"Glass Antiqua"}
.foot a{color:var(--text-2)}
.foot .sep{margin:18px 0}

.legal-burger{display:none; flex-direction:column; gap:5px}
.legal-burger span{width:18px;height:2px;background:var(--text-2);display:block}

/* Newsletter */
.newsletter{display:flex; gap:10px; flex-wrap:wrap}
.newsletter input[type=email]{padding:12px 14px; border:1px solid var(--accent-2); border-radius:12px; min-width:260px}

/* WhatsApp flotante */
.wa{position:fixed; right:18px; bottom:18px; z-index:60}
.wa a{display:flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:12px 16px; border-radius:999px; font-weight:700; box-shadow:var(--shadow)}

/* Animaciones */
[data-aos]{opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease}
[data-aos].aos-animate{opacity:1; transform:none}

/* Responsive */
@media (max-width: 768px){
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid-gallery{grid-template-columns:1fr}
  .counter-wrap{grid-template-columns:1fr}
  .nav-links{display:none}
  .burger{display:flex}
  .mobile{display:flex}
  .foot-grid{grid-template-columns:1fr}
  .hero .grid-2{display:flex; flex-direction:column}
  .hero .media{order:2}
  .legal-burger{display:flex}
}
@media (min-width: 769px) and (max-width: 1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid-gallery{grid-template-columns:repeat(2,1fr)}
  .counter-wrap{grid-template-columns:repeat(3,1fr)}
}
.hero-panel {
  background-color: #EFD7D1;
  padding: 28px;
  border-radius: 18px;
}
.btn-primary {
  background-color: #F0A28F;
}
.hero .grid-2 {
  grid-template-columns: 1fr 1fr;
}
.hero .media img {
  object-fit: cover;
  object-position: center right;
  min-height: 420px;
  max-height: 560px;
}
@media (max-width:768px) {
  .hero .grid-2 {
    grid-template-columns: 1fr;
  }
  .hero .media {
    order: 2;
  }
}

/* ===== NAVBAR como mockup ===== */
.nav {
  background: #FBF6F6 !important;
  border-bottom: none !important;   /* sin línea rosa */
  box-shadow: none;                 /* sin sombra */
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;                   /* navbar bajito */
}

.nav-links a {
  padding: 10px 12px;
  color: var(--text);
  font-weight: 500;
}

/* Burger en columna */
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burger span { width:22px; height:2px; background: var(--text); display:block; }

/* ===== HERO 50/50 como mockup ===== */
.hero { padding: 48px 0 32px; }
.hero .grid-2 { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }

.hero-panel {
  background: #EFD7D1;              /* pastel rosa panel */
  padding: 36px 32px;
  border-radius: 28px;               /* esquinas redondeadas marcadas */
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.hero-panel h1 {
  font-size: 3rem;                   /* más pequeño que antes */
  line-height: 1.25;
  margin: 0 0 14px;
}
.hero-panel p { margin: 0 0 18px; color: var(--text-2); }
.hero-panel .buttons { display:flex; gap:12px; flex-wrap:wrap; }

/* Medallón opcional arriba-izquierda (puedes borrar si no lo usas) */
.hero-medallon {
  position:absolute; left:24px; top:18px;
  width:68px; height:68px; object-fit:contain; opacity:.9;
}

/* Imagen derecha ocupando su mitad con recorte elegante */
.hero .media picture, .hero .media img { width:100%; height:100%; display:block; }
.hero .media img {
  object-fit: cover;
  object-position: center right;     /* prioriza globos a la derecha */
  min-height: 480px;                 /* altura visual similar al mockup */
  border-radius: 8px;
}

@media (max-width: 768px){
  .hero .grid-2 { grid-template-columns: 1fr; }
  .hero .media { order: 2; }
  .hero .media img { min-height: 280px; border-radius: 12px; }
  .hero-panel h1 { font-size: 2rem; }
}
/* Botón pill como el mockup */
.btn-pill {
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(245,139,124,.25);
}

.btn-primary {
  background: #F3A18E;     /* tono melocotón/coral suave */
  color: #fff;
  border: 1px solid transparent;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(245,139,124,.32);
}

.btn-outline {
  border: 1px solid #6E6764;
  color: #2F2A28;
  background: transparent;
}
.btn-outline:hover {
  background: #FEFEFE;
}
/* Botón "Pedir propuesta" outline */
.btn-nav {
  border: 2px solid #2F2A28;   /* color de las letras del navbar */
  color: #2F2A28;
  background: transparent;
  padding: 10px 18px;
  border-radius: 999px;        /* pill */
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-nav:hover {
  background: #2F2A28;
  color: #fff;
}
/* NAVBAR optimizado */
.nav {
  background: #FBF6F6;
  border-bottom: none;
  box-shadow: none;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 3rem;  /* menos alto, más aire lateral */
  max-width: 1400px; /* centra el contenido */
  margin: 0 auto;
}

/* Tipografía global */
h1, h2, h3 {
  font-family: 'Glass Antiqua', serif;
  color: #131011;
  font-weight: 600;
}

h1 {
  font-size: 2.25rem;   /* más pequeño y elegante (≈36px) */
  line-height: 1.25;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.75rem;   /* secciones */
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.25rem;   /* cards, FAQs */
  margin-bottom: 0.5rem;
}

p, li {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1rem;      /* texto base 16px */
  line-height: 1.6;
  color: #73605D;
}

/* Ajustes móviles */
@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }  /* 28px en móvil */
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.125rem; }
}
/* Tipos elegantes como el mockup */
h1, h2, h3 {
  font-family: 'Glass Antiqua', serif;
  font-weight: 400;           /* Glass Antiqua sólo tiene 400 */
  color: #131011;
}

/* H1 del hero (look editorial) */
.hero-panel h1 {
  font-size: 2.25rem;         /* ≈36px; bájalo/ súbelo a tu gusto */
  line-height: 1.2;           /* compacto elegante */
  letter-spacing: 0.2px;      /* micro tracking para refinado */
  margin: 0 0 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Opcional: H2/H3 armonizados */
h2 { font-size: 1.75rem; line-height: 1.25; }
h3 { font-size: 1.25rem; line-height: 1.3; }

.hero-panel h1{
  font-family: 'Glass Antiqua', 'Gloock', 'Cormorant Garamond', serif !important;
  font-weight: 400;                 /* Glass Antiqua solo tiene 400 */
  font-size: 2.25rem;               /* ~36px */
  line-height: 1.2;
  letter-spacing: 0.2px;
  margin: 0 0 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Variantes rápidas (cambia la clase en el H1) */
.hero-panel h1.h1--antiqua{
  font-family: 'Glass Antiqua', serif !important;
  font-weight: 400;
}

.hero-panel h1.h1--gloock{
  font-family: 'Gloock', serif !important;
  font-weight: 400;
  letter-spacing: 0.1px;
}

.hero-panel h1.h1--cormorant{
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 700;                 /* aquí sí hay 700 */
  letter-spacing: 0.1px;
}

/* Ajuste móvil */
@media (max-width:768px){
  .hero-panel h1{ font-size: 1.75rem; }
}
.hero {
  width: 100%;
  max-width: 100%;   /* elimina límites */
  margin: 0;
  padding: 0;
}

.hero-inner {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.navbar {
  width: 100%;
  max-width: 1441px;
  height: 147px;      /* alto fijo */
  margin: 0 auto;     /* centrado horizontal */
  background-color: #FBF6F6; /* tu color */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.hero-inner {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Panel izquierdo y derecho ocupan 50% cada uno */
.hero-panel {
  flex: 1 1 50%;
  margin: 0;
  padding: 0;
}

.hero-panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;   /* la imagen rellena el panel */
}
/* ========== FINAL OVERRIDES — NAVBAR + HERO LIMPIO ========== */

/* NAVBAR 30% más estrecha */
.nav {
  background: #FBF6F6 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 0 !important;            /* antes 6–14px → -30% altura */
}

.nav-links { display:flex; gap:22px; align-items:center; }
.nav-links a { padding: 8px 10px !important; font-weight: 500; }

.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burger span { width:22px; height:2px; background: var(--text); display:block; }


/* Botón del navbar (outline transparente) */
.btn-nav {
  border: 2px solid #2F2A28;
  color: #2F2A28;
  background: transparent;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: all .3s ease;
}
.btn-nav:hover { background:#2F2A28; color:#fff; }

/* HERO full-bleed dentro del container (sin márgenes laterales) */
.hero { padding: 0 !important; }
.hero .container { 
  max-width: 100% !important; 
  padding-left: 0 !important; 
  padding-right: 0 !important; 
  margin: 0 !important;
}
.hero .grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
}

/* Panel pastel elegante */
.hero-panel {
  background: #EFD7D1 !important;
  border-radius: 28px !important;
  padding: clamp(24px, 3vw, 36px) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* H1 elegante (evita duplicados de arriba) */
.hero-panel h1{
  font-family: 'Glass Antiqua', serif !important;
  font-weight: 400 !important;      /* Glass Antiqua solo 400 */
  font-size: 2.25rem !important;    /* ≈36px */
  line-height: 1.2 !important;
  letter-spacing: 0.2px !important;
  margin: 0 0 14px !important;
}

/* Imagen derecha ocupando su mitad sin márgenes */
.hero .media { min-height: min(72vh, 720px) !important; }
.hero .media picture, .hero .media img { width:100% !important; height:100% !important; display:block !important; }
.hero .media img { object-fit:cover !important; object-position:center right !important; border-radius: 8px !important; }

@media (max-width: 768px){
  .hero .grid-2 { grid-template-columns: 1fr !important; }
  .hero .media { order: 2 !important; min-height: 280px !important; }
  .hero-panel h1 { font-size: 1.75rem !important; }
}


/* HERO: centrar la columna izquierda y limitar la caja de texto */
.hero .grid-2{ grid-template-columns: 1fr 1fr !important; }
.hero-panel{
  display: grid;               /* centrar vertical y horizontal */
  place-items: center;
  padding: clamp(28px,3.5vw,48px) !important;
  text-align: center;
}
.hero-content{
  max-width: 640px;            /* ancho cómodo de lectura */
  margin: 0 auto;
}

/* H1 ELEGANTE a ~60px en desktop */
.hero-panel h1{
  font-family: 'Glass Antiqua', serif !important;
  font-weight: 400 !important;
  font-size: 3.75rem !important;   /* ≈60px */
  line-height: 1.15 !important;
  letter-spacing: .2px;
  margin: 0 0 16px !important;
}

/* Párrafo centrado y algo más ancho */
.hero-panel p{
  margin: 0 auto 18px;
  color: var(--text-2);
  max-width: 60ch;              /* control de línea */
}

/* Botones centrados */
.hero-panel .buttons{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}

/* Imagen derecha: que rellene y mantenga recorte */
.hero .media{ min-height: min(72vh,720px); }
.hero .media img{ width:100%; height:100%; object-fit:cover; object-position:center right; }

@media (max-width:768px){ .hero-panel h1{ font-size: 2.25rem !important; } }
/* Garantiza que la imagen del hero se vea */
.hero .media { min-height: min(72vh, 720px); }
.hero .media picture,
.hero .media img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero .media img {
  object-fit: cover;
  object-position: center right;
}
/* Medallón decorativo sobre el H1 */
.hero-panel{
  position: relative;
  display: grid;
  place-items: center;                     /* centrado vertical y horizontal */
  text-align: center;
  padding: clamp(28px,3.5vw,48px);
}
.hero-content{ max-width: 640px; margin: 0 auto; }

.hero-medallon{
  position: absolute;
  left: 28px; 
  top: 22px;
  width: 86px; 
  height: 86px;
  object-fit: contain;
  z-index: 2;                              /* por encima del H1 */
  opacity: .95;
  pointer-events: none;
}

/* H1 elegante y grande (~60px desktop) */
.hero-panel h1{
  font-family: 'Glass Antiqua', serif !important;
  font-weight: 400 !important;
  font-size: 3.75rem !important;           /* ≈ 60px */
  line-height: 1.15 !important;
  letter-spacing: .2px;
  margin: 0 0 16px !important;
  position: relative;
  z-index: 1;                              /* por debajo del medallón */
}

/* Párrafo centrado */
.hero-panel p{
  max-width: 60ch;
  margin: 0 auto 18px;
  color: var(--text-2);
}

/* Botón coral, pill delicado (único) */
.btn.btn-primary.btn-pill{
  background: #F3A18E;      /* coral suave */
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(243,161,142,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.btn-primary.btn-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(243,161,142,.32);
}

/* Responsive */
@media (max-width:768px){
  .hero-medallon{ left: 18px; top: 16px; width: 64px; height: 64px; }
  .hero-panel h1{ font-size: 2.25rem !important; }  /* ≈36px en móvil */
}
/* ——— HERO: forzar UNA sola caja rosa en la columna izquierda ——— */
.hero,
.hero .container,
.hero .grid-2,
.hero-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Solo el panel izquierdo es rosa */
.hero-panel {
  background: #EFD7D1 !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Quita cualquier hueco que haga “ver” otra caja detrás */
.hero { padding: 0 !important; }
.hero .grid-2 { gap: 0 !important; }

/* Si por error tienes un hero-panel ANIDADO, ocúltalo (evita “doble caja”) */
.hero-panel .hero-panel { display: none !important; }
/* Desktop (≥ 769px) */
.hero-medallon{
  position: absolute;
  left: 28px;       /* muévelo fino aquí según tu foto */
  top: 22px;
  width: 96px;      /* tamaño recomendado desktop */
  height: 96px;
  object-fit: contain;
  z-index: 2;       /* por encima del h1 */
  pointer-events: none;
  opacity: .95;
}

/* Móvil (≤ 768px) */
@media (max-width:768px){
  .hero-medallon{
    left: 18px;
    top: 16px;
    width: 64px;    /* tamaño recomendado móvil */
    height: 64px;
  }
}

/* Asegura que el H1 quede por DEBAJO del medallón */
.hero-panel h1{ position: relative; z-index: 1; }
/* === FIX: Solo UNA caja rosa en la columna izquierda del HERO === */

/* 1) Nada de fondo/sombra fuera del panel rosa */
.hero,
.hero .container,
.hero .grid-2,
.hero-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* 2) Solo el panel izquierdo es rosa (una caja) */
.hero-panel {
  background: #EFD7D1 !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow-soft) !important;
  position: relative !important;
}

/* 3) Si por error hubiera un .hero-panel metido dentro de otro, ocúltalo */
.hero-panel .hero-panel { display: none !important; }

/* 4) Neutraliza la regla genérica que crea la “segunda caja” en imágenes del hero */
.hero img {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 5) Sombra/borde solo, si quieres, en la FOTO derecha (no en el medallón) */
.hero .media img {
  border-radius: 8px !important;
  box-shadow: none !important; /* pon var(--shadow-soft) si quieres una sombra sutil en la foto */
  object-fit: cover !important;
  object-position: center right !important;
}

/* 6) Sin huecos entre columnas que dejen ver otra “capa” */
.hero { padding: 0 !important; }
.hero .grid-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; }

/* 7) Asegura que solo haya UN botón coral */
/*.hero-panel .buttons a:not(.btn-primary) { display: none !important; }    */

/* ===== HERO — Medallones únicos y controlados ===== */

/* La foto de la derecha puede ir a 100%,
   pero los medallones del panel NO deben estirarse */
.hero .media picture,
.hero .media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center right !important;
  border-radius: 8px;
  box-shadow: none;
}

/* Reset + tamaño controlado para medallones del panel izquierdo */
.hero .hero-panel { position: relative !important; }

.hero .hero-panel img.hero-medallon,
.hero .hero-panel img.hero-medallon-bajo {
  position: absolute !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: .95 !important;
}

/* Medallón superior: sobre la “D” */
.hero .hero-panel img.hero-medallon {
  top: 22px !important;
  left: 120px !important;      /* mueve a la derecha/izquierda ajustando este valor */
  width: 210px !important;     /* tamaño grande en desktop */
}

/* Medallón inferior: pegado al borde inferior y centrado */
.hero .hero-panel img.hero-medallon-bajo {
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 160px !important;     /* tamaño grande en desktop */
}

/* Móvil: más pequeños para que no tapen */
@media (max-width:768px){
  .hero .hero-panel img.hero-medallon     { width: 120px !important; left: 90px !important; top: 16px !important; }
  .hero .hero-panel img.hero-medallon-bajo{ width: 110px !important; bottom: 8px !important; }
}
/* === HERO: mostrar la foto COMPLETA en la columna derecha === */

/* 1) La grid mantiene 50/50 en ancho pero no estira alturas */
.hero .grid-2{
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;        /* cada columna con su altura */
  gap: 0 !important;
}

/* 2) El contenedor derecho no fuerza altura */
.hero .media{
  display: block !important;
  padding: 0 !important;
  min-height: unset !important;
  height: auto !important;
  background: transparent !important;
}

/* 3) La imagen NO se recorta ni se estira */
.hero .media picture,
.hero .media img{
  width: 100% !important;               /* ocupa el ancho de su mitad */
  height: auto !important;              /* calcula la altura natural */
  max-height: none !important;          /* quita topes anteriores */
  min-height: 0 !important;             /* quita mínimos anteriores */
  object-fit: contain !important;       /* CLAVE: se ve ENTERA */
  object-position: center top !important;
  border-radius: 12px;                  /* opcional */
  box-shadow: none !important;
}

/* 4) Anula reglas antiguas que te estaban recortando */
.hero .media img{
  /* estas líneas sobreescriben: object-fit: cover; min/max-height: 420/560px; */
  object-fit: contain !important;
  min-height: 0 !important;
  max-height: none !important;
}
/* === HERO: igualar alturas y centrar contenido del panel rosa === */

/* 1) Las dos columnas vuelven a estirarse a la misma altura */
.hero .grid-2{
  align-items: stretch !important;   /* antes: start */
}

/* 2) El panel rosa ocupa toda su columna y centra su contenido */
.hero-panel{
  height: 100% !important;           /* llena la altura de la fila */
  display: flex !important;
  flex-direction: column;
  justify-content: center;           /* centrado vertical */
  padding: clamp(28px,3.5vw,48px) !important;
}

/* 3) Mantén un ancho cómodo para el texto */
.hero-content{
  max-width: 640px;
  margin: 0 auto;
}

/* 4) Conserva la foto de la derecha “entera” (sin recortes) */
.hero .media{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important; 
  padding: 0 !important;
}
.hero .media img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  border-radius: 12px;
}
/* ===== Espaciado Servicios Destacados ===== */
.services {
  padding-top: 80px !important;   /* baja todo el bloque */
}

.services h2 {
  margin-top: 40px !important;    /* separa el título del hero */
  margin-bottom: 32px;            /* y del grid de cards */
  text-align: center;             /* opcional: centrado */
}
/* 1) Deja aire debajo del HERO */
.hero {
  margin-bottom: clamp(40px, 6vw, 80px) !important;
}

/* 2) Si la sección de servicios existe con alguna de estas clases/ids, baja todo el bloque */
.services,
section.services,
section#servicios,
.servicios {
  padding-top: clamp(24px, 3vw, 48px) !important;
}

/* 3) Espacio del título de Servicios respecto al grid */
.services h2,
section.services h2,
#servicios h2,
.servicios h2 {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  text-align: center; /* quítalo si lo prefieres a la izquierda */
}

/* 4) Por si tu HTML no usa esas clases: separa SIEMPRE la sección que va justo después del hero */
.hero + * {
  margin-top: clamp(40px, 6vw, 100px) !important;
}

/* 5) Asegura un poco de aire antes del grid de cards */
.cards {
  margin-top: 16px !important;
}
/* ===== Ajuste título Servicios Destacados ===== */
.services h2,
section.services h2,
#servicios h2,
.servicios h2 {
  font-size: 3rem !important;   /* ≈40px */
  line-height: 1.2;
  margin-bottom: 36px;
}
/* Sección Celebrar */
.celebrar .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.celebrar-texto h2{
  font-size: 2rem;
  margin-bottom: 1rem;
}

.celebrar-foto img{
  width: 100%;
  height: auto;
  border-radius: 16px;     /* esquinas redondeadas */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Responsive */
@media (max-width: 768px){
  .celebrar .grid-2{
    grid-template-columns: 1fr; /* se apila en móvil */
    text-align: center;
  }
  .celebrar-foto{
    order: -1; /* la foto arriba en móvil */
  }
}
/* Servicios más cerca del hero y más separados de lo de abajo */
#servicios {
  margin-top: 1.5rem !important;   /* menos espacio arriba → más cerca del hero */
  margin-bottom: 4rem !important;  /* más espacio abajo → más aire con la siguiente sección */
  padding-top: 1rem !important;    /* opcional: espacio interno arriba */
  padding-bottom: 2rem !important; /* opcional: espacio interno abajo */
}
/* ===== Servicios Destacados — forzar tamaño (desktop + móvil) ===== */

/* Desktop / base */
#servicios h2,
section#servicios h2,
.services h2,
section.services h2,
.servicios h2 {
  font-size: 2.5rem !important;  /* ≈ 40px */
  line-height: 1.2;
  margin-bottom: 36px; /* margen inferior */
}

/* Móvil: si quieres un poco más pequeño en pantallas chicas */
@media (max-width: 768px){
  #servicios h2,
  section#servicios h2,
  .services h2,
  section.services h2,
  .servicios h2 {
    font-size: 2rem !important;   /* ≈ 32px (ajusta a tu gusto) */
  }
}

/* (Opcional) Aún más específico si tu HTML tiene .section-title */
#servicios h2.section-title,
section#servicios h2.section-title {
  font-size: 2.5rem !important;
}
@media (max-width: 768px){
  #servicios h2.section-title,
  section#servicios h2.section-title {
    font-size: 2rem !important;
  }
}
/* Ajuste del título "Servicios destacados" */
#svc-title {
  font-size: 2.5rem !important;  /* ≈ 40px */
  line-height: 1.2;
  margin-bottom: 36px;
  text-align: center;            /* opcional */
}
@media (max-width: 768px){
  #svc-title {
    font-size: 2rem !important;   /* ≈ 32px */
  }
}
/* Mostrar solo 3 trabajos en la galería */
#trabajos .grid-gallery > *:nth-child(n+4) {
  display: none !important;
}
@media (min-width: 1024px){
  #trabajos .grid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 768px){
  #trabajos .grid-gallery {
    display: grid;
    grid-template-columns: 1fr !important; /* o 2 si prefieres */
    gap: 16px !important;
  }
}
/* Mostrar solo 3 trabajos en la galería de "Nuestros trabajos" */
#galeria .grid-gallery > a:nth-child(n+4) {
  display: none !important;
  }
  @media (min-width: 1024px){
  #galeria .grid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px){
  #galeria .grid-gallery {
    display: grid;
    grid-template-columns: 1fr; /* o 2 columnas si prefieres */
    gap: 16px;
  }
}
/* Portada: muestra solo 3 miniaturas pero deja TODAS en el carrusel */
#galeria .grid-gallery > a { display: none; }                  /* oculta todas visualmente */
#galeria .grid-gallery > a:nth-child(-n+3) { display: block; } /* muestra solo las 3 primeras */
/* Portada: ver solo 3 miniaturas */
#galeria .grid-gallery > a { display: none; }
#galeria .grid-gallery > a:nth-child(-n+3) { display: block; }

/* (opcional) rejilla bonita */
@media (min-width: 1024px){
  #galeria .grid-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
}
@media (max-width: 768px){
  #galeria .grid-gallery{ display:grid; grid-template-columns:1fr; gap:16px; }
}
/* Ocultar sección de Partners en toda la web */
#partners,
.partners,
section.partners {
  display: none !important;
}
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}
.testimonial img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
}
.testimonial .quote {
  font-style: italic;
  margin-bottom: 0.5rem;
}
.testimonial .author {
  font-weight: bold;
}
/* ==== Estilo Preguntas Frecuentes ==== */
.faq .faq-item {
  background-color: #EFD7D1;   /* mismo color del contenedor hero */
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.faq .faq-item:hover {
  background-color: #f4d8e8;   /* un tono un poco más intenso al pasar el ratón */
  transform: translateY(-2px);
}

.faq .faq-question {
  font-weight: 600;
  color: #333;
  font-size: 1.1rem;
  cursor: pointer;
}

.faq .faq-answer {
  margin-top: 12px;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}
/* ==== FAQ pastel como el hero (EFD7D1) ==== */
#faq .faq-item,
#faq .accordion-item,
#faq .card,
#faq details,
section.faq .faq-item,
section.faq .accordion-item,
section.faq .card,
section.faq details {
  background: #EFD7D1 !important;     /* color del contenedor izquierdo del hero */
  border: 0 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* Cabeceras / botones del acordeón */
#faq summary,
#faq .accordion-header,
#faq .accordion-button,
#faq .faq-question,
section.faq summary,
section.faq .accordion-header,
section.faq .accordion-button,
section.faq .faq-question {
  background: transparent !important;
  color: #3B2C2A !important;          /* texto legible sobre pastel */
  font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
}

.faq .item {
  background-color: #ffffff;  /* Color de fondo */
  border-radius: 12px;        /* Bordes redondeados para que se vean más suaves */
  padding: 15px 20px;         /* Espaciado interno */
  margin-bottom: 15px;        /* Espacio entre cápsulas */
  transition: all 0.3s ease;  /* Animación suave */
}

/* Efecto al pasar el ratón */
.faq .item:hover {
  background-color: #e9c3bb;  /* Un tono un poco más oscuro al hacer hover */
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Opcional: que el botón de la pregunta se integre bonito */
.faq .item .q {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}
/* Carrusel: 1 fila, tarjetas altas y con aire */
.servicios-swiper { padding: 8px 0 44px; } /* deja hueco para bullets */
.servicios-swiper .swiper-slide { height: auto; }
.servicios-swiper .card { height: 100%; display: flex; flex-direction: column; }
.servicios-swiper .card .btn { margin-top: auto; margin-bottom: 16px; }

/* Bullets en color marca y debajo, sin superponer */
.servicios-swiper .swiper-pagination { position: static; margin-top: 8px; }
.servicios-swiper .swiper-pagination-bullet { background: #F3A18E; opacity: .35; }
.servicios-swiper .swiper-pagination-bullet-active { background: #F3A18E; opacity: 1; }

/* Flechas en color marca; centradas verticalmente */
.servicios-swiper .swiper-button-prev,
.servicios-swiper .swiper-button-next {
  color: #F3A18E;
  width: 44px; height: 44px;
  top: 50%; transform: translateY(-50%);
}

.servicios-swiper .swiper-button-prev::after,
.servicios-swiper .swiper-button-next::after { font-size: 20px; }

/* En móvil oculta flechas (solo bullets) */
@media (max-width: 1023px) {
  .servicios-swiper .swiper-button-prev,
  .servicios-swiper .swiper-button-next { display: none; }
}
/* NAV móvil estable */
@media (max-width: 768px){
  /* Cabecera por encima del contenido/carruseles */
  header.nav{
    position: sticky; top: 0; z-index: 3000;
    background: var(--surface, #FBF6F6);
  }

  /* Oculta los enlaces de escritorio en móvil */
  .nav-links{ display: none !important; }

  /* Panel móvil (inicialmente oculto) */
  header.nav .mobile{
    position: absolute; top: 100%; left: 0; right: 0;
    display: none;
    background: #FFFFFF;                 /* fondo claro sólido */
    padding: 16px;
    gap: 8px;
    border-top: 1px solid #f3d3c7;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }

  /* Al abrir (clase que pone el script) */
  header.nav.is-open .mobile{
    display: flex !important;
    flex-direction: column;
  }

  /* Enlaces legibles y con hit area cómodo */
  header.nav .mobile a{
    display: block;
    padding: 12px 14px;
    color: var(--text, #2a2a2a);         /* forzamos color de texto legible */
    text-decoration: none;
    border-radius: 10px;
  }
  header.nav .mobile a:hover{
    background: #FBF6F6;
  }

  /* Botón hamburguesa por encima del panel */
  .burger{ position: relative; z-index: 3100; }
}

/* Bloquear scroll del documento al abrir */
html.menu-open,
body.menu-open{
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
/* Swiper bullets (puntos) personalizados en "Lo que dicen de nosotros" */
#testi-swiper .swiper-pagination-bullet {
  background: #F3A18E !important;   /* tu color de marca */
  opacity: 0.35 !important;          /* bullets inactivos */
}
#testi-swiper .swiper-pagination-bullet-active {
  background: #F3A18E !important;   /* bullet activo */
  opacity: 1 !important;
}
#testi-swiper .swiper-pagination-bullet {
  width: 10px; height: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
#testi-swiper .swiper-pagination-bullet-active {
  width: 10px; height: 10px;   /* crece el activo */
}
/* Ajustar bullets de testimonios */
#testi-swiper .swiper-pagination {
  position: static !important;   /* saca la paginación de la capa absoluta */
  margin-top: 16px !important;   /* deja un hueco debajo del slider */
  text-align: center;
}
  /* Títulos generales de secciones */
section h2 {
  font-size: 2.2rem;      /* más grande en escritorio */
  font-weight: 700;       /* un poco más fuerte */
  margin-bottom: 1.2em;   /* aire debajo */
  text-align: left;       /* por defecto alineados a la izquierda */
  line-height: 1.2;
}

/* Ajuste solo en móvil */
@media (max-width: 768px){
  section h2 {
    font-size: 1.8rem;   /* un poco más compacto en móvil */
    text-align: center;  /* centrado */
  }
}
section h2 {
  color: var(--text, #2a2a2a);
  letter-spacing: -0.5px;
}
#testi-swiper {
  background-color: #EFD7D1;
  padding: 40px 20px;   /* aire arriba/abajo y lados */
  border-radius: 18px;
}
/* Fondo pastel en cada opinión (testimonios) */
#testi-swiper .swiper-slide {
  background-color: #FFFFFF;
  border-radius: 16px;           /* bordes suaves */
  padding: 24px;                 /* aire interior */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* ligera sombra */
}

/* Texto dentro de la opinión */
#testi-swiper .swiper-slide p {
  margin: 0;
  color: #2a2a2a;                /* legible sobre el pastel */
}
#testi-swiper { position: relative; z-index: 1; }
/* Asegura el layout de Swiper */
#testi-swiper .swiper-wrapper { display: flex !important; }
#testi-swiper .swiper-slide   { flex-shrink: 0 !important; }

.counters .counter-wrap{
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.counters .counter{
  flex: 1 1 220px;         /* ancho mínimo más amplio */
  background: #fff;        /* fondo limpio */
  border-radius: 16px;     /* esquinas suaves */
  padding: 32px 24px;      /* espacio interno generoso */
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* sombra suave */
}

.counters .num{
  font-size: 2rem;   /* no demasiado grande */
  font-weight: 600;  /* semi-bold, no tan exagerado */
  color: var(--text);
  margin-bottom: 6px;
}

.counters .label{
  font-size: 1rem;
  color: var(--text-2);
}
/* Preguntas frecuentes: estilo más suave */
.accordion .item .q{
  font-weight: 400;          /* normal, sin negrita */
  font-size: 1rem;           /* tamaño legible */
  color: #333;               /* texto oscuro pero no fuerte */
  text-align: left;
}

/* Si quieres aún más fino, puedes usar un color gris */
.accordion .item .q{
  color: #444;   /* o prueba con var(--text-2) si ya lo usas */
}
.cards#servicios .btn.btn-outline {
  background-color: #EFD7D1;   /* relleno pastel */
  border: 1px solid #EFD7D1;
  color: #333;
  font-weight: 500;
}

.cards#servicios .btn.btn-outline:hover {
  background-color: #eac0b6;
  border-color: #eac0b6;
}
/* Servicios destacados: rellenar "Saber más" en pastel */
.cards#servicios .btn.btn-outline,
.servicios-swiper .swiper-slide .btn.btn-outline {
  background-color: #EFD7D1 !important;
  border-color: #EFD7D1 !important;
  color: #2a2a2a !important;
}

/* Hover/focus: un pelín más oscuro */
.cards#servicios .btn.btn-outline:hover,
.cards#servicios .btn.btn-outline:focus,
.servicios-swiper .swiper-slide .btn.btn-outline:hover,
.servicios-swiper .swiper-slide .btn.btn-outline:focus {
  background-color: #eac0b6 !important;
  border-color: #eac0b6 !important;
  color: #222 !important;
}
/* Botones "Saber más" con degradado pastel */
.cards#servicios .btn.btn-outline,
.servicios-swiper .swiper-slide .btn.btn-outline {
  background: linear-gradient(135deg, #F0DCD1 0%, #f7ece9 100%) !important;
  border: 1px solid #EFD7D1 !important;
  color: #2a2a2a !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Hover con gradiente un poco más intenso */
.cards#servicios .btn.btn-outline:hover,
.servicios-swiper .swiper-slide .btn.btn-outline:hover {
  background: linear-gradient(135deg, #F0DCD1 0%, #f2d7d2 100%) !important;
  border-color: #eac0b6 !important;
  color: #222 !important;
}
#testi-swiper {
  background: linear-gradient(135deg, #F0DCD1 0%, #FBEFEC 100%);
  padding: 40px 20px;
  border-radius: 20px;
}

/* Las tarjetas (slides) siguen en blanco */
#testi-swiper .testimonial {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.hero-panel p,
.hero-content p {
  text-align: justify !important;
  text-justify: inter-word; /* mejora la distribución de espacios */
}
/* Asegurar que el logo se vea (desktop por si acaso) */
header.nav .brand img{
  display:block;
  height:auto;
  max-width:100%;
  visibility:visible;
}

/* Si por cualquier motivo aparece “alt” como texto, ocúltalo temporalmente */
/*header.nav .brand{ font-size:0; line-height:0; } /* solo es un “parche” si el PNG falla */
/* Asegurar que el logo se vea (desktop por si acaso) */
header.nav .brand img{
  display:block;
  height:auto;
  max-width:100%;
  visibility:visible;
}
/* === FIXES FINALES (desktop/base) === */

/* Quita cualquier texto de marca junto al logo si existe */
.brand .site{ display:none !important; }

/* Evita que reglas antiguas encojan el logo en desktop */
header.nav .brand img{
  max-height: none !important;
  height: auto;
  width: auto;
  display:block;
  visibility:visible;
}
.brand img{
  height: 120px !important;   /* ← aquí cambias el tamaño */
  width: auto !important;
}
/* Fondo de la sección "¿Listo para la celebración?" */
.cta {
  background-color: #F0D1D1 !important;  /* tu color pastel */
  border-radius: 18px;                   /* opcional, bordes suaves */
  padding: 48px 24px;                    /* aire interno */
  text-align: center;                    /* texto centrado */
}


/* (Opcional) si tienes un separador con línea entre título y lista, quítalo: */
section#paquetes .cards .card.price h3 + .checklist{
  border-top: none !important;
}

/* (Opcional) hover solo con sombra (nada de borde) */
section#paquetes .cards .card.price:hover{
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  transform: translateY(-4px);
}
/* ===== Cómo trabajamos: tipografía y justificado ===== */
.copy p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.6;
  margin: 0 0 12px;
}
.copy p strong{
  font-weight: 600;
  letter-spacing: .2px;
}

/* ===== Layout: fijar alturas y alineaciones ===== */
#proceso .grid-2{
  align-items: start;      /* que arranquen arriba, sin descuadres */
  gap: 22px;
}

/* Imagen proporcionada y consistente en desktop */
.proceso-media picture,
.proceso-media img{
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;       /* ajusta a tu gusto (360–460px) */
  object-fit: cover;       /* recorte bonito sin deformar */
  border-radius: 16px;     /* mismo radio que tus cards */
}

/* En móviles, que la imagen no quede enorme */
@media (max-width: 768px){
  .proceso-media img{
    max-height: 260px;
  }
}
/* Solo afecta a la sección de bloques de SERVICIOS */
#bloques-servicios .cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 en una línea (desktop) */
  gap: 16px;
}
@media (max-width: 900px){
  #bloques-servicios .cards{ grid-template-columns: 1fr 1fr; } /* tablet */
}
@media (max-width: 600px){
  #bloques-servicios .cards{ grid-template-columns: 1fr; }     /* móvil */
}

/* === HERO SERVICIOS: 50/50 exacto y mismas alturas === */

/* Fuerza 2 columnas iguales en desktop */
.hero.hero--servicios .grid-2{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 50 / 50 */
  gap: 28px;
  align-items: stretch; /* que ambos bloques tengan la misma altura */
}

/* Elimina la restricción que angostaba el texto */
.hero--servicios .hero-panel .hero-content{
  max-width: none !important;
}

/* Centra verticalmente el contenido del panel de texto */
.hero--servicios .hero-panel{
  display: flex;
}
.hero--servicios .hero-panel .hero-content{
  margin: auto 0; /* centra vertical */
}

/* Igualamos la “presencia” visual con mínima altura compartida */
.hero--servicios .hero-panel,
.hero--servicios .media{
  min-height: clamp(320px, 40vw, 520px);
}

/* La imagen rellena su columna sin deformarse */
.hero--servicios .media{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.hero--servicios .media picture,
.hero--servicios .media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta en lugar de estirar */
}

/* Móvil: apilado vertical y alturas moderadas */
@media (max-width: 991.98px){
  .hero.hero--servicios .grid-2{
    grid-template-columns: 1fr !important;
  }
  .hero--servicios .hero-panel,
  .hero--servicios .media{
    min-height: auto;
  }
  .hero--servicios .media img{
    height: clamp(220px, 52vw, 360px);
  }
}
/* === SOBRE NOSOTROS — Hero compacto con dos columnas de la MISMA altura === */
#hero-sobre { padding-top: 24px !important; padding-bottom: 24px !important; }

#hero-sobre .grid-2{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;   /* fuerza mismas alturas */
}

/* Mata cualquier altura global previa (72vh, clamps, etc.) y fija una baja */
@media (min-width: 992px){
  #hero-sobre .hero-panel,
  #hero-sobre .media{
    min-height: 0 !important;
    height: 520px !important;              /* ← AJUSTA AQUÍ: 280–360px */
  }
  #hero-sobre .media picture,
  #hero-sobre .media img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  #hero-sobre .hero-content{
    max-width: 520px !important;
    margin: auto 0 !important;
    padding: 12px 24px !important;
  }
}

/* Móvil: natural, sin alargarse */
@media (max-width: 991.98px){
  #hero-sobre .grid-2{ grid-template-columns: 1fr !important; }
  #hero-sobre .hero-panel, #hero-sobre .media{ height: auto !important; min-height: auto !important; }
  #hero-sobre .media img{ height: auto !important; max-height: 320px !important; }
}

/* ===== PACKS ESTILO EDITORIAL BLANCO ===== */

.hero.hero--servicios .grid-2{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px;
  align-items: stretch;
}
.hero--servicios .hero-panel,
.hero--servicios .media{
  min-height: clamp(320px, 40vw, 520px);
}
.hero--servicios .media{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.hero--servicios .media picture,
.hero--servicios .media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991.98px){
  .hero.hero--servicios .grid-2{
    grid-template-columns: 1fr !important;
  }
  .hero--servicios .hero-panel,
  .hero--servicios .media{
    min-height: auto;
  }
  .hero--servicios .media img{
    height: clamp(220px, 52vw, 360px);
  }
}

/* HERO EDITORIAL — ALTURA UNIFORME para todos: servicios, blog, galería, sobre nosotros */
.hero.hero--servicios .grid-2,
.hero.hero--blog .grid-2,
.hero.hero--galeria .grid-2,
.hero.hero--sobre .grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px;
  align-items: stretch;
}

.hero--servicios .hero-panel,
.hero--servicios .media,
.hero--blog .hero-panel,
.hero--blog .media,
.hero--galeria .hero-panel,
.hero--galeria .media,
.hero--sobre .hero-panel,
.hero--sobre .media {
  min-height: 0 !important;
  height: 520px !important;   /* AJUSTA este valor a tu gusto */
}

/* Imagen siempre cubre su columna, recorte editorial */
.hero--servicios .media picture,
.hero--servicios .media img,
.hero--blog .media picture,
.hero--blog .media img,
.hero--galeria .media picture,
.hero--galeria .media img,
.hero--sobre .media picture,
.hero--sobre .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 18px;
  display: block;
}

/* Panel rosa: igual en todos */
.hero--servicios .hero-panel,
.hero--blog .hero-panel,
.hero--galeria .hero-panel,
.hero--sobre .hero-panel {
  background: #EFD7D1 !important;
  border-radius: 28px !important;
  padding: clamp(28px,3.5vw,48px) !important;
  box-shadow: var(--shadow-soft) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Centra el texto verticalmente */
.hero--servicios .hero-content,
.hero--blog .hero-content,
.hero--galeria .hero-content,
.hero--sobre .hero-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}

/* MÓVIL: apila, baja altura */
@media (max-width: 991.98px) {
  .hero.hero--servicios .grid-2,
  .hero.hero--blog .grid-2,
  .hero.hero--galeria .grid-2,
  .hero.hero--sobre .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .hero--servicios .hero-panel,
  .hero--servicios .media,
  .hero--blog .hero-panel,
  .hero--blog .media,
  .hero--galeria .hero-panel,
  .hero--galeria .media,
  .hero--sobre .hero-panel,
  .hero--sobre .media {
    height: auto !important;
    min-height: auto !important;
  }
  .hero--servicios .media img,
  .hero--blog .media img,
  .hero--galeria .media img,
  .hero--sobre .media img {
    height: clamp(220px, 50vw, 340px) !important;
    border-radius: 12px;
  }
  .hero--servicios .hero-content,
  .hero--blog .hero-content,
  .hero--galeria .hero-content,
  .hero--sobre .hero-content {
    padding: 0 14px;
  }
}

/* SOLO AJUSTE HERO GALERÍA: imagen más contenida si la tuya es muy baja */
#hero-galeria .media img {
  object-fit: cover !important;
  object-position: center center !important;
  min-height: 320px !important;     /* iguala la presencia visual */
  max-height: 520px !important;     /* iguala la altura máxima */
  border-radius: 18px !important;
}

/* Card base solo en #paquetes */
#paquetes .card.price{
  position: relative;
  border-radius: 24px;
  padding: 20px 22px 22px;
  border: 1px solid rgba(0,0,0,0.04);
  background: #FFFFFF;
  box-shadow: 0 18px 45px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Imagen arriba */
#paquetes .card.price .price-cover{
  margin: -20px -22px 14px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
#paquetes .card.price .price-cover img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Badge redondo pastel sobre la imagen */
#paquetes .card.price .ribbon{
  position: absolute;
  top: 18px;
  left: 22px;
  background: #F3A18E;           /* melocotón */
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* Si quieres variar un pelín por pack, puedes cambiar solo estos: */
#paquetes .ribbon--celebracion{ background:#E88F7A; }
#paquetes .ribbon--premium{ background:#5CB6A0; }

/* Título y subtítulo */
#paquetes .price-title{
  font-family: "Glass Antiqua", serif;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  margin: 0 0 4px;
}
#paquetes .price-subtitle{
  font-size: .95rem;
  color: #6F655F;
  text-align: center;
  margin: 0 0 10px;
}

/* Lista */
#paquetes .card.price .checklist{
  margin: 0 0 6px;
  padding-left: 18px;
  font-size: .95rem;
  color: #5A514D;
}
#paquetes .card.price .checklist li{
  margin-bottom: 4px;
}

/* Nota pequeña */
#paquetes .price-note{
  font-size: .8rem;
  color: #8A7E78;
  margin: 4px 0 12px;
  text-align: left;
}

/* Botón ancho, melocotón */
#paquetes .card.price .btn{
  width: 100%;
  justify-content: center;
}
#paquetes .card.price .btn-primary{
  background: #F3A18E;
  border-color: #F3A18E;
  color: #fff;
}

/* Quitamos fondos de color por pack: TODO blanco */
#paquetes .card.price.price--esencial,
#paquetes .card.price.price--celebracion,
#paquetes .card.price.price--premium{
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.04) !important;
}

/* ===== PACKS estilo tarjeta mockup ===== */

#paquetes .cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
@media (max-width:900px){
  #paquetes .cards{grid-template-columns:1fr;}
}

/* Card blanca con sombra suave y esquinas redondas */
#paquetes .card.price{
  position:relative;
  border-radius:24px;
  padding:20px 22px 22px;
  border:1px solid rgba(0,0,0,0.04);
  background:#FFFFFF;
  box-shadow:0 18px 45px rgba(0,0,0,0.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Imagen arriba ocupando el ancho */
#paquetes .card.price .price-cover{
  margin:-20px -22px 14px;
  border-radius:24px 24px 0 0;
  overflow:hidden;
}
#paquetes .card.price .price-cover img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Badge redondo pastel sobre la imagen */
#paquetes .card.price .ribbon{
  position:absolute;
  top:18px;
  left:24px;
  background:#E1A892;              /* tu nuevo coral suave */
  color:#fff;
  font-size:.75rem;
  font-weight:600;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

/* Si quieres un pelín distinto por pack (opcional) */
#paquetes .ribbon--celebracion{ background:#D08E79; }
#paquetes .ribbon--premium{ background:#7BAE9A; }

/* Título y subtítulo centrados tipo editorial */
#paquetes .price-title{
  font-family:"Glass Antiqua", serif;
  font-size:1.6rem;
  font-weight:400;
  text-align:center;
  margin:0 0 4px;
}
#paquetes .price-subtitle{
  font-size:.95rem;
  color:#6F655F;
  text-align:center;
  margin:0 0 12px;
}

/* Lista de puntos */
#paquetes .card.price .checklist{
  margin:0 0 6px;
  padding-left:18px;
  font-size:.95rem;
  color:#5A514D;
}
#paquetes .card.price .checklist li{
  margin-bottom:4px;
}

/* Nota pequeña bajo la lista */
#paquetes .price-note{
  font-size:.8rem;
  color:#8A7E78;
  margin:4px 0 12px;
}

/* Botón ancho, coral suave */
#paquetes .card.price .btn{
  width:100%;
  justify-content:center;
  margin-top:auto;
}
#paquetes .card.price .btn-primary{
  background:#E1A892 !important;
  border-color:#E1A892 !important;
  color:#fff !important;
}

/* Premium con botón outline pero mismo tono */
#paquetes .card.price.price--premium .btn-outline{
  border-color:#E1A892 !important;
  color:#2F2A28 !important;
}
#paquetes .card.price.price--premium .btn-outline:hover{
  background:#E1A892 !important;
  color:#fff !important;
}

/* Quitamos cualquier fondo de color que tuvieran antes */
#paquetes .card.price.price--esencial,
#paquetes .card.price.price--celebracion,
#paquetes .card.price.price--premium{
  background:#FFFFFF !important;
  border-color:rgba(0,0,0,0.04) !important;
}
/* Foto de los packs: que se vea solo la imagen, sin texto raro */
#paquetes .card.price .price-cover picture,
#paquetes .card.price .price-cover img{
  display:block;
  width:100%;
  height:220px;            /* altura fija tipo mockup */
  object-fit:cover;
}
#paquetes .card.price .ribbon{
  top:26px;                /* lo bajamos un poco */
  left:26px;
  font-size:.7rem;         /* más pequeño */
  padding:8px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,0.10);
}
#paquetes .card.price{
  padding:24px 26px 24px;
}

#paquetes .price-subtitle{
  margin-bottom:16px;
}

#paquetes .card.price .checklist{
  margin-bottom:10px;
}
#paquetes .card.price .checklist li{
  margin-bottom:6px;
}
#paquetes .price-subtitle{
  font-size:.95rem;
  color:#7A6F69;
}

#paquetes .card.price .checklist{
  font-size:.9rem;
  color:#5F5651;
}

#paquetes .price-note{
  font-size:.8rem;
  color:#9A8E87;
}
/* ===== BOTONES DE LOS PACKS: TODOS IGUALES ===== */
#paquetes .card.price a.btn,
#paquetes .card.price a.btn.btn-outline,
#paquetes .card.price a.btn.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  margin-top: auto;
  padding: 12px 18px;
  background: #E1A892 !important;      /* coral suave */
  border: 1px solid #E1A892 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(225,168,146,.25);
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

#paquetes .card.price a.btn:hover,
#paquetes .card.price a.btn:focus{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(225,168,146,.32);
}
/* Hover elegante en los botones de los packs */
#paquetes .card.price a.btn,
#paquetes .card.price a.btn.btn-outline,
#paquetes .card.price a.btn.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  margin-top: auto;
  padding: 12px 18px;
  background: #E1A892 !important;
  border: 1px solid #E1A892 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(225,168,146,.25);
  text-align: center;
  text-decoration: none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

#paquetes .card.price a.btn:hover,
#paquetes .card.price a.btn:focus-visible{
  transform: translateY(-2px);                         /* se eleva un poco */
  box-shadow: 0 14px 28px rgba(225,168,146,.35);       /* más sombra */
  background: #D7977C !important;                      /* coral un pelín más intenso */
  border-color: #D7977C !important;
}

/* ===== BOTONES GLOBALES CORAL SUAVE ===== */

/* Botón base */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:12px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Todos los .btn-primary en la web */
.btn-primary{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(225,168,146,.25);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(225,168,146,.35);
  background:#D7977C !important;   /* coral un pelín más intenso */
  border-color:#D7977C !important;
}

/* Botones “pill” (redonditos) que tengas por la web */
.btn-pill{
  border-radius:999px !important;
}
/* Rejilla de tipos de evento */
.cards.cards--eventos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:24px;
}
@media (max-width: 900px){
  .cards.cards--eventos{
    grid-template-columns:1fr;
  }
}

/* Tarjetas de evento, más ligeras que los packs */
.card.evento{
  background:#FFFFFF;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(0,0,0,0.04);
  padding:20px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card.evento h3{
  margin:0 0 4px;
}
.card.evento p{
  margin:0 0 6px;
  color:var(--text-2);
}
.card.evento ul{
  margin:0 0 10px;
  padding-left:18px;
  font-size:.9rem;
  color:#5F5651;
}
.card.evento ul li{
  margin-bottom:4px;
}

/* Botón suave en estas tarjetas */
.card.evento .btn{
  align-self:flex-start;
  margin-top:auto;
}
/* ===== NAV: dropdown en "Servicios" (desktop) ===== */

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Contenedor del item con submenú */
.nav-item.nav-has-dropdown{
  position:relative;
}

/* Enlace principal de Servicios */
.nav-item .nav-link{
  padding:8px 0;
  display:inline-block;
}

/* Caja del dropdown (oculta por defecto) */
.nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  background:#FFFFFF;
  border-radius:14px;
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
  padding:8px 0;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:2000;
}

/* Mostrar al pasar el ratón por el item */
.nav-item.nav-has-dropdown:hover .nav-dropdown{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Enlaces dentro del dropdown */
.nav-dropdown a{
  display:block;
  padding:8px 16px;
  font-size:.9rem;
  color:#2F2A28;
  white-space:nowrap;
}
.nav-dropdown a:hover{
  background:#FBF6F3;
}

/* En móvil (cuando uses burger), ocultamos el hover dropdown para que no moleste */
@media (max-width: 768px){
  .nav-item.nav-has-dropdown .nav-dropdown{
    display:none;
  }
}
.nav-dropdown{
  background:#FFFFFF;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,0.14);
  padding:10px 0;
}

.nav-dropdown a{
  padding:9px 18px;
  font-size:.9rem;
  color:#5F5651;
}

.nav-dropdown a:hover{
  background:#FBF6F3;
  color:#2F2A28;
}
.nav-item.nav-has-dropdown .nav-link::after{
  content:"▾";
  font-size:.7rem;
  margin-left:4px;
}
/* Layout general de historia */
#historia {
  padding: 64px 0;
}

.about-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}

.about-row--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.about-row--full {
  display: block;
  max-width: 780px;
  margin: 0 auto 40px auto;
}

/* Columnas */
.about-media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.about-content {
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

.about-content h2 {
  margin-bottom: 12px;
}

.about-content h3 {
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.lead {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.about-content--center {
  text-align: center;
}

.about-content--center p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.about-cta {
  margin-top: 1rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .about-row,
  .about-row--reverse {
    grid-template-columns: 1fr;
  }

  .about-content {
    font-size: 0.98rem;
  }

  .about-content--center {
    text-align: left;
  }

  .about-content--center p {
    max-width: 100%;
  }
}
#historia .about-media img[src*="about-1"] {
  max-width: 65%;      /* prueba 75%, 70% o 60% según lo que te guste */
  margin: 0 auto;      /* centra la imagen dentro de la columna */
  display: block;
}
#historia .about-media img[src*="about-3"] {
  max-width: 65%;      /* prueba 75%, 70% o 60% según lo que te guste */
  margin: 0 auto;      /* centra la imagen dentro de la columna */
  display: block;
}
#historia .about-media img[src*="about-2"] {
  max-width: 65%;      /* prueba 75%, 70% o 60% según lo que te guste */
  margin: 0 auto;      /* centra la imagen dentro de la columna */
  display: block;
}
#equipo .media img[src*="about-2"] {
  max-width: 60%;    /* prueba 70%, 65% o 60% según lo que te guste */
  margin: 0 auto;
  display: block;
}
/* === FIX MÓVIL: HERO SOBRE NOSOTROS + GALERÍA FULL BLEED === */
@media (max-width: 768px){

  /* El hero ya es full-width por las reglas globales, 
     aquí solo nos aseguramos de que la imagen ocupe todo y sin márgenes. */

  #hero-sobre .container,
  #hero-galeria .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #hero-sobre .grid-2,
  #hero-galeria .grid-2{
    display: block !important;        /* apilar texto e imagen */
  }

  #hero-sobre .media,
  #hero-galeria .media{
    margin: 0 !important;
    padding: 0 !important;
  }

  #hero-sobre .media picture,
  #hero-sobre .media img,
  #hero-galeria .media picture,
  #hero-galeria .media img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* El texto con algo de margen lateral para que no quede pegado */
  #hero-sobre .hero-panel,
  #hero-galeria .hero-panel{
    padding: 16px 20px 20px 20px !important;
  }
}
/* === SOBRE NOSOTROS: imágenes full width en MÓVIL === */
@media (max-width: 768px){

  /* HISTORIA: que las fotos ocupen todo el ancho del container */
  #historia .about-media img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0;           /* si las quieres sin esquinas redondas */
    display: block;
  }

  /* EQUIPO: igual, foto a ancho completo */
  #equipo .media img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0;
    display: block;
  }

  /* Opcional: un pelín de aire lateral solo para el TEXTO */
  #historia .about-content,
  #equipo .content{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Cualquier elemento con [hidden] se oculta siempre */
[hidden]{
  display: none !important;
}
@media (max-width: 768px){
  .mobile-group{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-parent{
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: var(--text, #2a2a2a);
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    cursor: pointer;
  }

  .mobile-parent:hover{
    background: #FBF6F6;
  }

  .mobile-arrow{
    font-size: 0.8rem;
    opacity: 0.7;
  }

  .mobile-submenu{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px; /* pequeño sangrado */
  }

  .mobile-submenu a{
    padding: 8px 14px;
    font-size: 0.95rem;
  }
}
@media (max-width: 768px){
  /* Por defecto, si NO está hidden, el submenú se muestra como columna */
  .mobile-submenu{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
  }

  /* Si tiene [hidden], se oculta siempre */
  .mobile-submenu[hidden]{
    display: none !important;
  }

  /* Estilo de los enlaces dentro del submenú */
  .mobile-submenu a{
    padding: 8px 14px;
    font-size: 0.95rem;
    color: var(--text, #2a2a2a);
  }
}
@media (max-width: 768px) {
  /* Por defecto, ocultar el contenedor móvil */
  header.nav .mobile {
    display: none;
  }

  /* Cuando el header tiene la clase is-open (la pone el JS), mostrar el menú móvil */
  header.nav.is-open .mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Asegura que el contenedor ocupa todo el ancho y se ve por debajo del header */
  header.nav .mobile {
    width: 100%;
    background: var(--surface, #FBF6F6);
    padding: 16px 20px;
  }
}

/* HERO GALERÍA A ANCHO COMPLETO */
#hero-galeria {
  padding-left: 0;
  padding-right: 0;
}

#hero-galeria > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Que la imagen del hero vaya de lado a lado de su columna */
#hero-galeria .media picture,
#hero-galeria .media img {
  width: 100%;
  height: auto;
  display: block;
}

/* GALERÍA GRID – FOTOS MÁS CONTENIDAS */
#grid .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 por fila en escritorio */
  gap: 16px;
}

/* Las tarjetas de la galería */
#grid .card {
  padding: 0;
  border: none;
  box-shadow: none;
}

/* Imágenes más pequeñas y proporcionadas */
#grid .card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;      /* opcional */
  object-fit: cover;
}

/* En pantallas medianas: 2 columnas */
@media (max-width: 992px) {
  #grid .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* En móvil: 2 columnas (o 1 si las quieres más grandes) */
@media (max-width: 600px) {
  #grid .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Opcional: miniaturas más pequeñas centradas dentro del container */
#grid .grid-3 {
  justify-items: center;
}

#grid .card {
  max-width: 280px; /* prueba 220–280px hasta que te guste */
  width: 100%;
}

/* ===== HERO GALERÍA – MÁS ANCHO Y RESPIRADO ===== */

/* Solo afecta al hero de galería */
#hero-galeria .container {
  max-width: 1400px;   /* más ancho que el resto del sitio */
}

#hero-galeria .grid-2 {
  align-items: center;
}

/* Imagen bien grande dentro de su columna */
#hero-galeria .media picture,
#hero-galeria .media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* ===== AJUSTE HERO GALERÍA – ELIMINAR HUECO ENTRE TEXTO E IMAGEN ===== */

/* Aseguramos que la grid se comporta como dos columnas pegadas */
#hero-galeria .grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); /* texto + imagen */
  align-items: center;
  column-gap: 32px; /* puedes bajar a 24px si quieres aún más juntos */
}

/* Quitamos márgenes raros dentro de los paneles */
#hero-galeria .hero-panel,
#hero-galeria .media {
  margin: 0;
  padding: 0;
}

/* El contenido de texto no debe tener margen extra abajo */
#hero-galeria .hero-content {
  margin: 0;
  padding: 0;
}

/* Ajuste de márgenes generales del hero solo en galería */
#hero-galeria {
  padding-top: 40px;   /* ajusta a tu gusto */
  padding-bottom: 40px;
}

#hero-galeria h1 {
  margin-top: 0;
}
/* ===== FIX ESPECÍFICO PARA HERO DE GALERÍA ===== */

/* Ignoramos el comportamiento normal de .grid-2 SOLO aquí y usamos flex */
#hero-galeria .grid-2 {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px; /* controla la separación entre texto e imagen */
}

/* Aseguramos que cada columna ocupa la mitad (ajustable) */
#hero-galeria .hero-panel {
  flex: 1 1 50%;
  margin: 0;
  padding: 0;
}

#hero-galeria .media {
  flex: 1 1 50%;
  margin: 0;
  padding: 0;
}

/* Imagen bien pegada a su contenedor, sin huecos internos */
#hero-galeria .media picture,
#hero-galeria .media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Quitamos posibles márgenes verticales que abran huecos raros */
#hero-galeria .hero-content {
  margin: 0;
  padding: 0;
}

#hero-galeria h1 {
  margin-top: 0;
}

/* En móvil, apilamos uno encima de otro */
@media (max-width: 768px) {
  #hero-galeria .grid-2 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  #hero-galeria .hero-panel,
  #hero-galeria .media {
    flex: 1 1 auto;
  }
}


/* ===== MINI BOT WHATSAPP TEDDY & BLOOM ===== */

.tbe-bot {
  position: fixed;
  right: 16px;
  bottom: 60px;
  z-index: 3500;
  font-family: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Botón que abre/cierra el panel */
.tbe-bot-toggle {
  background: #f3e4df;
  color: #4b3a34;
  border: 1px solid #e0cfc7;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Animación solo cuando tenga la clase .is-attention */
.tbe-bot-toggle.is-attention {
  animation: tbe-bot-bounce 1.8s ease-in-out infinite;
}

/* Hover: se calma un poco */
.tbe-bot-toggle:hover {
  background: #f7ece7;
  box-shadow: 0 8px 22px rgba(0,0,0,0.1);
  transform: translateY(-1px);
  animation-play-state: paused;
}

/* Panel del "chat" */
.tbe-bot-panel {
  position: absolute;
  right: 0;
  bottom: 52px;
  width: 280px;
  max-width: 80vw;
  background: #fffaf7;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 14px 14px 12px;
  border: 1px solid #f0ded5;
}

.tbe-bot-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4b3a34;
}

.tbe-bot-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  color: #6b5850;
}

.tbe-bot-label select,
.tbe-bot-label input {
  width: 100%;
  margin-top: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e2d2ca;
  font-size: 0.8rem;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}

.tbe-bot-label select:focus,
.tbe-bot-label input:focus {
  outline: none;
  border-color: #c9a89a;
  box-shadow: 0 0 0 1px rgba(201,168,154,0.4);
}

/* Botón enviar */
.tbe-bot-send {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: none;
  background: #c9a89a;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.tbe-bot-send:hover {
  background: #b89282;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.tbe-bot-note {
  margin: 4px 0 0;
  font-size: 0.7rem;
  color: #8b7469;
}

/* En móvil, que no tape demasiado */
@media (max-width: 768px) {
  .tbe-bot {
    right: 12px;
    bottom: 12px;
  }

  .tbe-bot-panel {
    width: 260px;
    max-width: 90vw;
  }

  .tbe-bot-toggle {
    font-size: 1.10rem;
    padding: 8px 14px;
  }
}

/* ===== ANIMACIÓN DE REBOTE LLAMATIVO ===== */

@keyframes tbe-bot-bounce {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }
  10% {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 26px rgba(0,0,0,0.18);
    background-color: #f7ece7;
  }
  20% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-5px) scale(1.02);
  }
  40% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }
}

/* Iconos sociales en el footer (solo logos, sin burbuja) */
.foot-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Enlaces: sin fondo, sin círculo */
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0;
  transition: transform 0.1s ease, opacity 0.2s ease;
}

/* Tamaño de los iconos */
.foot-social a svg {
  width: 22px;
  height: 22px;
}

/* Instagram: degradado típico */
.foot-social-instagram svg rect {
  fill: url(#ig-gradient);
}
.foot-social-instagram svg circle:nth-of-type(1),
.foot-social-instagram svg circle:nth-of-type(2) {
  fill: #ffffff;
}

/* Facebook: azul oficial */
.foot-social-facebook svg path {
  fill: #1877f2;
}

/* WhatsApp: verde oficial */
.foot-social-whatsapp svg path {
  fill: #25D366;
}

/* Hover: un pelín de zoom y menos opacidad */
.foot-social a:hover {
  transform: translateY(-1px) scale(1.05);
  opacity: 0.85;
}

/* Móvil: un pelín más pequeños si quieres */
@media (max-width: 768px) {
  .foot-social a svg {
    width: 20px;
    height: 20px;
  }
}

/* FIX: asegurar que se ven los 2 botones del hero */
.hero .buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.hero .buttons a {
  display: inline-flex !important;
}

/* En móvil, que se apilen si hace falta */
@media (max-width: 768px) {
  .hero .buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero .buttons a {
    width: 100% !important;
    justify-content: center !important;
  }
}
/* === BOTONES DEL HERO: PRIMARIO CORAL + SECUNDARIO TRANSPARENTE === */

/* Botón principal (Ver servicios) */
.hero-panel .buttons .btn-primary {
  background: #F3A18E !important;      /* coral relleno */
  border-color: #F3A18E !important;
  color: #ffffff !important;
}

/* Botón secundario (Contactar): transparente con borde oscuro */
.hero-panel .buttons .btn-outline {
  background: transparent !important;
  border-color: #2F2A28 !important;    /* marrón oscuro / casi negro */
  color: #2F2A28 !important;
  box-shadow: none !important;
}

/* Hover del secundario: un pelín de relleno suave */
.hero-panel .buttons .btn-outline:hover,
.hero-panel .buttons .btn-outline:focus-visible {
  background: rgba(47,42,40,0.06) !important;  /* gris/marrón muy suave */
  border-color: #2F2A28 !important;
  color: #2F2A28 !important;
}

/* Enlace tipo mini-botón bajo "El arte de celebrar" */
.celebrar-link {
  margin-top: 16px;
}

.celebrar-link .text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #2F2A28;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,42,40,0.25);
  font-size: 0.95rem;
}

.celebrar-link .text-link::after {
  content: "→";
  font-size: 0.9rem;
}

.celebrar-link .text-link:hover,
.celebrar-link .text-link:focus-visible {
  background: rgba(47,42,40,0.04);
  border-color: rgba(47,42,40,0.45);
}
/* Mini botón editorial bajo "El arte de celebrar" */
.celebrar-link {
  margin-top: 16px !important;
  text-align: left;
}

.celebrar-link .text-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #2F2A28 !important;
  text-decoration: none !important;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid #2F2A28 !important;
  font-size: 1rem;
  background: transparent !important;
  transition: background-color 0.18s, border-color 0.18s;
}

.celebrar-link .text-link::after {
  content: "→";
  font-size: 1.1em;
  margin-left: 3px;
}

.celebrar-link .text-link:hover,
.celebrar-link .text-link:focus-visible {
  background: rgba(47,42,40,0.06) !important;
  border-color: #131011 !important;
  color: #131011 !important;
}
/* Botón CTA bajo galería: editorial y visible */
.galeria-cta {
  margin-top: 24px;
  text-align: center;
}

.galeria-cta .btn-outline {
  background: transparent !important;
  border: 1.5px solid #2F2A28 !important;  /* borde oscuro editorial */
  color: #2F2A28 !important;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: none !important;
  transition: background-color 0.18s, border-color 0.18s;
}

.galeria-cta .btn-outline:hover,
.galeria-cta .btn-outline:focus-visible {
  background: rgba(47,42,40,0.07) !important;
  border-color: #131011 !important;
  color: #131011 !important;
}
.hero-panel .btn.btn-primary,
.hero-content .btn.btn-primary {
  background: #E1A892 !important;
  border-color: #E1A892 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(225,168,146,.25);
  font-weight: 600;
}

.hero-panel .btn.btn-primary:hover,
.hero-content .btn.btn-primary:hover,
.hero-panel .btn.btn-primary:focus-visible,
.hero-content .btn.btn-primary:focus-visible {
  background: #D7977C !important;
  border-color: #D7977C !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(225,168,146,.35);
  }

  /* HERO EDITORIAL UNIFICADO PARA TODAS LAS PÁGINAS DE SERVICIOS */
.hero.hero--servicios .grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px;
  align-items: stretch;
}
.hero--servicios .hero-panel,
.hero--servicios .media {
  min-height: 0 !important;
  height: 520px !important;   /* Cambia aquí si quieres otra altura */
}
.hero--servicios .media picture,
.hero--servicios .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 18px;
  display: block;
}
.hero--servicios .hero-panel {
  background: #EFD7D1 !important;
  border-radius: 28px !important;
  padding: clamp(28px,3.5vw,48px) !important;
  box-shadow: var(--shadow-soft) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--servicios .hero-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 991.98px) {
  .hero.hero--servicios .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .hero--servicios .hero-panel,
  .hero--servicios .media {
    height: auto !important;
    min-height: auto !important;
  }
  .hero--servicios .media img {
    height: clamp(220px, 50vw, 340px) !important;
    border-radius: 12px;
  }
  .hero--servicios .hero-content {
    padding: 0 14px;
  }
}