@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css?family=Caveat|Lato:400,700|Patua+One&display=swap");

html, body {
    height: 100%;
    margin: 0;
  }

  header {
    position: relative;
    z-index: 1000;
}

/* =========================================================
   HISTORIA NP
   Orgonitas Luz y Amor
   ========================================================= */


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

:root {

    --historia-bg: #faf7f2;
    --historia-bg-soft: #f3eee7;
    --historia-white: #ffffff;

    --historia-text: #3f3935;
    --historia-text-soft: #746b65;

    --historia-primary: #76556f;
    --historia-primary-dark: #5d4057;

    --historia-gold: #b58b55;
    --historia-gold-soft: #d9c19d;

    --historia-border: rgba(118, 85, 111, 0.16);

    --historia-shadow:
        0 18px 50px rgba(70, 50, 60, 0.10);

    --historia-radius: 24px;

    --historia-max-width: 1200px;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

/* =========================================================
   BLOQUEO DE COPIA - HISTORIA
   ========================================================= */

.historiaNP {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    overflow: visible;

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

    /* Bloquear selección de texto */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/* =========================================================
   BLOQUEO DE COPIA Y ARRASTRE DE IMÁGENES
   ========================================================= */

.historiaNP img {
    display: block;
    width: 100%;
    height: auto;

    /* No seleccionar */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* No arrastrar */
    -webkit-user-drag: none;
    user-drag: none;
}

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



.historiaNP a {
    text-decoration: none;
}

.historiaNP p {
    line-height: 1.8;
}


/* =========================================================
   ELEMENTOS GENERALES
   ========================================================= */

.historiaNP__section-tag {
    display: inline-block;

    margin-bottom: 14px;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.20em;
    text-transform: uppercase;

    color: var(--historia-gold);
}

.historiaNP__section-heading {
    max-width: 760px;
    margin: 0 auto 70px;
}

.historiaNP__section-heading--center {
    text-align: center;
}

.historiaNP__section-heading h2 {
    margin: 0 0 20px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 400;

    line-height: 1.15;

    color: var(--historia-primary-dark);
}

.historiaNP__section-heading p {
    max-width: 650px;
    margin: 0 auto;

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

    font-size: 1.05rem;
}


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

.historiaNP__hero-button,
.historiaNP__secondary-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 15px 25px;

    border-radius: 999px;

    font-size: 0.88rem;
    font-weight: 700;

    letter-spacing: 0.04em;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.historiaNP__hero-button {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--historia-primary),
            var(--historia-primary-dark)
        );

    box-shadow:
        0 12px 30px rgba(93, 64, 87, 0.20);
}

.historiaNP__hero-button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(93, 64, 87, 0.28);
}

.historiaNP__hero-button span {
    font-size: 1.1rem;
}

.historiaNP__secondary-button {

    color: var(--historia-primary);

    border: 1px solid var(--historia-primary);
}

.historiaNP__secondary-button:hover {

    color: white;

    background: var(--historia-primary);

    transform: translateY(-2px);
}


/* =========================================================
   1. HERO
   ========================================================= */

.historiaNP__hero {

    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 680px;

    background:
        linear-gradient(
            120deg,
            #f8f2eb 0%,
            #f4ece7 48%,
            #eee4df 100%
        );
}

.historiaNP__hero-content {

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 90px 8vw 90px max(6vw, 40px);

    position: relative;
    z-index: 2;
}

.historiaNP__eyebrow {

    margin-bottom: 22px;

    color: var(--historia-gold);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.25em;
}

.historiaNP__hero h1 {

    max-width: 650px;

    margin: 0 0 28px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(3.2rem, 6vw, 6rem);

    font-weight: 400;

    line-height: 0.98;

    color: var(--historia-primary-dark);
}

.historiaNP__hero h1 span {
    color: var(--historia-gold);
}

.historiaNP__hero p {

    max-width: 560px;

    margin: 0 0 35px;

    font-size: 1.08rem;

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

    line-height: 1.8;
}

.historiaNP__hero-image {

    position: relative;

    min-height: 680px;

    overflow: hidden;
}

.historiaNP__hero-image::after {

    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(244, 236, 231, 0.18),
            transparent 25%
        );
}

.historiaNP__hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   2. ¿QUÉ ES UNA ORGONITA?
   ========================================================= */

.historiaNP__que-es {

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

    margin: auto;

    padding: 120px 30px;
}

.historiaNP__que-es-grid {

    display: grid;

    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(350px, 1.1fr);

    gap: 80px;

    align-items: center;
}

.historiaNP__que-es-image {

    position: relative;

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

    overflow: hidden;

    box-shadow: var(--historia-shadow);
}

.historiaNP__que-es-image::before {

    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    left: -18px;
    bottom: -18px;

    border-radius: 50%;

    background: var(--historia-gold-soft);

    opacity: 0.5;
}

.historiaNP__que-es-image img {

    aspect-ratio: 4 / 5;

    object-fit: cover;
}

.historiaNP__que-es-content h3 {

    margin: 0 0 20px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 2rem;

    font-weight: 400;

    color: var(--historia-primary-dark);
}

.historiaNP__que-es-content > p {

    margin: 0 0 20px;

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

    font-size: 1rem;
}


/* =========================================================
   MATERIALES
   ========================================================= */

.historiaNP__materiales {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin: 35px 0;
}

.historiaNP__material {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px;

    border-radius: 16px;

    background: var(--historia-bg-soft);

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

.historiaNP__material > span {

    flex-shrink: 0;

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    color: white;

    background: var(--historia-primary);

    font-size: 0.72rem;
    font-weight: 700;
}

.historiaNP__material h4 {

    margin: 2px 0 4px;

    font-size: 0.98rem;

    color: var(--historia-primary-dark);
}

.historiaNP__material p {

    margin: 0;

    font-size: 0.84rem;

    line-height: 1.5;

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


/* =========================================================
   3. HISTORIA / TIMELINE
   ========================================================= */

  .fotoHistoria {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 40px auto;
}

.fotoHistoria img {
    display: block;
    width: min(500px, 90%);
    height: auto;
    border-radius: 20px;
}

.historiaNP__origen {

    padding: 120px 30px;

    background:
        linear-gradient(
            180deg,
            #f1ebe4,
            #f8f4ef
        );
}

.historiaNP__timeline {

    position: relative;

    max-width: 900px;

    margin: auto;
}

.historiaNP__timeline::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 185px;

    width: 1px;

    background: var(--historia-gold-soft);
}

.historiaNP__timeline-item {

    display: grid;

    grid-template-columns: 150px 70px 1fr;

    gap: 0;

    position: relative;

    margin-bottom: 75px;
}

.historiaNP__timeline-item:last-child {
    margin-bottom: 0;
}

.historiaNP__timeline-date {

    padding-top: 6px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.35rem;

    color: var(--historia-primary);
}

.historiaNP__timeline-marker {

    position: relative;

    display: flex;
    justify-content: center;
}

.historiaNP__timeline-marker span {

    width: 17px;
    height: 17px;

    margin-top: 8px;

    border-radius: 50%;

    background: var(--historia-gold);

    border: 4px solid #f1ebe4;

    box-shadow:
        0 0 0 1px var(--historia-gold);
}

.historiaNP__timeline-content {

    padding: 0 0 0 25px;
}

.historiaNP__timeline-number {

    display: block;

    margin-bottom: 10px;

    font-size: 0.72rem;
    font-weight: 700;

    color: var(--historia-gold);

    letter-spacing: 0.15em;
}

.historiaNP__timeline-content h3 {

    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.9rem;

    font-weight: 400;

    color: var(--historia-primary-dark);
}

.historiaNP__timeline-content p {

    margin: 0 0 14px;

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

    font-size: 0.98rem;
}


/* =========================================================
   4. FUNCIONAMIENTO
   ========================================================= */

.historiaNP__funcionamiento {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;

    background: var(--historia-primary-dark);
}


/* =========================================================
   IMAGEN
   ========================================================= */

.historiaNP__funcionamiento > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    align-self: center;
     justify-self: center;
}


/* =========================================================
   CONTENIDO MORADO
   ========================================================= */

.historiaNP__funcionamiento-content {

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 75px 45px;

    background: var(--historia-primary-dark);
}


/* =========================================================
   ETIQUETA
   ========================================================= */

.historiaNP__funcionamiento-content .historiaNP__section-tag {
    color: var(--historia-gold-soft);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.historiaNP__funcionamiento-content h2 {

    margin: 0 0 30px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.3rem, 3.5vw, 3.5rem);

    font-weight: 400;

    line-height: 1.1;

    color: #ffffff;
}


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

.historiaNP__funcionamiento-content > p {

    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 0.98rem;

    line-height: 1.75;
}


/* =========================================================
   DESTACADO
   ========================================================= */

.historiaNP__funcionamiento-highlight {

    display: flex;

    gap: 18px;

    margin-top: 25px;

    padding: 25px;

    border-left: 2px solid var(--historia-gold);

    background: rgba(255, 255, 255, 0.06);

    border-radius: 0 15px 15px 0;
}


/* =========================================================
   ICONO
   ========================================================= */

.historiaNP__funcionamiento-highlight span {

    color: var(--historia-gold-soft);

    font-size: 1.5rem;
}


/* =========================================================
   TEXTO DESTACADO
   ========================================================= */

.historiaNP__funcionamiento-highlight p {

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.05rem;

    line-height: 1.7;
}
/* =========================================================
   5. SÍMBOLOS
   ========================================================= */

.historiaNP__simbolos {

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

    margin: auto;

    padding: 120px 30px;
}

.historiaNP__simbolos-layout {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 70px;

    align-items: center;
}

.historiaNP__simbolos-image {

    overflow: hidden;

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

    box-shadow: var(--historia-shadow);
}

.historiaNP__simbolos-image img {

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition: transform 0.5s ease;
}

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

.historiaNP__simbolos-content p {

    margin: 0 0 25px;

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

    font-size: 1.02rem;
}


/* =========================================================
   6. BENEFICIOS
   ========================================================= */

.historiaNP__beneficios {

    padding: 120px 30px;

    background: #f3eee8;
}

.historiaNP__beneficios-grid {

    display: grid;

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

    gap: 22px;

    max-width: 1250px;

    margin: auto;
}

.historiaNP__beneficio-card {

    overflow: hidden;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 12px 35px rgba(70, 50, 60, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.historiaNP__beneficio-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(70, 50, 60, 0.14);
}

.historiaNP__beneficio-image {

    overflow: hidden;
}

.historiaNP__beneficio-image img {

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.historiaNP__beneficio-card:hover
.historiaNP__beneficio-image img {

    transform: scale(1.05);
}

.historiaNP__beneficio-content {

    padding: 25px;
}

.historiaNP__beneficio-content > span {

    display: block;

    margin-bottom: 8px;

    color: var(--historia-gold);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.15em;
}

.historiaNP__beneficio-content h3 {

    margin: 0 0 10px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.45rem;

    font-weight: 400;

    color: var(--historia-primary-dark);
}

.historiaNP__beneficio-content p {

    margin: 0;

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

    font-size: 0.91rem;

    line-height: 1.65;
}

.historiaNP__beneficio-note {

    margin-top: 18px !important;

    padding-top: 16px;

    border-top: 1px solid var(--historia-border);

    font-size: 0.78rem !important;

    line-height: 1.6 !important;
}


/* =========================================================
   BENEFICIO GRANDE
   ========================================================= */

.historiaNP__beneficio-card--large {

    grid-column: span 2;

    display: grid;

    grid-template-columns: 1fr 1fr;
}

.historiaNP__beneficio-card--large
.historiaNP__beneficio-image {

    height: 100%;
}

.historiaNP__beneficio-card--large
.historiaNP__beneficio-image img {

    height: 100%;
    min-height: 300px;
}


/* =========================================================
   7. CIERRE
   ========================================================= */

.historiaNP__cierre {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 600px;

    background:
        linear-gradient(
            135deg,
            #eee4df,
            #f8f3ed
        );
}

.historiaNP__cierre-image {

    overflow: hidden;
}

.historiaNP__cierre-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.historiaNP__cierre-content {

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 80px clamp(35px, 7vw, 100px);
}

.historiaNP__cierre-content h2 {

    max-width: 550px;

    margin: 0 0 25px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.5rem, 4vw, 4rem);

    font-weight: 400;

    line-height: 1.05;

    color: var(--historia-primary-dark);
}

.historiaNP__cierre-content p {

    max-width: 540px;

    margin: 0 0 12px;

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

    font-size: 1rem;
}

.historiaNP__cierre-content
.historiaNP__hero-button {

    align-self: flex-start;

    margin-top: 20px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {


    .historiaNP__hero {

        grid-template-columns: 1fr;

        min-height: auto;
    }

    .historiaNP__hero-content {

        padding: 90px 40px 60px;
    }

    .historiaNP__hero-image {

        min-height: 500px;
    }


    .historiaNP__que-es-grid {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .historiaNP__que-es-image {

        max-width: 650px;

        margin: auto;
    }


    .historiaNP__funcionamiento {

        grid-template-columns: 1fr;
    }

    .historiaNP__funcionamiento-image {

        min-height: 500px;
    }


    .historiaNP__simbolos-layout {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .historiaNP__simbolos-image {

        max-width: 750px;

        margin: auto;
    }


    .historiaNP__beneficios-grid {

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


    .historiaNP__cierre {

        grid-template-columns: 1fr;
    }

    .historiaNP__cierre-image {

        min-height: 450px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 650px) {


    .historiaNP__section-heading {

        margin-bottom: 45px;
    }

    .historiaNP__section-heading h2 {

        font-size: 2.2rem;
    }

    .historiaNP__section-heading p {

        font-size: 0.95rem;
    }


    /* HERO */

    .historiaNP__hero-content {

        padding: 70px 24px 45px;
    }

    .historiaNP__eyebrow {

        font-size: 0.68rem;

        letter-spacing: 0.18em;
    }

    .historiaNP__hero h1 {

        font-size: 3.2rem;

        line-height: 1;
    }

    .historiaNP__hero p {

        font-size: 0.96rem;
    }

    .historiaNP__hero-image {

        min-height: 420px;
    }


    /* QUE ES */

    .historiaNP__que-es {

        padding: 80px 20px;
    }

    .historiaNP__que-es-grid {

        gap: 40px;
    }

    .historiaNP__que-es-image img {

        aspect-ratio: 1 / 1.05;
    }

    .historiaNP__que-es-content h3 {

        font-size: 1.8rem;
    }


    /* MATERIALES */

    .historiaNP__materiales {

        grid-template-columns: 1fr;

        gap: 10px;
    }

    .historiaNP__material {

        padding: 15px;
    }


    /* TIMELINE */

    .historiaNP__origen {

        padding: 80px 20px;
    }

    .historiaNP__timeline::before {

        left: 10px;
    }

    .historiaNP__timeline-item {

        grid-template-columns: 1fr;

        padding-left: 35px;

        margin-bottom: 55px;
    }

    .historiaNP__timeline-date {

        margin-bottom: 10px;

        font-size: 1.15rem;
    }

    .historiaNP__timeline-marker {

        position: absolute;

        top: 0;
        left: 0;

        width: 20px;

        justify-content: flex-start;
    }

    .historiaNP__timeline-marker span {

        width: 13px;
        height: 13px;

        margin-top: 5px;
    }

    .historiaNP__timeline-content {

        padding: 0;
    }

    .historiaNP__timeline-content h3 {

        font-size: 1.65rem;
    }

    .historiaNP__timeline-content p {

        font-size: 0.93rem;
    }


    /* FUNCIONAMIENTO */

    .historiaNP__funcionamiento-image {

        min-height: 380px;
    }

    .historiaNP__funcionamiento-content {

        padding: 70px 24px;
    }

    .historiaNP__funcionamiento-content h2 {

        font-size: 2.5rem;
    }

    .historiaNP__funcionamiento-highlight {

        padding: 18px;

        gap: 12px;
    }


    /* SIMBOLOS */

    .historiaNP__simbolos {

        padding: 80px 20px;
    }


    /* BENEFICIOS */

    .historiaNP__beneficios {

        padding: 80px 20px;
    }

    .historiaNP__beneficios-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .historiaNP__beneficio-card--large {

        grid-column: auto;

        display: block;
    }

    .historiaNP__beneficio-card--large
    .historiaNP__beneficio-image {

        height: auto;
    }

    .historiaNP__beneficio-card--large
    .historiaNP__beneficio-image img {

        height: auto;

        min-height: 0;

        aspect-ratio: 4 / 3;
    }


    /* CIERRE */

    .historiaNP__cierre-image {

        min-height: 350px;
    }

    .historiaNP__cierre-content {

        padding: 70px 24px;
    }

    .historiaNP__cierre-content h2 {

        font-size: 2.6rem;
    }

    .historiaNP__cierre-content
    .historiaNP__hero-button {

        width: 100%;
    }

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    .historiaNP__hero h1 {

        font-size: 2.8rem;
    }

    .historiaNP__section-heading h2 {

        font-size: 2rem;
    }

    .historiaNP__funcionamiento-content h2 {

        font-size: 2.25rem;
    }

    .historiaNP__cierre-content h2 {

        font-size: 2.3rem;
    }

}