/*==========================================================
COMPONENTS
Piezas reutilizables que aparecen en más de una página:
botones, títulos de sección, heroes, formularios, la banda
CTA y el aviso de cookies.

Se carga después de layout.css y antes del CSS de cada
página, así que una página siempre puede afinar un
componente sin recurrir a !important.
==========================================================*/


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

button,
.btn-primary,
.btn-secondary {
    font-family: var(--font-title);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: var(--fw-medium);
    transition: var(--transition);
    box-shadow: 0 0 20px rgba(0,0,0,.35), 0 15px 35px rgba(0,0,0,.60), 0 30px 60px rgba(0,0,0,.45);
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    border: 2px solid var(--white);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: var(--fw-medium);
    transition: var(--transition);
    box-shadow: 0 0 20px rgba(0,0,0,.35), 0 15px 35px rgba(0,0,0,.60), 0 30px 60px rgba(0,0,0,.45);
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--primary-color);
}

.btn-secondary i {
    font-size: 1rem;
}

.btn-large {
    padding: 20px 52px;
    font-size: 1.15rem;
    letter-spacing: .5px;
}

@media (max-width: 1200px) {

    .btn-large {
        padding: 17px 34px;
        font-size: 1.02rem;
    }
}

@media (max-width: 700px) {

    .btn-primary,
    .btn-secondary {
        padding: 15px 22px;
    }
}


/*==========================================================
TÍTULOS DE SECCIÓN
==========================================================*/

.section-title {
    text-align: center;
    margin: 0 auto 70px;
}

.section-title span {
    display: inline-block;
    margin-top: 40px;
    margin-bottom: 18px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: var(--fw-medium);
    font-size: .85rem;
}

.section-title h2 {
    font-size: var(--font-size-h);
    color: var(--text-color);
    margin-bottom: 20px;
}

.section-title p {
    font-size: var(--font-size-p);
    line-height: 1.8;
    color: var(--text-light);
}

/* Variante alineada a la izquierda (contacto) */
.section-title.align-left {
    text-align: left;
    margin: 0 0 40px;
}

.section-title.align-left span {
    margin-top: 0;
}

.title-divider {
    width: 56px;
    height: 2px;
    background: var(--primary-color);
    margin: 0 auto 24px;
}

@media (max-width: 900px) {

    .section-title {
        margin-bottom: 48px;
    }
}

@media (max-width: 700px) {

    .section-title {
        margin-bottom: 38px;
    }

    .section-title span {
        margin-top: 22px;
        margin-bottom: 12px;
        font-size: .74rem;
        letter-spacing: 2px;
    }

    .section-title h2 {
        margin-bottom: 16px;
    }
}


/*==========================================================
CONTENIDO DEL HERO

.hero-content lo comparten la portada (.hero) y el hero de
las subpáginas (.page-hero). Aquí van SOLO los estilos
comunes: tipografía y color. La colocación de cada uno vive
en su propio bloque, porque son distintas y mezclarlas fue
justo lo que descentró los títulos de las subpáginas.
==========================================================*/

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
}

.hero-content h2 {
    font-size: clamp(.95rem, 2.6vw, 1.3rem);
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.1;
    margin-bottom: 25px;
    display: inline-block;
    max-width: 100%;
    text-shadow: 0 3px 10px rgba(0,0,0,.55), 0 8px 25px rgba(0,0,0,.35);
}

.hero-content h1.page-title {
    font-size: clamp(2.2rem, 5vw, 3.9rem);
}

.hero-content p {
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    line-height: 1.7;
    margin-bottom: 40px;
    text-shadow: 0 2px 6px rgba(0,0,0,.40);
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.hero-buttons a {
    text-decoration: none;
}

/* Capa oscura sobre la foto de fondo de cualquier hero */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

@media (max-width: 1400px) {

    .hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 1200px) {

    .hero-content h2 {
        letter-spacing: 2px;
    }

    .hero-content h1 {
        font-size: clamp(2rem, 7vw, 5rem);
    }

    .hero-content h1.page-title {
        font-size: clamp(1.85rem, 6vw, 3.9rem);
    }

    .hero-content p {
        margin-bottom: 26px;
    }

    .hero-buttons {
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 28px;
    }
}

@media (max-width: 700px) {

    .hero-content h2 {
        letter-spacing: 1.5px;
        margin-bottom: 8px;
    }

    .hero-content p {
        margin-bottom: 18px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 24px;
    }

    .hero-buttons a {
        width: 100%;
        max-width: 330px;
    }
}

@media (max-width: 380px) {

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .hero-content h1.page-title {
        font-size: 1.7rem;
    }
}


/*==========================================================
HERO DE LAS SUBPÁGINAS
(empresa, servicios, proyectos y contacto)

La foto de fondo la pone cada página con su propia clase
(.empresa-hero, .servicios-hero, .proyectos-hero...).
==========================================================*/

.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60vh;
    padding: 7% 10% 90px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.page-hero .hero-content {
    /* margin: 0 auto y no el 140px que llevaba heredado de la
       portada: ese margen, dentro de una caja centrada, dejaba el
       título muy caído y por eso se veía descentrado en pantallas
       pequeñas. */
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding-top: 3%;
}

.page-hero .hero-content p {
    font-size: clamp(1rem, 2.4vw, 1.15rem);
}

@media (max-width: 1400px) {

    .page-hero .hero-content {
        text-align: center;
    }
}

@media (max-width: 1200px) {

    .page-hero {
        min-height: auto;
        /* padding-block y padding-inline por separado: el atajo
           `padding` es lo que dejaba el contenido pegado al borde. */
        padding-block: calc(var(--header-height) + 50px) 70px;
        padding-inline: clamp(18px, 5vw, 80px);
        /* iOS y casi todos los navegadores móviles ignoran
           background-attachment: fixed y recortan la imagen. */
        background-attachment: scroll;
    }

    .page-hero .hero-content {
        max-width: 100%;
        padding-top: 0;
    }
}

@media (max-width: 700px) {

    .page-hero {
        padding-block: calc(var(--header-height) + 46px) 50px;
        padding-inline: 20px;
    }
}


/*==========================================================
BLOQUE DE VALORES / PRINCIPIOS
(empresa y servicios)
==========================================================*/

.empresa-valores {
    padding-block: 55px;
    background: var(--white);
}


/*==========================================================
BLOQUE DE SERVICIOS
(portada y página de servicios)
==========================================================*/

.services {
    background: var(--background-color);
    margin-top: 30px;
}


/*==========================================================
FORMULARIOS
(portada y página de contacto)
==========================================================*/

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: var(--transition);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.contact-form textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: var(--transition);
}

.contact-form button:hover {
    background: var(--primary-hover);
}

.contact-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .85rem;
    color: var(--text-light);
    line-height: 1.5;
    text-align: left;
}

.contact-form .form-check input {
    width: auto;
    margin-top: 3px;
}

/* Campo trampa anti-spam: invisible para las personas,
   visible para los bots que rellenan todo */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Mensaje de respuesta tras enviar el formulario */
.form-feedback {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 18px;
    background: #eef7ee;
    border: 1px solid #cfe8cf;
    border-radius: var(--radius);
    color: #2e6b2e;
    font-size: .95rem;
}

.form-feedback i {
    color: #2e6b2e;
}

.form-feedback.visible {
    display: flex;
}

@media (max-width: 1200px) {

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 14px;
    }

    .contact-form textarea {
        min-height: 130px;
    }
}


/*==========================================================
BANDA CTA CON FOTO DE FONDO
(empresa, servicios, proyectos y contacto)
==========================================================*/

.empresa-cta {
    position: relative;
    padding-block: 140px;
    padding-inline: 40px;
    background: url("../images/imgSLogan.webp") center/cover no-repeat;
    background-attachment: fixed;
    text-align: center;
}

.empresa-cta .overlay {
    background: rgba(0,0,0,.60);
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: auto;
}

.cta-content span {
    display: inline-block;
    color: var(--primary-color);
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-weight: var(--fw-medium);
}

.cta-content h2 {
    color: var(--white);
    font-size: clamp(1.75rem, 5.5vw, 3.5rem);
    margin-bottom: 25px;
}

.cta-content p {
    color: #ddd;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    line-height: 1.8;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {

    .empresa-cta {
        padding-block: clamp(70px, 10vw, 140px);
        padding-inline: clamp(18px, 5vw, 40px);
        background-attachment: scroll;
    }

    .cta-content span {
        letter-spacing: 2.5px;
        font-size: .85rem;
    }

    .cta-content p {
        margin-bottom: 30px;
    }
}

@media (max-width: 700px) {

    .cta-content .btn-primary {
        width: 100%;
        max-width: 330px;
    }
}


/*==========================================================
AVISO DE COOKIES

El botón flotante se mantiene siempre en el DOM (hace falta
para poder cambiar de opinión), pero está oculto hasta que
se pasa el ratón por su esquina o se llega a él con el
teclado. Mientras el aviso está abierto se queda visible.
==========================================================*/

.cookie-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    z-index: 9998;
    opacity: 0;
    transform: scale(.75);
    transition: opacity .25s ease, transform .25s ease;
}

.cookie-icon:hover,
.cookie-icon:focus-visible,
.cookie-icon.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* En pantalla táctil no hay ratón que pasar por encima, así que
   se deja siempre a la vista pero discreto */
@media (hover: none) {

    .cookie-icon {
        opacity: .55;
        transform: scale(1);
    }
}

.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1a1a1a;
    color: var(--white);
    padding: 18px 24px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner p {
    margin: 0;
    font-size: .9rem;
    flex: 1;
    min-width: 240px;
}

.cookie-banner a {
    color: var(--white);
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: var(--fw-medium);
}

#cookie-accept {
    background: var(--primary-color);
    color: var(--white);
}

#cookie-reject {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}

@media (max-width: 1200px) {

    .cookie-banner {
        padding: 14px 16px;
        gap: 12px;
    }

    .cookie-banner p {
        font-size: .84rem;
        min-width: 0;
    }
}

@media (max-width: 700px) {

    .cookie-banner {
        padding: 14px 14px 16px;
    }

    .cookie-buttons {
        width: 100%;
    }

    .cookie-buttons button {
        flex: 1;
        padding: 12px 10px;
    }

    .cookie-icon {
        bottom: 14px;
        right: 14px;
    }
}