/* =====================================================
   MAIN CSS
   OPTIMIZACIÓN CANARIAS V2
   ESTILOS GLOBALES
===================================================== */


/* =====================================================
   RESET GLOBAL BÁSICO
===================================================== */

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

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    font-family: var(--font-main);

    color: var(--color-text);

    background: var(--color-white);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}


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

.container {

    width: 100%;

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

    margin: 0 auto;

    padding-left: var(--container-padding);

    padding-right: var(--container-padding);

}


/* =====================================================
   IMÁGENES
===================================================== */

img {

    max-width: 100%;

    height: auto;

    display: block;

}


/* =====================================================
   ENLACES
===================================================== */

a {

    color: inherit;

}


/* =====================================================
   TÍTULOS
===================================================== */

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

    margin-top: 0;

    color: var(--color-primary);

    font-family: var(--font-main);

    font-weight: var(--font-bold);

}


/* =====================================================
   PÁRRAFOS
===================================================== */

p {

    margin-top: 0;

}


/* =====================================================
   LISTAS
===================================================== */

ul,
ol {

    margin-top: 0;

}


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

button,
input,
select,
textarea {

    font-family: inherit;

}


/* =====================================================
   SECCIONES
===================================================== */

section {

    width: 100%;

    position: relative;

}


/* =====================================================
   BADGES GLOBALES
===================================================== */

.section-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: max-content;

    padding: 10px 22px;

    background: var(--color-secondary-light);

    color: var(--color-secondary);

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

    font-size: var(--text-sm);

    font-weight: var(--font-bold);

}


/* =====================================================
   TEXTOS DE SECCIÓN
===================================================== */

.section-text {

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

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

    font-size: var(--text-lg);

    line-height: 1.8;

}


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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 20px 38px;

    border: none;

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

    font-size: var(--text-md);

    font-weight: var(--font-bold);

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition: var(--transition-normal);

}


/* =====================================================
   BOTÓN PRINCIPAL
===================================================== */

.btn-primary {

    background: var(--color-secondary);

    color: var(--color-white);

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

}


.btn-primary:hover {

    background: var(--color-secondary-dark);

    transform: translateY(-5px);

    box-shadow:
        0 28px 55px rgba(125, 170, 61, 0.40);

}


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

.btn-secondary {

    background: var(--color-primary);

    color: var(--color-white);

}


.btn-secondary:hover {

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

    transform: translateY(-5px);

}


/* =====================================================
   BOTÓN HEADER
===================================================== */

.btn-header {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 24px;

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

    background: var(--color-secondary);

    color: var(--color-white);

    font-weight: var(--font-bold);

    text-decoration: none;

    transition: var(--transition-normal);

}


.btn-header:hover {

    background: var(--color-secondary-dark);

    transform: translateY(-2px);

}


/* =====================================================
   TARJETAS GLOBALES
===================================================== */

.benefit-card,
.servicio,
.beneficio-card,
.cliente-card,
.calculadora-box,
.cta-card {

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

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

}


/* =====================================================
   FOCUS PARA ACCESIBILIDAD
===================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline: 3px solid var(--color-secondary);

    outline-offset: 4px;

}