/* =========================================================
   HERO — FOTOGRAFÍA
========================================================= */

.foto-hero {
    position: relative;
    overflow: hidden;

    padding:
        148px
        24px
        76px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.93) 38%,
            rgba(255,255,255,.74) 65%,
            rgba(255,255,255,.46) 100%
        ),
        url("../../secciones/fotografia-en-costa-rica.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
@media (max-width: 600px) {

    .foto-hero {
        padding:
            125px
            20px
            50px;

        background:
            linear-gradient(
                rgba(255,255,255,.93),
                rgba(255,255,255,.84)
            ),
            url("../../secciones/fotografia-en-costa-rica.webp");

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

}
.foto-hero__inner {
    width: min(1180px, 100%);
    margin: 0 auto;

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

    align-items: center;
    gap: 70px;
}

.foto-hero__eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #f28a1a;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.foto-hero h1 {
    max-width: 760px;

    margin:
        0
        0
        20px;

    color: #171717;

    font-size:
        clamp(
            44px,
            6vw,
            72px
        );

    line-height: .98;

    font-weight: 800;
    letter-spacing: -3px;
}

.foto-hero h1 span {
    color: #f28a1a;
}

.foto-hero p {
    max-width: 680px;

    margin-bottom: 28px;

    color: #666;

    font-size:
        clamp(
            15px,
            1.8vw,
            18px
        );

    line-height: 1.7;
}

.foto-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.foto-btn {
    min-height: 48px;

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

    padding:
        12px
        18px;

    border-radius: 10px;

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

    text-decoration: none;
}

.foto-btn--primary {
    background: #f28a1a;
    color: #181818;
}

.foto-btn--secondary {
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    color: #222;
}


/* VISUAL */

.foto-hero__visual {
    position: relative;

    min-height: 360px;

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

.foto-camera {
    position: relative;
    z-index: 2;

    width: 250px;
}

.foto-camera__top {
    width: 85px;
    height: 30px;

    margin-left: 32px;

    border-radius:
        10px
        10px
        0
        0;

    background: #2a2a28;
}

.foto-camera__body {
    height: 165px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #282826,
            #161615
        );

    box-shadow:
        0
        28px
        60px
        rgba(0,0,0,.18);
}

.foto-camera__lens {
    width: 105px;
    height: 105px;

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

    border:
        8px
        solid
        #3e3e3b;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 35%,
            #688d99,
            #24363e 45%,
            #101416 75%
        );
}

.foto-camera__lens span {
    width: 36px;
    height: 36px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);
}

.foto-focus {
    position: absolute;

    width: 32px;
    height: 32px;

    border-color: #f28a1a;
    border-style: solid;
}

.foto-focus--1 {
    top: 35px;
    left: 35px;

    border-width: 2px 0 0 2px;
}

.foto-focus--2 {
    top: 35px;
    right: 35px;

    border-width: 2px 2px 0 0;
}

.foto-focus--3 {
    bottom: 35px;
    left: 35px;

    border-width: 0 0 2px 2px;
}

.foto-focus--4 {
    right: 35px;
    bottom: 35px;

    border-width: 0 2px 2px 0;
}


@media (max-width: 850px) {

    .foto-hero__inner {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .foto-hero__content {
        margin: 0 auto;
    }

    .foto-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .foto-hero__actions {
        justify-content: center;
    }

    .foto-hero__visual {
        min-height: 280px;
    }

}

@media (max-width: 600px) {

    .foto-hero {
        padding:
            125px
            20px
            50px;
    }

    .foto-hero h1 {
        font-size: 42px;
        letter-spacing: -1.8px;
    }

}
/* =========================================================
   SERVICIOS DE FOTOGRAFÍA
========================================================= */

.foto-services {
    padding:
        76px
        24px
        84px;

    background: #fff;
}

.foto-services__inner {
    width: min(1080px, 100%);

    margin: 0 auto;
}

.foto-services__header {
    max-width: 760px;

    margin-bottom: 40px;
}

.foto-services__header > span {
    display: block;

    margin-bottom: 7px;

    color: #f28a1a;

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

    letter-spacing: 1.1px;

    text-transform: uppercase;
}

.foto-services__header h2 {
    margin:
        0
        0
        13px;

    color: #191919;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.6px;
}

.foto-services__header p {
    color: #6b6b6b;

    font-size: 14px;

    line-height: 1.75;
}

.foto-services__grid {
    display: grid;

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

    border-top:
        1px solid
        rgba(0,0,0,.08);
}

.foto-service {
    position: relative;

    padding:
        30px
        32px
        32px
        0;

    border-bottom:
        1px solid
        rgba(0,0,0,.08);
}

.foto-service:nth-child(odd) {
    padding-right: 45px;

    border-right:
        1px solid
        rgba(0,0,0,.08);
}

.foto-service:nth-child(even) {
    padding-left: 45px;
}

.foto-service > span {
    display: block;

    margin-bottom: 10px;

    color: #aaa;

    font-size: 10px;

    font-weight: 700;
}

.foto-service h3 {
    margin-bottom: 8px;

    color: #222;

    font-size: 18px;

    font-weight: 700;
}

.foto-service p {
    margin: 0;

    color: #707070;

    font-size: 13px;

    line-height: 1.7;
}


@media (max-width: 700px) {

    .foto-services {
        padding:
            52px
            20px
            60px;
    }

    .foto-services__grid {
        grid-template-columns: 1fr;
    }

    .foto-service,
    .foto-service:nth-child(odd),
    .foto-service:nth-child(even) {
        padding:
            24px
            0;

        border-right: 0;
    }

}
/* =========================================================
   LICENCIAS
========================================================= */

.foto-license {
    padding:
        68px
        24px;

    background: #f7f7f5;
}

.foto-license__inner {
    width: min(980px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: flex-start;

    gap: 28px;
}

.foto-license__mark {
    width: 58px;
    height: 58px;

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

    border:
        2px solid
        #f28a1a;

    border-radius: 50%;

    color: #f28a1a;

    font-size: 23px;

    font-weight: 700;
}

.foto-license__eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #f28a1a;

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

    letter-spacing: 1.1px;

    text-transform: uppercase;
}

.foto-license h2 {
    max-width: 760px;

    margin:
        0
        0
        18px;

    color: #191919;

    font-size:
        clamp(
            27px,
            3.5vw,
            38px
        );

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: -1px;
}

.foto-license h2 strong {
    font-weight: 800;
}

.foto-license p {
    max-width: 820px;

    margin:
        0
        0
        12px;

    color: #666;

    font-size: 13px;

    line-height: 1.8;
}

@media (max-width: 700px) {

    .foto-license__inner {
        grid-template-columns: 1fr;

        gap: 18px;
    }

}
/* =========================================================
   TIPOS DE FOTOGRAFÍA
========================================================= */

.foto-types {
    padding: 82px 24px;
    background: #181818;
}

.foto-types__inner {
    width: min(1080px, 100%);
    margin: 0 auto;
}

.foto-types__header {
    max-width: 760px;
    margin-bottom: 42px;
}

.foto-types__header > span {
    display: block;
    margin-bottom: 8px;

    color: #f28a1a;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.foto-types__header h2 {
    margin: 0 0 14px;

    color: #fff;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -1.4px;
}

.foto-types__header h2 strong {
    color: #f28a1a;
    font-weight: 800;
}

.foto-types__header p {
    max-width: 700px;
    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 14px;
    line-height: 1.75;
}

.foto-types__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));

    border-top: 1px solid rgba(255,255,255,.10);
    border-left: 1px solid rgba(255,255,255,.10);
}

.foto-type {
    min-height: 220px;

    padding: 28px;

    border-right: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);

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

.foto-type:hover {
    background: rgba(255,255,255,.035);
}

.foto-type__number {
    display: block;
    margin-bottom: 28px;

    color: #f28a1a;

    font-size: 10px;
    font-weight: 700;
}

.foto-type h3 {
    margin: 0 0 9px;

    color: #fff;

    font-size: 18px;
    font-weight: 700;
}

.foto-type p {
    margin: 0;

    color: rgba(255,255,255,.58);

    font-size: 12px;
    line-height: 1.75;
}

@media (max-width: 850px) {

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

}

@media (max-width: 600px) {

    .foto-types {
        padding: 58px 20px;
    }

    .foto-types__grid {
        grid-template-columns: 1fr;
    }

    .foto-type {
        min-height: auto;
    }

}
/* =========================================================
   FOTOGRAFÍA + DISEÑO WEB
========================================================= */

.foto-web {
    padding: 86px 24px;
    background: #f7f7f5;
}

.foto-web__inner {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.foto-web__content {
    max-width: 820px;
    margin-bottom: 48px;
}

.foto-web__eyebrow {
    display: block;
    margin-bottom: 8px;

    color: #f28a1a;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.foto-web__content h2 {
    max-width: 760px;

    margin: 0 0 18px;

    color: #191919;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -1.4px;
}

.foto-web__content h2 strong {
    font-weight: 800;
}

.foto-web__content p {
    max-width: 820px;

    margin: 0 0 12px;

    color: #686868;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   COMPARACIÓN
========================================================= */

.foto-web__compare {
    display: grid;

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

    align-items: center;

    gap: 30px;
}

.foto-web__item {
    min-width: 0;
}

.foto-web__label {
    display: inline-block;

    margin-bottom: 12px;

    padding: 6px 9px;

    border-radius: 6px;

    background: #ececea;

    color: #777;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.foto-web__label--good {
    background: rgba(242,138,26,.12);
    color: #d4730e;
}


/* MOCKUP */

.foto-web__mock {
    overflow: hidden;

    min-height: 250px;

    padding: 22px;

    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.06);
}

.foto-web__mock-image {
    position: relative;

    height: 145px;

    overflow: hidden;

    margin-bottom: 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #dededb,
            #cfcfcb
        );
}

.foto-web__mock-image span {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 65% 35%,
            rgba(255,255,255,.30),
            transparent 28%
        );
}


/* VERSIÓN MALA */

.foto-web__mock--bad {
    opacity: .72;
}

.foto-web__mock--bad .foto-web__mock-image {
    filter:
        grayscale(.65)
        contrast(.85)
        brightness(.82);
}


/* VERSIÓN BUENA */

.foto-web__mock--good {
    border-color: rgba(242,138,26,.22);
}

.foto-web__mock--good .foto-web__mock-image {
    background:
        linear-gradient(
            135deg,
            #f0c18d,
            #ca7d34
        );
}


/* LÍNEAS */

.foto-web__mock-lines {
    display: grid;
    gap: 8px;
}

.foto-web__mock-lines i {
    display: block;

    height: 8px;

    border-radius: 100px;

    background: #e7e7e4;
}

.foto-web__mock-lines i:nth-child(1) {
    width: 78%;
}

.foto-web__mock-lines i:nth-child(2) {
    width: 100%;
}

.foto-web__mock-lines i:nth-child(3) {
    width: 56%;
}


/* TEXTO */

.foto-web__item > p {
    margin: 16px 0 0;

    color: #6c6c6c;

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


/* FLECHA */

.foto-web__arrow {
    color: #f28a1a;

    font-size: 30px;
    font-weight: 300;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .foto-web__compare {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .foto-web__arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

}

@media (max-width: 600px) {

    .foto-web {
        padding: 58px 20px;
    }

    .foto-web__mock {
        min-height: 220px;
    }

    .foto-web__mock-image {
        height: 125px;
    }

}
/* =========================================================
   PROCESO DE TRABAJO
========================================================= */

.foto-process {
    padding: 82px 24px;
    background: #fff;
}

.foto-process__inner {
    width: min(1080px, 100%);
    margin: 0 auto;
}

.foto-process__header {
    max-width: 760px;
    margin-bottom: 42px;
}

.foto-process__header > span {
    display: block;

    margin-bottom: 8px;

    color: #f28a1a;

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

    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.foto-process__header h2 {
    margin: 0 0 14px;

    color: #191919;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;

    font-weight: 500;
    letter-spacing: -1.4px;
}

.foto-process__header h2 strong {
    font-weight: 800;
}

.foto-process__header p {
    margin: 0;

    color: #696969;

    font-size: 14px;
    line-height: 1.75;
}

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

    border-top: 1px solid rgba(0,0,0,.08);
}

.foto-process__item {
    min-height: 220px;

    padding: 28px 24px;

    border-right: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.foto-process__item:first-child {
    border-left: 1px solid rgba(0,0,0,.08);
}

.foto-process__number {
    display: block;

    margin-bottom: 30px;

    color: #f28a1a;

    font-size: 10px;
    font-weight: 700;
}

.foto-process__item h3 {
    margin: 0 0 9px;

    color: #222;

    font-size: 17px;
    font-weight: 700;
}

.foto-process__item p {
    margin: 0;

    color: #707070;

    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   ENTREGA
========================================================= */

.foto-delivery {
    padding: 82px 24px;

    background: #f7f7f5;
}

.foto-delivery__inner {
    width: min(1080px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 70px;
}

.foto-delivery__eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #f28a1a;

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

    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.foto-delivery__content h2 {
    margin: 0 0 18px;

    color: #191919;

    font-size: clamp(29px, 3.6vw, 42px);
    line-height: 1.15;

    font-weight: 500;
    letter-spacing: -1.2px;
}

.foto-delivery__content h2 strong {
    font-weight: 800;
}

.foto-delivery__content p {
    margin: 0;

    color: #696969;

    font-size: 13px;
    line-height: 1.8;
}

.foto-delivery__list {
    border-top: 1px solid rgba(0,0,0,.08);
}

.foto-delivery__list article {
    display: grid;

    grid-template-columns:
        45px
        1fr;

    gap: 16px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(0,0,0,.08);
}

.foto-delivery__list article > span {
    color: #f28a1a;

    font-size: 10px;
    font-weight: 700;
}

.foto-delivery__list h3 {
    margin: 0 0 5px;

    color: #222;

    font-size: 15px;
    font-weight: 700;
}

.foto-delivery__list p {
    margin: 0;

    color: #6d6d6d;

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


/* =========================================================
   NOTA
========================================================= */

.foto-note {
    padding: 42px 24px;

    background: #fff;
}

.foto-note__inner {
    width: min(950px, 100%);
    margin: 0 auto;

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

    gap: 18px;

    padding: 22px 24px;

    border-left: 3px solid #f28a1a;

    background: #fafafa;
}

.foto-note__icon {
    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background: #f28a1a;
    color: #171717;

    font-size: 13px;
    font-weight: 800;
}

.foto-note strong {
    display: block;

    margin-bottom: 7px;

    color: #222;

    font-size: 13px;
}

.foto-note p {
    margin: 0 0 7px;

    color: #696969;

    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   CTA FINAL
========================================================= */

.foto-cta {
    padding: 74px 24px;

    background: #181818;
}

.foto-cta__inner {
    width: min(1050px, 100%);
    margin: 0 auto;

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

    align-items: center;

    gap: 50px;
}

.foto-cta__eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #f28a1a;

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

    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.foto-cta h2 {
    max-width: 700px;

    margin: 0 0 12px;

    color: #fff;

    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;

    font-weight: 500;
    letter-spacing: -1.3px;
}

.foto-cta h2 strong {
    color: #f28a1a;
    font-weight: 800;
}

.foto-cta p {
    max-width: 700px;

    margin: 0;

    color: rgba(255,255,255,.62);

    font-size: 13px;
    line-height: 1.75;
}

.foto-cta__actions {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.foto-btn--whatsapp {
    background: #2f9b57;
    color: #fff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

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

    .foto-process__item:nth-child(3) {
        border-left: 1px solid rgba(0,0,0,.08);
    }

    .foto-delivery__inner {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .foto-cta__inner {
        grid-template-columns: 1fr;
    }

    .foto-cta__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

}


@media (max-width: 600px) {

    .foto-process,
    .foto-delivery,
    .foto-cta {
        padding:
            58px
            20px;
    }

    .foto-process__grid {
        grid-template-columns: 1fr;
    }

    .foto-process__item,
    .foto-process__item:nth-child(3) {
        min-height: auto;

        border-left: 1px solid rgba(0,0,0,.08);
    }

    .foto-delivery__list article {
        grid-template-columns:
            35px
            1fr;
    }

    .foto-note {
        padding:
            32px
            20px;
    }

    .foto-note__inner {
        grid-template-columns: 1fr;
    }

    .foto-cta__actions {
        flex-direction: column;
    }

    .foto-cta__actions .foto-btn {
        width: 100%;
    }

}