/*
Theme Name: NexaSalud Theme
Theme URI: https://nexasalud.com/
Author: Tu Nombre
Author URI: https://tuwebsite.com/
Description: Tema personalizado para NexaSalud, basado en el diseño inicial.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: landing-page, custom-background, one-column
Text Domain: nexasalud-theme
*/

/* Custom styles based on brand manual */
body {
    font-family: 'Inter', sans-serif;
}

:root {
    --nexa-blue: #0A2E53;
    --nexa-turquoise: #2DD8C1;
    --nexa-green: #9CE534;
    --nexa-gray: #4F4F4F;
    --whatsapp-green: #25D366;
}

.bg-nexa-blue { background-color: var(--nexa-blue); }
.text-nexa-blue { color: var(--nexa-blue); }
.bg-nexa-turquoise { background-color: var(--nexa-turquoise); }
.text-nexa-turquoise { color: var(--nexa-turquoise); }
.border-nexa-turquoise { border-color: var(--nexa-turquoise); }
.bg-nexa-green { background-color: var(--nexa-green); }
.text-nexa-green { color: var(--nexa-green); }
.text-nexa-gray { color: var(--nexa-gray); }
.bg-whatsapp-green { background-color: var(--whatsapp-green); }

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Custom gradient for hero section */
.hero-gradient {
    background: linear-gradient(135deg, rgba(10, 46, 83, 0.95) 0%, rgba(10, 46, 83, 0.85) 100%);
}

/* Custom Logo Size - Mobile First */
.custom-logo {
    max-width: 150px; /* Tamaño base para móvil */
    height: auto;
}

/* Desktop Logo Size */
@media (min-width: 768px) {
    .custom-logo {
        max-width: 200px; /* Tamaño más grande para escritorio */
    }
}

/* --- NUEVO: Estilos para los campos de formulario --- */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #f9fafb; /* Equivalente a bg-gray-50 de Tailwind */
    border: 1px solid #d1d5db; /* Equivalente a border-gray-300 de Tailwind */
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: #2DD8C1; /* Color turquesa de la marca */
    box-shadow: 0 0 0 2px rgba(45, 216, 193, 0.5); /* Anillo de enfoque */
}