/* Reset básico y tipografía */ body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; background-color: #f7f7f7; color: #333; line-height: 1.6; } /* Cabecera */ header { background: linear-gradient(135deg, #2c2c2c, #1a1a1a); color: white; text-align: center; padding: 2rem 1rem; } header h1 { margin: 0; font-size: 2.2rem; } /* Hero */ .hero { background: url('fachada1.jpg') center/cover no-repeat; height: 300px; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); text-align: center; } .hero h2 { font-size: 2rem; background-color: rgba(0, 0, 0, 0.5); padding: 0.5rem 1.2rem; border-radius: 8px; } /* Contenido principal */ .content { max-width: 1000px; margin: auto; padding: 2.5rem 1.5rem; } section { margin-bottom: 3rem; } /* Títulos de sección */ h3 { color: #205072; border-bottom: 2px solid #67b26f; padding-bottom: 0.5rem; font-size: 1.8rem; margin-bottom: 1.5rem; } /* Listas */ ul { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 1rem; } ul li { font-size: 1.2rem; padding: 0.8rem 1rem; background-color: #f0f4f9; border-left: 4px solid #205072; border-radius: 6px; position: relative; } /* Formulario */ form { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } input, textarea { padding: 1rem; border: 1px solid #ccc; border-radius: 5px; font-family: inherit; font-size: 1rem; width: 100%; box-sizing: border-box; } button { background-color: #205072; color: white; padding: 1rem; border: none; cursor: pointer; font-weight: bold; font-size: 1rem; border-radius: 5px; transition: background-color 0.3s ease; } button:hover { background-color: #163d52; } /* Footer */ footer { background-color: #1c1c1c; color: #ccc; text-align: center; padding: 1.5rem; margin-top: 4rem; font-size: 0.95rem; } /* Página gracias.html */ body.gracias { background: linear-gradient(to right, #f4f7fb, #e8f0fa); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .gracias-container { background-color: #ffffff; padding: 40px 30px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); text-align: center; max-width: 600px; width: 90%; } .gracias-container h1 { font-size: 2rem; color: #0057a1; margin-bottom: 20px; } .gracias-container p { font-size: 1.15em; color: #333; } .btn-volver { display: inline-block; margin-top: 25px; background-color: #205072; color: #fff; text-decoration: none; padding: 14px 28px; border-radius: 6px; font-weight: 600; transition: background-color 0.3s; } .btn-volver:hover { background-color: #163d52; } /* Responsive */ @media (max-width: 768px) { header h1 { font-size: 1.8rem; } .hero h2 { font-size: 1.5rem; padding: 0.4rem 0.8rem; } h3 { font-size: 1.5rem; } ul li { font-size: 1.05rem; } .gracias-container h1 { font-size: 1.6rem; } } @media (max-width: 480px) { .hero { height: 200px; } .hero h2 { font-size: 1.3rem; } .gracias-container { padding: 30px 20px; } .btn-volver { width: 100%; padding: 12px; } }