/* Cabecera */
.header { height: 96px; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; background: var(--paper); gap: 24px; }
.header nav { display: flex; gap: 36px; font-size: 15px; }
.header nav a { text-decoration: none; padding: 12px 0; }
.header nav a:hover { color: var(--accent); }

/* Portada */
.hero { position: relative; min-height: 620px; display: flex; align-items: center; background: var(--paper) url('../assets/portada-geometria-cairo.png') center / cover no-repeat; }
.hero-layout { padding: 45px 0 50px; }
.hero-copy { width: 56%; }
.hero h1 { font-size: clamp(48px, 4.8vw, 71px); line-height: 1.055; letter-spacing: -.05em; max-width: 680px; margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .eyebrow { margin-bottom: 23px; }
.intro { font-size: 20px; line-height: 1.5; max-width: 450px; margin-bottom: 0; color: #3c3b38; }
.actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 27px; }

/* Servicios */
.services { background: var(--paper) url('../assets/servicios-geometria-cairo.png') center bottom / cover no-repeat; padding: 78px 0; }
.services .section-heading { width: 68%; gap: 35px; }
.services .section-heading > p { max-width: 315px; }
.service-list { width: 62%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 50px; margin-top: 36px; }
.service-list article { max-width: 330px; }
.service-list h3 { font-size: 23px; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 12px; }
.service-list p { font-size: 16px; line-height: 1.6; margin: 0; color: var(--muted); }

/* Visión creativa: conservar el tríptico original. */
.vision { background: var(--ink); color: var(--cream); padding: 85px 0 58px; }
.vision .eyebrow { color: #d7b496; }
.vision .section-heading > p { color: #d1ccc3; }
.portfolio-image { overflow: hidden; margin: 22px -2.2% 0; }
.portfolio-image img { width: 100%; height: auto; margin-top: -16.7%; margin-bottom: -10.2%; }
.portfolio-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 27px; }
.portfolio-labels > span { font-size: 20px; letter-spacing: -.02em; }
.portfolio-labels small { display: block; letter-spacing: 0; font-size: 15px; color: #c1bcb3; margin-top: 9px; }
.concept-note { max-width: 680px; font-size: 13px; line-height: 1.5; color: #bbb7af; margin: 30px 0 0; }

/* Proceso */
.process { background: var(--paper); }
.process h2 { max-width: 850px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 65px; margin-top: 60px; }
.steps h3 { font-size: 28px; letter-spacing: -.03em; margin: 0 0 15px; }
.steps p { max-width: 330px; font-size: 17px; line-height: 1.65; color: var(--muted); margin-bottom: 0; }

/* Estudio */
.about { background: var(--paper) url('../assets/05-estudio.png') center / cover no-repeat; min-height: 610px; padding: 85px 0; display: flex; align-items: center; }
.about-copy { width: 44%; max-width: 590px; }
.about h2 { font-size: clamp(38px, 4.05vw, 60px); }
.about-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.65; color: #48453f; }
.signature { display: block; font-size: 14px; line-height: 1.5; margin-top: 32px; color: var(--accent); }

/* Contacto y pie */
.contact { background: var(--clay) url('../assets/06-contacto.png') center / cover no-repeat; color: var(--white); padding: 75px 0 32px; }
.contact .eyebrow { color: var(--white); }
.contact h2 { max-width: 800px; font-size: clamp(42px, 4.5vw, 68px); }
.contact h2 span { font-weight: 350; }
.contact > .wrap > p:not(.eyebrow) { font-size: 17px; line-height: 1.65; }
.email { display: block; width: fit-content; font-size: 16px; margin-top: 22px; text-decoration: none; text-underline-offset: 5px; overflow-wrap: anywhere; }
.email:hover { text-decoration: underline; }
.contact footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 95px; padding-top: 25px; }
.contact footer p { font-size: 14px; line-height: 1.7; margin: 0; }
.contact footer > a:last-child { font-size: 14px; text-decoration: none; padding: 10px 0; }
/* La misma imagen original pasa a blanco mediante CSS sobre el fondo naranja. */
.footer-logo { width: 206px; height: 82px; mix-blend-mode: screen; margin: 0; }
.footer-logo img { width: 312px; height: 312px; left: -53px; top: -116px; filter: grayscale(1) invert(1) contrast(15) brightness(2); }