/*
 Theme Name: El Nido
 Theme URI: https://enelnido.com
 Description: Tema hijo de GeneratePress para El Nido
 Author: Creawebvalencia
 Template: generatepress
 Version: 1.0
*/


/* ==========================================================
   EL NIDO — SISTEMA DE DISEÑO
   ========================================================== */


/* ==========================================================
   TIPOGRAFÍAS
   Temporalmente desde Google Fonts.
   Más adelante las alojaremos localmente.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {

    --en-blue: #10299e;
    --en-blue-dark: #081d7f;
    --en-blue-light: #eef4ff;

    --en-heading: #111111;
    --en-text: #30394d;
    --en-text-soft: #687086;

    --en-white: #ffffff;
    --en-cream: #faf9f6;
    --en-border: #e6e8ef;

    --en-font-heading:
        "Bricolage Grotesque",
        Arial,
        sans-serif;

    --en-font-body:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --en-container: 1280px;
    --en-container-text: 760px;

    --en-radius-sm: 8px;
    --en-radius: 16px;
    --en-radius-lg: 24px;
    --en-pill: 999px;

    --en-transition: .2s ease;
}


/* ==========================================================
   BASE
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

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

    font-family: var(--en-font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}

a {
    color: var(--en-blue);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: color var(--en-transition);
}

a:hover {
    color: var(--en-blue-dark);
}


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

h1,
h2,
h3 {
    margin-top: 0;

    color: var(--en-heading);

    font-family: var(--en-font-heading);
    font-weight: 500;

    line-height: 1.03;
    letter-spacing: -.04em;
}

h1 {
    font-size: clamp(52px, 6vw, 82px);

    font-weight: 500;

    letter-spacing: -.055em;
}

h2 {
    font-size: clamp(40px, 4.5vw, 60px);

    letter-spacing: -.045em;
}

h3 {
    font-size: clamp(26px, 2.5vw, 34px);

    line-height: 1.12;

    letter-spacing: -.035em;
}

h4,
h5,
h6 {
    margin-top: 0;

    color: var(--en-heading);

    font-family: var(--en-font-body);
    font-weight: 600;

    line-height: 1.2;
    letter-spacing: -.02em;
}

h4 {
    font-size: 21px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    margin-top: 0;
    margin-bottom: 1.3em;
}


/* TEXTO PEQUEÑO SUPERIOR */

.en-eyebrow {
    margin: 0 0 14px;

    color: var(--en-blue);

    font-family: var(--en-font-body);
    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: .18em;
    text-transform: uppercase;
}


/* TEXTO INTRODUCTORIO */

.en-lead {
    max-width: 720px;

    color: var(--en-text-soft);

    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.65;
}


/* FRAGMENTO AZUL */

.en-accent {
    color: var(--en-blue);
}


/* TEXTO BLANCO */

.en-text-white,
.en-text-white h1,
.en-text-white h2,
.en-text-white h3,
.en-text-white h4,
.en-text-white p {
    color: #fff;
}


/* ==========================================================
   CONTENEDORES
   ========================================================== */

.en-container {
    width: min(
        calc(100% - 48px),
        var(--en-container)
    );

    margin-inline: auto;
}

.en-container--text {
    width: min(
        calc(100% - 48px),
        var(--en-container-text)
    );

    margin-inline: auto;
}


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

.en-section {
    padding: 100px 0;
}

.en-section--small {
    padding: 70px 0;
}

.en-section--large {
    padding: 130px 0;
}

.en-section--soft {
    background: var(--en-cream);
}

.en-section--blue-light {
    background: var(--en-blue-light);
}

.en-section--blue {
    background: var(--en-blue);

    color: #fff;
}

.en-section--blue h1,
.en-section--blue h2,
.en-section--blue h3,
.en-section--blue h4,
.en-section--blue p {
    color: #fff;
}


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

.en-btn {
    display: inline-flex;

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

    gap: 8px;

    min-height: 50px;

    padding: 0 28px;

    border: 1px solid transparent;
    border-radius: var(--en-pill);

    font-family: var(--en-font-body);
    font-size: 15px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--en-transition),
        color var(--en-transition),
        border-color var(--en-transition);
}


.en-btn--primary {
    background: var(--en-blue);

    border-color: var(--en-blue);

    color: #fff;
}

.en-btn--primary:hover {
    background: #fff;

    border-color: var(--en-blue);

    color: var(--en-blue);
}


.en-btn--outline {
    background: transparent;

    border-color: var(--en-blue);

    color: var(--en-blue);
}

.en-btn--outline:hover {
    background: var(--en-blue);

    border-color: var(--en-blue);

    color: #fff;
}


.en-btn--white {
    background: #fff;

    border-color: #fff;

    color: var(--en-blue);
}

.en-btn--white:hover {
    background: transparent;

    border-color: #fff;

    color: #fff;
}


.en-btn--link {
    min-height: auto;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: var(--en-blue);
}

.en-btn--link:hover {
    background: transparent;

    color: var(--en-blue-dark);
}


.en-btn--small {
    min-height: 42px;

    padding: 0 21px;

    font-size: 14px;
}

.en-btn--large {
    min-height: 56px;

    padding: 0 34px;

    font-size: 16px;
}


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

.en-hero {
    position: relative;

    width: 100%;
    min-height: 680px;

    overflow: hidden;

    background: var(--en-cream);
}


/* IMAGEN */

.en-hero__background {
    position: absolute;

    inset: 0;

    z-index: 0;
}

.en-hero__background img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
}


/* DEGRADADO */

.en-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(250, 249, 246, .99) 0%,
            rgba(250, 249, 246, .96) 19%,
            rgba(250, 249, 246, .84) 34%,
            rgba(250, 249, 246, .48) 50%,
            rgba(250, 249, 246, .10) 67%,
            rgba(250, 249, 246, 0) 78%
        );
}


/* CONTENEDOR */

.en-hero__inner {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    min-height: 680px;
}


/* CONTENIDO */

.en-hero__content {
    width: 56%;
    max-width: 680px;

    padding: 85px 0;
}


/* H1 SEO */

.en-hero__seo {
    max-width: 570px;

    margin: 0 0 22px;

    color: var(--en-blue);

    font-family: var(--en-font-body);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.5;

    letter-spacing: .11em;

    text-transform: uppercase;
}


/* FRASE PRINCIPAL */

.en-hero__title {
    max-width: 660px;

    margin: 0 0 26px;

    color: var(--en-heading);

    font-family: var(--en-font-heading);

    font-size: clamp(54px, 5.5vw, 80px);
    font-weight: 500;

    line-height: .97;

    letter-spacing: -.055em;
}


/* TEXTO */

.en-hero__text {
    max-width: 590px;

    margin: 0 0 34px;

    color: var(--en-text);

    font-size: 18px;
    line-height: 1.7;
}


/* BOTONES */

.en-hero__buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}


/* ==========================================================
   PRESENTACIÓN / EL NIDO
   ========================================================== */

.en-about {
    background: var(--en-white);
}


/* PARTE SUPERIOR */

.en-about__grid {
    display: grid;

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

    gap: 100px;

    align-items: start;
}


/* TÍTULO */

.en-about__heading h2 {
    max-width: 590px;

    margin-bottom: 0;
}


/* TEXTO */

.en-about__content {
    max-width: 650px;

    padding-top: 32px;
}

.en-about__content .en-lead {
    margin-bottom: 24px;

    color: var(--en-heading);
}

.en-about__content > p:last-child {
    margin-bottom: 0;

    color: var(--en-text-soft);
}


/* VALORES */

.en-about__values {
    display: grid;

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

    gap: 0;

    margin-top: 85px;

    border-top: 1px solid var(--en-border);
}

.en-about__value {
    padding: 32px 38px 0 0;
}

.en-about__value + .en-about__value {
    padding-left: 38px;

    border-left: 1px solid var(--en-border);
}

.en-about__value span {
    display: block;

    margin-bottom: 22px;

    color: var(--en-blue);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .12em;
}

.en-about__value strong {
    display: block;

    margin-bottom: 10px;

    color: var(--en-heading);

    font-family: var(--en-font-heading);
    font-size: 25px;
    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -.025em;
}

.en-about__value p {
    max-width: 320px;

    margin-bottom: 0;

    color: var(--en-text-soft);

    font-size: 15px;
    line-height: 1.65;
}


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

.en-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid var(--en-border);
    border-radius: var(--en-radius);

    box-shadow: none;
}

.en-card__image {
    width: 100%;
    height: 240px;

    overflow: hidden;

    background: var(--en-blue-light);
}

.en-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.en-card__content {
    padding: 30px;
}

.en-card__tag {
    margin: 0 0 10px;

    color: var(--en-blue);

    font-family: var(--en-font-body);
    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.en-card h3 {
    margin-bottom: 14px;
}

.en-card p:last-of-type {
    margin-bottom: 24px;
}

.en-cards {
    display: grid;

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

    gap: 30px;
}


/* ==========================================================
   FORMULARIOS
   ========================================================== */

.en-form {
    width: 100%;
    max-width: 760px;
}

.en-field {
    margin-bottom: 22px;
}

.en-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--en-heading);

    font-family: var(--en-font-body);
    font-size: 14px;
    font-weight: 600;
}

.en-field input,
.en-field textarea,
.en-field select {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--en-border);
    border-radius: var(--en-radius-sm);

    background: #fff;

    color: var(--en-text);

    font-family: var(--en-font-body);
    font-size: 16px;

    line-height: 1.5;

    outline: none;

    transition:
        border-color var(--en-transition),
        box-shadow var(--en-transition);
}

.en-field textarea {
    resize: vertical;
}

.en-field input::placeholder,
.en-field textarea::placeholder {
    color: #a0a4ad;
}

.en-field input:focus,
.en-field textarea:focus,
.en-field select:focus {
    border-color: var(--en-blue);

    box-shadow:
        0 0 0 3px rgba(16, 41, 158, .08);
}


/* ==========================================================
   UTILIDADES
   ========================================================== */

.en-text-center {
    text-align: center;
}

.en-text-left {
    text-align: left;
}

.en-text-right {
    text-align: right;
}

.en-mx-auto {
    margin-inline: auto;
}

.en-mb-0 {
    margin-bottom: 0;
}

.en-mb-1 {
    margin-bottom: 16px;
}

.en-mb-2 {
    margin-bottom: 32px;
}

.en-mb-3 {
    margin-bottom: 48px;
}

.en-mb-4 {
    margin-bottom: 70px;
}


/* ==========================================================
   PÁGINA DE ESTILOS
   ========================================================== */

.en-styleguide {
    background: #fff;
}


.en-style-colors {
    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.en-style-colors > div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.en-style-colors strong {
    color: var(--en-heading);

    font-size: 14px;
}

.en-style-colors small {
    color: var(--en-text-soft);

    font-size: 13px;
}

.en-color {
    display: block;

    width: 100%;
    height: 110px;

    margin-bottom: 8px;

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

.en-color--blue {
    background: var(--en-blue);
}

.en-color--dark {
    background: var(--en-blue-dark);
}

.en-color--light {
    background: var(--en-blue-light);
}

.en-color--cream {
    background: var(--en-cream);

    border: 1px solid var(--en-border);
}

.en-color--heading {
    background: var(--en-heading);
}

.en-color--text {
    background: var(--en-text);
}


.en-style-block {
    max-width: 850px;

    margin-top: 40px;
}


.en-style-buttons {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 20px;

    margin-top: 40px;
}


.en-style-cards {
    display: grid;

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

    gap: 30px;

    margin-top: 40px;
}


.en-form-demo {
    max-width: 720px;

    margin-top: 40px;
}


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

@media (max-width: 1024px) {

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


    .en-hero,
    .en-hero__inner {
        min-height: 620px;
    }

    .en-hero__content {
        width: 62%;
    }

    .en-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(250, 249, 246, .98) 0%,
                rgba(250, 249, 246, .93) 29%,
                rgba(250, 249, 246, .63) 51%,
                rgba(250, 249, 246, .10) 76%,
                rgba(250, 249, 246, 0) 90%
            );
    }


    .en-about__grid {
        gap: 60px;
    }

}


/* ==========================================================
   RESPONSIVE — TABLET PEQUEÑA
   ========================================================== */

@media (max-width: 900px) {

    .en-style-colors {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .en-style-cards {
        grid-template-columns: 1fr;
    }


    .en-about__grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .en-about__content {
        max-width: 720px;

        padding-top: 0;
    }

}


/* ==========================================================
   RESPONSIVE — MÓVIL
   ========================================================== */

@media (max-width: 768px) {

    body {
        font-size: 16px;
    }


    h1 {
        font-size: clamp(46px, 13vw, 62px);
    }

    h2 {
        font-size: clamp(36px, 10vw, 48px);
    }

    h3 {
        font-size: 27px;
    }


    .en-container,
    .en-container--text {
        width: calc(100% - 36px);
    }


    .en-section {
        padding: 70px 0;
    }

    .en-section--small {
        padding: 55px 0;
    }

    .en-section--large {
        padding: 90px 0;
    }


    /* HERO */

    .en-hero,
    .en-hero__inner {
        min-height: 680px;
    }

    .en-hero__inner {
        align-items: flex-end;
    }

    .en-hero__content {
        width: 100%;
        max-width: 620px;

        padding: 170px 0 45px;
    }

    .en-hero__background img {
        object-position: 66% center;
    }

    .en-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(250, 249, 246, .02) 0%,
                rgba(250, 249, 246, .10) 25%,
                rgba(250, 249, 246, .72) 55%,
                rgba(250, 249, 246, .96) 74%,
                rgba(250, 249, 246, 1) 100%
            );
    }

    .en-hero__seo {
        max-width: 480px;

        margin-bottom: 17px;

        font-size: 11px;

        letter-spacing: .09em;
    }

    .en-hero__title {
        margin-bottom: 20px;

        font-size: clamp(46px, 13vw, 62px);
    }

    .en-hero__text {
        max-width: 560px;

        margin-bottom: 28px;

        font-size: 16px;
    }


    /* PRESENTACIÓN */

    .en-about__values {
        grid-template-columns: 1fr;

        margin-top: 55px;
    }

    .en-about__value {
        padding: 25px 0;
    }

    .en-about__value + .en-about__value {
        padding-left: 0;

        border-top: 1px solid var(--en-border);
        border-left: 0;
    }

    .en-about__value span {
        margin-bottom: 10px;
    }

    .en-about__value p {
        max-width: 520px;
    }


    /* TARJETAS */

    .en-cards {
        grid-template-columns: 1fr;

        gap: 22px;
    }


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

}


/* ==========================================================
   RESPONSIVE — MÓVIL PEQUEÑO
   ========================================================== */

@media (max-width: 520px) {

    .en-hero__buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .en-hero__buttons .en-btn {
        width: 100%;
    }


    .en-style-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .en-style-buttons .en-btn {
        width: 100%;
    }

}


/* ==========================================================
   RESPONSIVE — MÓVIL MUY PEQUEÑO
   ========================================================== */

@media (max-width: 420px) {

    .en-style-colors {
        grid-template-columns: 1fr;
    }

}