/* ==========================================
   SABINA MARAVIGLIA - ESTILOS PERSONALIZADOS
   ========================================== 
   
   ÍNDICE:
   1. Variables Globales y Tipografía
   2. Menú / Header
   3. Portada (Billboard / Hero)
   4. Sección: ¿En qué momento estás? (A/B)
   5. Sección: Mi Mirada (Separador)
   6. Sección: Servicios
   ...
============================================= */



/* ==========================================
   1. VARIABLES Y ESTILOS GLOBALES
   ========================================== */

:root {

    --font-titulo: 'Playfair Display', serif;
    --font-cuerpo: 'Montserrat', sans-serif;

    --color-blanco: #ffffff; /* Ahora sí definido correctamente */
    --color-crema: #F6F3EC;
    --color-beige: #ECE4DA;
    --color-gris-calido: #DBDAD7;
    --color-gris-claro: #CECDC9;
    --color-greige: #BCB5AC;
    --color-marron-medio: #91887F;
    --color-texto-oscuro: #625952;
    --color-principal: #5a4f44; /*#4F4943*/;
}

* {
    box-sizing: border-box !important; /* Vital para que el padding no sume ancho extra */
}

html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* Esto mata el scroll horizontal de raíz */
    scroll-behavior: smooth !important;
    font-family: var(--font-cuerpo) !important;
    color: var(--color-principal) !important;

}

h1, h2, h3, h4 {
    font-family: var(--font-titulo) !important;
    color: var(--color-principal) !important;
}



/* Botón "Hablemos" - Versión Robusta */
.btn-hablemos {
    display: inline-block !important;
    background-color: #312c28 !important; 
    color: var(--color-blanco)!important;
    padding: 12px 35px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 40px !important; 
    transition: all 0.3s ease !important; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    margin-top: 20px !important;
    border: 2px solid #312c28 !important;
    backdrop-filter: none !important;
}

.btn-hablemos:hover {
    background-color: rgba(255, 255, 255, 0.15) !important; 
    backdrop-filter: blur(8px) !important; 
    color: #312c28 !important; 
    transform: translateY(-3px) !important; 
}

/* ==========================================
   2. HEADER Y NAVEGACIÓN
   ========================================== */

#header {
    display: flex !important;
    align-items: center !important;
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important; 
    background: rgba(79, 73, 67, 0.15) !important; 
    backdrop-filter: blur(4px) !important;
    padding: 10px 5% !important; 
    border-bottom: none !important;
    overflow: visible !important;
}

#header .container {
    width: 100% !important;
    max-width: 100% !important; 
    padding: 0 !important;
    margin: 0 !important; 
}

#header .header-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

#header .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.main-logo img {
    max-height: 80px !important; 
    width: auto !important;
    margin-top: 0 !important;
    filter: brightness(0) opacity(0.85) !important; 
    transition: all 0.3s ease;
}

.main-slider {
    margin-bottom: 0 !important;
}

#navbar {
    display: flex !important;
    justify-content: flex-end !important;
}

.tu-clase-header .container { /* Recordá cambiar ".tu-clase-header" por la de tu plantilla */
    display: flex !important;
    justify-content: space-between !important; 
    align-items: center !important; 
    height: 100px; 
}

.menu-list {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    flex-wrap: nowrap !important;   
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.menu-list li {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important; 
}

.menu-list li a {
    color: #312c28 !important;
    font-family: var(--font-cuerpo) !important;
    font-weight:500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important; 
    font-size: 13px !important;        
    background: transparent !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important; 
    text-shadow: none !important;
    padding: 10px 15px !important; 
}

.menu-list li.active a,
.menu-list li a.active,
.menu-list li a:hover {
    color: #000000;
    border-bottom: 1px solid #312c28 !important;
    background: transparent !important;
    opacity: 1 !important;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.7) !important; 
}

.stellarnav.mobile > ul {
    background-color: rgba(35, 31, 28, 0.98) !important; /* Fondo oscuro (tono visón/grafito) casi sólido */
    text-align: center !important; /* Centra las opciones */
    padding: 10px 0 20px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.5) !important; /* Sombrita para despegarlo del fondo */
}

/* 2. Cada bloque de opción (Acerca de mí, Servicios, etc.) */
.stellarnav.mobile > ul > li {
    display: block !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* Línea divisoria muy sutil */
}

/* 3. El texto de las opciones (Ajustado para el dedo del usuario) */
.stellarnav.mobile > ul > li > a {
    display: block !important;
    padding: 18px 15px !important; /* Espacio generoso para que sea fácil de tocar */
    color: #ffffff !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    opacity: 0.8 !important;
}

/* 4. Efecto al tocar la opción en el celu */
.stellarnav.mobile > ul > li > a:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-beige) !important;
    opacity: 1 !important;
}

/* 5. Estética de la palabra "MENU" y el ícono de la hamburguesa/cruz */
.stellarnav .menu-toggle,
.stellarnav .close-menu {
    color: var(--color-principal); /* Asegura que la hamburguesa sea blanca y visible */
    text-shadow: none !important;
    padding: 15px !important;
}

/* ==========================================
   3. PORTADA
   ========================================== */

#billboard {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important; 
}

#billboard .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.slider-item {
    position: relative !important;
    height:100vh !important; 
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important; 
}

#billboard .banner-holder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; 
}

#billboard .banner-holder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center center !important; 
}

/* Capa de contraste: Mantengo el corte en 100px para que coincida con el header */
#billboard .banner-holder::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 0px,      
        rgba(0, 0, 0, 0) 100px,    
        rgba(0, 0, 0, 0.05) 100px, 
        rgba(0, 0, 0, 0.05) 100%
    ) !important;
    z-index: 2 !important;
}

#billboard .banner-content {
    width: 100% !important; 
    max-width: 800px !important;           
    padding: 80px 20px !important; 
    text-align: center !important;     
    position: relative !important;
    z-index: 3 !important; 
}

#billboard .banner-element {
    width: 100% !important; 
    margin: 0 auto !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
}

.banner-content h2.banner-title {
    font-family: var(--font-titulo) !important;
    font-size: 3.5em !important; 
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: var(--color-principal) !important;
    text-transform: none !important; 
    text-shadow: none !important;
    opacity: 1 !important;
    letter-spacing: 4px !important;
}

.hero-subtitle {
    font-family: var(--font-titulo) !important; 
    font-size: 0.7em !important;                
    font-style: italic !important; 
    text-transform: none !important;
    font-weight: 400 !important;
    color: #312c28 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    letter-spacing: 1px !important;
}

.hero-description {
    margin-bottom: 35px !important;
    line-height: 1.8 !important;
    color: var(--color-texto-oscuro) !important; 
}


/* ==========================================
   ESTILOS SECCIÓN STATEMENT (Franja Gris)
   ========================================== */
.statement-section {
    background-color: #beb6ab; /* Un gris cálido/arena. Podés ajustarlo con tu gotero */
    padding: 100px 20px; /* Mucho aire arriba y abajo, clave en diseño elegante */
    display: flex;
    justify-content: center;
    align-items: center;
}

.statement-texto {
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}

.statement-texto p {
    color: #ffffff; /* Letras blancas */
    font-size: 24px; /* Tamaño generoso para que se lea bien */
    line-height: 1.6; /* Interlineado suelto */
    font-family: var(--font-cuerpo); /* Mantenemos tu fuente */
    font-weight: 300; /* Letra finita base */
    margin: 0;
    letter-spacing: 1px;
}

/* El detalle para la palabra en cursiva (transformar) */
.statement-texto p em {
    font-style: italic;
    font-family: 'Times New Roman', serif; /* Le da ese toque arquitectónico de la foto */
}

/* El detalle para la palabra resaltada (hogar) */
.statement-texto p strong {
    font-weight: 600; /* Más grosor */
}

/* ==========================================
   4 SECCIÓN: MOMENTO (A y B)
   ========================================== */
.section-momento {
    background-color: #f7f6f2; /* Ajustá al tono crema exacto de tu paleta */
}

.momento-main-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: var(--font-cuerpo) !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
    margin-bottom: 60px !important;
    color: var(--color-principal) !important;
}

/* Flexbox para alinear la Letra grande y el Texto */
.momento-card {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* Efecto sutil al pasar el mouse */
.momento-card:hover {
    transform: translateY(-5px);
}

.momento-letra {
    font-family: var(--font-cuerpo);
    font-size: 4em;
    font-weight: 700;
    line-height: 0.8;
    color: var(--color-principal); 
    opacity: 0.8;
}

.momento-texto h3 {
    font-family: var(--font-cuerpo) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: var(--color-principal) !important;
    text-transform: none !important;
}

.momento-texto p {
    font-family: var(--font-cuerpo);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--color-principal);
    opacity: 0.9;
}

/* Botón Hablemos estilo Píldora (Minimalista) */
.btn-hablemos-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-blanco);
    color: var(--color-principal);
    padding: 10px 25px;
    border-radius: 30px;
    font-family: var(--font-cuerpo);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra muy tenue */
    transition: all 0.3s ease;
}

.btn-hablemos-pill:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    color: var(--color-principal);
}


/* ==========================================
   5 SECCIÓN: MI MIRADA (Patio Separador)
   ========================================== */
.separador-mirada {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
}

.mirada-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.mirada-bg img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center;
}

.mirada-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(246, 243, 236, 0.60); 
    z-index: 2;
}

.mirada-content {
    position: relative;
    z-index: 3;
}

.mirada-title {
    font-family: var(--font-titulo) !important;
    font-size: 3.5em !important;
    color: var(--color-crema) !important;
    line-height: 1.1 !important;
}

.mirada-title span {
    font-size: 0.6em;
    font-style: italic;
    font-weight: 400;
}

.mirada-texto {
    color: #312c28 !important;
    font-size: 1.1em !important;
    font-family: var(--font-cuerpo) !important;
    font-weight: 500 !important; 
    line-height: 1.8 !important; 
    letter-spacing: 0.5px !important; 
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================
   6. SECCIÓN: SERVICIOS ("Trabajemos Juntos")
   ========================================== */

/* Contenedor general */

.section-servicios {
    background-color: var(--color-blanco);
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Espaciado del título */
.servicios-header {
    margin-bottom: 60px;
}

/* Estilo del título principal */
.servicios-main-title {
    font-family: var(--font-cuerpo) !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    color: var(--color-principal) !important;
}

/* Espaciado del botón inferior */
.servicios-footer {
    margin-top: 50px;
}

.servicio-card {
    width: 100%;
    max-width: 380px; /* Mantiene la foto elegante y pareja */
    margin: 0 auto 30px auto !important; /* El secreto: fuerza el centrado horizontal siempre */
    text-align: center;
    padding: 0 !important; /* Aniquila los márgenes asimétricos de la plantilla */
    display: block;
}

/* El contenedor de la imagen: fija la altura y oculta lo que sobresale del zoom */
.servicio-img-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    height: 380px; /* Fuerza a que las 3 fotos midan igual */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombrita elegante */
    cursor: pointer !important;
}

/* La imagen con la transición suave */
.servicio-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease; 
    border-radius: 4px;
    
}

/* El efecto al pasar el mouse: la foto crece un 8% */
.servicio-card:hover .servicio-img-wrapper img {
    transform: scale(1.08);
}

/* El degradado oscuro en la base para que el texto sea legible */
.servicio-img-overlay {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%; 
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
    z-index: 1;
}

/* Título blanco apoyado sobre la foto */
.servicio-titulo-overlay {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ffffff !important;
    font-family: var(--font-cuerpo) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    z-index: 2;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Textos debajo de la foto */
.servicio-bajada {
    font-family: var(--font-titulo);
    font-style: italic;
    font-size: 17px;
    color: var(--color-principal);
    margin-bottom: 8px;
}

.servicio-desc {
    font-family: var(--font-cuerpo);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-principal);
    opacity: 0.85;
    margin-bottom: 0;
}

/* Línea sutil que separa el texto extra */
.linea-divisora {
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin: 15px auto;
    width: 60%;
}

/* El texto detallado */
.servicio-desc-extra {
    font-family: var(--font-cuerpo);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-principal);
    opacity: 0.9;
    text-align: left; /* Queda mejor alineado a la izquierda al ser viñetas/detalles */
    padding: 0 15px;
}

.servicio-lista-extra {
    font-family: var(--font-cuerpo);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-principal);
    opacity: 0.9;
    text-align: left;
    padding-left: 20px; /* Sangría sutil */
    margin-bottom: 0;
    list-style-type: none; /* Le sacamos el circulito negro feo por defecto */
}

/* Espaciado entre cada paso y viñeta personalizada */
.servicio-lista-extra li {
    margin-bottom: 10px;
    position: relative;
}

/* Le agregamos un guion elegante usando CSS en lugar de la viñeta normal */
.servicio-lista-extra li::before {
    content: "—";
    position: absolute;
    left: -20px;
    color: #b89b72; /* Nuestro color dorado/beige para que haga juego con el botón */
    font-weight: bold;
}

/* El botón de "Ver detalles" */
.btn-texto-interactivo {
    font-family: var(--font-cuerpo);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-principal);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.btn-texto-interactivo:hover {
    color: #b89b72; /* Nuestro color dorado/beige */
    border-bottom: 1px solid #b89b72;
}

.servicio-btn-wrapper {
    margin-top: 15px;
}

/* El texto extra oculto por defecto */
.servicio-extra {
    display: none;
}

/* Esta es la clase que el JavaScript va a "prender" */
.servicio-extra.mostrar-detalles {
    display: block;
}


/* ==========================================
   7. SECCIÓN: ACERCA DE MÍ
   ========================================== */

.section-about {
    background-color: var(--color-blanco);
    overflow: hidden; 
    background-color: #f8f6f3;
    padding-top: 60px !important; 
    padding-bottom: 80px !important;
    overflow: hidden;
}

.about-img-wrapper {
    position: relative;
    padding: 20px 0 20px 40px; /* Deja espacio para el rectángulo desfasado */
    z-index: 1;
}

/* El rectángulo de atrás (Puede ser color o imagen) */
.about-img-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background-color: #e6dfd5; /* Un tono arena suave por si no carga la imagen de fondo */
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* La foto principal */
.about-img-principal {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sombra suave para dar relieve */
}

/* --- Textos de la Derecha --- */
.about-text-wrapper {
    padding-left: 30px;
}

.about-seccion-titulo {
    font-family: var(--font-cuerpo);
    font-size: 32px; 
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--color-principal);
    margin-bottom: 5px;
}

.about-nombre {
font-family: var(--font-cuerpo); 
    font-size: 26px; 
    font-weight: 500;
    color: #a38c71; 
    margin-bottom: 10px;
}

.about-profesion {
    font-family: var(--font-cuerpo);
    font-style: italic;
    color: #666;
    font-size: 15px;
    margin-bottom: 30px;
}

.about-descripcion p {
    font-family: var(--font-cuerpo);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-principal);
    margin-bottom: 20px;
}

/* --- El Botón "Saber más" --- */
/*.btn-saber-mas {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 28px;
    border: 1px solid #ccc;
    border-radius: 50px;
    font-family: var(--font-cuerpo);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-principal);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.btn-saber-mas:hover {
    background-color: #a38c71;
    color: #fff;
    border-color: #a38c71;
}*/


/* ==========================================
   8. SECCIÓN: PORTFOLIO
   ========================================== */

.section-portfolio {
    background-color: var(--color-blanco);
    padding-top: 80px;
    padding-bottom: 80px;
}

/* --- Títulos limpios (Iguales al resto de la web) --- */
.seccion-titulo-centrado {
    font-family: var(--font-cuerpo);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--color-principal);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.seccion-subtitulo-centrado {
    font-family: var(--font-cuerpo);
    font-size: 15px;
    color: #888;
    margin-bottom: 50px;
    font-style: italic;
}

/* --- Tarjetas de Proyecto --- */
.portfolio-card {
    display: inline-block;
    width: 100%;
    max-width: 480px;
    margin-bottom: 50px;
    cursor: pointer; /* Cambia el cursor a la manito para indicar que es clickeable */
}

/* Contenedor de la foto (Oculta lo que sobresale del zoom) */
.portfolio-img-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

/* La imagen con transición preparada */
.portfolio-img-wrapper img {
    width: 100%;
    height: 350px; /* Altura fija para que todas las fotos queden simétricas */
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
    border-radius: 4px;
}

/* La capa interactiva (Overlay) */
.portfolio-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Capa negra semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Oculta por defecto */
    transition: opacity 0.4s ease;
}

.portfolio-overlay-texto {
    color: #fff;
    font-family: var(--font-cuerpo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    border: 1px solid #fff;
    padding: 10px 20px;
    text-transform: uppercase;
}

/* --- Efecto Hover (La Magia) --- */
.portfolio-card:hover .portfolio-img-wrapper img {
    transform: scale(1.08); /* Zoom-in elegante */
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1; /* Aparece la capa y el texto */
}

/* --- Título del proyecto debajo de la foto --- */
.portfolio-titulo {
    font-family: var(--font-cuerpo);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-principal);
    margin-top: 15px;
    transition: color 0.3s ease;
}

.portfolio-card:hover .portfolio-titulo {
    color: #b89b72; /* Se tiñe de dorado al pasar el mouse */
}

.modal-portfolio-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 9999; /* Por encima de toda la página */
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro */
    overflow-y: auto; /* Permite scrollear si hay muchas fotos */
    padding: 40px 20px;
}

.modal-portfolio-content {
    background-color: #fff;
    max-width: 800px; /* Ancho máximo de la ventana */
    margin: 0 auto;
    padding: 40px;
    position: relative;
}

.modal-btn-cerrar {
    position: absolute;
    top: 10px; right: 20px;
    font-size: 35px;
    color: #333;
    cursor: pointer;
    line-height: 1;
}

#modal-titulo {
    font-family: var(--font-cuerpo);
    font-size: 24px;
    color: var(--color-principal);
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-align: center;
}

#modal-desc {
    font-family: var(--font-cuerpo);
    font-size: 15px;
    color: #666;
    margin-bottom: 30px;
    text-align: center;
}

.modal-galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas del mismo ancho */
    gap: 15px; /* Espacio elegante entre las fotos */
    margin-top: 20px;
}

/* Las fotos que se inyectan adentro del modal */
.modal-galeria-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    cursor: zoom-in; /* Cursor de lupa para invitar al clic */
    transition: transform 0.3s ease, z-index 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1; /* Nivel base */
}

.modal-galeria-grid img.foto-ampliada {
    transform: scale(1.6); /* Se agranda un 60% */
    z-index: 10; /* Se pone por encima del resto de las fotos */
    cursor: zoom-out; /* Cursor de lupa con menos para cerrar */
    box-shadow: 0 15px 40px rgba(0,0,0,0.5); /* Sombra para dar efecto de despegue */
}


/* ==========================================
   9. SECCIÓN: CONTACTO (Rediseño Profesional)
   ========================================== */

/* 1. Fondo nuevo para la sección (Un crema/arena muy sutil) */
.section-contacto {
    background-color: #f7f5f0; 
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
}

/* 2. Textos de la izquierda */
.contacto-textos {
    padding-right: 20px;
}

.contacto-titulo-principal {
    font-family: var(--font-titulos), serif;
    font-size: 36px;
    color: #a38c71; 
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: none !important
}

.contacto-subtitulo {
    font-family: var(--font-cuerpo);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-principal);
    margin-bottom: 15px;
    text-transform: none !important;
}

.contacto-parrafo {
    font-family: var(--font-cuerpo);
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* 3. La caja del formulario (Le damos un fondo blanco elegante) */
.formulario-sabina {
    background-color: #ffffff;
    padding: 35px 35px 25px 35px; 
    max-width: 460px; 
    margin: 0 auto;
    border-radius: 8px; /* Bordes apenitas redondeados */
    box-shadow: 0 15px 40px rgba(0,0,0,0.04); /* Sombra muy suave para que flote */
    width: 100%;
}

.form-grupo {
    margin-bottom: 25px;
}

/* 4. Anulamos las cajas feas de la plantilla y hacemos líneas limpias */
.formulario-sabina input,
.formulario-sabina textarea {
    width: 100% !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #ddd !important;
    padding: 15px 0 5px 0 !important; 
    font-family: var(--font-cuerpo);
    font-size: 16px;
    color: #333;
    outline: none;
    border-radius: 0 !important;
    transition: border-color 0.3s ease;
}

/* 5. Solución al Textarea roto */
.formulario-sabina textarea {
    min-height: 38px !important; /* Volamos los 120px exagerados */
    height: 38px;
    resize: vertical !important; /* Dejamos que el usuario lo estire hacia abajo si escribe mucho */
    line-height: 1.5;
    overflow: hidden;
}

/* 6. El texto fantasma (Placeholder) */
.formulario-sabina input::placeholder,
.formulario-sabina textarea::placeholder {
    font-size: 13px;
    color: #aaa;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

/* Efecto al hacer clic para escribir */
.formulario-sabina input:focus,
.formulario-sabina textarea:focus {
    border-bottom: 2px solid #a38c71 !important; /* Se tiñe de dorado */
}

/* 7. El Botón de Enviar (Moderno y profesional) */
.form-boton-contenedor {
    text-align: right;
    margin-top: 30px;
}

.btn-enviar-formulario {
    background-color: #a38c71 !important; /* Fondo color café */
    color: #ffffff !important;
    border: none !important;
    border-radius: 22px;
    padding: 15px 40px !important;
    font-family: var(--font-cuerpo);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-enviar-formulario:hover {
    background-color: #8b765d !important; /* Se oscurece al pasar el mouse */
    transform: translateY(-2px); /* Se levanta un poquito */
}


/* ==========================================
   10. FOOTER PERSONALIZADO (Sabina Maraviglia)
   ========================================== */
.footer-sabina {
    background-color: #beb6ab; 
    padding: 45px 0 30px 0;
    position: relative;
    overflow: hidden; 
}

.relative-container {
    position: relative;
    z-index: 2; /* Mantiene el contenido por encima de la marca de agua */
}

/* --- Marca de Agua (El monograma gigante) --- */
.footer-watermark {
    position: absolute;
    bottom: -80px; /* La bajamos bastante para esconder el texto inferior de la imagen */
    right: 30px; /* La corremos para que se ampute un pedacito en el borde */
    height: 400px; /* Tamaño grande */
    opacity: 0.12 !important; /* Forzamos a que sea casi transparente */
    z-index: 0;
    pointer-events: none;
}

/* --- Fila Superior (Logo Texto) --- */
.footer-logo-principal {
position: relative; 
    display: block;
    height: auto; 
    max-width: 400px; 
    margin-bottom: 20px; 
    opacity: 1;
}

/* --- Fila Central (Columnas) --- */
.footer-columnas {
    margin-top: 0; 
    margin-bottom: 20px;
}

/* Tipografía general para las 3 columnas */
.footer-menu a,
.footer-contacto a,
.footer-ubicacion p {
    font-family: var(--font-cuerpo);
    font-size: 14px;
    font-weight: 600;
    color: #5a4f44; /* Marrón oscuro para contrastar con el fondo */
    line-height: 1.8;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Columna 1: Menú */
.footer-menu {
    text-align: left;
    border-right: 1px solid rgba(0,0,0,0); /* Para estructurar si a futuro querés líneas divisoras */
}
.footer-menu a {
    display: block;
}
.footer-menu a:hover {
    color: #ffffff;
}

/* Columna 2: Redes Interactivas */
.footer-contacto {
    text-align: left;
    padding-left: 20px; /* Lo separa un poco del menú */
}
.footer-contacto a {
    display: flex;
    align-items: center;
    gap: 10px; 
    margin-bottom: 5px;
}
.footer-contacto a:hover {
    color: #ffffff;
    transform: translateX(5px); 
}

/* Columna 3: Ubicación */
.footer-ubicacion {
    text-align: left;
    padding-left: 20px;
}

/* --- Fila Inferior (Subtítulo) --- */
.footer-subtitulo {
    font-family: var(--font-titulos), serif;
    font-size: 13px;
    letter-spacing: 4px;
    color: #8c8175;
    text-transform: uppercase;
    margin: 0;
}


/* ==========================================
   BOTÓN FLOTANTE WHATSAPP CON GLOW ANIMADO
   ========================================== */

/* 1. Contenedor fijo en la pantalla */
.wp-glow-wrapper {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 54px;  
    height: 54px;
    border-radius: 50%;
    z-index: 9999; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px; /* Grosor de la luz más fino */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.wp-glow-wrapper:hover {
    transform: translateY(-5px) scale(1.05);
}

/* 2. El rayo de luz (Color dorado/beige) */
.wp-glow-wrapper::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    /* Cambiamos blanco por dorado/beige para que resalte siempre */
    background: conic-gradient(from 0deg, transparent 70%, #b89b72 100%); 
    animation: rotar-borde 2.5s linear infinite;
    z-index: 1;
}

/* 3. El botón oscuro */
.whatsapp-btn {
    position: relative;
    z-index: 2; 
    width: 100%;
    height: 100%;
    background-color: var(--color-crema, #3b3631); /* Color oscuro elegante */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* 4. El ícono con el tamaño correcto */
.whatsapp-icon {
    width: 24px; /* Un poco más chico para que "respire" dentro del botón */
    height: 24px;
    fill: var(--color-principal); /* Color crema clarito */
}

@keyframes rotar-borde {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ==========================================
   . DISEÑO RESPONSIVO (Media Queries)
   ========================================== */

@media only screen and (max-width: 768px) {
    
    /*Menu header*/
    .menu-list {
        flex-direction: column !important; /* Acá sí permitimos que se apilen verticalmente */
        align-items: center !important;
        padding: 20px 0 !important;
    }
    .menu-list li {
        margin-bottom: 15px !important; /* Separación ordenada hacia abajo */
    }
    .menu-list li a.btn-cta-header {
        margin-left: 0 !important;
        display: flex !important;
        width: 100% !important;
        max-width: 220px;
    }

    .banner-content h2.banner-title {
        font-size: 2.2em !important;
    }

    .slider-item {
        height:100vh !important;
    }

    #billboard .banner-holder img{
        object-position:center center;
        transform:scale(1.03)!important;
    }

    #billboard .banner-holder img, 
    .slider-item img {
        display: block !important; /* Convierte la imagen en un bloque, quitando el espacio de texto */
    }

    /* Nos aseguramos de que el contenedor recorte cualquier excedente */
    .banner-holder, 
    .slider-item {
        overflow: hidden !important; /* "Corta" cualquier pixel que se pase del límite */
    }
    
    .btn-hablemos {
        display: inline-block !important; /* Rompe el estiramiento automático */
        width: auto !important; /* Deja que el texto dicte el ancho */
        min-width: 220px !important; /* Ancho mínimo para que se vea proporcionado */
        margin-left: auto !important; /* Lo centra horizontalmente */
        margin-right: auto !important; /* Lo centra horizontalmente */
    }

    /* Aseguramos que el contenedor padre lo mantenga alineado al centro */
    .banner-element {
        text-align: center !important;
        width: 100% !important;
    }

    #header {
        padding: 15px 20px !important; 
    }
    
    .main-logo img {
        max-height: 60px !important; 
    }

    /* Mejora: Aseguramos que el botón de menú sea siempre visible */
    .navbar-toggler, .menu-toggle, .icon-menu {
        filter: brightness(0) !important;
    }

    .menu-list, #navbar ul {
        background-color: rgba(79, 73, 67, 0.95) !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin-top: 20px !important;
        max-height: 80vh !important; /* <--- AGREGÁ ESTO */
        overflow-y: auto !important;
    }


    /*Bonton de wpp*/
    .wp-glow-wrapper {
        width: 48px; 
        height: 48px;
        bottom: 15px;
        right: 15px;
    }
    .whatsapp-icon {
        width: 22px;
        height: 22px;
    }

    /*Seccion statement*/
    .statement-section {
        padding: 60px 15px; /* Achicamos un poco los márgenes en celu */
    }
    .statement-texto p {
        font-size: 18px; /* Achicamos la letra para que no ocupe toda la pantalla */
    }

    /*Seccion servicios*/
    .servicios-main-title {
        font-size: 24px !important; 
        letter-spacing: 2px !important;
    }
    .servicios-header {
        margin-bottom: 30px; 
    }
    
    /* Solo controlamos la tarjeta, dejamos que Bootstrap maneje las columnas */
    .servicio-card {
        width: 100% !important;
        max-width: 380px !important; /* Ancho máximo para que no se deforme */
        margin: 0 auto 40px auto !important; /* El "0 auto" es el que centra perfectamente */
        padding: 0 !important; 
        display: block !important;
    }

    .servicio-img-wrapper {
        height: 300px; 
    }



    /*Seccion about me*/
    .about-text-wrapper {
        padding-left: 0;
        margin-top: 50px;
        text-align: center;
    }
    
    .about-img-wrapper {
        padding: 10px 0 10px 20px;
    }
    
    .about-img-principal {
        margin: 0 auto;
    }



    /*Para el portfolio*/
    .modal-galeria-grid {
        grid-template-columns: 1fr; /* 1 sola columna */
    }
    .modal-galeria-grid img {
        height: auto; /* Dejamos que tomen su altura natural */
    }
    .modal-galeria-grid img.foto-ampliada {
        transform: scale(1.1); 
    }

    /*Seccion contacto mail*/
    .contacto-textos {
        margin-bottom: 40px;
        text-align: center;
        padding-right: 0;
    }
    .formulario-sabina {
        padding: 25px; /* Menos padding en celular para aprovechar pantalla */
    }
    .form-boton-contenedor {
        text-align: center;
    }
    .btn-enviar-formulario {
        width: 100%; /* Botón ancho completo en celular */
    }

    /*Footer*/
    .footer-logo-principal {
        margin: 0 auto 30px auto;
        display: block;
    }
    .footer-menu, .footer-contacto, .footer-ubicacion {
        text-align: center !important;
        padding: 0 !important; 
        margin-bottom: 30px;
    }
    .footer-contacto a {
        justify-content: center;
    }
    .footer-watermark {
        height: 250px; 
        right: -30px;
    }

}