/* ========= Base & Vars ========= */
:root{
  --bg:#101010; --bg-2:#171717;
  --ink:#fafafa; --muted:#cfcfcf;
  --accent:#d3b27f; --line:#262626;
  --radius:14px; --shadow:0 10px 24px rgba(0,0,0,.35);
  --container:1200px; --hero-h:66vh;
  --font:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  --gold:#d3b27f; --gold-ink:#0b0b0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background-color: var(--bg) !important;color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0 0 .6rem;font-weight:700}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important}

/* Foco accesible */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Reduce Motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ========= Layout helpers ========= */
.container{max-width:var(--container);margin-inline:auto;padding-inline:1rem}
.page{padding:3rem 0}
.center{text-align:center}

/* ========= Buttons ========= */
.btn{display:inline-block;padding:.8rem 1.3rem;border-radius:8px;border:1px solid var(--accent);color:var(--accent);font-weight:600;transition:filter .2s ease,transform .2s ease}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#000;border-color:transparent}
.btn--primary:hover{filter:brightness(1.05)}
.btn--gold{border:1px solid var(--gold);background:var(--gold);color:var(--gold-ink);border-radius:10px}
.btn--gold:hover{filter:brightness(1.06)}
.btn--xl{padding:1rem 1.5rem;border-radius:10px;font-size:1.05rem}

/* ========= Header ========= */
.site-header{position:sticky;top:0;z-index:50;background:#0c0c0c;border-bottom:1px solid var(--line)}
.header-flex{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.9rem 0}
.logo{color:var(--accent);font-weight:700;font-size:1.3rem}
.main-nav{display:flex;gap:1rem;align-items:center}
.main-nav a{color:#f3f3f3;opacity:.9}
.main-nav a:hover,.main-nav a.active{opacity:1;color:var(--accent)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem}

@media (max-width:900px){

  .menu-toggle{display:block}
  .main-nav{
    position:fixed;
    inset:60px 0 auto auto;
    background:#111;
    border-top:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    padding:1rem;
    gap:.8rem;
    display:none;
  }

  .main-nav.open{
    display:flex
  }

}

main.page {
  padding-bottom: 0;
}

/* ========= Hero (con var(--hero) DIRECTO) ========= */
.hero{
  position:relative; min-height:66vh;
  display:grid; place-items:center; text-align:center;
  background:#0e0e0e center/cover no-repeat; /* fallback + cover */
  overflow:hidden; isolation:isolate;
}

.hero.contact-hero {
  min-height: 25vh;
}

.hero__overlay{position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.25) 40%,rgba(0,0,0,.62))}
.hero__content{position:relative; z-index:2; padding:2rem 0}
.hero h1{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:.8rem;text-shadow: 0 0 5px rgba(0,0,0,1);}
.hero p{max-width:820px;margin:0 auto 1rem;color:#eee}


/* ========= Section spacing ========= */
.section{padding:3rem 0}
.section h2{font-size:clamp(1.6rem,2.5vw,2.1rem);text-align:center;margin-bottom:1.4rem}

/* ========= Value message ========= */
.value__text{
  max-width: 100%;
  margin:0 auto;
  color:#eaeaea;
  font-size: 1.25rem;
  line-height:1.75;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  padding: 1.5em;
  border:1px solid var(--line);
  border-radius:14px;
  text-align: center;
}

header a.logo img {
  width: 120px;
}

.main-nav.open {
  width: 100%;
  margin-top: 84px;
  gap: 0;
  padding-bottom: 300px;
}

.main-nav.open a {
  width: 100%;
  text-align: center;
  padding-top: 17px;
  padding-bottom: 17px;
  border-bottom: 1px dashed #191919;
}

/* ========= Process ========= */
.process__grid{display:grid;gap:18px;margin-top:.8rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.process__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .process__grid{grid-template-columns:1fr}

  .hero.hero--video {
      min-height: 75vh !important;
  }

  #agenda_ahora {
    width: 100%;
    background-color: #090909;
    margin: 0 !important;
    padding: 15px;
    bottom: 0;
    right: 0;
  }

  #agenda_ahora .btn-warning {
   background-color: #f3bd58 !important;
  }
}

.step{background:#141414;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.35rem;min-height:180px}
.step__icon{width:44px;height:44px;border-radius:10px;background:#0f0f0f;color:var(--accent);display:grid;place-items:center;margin-bottom:.35rem}
.step__title{font-size:1.05rem}
.step__desc{color:#dcdcdc;margin:0}

/* ===== Services (grid + cards) — versión única ===== */

/* Grilla base: no fija columnas, solo separación */
.services__grid{ display:grid; gap:20px; }

/* 4 columnas (home “Lo que hacemos”) */
.services__grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1100px){ .services__grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .services__grid--4{ grid-template-columns:1fr; } }

/* 3 columnas (Planes gastronómicos) */
.services__grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1100px){ .services__grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .services__grid--3{ grid-template-columns:1fr; } }

/* Tarjeta con fondo por CSS var o inline */
.service-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:360px;
  /* box-shadow:var(--shadow); */
  isolation:isolate;

  /* clave: usa la variable que pasas inline con style="--bg-img:url('…')" */
  background-image: var(--bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Overlay para contraste del texto */
.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: #000000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.71) 22%, rgba(0, 0, 0, 0) 75%);
  transition:opacity .3s ease;
}
.service-card:hover::after{ opacity:.95; }

/* Contenido encima del overlay */
.service-card__link{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; color:inherit; text-decoration:none; }
.service-card__overlay{ width:100%; padding:20px; }

.service-card__title{
  font-size: 1.35rem;
  margin:0 0 .35rem;
  text-shadow: 0 2px 6px rgba(0,0,0,1);
  }

.service-card__desc{
  margin:0 0 .9rem;
  color:#efefef;
  max-width:40ch;
  text-shadow: 0 0 4px rgba(0,0,0,1),0 0 6px rgba(0,0,0,1),0 0 8px rgba(0,0,0,.5);
  font-size: 1em;
  line-height: 1.5;
}

@media (min-width:1200px){ .service-card{ min-height:420px; } }


/* ========= Testimonials ========= */
.testimonials__grid{display:grid;gap:16px;margin-top:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:780px){.testimonials__grid{grid-template-columns:1fr}}
.testimonial{background:#1c1c1c;border-left:4px solid var(--accent);border-radius:12px;padding:1.3rem;box-shadow:var(--shadow)}
.testimonial footer{color:#cfcfcf;margin-top:.6rem}

/* ========= Videos ========= */
.video-frame{border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.video-frame iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* ========= CTA final ========= */
.cta-final{padding:3.5rem 1rem;background:#151515}
.cta-final__lead{max-width:760px;margin:.25rem auto 1rem;color:#cfcfcf}

/* ========= Footer ========= */
.site-footer{border-top:1px solid var(--line);background:#0c0c0c;padding:2rem 0;/* margin-top:3rem; */}
.footer-flex{display:grid;gap:1rem}
.footer-copy{margin-top:1rem;color:#bbbbbb}
@media (min-width:800px){.footer-flex{grid-template-columns:1fr auto}}

/* ===== Carrusel Shorts ===== */
/* ===== Carrusel Shorts ===== */
.carousel{ position:relative; }
.carousel__viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none;
  margin:10px 0 0;
}
.carousel__viewport::-webkit-scrollbar{ display:none }

.carousel__track{
  display:flex; gap:16px; padding:2px;
}

/* Marco 9:16 */
.video-short{
  aspect-ratio:9/16; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.35); background:#000;
}
.video-short iframe{ width:100%; height:100%; border:0; display:block; }

/* Flechas grandes y arriba de todo */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%; border:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:32px; line-height:1;
  display:grid; place-items:center; cursor:pointer; z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.carousel__btn:hover{ background:rgba(0,0,0,.75) }
.carousel__btn.prev{ left:-10px }
.carousel__btn.next{ right:-10px }

@media (max-width:640px){
  .carousel__btn{ width:48px; height:48px; font-size:28px }
  .carousel__btn.prev{ left:-6px } .carousel__btn.next{ right:-6px }
}

/* Dots (opcional) */
.carousel__dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.carousel__dot{ width:8px; height:8px; border-radius:999px; background:#444; cursor:pointer; transition:background .25s; }
.carousel__dot.active{ background:var(--accent) }

/* feedback al arrastrar */
.carousel__viewport.is-grabbing{ cursor:grabbing; }


/* Marco 9:16 */
.video-short{
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background: #000;
}
.video-short iframe{ width:100%; height:100%; border:0; display:block }

/* Botones */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:24px;
  display:grid; place-items:center; cursor:pointer; z-index:2;
}
.carousel__btn:hover{ background:rgba(0,0,0,.75) }
.carousel__btn.prev{ left:-6px }
.carousel__btn.next{ right:-6px }

/* Flechas grandes y siempre por encima */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  border:0;
  background: rgba(0,0,0,.55);
  color:#fff; font-size:32px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.carousel__btn:hover{ background: rgba(0,0,0,.75) }
.carousel__btn.prev{ left: -10px }
.carousel__btn.next{ right: -10px }

@media (max-width: 640px){

  .carousel__btn { 
    width:48px;
    height:48px;
    font-size:28px;
  }
  
  .carousel__btn.prev{ left: -6px }
  
  .carousel__btn.next{ right: -6px }

  .services__grid--3 { grid-template-columns: 1fr !important; }

}

/* Dots */
.carousel__dots{
  display:flex; justify-content:center; gap:8px; margin-top:12px;
}
.carousel__dot{
  width:8px; height:8px; border-radius:999px;
  background:#444; cursor:pointer; transition:background .25s ease;
}
.carousel__dot.active{ background: var(--accent) }

/* feedback arrastre */
.carousel__viewport.is-grabbing{ cursor: grabbing }


/* Grilla 3 columnas centrada */
.services__grid {
  display: grid;
  gap: 20px;
}
.services__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 1100px) {
  .services__grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Grilla limpia y más compacta */
.shorts-grid {
  display: grid;
  gap: 14px; /* Menos espacio entre ellos */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Más columnas si hay espacio */
  align-items: start;
  justify-items: center; /* Centra cada card dentro de su columna */
}

/* Marco 9:16 más pequeño */
.short-embed {
  width: 100%;
  max-width: 180px; /* Controla el ancho máximo */
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  background: #000;
  transition: transform .2s ease, box-shadow .2s ease;
}

.short-embed:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.short-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ========== HERO VIDEO FULLSCREEN ========== */
.hero--video{
  position:relative; min-height:72vh; /* puedes subir a 100vh si quieres ocupar toda la pantalla */
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
  background:#000; /* por si el video tarda */
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__overlay{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.25) 40%, rgba(0,0,0,.62));
}

/* truco "cover" para iframe 16:9 */
.hero__iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; /* no captura clics, solo se ve */
  border:0;
}
/* Si el viewport es más ancho que 16:9 */
@media (min-aspect-ratio: 16/9){
  .hero__iframe{ width:100vw; height:56.25vw; }
}
/* Si el viewport es más alto que 16:9 */
@media (max-aspect-ratio: 16/9){
  .hero__iframe{ width:177.78vh; height:100vh; }
}

/* contenido del hero por encima */
.hero__content{ position:relative; z-index:2; text-align:center; }

/* ========== SLIDER VIDEOS ========== */
.carousel{ position:relative; }
.carousel__viewport{
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none; /* oculta barra */
}
.carousel__viewport::-webkit-scrollbar{ display:none; }

.carousel__track{
  display:flex; gap:16px; padding:4px 2px;
}

.carousel_corporativos .carousel__track{
  justify-content: center;
}

.carousel__item{ 
  flex: 0 0 clamp(320px, 42vw, 560px);
}

#shorts_matrimonios .carousel__item{ 
  flex: 0 0 clamp(240px, 25vw, 375px);
}

.video-embed iframe{
  width:100%; aspect-ratio:16/9; border:0; display:block;
  border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* Flechas grandes */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%; border:0;
  background:rgba(0,0,0,.55); color:#fff; font-size:32px;
  display:grid; place-items:center; cursor:pointer; z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.carousel__btn:hover{ background:rgba(0,0,0,.75); }
.carousel__btn.prev{ left:-10px; }
.carousel__btn.next{ right:-10px; }
@media (max-width:640px){
  .carousel__btn{ width:48px; height:48px; font-size:28px; }
  .carousel__btn.prev{ left:-6px; } 
  .carousel__btn.next{ right:-6px; }
}

/* ===== Galería (grid fijo) ===== */
.gallery-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width:1100px){ .gallery-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:740px){  .gallery-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){  .gallery-grid{ grid-template-columns:1fr; } }

.gallery-item{
  border-radius:12px;
  overflow:hidden;
  background:#0f0f0f;
  box-shadow: var(--shadow);
}
.gallery-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 4 / 3;     /* mantiene tarjetas prolijas; quítalo si quieres alturas libres */
  transition: transform .25s ease, filter .25s ease;
}
.gallery-item:hover img{ transform: scale(1.025); filter:brightness(1.05); }

/* ==== PARTICULARES: carrusel de videos locales (9:16) ==== */
.carousel[data-carousel="videos"] .carousel__item{
  /* ancho de cada tarjeta (2–4 visibles según viewport) */
  flex: 0 0 clamp(240px, 26vw, 320px);
}

.video-short{
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}

/* Importante: que el <video> se estire sin barras negras */
.video-short video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* recorta para llenar 9:16 */
}

/* Sección Clientes y Colaboradores */
.section.clientes {
  padding: 4rem 0;
  background-color: #111; /* Fondo oscuro para mantener coherencia con la web */
}

.clientes h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.clientes p {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #ccc;
}

.clientes__logo-wrap {
  display: flex;
  justify-content: center;
}

.clientes__logo-wrap img {
  max-width: 100%;
  height: auto;
  filter: grayscale(100%); /* Opcional: hace que todos los logos queden en escala de grises */
  transition: filter 0.3s ease;
}

.clientes__logo-wrap img:hover {
  filter: grayscale(0%);
}

/* Masonry “Pinterest” */
.masonry{
  column-count: 4;
  column-gap: 14px;
}
@media (max-width: 1100px){ .masonry{ column-count: 3; } }
@media (max-width: 780px){  .masonry{ column-count: 2; } }
@media (max-width: 520px){  .masonry{ column-count: 1; } }

.masonry__item{
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #0f0f0f;
  cursor: zoom-in;
}
.masonry__item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}
.masonry__item:hover img{
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* Lightbox */
.lightbox{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.85);
  display: grid; place-items: center;
  padding: 20px;
  transition: opacity .2s ease;
}
.lightbox[aria-hidden="true"]{ opacity: 0; pointer-events: none; }
.lightbox img{
  max-width: min(92vw, 1600px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.lightbox__close{
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.lightbox__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color:#fff;
  font-size: 32px; cursor: pointer;
}
.lightbox__nav.prev{ left: 18px; }
.lightbox__nav.next{ right: 18px; }

/* Ajustes hero video (ya tienes estos, aquí por claridad) */
.hero--video{ position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden; background:#000; }
.hero__iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:0; pointer-events:none; }
@media (min-aspect-ratio: 16/9){ .hero__iframe{ width:100vw; height:56.25vw; } }
@media (max-aspect-ratio: 16/9){ .hero__iframe{ width:177.78vh; height:100vh; } }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.25) 40%,rgba(0,0,0,.62)); z-index:1; }
.hero__content{ position:relative; z-index:2; }

.hero__content p {
  font-size: 1.3em;
  text-shadow: 0 0 6px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1);
}

/* ===== Manifiesto ===== */
.value__text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.8rem;
}


.service-card h3.lines-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
    height: 2.5em;
}

.service-card p.lines-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  height: 6.2em;
}

@media (min-width: 768px) {
  .value__text ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
.value__text li {
  background: #141414;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #dcdcdc;
}

/* ===== Método ===== */
.process__grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .process__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step {
  background: #141414;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.2rem;
  text-align: center;
}
.step__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.step__title {
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.step__desc {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ===== FAQs ===== */
section .faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 0.8rem;
}
details {
  background: #141414;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  transition: border-color 0.2s ease;
}
details[open] {
  border-color: var(--gold);
}
summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  outline: none;
}
summary::-webkit-details-marker {
  display: none;
}
details div {
  margin-top: 0.5rem;
  color: #dcdcdc;
  font-size: 0.95rem;
  line-height: 1.4;
}

.btn-whatsapp img {

width: 47px;

margin-right: 15px;
}

.tf-embed { min-height: 620px; }
@media (max-width: 600px){ .tf-embed{ min-height: 680px; } }

a:hover {
  color: unset;
  text-decoration: none;
}

.container.hero__content {
  padding: 0 1em;
}

.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}

@media (min-width: 768px){
  .container.hero__content {
    padding: 0em;
  }
}

.site-footer {
  padding-bottom: 100px;
}

.site-footer ul {
  list-style: none;
  padding-left: 10px;
  padding-bottom: 50px;
}

.site-footer ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
}

.site-footer a.social img {
  display: inline-block;
  margin-right: 8px;
}

.site-footer a.social {
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
}

.site-footer a.social:hover {
  color: #d3b27f;
  text-decoration: underline;
}

.site-footer img#logo {
    width: 150px;
    margin-bottom: 2rem;
  }

@media (max-width: 780px){
  .site-footer {
      text-align: center;
      padding: 4rem 0 100px;
  }

  .site-footer h3 {
    margin-bottom: 2rem;
  }

  .site-footer ul {
    padding-bottom: 20px;
  }

  .site-footer img#logo {
    width: 50%;
    margin-bottom: 3rem;
    display: inline-block;
  }

  .site-footer a.social {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }

}

/* HERO VIDEO FULLSCREEN */
.hero.hero--video{position:relative;min-height:90vh;overflow:hidden}
.hero.hero--video .hero__iframe{
  position:absolute;top:50%;left:50%;
  /* Cover para iframe 16:9 (sin barras) */
  width:100vw;height:56.25vw;        /* 9/16 = 0.5625 */
  min-width:177.78vh;min-height:90vh;/* 16/9 = 1.7778 */
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;z-index:0
}
.hero.hero--video .hero__overlay{position:absolute;inset:0;z-index:1}
.hero.hero--video .hero__content{position:relative;z-index:2}

/* page gallery */
  
  /* <!-- CLIENTES Y COLABORADORES — grid de logos (ampliado) --> */

  .section.section--logos{padding-block:clamp(56px,8vw,112px)}
  .section--logos .section__intro{
    max-width:62ch;margin-inline:auto;text-align:center;
    margin-bottom:clamp(24px,3.2vw,44px);opacity:.9
  }

  .logo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); /* más grandes */
    gap:clamp(16px,2.6vw,32px);
    align-items:center;
  }
  .logo-grid__item{
    display:flex;align-items:center;justify-content:center;
    aspect-ratio:4/3;                    /* tarjetas un poco más altas */
    background:#111;border:1px solid rgba(255,255,255,.06);
    border-radius:16px;
    padding:clamp(12px,2.4vw,24px);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .logo-grid__item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.28)}
  .logo-grid__img{
    max-height:clamp(44px,6vw,80px);     /* logos más altos */
    width:auto;height:auto;object-fit:contain;
    filter:grayscale(100%);opacity:.9;transition:filter .2s, opacity .2s, transform .2s;
  }
  .logo-grid__item:hover .logo-grid__img{filter:none;opacity:1;transform:scale(1.03)} 

  /* <!-- CLIENTES Y COLABORADORES (Grid de logos) --> */

  .section.section--logos{padding-block:clamp(48px,8vw,96px)}
  .section--logos .section__intro{max-width:60ch;margin-inline:auto;text-align:center;margin-bottom:clamp(20px,3vw,36px);opacity:.9}

  .logo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
    gap:clamp(14px,2.2vw,28px);
    align-items:center;
  }
  .logo-grid__item{
    display:flex;align-items:center;justify-content:center;
    aspect-ratio:3/2;
    background:#111;                   /* tarjeta oscura */
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    padding:clamp(10px,2vw,20px);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .logo-grid__item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .logo-grid__img{
    max-height:clamp(28px,4vw,56px);
    width:auto; height:auto; object-fit:contain;
    filter:grayscale(100%); opacity:.9; transition:filter .2s ease, opacity .2s ease, transform .2s ease;
  }
  .logo-grid__item:hover .logo-grid__img{filter:none; opacity:1; transform:scale(1.03)}