/* Fix global táctil — iOS y Android */
a, button, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Fix overflow iOS que bloquea eventos */
body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.nav-mobile-container { /* o la clase que uses */
    display: none; 
}
.nav-mobile-container.is-active {
    display: block;
}


/* Forzar que todos los botones e interacciones estén al frente */
a, button, .btn-global-hero, .btn-editorial-luxury, .btn-global-destacado {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Si tienes un overlay de video, asegúrate que no estorbe */
.video-overlay, .video-container {
    pointer-events: none !important;
    z-index: 1 !important;
}
/* Fix específico botones hero y editorial */
a, button, .btn-global-hero, .btn-editorial-luxury, 
.btn-global-destacado, .btn-global-marron, .btn-global-blanco {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer !important;
}

/* Botón WhatsApp igual a los marrones globales */
.btn-wa-aruma {
  display: inline-block;
  background: var(--oro);
  color: var(--blanco-puro);
  border: 1px solid var(--oro);
  padding: 18px 45px;
  font-size: 0.9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  border-radius: 0;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(161, 129, 107, 0.10);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-wa-aruma:hover {
  background: var(--blanco-puro);
  color: var(--oro);
  letter-spacing: 4px;
  box-shadow: 0 10px 25px rgba(161, 129, 107, 0.18);
  border: 1.5px solid var(--oro);
}
/*
Theme Name: Aruma Clinic
Author: Sofia Costamagna
Description: Tema de lujo para medicina estética basado en el concepto "Ciencia & Serenidad".
Version: 1.4
*/

/* ==========================================================================
   1. VARIABLES DE MARCA
   ========================================================================== */
:root {
    --oro: #A1816B;
    --crema: #F9F7F2;
    --texto: #2C2C2C;
    --blanco-puro: #ffffff;
    
    --fuente-titulos: 'Playfair Display', serif;
    --fuente-cuerpo: 'Playfair Display', serif;
    
    --section-padding: 160px 0;
    --container-width: 1500px; 
}

img {
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   3. ESTILOS GLOBALES E IMPONENTES
   ========================================================================== */
.container-aruma {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 50px;
}

.header-global {
    text-align: center;
    margin-bottom: 100px;
}

.titulo-global-imponente {
    font-family: var(--fuente-titulos);
    font-size: clamp(3.5rem, 8vw, 6rem);
    color: var(--texto);
    line-height: 0.85;
    font-weight: 300;
    letter-spacing: -2px;
}

.eyebrow-global {
    display: block;
    text-transform: uppercase;
    letter-spacing: 7px;
    font-size: 13px;
    color: var(--oro);
    margin-bottom: 25px;
}

.italic-oro {
    font-style: italic;
    color: var(--oro);
}

/* ==========================================================================
   4. HERO PRINCIPAL (VIDEO & IMPACTO)
   ========================================================================== */
.hero-aruma {
    position: relative;
    min-height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.video-fondo {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 2;
    pointer-events: none;
}




.hero-content {
     position: relative;
    z-index: 3;       
    pointer-events: all;
    text-align: center;
    color: var(--blanco-puro);
    max-width: 1000px;
}
.titulo-global-hero {
    font-family: var(--fuente-titulos);
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1;
    font-weight: 300;
    margin-bottom: 20px;
}

.btn-global-hero {
    display: inline-block;
    margin-top: 32px;
    padding: 20px 50px;
    border: 1px solid var(--blanco-puro);
    color: var(--blanco-puro);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 5px;
    text-transform: uppercase;
    transition: 0.5s;
}
.divider-hero-slim {
    width: 80px;
    height: 1px;
    background: var(--oro);
    margin: 30px auto;
}



.btn-global-hero {
    display: inline-block;
    padding: 20px 50px;
    border: 1px solid var(--blanco-puro);
    color: var(--blanco-puro);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 5px;
    text-transform: uppercase;
    transition: 0.5s;
}

.btn-global-hero:hover {
    background: var(--blanco-puro);
    color: var(--texto);
}
/* --- SECCIÓN EDITORIAL: LUJO Y MOVIMIENTO --- */
.section-editorial { 
    padding: 120px 0 120px 0;
    background: var(--blanco-puro); 
}

.layout-editorial-overlap {
    display: flex;
    flex-direction: column;
    gap: 160px; /* Espacio amplio para que cada bloque sea imponente */
}

.item-editorial {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Alternancia de posición */
.editorial-2 { flex-direction: row-reverse; }

/* CONTENEDOR DE IMAGEN CON HOVER SUTIL */
.img-editorial-wrapper {
    width: 65%;
    height: 600px; /* Imagen más grande para impacto */
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.06);
    background: #f8f8f8;
}

.img-editorial-wrapper img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); /* Movimiento lento tipo cine */
}

.item-editorial:hover .img-editorial-wrapper img {
    transform: scale(1.08); /* Zoom sutil al acercarse */
}

/* CAJA DE CONTENIDO CON DESPLAZAMIENTO SUTIL */
.content-editorial-box {
    width: 40%;
    background: #fff;
    padding: 70px;
    margin-left: -8%; /* Solapamiento de lujo */
    z-index: 10;
    box-shadow: 25px 25px 70px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efecto de movimiento en la caja al hacer hover */
.item-editorial:hover .content-editorial-box {
    transform: translateX(15px); /* Se desplaza ligeramente hacia afuera */
    box-shadow: 35px 35px 90px rgba(161, 129, 107, 0.1); /* Sombra color oro sutil */
}

.editorial-2 .content-editorial-box { 
    margin-left: 0; 
    margin-right: -8%; 
}

.editorial-2:hover .content-editorial-box {
    transform: translateX(-15px);
}

/* VARIACIONES DE COLOR */
.bg-crema-aruma { background-color: var(--crema); border: none; }
.border-oro-aruma { border: 1px solid var(--oro); }

/* --- TEXTOS Y BOTONES --- */
.num-editorial { 
    font-family: var(--fuente-titulos); 
    font-size: 1.5rem; 
    color: var(--oro); 
    display: block; 
    margin-bottom: 25px; 
}

.content-editorial-box h3 {
    font-family: var(--fuente-titulos);
    font-size: 2.8rem; /* Títulos imponentes */
    margin-bottom: 25px;
    line-height: 1;
}

.content-editorial-box p {
    font-size: 1.15rem;
    margin-bottom: 45px;
    color: #444;
}

/* BOTÓN LUXURY CON HOVER SUTIL */
.btn-editorial-luxury {
    display: inline-block;
    padding: 18px 45px;
    border: 1px solid var(--oro);
    color: var(--oro);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 4px;
    transition: 0.4s ease;
    background: transparent;
}

.btn-editorial-luxury:hover {
    background: var(--oro);
    color: #fff;
    letter-spacing: 5px; /* Expansión sutil de letras */
}

/* BOTÓN GLOBAL DESTACADO */
/* ==========================================================================
   BOTÓN GLOBAL DESTACADO (REFINADO PARA LUJO)
   ========================================================================== */
.btn-global-destacado {
    display: inline-block;
    background: transparent;
    color: var(--oro);
    border: 1px solid var(--oro);
    
    /* Proporciones elegantes y letras pequeñas */
    padding: 14px 35px;
    font-size: 0.8rem; 
    letter-spacing: 3px;
    text-transform: uppercase;
    
    /* Estética minimalista */
    border-radius: 0; 
    font-family: var(--fuente-titulos);
    font-weight: 400;
    text-decoration: none;
    
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.btn-global-destacado:hover {
    background: var(--oro);
    color: var(--blanco-puro);
    letter-spacing: 4px; /* Expansión sutil coherente con el estilo editorial */
    box-shadow: 0 10px 25px rgba(161, 129, 107, 0.15);
}

/* Ajuste para formularios: asegura que el botón ocupe el ancho necesario */
.btn-global-destacado-full {
    @extend .btn-global-destacado;
    width: 100%;
    text-align: center;
}

/* Botón blanco con bordes y letras marrón (global reutilizable) */
.btn-global-blanco {
    display: inline-block;
    background: var(--blanco-puro);
    color: var(--oro);
    border: 1px solid var(--oro);
    padding: 14px 35px;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 0;
    font-family: var(--fuente-titulos);
    font-weight: 400;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.btn-global-blanco:hover {
    background: var(--oro);
    color: var(--blanco-puro);
    letter-spacing: 4px;
    box-shadow: 0 10px 25px rgba(161, 129, 107, 0.15);
}

/* Botón marrón con letras blancas (global reutilizable, inverso) */
.btn-global-marron {
    display: inline-block;
    background: var(--oro);
    color: var(--blanco-puro);
    border: 1px solid var(--oro);
    padding: 18px 45px;
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    border-radius: 0;
    font-family: var(--fuente-titulos);
    font-weight: 400;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(161, 129, 107, 0.10);
}
.btn-global-marron:hover {
    background: var(--blanco-puro);
    color: var(--oro);
    letter-spacing: 4px;
    box-shadow: 0 10px 25px rgba(161, 129, 107, 0.18);
    border: 1.5px solid var(--oro);
}
/* Botón borde oro, letras marrón, fondo blanco */
.btn-global-brown {
    display: inline-block;
    background: var(--oro);
    color: var(--blanco-puro);
    border: 1px solid var(--oro);
    padding: 14px 35px;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 0;
    font-family: var(--fuente-titulos);
    font-weight: 400;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.btn-global-brown:hover {
    background: var(--blanco-puro);
    color: var(--oro);
    letter-spacing: 4px;
    box-shadow: 0 10px 25px rgba(161, 129, 107, 0.15);
}

.btn-global-destacado {
    display: inline-block;
    background: transparent;
    color: var(--oro);
    border: 1px solid var(--oro);
    padding: 10px 24px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 0;
    font-family: var(--fuente-titulos);
    font-weight: 400;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.med-hero-actions {
    margin-top: 40px;
    display: flex;
    gap: 18px;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
    .item-editorial { flex-direction: column; }
    .img-editorial-wrapper, .content-editorial-box { width: 100%; margin: 0; }
    .content-editorial-box { margin-top: -60px; padding: 40px; }
    .img-editorial-wrapper { height: 400px; }
}
@media (max-width: 1024px) {
    .item-editorial { flex-direction: column; }
    .img-editorial-wrapper, .content-editorial-box { width: 100%; margin: 0; }
    .content-editorial-box { margin-top: -50px; }
}
/* ==========================================================================
   6. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1100px) {
    .layout-escalonado-grande { flex-direction: column; align-items: center; }
    .card-aruma-global { width: 100%; margin: 0 0 50px 0; }
    .item-2, .item-3 { margin-top: 0; }
    .img-global-frame-lg { height: 400px; }
    .titulo-global-imponente { font-size: 3.5rem; }
}
/* --- CSS SUPREME EDITORIAL (IGUAL QUE ARRUGAS) --- */
.aruma-editorial-case { background: #fff; color: #121212; overflow: hidden; }

/* Tipografía / tono más sofisticado */
.ed-eyebrow{
  font-family: var(--fuente-cuerpo);
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 11px;
  color: var(--oro);
  display:block;
  margin-bottom: 22px;
  opacity: .95;
}

.ed-title{
  font-family: var(--fuente-titulos);
  font-size: clamp(3.2rem, 7.5vw, 6.3rem);
  line-height: 1;
  margin-bottom: 28px;
  font-weight: 400;
}
.ed-title em{ font-style: italic; color: var(--oro); font-weight: 300; }

.ed-lead{
  font-size: 1.18rem;
  line-height: 1.75;
  color: #666;
  max-width: 520px;
  margin-bottom: 44px;
}

/* Hero */
.ed-hero{ padding: 180px 0 120px; position: relative; }
.ed-hero__grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items:center;
}

.ed-hero__meta{
  display:flex;
  gap: 34px;
  margin-bottom: 44px;
  border-top: 1px solid #eee;
  padding-top: 34px;
}
.ed-pill{ font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; }
.ed-pill span{
  display:block;
  color: var(--oro);
  font-weight: 700;
  font-size: 10px;
  margin-bottom: 8px;
}

/* --- IMAGEN: reencuadre para que NO se corte raro --- */
.ed-hero__image-wrap{ display:flex; justify-content:center; }
.ed-hero__image-frame{
  position: relative;
  border-radius: 320px 320px 22px 22px; /* más elegante */
  overflow: hidden;
  height: clamp(440px, 52vw, 650px);
  box-shadow: 0 30px 70px rgba(0,0,0,.10); /* más premium */
}
.ed-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ajustá este valor si querés mover más la foto */
  object-position: 72% 30%;
  transform: scale(1.02); /* micro zoom para “llenar” sin perder foco */
}

/* Details Grid */
.ed-details{ padding: 80px 0; background: #fdfaf8; }
.ed-section-title{
  font-family: var(--fuente-titulos);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  margin-bottom: 60px;
  text-align:center;
}
.ed-details__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
}

.ed-detail-card{
  background:#fff;
  padding: 58px 40px;
  border-radius: 30px;
  border: 1px solid rgba(161,129,107,0.10);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.ed-detail-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(161,129,107,0.09);
  border-color: rgba(161,129,107,0.35);
}
.ed-num{ font-family: var(--fuente-titulos); font-size: 16px; color: var(--oro); display:block; margin-bottom: 22px; opacity:.55; }
.ed-detail-card h3{ font-family: var(--fuente-titulos); font-size: 24px; margin-bottom: 18px; }
.ed-detail-card p{ color:#666; line-height:1.8; font-size: 15px; }

/* Sección precio destacada hiperhidrosis */
.ed-price-highlight{
  background:#fff;
  padding: 80px 0 120px 0;
}
.ed-price-highlight__wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.ed-price-highlight__title{
  font-family: var(--fuente-titulos);
  font-size: 2.05rem;
  color: var(--oro);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: .4px;
}
.ed-price-highlight__desc{
  font-size: 1.06rem;
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  line-height: 1.75;
}
.ed-price-highlight__pricebox{
  background: #fff;
  border: 2.5px solid var(--oro);
  border-radius: 22px;
  padding: 32px 38px 22px 38px;
  box-shadow: 0 16px 48px rgba(161,129,107,0.13), 0 2px 8px rgba(0,0,0,0.04);
  text-align:center;
  min-width: 200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position: relative;
  margin: 0 auto;
}
.ed-price-highlight__from {
  font-size: 1.1rem;
  color: var(--oro);
  font-family: var(--fuente-titulos);
  margin-bottom: 7px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
.ed-price-highlight__main {
  font-size: 2.5rem;
  color: var(--texto);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -1px;
}
.ed-price-highlight__label {
  font-size: 1.05rem;
  color: #a1816b;
  font-family: var(--fuente-cuerpo);
  margin-top: 4px;
  letter-spacing: 0.2px;
}

/* CTA */
.ed-cta{ padding: 80px 0 140px; }
.ed-cta__box{
  background:#fcfaf7;
  border-radius: 54px;
  padding: 92px 76px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 60px;
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(161,129,107,0.12);
  box-shadow: 0 22px 60px rgba(0,0,0,0.06); /* más fino */
}
.ed-cta__info{
  flex: 1 1 0;
  max-width: 440px;
  text-align:left;
}
.ed-cta__info h2{
  font-family: var(--fuente-titulos);
  font-size: clamp(2.6rem, 4.8vw, 3.8rem);
  margin-bottom: 22px;
  line-height: .95;
}
.ed-cta__price-card{
  background:#fff;
  padding: 46px;
  border-radius: 32px;
  min-width: 320px;
  flex: 1 1 0;
  max-width: 600px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.10);
  border: 1px solid rgba(161,129,107,0.10);
}

/* Form */
.aruma-form{ display:flex; flex-direction:column; gap: 16px; }
.aruma-form input,
.aruma-form textarea{
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  padding: 14px 18px;
  border: 1px solid #e5e0da;
  border-radius: 10px;
  background: #fcfaf7;
  color: #121212;
  transition: border .25s ease, box-shadow .25s ease, transform .25s ease;
}
.aruma-form input:focus,
.aruma-form textarea:focus{
  border: 1.5px solid var(--oro);
  outline: none;
  box-shadow: 0 10px 26px rgba(161,129,107,0.14);
}
.aruma-form-consent{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: .95rem;
  justify-content:center;
}
.aruma-form-consent label a{ color: var(--oro); text-decoration: underline; }



/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .fade-base, .fade-left, .fade-right, .fade-up{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-content {
    position: relative;
    z-index: 20;
  }
  .btn-global-hero {
    position: relative;
    z-index: 30;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}
@media (max-width: 992px){
  .ed-hero__grid{ grid-template-columns: 1fr; text-align:center; gap: 42px; }
  .ed-hero__meta{ justify-content:center; flex-wrap: wrap; }
  .ed-details__grid{ grid-template-columns: 1fr; }
  .ed-cta__box{ padding: 58px 18px; max-width: 98vw; flex-direction: column; }
  .ed-cta__info{ text-align:center; max-width: 100%; }
  .ed-cta__price-card{ max-width: 100%; }
  .ed-img{ object-position: 65% 28%; } /* reencuadre mobile */
}

@media (max-width: 900px){
  .ed-price-highlight__wrap{ flex-direction: column; gap: 22px; align-items:flex-start; }
  .ed-price-highlight__pricebox{ align-self: stretch; }
  .ed-price-highlight__main{ font-size: 1.5rem; }
}


/* --- MODAL PRIVACIDAD LUXURY --- */
.aruma-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.aruma-modal.is-active { display: flex; }

.aruma-modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(44, 44, 44, 0.9);
    backdrop-filter: blur(5px);
}

.aruma-modal-content {
    background: #fff;
    width: 100%;
    max-width: 800px;
    max-height: 80vh;
    border-radius: 20px;
    position: relative;
    z-index: 10000;
    padding: 60px 40px;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll; /* scroll en vez de auto — funciona mejor en iOS */
    padding-bottom: 80px; /* espacio extra para que el botón no quede cortado */
}


.aruma-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    font-size: 35px;
    background: none; border: none;
    color: var(--oro);
    cursor: pointer;
    line-height: 1;
}

.legal-text-container {
    font-family: var(--fuente-cuerpo);
    font-size: 14px;
    line-height: 1.8;
    color: var(--texto-gris);
    text-align: justify;
}

.legal-table-box {
    margin: 30px 0;
    padding: 25px;
    background: #fcfaf7;
    border: 1px solid var(--crema);
}

.legal-table-box table { width: 100%; border-collapse: collapse; }
.legal-table-box td { 
    padding: 10px; 
    border-bottom: 1px solid #eee; 
    vertical-align: top;
}

.modal-footer-action {
    padding-top: 30px;
    border-top: 1px solid #eee;
    margin-top: 30px;
     position: sticky;
       z-index: 10;
}


.legal-table-box td:first-child { width: 30%; color: var(--oro); font-weight: 600; }