/* Salero Digital - CSS específico de /el-menu/ v45
   Archivo limpio: hero, servicios, método, confianza y responsive.
*/

/* Cabecera específica */
.el-menu-page .site-header .logo{
  font-family:var(--font-serif);
  font-weight:800;
  letter-spacing:-.055em;
  font-size:clamp(1.42rem,2vw,1.82rem);
  line-height:1;
}

/* Hero El Menú */
.menu-video-section{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:clamp(110px,12vh,160px);
  padding-bottom:clamp(56px,8vh,90px);
  overflow:hidden;
  isolation:isolate;
  background:var(--cream);
}

.menu-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:
    url("/assets/img/menu-hero-poster.webp") center center/cover no-repeat,
    var(--cream);
}

.menu-hero-media video,
.menu-hero-media .menu-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  opacity:.92;
  filter:saturate(.94) contrast(.96) brightness(1) blur(.25px);
}

.menu-video-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(246,241,232,.22) 0%,
    rgba(246,241,232,.08) 42%,
    rgba(246,241,232,.16) 100%
  );
}

.menu-hero-overlay,
.menu-hero-notes,
.menu-note,
.el-menu-hero-notes,
.el-menu-note{
  display:none !important;
}

.menu-hero-grid{
  position:relative;
  z-index:2;
  width:min(100% - 72px,1320px);
  min-height:calc(100vh - 170px);
  min-height:calc(100svh - 170px);
  display:grid;
  grid-template-columns:minmax(0,.98fr) minmax(360px,.82fr);
  gap:clamp(42px,6vw,92px);
  align-items:center;
  justify-content:space-between;
  margin:auto;
}

.menu-hero-copy{
  width:100%;
  max-width:790px;
  display:grid;
  gap:26px;
  text-align:left;
  align-items:start;
  justify-items:start;
  position:relative;
  z-index:2;
  text-shadow:
    0 2px 20px rgba(246,241,232,.86),
    0 0 44px rgba(246,241,232,.70);
}

.menu-hero-copy h1{
  max-width:790px;
}

.menu-hero-copy .lead{
  max-width:700px;
}

.menu-hero-copy .btn,
.menu-hero-copy .hero-actions a{
  text-shadow:none;
}

.menu-hero-visual-space{
  display:block;
  width:100%;
  min-height:600px;
  justify-self:end;
  pointer-events:none;
}

/* Manifiesto */
.el-menu-manifest{
  padding:clamp(78px,10vw,150px) 0;
  background:var(--paper);
  border-block:1px solid var(--border);
}

.el-menu-manifest-inner{
  max-width:1040px;
}

.el-menu-manifest h2{
  font-size:clamp(2.5rem,6vw,6rem);
  line-height:1.03;
}

.el-menu-manifest p{
  margin:30px 0 0;
  font-size:clamp(1.15rem,2vw,1.55rem);
  color:var(--soft);
  max-width:780px;
}

/* Servicios con vídeo de fondo */
.menu-services-video-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--cream);
  padding:clamp(90px,10vw,150px) 0;
  min-height:100vh;
  display:flex;
  align-items:center;
}

.menu-services-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  background:
    url("/assets/img/servicios-menu-poster.webp") center center/cover no-repeat,
    var(--cream);
}

.menu-services-bg video,
.menu-services-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  opacity:1;
  filter:saturate(1.08) contrast(1.06) brightness(.98);
}

/* Veladura más ligera para que el vídeo se aprecie en todo el fondo */
.menu-services-video-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(246,241,232,.44) 0%,
      rgba(246,241,232,.28) 44%,
      rgba(246,241,232,.48) 100%
    ),
    linear-gradient(
      90deg,
      rgba(246,241,232,.48) 0%,
      rgba(246,241,232,.20) 50%,
      rgba(246,241,232,.42) 100%
    );
}

.menu-services-content{
  position:relative;
  z-index:2;
}

.menu-services-video-section .section-header{
  margin-bottom:clamp(34px,5vw,54px);
}

.menu-services-video-section h2{
  max-width:780px;
}

.menu-services-video-section .lead{
  max-width:520px;
  font-size:clamp(1.05rem,1.3vw,1.28rem);
  line-height:1.5;
}

.menu-services-video-section h2,
.menu-services-video-section .lead{
  text-shadow:
    0 2px 18px rgba(246,241,232,.78),
    0 0 36px rgba(246,241,232,.62);
}

/* 4 columnas en escritorio, 2 en tablet, 1 en móvil */
.menu-services-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
}

.el-menu-page .menu-services-grid .card{
  min-height:300px !important;
  padding:30px 30px 26px !important;
  border-radius:28px !important;
  background:rgba(255,253,247,.88) !important;
  border:1px solid rgba(255,253,247,.62) !important;
  backdrop-filter:blur(10px) saturate(1.02) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.02) !important;
  box-shadow:0 18px 44px rgba(31,42,36,.10) !important;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease !important;
}

.el-menu-page .menu-services-grid .card:hover{
  transform:translateY(-5px) !important;
  background:rgba(255,253,247,.96) !important;
  box-shadow:0 24px 54px rgba(31,42,36,.14) !important;
}

.el-menu-page .menu-services-grid .card h3{
  font-family:var(--font-serif);
  font-size:clamp(1.65rem,2.2vw,2.45rem);
  line-height:1.02;
}

/* Método Salero */
.el-menu-method{
  padding:clamp(78px,10vw,140px) 0;
  background:var(--olive-dark);
  color:var(--paper);
}

.el-menu-method-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(360px,1fr);
  gap:clamp(42px,7vw,86px);
  align-items:start;
}

.el-menu-method .eyebrow{
  color:var(--lime);
}

.el-menu-method .eyebrow::before{
  background:var(--albero);
}

.el-menu-method h2{
  color:var(--paper);
}

.el-menu-method p{
  color:rgba(255,253,247,.78);
  font-size:1.08rem;
}

.el-menu-method-steps{
  display:grid;
  gap:14px;
}

.el-menu-method-steps article{
  padding:24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(255,253,247,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.el-menu-method-steps span{
  display:block;
  margin-bottom:10px;
  color:var(--albero);
  font-weight:900;
  letter-spacing:.07em;
  font-size:.78rem;
}

.el-menu-method-steps h3{
  color:var(--paper);
  font-family:var(--font-serif);
  font-size:clamp(1.7rem,2.8vw,2.6rem);
}

.el-menu-method-steps p{
  margin:12px 0 0;
}

/* Confianza */
.el-menu-trust{
  background:var(--paper);
}

.el-menu-trust-card{
  padding:clamp(42px,7vw,82px);
  border-radius:44px;
  background:var(--cream2);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.el-menu-trust-card p{
  max-width:760px;
  color:var(--soft);
  font-size:clamp(1.08rem,2vw,1.34rem);
}

.el-menu-trust-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:34px;
}

.el-menu-trust-list span{
  display:block;
  padding:18px;
  border-radius:18px;
  background:rgba(102,117,72,.10);
  color:var(--olive-dark);
  font-weight:900;
}

/* Optimización de render */
@supports (content-visibility:auto){
  .el-menu-manifest,
  .menu-services-video-section,
  .el-menu-method,
  .el-menu-trust,
  .el-menu-page .cata-section{
    content-visibility:auto;
    contain-intrinsic-size:1px 820px;
  }
}

/* Responsive */
@media(max-width:1180px){
  .menu-services-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:1120px){
  .menu-hero-grid,
  .el-menu-method-grid{
    grid-template-columns:1fr;
  }

  .menu-hero-grid{
    width:min(100% - 36px,820px);
  }

  .menu-hero-visual-space{
    display:none;
  }

  .el-menu-trust-list{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:880px){
  .menu-video-section{
    padding-top:105px;
    padding-bottom:56px;
  }

  .menu-hero-grid{
    min-height:calc(100svh - 150px);
  }

  .menu-hero-media video,
  .menu-hero-media .menu-bg-video,
  .menu-services-bg video,
  .menu-services-video{
    display:none;
  }

  .menu-services-video-section{
    min-height:auto;
  }

  .menu-services-video-section::after{
    background:rgba(246,241,232,.76);
  }

  .el-menu-page .menu-services-grid .card{
    background:rgba(255,253,247,.92) !important;
  }
}

@media(max-width:680px){
  .menu-hero-grid{
    width:min(100% - 28px,720px);
  }

  .menu-video-section::after{
    background:rgba(246,241,232,.24);
  }

  .menu-services-grid,
  .el-menu-trust-list{
    grid-template-columns:1fr !important;
  }

  .el-menu-page .menu-services-grid .card{
    min-height:auto !important;
  }

  .el-menu-trust-card{
    border-radius:30px;
  }
}

@media(prefers-reduced-motion:reduce){
  .menu-hero-media video,
  .menu-services-bg video,
  .menu-services-video{
    display:none;
  }

  .el-menu-page .menu-services-grid .card{
    transition:none !important;
  }
}

/* Botones CTA en fichas de servicios El Menú - v46 */
.menu-services-grid .card{
  display:flex !important;
  flex-direction:column !important;
}

.menu-services-grid .card a[href]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:58px !important;
  margin-top:auto !important;
  padding:17px 24px !important;
  border-radius:999px !important;
  background:var(--ink) !important;
  color:var(--paper) !important;
  font-family:var(--font-sans) !important;
  font-size:.98rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
  text-shadow:none !important;
  box-shadow:0 16px 34px rgba(31,42,36,.14) !important;
  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease !important;
}

.menu-services-grid .card a[href]::after{
  content:"→";
  display:inline-block;
  margin-left:10px;
  font-size:1.05em;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .22s ease;
}

.menu-services-grid .card a[href]:hover,
.menu-services-grid .card a[href]:focus-visible{
  background:#0f1712 !important;
  color:var(--lime) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 22px 48px rgba(31,42,36,.20) !important;
  outline:none !important;
}

.menu-services-grid .card a[href]:hover::after,
.menu-services-grid .card a[href]:focus-visible::after{
  transform:translate(4px,-1px);
}

.menu-services-grid .card p{
  margin-bottom:30px !important;
}

@media(max-width:680px){
  .menu-services-grid .card a[href]{
    min-height:56px !important;
    font-size:.96rem !important;
  }
}