/* ========================================== */
/* RESET Y FONDO EXACTO */
/* ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    /* Un color de base oscuro por si tarda en cargar el degradado */
    background-color: #181c1d; 
}

.fondo-radial {
    width: 100%;
    min-height: 100vh;
    /* Fondo exacto de Figma */
    background: radial-gradient(38.84% 38.84% at 50% 51.06%, rgba(52, 153, 158, 0.3) 0%, rgba(24, 28, 29, 0.45) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

/* ========================================== */
/* NAVBAR Y MENÚ */
/* ========================================== */
.header-container {
    padding: 30px 80px 0 80px;
    width: 100%;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 5px; /* Espacio mínimo entre el logo y el texto de abajo */
}

/* El logo circular */
.logo-img {
width: 62px;
height: 97px;
opacity: 1;
top: 11px;
left: 60px;

}

/* El link de contacto debajo del logo 
.link-estudio {
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    /*font-size: 16px;
    color: rgba(52, 153, 159, 1); /* El color exacto de Figma */
    /*text-decoration: none;
    /*margin-left: 8px; /* El left: 8px que me pasaste */
    /*transition: opacity 0.3s;
}*/

.link-estudio:hover {
    opacity: 0.8;
}

/* Los links del menú a la derecha */
.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
    align-items: center;
}

.nav-links a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 24px;
    color: #FBF8F8;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: rgba(52, 153, 159, 1);
}

/* El botón Anotarse destacado */
.btn-anotarse {/* 1. Tamaño y forma del contenedor (botón) */
    width: 156px;
    height: 63px;
    border-radius: 15px;
    
    /* 2. Color de fondo sólido */
    background-color: rgba(52, 153, 159, 1);
    
    /* 3. Tipografía exacta de tu Figma */
    font-family: 'Roboto', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    color: #FBF8F8; /* El color del texto que me habías pasado en el menú */
    text-decoration: none;
    
    /* 4. Centrado perfecto automático (Reemplaza al top y left de Figma) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 5. Un pequeño efecto para cuando le pasás el mouse por arriba */
    transition: opacity 0.3s ease, transform 0.2s ease;
}

/* Efecto hover: se vuelve un poquito transparente al pasar el cursor */
.btn-anotarse:hover {
    opacity: 0.85; /* Se agranda apenitas para dar sensación de click */
}
/* ========================================== */
/* FRAME CENTRAL (Textos de 96px) */
/* ========================================== */
.hero-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.textos-gigantes {
    line-height: 100%;
    margin-bottom: 30px;
}

.palabra-relajacion {
    font-family: 'Crimson Text', serif;
    font-weight: 350; /* Regular */
    font-size: 96px;
    color: #FBF8F8;
}

.palabra-salud {
    font-family: 'Crimson Text', serif;
    font-weight: 500; 
    font-style: italic; /* Italic */
    font-size: 96px;
    color: #34999F;
    margin-left: 70px; /* Separación entre palabras */
}

.palabra-belleza {
    font-family: 'Crimson Text', serif;
    font-weight: 350; /* Regular */
    font-size: 96px;
    color: #FBF8F8;
    display: block; /* Para que baje de renglón como en el diseño */
    margin-top: 100px;
}

/* ========================================== */
/* DESCRIPCIÓN Y BOTÓN */
/* ========================================== */
.hero-descripcion {
    width: 688px;
    font-family: 'Roboto', sans-serif;
    font-weight: 200; /* Light */
    font-size: 20px;
    color: #FBF8F8;
    line-height: 1.5;
    margin-top: 50px;
    margin-bottom: 100px;
}

.btn-reserva {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 198px;
    height: 60px;
    background-color: #34999F;
    border-radius: 15px;
    
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #FBF8F8;
    text-decoration: none;
    transition: opacity 0.3s;
}

.btn-reserva:hover {
    opacity: 0.8;
}
/* ========================================== */
/* SECCIÓN 2: TERAPIA Y ESTADÍSTICAS */
/* ========================================== */
.seccion-terapia {
    width: 100%;
    min-height: 1024px;
    background-color: rgba(246, 240, 235, 1); /* El color cremita exacto */
    display: flex;
    flex-direction: column;
    padding: 60px 0;
}

/* BARRA SUPERIOR */
.barra-estadisticas {
    display: flex;
    justify-content: center;
    gap: 60px; /* Separación entre cada item */
    padding: 20px 80px;
    margin-bottom: 80px;
}

.stat-item {
    display: flex;
    align-items: center; /* Alinea el icono con el texto */
    gap: 15px; /* Separación entre el icono y la palabra */
}

.stat-item span {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 32px;
    color: rgba(42, 41, 41, 1);
    line-height: 100%;
}

.stat-icono {
    width: 24px; /* El tamaño del icono en Figma */
    height: 24px;
    object-fit: contain;
}

/* CONTENIDO PRINCIPAL (Flexbox para poner la imagen y el texto lado a lado) */
.contenido-terapia {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px; /* La separación exacta entre la foto y el texto */
    padding: 0 80px;
}

/* LA IMAGEN */
.terapia-imagen-caja {
    width: 541px;
    height: 704px;
}

.terapia-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* El borde redondeado de tu diseño */
}

/* LOS TEXTOS */
.terapia-textos {
    display: flex;
    flex-direction: column;
    width: 443px; /* El ancho exacto que le diste al texto en Figma */
}

.terapia-textos h2 {
    width: 324px;
    font-family: 'Crimson Text', serif; /* Mantengo la fuente de títulos del resto del sitio */
    font-size: 40px; 
    color: rgba(42, 41, 41, 1);
    line-height: 1.1;
    margin-bottom: 30px;
}

.terapia-parrafos p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 12px; /* Exactamente lo que indica el diseño */
    line-height: 16px;
    color: rgba(42, 41, 41, 1);
    margin-bottom: 20px;
}

/* LISTA DE TICKS */
.terapia-lista {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.terapia-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 15px;
    color: rgba(42, 41, 41, 1);
    line-height: 100%;
}

.icono-tick {
    width: 24px;
    height: 24px;
}
/* ========================================== */
/* SECCIÓN 3: TARJETAS (Sobre mí, Certificados) */
/* ========================================== */
.seccion-tarjetas {
    width: 100%;
    min-height: 1024px;
    background-color: rgba(26, 39, 41, 1); /* El fondo oscuro de Figma */
    
    /* Usamos Flexbox para acomodarlas una al lado de la otra */
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    
    padding-top: 120px; /* El margen superior exacto de tu diseño */
    padding-bottom: 120px;
    gap: 61px; /* La separación exacta entre las tarjetas */
}

/* LA CAJA DE CADA TARJETA */
.tarjeta-info {
    width: 386px;
    height: 700px;
    border-radius: 15px;
    background-color: #243B3D; /* Color de la caja (Cambiá el Hex si en Figma es distinto) */
    padding: 60px 40px; /* Respiro interior para que el texto no toque los bordes */
    
    display: flex;
    flex-direction: column;
}

/* LA MAGIA DEL DESFASE PARA LA DEL MEDIO */
.tarjeta-desfasada {
    margin-top: 230px; /* Exactamente la diferencia entre 350px y 120px */
}

/* TÍTULOS DE LAS TARJETAS */
.tarjeta-titulo {
    font-family: 'Crimson Text', serif;
    font-weight: 400; /* Regular */
    font-size: 24px;
    line-height: 100%;
    color: rgba(251, 248, 248, 1);
    margin-bottom: 30px;
}

/* TEXTOS Y PÁRRAFOS */
.tarjeta-texto p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 14px;
    line-height: 16px; /* Lo ajusté a 16px exactos como pediste */
    color: rgba(251, 248, 248, 1);
    margin-bottom: 20px; /* Espacio entre los párrafos */
    text-align: justify; /* Opcional: para que quede parejito como en tu foto */
}
/* ========================================== */
/* SECCIÓN 4: MASAJES EXPERTOS */
/* ========================================== */
.seccion-masajes {
    width: 100%;
    /* Reutilizamos el fondo clarito para contrastar con la sección oscura anterior */
    background-color: rgba(246, 240, 235, 1); 
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

.masajes-contenido {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 120px; /* La separación entre el bloque de texto y el bloque de fotos */
    width: 100%;
}

/* ================== TEXTOS ================== */
.masajes-textos {
    width: 563px; /* El ancho exacto que le diste al texto */
    display: flex;
    flex-direction: column;
}

.masajes-titulo {
    width: 290px;
    font-family: 'Crimson Text', serif;
    font-weight: 400; /* Regular */
    font-size: 40px;
    line-height: 100%;
    color: rgba(42, 41, 41, 1);
    margin-bottom: 40px;
}

.masajes-parrafos p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 14px;
    line-height: 16px;
    color: rgba(42, 41, 41, 1);
    margin-bottom: 20px;
    text-align: justify;
}

/* Un poquito de espacio extra para separar el botón del último párrafo */
.btn-margen {
    margin-top: 30px; 
}

/* ================== IMÁGENES ================== */
/* La "caja invisible" que contiene y protege el diseño de las fotos */
.masajes-imagenes {
    position: relative;
    width: 559px; /* El ancho que ocupan las dos fotos sumadas con su desfase */
    height: 700px; 
}

/* Propiedades compartidas para ambas fotos */
.img-masaje-1, .img-masaje-2 {
    position: absolute;
    width: 339px;
    height: 320px;
    border-radius: 15px;
    object-fit: cover;
}

/* Posición exacta de la primera foto */
.img-masaje-1 {
    top: 0;
    left: 0;
}

/* Posición exacta de la segunda foto (calculada de tu Figma) */
.img-masaje-2 {
    top: 380px;  
    left: 220px; 
}
/* ========================================== */
/* SECCIÓN 5: LA MIRADA (PESTAÑAS) */
/* ========================================== */
.seccion-mirada {
    width: 100%;
    background-color: rgba(26, 39, 41, 1); /* Volvemos al fondo oscuro elegante */
    padding: 100px 0; /* Espacio arriba y abajo */
    display: flex;
    justify-content: center; /* Centramos el bloque principal en la pantalla */
}

.mirada-contenido {
    width: 100%;
    max-width: 1200px; /* El ancho exacto de Figma para el texto y la foto */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alineamos todo hacia la izquierda */
    padding: 0 20px; /* Un pequeño margen de seguridad para celulares */
}

.mirada-titulo {
    font-family: 'Crimson Text', serif;
    font-weight: 400; /* Regular */
    font-size: 40px;
    line-height: 100%;
    color: rgba(251, 248, 248, 1);
    margin-bottom: 30px;
}

.mirada-texto {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 14px;
    line-height: 16px;
    color: rgba(251, 248, 248, 1);
    width: 100%;
    margin-bottom: 50px;
    text-align: justify; /* Para que los bordes del texto queden rectos */
}

/* Espacio específico entre el botón y la foto de abajo */
.btn-margen-mirada {
    margin-bottom: 60px; 
}

/* LA IMAGEN PRINCIPAL */
.img-mirada {
    width: 100%;
    height: 396px; /* La altura exacta de Figma */
    border-radius: 15px; /* Bordes redondeados */
    object-fit: cover; /* Para que la foto no se estire ni se deforme */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Un toquecito de sombra oscura */
}


/* ========================================== */
/* SECCIÓN 6: CONTACTO Y FOOTER */
/* ========================================== */
.seccion-contacto {
    width: 100%;
    background-color: rgba(246, 240, 235, 1); /* Volvemos al fondo clarito */
    padding: 100px 0 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contacto-contenedor {
    width: 100%;
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 20px;
    margin-bottom: 80px;
}

/* COLUMNA IZQUIERDA (INFO) */
.contacto-titulo {
    font-family: 'Crimson Text', serif;
    font-weight: 600; /* SemiBold */
    font-size: 40px;
    color: rgba(42, 41, 41, 1);
    margin-bottom: 15px;
}

.contacto-subtitulo {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light */
    font-size: 20px;
    color: rgba(42, 41, 41, 1);
    margin-bottom: 40px;
}

.contacto-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contacto-lista li, .link-ig {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: rgba(42, 41, 41, 1);
    text-decoration: none;
}

.icono-contacto {
    width: 24px;
    height: 24px;
}
/* ========================================== */
/* MAPA DE UBICACIÓN */
/* ========================================== */
.item-ubicacion {
    display: flex;
    flex-direction: column; /* Para que el mapa quede abajo del texto */
    align-items: flex-start !important;
    gap: 15px;
}

.ubicacion-texto {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mapa-estudio {
    width: 100%;
    max-width: 300px; /* Para que no se haga gigante */
    height: 150px; /* Altura del rectangulito del mapa */
    border: none;
    border-radius: 10px; /* Bordes redondeados acordes al diseño */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Una sombrita suave */
}
/* COLUMNA DERECHA (FORMULARIO) */
.contacto-formulario {
    width: 440px; /* Ancho exacto de Figma */
    margin-top: 10px;
}

.form-oasis {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Separación entre los campos */
}

.form-fila {
    display: flex;
    gap: 20px; /* Separación entre Email y Teléfono */
}

/* Estilo de los campos (Solo línea inferior) */
.input-linea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(52, 153, 159, 0.5); /* Línea turquesa suave */
    padding: 10px 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: rgba(42, 41, 41, 1);
    outline: none;
}

.input-linea::placeholder {
    color: rgba(42, 41, 41, 0.6);
}

.input-linea:focus {
    border-bottom: 2px solid rgba(52, 153, 159, 1); /* Se marca más fuerte al hacer clic */
}
/* Estilo para el selector de asunto */
.select-oasis {
    cursor: pointer;
    background-color: transparent;
    appearance: none; /* Limpia el estilo por defecto del navegador */
}

/* Color de fondo para que las opciones se lean bien al desplegarse */
.select-oasis option {
    background-color: rgba(246, 240, 235, 1);
    color: rgba(42, 41, 41, 1);
}

/* Ajuste para el botón dentro del form */
.btn-submit {
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

/* PIE DE PÁGINA (LOGO) */
.contacto-pie {
    width: 100%;
    border-top: 1px solid rgba(52, 153, 159, 0.3); /* La línea fina que separa el footer */
    padding-top: 50px;
    display: flex;
    justify-content: center;
}

.logo-gigante {
    width: 155px; /* Medidas exactas del logo de abajo */
    height: 282px;
    object-fit: contain;
}
/* ========================================== */
/* ADAPTACIÓN PARA CELULARES (RESPONSIVE)     */
/* ========================================== */

@media screen and (max-width: 768px) {
    
    /* 1. REGLA DE ORO: Nada puede ser más ancho que la pantalla del celu */
    body, html {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    * {
        box-sizing: border-box !important;
        max-width: 100% !important; 
    }

    /* 2. ARREGLO DE LOS TEXTOS LARGOS (La captura que me pasaste) */
    h1, h2, h3, p {
        width: 100% !important; /* Obligamos a los textos a respetar los bordes */
        padding-right: 15px;
        height: auto !important;
    }

    .textos-gigantes {
        text-align: center;
        margin-bottom: 20px;
    }

    .palabra-relajacion, .palabra-salud, .palabra-belleza {
        font-size: 50px !important; /* Achicamos los títulos principales */
        line-height: 1.2;
        margin-left: 0 !important;
        margin-top: 10px !important;
        display: block;
    }

    /* 3. LAS 3 TARJETAS (Sobre Mi, Certificados) -> Una abajo de la otra */
    .seccion-tarjetas {
        flex-direction: column !important; /* Apilamos verticalmente */
        align-items: center;
        padding: 60px 20px !important;
        gap: 30px !important;
        height: auto !important;
    }

    .tarjeta-info {
        width: 100% !important;
        height: auto !important; /* Dejamos que la caja crezca según el texto */
        padding: 30px 20px !important;
    }

    .tarjeta-desfasada {
        margin-top: 0 !important; /* En celu sacamos el efecto de "escalón" porque no entra */
    }

    /* 4. SECCIÓN MASAJES (Texto arriba, fotos abajo) */
    .masajes-contenido {
        flex-direction: column !important;
        gap: 40px !important;
        padding: 0 20px;
    }

    .masajes-textos {
        width: 100% !important;
    }

    .masajes-imagenes {
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column; /* Ponemos las dos fotos una abajo de la otra */
        gap: 20px;
    }

    /* Sacamos la posición flotante de las fotos para el celu */
    .img-masaje-1, .img-masaje-2 {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    /* 5. SECCIÓN LA MIRADA (Pestañas) */
    .mirada-contenido {
        padding: 0 20px !important;
    }
    
    .img-mirada {
        height: auto !important; /* Para que la foto no quede aplastada */
    }

    /* 6. FOOTER Y FORMULARIO DE CONTACTO */
    .contacto-contenedor {
        flex-direction: column !important; /* Columna izquierda arriba, form abajo */
        gap: 50px;
        padding: 0 20px !important;
    }

    .contacto-formulario {
        width: 100% !important;
    }

    .form-fila {
        flex-direction: column !important; /* Email y Teléfono uno abajo del otro */
        gap: 40px;
    }
    /* 7. ARREGLO DEL MENÚ (HEADER) PARA CELULARES */
    header {
        flex-direction: column !important; /* Logo arriba, botones abajo */
        height: auto !important;
        padding: 20px 10px !important;
        gap: 15px !important;
    }

    /* Le decimos a la caja de los botones que permita múltiples renglones */
    header nav, 
    .menu, 
    .nav-links { 
        display: flex;
        flex-wrap: wrap !important; /* Esta es la magia: si no entran, bajan de renglón */
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Achicamos apenitas la letra para que entren mejor */
    header nav a {
        font-size: 16px !important; 
    }
    /* ========================================== */
    /* ARREGLO SECCIÓN "TERAPIA PARA EL ALMA"     */
    /* ========================================== */
    
    .contenido-terapia {
        display: flex !important;
        flex-direction: column !important; /* Magia: apila la foto y el texto en vertical */
        gap: 30px !important; /* Le da aire entre la foto y el título */
        padding: 20px !important;
    }

    .terapia-imagen-caja, 
    .terapia-textos {
        width: 100% !important; /* Obliga a que ocupen toda la pantalla */
        margin: 0 !important;
        padding: 0 !important;
    }

    .terapia-img {
        width: 100% !important;
        height: auto !important; /* Desaplasta el fideo y recupera la proporción de la foto */
        object-fit: cover !important;
        margin: 0 auto !important;
        display: block;
    }

    .terapia-textos h2 {
        font-size: 38px !important; /* Achicamos el título para que no desborde */
        line-height: 1.2 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .terapia-parrafos p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .terapia-lista {
        display: flex !important;
        flex-direction: column !important; /* Apila los tildes uno abajo del otro */
        gap: 15px !important;
        padding-left: 0 !important;
    }
    /* ========================================== */
    /* ARREGLO BARRA DE ESTADÍSTICAS              */
    /* ========================================== */
    
    .barra-estadisticas {
        display: flex !important;
        flex-wrap: wrap !important; /* La clave mágica: si no entran, bajan al renglón siguiente */
        justify-content: center !important;
        gap: 25px 10px !important; /* Espacio vertical y horizontal entre los ítems */
        padding: 30px 15px !important;
    }

    .stat-item {
        width: 45% !important; /* Le decimos que cada uno ocupe casi la mitad de la pantalla */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .stat-item span {
        font-size: 15px !important; /* Achicamos apenitas la letra para que no se corte la palabra */
        margin-left: 8px !important;
        text-align: left !important;
    }
    
    .stat-icono {
        width: 24px !important; /* Nos aseguramos de que el iconito no se vea gigante */
        height: auto !important;
    }
}