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

    ENFERMERAS EN SU CASA®

    Archivo : style.css
    Versión : 2.0
    Fecha   : Julio 2026

    ------------------------------------------------------------------
    SISTEMA DE DISEÑO OFICIAL
    ------------------------------------------------------------------

    Este archivo contiene todos los estilos globales del sitio web
    de Enfermeras En Su Casa®.

    Su objetivo es proporcionar un diseño consistente, escalable,
    accesible y fácil de mantener para todas las páginas del sitio.

    Estructura

    01. Variables Globales
    02. Reset
    03. Estilos Base
    04. Tipografía
    05. Contenedores
    06. Header
    07. Navegación
    08. Hero
    09. Botones
    10. Componentes
    11. Servicios
    12. Beneficios
    13. Cobertura
    14. CTA
    15. Blog
    16. Footer
    17. Utilidades
    18. Animaciones
    19. Responsive

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


/*==============================================================
01. VARIABLES GLOBALES
==============================================================*/

:root{

    /*======================
      COLORES CORPORATIVOS
    ======================*/

    --color-primary:#0C5A8A;
    --color-secondary:#2E8B57;
    --color-accent:#4CAF50;

    --color-white:#FFFFFF;
    --color-black:#1F1F1F;

    --color-text:#555555;
    --color-text-light:#777777;

    --color-background:#F7F9FA;
    --color-surface:#FFFFFF;

    --color-border:#E5E7EB;

    /*======================
      TIPOGRAFÍA
    ======================*/

    --font-primary:'Poppins',sans-serif;

    /*======================
      CONTENEDOR
    ======================*/

    --container-width:1200px;

    /*======================
      ESPACIADOS
    ======================*/

    --space-xs:0.5rem;
    --space-sm:1rem;
    --space-md:1.5rem;
    --space-lg:2.5rem;
    --space-xl:4rem;
    --space-xxl:6rem;

    /*======================
      BORDES
    ======================*/

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:20px;
    --radius-pill:999px;

    /*======================
      SOMBRAS
    ======================*/

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);
    --shadow-md:0 12px 30px rgba(0,0,0,.12);
    --shadow-lg:0 20px 45px rgba(0,0,0,.18);

    /*======================
      TRANSICIONES
    ======================*/

    --transition:all .30s ease;
    /*======================
      Z-INDEX
    ======================*/

    --z-header:1000;
    --z-menu:1010;
    --z-modal:2000;
    --z-overlay:1990;

    /*======================
      HEADER
    ======================*/

    --header-height:90px;

    /*======================
      BOTONES
    ======================*/

    --button-padding-y:16px;
    --button-padding-x:32px;

    /*======================
      EFECTOS
    ======================*/

    --hover-scale:1.03;
}


/*==============================================================
02. RESET
==============================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/*==============================================================
03. ESTILOS BASE
==============================================================*/

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-primary);
    font-size:16px;
    font-weight:400;
    line-height:1.7;

    background:var(--color-background);
    color:var(--color-text);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;

}

img{

    display:block;
    max-width:100%;
    height:auto;
    object-fit:cover;

}
a{

    color:inherit;
    text-decoration:none;
    transition:var(--transition);

}

a:focus-visible{

    outline:3px solid var(--color-secondary);
    outline-offset:4px;
    border-radius:var(--radius-sm);

}
ul{

    list-style:none;

}

button{

    font-family:inherit;
    cursor:pointer;
    border:none;

}
/*==============================================================
04. CONTENEDOR PRINCIPAL
==============================================================*/

.container{

    width:100%;
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 var(--space-md);

}


/*==============================================================
05. TIPOGRAFÍA GLOBAL
==============================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--color-primary);
    font-weight:700;
    line-height:1.2;
    margin-bottom:var(--space-md);

}

h1{

    font-size:3.2rem;

}

h2{

    font-size:2.4rem;

}

h3{

    font-size:1.6rem;

}

p{

    margin-bottom:var(--space-md);
    color:var(--color-text);

}

.section{

    padding:var(--space-xxl) 0;

}

.section-title{

    text-align:center;
    margin-bottom:var(--space-xl);

}

.section-title span{

    display:inline-block;
    color:var(--color-secondary);
    font-weight:600;
    margin-bottom:var(--space-xs);
    text-transform:uppercase;
    letter-spacing:1px;

}

.section-title h2{

    margin-bottom:var(--space-sm);

}

.section-title p{

    max-width:700px;
    margin:0 auto;
    color:var(--color-text-light);

}
/*==============================================================
06. HEADER
==============================================================*/

.header{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:var(--header-height);

    background:var(--color-white);

    box-shadow:var(--shadow-sm);

    z-index:var(--z-header);

    transition:var(--transition);

}
.header-container{

    width:100%;
    max-width:var(--container-width);

    height:100%;

    margin:0 auto;

    padding:0 var(--space-md);

    display:flex;
    align-items:center;
    justify-content:space-between;

}
.logo{

    display:flex;
    align-items:center;

}
.logo img{

    width:220px;
    height:auto;
    display:block;

}
/*==============================================================
07. NAVEGACIÓN
==============================================================*/

.main-nav{

    display:flex;
    align-items:center;

}
.main-nav ul{

    display:flex;
    align-items:center;
    gap:var(--space-lg);

}
.main-nav li{

    position:relative;

}
.main-nav a{

    display:flex;
    align-items:center;

    font-size:1rem;
    font-weight:500;

    color:var(--color-primary);

    transition:var(--transition);

}
.main-nav a:hover{

    color:var(--color-secondary);

}
/*==============================================================
09. BOTONES
==============================================================*/

.btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:var(--button-padding-y) var(--button-padding-x);

    background:var(--color-primary);
    color:var(--color-white);

    font-size:1rem;
    font-weight:600;

    border-radius:var(--radius-pill);

    transition:var(--transition);

    cursor:pointer;

}
.btn-primary:hover{

    background:var(--color-secondary);

    transform:scale(var(--hover-scale));

}

/*==============================================================
BOTÓN SECUNDARIO
==============================================================*/

.btn-secondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:var(--button-padding-y) var(--button-padding-x);

    background:transparent;

    color:var(--color-primary);

    border:2px solid var(--color-primary);

    border-radius:var(--radius-pill);

    font-size:1rem;
    font-weight:600;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:var(--color-primary);

    color:var(--color-white);

    transform:scale(var(--hover-scale));

}
/*==============================================================
08. HERO
==============================================================*/

.hero{

    padding-top:calc(var(--header-height) + var(--space-xxl));
    padding-bottom:var(--space-xxl);

    background:var(--color-background);

}
.hero-container{

    width:100%;
    max-width:var(--container-width);

    margin:0 auto;

    padding:0 var(--space-md);

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:var(--space-xxl);

}
.hero-content{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

}
.hero-content h1{

    font-size:3.5rem;
    line-height:1.15;

    margin-bottom:var(--space-md);

    color:var(--color-primary);

}
.hero-content p{

    font-size:1.15rem;
    line-height:1.8;

    color:var(--color-text);

    margin-bottom:var(--space-lg);

    max-width:600px;

}
/*==============================================================
HERO - MENSAJE DE CONFIANZA
==============================================================*/

.hero-confianza{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:var(--space-lg);

    padding:14px 18px;

    background:#F5FBF8;

    border-left:4px solid var(--color-secondary);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

}

.hero-confianza i{

    color:var(--color-secondary);

    font-size:1.3rem;

    flex-shrink:0;

}

.hero-confianza p{

    margin:0;

    font-size:.98rem;

    line-height:1.6;

    color:var(--color-text);

}
/*==============================================================
HERO - BENEFICIOS
==============================================================*/

.hero-beneficios{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:var(--space-xl);

}/*==============================================================
HERO - TARJETAS DE BENEFICIOS
==============================================================*/

.beneficio-item{

    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:22px;

    background:var(--color-white);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    border:1px solid transparent;

}

.beneficio-item:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

    border-color:rgba(12,90,138,.15);

}
/*==============================================================
ICONOS DE BENEFICIOS
==============================================================*/

.beneficio-item i{

    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(12,90,138,.08);

    color:var(--color-primary);

    font-size:1.5rem;

    transition:var(--transition);

}

.beneficio-item:hover i{

    background:var(--color-primary);

    color:var(--color-white);

}
.hero-buttons{

    display:flex;
    align-items:center;
    gap:var(--space-md);

    flex-wrap:wrap;

}
/*==============================================================
CONTENIDO DE LAS TARJETAS DE BENEFICIOS
==============================================================*/

.beneficio-item h3{

    margin-bottom:8px;

    font-size:1.15rem;

    color:var(--color-primary);

    font-weight:600;

    line-height:1.3;

}

.beneficio-item p{

    margin:0;

    font-size:.95rem;

    line-height:1.7;

    color:var(--color-text-light);

}
.hero-image{

    display:flex;
    justify-content:center;
    align-items:center;

}
.hero-image img{

    width:100%;
    max-width:550px;
    height:auto;

}
/*==============================================================
10. SERVICIOS
==============================================================*/

.services{

    padding:var(--space-xxl) 0;

    background:var(--color-white);

}
.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:var(--space-lg);

    margin-top:var(--space-xl);

}