/*==================================================*
* RESET Y VARIABLES
*==================================================*/

:root {
    --azul: #203A73;
    --azul-hover: #162957;

    --fondo: #f5f7fb;

    --blanco: #ffffff;

    --texto: #333333;

    --gris: #666666;

    --borde: #eeeeee;
}


/*==================================================*
* RESET GENERAL
*==================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: 'Poppins', sans-serif;

    background: var(--fondo);

    color: var(--texto);

    line-height: 1.6;

    padding-top: 90px;
}


img {
    max-width: 100%;

    display: block;
}


a {
    text-decoration: none;
}


button,
input,
textarea,
select {
    font-family: 'Poppins', sans-serif;
}


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

header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 90px;

    background: var(--azul);

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 8%;

    z-index: 1000;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .15);
}


/* LOGO */

.logo img {
    height: 58px;

    width: auto;

    cursor: pointer;

    transition: transform .3s ease;
}


.logo img:hover {
    transform: scale(1.05);
}


/* NAVEGACIÓN */

nav {
    display: flex;

    align-items: center;

    gap: 30px;
}


nav a {
    color: white;

    font-weight: 500;

    position: relative;

    transition: color .3s ease;
}


nav a::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: white;

    transition: width .3s ease;
}


nav a:hover::after {
    width: 100%;
}


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

.btn-primario {
    display: inline-block;

    background: white;

    color: var(--azul);

    padding: 16px 35px;

    border-radius: 40px;

    font-weight: 600;

    transition:
        transform .3s ease,
        background .3s ease;
}


.btn-primario:hover {
    transform: translateY(-3px);

    background: #dfe9ff;
}


.btn-secundario {
    display: inline-block;

    border: 2px solid white;

    color: white;

    padding: 16px 35px;

    border-radius: 40px;

    font-weight: 600;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.btn-secundario:hover {
    transform: translateY(-3px);

    background: white;

    color: var(--azul);
}


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

.titulo {
    text-align: center;

    margin-bottom: 50px;
}


/* SUBTÍTULO */

.titulo span {
    display: block;

    font-size: 13px;

    font-weight: 600;

    color: var(--azul);

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-bottom: 12px;

    line-height: 1.4;
}


/* TÍTULO */

.titulo h2 {
    font-size: 38px;

    line-height: 1.25;

    color: var(--azul);

    margin-bottom: 15px;
}


/* DESCRIPCIÓN */

.titulo p {
    color: var(--gris);

    font-size: 16px;

    max-width: 650px;

    margin: 0 auto;

    line-height: 1.6;
}

/*
 * MCPRINT CREACIONES - HERO SECTION
 * Sistema visual corporativo, geométrico e intencional.
 */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 120px 5%;
    
    /* 1. FONDO AZUL - Identidad estricta mantenida */
    background: linear-gradient(
        115deg,
        #1D3569 0%,
        #24498D 42%,
        #315FA8 75%,
        #4676C8 100%
    );
}

/* 2. PATRÓN DENSO - Matriz Matemática Rigurosa y Optimizada (Todos los nodos unificados) */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    
    opacity: 0.07;
    /* Reducido para mayor densidad (más juntos) */
    background-size: 260px 260px;
    background-repeat: repeat;
    
    /* Matriz SVG unificada: Camiseta, Taza, Cuaderno, Etiqueta, Gafete y Banner (Escalados internamente a 1.6) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='ts' transform='scale(1.6)'%3E%3Cpath d='M-5,-7 L5,-7 L9,-3 L6,0 L4,-2 L4,9 L-4,9 L-4,-2 L-6,0 L-9,-3 Z'/%3E%3C/g%3E%3Cg id='tz' transform='scale(1.6)'%3E%3Crect x='-6' y='-7' width='10' height='14' rx='1'/%3E%3Cpath d='M4,-4 C9,-4 9,3 4,3'/%3E%3C/g%3E%3Cg id='cu' transform='scale(1.6)'%3E%3Crect x='-4' y='-8' width='10' height='16' rx='1'/%3E%3Cpath d='M-4,-5 C-7,-5 -7,-2 -4,-2 M-4,0 C-7,0 -7,3 -4,3 M-4,5 C-7,5 -7,8 -4,8'/%3E%3C/g%3E%3Cg id='et' transform='scale(1.6)'%3E%3Cpath d='M-4,-8 L4,-8 L4,1 L0,6 L-4,1 Z'/%3E%3Ccircle cx='0' cy='-4.5' r='1.5'/%3E%3C/g%3E%3Cg id='ga' transform='scale(1.6)'%3E%3Crect x='-6' y='-8' width='12' height='16' rx='1.5'/%3E%3Cpath d='M-2,-5 h4 M-3,-1 h6 v4 h-6 Z M-3,6 h6'/%3E%3C/g%3E%3Cg id='ba' transform='scale(1.6)'%3E%3Crect x='-8' y='-3' width='16' height='10' rx='1'/%3E%3Cpath d='M-6,-3 L0,-8 L6,-3'/%3E%3C/g%3E%3C/defs%3E%3Cg stroke='%23FFFFFF' fill='none' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cuse href='%23ba' x='20' y='20' transform='rotate(5 20 20)'/%3E%3Cuse href='%23tz' x='60' y='20' transform='rotate(-3 60 20)'/%3E%3Cuse href='%23cu' x='100' y='20' transform='rotate(4 100 20)'/%3E%3Cuse href='%23ga' x='140' y='20' transform='rotate(-5 140 20)'/%3E%3Cuse href='%23et' x='180' y='20' transform='rotate(6 180 20)'/%3E%3Cuse href='%23ts' x='220' y='20' transform='rotate(-2 220 20)'/%3E%3Cuse href='%23cu' x='20' y='60' transform='rotate(-4 20 60)'/%3E%3Cuse href='%23ts' x='60' y='60' transform='rotate(3 60 60)'/%3E%3Cuse href='%23ba' x='100' y='60' transform='rotate(-6 100 60)'/%3E%3Cuse href='%23tz' x='140' y='60' transform='rotate(5 140 60)'/%3E%3Cuse href='%23ga' x='180' y='60' transform='rotate(-3 180 60)'/%3E%3Cuse href='%23et' x='220' y='60' transform='rotate(2 220 60)'/%3E%3Cuse href='%23et' x='20' y='100' transform='rotate(-2 20 100)'/%3E%3Cuse href='%23ga' x='60' y='100' transform='rotate(4 60 100)'/%3E%3Cuse href='%23ts' x='100' y='100' transform='rotate(-5 100 100)'/%3E%3Cuse href='%23cu' x='140' y='100' transform='rotate(3 140 100)'/%3E%3Cuse href='%23ba' x='180' y='100' transform='rotate(-4 180 100)'/%3E%3Cuse href='%23tz' x='220' y='100' transform='rotate(6 220 100)'/%3E%3Cuse href='%23tz' x='20' y='140' transform='rotate(5 20 140)'/%3E%3Cuse href='%23ba' x='60' y='140' transform='rotate(-3 60 140)'/%3E%3Cuse href='%23et' x='100' y='140' transform='rotate(4 100 140)'/%3E%3Cuse href='%23ts' x='140' y='140' transform='rotate(-5 140 140)'/%3E%3Cuse href='%23cu' x='180' y='140' transform='rotate(6 180 140)'/%3E%3Cuse href='%23ga' x='220' y='140' transform='rotate(-2 220 140)'/%3E%3Cuse href='%23ga' x='20' y='180' transform='rotate(-6 20 180)'/%3E%3Cuse href='%23cu' x='60' y='180' transform='rotate(5 60 180)'/%3E%3Cuse href='%23tz' x='100' y='180' transform='rotate(-3 100 180)'/%3E%3Cuse href='%23ba' x='140' y='180' transform='rotate(4 140 180)'/%3E%3Cuse href='%23ts' x='180' y='180' transform='rotate(-5 180 180)'/%3E%3Cuse href='%23et' x='220' y='180' transform='rotate(3 220 180)'/%3E%3Cuse href='%23ts' x='20' y='220' transform='rotate(-4 20 220)'/%3E%3Cuse href='%23et' x='60' y='220' transform='rotate(3 60 220)'/%3E%3Cuse href='%23ga' x='100' y='220' transform='rotate(-5 100 220)'/%3E%3Cuse href='%23cu' x='140' y='220' transform='rotate(6 140 220)'/%3E%3Cuse href='%23tz' x='180' y='220' transform='rotate(-2 180 220)'/%3E%3Cuse href='%23ba' x='220' y='220' transform='rotate(4 220 220)'/%3E%3C/g%3E%3C/svg%3E");
}

/* 3. BLOQUE DE CONTENIDO - Equilibrio y Jerarquía */
.hero > div,
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-top: -40px;
}

/* TEXTO SUPERIOR */
.hero .eyebrow {
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: -10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* TÍTULO */
.hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin: 0;
    padding-bottom: 8px;
    text-shadow: 0 4px 16px rgba(29, 53, 105, 0.4);
}

/* SUBTÍTULO */
.hero h2,
.hero .subtitle {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 500;
    color: #F1F5F9;
    margin: 0;
    line-height: 1.4;
}

/* DESCRIPCIÓN */
.hero p:not(.subtitle):not(.eyebrow) {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: #CBD5E1;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}

/* BOTONES */
.hero .buttons,
.hero .btn-group {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    align-items: center;
    justify-content: center;
}

.hero a,
.hero button,
.hero .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 15px 36px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.hero .buttons a:first-child,
.hero .btn-primary {
    background: #FFFFFF;
    color: #1D3569;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid transparent;
}

.hero .buttons a:first-child:hover,
.hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    background: #F8FAFC;
}

.hero .buttons a:last-child,
.hero .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
}

.hero .buttons a:last-child:hover,
.hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

/* 4. RESPONSIVE */
@media (max-width: 1024px) {
    .hero {
        padding: 100px 5%;
        min-height: auto;
    }
    
    .hero::before {
        /* Densidad adaptada proporcionalmente */
        background-size: 200px 200px; 
    }
}

@media (max-width: 768px) {
    .hero h1 {
        line-height: 1.2;
    }
    
    .hero .buttons,
    .hero .btn-group {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }
    
    .hero a,
    .hero button,
    .hero .btn {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 80px 20px;
    }
    
    .hero::before {
        /* Densidad adaptada proporcionalmente */
        background-size: 160px 160px;
    }
}

/*==================================================*
* SECCIÓN NOSOTROS — INDEX
*==================================================*/

.nosotros {
    padding: 40px 8% 90px;

    background: white;
}


.contenedor {
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


.imagen img {
    width: 100%;

    border-radius: 18px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .15);
}


.texto span {
    color: var(--azul);

    font-weight: 600;

    letter-spacing: 2px;
}


.texto h2 {
    font-size: 42px;

    line-height: 1.25;

    color: var(--azul);

    margin: 20px 0;
}


.texto p {
    margin-bottom: 20px;

    color: #555;

    line-height: 1.9;
}


/*==================================================*
* DATOS DEL INDEX
*==================================================*/

.info {
    display: grid;

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

    gap: 20px;

    margin-top: 35px;
}


.info-item {
    background: #f4f7fc;

    padding: 25px;

    border-radius: 12px;

    border-left: 5px solid var(--azul);
}


.info-item h3 {
    color: var(--azul);

    margin-bottom: 10px;

    font-size: 20px;
}


.info-item p {
    margin-bottom: 0;

    font-size: 14px;

    line-height: 1.6;
}


/*==================================================*
* PÁGINA NOSOTROS
*==================================================*/

.nosotros-section {
    padding: 55px 8% 90px;

    background: var(--fondo);
}


.nosotros-container {
    max-width: 1200px;

    margin: 0 auto;
}


/*==================================================*
* MISIÓN Y VISIÓN
*==================================================*/

.nosotros-grid-mv {
    display: grid;

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

    gap: 35px;

    margin-bottom: 75px;
}


.mv-card {
    background: white;

    padding: 42px 38px;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .06);

    border-top: 4px solid var(--azul);

    display: flex;

    flex-direction: column;

    min-height: 285px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.mv-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .09);
}


.mv-icon {
    color: var(--azul);

    margin-bottom: 22px;

    display: flex;

    align-items: center;
}


.mv-icon svg {
    width: 38px;

    height: 38px;
}


.mv-card h3 {
    color: var(--azul);

    font-size: 24px;

    line-height: 1.3;

    margin-bottom: 14px;
}


.mv-card p {
    color: var(--gris);

    font-size: 15px;

    line-height: 1.75;

    margin: 0;
}


/*==================================================*
* VALORES
*==================================================*/

.nosotros-valores {
    text-align: center;
}


.valores-header h3 {
    color: var(--azul);

    font-size: 28px;

    line-height: 1.3;

    margin-bottom: 8px;
}


.valores-header p {
    color: var(--gris);

    font-size: 15px;

    margin-bottom: 40px;
}


.valores-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}


.valor-item {
    background: white;

    padding: 30px 25px;

    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .04);

    text-align: left;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.valor-item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .07);
}


.valor-numero {
    font-size: 34px;

    font-weight: 800;

    color: var(--azul);

    margin-bottom: 10px;

    line-height: 1;
}


.valor-item h4 {
    color: var(--azul);

    font-size: 19px;

    line-height: 1.3;

    margin-bottom: 9px;
}


.valor-item p {
    color: var(--gris);

    font-size: 14px;

    line-height: 1.65;

    margin: 0;
}

/*==================================================*
* PRODUCTOS Y SERVICIOS
*==================================================*/

.productos-servicios {
    padding: 55px 8% 90px;

    background: var(--fondo);
}


.productos-servicios > .titulo {
    margin-bottom: 55px;
}


/*==================================================*
* CATÁLOGO
*
* 3 ARRIBA
* 2 ABAJO CENTRADOS
*==================================================*/

.catalogo-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 35px;
}


/*
    Cada tarjeta ocupa 2 de las 6 columnas:

    2 + 2 + 2 = 6

    Por eso entran exactamente 3
    en la primera fila.
*/

.card-producto {
    grid-column: span 2;

    background: white;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .07);

    display: flex;

    flex-direction: column;

    min-height: 520px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.card-producto:hover {
    transform: translateY(-7px);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .11);
}


/*
    Las tarjetas 4 y 5 se colocan
    manualmente en el centro.
*/

.card-producto:nth-child(4) {
    grid-column: 2 / span 2;
}


.card-producto:nth-child(5) {
    grid-column: 4 / span 2;
}


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

.product-slider {
    position: relative;

    width: 100%;

    height: 250px;

    overflow: hidden;

    background: #f1f1f1;
}


.slider-img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    cursor: zoom-in;

    transition:
        transform .3s ease;
}


.slider-img:hover {
    transform: scale(1.03);
}


/*==================================================*
* FLECHAS
*==================================================*/

.slider-btn {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background:
        rgba(32, 58, 115, .75);

    color: white;

    font-size: 16px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

    transition:
        background .3s ease,
        transform .2s ease;
}


.slider-btn:hover {
    background: var(--azul);

    transform:
        translateY(-50%)
        scale(1.08);
}


.prev-btn {
    left: 12px;
}


.next-btn {
    right: 12px;
}


/*==================================================*
* TEXTO DE PRODUCTOS
*==================================================*/

.card-producto h3 {
    color: var(--azul);

    font-size: 21px;

    line-height: 1.35;

    padding: 24px 28px 10px;

    min-height: 82px;
}


.card-producto p {
    color: var(--gris);

    font-size: 14px;

    line-height: 1.7;

    padding: 0 28px;

    margin-bottom: 25px;

    flex-grow: 1;
}


/*==================================================*
* BOTÓN COTIZAR PRODUCTO
*==================================================*/

.btn-cotizar {
    display: block;

    width: calc(100% - 56px);

    margin: 0 28px 28px;

    padding: 13px 20px;

    background: var(--azul);

    color: white;

    text-align: center;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 600;

    transition:
        background .3s ease,
        transform .3s ease;
}


.btn-cotizar:hover {
    background: var(--azul-hover);

    transform: translateY(-2px);
}


/*==================================================*
* ¿POR QUÉ ELEGIRNOS?
*==================================================*/

.porque {
    padding: 40px 8% 90px;

    background: white;
}


.porque-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 25px;
}


.porque-card {
    background: var(--fondo);

    padding: 35px;

    border-radius: 15px;

    border-top: 5px solid var(--azul);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.porque-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, .08);
}


.porque-card h3 {
    color: var(--azul);

    margin-bottom: 15px;

    font-size: 20px;

    line-height: 1.35;
}


.porque-card p {
    color: var(--gris);

    line-height: 1.8;

    font-size: 14px;
}


/*==================================================*
* NUESTRO PROCESO
*==================================================*/

.proceso {
    padding: 40px 8% 90px;

    background: var(--azul);
}


.proceso .titulo span,
.proceso .titulo h2 {
    color: white;
}


.proceso .titulo p {
    color: rgba(255, 255, 255, .82);
}


.proceso-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 30px;
}


.paso {
    background: white;

    padding: 35px;

    border-radius: 18px;

    text-align: center;
}


.numero {
    width: 70px;

    height: 70px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: var(--azul);

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 26px;

    font-weight: bold;
}


.paso h3 {
    color: var(--azul);

    margin-bottom: 15px;

    font-size: 20px;
}


.paso p {
    color: var(--gris);

    line-height: 1.8;

    font-size: 14px;
}


/*==================================================*
* TESTIMONIOS
*==================================================*/

.testimonios {
    padding: 40px 8% 90px;

    background: var(--fondo);
}


.testimonios-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;
}


.testimonio {
    background: white;

    padding: 40px;

    border-radius: 18px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.testimonio:hover {
    transform: translateY(-5px);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .10);
}


.testimonio p {
    color: var(--gris);

    line-height: 1.9;

    font-style: italic;

    margin-bottom: 25px;
}


.testimonio h4 {
    color: var(--azul);

    font-size: 16px;
}


/*==================================================*
* COTIZAR
*==================================================*/

.cotizar {
    padding: 55px 8% 90px;

    background: var(--fondo);
}


.cotizar-container {
    max-width: 1200px;

    margin: 0 auto;
}


.cotizar > .cotizar-container > .titulo {
    margin-bottom: 55px;
}


/*==================================================*
* FORMULARIO + FAQ
*==================================================*/

.cotizar-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);

    gap: 40px;

    align-items: stretch;
}


/*==================================================*
* TARJETA DEL FORMULARIO
*==================================================*/

.card-formulario {
    background: white;

    padding: 40px;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08);
}


.card-formulario h3 {
    color: var(--azul);

    font-size: 28px;

    line-height: 1.3;

    margin-bottom: 30px;
}


/*==================================================*
* CAMPOS
*==================================================*/

.form-group {
    margin-bottom: 20px;
}


.form-group label {
    display: block;

    color: var(--texto);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 8px;
}


.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid #dddddd;

    border-radius: 10px;

    background: white;

    color: var(--texto);

    font-size: 14px;

    outline: none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--azul);

    box-shadow:
        0 0 0 3px rgba(32, 58, 115, .10);
}


.form-group textarea {
    resize: vertical;

    min-height: 125px;
}


/*==================================================*
* BOTÓN FORMULARIO
*==================================================*/

.btn-formulario {
    width: 100%;

    border: none;

    background: var(--azul);

    color: white;

    padding: 15px 20px;

    border-radius: 40px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}


.btn-formulario:hover {
    background: var(--azul-hover);

    transform: translateY(-3px);
}


/*==================================================*
* PREGUNTAS FRECUENTES
*==================================================*/

.card-faq {
    background: white;

    padding: 40px 45px;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08);

    display: flex;

    flex-direction: column;

    min-height: 100%;
}


.card-faq > h3 {
    color: var(--azul);

    font-size: 28px;

    line-height: 1.3;

    margin-bottom: 20px;
}


/*
    La lista ocupa el espacio disponible
    dentro del cuadro.
*/

.faq-list {
    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 8px;
}


.faq-item {
    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px 0;

    border-bottom: 1px solid var(--borde);
}


.faq-item:last-child {
    border-bottom: none;
}


.faq-item h4 {
    color: var(--azul);

    font-size: 18px;

    line-height: 1.4;

    margin-bottom: 9px;
}


.faq-item p {
    color: var(--gris);

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}

/*==================================================*
* FOOTER
*==================================================*/

footer {
    background: var(--azul);

    color: white;

    text-align: center;

    padding: 60px 8% 30px;
}


/*==================================================*
* CONTENIDO DEL FOOTER
*==================================================*/

.footer-contenido {
    max-width: 700px;

    margin: 0 auto;
}


.footer-contenido img {
    height: 70px;

    width: auto;

    margin: 0 auto 25px;
}


.footer-contenido p {
    margin-bottom: 12px;

    line-height: 1.8;

    font-size: 15px;
}


.footer-contenido strong {
    font-weight: 600;
}


/*==================================================*
* REDES SOCIALES
*==================================================*/

.footer-redes {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 24px;

    margin-top: 28px;

    margin-bottom: 15px;
}


.footer-redes a {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    background: white;

    color: #132b4f;

    border-radius: 50%;

    transition:
        transform .2s ease,
        background-color .2s ease;
}


.footer-redes a svg {
    width: 22px;

    height: 22px;
}


.footer-redes a:hover {
    transform: translateY(-3px);

    background-color: #f2f2f2;
}


/*==================================================*
* COPYRIGHT
*==================================================*/

.copy {
    margin-top: 40px;

    padding-top: 25px;

    border-top:
        1px solid rgba(255, 255, 255, .2);

    font-size: 14px;

    line-height: 1.6;
}


/*==================================================*
* LIGHTBOX
*==================================================*/

.lightbox {
    display: none;

    position: fixed;

    z-index: 9999;

    inset: 0;

    width: 100%;

    height: 100%;

    background:
        rgba(0, 0, 0, .85);

    justify-content: center;

    align-items: center;

    padding: 30px;
}


.lightbox-content {
    max-width: 90%;

    max-height: 85vh;

    width: auto;

    height: auto;

    border-radius: 8px;

    object-fit: contain;

    box-shadow:
        0 5px 25px rgba(0, 0, 0, .5);
}


.lightbox-close {
    position: absolute;

    top: 20px;

    right: 35px;

    color: white;

    font-size: 45px;

    font-weight: bold;

    cursor: pointer;

    line-height: 1;

    transition:
        color .3s ease,
        transform .2s ease;
}


.lightbox-close:hover {
    color: #ff6b6b;

    transform: scale(1.05);
}


/*==================================================*
* RESPONSIVE — TABLET
*==================================================*/

@media (max-width: 1000px) {

    /* HEADER */

    header {
        padding: 0 5%;
    }


    nav {
        gap: 20px;
    }


    /* HERO */

    .hero-contenido h1 {
        font-size: 48px;
    }


    /* INDEX */

    .contenedor {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    /* NOSOTROS */

    .nosotros-grid-mv {
        grid-template-columns: 1fr;
    }


    .valores-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* PRODUCTOS */

    .catalogo-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        max-width: 900px;
    }


    /*
        En tablet:

        2 arriba
        2 en medio
        1 abajo centrado
    */

    .card-producto {
        grid-column: span 2;
    }


    .card-producto:nth-child(4) {
        grid-column: span 2;
    }


    .card-producto:nth-child(5) {
        grid-column: 2 / span 2;
    }


    /* POR QUÉ ELEGIRNOS */

    .porque-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* PROCESO */

    .proceso-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* TESTIMONIOS */

    .testimonios-grid {
        grid-template-columns:
            1fr;
    }


    /* COTIZAR */

    .cotizar-grid {
        grid-template-columns: 1fr;
    }

}


/*==================================================*
* RESPONSIVE — CELULAR
*==================================================*/

@media (max-width: 650px) {

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

    body {
        padding-top: 145px;
    }


    header {
        height: auto;

        padding: 18px 20px;

        flex-direction: column;

        gap: 15px;
    }


    .logo img {
        height: 52px;
    }


    nav {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 12px 18px;
    }


    nav a {
        font-size: 13px;
    }


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

    .titulo {
        margin-bottom: 40px;
    }


    .titulo span {
        font-size: 11px;

        letter-spacing: 2px;
    }


    .titulo h2 {
        font-size: 30px;
    }


    .titulo p {
        font-size: 14px;
    }


    /*================================================*
    HERO
    *================================================*/

    .hero {
        min-height: calc(100vh - 145px);

        padding:
            70px 7%
            60px;
    }


    .hero-contenido h1 {
        font-size: 35px;
    }


    .hero-contenido p {
        font-size: 16px;

        line-height: 1.75;
    }


    .hero-botones {
        flex-direction: column;

        gap: 12px;
    }


    .btn-primario,
    .btn-secundario {
        width: 100%;

        text-align: center;
    }


    /*================================================*
    NOSOTROS INDEX
    *================================================*/

    .nosotros {
        padding:
            70px 6%
            80px;
    }


    .texto h2 {
        font-size: 32px;
    }


    .info {
        grid-template-columns: 1fr;
    }


    /*================================================*
    PÁGINA NOSOTROS
    *================================================*/

    .nosotros-section {
        padding:
            55px 6%
            80px;
    }


    .mv-card {
        padding: 35px 28px;

        min-height: auto;
    }


    .mv-card h3 {
        font-size: 22px;
    }


    .mv-card p {
        font-size: 14px;
    }


    .valores-grid {
        grid-template-columns: 1fr;
    }


    /*================================================*
    PRODUCTOS
    *================================================*/

    .productos-servicios {
        padding:
            55px 6%
            80px;
    }


    .catalogo-grid {
        grid-template-columns: 1fr;

        max-width: 500px;

        gap: 25px;
    }


    .card-producto,
    .card-producto:nth-child(4),
    .card-producto:nth-child(5) {
        grid-column: 1;
    }


    .card-producto {
        min-height: auto;
    }


    .product-slider {
        height: 240px;
    }


    /*================================================*
    POR QUÉ ELEGIRNOS
    *================================================*/

    .porque {
        padding:
            70px 6%
            80px;
    }


    .porque-grid {
        grid-template-columns: 1fr;
    }


    /*================================================*
    PROCESO
    *================================================*/

    .proceso {
        padding:
            70px 6%
            80px;
    }


    .proceso-grid {
        grid-template-columns: 1fr;
    }


    /*================================================*
    TESTIMONIOS
    *================================================*/

    .testimonios {
        padding:
            70px 6%
            80px;
    }


    .testimonio {
        padding: 30px;
    }


    /*================================================*
    COTIZAR
    *================================================*/

    .cotizar {
        padding:
            55px 6%
            80px;
    }


    .card-formulario,
    .card-faq {
        padding: 30px;
    }


    .card-formulario h3,
    .card-faq > h3 {
        font-size: 24px;
    }


    .faq-item {
        padding: 18px 0;
    }


    /*================================================*
    FOOTER
    *================================================*/

    footer {
        padding:
            50px 6%
            25px;
    }


    .footer-contenido img {
        height: 62px;
    }


    .footer-contenido p {
        font-size: 14px;

        line-height: 1.7;
    }


    .footer-redes {
        gap: 18px;

        margin-top: 25px;
    }


    .footer-redes a {
        width: 44px;

        height: 44px;
    }


    .copy {
        margin-top: 30px;

        padding-top: 20px;

        font-size: 12px;
    }


    /*================================================*
    LIGHTBOX
    *================================================*/

    .lightbox {
        padding: 20px;
    }


    .lightbox-content {
        max-width: 95%;

        max-height: 80vh;
    }


    .lightbox-close {
        top: 15px;

        right: 20px;

        font-size: 38px;
    }

}