/* ════════════════════════════════════════════════════════════
   SERVICIOS v3 · CSS luxury — totalmente visible, responsive
   Reemplaza el rail 3D problemático. Cards con imagen + label + precio.
   ════════════════════════════════════════════════════════════ */

.svc3-chapter { position: relative; margin-top: clamp(3.5rem, 8vw, 7rem); }
.svc3-chapter:first-of-type { margin-top: clamp(1.5rem, 4vw, 3rem); }

/* — Cabecera de capítulo — */
.svc3-head { display: flex; align-items: flex-start; gap: clamp(0.9rem, 2.5vw, 2rem); margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.svc3-num {
  font-family: 'Italiana', serif; font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 0.8; color: var(--gold-dark, #9A7B36); opacity: 0.32; flex-shrink: 0;
}
.svc3-num--gold { color: var(--gold, #C9A24E); opacity: 0.55; }
.svc3-kicker { display: block; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-dark, #9A7B36); margin-bottom: 0.6rem; }
.svc3-kicker--gold { color: var(--gold-light, #ECD7A4); }
.svc3-title { font-family: 'Italiana', serif; font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.02; color: var(--cherry, #7A0712); margin: 0; }
.svc3-title em { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold-dark, #9A7B36); }
.svc3-title--light { color: var(--cream, #FCFBF9); }
.svc3-title--light em { color: var(--gold-light, #ECD7A4); }
.svc3-lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1rem, 2.2vw, 1.4rem); color: var(--ink, #45070C); opacity: 0.7; margin: 0.6rem 0 0; }
.svc3-lead--light { color: var(--cream, #FCFBF9); opacity: 0.78; }

/* Capítulo oscuro (Lami) */
.svc3-chapter--dark {
  background: var(--grad-wine, linear-gradient(155deg,#8E0A14,#861F18 52%,#4E0610));
  border-radius: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
}

/* — Grids — */
.svc3-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.svc3-grid--4 { grid-template-columns: repeat(4, 1fr); }
.svc3-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* — Card de servicio — */
.svc3-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ivory-soft, #FCFBF9); border: 1px solid var(--line, rgba(92,7,16,0.1));
  border-radius: clamp(1rem, 1.8vw, 1.4rem); overflow: hidden; text-decoration: none;
  box-shadow: 0 10px 30px rgba(92,7,16,0.07);
  transition: transform 0.55s var(--j-overshoot, cubic-bezier(0.34,1.56,0.36,1)), box-shadow 0.55s ease, border-color 0.4s ease;
}
.svc3-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(92,7,16,0.18); border-color: var(--gold, #C9A24E); }
.svc3-card--feat { border-color: var(--gold, #C9A24E); box-shadow: 0 16px 44px rgba(197,163,90,0.2); }
.svc3-card--dark { background: rgba(251,247,240,0.06); border-color: rgba(230,211,160,0.22); }
.svc3-card--dark:hover { border-color: var(--gold, #C9A24E); box-shadow: 0 30px 70px rgba(0,0,0,0.4); }

.svc3-card-media { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.svc3-card-media--wide { aspect-ratio: 16/11; }
.svc3-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--j-slowdown, cubic-bezier(0.16,1,0.3,1)); }
.svc3-card:hover .svc3-card-media img { transform: scale(1.06); }
.svc3-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(74,10,10,0.4), transparent 50%); opacity: 0.7; }
.svc3-card-num {
  position: absolute; top: 12px; left: 14px; z-index: 3;
  font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--cream, #FCFBF9);
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.svc3-card-badge {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 0.45em 0.85em; border-radius: 999px; background: var(--gold, #C9A24E); color: var(--cherry, #7A0712);
}
.svc3-card-body { padding: clamp(1rem, 2vw, 1.4rem); display: flex; flex-direction: column; flex: 1; }
.svc3-card-toprow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.svc3-card-name { font-family: 'Italiana', serif; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--cherry, #7A0712); margin: 0; line-height: 1.1; }
.svc3-card-name--light { color: var(--cream, #FCFBF9); }
.svc3-card-price { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--wine, #861F18); white-space: nowrap; }
.svc3-card-price--gold { color: var(--gold-light, #ECD7A4); }
.svc3-card-tag { display: inline-block; width: fit-content; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark, #9A7B36); margin: 0.5rem 0; }
.svc3-card-tag--gold { color: var(--gold-light, #ECD7A4); }
.svc3-card-desc { font-size: 0.88rem; line-height: 1.55; color: var(--ink, #45070C); opacity: 0.7; margin: 0 0 1rem; }
.svc3-card-desc--light { color: var(--cream, #FCFBF9); opacity: 0.75; }
.svc3-card-link { margin-top: auto; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--wine, #861F18); transition: letter-spacing 0.3s ease; }
.svc3-card-link--gold { color: var(--gold-light, #ECD7A4); }
.svc3-card:hover .svc3-card-link { letter-spacing: 0.22em; }

/* — Invitación al diagnóstico — */
.svc3-diag-hint {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(120deg, rgba(197,163,90,0.08), rgba(134,31,24,0.05));
  border: 1px solid rgba(197,163,90,0.25); border-radius: 1.25rem; text-align: center;
}
.svc3-diag-spark { font-size: 1.5rem; color: var(--gold, #C9A24E); }
.svc3-diag-hint p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1rem, 2.2vw, 1.3rem); color: var(--cherry, #7A0712); margin: 0; flex: 1; min-width: 220px; }
.svc3-diag-btn {
  display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 0.9em 1.6em; border-radius: 999px;
  background: var(--wine-deep, #4E0610); color: var(--cream, #FCFBF9); text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.svc3-diag-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(92,7,16,0.3); }

/* — Cejas: lista + visual — */
.svc3-cejas-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; }
.svc3-list { display: flex; flex-direction: column; gap: 0.9rem; }
.svc3-row {
  display: flex; align-items: center; gap: 1.1rem; padding: 0.9rem 1.1rem;
  background: var(--ivory-soft, #FCFBF9); border: 1px solid var(--line, rgba(92,7,16,0.1));
  border-radius: 1.1rem; text-decoration: none;
  transition: transform 0.4s var(--j-slowdown, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.4s ease, border-color 0.3s ease;
}
.svc3-row:hover { transform: translateX(6px); box-shadow: 0 14px 36px rgba(92,7,16,0.1); border-color: var(--gold, #C9A24E); }
.svc3-row-media { width: 72px; height: 72px; border-radius: 0.9rem; overflow: hidden; flex-shrink: 0; }
.svc3-row-media img { width: 100%; height: 100%; object-fit: cover; }
.svc3-row-media--icon { background: var(--grad-gold, linear-gradient(120deg,#9A7B36,#C9A24E,#ECD7A4)); display: grid; place-items: center; color: var(--cherry, #7A0712); font-size: 1.5rem; }
.svc3-row-body { flex: 1; min-width: 0; }
.svc3-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.svc3-row-name { font-family: 'Italiana', serif; font-size: 1.3rem; color: var(--cherry, #7A0712); }
.svc3-row-price { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--wine, #861F18); white-space: nowrap; }
.svc3-row-dur { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark, #9A7B36); margin: 0.2rem 0 0.35rem; }
.svc3-row-desc { font-size: 0.85rem; color: var(--ink, #45070C); opacity: 0.66; margin: 0; line-height: 1.45; }
.svc3-row-arrow { font-size: 1.2rem; color: var(--gold-dark, #9A7B36); flex-shrink: 0; transition: transform 0.3s ease; }
.svc3-row:hover .svc3-row-arrow { transform: translateX(4px); }

.svc3-cejas-visual { position: relative; border-radius: 1.4rem; overflow: hidden; min-height: 300px; }
.svc3-cejas-visual img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.svc3-cejas-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; background: linear-gradient(to top, rgba(74,10,10,0.85), transparent 60%); }
.svc3-cejas-eyebrow { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-light, #ECD7A4); margin-bottom: 0.6rem; }
.svc3-cejas-quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem; color: var(--cream, #FCFBF9); margin: 0; line-height: 1.3; }

/* — Depilación — */
.svc3-depil { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; }
.svc3-depil-visual { position: relative; border-radius: 1.4rem; overflow: hidden; min-height: 320px; }
.svc3-depil-visual img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; transition: transform 0.9s var(--j-slowdown, cubic-bezier(0.16,1,0.3,1)); }
.svc3-depil-visual:hover img { transform: scale(1.05); }
.svc3-depil-tagline { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream, #FCFBF9); background: rgba(74,10,10,0.6); padding: 0.5em 1em; border-radius: 999px; backdrop-filter: blur(6px); }
.svc3-depil-list { display: flex; flex-direction: column; gap: 0.85rem; justify-content: center; }
.svc3-depil-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; background: var(--ivory-soft, #FCFBF9);
  border: 1px solid var(--line, rgba(92,7,16,0.1)); border-radius: 1rem; text-decoration: none;
  transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.35s ease;
}
.svc3-depil-row:hover { transform: translateX(5px); border-color: var(--gold, #C9A24E); box-shadow: 0 12px 30px rgba(92,7,16,0.08); }
.svc3-depil-name { display: block; font-family: 'Italiana', serif; font-size: 1.25rem; color: var(--cherry, #7A0712); }
.svc3-depil-meta { display: block; font-size: 0.72rem; color: var(--ink, #45070C); opacity: 0.6; margin-top: 2px; }
.svc3-depil-price { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--wine, #861F18); white-space: nowrap; }
.svc3-depil-note { font-size: 0.82rem; font-style: italic; color: var(--ink, #45070C); opacity: 0.6; margin: 0.5rem 0 0; }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 1000px) {
  .svc3-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .svc3-cejas-grid { grid-template-columns: 1fr; }
  .svc3-depil { grid-template-columns: 1fr; }
  .svc3-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .svc3-grid--4 { grid-template-columns: 1fr; }
  .svc3-head { flex-direction: column; gap: 0.4rem; }
  .svc3-card-media { aspect-ratio: 4/3; }
  .svc3-diag-hint { flex-direction: column; }
}

/* ===== v4: fix Cejas visual height + Depilación sin imagen ===== */
/* La foto de Cejas debe quedar EXACTA a la altura de la lista (no exceder) */
.svc3-cejas-grid { align-items: stretch; }
.svc3-cejas-visual { position: relative; min-height: 0; height: 100%; align-self: stretch; }
.svc3-cejas-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
@media (max-width: 860px) {
  .svc3-cejas-visual { min-height: 320px; }
}

/* Depilación rediseñada — sin imagen, lista numerada luxury */
.depil2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .depil2 { grid-template-columns: 1fr; gap: 1.75rem; } }
.depil2-intro { }
.depil2-badge {
  display: inline-block; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-dark, #9A7B36); padding: 0.5em 1.1em; border-radius: 999px;
  border: 1px solid rgba(197,163,90,0.4); margin-bottom: 1.1rem;
}
.depil2-lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.5; color: var(--cherry, #7A0712); margin: 0; }
.depil2-rows { display: flex; flex-direction: column; }
.depil2-row {
  display: flex; align-items: center; gap: 1.25rem; padding: 1.35rem 0.5rem; text-decoration: none;
  border-bottom: 1px solid var(--line, rgba(92,7,16,0.12));
  transition: padding-left 0.4s cubic-bezier(0.16,1,0.3,1), background 0.3s;
}
.depil2-row:first-child { border-top: 1px solid var(--line, rgba(92,7,16,0.12)); }
.depil2-row:hover { padding-left: 1.1rem; background: linear-gradient(90deg, rgba(197,163,90,0.08), transparent); }
.depil2-row-n { font-family: 'Italiana', serif; font-size: 1.5rem; color: var(--gold, #C9A24E); opacity: 0.5; width: 2rem; flex-shrink: 0; }
.depil2-row-body { flex: 1; min-width: 0; }
.depil2-row-name { display: block; font-family: 'Italiana', serif; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--cherry, #7A0712); line-height: 1.1; }
.depil2-row-meta { display: block; font-size: 0.78rem; color: var(--ink, #45070C); opacity: 0.6; margin-top: 0.25rem; }
.depil2-row-price { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--wine, #861F18); white-space: nowrap; }
.depil2-row-arrow { font-size: 1.2rem; color: var(--gold-dark, #9A7B36); flex-shrink: 0; transition: transform 0.3s ease; }
.depil2-row:hover .depil2-row-arrow { transform: translateX(5px); }

/* ════════════════════════════════════════════════════════════
   CAUSA RAÍZ · VISIBILIDAD DE IMÁGENES DE SERVICIOS
   ────────────────────────────────────────────────────────────
   Las cards de servicios usan la clase .reveal, que arranca en
   opacity:0 y solo pasa a opacity:1 cuando un IntersectionObserver
   les añade .in. Cuando ese observer no dispara (sección dentro de
   un contexto hyperframe/transform, exclusiones, timing en mobile),
   las cards — y por tanto sus imágenes — se quedaban invisibles de
   forma permanente. Era el origen reincidente del "no se ven las
   imágenes de servicios".

   Solución de raíz (no parche): la VISIBILIDAD de las secciones de
   servicios no debe depender de la animación de scroll. Aquí se
   garantiza que todo dentro de #servicios y de los capítulos svc3
   esté siempre visible. El efecto de entrada se conserva en el
   resto del sitio; aquí simplemente no es condición para ver la foto.
   ════════════════════════════════════════════════════════════ */
#servicios .reveal,
#servicios [data-reveal],
.svc3-chapter .reveal,
.svc3-chapter [data-reveal],
.lashrail .reveal,
.lashrail [data-reveal]{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* refuerzo directo sobre los contenedores de imagen y sus <img> */
#servicios .svc3-card-media img,
#servicios .svc3-row-media img,
#servicios .srv-x-ext-media img,
#servicios .srv-x-lami-feat-media img,
#servicios .srv-x-list-thumb img,
.lashrail .lashrail-card img,
.svc3-card-media img,
.svc3-row-media img{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ════════════════════════════════════════════════════════════
   CAUSA RAÍZ REAL · clip-path "hf-image-mask" en imágenes de servicios
   ────────────────────────────────────────────────────────────
   El orquestador "hyperframe" (FASE 2) añade .hf-image-mask a TODAS
   las <img> de cada section[id]. Esa clase arranca con
   clip-path: inset(0 100% 0 0) — recorta el 100% del ancho = imagen
   totalmente oculta — y solo se revela cuando la sección recibe
   .hf-active vía IntersectionObserver (threshold 0.12 + rootMargin
   -10%). En la sección #servicios, que es MUY alta, ese 12% rara vez
   queda visible de una sola vez en mobile, así que el observer puede
   no disparar nunca → las imágenes de servicios quedaban recortadas
   de forma permanente. Esta era la causa real y reincidente.

   Solución de raíz: dentro de los capítulos/sección de servicios la
   imagen NO debe depender del reveal por clip-path. Se neutraliza el
   recorte y se deja la imagen siempre completa. El efecto cortina se
   conserva en el resto del sitio.
   ════════════════════════════════════════════════════════════ */
#servicios img.hf-image-mask,
.svc3-chapter img.hf-image-mask,
.lashrail img.hf-image-mask,
#servicios .hf-image-mask,
.svc3-chapter .hf-image-mask,
.lashrail .hf-image-mask{
  clip-path: inset(0 0 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0) !important;
}