/*
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 */
}

/* Brand Gradient */
.bg-nexa-gradient {
    background: linear-gradient(135deg, var(--nexa-turquoise) 0%, var(--nexa-blue) 100%);
}