/* =========================================================
   ARCEsv — SISTEMA VISUAL
   Archivo: /assets/css/style.css

   Paleta:
   Peach:  #FBB195
   Coral:  #F67280
   Mauve:  #C06C84
   Purple: #6C5B7B
   Blue:   #355C7D
========================================================= */


/* =========================================================
   1. VARIABLES GLOBALES
========================================================= */

:root {
    --peach: #FBB195;
    --coral: #F67280;
    --mauve: #C06C84;
    --purple: #6C5B7B;
    --blue: #355C7D;

    --ink: #263F54;
    --ink-soft: #48677F;

    --paper: #FFF8F3;
    --white: #FFFFFF;
    --border: rgba(53, 92, 125, 0.15);

    --font-body: "DM Sans", sans-serif;
    --font-heading: "Space Grotesk", sans-serif;

    --container-width: 1200px;

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 30px;

    --shadow-card:
        0 15px 45px rgba(53, 92, 125, 0.08);

    --transition:
        220ms ease;
}


/* =========================================================
   2. REINICIO Y CONFIGURACIÓN GENERAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;

    color: var(--ink);

    background: var(--paper);

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

    font-size: 16px;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 4px;
}

::selection {
    color: var(--white);
    background: var(--blue);
}

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

    margin-inline: auto;
}

.section-padding {
    padding-block: 120px;
}

.skip-link {
    position: fixed;

    top: 10px;
    left: 10px;

    z-index: 9999;

    padding: 12px 18px;

    color: var(--white);
    background: var(--blue);

    border-radius: 8px;

    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}


/* =========================================================
   3. ENCABEZADO Y NAVEGACIÓN
========================================================= */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    background: #29272a;

    border-bottom:
        1px solid rgba(251, 177, 149, 0.18);
}

.nav-container {
    min-height: 88px;

    display: flex;

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

    gap: 35px;
}

.brand {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.brand-symbol {
    display: grid;

    place-items: center;

    position: relative;

    width: 43px;
    height: 43px;

    color: #29272a;

    background: var(--peach);

    border-radius: 13px;

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

    font-size: 27px;

    font-weight: 700;

    line-height: 1;
}

.brand-symbol-dot {
    color: var(--coral);
}

.brand-name {
    font-family: var(--font-heading);

    color: var(--peach);

    font-size: 24px;

    font-weight: 700;

    letter-spacing: -1.3px;
}

.brand-name span {
    color: var(--coral);
}

.main-navigation {
    display: flex;

    align-items: center;

    gap: 34px;
}

.nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--peach);

    font-size: 13px;

    font-weight: 600;

    transition:
        color var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--coral);
}

.nav-contact {
    padding: 12px 18px;

    color: #29272a;

    background: var(--peach);

    border-radius: 10px;

    transition:
        background var(--transition),
        transform var(--transition);
}

.nav-contact:hover {
    color: #29272a;

    background: var(--coral);

    transform: translateY(-2px);
}

.menu-toggle {
    display: none;
}


/* =========================================================
   4. PORTADA PRINCIPAL
========================================================= */

.hero-section {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 760px;

    min-height: min(850px, 100svh);

    padding-top: 125px;
    padding-bottom: 95px;

    overflow: hidden;

    /* Fondo uniforme, sin el halo de luz del diseño anterior. */
    background: var(--peach);
}

.hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap: 30px;
}

.hero-content {
    position: relative;

    z-index: 3;

    padding-block: 40px;
}

.eyebrow,
.section-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.eyebrow {
    margin-bottom: 25px;

    color: var(--blue);
}

.eyebrow-dot,
.label-indicator {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    background: var(--coral);

    border-radius: 50%;
}

.hero-content h1 {
    max-width: 630px;

    margin: 0;

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

    font-size: clamp(46px, 5.1vw, 72px);

    font-weight: 700;

    line-height: 1.04;

    letter-spacing: -4px;
}

.hero-content h1 span {
    display: block;

    color: var(--blue);
}

.hero-description {
    max-width: 490px;

    margin: 27px 0 0;

    color: var(--ink-soft);

    font-size: 16px;

    line-height: 1.9;
}

.hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}

.button {
    min-height: 52px;

    display: inline-flex;

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

    gap: 13px;

    padding: 13px 21px;

    border: 1px solid transparent;

    border-radius: 11px;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;

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

.button:hover {
    transform: translateY(-3px);
}

.button-primary {
    color: var(--white);

    background: var(--blue);

    box-shadow:
        0 8px 20px rgba(53, 92, 125, 0.16);
}

.button-primary:hover {
    color: var(--white);

    background: var(--purple);

    box-shadow:
        0 12px 25px rgba(53, 92, 125, 0.22);
}

.button-secondary {
    color: var(--blue);

    border-color: rgba(53, 92, 125, 0.30);

    background: rgba(255, 248, 243, 0.20);
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.48);

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

.hero-bottom-note {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 50px;
}

.hero-note-line {
    width: 32px;
    height: 2px;

    flex-shrink: 0;

    background: var(--coral);
}

.hero-bottom-note p {
    margin: 0;

    color: var(--ink-soft);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.3px;
}


/* =========================================================
   5. ILUSTRACIÓN PRINCIPAL
========================================================= */

.hero-artwork {
    position: relative;

    display: flex;

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

    min-width: 0;

    isolation: isolate;
}

.hero-image {
    position: relative;

    z-index: 1;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius: 18px;

    mix-blend-mode: multiply;

    filter:
        drop-shadow(
            0 20px 28px rgba(53, 92, 125, 0.10)
        );

    animation:
        artwork-float 7s ease-in-out infinite;
}

.artwork-label {
    position: absolute;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 13px;

    color: var(--blue);

    background: rgba(255, 248, 243, 0.92);

    border: 1px solid rgba(53, 92, 125, 0.10);

    border-radius: 9px;

    box-shadow:
        0 8px 25px rgba(53, 92, 125, 0.08);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.artwork-label-top {
    top: 7%;

    right: 1%;
}

.artwork-label-bottom {
    bottom: 4%;

    left: 0;
}

.artwork-label-bottom > span {
    color: var(--coral);

    font-size: 16px;
}

.decoration-one,
.decoration-two {
    position: absolute;

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;
}

.decoration-one {
    top: 15%;

    right: -70px;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(53, 92, 125, 0.10);
}

.decoration-two {
    bottom: -100px;

    left: 42%;

    width: 280px;
    height: 280px;

    border: 1px dashed rgba(53, 92, 125, 0.16);
}

.hero-scroll-indicator {
    position: absolute;

    right: 32px;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.scroll-line {
    width: 34px;
    height: 1px;

    background: var(--blue);
}

@keyframes artwork-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   6. ENCABEZADOS DE SECCIÓN
========================================================= */

.section-heading {
    margin-bottom: 55px;
}

.section-kicker {
    margin-bottom: 17px;

    color: var(--coral);
}

.section-heading-grid {
    display: grid;

    grid-template-columns: 1fr 0.65fr;

    align-items: end;

    gap: 55px;
}

.section-heading h2,
.manifesto-content h2,
.contact-content h2 {
    margin: 0;

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

    font-size: clamp(36px, 4vw, 55px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -2.5px;
}

.section-heading h2 span {
    display: block;

    color: var(--coral);
}

.section-heading-grid > p {
    max-width: 430px;

    margin: 0 0 5px;

    color: var(--ink-soft);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   7. TARJETAS DE SERVICIOS
========================================================= */

.services-section {
    background: var(--paper);
}

.services-grid {
    

    display: grid;

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

    gap: 20px;
}

.service-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 25px;

    background: var(--white);

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

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

    box-shadow: var(--shadow-card);

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

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

    border-color: rgba(246, 114, 128, 0.40);

    box-shadow:
        0 25px 55px rgba(53, 92, 125, 0.12);
}

.service-card-top {
    display: flex;

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

    gap: 10px;
}

.service-number {
    color: var(--ink-soft);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.service-arrow {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--blue);

    background: #F6F0ED;

    border-radius: 50%;

    font-size: 17px;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.service-card:hover .service-arrow {
    color: var(--white);

    background: var(--coral);

    transform: rotate(45deg);
}


/* Ilustraciones CSS de los servicios. */

.service-illustration {
    position: relative;

    display: flex;

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

    height: 205px;

    margin-block: 22px;

    overflow: hidden;

    border-radius: 14px;
}

.web-illustration {
    background: #E7DDE8;
}

.browser-window {
    width: 72%;

    overflow: hidden;

    background: var(--white);

    border: 3px solid var(--blue);

    border-radius: 9px;

    box-shadow:
        9px 10px 0 rgba(53, 92, 125, 0.13);

    transform: rotate(-4deg);
}

.browser-top {
    display: flex;

    gap: 5px;

    padding: 8px;

    background: #EDE6EC;

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

.browser-top span,
.project-browser-top span {
    width: 6px;
    height: 6px;

    background: var(--coral);

    border-radius: 50%;
}

.browser-top span:nth-child(2) {
    background: var(--peach);
}

.browser-top span:nth-child(3) {
    background: var(--mauve);
}

.browser-content {
    display: flex;

    gap: 10px;

    padding: 13px;

    min-height: 110px;
}

.browser-sidebar {
    width: 22%;

    border-radius: 4px;

    background: var(--blue);
}

.browser-main {
    flex: 1;
}

.browser-line {
    width: 88%;
    height: 8px;

    margin-bottom: 8px;

    background: var(--blue);

    border-radius: 4px;
}

.browser-line.short {
    width: 55%;

    height: 5px;

    background: var(--mauve);
}

.browser-blocks {
    display: flex;

    gap: 6px;

    margin-top: 15px;
}

.browser-blocks span {
    width: 45%;
    height: 25px;

    background: var(--peach);

    border-radius: 4px;
}

.browser-blocks span:last-child {
    background: var(--coral);
}

.floating-code {
    position: absolute;

    right: 9%;
    bottom: 15%;

    display: grid;

    place-items: center;

    width: 49px;
    height: 49px;

    color: var(--white);

    background: var(--blue);

    border: 4px solid #E7DDE8;

    border-radius: 12px;

    font-family: monospace;

    font-size: 16px;

    font-weight: 700;

    transform: rotate(8deg);
}

.audiovisual-illustration {
    background: #F7D9D2;
}

.camera-body {
    position: relative;

    width: 125px;
    height: 83px;

    background: var(--blue);

    border: 5px solid #F7D9D2;

    border-radius: 14px;

    box-shadow:
        10px 12px 0 rgba(53, 92, 125, 0.13);

    transform: rotate(-5deg);
}

.camera-body::before {
    content: "";

    position: absolute;

    top: -15px;
    left: 18px;

    width: 35px;
    height: 14px;

    background: var(--blue);

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

.camera-lens {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 49px;
    height: 49px;

    background: var(--peach);

    border: 8px solid var(--coral);

    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.camera-lens::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 15px;
    height: 15px;

    background: var(--blue);

    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.camera-flash {
    position: absolute;

    top: 8px;
    right: 11px;

    width: 13px;
    height: 9px;

    background: var(--peach);

    border-radius: 3px;
}

.film-strip {
    position: absolute;

    right: 10%;
    bottom: 16%;

    display: flex;

    gap: 5px;

    padding: 7px;

    background: var(--white);

    border-radius: 6px;

    transform: rotate(7deg);
}

.film-strip span {
    width: 17px;
    height: 22px;

    background: var(--coral);

    border-radius: 3px;
}

.film-strip span:nth-child(2) {
    background: var(--mauve);
}

.film-strip span:nth-child(3) {
    background: var(--blue);
}

.strategy-illustration {
    background: #DDE8E8;
}

.strategy-board {
    position: relative;

    width: 150px;
    height: 115px;

    padding: 15px;

    background: var(--white);

    border: 3px solid var(--blue);

    border-radius: 10px;

    box-shadow:
        9px 10px 0 rgba(53, 92, 125, 0.12);

    transform: rotate(4deg);
}

.strategy-line {
    height: 7px;

    margin-bottom: 9px;

    background: var(--blue);

    border-radius: 5px;
}

.strategy-line.short {
    width: 55%;

    background: var(--mauve);
}

.strategy-chart {
    display: flex;

    align-items: end;

    gap: 7px;

    height: 43px;

    margin-top: 10px;
}

.strategy-chart span {
    flex: 1;

    height: 45%;

    background: var(--peach);

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

.strategy-chart span:nth-child(2) {
    height: 75%;

    background: var(--coral);
}

.strategy-chart span:nth-child(3) {
    height: 100%;

    background: var(--blue);
}

.strategy-chart span:nth-child(4) {
    height: 60%;

    background: var(--mauve);
}

.service-card h3 {
    margin: 0;

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

    font-size: 21px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.6px;
}

.service-card p {
    margin: 12px 0 0;

    color: var(--ink-soft);

    font-size: 13px;

    line-height: 1.9;
}

.service-card-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: auto;
    padding-top: 23px;

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;
}

.service-card-link span {
    color: var(--coral);

    font-size: 17px;

    transition: transform var(--transition);
}

.service-card-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   8. SECCIÓN DE PROYECTOS
========================================================= */

.projects-section {
    background: #F2E9E4;
}

.projects-grid {
    display: grid;

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

    gap: 25px;
}

.project-card {
    min-width: 0;

    overflow: hidden;

    background: var(--white);

    border: 1px solid rgba(53, 92, 125, 0.10);

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

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.project-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 25px 55px rgba(53, 92, 125, 0.12);
}

.project-visual {
    position: relative;

    display: flex;

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

    min-height: 290px;

    padding: 35px;

    overflow: hidden;
}

.project-visual-restaurant {
    background: #F8D8C9;
}

.project-visual-store {
    background: #DDE6E6;
}

.project-browser {
    width: min(100%, 390px);

    overflow: hidden;

    background: var(--white);

    border: 3px solid var(--blue);

    border-radius: 12px;

    box-shadow:
        12px 15px 0 rgba(53, 92, 125, 0.13);

    transform: rotate(-2deg);
}

.project-browser-top {
    display: flex;

    align-items: center;

    gap: 5px;

    padding: 10px 12px;

    background: #F5EFEC;

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

.project-browser-content {
    padding: 18px;
}

.project-browser-hero {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    align-items: center;

    gap: 12px;

    min-height: 125px;

    padding: 15px;

    background: #F8D8C9;

    border-radius: 8px;
}

.project-browser-hero-text {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.project-browser-hero-text span {
    width: 85%;
    height: 7px;

    background: var(--blue);

    border-radius: 4px;
}

.project-browser-hero-text span:nth-child(2) {
    width: 65%;

    background: var(--coral);
}

.project-browser-hero-text span:nth-child(3) {
    width: 45%;

    height: 5px;

    background: var(--mauve);
}

.project-browser-food {
    display: grid;

    place-items: center;

    width: 75px;
    height: 75px;

    justify-self: center;

    background: var(--peach);

    border: 7px solid var(--white);

    border-radius: 50%;

    box-shadow:
        0 0 0 2px rgba(53, 92, 125, 0.12);
}

.project-browser-food::after {
    content: "";

    width: 27px;
    height: 27px;

    background: var(--coral);

    border-radius: 50%;
}

.project-browser-products {
    display: grid;

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

    gap: 8px;

    margin-top: 13px;
}

.project-browser-products span {
    height: 37px;

    background: #E9E0DC;

    border-radius: 5px;
}

.project-browser-products span:nth-child(2) {
    background: #DDE6E6;
}

.project-browser-products span:nth-child(3) {
    background: #F8D8C9;
}

.project-visual-store .project-browser-hero {
    background: #DDE6E6;
}

.project-visual-store .project-browser-food {
    background: var(--mauve);
}

.project-visual-store .project-browser-food::after {
    background: var(--peach);
}

.project-info {
    padding: 25px;
}

.project-category {
    display: block;

    margin-bottom: 10px;

    color: var(--coral);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.project-info h3 {
    margin: 0;

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

    font-size: 25px;

    line-height: 1.25;

    letter-spacing: -0.8px;
}

.project-info p {
    margin: 12px 0 0;

    color: var(--ink-soft);

    font-size: 13px;

    line-height: 1.9;
}

.project-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;
}

.project-link span {
    color: var(--coral);

    font-size: 17px;

    transition: transform var(--transition);
}

.project-link:hover span {
    transform: translateX(5px);
}

    display: grid;

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

    gap: 20px;
}

.service-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 25px;

    background: var(--white);

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

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

    box-shadow: var(--shadow-card);

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

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

    border-color: rgba(246, 114, 128, 0.40);

    box-shadow:
        0 25px 55px rgba(53, 92, 125, 0.12);
}

.service-card-top {
    display: flex;

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

    gap: 10px;
}

.service-number {
    color: var(--ink-soft);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.service-arrow {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--blue);

    background: #F6F0ED;

    border-radius: 50%;

    font-size: 17px;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.service-card:hover .service-arrow {
    color: var(--white);

    background: var(--coral);

    transform: rotate(45deg);
}


/* Ilustraciones CSS de los servicios. */

.service-illustration {
    position: relative;

    display: flex;

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

    height: 205px;

    margin-block: 22px;

    overflow: hidden;

    border-radius: 14px;
}

.web-illustration {
    background: #E7DDE8;
}

.browser-window {
    width: 72%;

    overflow: hidden;

    background: var(--white);

    border: 3px solid var(--blue);

    border-radius: 9px;

    box-shadow:
        9px 10px 0 rgba(53, 92, 125, 0.13);

    transform: rotate(-4deg);
}

.browser-top {
    display: flex;

    gap: 5px;

    padding: 8px;

    background: #EDE6EC;

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

.browser-top span,
.project-browser-top span {
    width: 6px;
    height: 6px;

    background: var(--coral);

    border-radius: 50%;
}

.browser-top span:nth-child(2) {
    background: var(--peach);
}

.browser-top span:nth-child(3) {
    background: var(--mauve);
}

.browser-content {
    display: flex;

    gap: 10px;

    padding: 13px;

    min-height: 110px;
}

.browser-sidebar {
    width: 22%;

    border-radius: 4px;

    background: var(--blue);
}

.browser-main {
    flex: 1;
}

.browser-line {
    width: 88%;
    height: 8px;

    margin-bottom: 8px;

    background: var(--blue);

    border-radius: 4px;
}

.browser-line.short {
    width: 55%;

    height: 5px;

    background: var(--mauve);
}
    
    
    .browser-blocks {
    display: flex;

    gap: 6px;

    margin-top: 15px;
}

.browser-blocks span {
    width: 45%;
    height: 25px;

    background: var(--peach);

    border-radius: 4px;
}

.browser-blocks span:last-child {
    background: var(--coral);
}

.floating-code {
    position: absolute;

    right: 9%;
    bottom: 15%;

    display: grid;

    place-items: center;

    width: 49px;
    height: 49px;

    color: var(--white);

    background: var(--blue);

    border: 4px solid #E7DDE8;

    border-radius: 12px;

    font-family: monospace;

    font-size: 16px;

    font-weight: 700;

    transform: rotate(8deg);
}


/* Ilustración de marketing. */

.marketing-illustration {
    background: #F9D9D8;
}

.marketing-board {
    width: 68%;

    padding: 14px;

    background: var(--white);

    border: 3px solid var(--blue);

    border-radius: 10px;

    box-shadow:
        8px 9px 0 rgba(192, 108, 132, 0.25);

    transform: rotate(3deg);
}

.marketing-board-header {
    display: flex;

    gap: 5px;

    padding-bottom: 12px;

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

.marketing-board-header span {
    width: 6px;
    height: 6px;

    background: var(--coral);

    border-radius: 50%;
}

.marketing-board-header span:nth-child(2) {
    background: var(--peach);
}

.marketing-board-header span:nth-child(3) {
    background: var(--purple);
}

.marketing-chart {
    display: flex;

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

    gap: 9px;

    height: 80px;

    padding-top: 10px;
}

.chart-bar {
    width: 17%;

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

.bar-one {
    height: 35%;

    background: var(--peach);
}

.bar-two {
    height: 57%;

    background: var(--mauve);
}

.bar-three {
    height: 73%;

    background: var(--coral);
}

.bar-four {
    height: 100%;

    background: var(--blue);
}

.marketing-caption {
    margin-top: 10px;

    color: var(--blue);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-align: center;
}

.marketing-star {
    position: absolute;

    color: var(--coral);

    line-height: 1;
}

.star-one {
    top: 20%;

    left: 12%;

    font-size: 28px;
}

.star-two {
    right: 10%;

    bottom: 17%;

    color: var(--purple);

    font-size: 25px;
}


/* Ilustración audiovisual. */

.film-illustration {
    background: #D9D7E5;
}

.film-camera {
    position: relative;

    width: 145px;
    height: 130px;

    transform: rotate(-5deg);
    
    
}

.camera-reel {
    position: absolute;

    top: 3px;

    width: 43px;
    height: 43px;

    background: var(--coral);

    border: 7px solid var(--blue);

    border-radius: 50%;

    box-shadow:
        inset 0 0 0 5px var(--peach);
}

.reel-one {
    left: 25px;
}

.reel-two {
    right: 25px;

    top: 0;
}

.camera-body {
    position: absolute;

    top: 39px;
    left: 12px;

    width: 119px;
    height: 55px;

    background: var(--blue);

    border: 4px solid var(--ink);

    border-radius: 9px;
}

.camera-lens {
    position: absolute;

    top: 8px;
    left: 35px;

    display: grid;

    place-items: center;

    width: 37px;
    height: 37px;

    background: var(--coral);

    border: 5px solid var(--ink);

    border-radius: 50%;
}

.camera-lens span {
    width: 13px;
    height: 13px;

    background: var(--peach);

    border-radius: 50%;
}

.camera-handle {
    position: absolute;

    top: 44px;
    right: 2px;

    width: 14px;
    height: 27px;

    background: var(--coral);

    border-radius: 3px;
}

.camera-tripod {
    position: absolute;

    bottom: 0;
    left: 71px;

    width: 4px;
    height: 39px;

    background: var(--blue);
}

.camera-tripod span {
    position: absolute;

    top: 10px;

    width: 4px;
    height: 35px;

    background: var(--blue);

    transform-origin: top center;
}

.camera-tripod span:nth-child(1) {
    transform: rotate(28deg);
}

.camera-tripod span:nth-child(2) {
    transform: rotate(-28deg);
}

.film-sparkle {
    position: absolute;

    color: var(--coral);

    font-size: 26px;
}

.sparkle-one {
    top: 22%;

    left: 13%;
}

.sparkle-two {
    right: 12%;

    bottom: 18%;

    color: var(--purple);
}


/* Contenido textual de las tarjetas. */

.service-card h3 {
    margin: 0;

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

    font-size: 24px;

    line-height: 1.25;

    letter-spacing: -0.7px;
}

.service-card > p {
    margin: 14px 0 20px;

    color: var(--ink-soft);

    font-size: 13px;

    line-height: 1.9;
}

.service-list {
    display: grid;

    gap: 10px;

    margin: 0;
    padding: 0 0 22px;

    list-style: none;
}

.service-list li {
    position: relative;

    padding-left: 20px;

    color: var(--ink);

    font-size: 12px;

    line-height: 1.6;
}

.service-list li::before {
    content: "✓";

    position: absolute;

    top: 0;
    left: 0;

    color: var(--coral);

    font-weight: 800;
}

.service-link {
    display: flex;

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

    gap: 10px;

    margin-top: auto;

    padding-top: 18px;

    color: var(--blue);

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

    font-size: 12px;

    font-weight: 800;

    transition: color var(--transition);
}

.service-link:hover {
    color: var(--coral);
}

.service-link span {
    font-size: 18px;

    transition: transform var(--transition);
}

.service-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   8. MANIFIESTO DE MARCA
========================================================= */

.manifesto-section {
    position: relative;
    
    
    
    
    
        overflow: hidden;

    padding-block: 105px;

    color: var(--white);

    background: var(--blue);
}

.manifesto-container {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 45px;
}

.manifesto-symbol {
    position: relative;

    display: grid;

    place-items: center;

    width: 135px;
    height: 135px;

    color: var(--blue);

    background: var(--peach);

    border-radius: 34px;

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

    font-size: 82px;

    font-weight: 700;

    letter-spacing: -8px;

    transform: rotate(-5deg);
}

.manifesto-symbol-dot {
    color: var(--coral);
}

.manifesto-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}

.manifesto-content .section-kicker {
    color: var(--peach);
}

.manifesto-content h2 {
    font-size: clamp(35px, 4vw, 52px);
}

.manifesto-content h2 span {
    display: block;

    color: var(--peach);
}

.manifesto-content > p {
    max-width: 650px;

    margin: 23px 0 28px;

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

    font-size: 14px;

    line-height: 2;
}

.button-light {
    color: var(--blue);

    background: var(--peach);
}

.button-light:hover {
    background: var(--white);
}

.manifesto-decoration {
    position: absolute;

    top: -120px;
    right: -100px;

    width: 350px;
    height: 350px;

    pointer-events: none;
}

.manifesto-circle {
    position: absolute;

    top: 30px;
    right: 20px;

    width: 250px;
    height: 250px;

    border: 1px solid rgba(255, 255, 255, 0.17);

    border-radius: 50%;
}

.manifesto-orbit {
    position: absolute;

    top: 65px;
    right: 55px;

    width: 180px;
    height: 180px;

    border: 1px dashed rgba(255, 255, 255, 0.23);

    border-radius: 50%;
}

.manifesto-cross {
    position: absolute;

    color: var(--coral);

    font-size: 27px;
}

.cross-one {
    top: 70px;
    left: 20px;
}

.cross-two {
    right: 0;
    bottom: 65px;

    color: var(--peach);
}


/* =========================================================
   9. PORTAFOLIO
========================================================= */

.projects-section {
    background: #F8F0EB;
}

.projects-grid {
    display: grid;

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

    gap: 22px;
}

.project-card {
    min-width: 0;
}

.project-visual {
    position: relative;

    display: grid;

    place-items: center;

    height: 300px;

    padding: 22px;

    overflow: hidden;

    border-radius: var(--radius-medium);
}

.project-visual-web {
    background: #E2D9E8;
}

.project-visual-marketing {
    background: #F8D7D4;
}

.project-visual-film {
    background: #D4D8E4;
}

.project-browser {
    width: 90%;

    overflow: hidden;

    background: var(--white);

    border: 3px solid var(--blue);

    border-radius: 9px;

    box-shadow:
        12px 14px 0 rgba(53, 92, 125, 0.15);

    transform: rotate(-4deg);

    transition: transform 350ms ease;
}

.project-card:hover .project-browser {
    transform: rotate(0deg) scale(1.03);
}

.project-browser-top {
    display: flex;

    gap: 5px;

    padding: 10px;

    background: #F3EBEF;

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

.project-browser-body {
    padding: 15px;
}

.project-browser-heading {
    width: 72%;
    height: 13px;

    margin-bottom: 13px;
    
        background: var(--blue);

    border-radius: 4px;
}

.project-browser-description {
    width: 95%;
    height: 5px;

    margin-bottom: 6px;

    background: #D8C9D5;

    border-radius: 3px;
}

.project-browser-description.short {
    width: 63%;
}

.project-browser-image {
    height: 65px;

    margin-top: 15px;

    background:
        linear-gradient(
            135deg,
            var(--peach) 0%,
            var(--coral) 55%,
            var(--mauve) 100%
        );

    border-radius: 6px;
}


/* Composición de campaña publicitaria. */

.campaign-poster {
    position: relative;

    width: 185px;
    height: 235px;

    padding: 15px;

    overflow: hidden;

    color: var(--white);

    background: var(--blue);

    border: 5px solid var(--white);

    box-shadow:
        10px 12px 0 rgba(53, 92, 125, 0.12);

    transform: rotate(4deg);

    transition: transform 350ms ease;
}

.project-card:hover .campaign-poster {
    transform: rotate(0deg) scale(1.04);
}

.campaign-label {
    position: relative;

    z-index: 2;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}

.campaign-shape {
    position: absolute;

    top: 30px;
    right: -45px;

    width: 150px;
    height: 150px;

    background: var(--coral);

    border-radius: 50%;
}

.campaign-shape-small {
    position: absolute;

    top: 72px;
    right: 15px;

    width: 65px;
    height: 65px;

    background: var(--peach);

    border-radius: 50%;
}

.campaign-word {
    position: absolute;

    bottom: 12px;
    left: 13px;

    z-index: 2;

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

    font-size: 28px;

    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -1px;
}


/* Composición audiovisual. */

.film-frame {
    position: relative;

    width: 100%;
    max-width: 340px;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--purple);

    border: 6px solid var(--blue);

    border-radius: 8px;

    box-shadow:
        9px 11px 0 rgba(53, 92, 125, 0.14);

    transition: transform 350ms ease;
}

.project-card:hover .film-frame {
    transform: scale(1.04);
}

.film-frame-sun {
    position: absolute;

    top: 17%;
    right: 20%;

    width: 60px;
    height: 60px;

    background: var(--peach);

    border-radius: 50%;
}

.film-frame-hill {
    position: absolute;

    bottom: -15%;

    width: 90%;
    height: 75%;

    border-radius: 50% 50% 0 0;
}

.hill-one {
    left: -20%;

    background: var(--coral);

    transform: rotate(-15deg);
}

.hill-two {
    right: -25%;

    background: var(--blue);

    transform: rotate(18deg);
}

.film-frame-title {
    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 2;

    color: var(--white);

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

    font-size: clamp(17px, 2vw, 24px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -1px;
}

.film-frame-play {
    position: absolute;

    right: 14px;
    bottom: 14px;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    color: var(--blue);

    background: var(--peach);

    border-radius: 50%;

    font-size: 11px;
}

.project-visual-tag {
    position: absolute;

    right: 12px;
    bottom: 12px;

    padding: 7px 10px;