/* ====================================================== */

/* ESTILOS GLOBALES DE LA LANDING PAGE (publico.css - V14) */

/* ====================================================== */



body {

font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

line-height: 1.6;

margin: 0;

padding: 0;

background-color: #f4f7f9; /* Fondo general */

color: #333;

}



.container {

max-width: 1100px;

margin: 0 auto;

padding: 0 20px;

}



/* --- Estilos de Botones --- */

.btn { padding: 12px 25px; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; text-decoration: none; display: inline-block; text-align: center; }

.btn-primary { background-color: #007bff; color: white; }

.btn-primary:hover { background-color: #0056b3; }

.btn-success { background-color: #28a745; color: white; }

.btn-success:hover { background-color: #218838; }



/* ====================================================== */

/* 1. HEADER (Logo Izquierda, Tagline Centrado) */

/* ====================================================== */

.lp-header-v10 {

background-color: #fff;

padding: 10px 0;

border-bottom: 1px solid #e0e0e0;

box-shadow: 0 2px 5px rgba(0,0,0,0.05);

}

.lp-header-v10 .container {

display: flex;

justify-content: space-between;

align-items: center;

position: relative;

}

.lp-header-v10 .lp-logo { z-index: 2; }

.lp-header-v10 .lp-logo img { height: 70px; width: auto; }

.lp-header-v10 .lp-header-tagline {

position: absolute;

left: 50%;

transform: translateX(-50%);

font-size: 1.3em;

font-weight: 700;

color: #005a9c;

white-space: nowrap;

z-index: 1;

padding: 0 10px;

}



/* ====================================================== */

/* 2. SECCIÓN PRINCIPAL CON IMAGEN DE FONDO Y 3 BLOQUES */

/* ====================================================== */

.lp-hero-section-v10 {

position: relative;

background-image: url('mi_foto.jpg'); /* TU IMAGEN */

background-size: cover;

background-position: center;

padding: 80px 0 40px 0; /* 80px arriba, 40px abajo */

display: flex;

align-items: center;

justify-content: center;

}



.lp-hero-overlay-v10 {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 40, 80, 0.6);

z-index: 1;

}



.lp-blocks-container {

position: relative;

z-index: 2;

width: 100%;

max-width: 1100px;

}



/* --- 3 COLUMNAS (CORREGIDO) --- */

.lp-blocks-grid-v10 {

display: grid;

grid-template-columns: repeat(3, 1fr); /* 3 columnas */

gap: 25px;

}



.key-info-box-v10 {

background-color: rgba(255, 255, 255, 0.95);

padding: 30px;

border-radius: 8px;

text-align: center;

box-shadow: 0 8px 20px rgba(0,0,0,0.15);

display: flex;

flex-direction: column;

justify-content: space-between;

min-height: 280px;

color: #333;

}

.key-info-box-v10 i { font-size: 3.5em; color: #007bff; margin-bottom: 15px; }

.key-info-box-v10 h3 { font-size: 1.5em; color: #005a9c; margin: 0 0 10px 0; font-weight: 700; }

.key-info-box-v10 p { color: #555; margin-bottom: 20px; flex-grow: 1; font-size: 0.95em; }

.key-info-box-v10 .btn { width: 100%; padding: 10px 15px; font-size: 1em; margin-top: auto; align-self: center; }

.key-info-box-v10 .key-info-link {

color: #007bff; font-weight: 700; text-decoration: none; margin-top: auto;

font-size: 1em; padding: 10px 15px; display: inline-block; border: 1px solid transparent;

}

.key-info-box-v10 .key-info-link:hover { text-decoration: underline; }



/* Bloque Resultados */

.results-box-v10 { background-color: #005a9c; color: #fff; }

.results-box-v10 i, .results-box-v10 h3, .results-box-v10 p { color: #fff; }

.results-box-v10 p { color: #e0e0e0; }

.results-box-v10 .btn-primary { background-color: #fff; color: #005a9c; align-self: center; }

.results-box-v10 .btn-primary:hover { background-color: #e0e0e0; }

/* Bloque WhatsApp */

.whatsapp-box-v10 i { color: #25D366; }

.whatsapp-box-v10 .btn-success { align-self: center; }

/* Bloque Info */

.info-box-v10 i { color: #007bff; }

.info-box-v10 p { font-weight: 700; }



/* ====================================================== */

/* 3. SECCIÓN DOMICILIO (RESTAURADO) */

/* ====================================================== */

.lp-section { padding: 60px 20px; }

.lp-section-gray { background-color: #f4f7f9; }

.lp-section-title { text-align: center; color: #005a9c; font-size: 2.5em; margin-top: 0; margin-bottom: 50px; }



/* Banner Domicilio (Restaurado) */

.lp-domicilio-banner { background-color: #e7f3ff; border: 1px solid #b3d7ff; border-radius: 8px; padding: 30px; display: flex; align-items: center; gap: 30px; }

.lp-domicilio-banner i { font-size: 4em; color: #005a9c; }

.lp-domicilio-text h3 { margin: 0 0 10px 0; font-size: 1.8em; color: #005a9c; }

.lp-domicilio-text p { margin: 0; font-size: 1.1em; }

.lp-domicilio-banner .btn { margin-left: auto; flex-shrink: 0; }



/* ====================================================== */

/* 4. SECCIÓN SERVICIOS DETALLADOS - ACORDEÓN (RESTAURADO) */

/* ====================================================== */

.lp-accordion-container {

display: flex;

flex-direction: column;

gap: 15px;

}

.lp-accordion-item {

border: 1px solid #e0e0e0;

border-radius: 8px;

overflow: hidden;

background-color: #fff;

}

.lp-service-item-trigger {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px;

font-size: 1.2em;

font-weight: 700;

color: #005a9c;

cursor: pointer;

transition: background-color 0.3s ease;

}

.lp-service-item-trigger:hover { background-color: #f8f9fa; }

.lp-service-item-trigger span i { margin-right: 15px; color: #007bff; }

.lp-service-item-trigger .fa-chevron-down { transition: transform 0.3s ease; font-size: 0.8em; }

.lp-service-item-trigger.active .fa-chevron-down { transform: rotate(180deg); }

.lp-service-details {

max-height: 0;

overflow: hidden;

transition: max-height 0.4s ease-out, padding 0.4s ease-out;

background-color: #f8f9fa;

padding: 0 20px;

border-top: 1px solid #e0e0e0;

}

.lp-service-details.active {

max-height: 400px;

padding: 20px;

}

.lp-service-details ul {

list-style-type: none;

padding-left: 5px;

margin: 0;

display: flex;

flex-wrap: wrap;

gap: 10px 20px;

}

.lp-service-details li {

color: #555;

flex-basis: calc(33.33% - 20px);

}

.lp-service-details li::before {

content: '✓';

color: #007bff;

margin-right: 8px;

font-weight: bold;

}



/* ====================================================== */

/* 5. SECCIÓN OBRAS SOCIALES (RESTAURADO) */

/* ====================================================== */

.lp-obras-sociales-section {

background-color: #fff; /* Fondo blanco */

padding: 50px 20px;

text-align: center;

}

.lp-obras-sociales-section h3 {

font-size: 1.3em;

color: #555;

margin-top: -30px;

margin-bottom: 40px;

font-weight: 400;

}

.logos-container {

width: 100%;

overflow: hidden;

position: relative;

mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

}

.logos-scroll {

display: flex;

/* Cálculo para 16 logos x 2 */

width: calc(150px * 32 + 40px * 31);

gap: 40px;

padding: 10px 0;

animation: scroll 60s linear infinite;

}

.logos-scroll img {

height: 60px;

width: 150px;

object-fit: contain;

filter: grayscale(100%);

opacity: 0.7;

transition: filter 0.3s, opacity 0.3s;

}

.logos-scroll:hover img {

filter: grayscale(0%);

opacity: 1;

}

.logos-scroll:hover {

animation-play-state: paused;

}

@keyframes scroll {

0% { transform: translateX(0); }

100% { transform: translateX(calc(-1 * (150px * 16 + 40px * 16))); }

}

.consulta-tuya {

margin-top: 40px;

font-size: 1.2em;

font-weight: 700;

color: #005a9c;

}



/* ====================================================== */

/* 6. FOOTER y BOTÓN FLOTANTE (RESTAURADO) */

/* ====================================================== */

.lp-footer {

background-color: #002850;

color: #f4f4f4;

padding: 40px 20px;

text-align: center;

}

.lp-footer-title {

font-size: 1.3em;

font-weight: 700;

margin: 0 0 20px 0;

}

.lp-footer-data {

display: flex;

justify-content: center;

gap: 30px;

font-size: 1.1em;

color: #c0c0c0;

}

.lp-footer-data span i {

margin-right: 8px;

color: #007bff;

}

.lp-floating-whatsapp {

position: fixed;

bottom: 25px;

right: 25px;

background-color: #25D366;

color: #fff !important; /* Forzar color blanco */

width: 60px;

height: 60px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 2.5em;

text-decoration: none;

box-shadow: 0 4px 10px rgba(0,0,0,0.2);

z-index: 99;

transition: transform 0.2s;

}

.lp-floating-whatsapp i {

color: #fff !important; /* Forzar color blanco */

}

.lp-floating-whatsapp:hover {

transform: scale(1.1);

}



/* ====================================================== */

/* 7. RESPONSIVE DESIGN (Completo) */

/* ====================================================== */

@media (max-width: 992px) { /* Tablets */

.lp-header-v10 .lp-header-tagline { font-size: 1.1em; }


.lp-blocks-grid-v10 {

grid-template-columns: 1fr; /* 1 columna */

}


.lp-hero-section-v10 { padding: 60px 0; min-height: auto; }

.lp-blocks-container { margin-top: 30px; }

.key-info-box-v10 { min-height: auto; padding: 25px; }

.key-info-box-v10 i { font-size: 3em; }

.key-info-box-v10 h3 { font-size: 1.3em; }

.key-info-box-v10 p { font-size: 0.9em; }


.lp-section { padding: 40px 20px; }

.lp-section-title { font-size: 2em; margin-bottom: 30px;}

.lp-accordion-container { gap: 10px; }

.lp-service-item-trigger { font-size: 1.1em; padding: 18px 20px;}

.lp-domicilio-banner { flex-direction: column; text-align: center; gap: 20px; }

.lp-domicilio-banner .btn { margin-left: 0; }

.lp-footer-data { flex-direction: column; gap: 15px; }


.lp-service-details li { flex-basis: calc(50% - 20px); }


.logos-scroll { animation-duration: 45s; gap: 30px; }

.logos-scroll img { height: 50px; width: 120px; }

.logos-scroll { width: calc(120px * 32 + 30px * 31); }

@keyframes scroll {

0% { transform: translateX(0); }

100% { transform: translateX(calc(-1 * (120px * 16 + 30px * 16))); }

}

}

@media (max-width: 576px) { /* Móviles */

.lp-header-v10 .container { flex-direction: column; justify-content: center; }

.lp-header-v10 .lp-header-tagline { position: static; transform: none; text-align: center; margin-top: 10px; font-size: 1em; white-space: normal; }

.lp-blocks-grid-v10 { grid-template-columns: 1fr; }

.key-info-box-v10 { min-height: auto; padding: 20px; }

.key-info-box-v10 i { font-size: 2.5em; }

.key-info-box-v10 h3 { font-size: 1.2em; }

.key-info-box-v10 p { font-size: 0.85em; }

.key-info-box-v10 .btn, .key-info-box-v10 .key-info-link { font-size: 0.9em; }

.lp-domicilio-banner i { font-size: 3em; }

.lp-domicilio-text h3 { font-size: 1.5em; }

.lp-domicilio-text p { font-size: 1em; }

.lp-service-item { font-size: 1em; }

.lp-service-details li { flex-basis: 100%; }

}