@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Noto+Sans:wght@400;600;700&display=swap');
:root { --rojo: #c60e32; --negro: #070707; --blanco: #ffffff; --gris: #f4f4f4 }
* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { font-family: Arial, Helvetica, sans-serif; background: #fff; color: #333; line-height: 1.6 }
.container { width: 90%; max-width: 1200px; margin: auto }
header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(7, 7, 7, .95); z-index: 999; border-bottom: 1px solid rgba(255, 255, 255, .08) }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 }
.logo { width: 150px }
.logo img { position: absolute; width: 170px; margin-top: -27px }
nav ul { list-style: none; display: flex; gap: 30px }
nav a { color: #fff; text-decoration: none; transition: .3s; font-family: montserrat, sans-serif; font-weight: 600; font-size: 16px }
nav a:hover { color: var(--rojo) }
nav ul li img { width: 90px; position: absolute; margin-top: -9px; }
nav ul li.logobase { width: 90px; }
.menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; z-index: 1001 }
.menu-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s }
.menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg) }
.menu-toggle.active span:nth-child(2) { opacity: 0 }
.menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg) }
.hero { padding-top: 70px; min-height: 100vh; background: linear-gradient(#07070700 70%, #070707cc 100%), url(fnd_desktop.png); background-size: cover; background-position: center; display: flex; align-items: center; color: #fff }
.hero-content { max-width: 650px }
.hero h4 { color: var(--rojo); font-size: 22px; margin-bottom: 10px }
.hero h1 { font-size: 72px; line-height: 1; margin-bottom: 20px }
.hero p { font-size: 20px; margin-bottom: 30px }
#logobasemob{display: none;}
.btn { display: inline-block; background: var(--rojo); color: #fff; text-decoration: none; padding: 15px 35px; font-weight: bold; transition: .3s; border-radius: 12px }
.btn:hover { background: var(--blanco); color: var(--negro) }
.btn i { font-size: 22px }
.destacados { background: var(--rojo); color: #fff; padding: 80px 0 }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }
.card-dest { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between }
.card-dest img { width: 200px; margin-bottom: 20px }
.card-dest h3 { margin-bottom: 15px; font-size: 20px; font-family: 'Montserrat' }
section { padding: 100px 0 }
.titulo { text-align: center; margin-bottom: 60px }
.titulo h2 { color: var(--rojo); font-size: 42px; margin-bottom: 10px }
.titulo p { color: #666 }
.experiencia { background: #fafafa }
.timeline { max-width: 900px; margin: auto }
.item { background: #fff; padding: 30px; margin-bottom: 25px; border-left: 5px solid var(--rojo); box-shadow: 0 10px 30px rgba(0, 0, 0, .08) }
.item h3 { color: var(--rojo) }
.mujer { background: var(--negro); color: #fff }
.mujer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center }
.mujer-img { min-height: 450px; background: url('imagen-genn.png') center center; background-size: cover; border-radius: 12px }
.mujer h2 { color: var(--rojo); font-size: 48px; margin-bottom: 20px; line-height: 52px }
.propuestas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px }
.propuesta { background: #fff; border: 1px solid #eee; padding: 35px; text-align: center; box-shadow: 0 10px 25px rgba(0, 0, 0, .06) }
.propuesta h3 { color: var(--rojo); margin-bottom: 15px }
.franja { background: linear-gradient(rgba(198, 14, 50, .88), rgba(198, 14, 50, .88)), url('img/fondo.jpg'); background-size: cover; background-position: center; color: #fff; text-align: center; padding: 120px 20px }
.franja h2 { font-size: 50px; margin-bottom: 15px }
.contacto { background: #f5f5f5 }
form { max-width: 900px; margin: auto }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px }
input, textarea { width: 100%; padding: 16px; border: 2px solid #e8e8e8; font-size: 16px; border-radius: 12px }
input:focus, textarea:focus { outline: none; border-color: var(--rojo) }
textarea { height: 180px; resize: vertical }
.form-submit { text-align: center; margin-top: 25px }
button { background: var(--rojo); color: #fff; border: none; padding: 15px 40px; cursor: pointer; font-size: 16px; font-weight: bold; border-radius: 12px }
footer { background: var(--negro); color: #fff; padding: 60px 0 }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px }
footer h3 { color: var(--rojo); margin-bottom: 15px }
.copy { text-align: center; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 40px; padding-top: 25px; font-size: 14px }
.copy .fa-heart { color: var(--rojo) }
#propuestas-acordeon { padding: 80px 20px; background-color: var(--rojo) }
#propuestas-acordeon .section-title { text-align: center; max-width: 900px; margin: 0 auto 50px }
#propuestas-acordeon .section-title h2 { font-size: 42px; margin-bottom: 15px; line-height: 40px; color: #fff }
#propuestas-acordeon .section-title p { font-size: 18px; color: #fff; line-height: 22px }
.accordion { max-width: 1000px; margin: 0 auto }
.accordion-item { margin-bottom: 15px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1) }
.accordion-header { width: 100%; padding: 22px 25px; border: none; background: #fafafa; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700; text-align: left; color: #000; border-radius: 0 }
.accordion-header span { font-size: 30px; line-height: 1 }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .35s ease; background: #f8f8f8 }
.accordion-content .acc-wrapper { padding: 0 30px; background-color: #fff; border-top: 2px solid #ebebeb }
.accordion-content ul { padding: 0 25px }
.accordion-content p { padding: 0 }
.accordion-content p { padding-top: 25px; margin-bottom: 20px }
.accordion-content p strong { color: var(--rojo) }
.accordion-content ul { padding-bottom: 25px }
.accordion-content li { margin-bottom: 0 }
#huincha { width: 100%; overflow: hidden; background: var(--blanco); padding: 14px 0; white-space: nowrap; position: relative }
#huincha .huincha-track { display: flex; width: max-content; animation: huincha 25s linear infinite }
#huincha span { display: flex; align-items: center; gap: 12px; margin-right: 60px; font-size: 17px; font-weight: 700; color: var(--negro); text-transform: uppercase; letter-spacing: -1px; font-family: 'Montserrat' }
#huincha i { font-size: 22px; color: var(--rojo) }
@keyframes huincha {
    from { transform: translateX(0) }
    to { transform: translateX(-50%) }
}
#huincha:hover .huincha-track { animation-play-state: paused }
@media(max-width:900px) {
    .hero h1 { font-size: 48px }
    .grid-3, .propuestas-grid, .mujer-grid, .footer-grid, .form-row { grid-template-columns: 1fr }
    .mujer-img { min-height: 300px }
}
@media (max-width:768px) {
    .hero { min-height: 90vh; background: linear-gradient(#07070700 90%, #070707cc 100%), url(fnd_mobile.png); background-size: cover; background-position: center; display: flex; align-items: center; color: #fff }
    .hero-content { margin-top: -50px }
    .mujer h2 { line-height: 48px }
    .titulo h2 { line-height: 42px }
    .menu-toggle { display: flex }
    nav { position: fixed; top: 0; right: -100%; width: 75%; max-width: 300px; height: 100vh; background: rgba(7, 7, 7, .98); z-index: 1000; transition: right .3s ease; padding-top: 80px; box-shadow: -4px 0 20px rgba(0, 0, 0, .5) }
    nav.open { right: 0 }
    nav ul { flex-direction: column; gap: 0; padding: 0 30px }
    nav ul li { border-bottom: 1px solid rgba(255, 255, 255, .07) }
    nav a { display: block; padding: 16px 0; font-size: 16px }
    .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 99 }
    .nav-overlay.active { display: block }
    .hero { min-height: 100vh; background: linear-gradient(#07070700, #070707cc), url(fnd_mobile.png); background-size: cover; background-position: center; display: flex; align-items: center; color: #fff }
    nav ul li img, nav ul li.logobase { display: none;}
    #logobasemob{display: block;width: 100px;position: absolute;left: 50%;margin-left: -50px;margin-top: -60px;}
    #logobasemob img{width:100%;border-radius: 3px;}
}