/* ZENS home page sections (loaded on front page). Images are siblings in this dir. */
:root { --vino: oklch(50% 0.125 26); --vino-bright: oklch(62% 0.16 26); }

/* base helpers */
.zhome .wrap { max-width: 1180px; margin: 0 auto; padding-inline: 40px; }
.zhome .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-serif); font-size: 15.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 15px 32px; border-radius: var(--r-pill); cursor: pointer; border: 1px solid transparent; transition: all .45s var(--ease); white-space: nowrap; text-align: center; text-decoration: none; }
.zhome .btn-solid { background: var(--zns-maroon); color: var(--zns-cream); border-color: var(--zns-maroon); }
.zhome .btn-light { background: var(--zns-cream); color: var(--zns-maroon); border-color: var(--zns-cream); }
.zhome .btn-light:hover { background: var(--zns-red); color: var(--zns-cream); border-color: var(--zns-red); }
.zhome .overline { font-family: var(--font-serif); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .34em; color: var(--fg-muted); margin: 0; }
.zhome .overline.on-dark { color: var(--zns-taupe); }
.zhome .link-arrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 15.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--zns-maroon); cursor: pointer; transition: gap .45s var(--ease), background .45s var(--ease), color .45s var(--ease); white-space: nowrap; padding: 9px 16px; margin: -9px -16px; border-radius: var(--r-pill); text-decoration: none; }
.zhome .link-arrow .lucide { width: 16px; height: 16px; }
.zhome .link-arrow:hover { gap: 14px; background: var(--zns-maroon); color: var(--zns-cream); }
.zhome .ph-img { background-size: cover; background-position: center; background-color: var(--zns-cream-dim); }

/* 1 HERO */
.home-hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; color: var(--zns-cream); }

.home-hero-inner { position: relative; z-index: 2; padding-bottom: clamp(80px, 13vh, 140px); max-width: 880px; padding-inline: 24px; }
.hero-mark { height: clamp(150px, 20vw, 270px); margin: 0 auto 18px; filter: brightness(0) invert(1) drop-shadow(0 4px 30px rgba(20,6,6,.35)); }
.hero-attitude { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 4.2vw, 3.1rem); margin: 0 0 32px; letter-spacing: .01em; line-height: 1.05; color: var(--zns-cream); }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-hero { background: rgba(40,14,14,.66); color: var(--zns-cream); border: 1px solid rgba(241,236,229,.34); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 16px 38px; }
.btn-hero:hover { background: var(--vino); border-color: var(--vino); }

/* 2 QUE ES ZENS */
.zq { position: relative; color: var(--zns-cream); overflow: hidden; background: #120808; }
.zq-split { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch; min-height: clamp(540px, 66vh, 700px); }
.zq-text { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; padding: clamp(72px, 8.5vw, 116px) clamp(34px, 5.5vw, 84px); }
.zq h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--zns-cream); margin: 0 0 24px; letter-spacing: .005em; line-height: 1.12; text-align: left; max-width: 16ch; }
.zq h2 em { font-style: italic; color: var(--zns-red); }
.zq-copy { font-family: var(--font-serif); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.85; color: rgba(241,236,229,.82); margin: 0 auto 40px; max-width: 46ch; }
.zq .btn-light:hover { background: var(--vino); border-color: var(--vino); color: var(--zns-cream); }
.zq-photo { position: relative; background-size: cover; background-position: center 35%; min-height: 320px; }
.zq-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #120808 0%, rgba(18,8,8,.4) 15%, transparent 44%); }
@media (max-width: 940px) { .zq-split { grid-template-columns: 1fr; } .zq-photo { min-height: 300px; } .zq-photo::after { background: linear-gradient(0deg, transparent 55%, #120808); } }

/* 3 FILOSOFIA */
.phil { position: relative; background: var(--bg-canvas); padding: clamp(84px, 10vw, 136px) 0; overflow: hidden; }
.phil-head { position: relative; z-index: 1; text-align: center; margin: 0 auto clamp(34px, 4.4vw, 54px); }
.phil h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 4.6vw, 3.6rem); color: var(--zns-maroon); margin: 0; letter-spacing: .01em; line-height: 1.05; }
.phil-rule { position: relative; z-index: 1; height: 1px; background: var(--zns-line); border: none; margin: 0 0 clamp(38px, 4.8vw, 62px); }
.phil-cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); }
.phil-col { padding: 6px clamp(22px, 3.4vw, 54px); text-align: center; }
.phil-col + .phil-col { border-left: 1px solid var(--zns-line); }
.phil-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(15px, 1.4vw, 18px); letter-spacing: .42em; color: var(--zns-taupe); margin: 0 0 18px; text-indent: .42em; }
.phil-col h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 31px); color: var(--zns-maroon); margin: 0 0 18px; letter-spacing: .01em; line-height: 1.1; }
.phil-col p { font-family: var(--font-body); font-size: 17px; line-height: 1.78; color: var(--fg-muted); margin: 0; }
.phil-wm { position: absolute; left: -54px; bottom: -76px; height: clamp(220px, 26vw, 330px); opacity: .05; pointer-events: none; z-index: 0; }
@media (max-width: 840px) { .phil-cols { grid-template-columns: 1fr; gap: 8px; } .phil-col + .phil-col { border-left: none; border-top: 1px solid var(--zns-line); padding-top: clamp(26px,5vw,36px); margin-top: clamp(10px,3vw,22px); } }

/* 4 CATEGORIAS */
.cats { background: var(--bg-canvas); padding: clamp(60px, 8vw, 104px) 0; }
.cats h2 { text-align: center; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--zns-maroon); margin: 0 0 clamp(34px, 4.6vw, 56px); letter-spacing: .01em; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.cat-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; border-radius: var(--r-lg); overflow: hidden; color: var(--zns-cream); padding: 36px; cursor: pointer; text-decoration: none; }
.cat-card .ph-img { position: absolute; inset: 0; z-index: 0; transition: transform 1.2s var(--ease); }
.cat-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(40,14,14,.15) 0%, rgba(40,14,14,.78) 100%); }
.cat-card:hover .ph-img { transform: scale(1.05); }
.cat-card .cat-inner { position: relative; z-index: 2; }
.cat-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 37px; margin: 0 0 10px; color: var(--zns-cream); }
.cat-more { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--zns-cream); transition: gap var(--ease); }
.cat-more .lucide { width: 16px; height: 16px; }
.cat-card:hover .cat-more { gap: 15px; }

/* 5 BLOG */
.blog { padding: clamp(66px, 8vw, 108px) 0; }
.blog h2 { text-align: center; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--zns-maroon); margin: 0 0 clamp(40px, 5.5vw, 64px); letter-spacing: .07em; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.2vw, 44px); }
.blog-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--zns-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-card .bc-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.blog-card .bc-img { position: relative; display: block; aspect-ratio: 5 / 6; overflow: hidden; background: var(--zns-cream-dim); }
.blog-card .bc-img .ph-img { width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.blog-card:hover .bc-img .ph-img { transform: scale(1.05); }
.blog-card .bc-num { position: absolute; top: 16px; left: 18px; z-index: 2; font-family: var(--font-serif); font-size: 13px; letter-spacing: .2em; color: var(--zns-cream); text-shadow: 0 1px 6px rgba(40,14,14,.5); }
.blog-card h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.6vw, 31px); color: var(--zns-maroon); margin: 0 0 13px; letter-spacing: .01em; line-height: 1.12; }
.blog-card .bc-ex { font-family: var(--font-body); font-size: 18px; line-height: 1.72; color: var(--fg-muted); margin: 0 0 22px; }
.blog-card .link-arrow { margin-top: auto; }

/* 6 LOCAL */
.local { background: var(--bg-canvas); padding: 0 0 clamp(66px, 8vw, 108px); }
.local h2 { text-align: center; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--zns-maroon); margin: 0 0 16px; letter-spacing: .01em; }
.local .lead-sub { text-align: center; font-family: var(--font-body); font-size: 17.5px; color: var(--fg-muted); max-width: 52ch; margin: 0 auto clamp(36px, 5vw, 54px); }
.local-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 215px); gap: 14px; }
.local-grid > div { border-radius: var(--r-md); background-size: cover; background-position: center; overflow: hidden; }
.lg-a { grid-column: 1 / 3; grid-row: 1 / 3; }
.lg-b { grid-column: 3 / 4; grid-row: 1 / 2; }
.lg-c { grid-column: 4 / 5; grid-row: 1 / 2; }
.lg-d { grid-column: 3 / 5; grid-row: 2 / 3; }

/* 7 FOLLOW */
.follow { background: var(--zns-maroon); color: var(--zns-cream); padding: clamp(68px, 9vw, 118px) 0; }
.follow-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.follow-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: var(--zns-cream); margin: 0 0 22px; letter-spacing: .005em; line-height: 1.04; }
.follow-copy { font-family: var(--font-serif); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: rgba(241,236,229,.8); margin: 0 0 36px; max-width: 46ch; }
.follow-links { display: flex; flex-direction: column; border-top: 1px solid var(--zns-line-dark); }
.follow-link { display: flex; align-items: center; gap: 18px; padding: 17px 6px; border-bottom: 1px solid var(--zns-line-dark); transition: padding-left .45s var(--ease); text-decoration: none; }
.follow-link:hover { padding-left: 14px; }
.fl-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--zns-line-dark); display: flex; align-items: center; justify-content: center; flex: none; color: var(--zns-cream); transition: all .45s var(--ease); }
.fl-icon svg { width: 18px; height: 18px; display: block; }
.follow-link:hover .fl-icon { background: var(--zns-cream); color: var(--zns-maroon); border-color: var(--zns-cream); }
.fl-text { display: flex; flex-direction: column; flex: 1; gap: 1px; }
.fl-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .03em; color: var(--zns-cream); }
.fl-handle { font-family: var(--font-body); font-size: 14.5px; color: rgba(241,236,229,.58); }
.fl-arrow { width: 18px; height: 18px; flex: none; color: rgba(241,236,229,.5); transition: transform .45s var(--ease), color .45s var(--ease); }
.follow-link:hover .fl-arrow { color: var(--zns-cream); transform: translate(3px, -3px); }
.follow-collage { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(140px, 16vw, 196px); gap: 14px; }
.follow-collage > div { border-radius: var(--r-md); background-size: cover; background-position: center; overflow: hidden; }
.fc-1 { grid-column: 1; grid-row: 1 / 3; }
.fc-2 { grid-column: 2; grid-row: 1; }
.fc-3 { grid-column: 2; grid-row: 2; }
.fc-4 { grid-column: 1 / 3; grid-row: 3; }
@media (max-width: 980px) { .follow-grid { grid-template-columns: 1fr; gap: 48px; } .blog-grid { grid-template-columns: 1fr; gap: 44px; } .local-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; } .lg-a{grid-column:1/3;grid-row:1/2;} .lg-b{grid-column:1/2;grid-row:2/3;} .lg-c{grid-column:2/3;grid-row:2/3;} .lg-d{grid-column:1/3;grid-row:3/4;} }

/* 8 CTA */
.cta-ritual { position: relative; min-height: clamp(560px, 82vh, 820px); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--zns-cream); overflow: hidden; padding-bottom: clamp(90px, 11vw, 170px); background: url("grid/woman-back.png") center 30%/cover no-repeat; }
.cta-ritual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,8,8,.20) 0%, rgba(20,8,8,.10) 40%, rgba(20,8,8,.30) 70%, rgba(20,8,8,.66) 100%); }
.cta-inner { position: relative; z-index: 2; padding-inline: 24px; padding-top: clamp(90px, 14vh, 160px); max-width: 720px; }
.cta-inner h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 5.2vw, 4rem); margin: 0 0 18px; letter-spacing: -.005em; color: var(--zns-cream); text-shadow: 0 2px 24px rgba(20,6,6,.45); }
.cta-inner p { color: var(--zns-cream); font-size: clamp(15px, 1.8vw, 18px); margin: 0 auto 34px; max-width: 46ch; text-shadow: 0 1px 14px rgba(20,6,6,.5); }

/* glass en botones del hero (decisión de diseño original) */
.home-hero .elementor-button { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* carrusel Nuestro Espacio: recorte uniforme */
.local .elementor-image-carousel img { height: 420px; object-fit: cover; border-radius: 14px; width: 100%; }
.local .elementor-swiper-button { color: #4C1D1D; background: rgba(241,236,229,.85); border-radius: 999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.local .elementor-swiper-button svg { width: 16px; height: 16px; fill: #4C1D1D; }
@media (max-width: 767px){ .local .elementor-image-carousel img { height: 320px; } }


/* collage Siguenos: disposicion asimetrica del widget Galeria basica */
.zens-collage .gallery { display:grid !important; grid-template-columns:1fr 1fr; grid-auto-rows:190px; gap:14px; margin:0; }
.zens-collage .gallery br { display:none !important; }
.zens-collage .gallery-item { margin:0 !important; padding:0 !important; width:100% !important; max-width:100% !important; height:100%; overflow:hidden; border-radius:12px; }
.zens-collage .gallery-item .gallery-icon, .zens-collage .gallery-item dt, .zens-collage .gallery-item a { display:block; height:100%; width:100%; }
.zens-collage .gallery-item img { width:100% !important; height:100% !important; object-fit:cover; display:block; border:none !important; border-radius:12px; }
.zens-collage .gallery-item:nth-of-type(1){ grid-row:span 2; }
.zens-collage .gallery-item:nth-of-type(4){ grid-column:span 2; }

/* hero movil: Elementor ignora la alineacion del item de boton (bug del contenedor);
   se centra el pill DENTRO del widget a lo ancho. Estilo cristal intacto. */
@media (max-width: 767px) {
  .home-hero .elementor-widget-button { width: 100% !important; }
  .home-hero .elementor-widget-button .elementor-button-wrapper { display: flex; justify-content: center; }
}

/* cita en movil: la foto del masaje pasa a ser el fondo de TODA la seccion,
   con velo oscuro para que el texto respire (la banda de foto separada se oculta nativamente) */
@media (max-width: 767px) {
  .zq { background: #120808 url('https://testnico23.com/wp-content/uploads/zens/assets/grid/massage.png') center 30% / cover no-repeat; }
  .zq::before { content: ''; position: absolute; inset: 0; background: rgba(12,5,5,.66); }
  .zq > * { position: relative; z-index: 2; }
}