@font-face {
  font-family: "Inter Tight";
  src: url("assets/inter-tight.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #fbfaf7;
  --white: #fff;
  --sand: #eee9df;
  --ink: #191916;
  --muted: #605b52;
  --yellow: #ffcc00;
  --bright: #f4d76a;
  --margin: clamp(20px, 4.2vw, 70px);
  --gap: clamp(24px, 4vw, 68px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --heading: clamp(40px, 5.4vw, 82px);
  --subheading: clamp(27px, 3.3vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 "Inter Tight", Arial, sans-serif; }
body, button { -webkit-tap-highlight-color: transparent; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; }
button { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1; letter-spacing: -.045em; font-weight: 650; }
h2 { font-size: var(--heading); }
h3 { font-size: var(--subheading); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
section[id], article[id] { scroll-margin-top: 24px; }

.frame { width: min(calc(100% - 2 * var(--margin)), 1510px); margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 16px; background: var(--white); transform: translateY(-150%); }
.skip:focus { transform: none; }

.header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 92px; gap: 24px; }
.header > a:first-child { justify-self: start; }
.wordmark { width: clamp(116px, 12.4vw, 172px); height: auto; mix-blend-mode: multiply; }
.header nav { display: flex; gap: clamp(18px, 3vw, 50px); }
.header nav a, .footer a { font-size: 15px; font-weight: 600; text-decoration: none; }
.header nav a:hover, .footer a:hover { text-decoration: underline; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 50px; padding: 12px 20px; text-decoration: none; font-size: 16px; font-weight: 680; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:focus-visible { outline-color: var(--ink); }
.button-yellow { background: var(--yellow); color: var(--ink); }
.button-yellow:hover { background: var(--bright); }
.header-contact { justify-self: end; }

.hero { display: grid; grid-template-columns: 1.04fr 1fr; gap: clamp(16px, 2.6vw, 44px); align-items: stretch; padding-block: 18px clamp(68px, 8vw, 130px); }
.hero-copy { align-self: center; padding-block: 30px; }
.hero h1 { font-size: clamp(41px, 5.8vw, 103px); line-height: .96; letter-spacing: -.04em; }
.hero-copy p { max-width: 38ch; margin-block: 28px 28px; font-size: clamp(17px, 1.45vw, 22px); }
.hero-object { display: grid; min-width: 0; min-height: clamp(360px, 40vw, 640px); }
.model-view { display: grid; place-items: center; position: relative; min-height: 0; }
.model-fallback { width: min(69%, 360px); height: auto; }
.model-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.has-model .model-view canvas { opacity: 1; }
.has-model .model-fallback { visibility: hidden; }

.projects { padding-block: clamp(60px, 8vw, 115px); background: var(--white); }
.section-head { display: grid; grid-template-columns: 1.65fr 1fr; align-items: end; gap: var(--gap); margin-bottom: clamp(32px, 5vw, 72px); }
.section-head p { max-width: 36ch; padding-bottom: 4px; }
.portfolio { display: grid; gap: 12px; }
.project { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--gap); align-items: start; padding: clamp(16px, 3vw, 46px); background: var(--sand); }
.project:nth-child(even) { background: var(--paper); }
.project-picture { overflow: hidden; aspect-ratio: 1.38; background: var(--sand); }
.project-picture img { width: 100%; height: 100%; object-fit: cover; }
#las-gaviotas .project-picture img { object-position: center 45%; }
.project-info { align-self: end; min-width: 0; padding-block: clamp(0px, 1vw, 20px) 0; }
.project-info p, .retail-copy p { margin-top: 10px; max-width: 40ch; }
.project-info .scope { margin-top: 16px; font-weight: 670; }
.detail { max-width: 100%; margin-top: 26px; overflow: hidden; aspect-ratio: 1.53; background: var(--sand); }
.detail img { width: 100%; height: 100%; object-fit: cover; }
#las-gaviotas .detail img { object-position: 50% 39%; }
.retail { display: grid; grid-template-columns: .8fr 1.75fr; gap: var(--gap); padding-top: clamp(54px, 8vw, 118px); align-items: center; }
.retail-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.retail-photos img { width: 100%; height: auto; aspect-ratio: 1.03; object-fit: contain; background: var(--paper); }
.retail-photos figcaption { padding-top: 9px; font-size: 15px; }

.expertise { padding-block: clamp(68px, 9vw, 138px); background: var(--sand); }
.expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.expertise h2 + p { max-width: 35ch; margin-top: 21px; }
.expertise-list { display: grid; gap: 12px; }
.expertise-list article { padding: clamp(19px, 3vw, 37px); background: var(--paper); }
.expertise-list h3 { font-size: clamp(23px, 2.65vw, 37px); }
.expertise-list p { margin-top: 11px; max-width: 42ch; }
.company { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(30px, 8vw, 125px); align-items: center; padding-block: clamp(70px, 9vw, 140px); }
.company-mark { display: grid; place-items: center; min-height: clamp(190px, 26vw, 360px); background: var(--yellow); }
.company-mark img { width: min(49%, 222px); height: auto; }
.company p { margin-top: 22px; max-width: 43ch; font-size: clamp(18px, 1.75vw, 25px); }
.contact { padding-block: clamp(50px, 7vw, 100px); color: var(--white); background: var(--ink); }
.contact-inner { display: grid; grid-template-columns: 1.65fr 1fr; align-items: end; gap: var(--gap); }
.contact h2 + p { margin-top: 20px; }
.contact-note { justify-self: end; padding: 13px 18px; color: var(--ink); background: var(--yellow); font-weight: 600; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 105px; }
.footer p { font-size: 15px; }

@keyframes arrive {
  from { transform: translateY(14px); opacity: .45; }
  to { transform: translateY(0); opacity: 1; }
}
.arrived { animation: arrive 430ms var(--ease) both; }
.arrived:nth-child(2) { animation-delay: 65ms; }
.arrived:nth-child(3) { animation-delay: 130ms; }
.arrived:nth-child(4) { animation-delay: 195ms; }

@media (min-width: 1021px) and (min-height: 690px) and (prefers-reduced-motion: no-preference) {
  .feature-track.has-feature-motion { background: var(--sand); }
  .feature-track.has-feature-motion::after { content: ""; display: block; height: 190px; }
  .has-feature-motion .project { position: sticky; top: 24px; }
  .has-feature-motion .project-picture img { height: 116%; }
}

@media (max-width: 1020px) {
  .header { min-height: 77px; }
  .hero { padding-top: 12px; }
  .section-head { align-items: start; }
  .project { gap: clamp(20px, 3vw, 35px); }
  .project-picture { aspect-ratio: 1.12; }
}

@media (max-width: 700px) {
  .header { grid-template-columns: 1fr auto; padding-block: 13px 0; gap: 12px 16px; }
  .header nav { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; gap: 12px; padding-block: 6px; }
  .header nav a { padding-block: 8px; }
  .header-contact { min-height: 44px; padding: 8px 13px; gap: 10px; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 30px 52px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(33px, 11.7vw, 66px); }
  .hero-copy p { margin-block: 18px 21px; }
  .hero-object { min-height: clamp(285px, 84vw, 410px); }
  .section-head, .project, .retail, .expertise-grid, .company, .contact-inner { grid-template-columns: 1fr; }
  .section-head { gap: 13px; }
  .portfolio { gap: 36px; }
  .project, .project:nth-child(even) { gap: 18px; padding: 0; background: transparent; }
  .project-picture { aspect-ratio: 1.26; }
  .project-info { padding: 2px 0 0; }
  .project-info .scope { margin-top: 12px; }
  .detail { margin-top: 17px; aspect-ratio: 1.66; }
  .retail { gap: 18px; }
  .retail-photos { gap: 10px; }
  .retail-photos figcaption { font-size: 14px; }
  .company-mark { min-height: 0; aspect-ratio: 1.6; }
  .contact-inner { gap: 20px; }
  .contact-note { justify-self: start; }
  .footer { min-height: 88px; flex-wrap: wrap; padding-block: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .arrived { animation: none; }
  .button { transition: none; }
  .button:hover, .button:active { transform: none; }
}

/* The opening, proof and close each have a distinct scroll rhythm. */
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 12; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.hero h1 > span { display: block; }
.hero h1 > span:first-child { font-size: clamp(75px, 11.2vw, 190px); font-weight: 790; letter-spacing: -.04em; }
.hero h1 > span:last-child { margin-top: 11px; font-size: clamp(28px, 3.6vw, 57px); font-weight: 610; line-height: 1.04; letter-spacing: -.035em; }
.hero { padding-bottom: clamp(52px, 6vw, 96px); }
.header nav { gap: clamp(14px, 2.3vw, 42px); }

.company { display: block; background: var(--ink); color: var(--white); padding-block: clamp(64px, 10vw, 150px); }
.company-intro { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: var(--gap); }
.company-intro > p { margin: 0; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: clamp(35px, 7vw, 90px); }
.principles article { padding: clamp(22px, 3.6vw, 54px); background: #302f2a; }
.principles h3 { color: var(--yellow); }
.principles p { font-size: clamp(17px, 1.4vw, 21px); }
.expertise-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.expertise-list article { padding: clamp(22px, 3vw, 42px); }
.expertise-list article:first-child { background: var(--yellow); }
.expertise-list article h3 { max-width: 14ch; }
.portfolio { gap: 14px; }
.feature-track:nth-child(even) .project { background: #f4f1eb; }
#las-gaviotas .project-picture { aspect-ratio: 1.45; }
#las-gaviotas .project-info { align-self: center; }
.project-picture img { transform-origin: center; }
.archive { padding-top: clamp(62px, 9vw, 130px); }
.archive-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 18px; }
.archive-grid article { grid-column: span 2; min-width: 0; }
.archive-grid article:nth-child(n+4) { grid-column: span 3; }
.archive-grid img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; background: var(--sand); }
.archive-grid h4 { margin: 14px 0 4px; font-size: clamp(19px, 2.1vw, 31px); line-height: 1.1; letter-spacing: -.03em; }
.retail { grid-template-columns: 1fr; gap: 25px; }
.retail-copy { display: grid; grid-template-columns: 1.65fr 1fr; gap: var(--gap); align-items: end; }
.retail-photos { gap: 18px; }
.retail-photos figure { overflow: clip; }
.retail-photos img { aspect-ratio: 1.68; object-fit: cover; }
.retail-photos figcaption { background: var(--white); position: relative; }

.clients { position: relative; padding-block: clamp(64px, 9vw, 140px); background: var(--yellow); }
.clients .section-head { position: relative; }
.client-belt { --belt-gap: clamp(24px, 5.5vw, 82px); overflow: hidden; }
.client-track { display: flex; width: max-content; }
.client-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--belt-gap); padding: 14px max(18px, calc(var(--belt-gap) / 2)); margin: 0; list-style: none; }
.client-row li { display: grid; place-items: center; width: clamp(128px, 15vw, 220px); height: 94px; }
.client-row img { width: 100%; height: 100%; object-fit: contain; }
.client-track .client-row { flex-wrap: nowrap; }
.client-track .client-row { min-width: 100vw; }
.client-track { animation: client-pass 31s linear infinite; }
.client-belt.is-paused .client-track, .client-belt:hover .client-track, .client-belt:focus-within .client-track { animation-play-state: paused; }
@keyframes client-pass { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.belt-controls { display: flex; justify-content: end; margin-top: 18px; }
.belt-toggle { background: var(--ink); color: var(--white); border: 0; padding: 8px 14px; cursor: pointer; min-height: 44px; }
.belt-toggle:focus-visible { outline-color: var(--ink); }
.process { padding-block: clamp(60px, 9vw, 130px); }
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.process-visual { position: sticky; top: 36px; }
.process-visual figure { margin-top: 25px; overflow: clip; }
.process-visual img { width: 100%; height: auto; aspect-ratio: 1.8; object-fit: cover; }
.process-visual figcaption { position: relative; background: var(--paper); padding-top: 9px; font-size: 15px; }
.process ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.process li { padding: clamp(20px, 3vw, 37px); background: var(--sand); }
.process li h3 { font-size: clamp(24px, 3vw, 42px); }
.process li p { margin-top: 9px; }
.contact-email { justify-self: end; max-width: 100%; overflow-wrap: anywhere; }
.footer p { text-align: center; }

@media (min-width: 1021px) and (min-height: 690px) and (prefers-reduced-motion: no-preference) {
  .feature-track.has-feature-motion::after { height: 160px; }
}
@media (max-width: 900px) {
  .expertise-list { grid-template-columns: 1fr; }
  .expertise-list article h3 { max-width: none; }
  .archive-grid { grid-template-columns: 1fr 1fr; }
  .archive-grid article, .archive-grid article:nth-child(n+4) { grid-column: auto; }
}
@media (max-width: 700px) {
  .header nav { gap: 8px; }
  .header nav a { font-size: 14px; }
  .hero h1 > span:first-child { font-size: clamp(69px, 18vw, 105px); }
  .hero h1 > span:last-child { font-size: clamp(26px, 7.5vw, 41px); }
  .company-intro, .principles, .retail-copy, .process-grid { grid-template-columns: 1fr; gap: 17px; }
  .feature-track:nth-child(even) .project { background: transparent; }
  .archive-grid { gap: 25px 12px; }
  .archive-grid img { aspect-ratio: 1.25; }
  .archive-grid p { font-size: 15px; }
  .retail-photos { grid-template-columns: 1fr; }
  .process-visual { position: static; }
  .contact-email { justify-self: start; }
  .footer p { text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
  .process-visual { position: static; }
  .client-track { animation: none; }
}

/* The archive moves as a set of photographs, never as tilted cards. */
h2 em { font: inherit; font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.company h2 em { color: var(--yellow); }
.principles { gap: clamp(25px, 6vw, 96px); align-items: start; }
.principles article { padding: 0; background: transparent; }
.principles article:last-child { margin-top: clamp(0px, 8vw, 116px); }
.principles h3 { margin-top: 24px; }
.principles p { margin-top: 10px; }
.story-image { min-width: 0; overflow: hidden; background: var(--sand); }
.story-image img { width: 100%; height: 100%; object-fit: cover; }
.principles .story-image { aspect-ratio: 1.37; }
.principles article:last-child .story-image { aspect-ratio: 1.75; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.text-link { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 680; text-underline-offset: .34em; }
.scope-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; gap: var(--gap); margin-top: clamp(40px, 7vw, 95px); padding-top: clamp(20px, 3vw, 40px); border-top: 1px solid currentColor; }
.scope-row h3 { font-size: clamp(27px, 3.6vw, 55px); }
.scope-row p { max-width: 52ch; }
.scope-list { display: grid; gap: 14px; margin: 0; }
.scope-row p + .scope-list { margin-top: 24px; }
.scope-list dt { font-size: clamp(17px, 1.55vw, 23px); font-weight: 700; }
.scope-list dd { margin: 4px 0 0; max-width: 54ch; }

.expertise-list { grid-template-columns: 1fr; gap: clamp(15px, 2.4vw, 34px); }
.expertise-list .service-scene { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-width: 0; padding: 0; gap: 0; background: var(--paper); }
.expertise-list .service-scene:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.service-scene:nth-child(even) .story-image { grid-column: 2; grid-row: 1; }
.service-scene:nth-child(even) .service-copy { grid-column: 1; grid-row: 1; }
.service-scene .story-image { position: relative; width: 100%; min-height: clamp(260px, 32vw, 510px); }
.service-scene .story-image img { position: absolute; inset: 0; }
.service-copy { display: grid; align-content: center; justify-items: start; padding: clamp(22px, 4vw, 63px); }
.service-copy h3 { font-size: clamp(30px, 3.45vw, 54px); }
.service-copy a { margin-top: 24px; font-weight: 680; text-underline-offset: .34em; }
.service-scene:first-child .service-copy { background: var(--yellow); }
.service-scene:nth-child(3) .service-copy { background: var(--ink); color: var(--white); }
.client-belt:hover .client-track, .client-belt:focus-within .client-track { animation-play-state: running; }

.process-grid { grid-template-columns: 1.15fr 1fr; }
.process-visual { top: clamp(25px, 8vh, 85px); }
.process-visual figure { margin-top: 28px; }
.process-images figure.is-changing img { animation: process-photo .46s var(--ease) both; }
@keyframes process-photo { from { opacity: .5; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.process-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.process-jumps a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; font-weight: 650; text-decoration: none; background: var(--sand); }
.process-jumps a[aria-current="step"], .process-jumps a:hover { background: var(--yellow); }
.process li { scroll-margin-top: 30vh; }
.process.is-live li { transition: background-color .25s var(--ease), transform .25s var(--ease); }
.process.is-live li.is-current { transform: translateX(-8px); background: var(--yellow); }
.process-inline { display: none; }
@media (min-width: 851px) and (prefers-reduced-motion: no-preference) {
  .process.is-live li { min-height: 29vh; display: grid; align-content: center; }
}

.brand-outro { background: var(--ink); color: var(--white); }
.brand-screen { position: relative; min-height: 62svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.brand-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(15px, 3vw, 48px); padding: var(--margin); background: var(--ink); pointer-events: none; }
.brand-end img { width: clamp(64px, 16vw, 232px); height: auto; }
.brand-end strong { display: block; font-size: clamp(64px, 17vw, 247px); line-height: .84; letter-spacing: -.055em; font-weight: 780; }
.brand-end span { display: block; margin-top: 13px; font-size: clamp(15px, 2.5vw, 33px); line-height: 1.12; }
.brand-yellow, .brand-token, .brand-yellow-name { display: none; }
.brand-outro.is-live { height: 250svh; background: var(--sand); }
.brand-outro.is-live .brand-screen { position: sticky; top: 0; height: 100svh; }
.brand-outro.is-live .brand-yellow { display: block; position: absolute; inset: 0; background: var(--yellow); transform: scale(.19); }
.brand-outro.is-live .brand-token { display: block; position: absolute; z-index: 1; width: min(31vw, 280px); aspect-ratio: 1; }
.brand-edge, .brand-face { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-edge { border-radius: 50%; background: #bc8b12; }
.brand-outro.is-live .brand-yellow-name { display: block; position: absolute; z-index: 2; color: var(--ink); font-size: clamp(70px, 24vw, 340px); line-height: .9; font-weight: 800; letter-spacing: -.06em; opacity: 0; }
.brand-outro.is-live .brand-end { z-index: 3; opacity: 0; }

@media (max-width: 850px) {
  .contact-inner { grid-template-columns: 1fr; }
  .contact-email { justify-self: start; }
  .process-grid { grid-template-columns: 1fr; }
  .process-visual { position: static; }
  .process.is-live .process-images { display: none; }
  .process-jumps { display: none; }
  .process-inline { display: block; margin-bottom: 16px; overflow: hidden; }
  .process-inline img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; }
  .process.is-live li.is-current { transform: none; }
}
@media (max-width: 700px) {
  .principles article:last-child { margin-top: 19px; }
  .scope-row { grid-template-columns: 1fr; gap: 16px; }
  .expertise-list .service-scene, .expertise-list .service-scene:nth-child(even) { grid-template-columns: 1fr; }
  .service-scene .story-image { aspect-ratio: 1.58; min-height: 0; }
  .service-scene:nth-child(even) .story-image, .service-scene:nth-child(even) .service-copy { grid-column: auto; grid-row: auto; }
  .brand-outro.is-live .brand-token { width: min(48vw, 240px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-image img { transform: none; }
  .process.is-live li { transition: none; }
}

/* ===== v11 · recorrido comercial: portada, prueba social, oferta, obras, cierre ===== */
.header { position: sticky; top: 0; z-index: 11; width: 100%; padding-inline: max(var(--margin), calc((100% - 1510px) / 2)); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero { min-height: calc(100svh - 92px); padding-block: 8px clamp(36px, 5vw, 70px); align-items: center; }
.hero-object { cursor: pointer; min-height: clamp(380px, 44vw, 700px); }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .line > span { display: block; }
.hero h1 .line:first-child > span { font-size: clamp(75px, 11.2vw, 190px); font-weight: 790; letter-spacing: -.04em; }
.hero h1 .line:last-child > span { margin-top: 6px; font-size: clamp(28px, 3.6vw, 57px); font-weight: 610; line-height: 1.04; letter-spacing: -.035em; }
.js .hero h1 .line > span { transform: translateY(105%); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); }
.js .hero-copy > p, .js .hero-actions { transform: translateY(24px); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); }
.is-ready .hero h1 .line > span, .is-ready .hero-copy > p, .is-ready .hero-actions { transform: none; opacity: 1; }
.is-ready .hero h1 .line:last-child > span { transition-delay: .12s; }
.is-ready .hero-copy > p { transition-delay: .28s; }
.is-ready .hero-actions { transition-delay: .4s; }

/* Clientes, justo después de la portada. */
.clients { padding-block: clamp(46px, 6vw, 84px); background: var(--yellow); overflow: hidden; }
.clients-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: clamp(26px, 3.5vw, 46px); }
.clients-head h2 { font-size: clamp(32px, 4vw, 60px); }
.clients-head p { max-width: 40ch; }
.client-row li { width: clamp(120px, 13vw, 190px); height: 82px; }
.client-row li.recolor img { max-height: 54px; filter: brightness(0); }
.client-track { animation-duration: 38s; }

/* Oferta: rejilla densa, la obra integral ocupa el ancho. */
.expertise { padding-block: clamp(64px, 8vw, 120px); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.service-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; background: var(--paper); }
.service-card .story-image { aspect-ratio: 1.35; }
.service-card .service-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 2.4vw, 36px); }
.service-card h3 { font-size: clamp(25px, 2.4vw, 36px); }
.service-card p { margin-top: 10px; }
.service-card a { margin-top: auto; padding-top: 22px; font-weight: 680; text-underline-offset: .34em; }
.service-index { margin-bottom: 14px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.service-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: none; }
.service-lead .story-image { position: relative; aspect-ratio: auto; min-height: clamp(300px, 34vw, 500px); }
.service-lead .story-image img { position: absolute; inset: 0; }
.service-lead .service-copy { justify-content: center; padding: clamp(26px, 4vw, 64px); background: var(--yellow); }
.service-lead .service-copy a { margin-top: 0; }
.service-lead h3 { font-size: clamp(34px, 4vw, 62px); }
.service-lead p { max-width: 40ch; font-size: clamp(17px, 1.35vw, 20px); }
.service-lead .service-index { color: var(--ink); }
.story-image img { transition: scale .7s var(--ease); }
.service-card:hover .story-image img, .feature:hover .feature-main img { scale: 1.04; }
.scope-columns { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 34px; }

/* Obras: galería horizontal guiada por el scroll. */
.projects { padding-block: clamp(64px, 8vw, 120px) clamp(60px, 8vw, 110px); }
.gallery { position: relative; }
.gallery-stage { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--margin); scroll-padding-inline: var(--margin); }
.gallery-stage::-webkit-scrollbar { display: none; }
.gallery-track { display: flex; gap: clamp(14px, 1.6vw, 26px); width: max-content; padding-right: var(--margin); }
.case { flex: none; width: min(78vw, 400px); scroll-snap-align: start; }
.case figure { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); }
.case figure img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.case:hover figure img { scale: 1.05; }
.case figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; font-size: 12px; font-weight: 650; letter-spacing: .02em; color: var(--white); background: rgba(25, 25, 22, .72); backdrop-filter: blur(6px); }
.case-copy { padding-top: 16px; }
.case-client { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case-copy h3 { margin-top: 6px; font-size: clamp(26px, 2.3vw, 36px); }
.case-scope { max-width: 32ch; margin-top: 8px; font-weight: 600; }
.case-copy a { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--muted); }
.gallery.is-pinned .gallery-stage { position: sticky; top: 92px; display: flex; flex-direction: column; justify-content: center; height: calc(100svh - 92px); overflow: hidden; scroll-snap-type: none; }
.gallery.is-pinned .gallery-track { will-change: transform; }
.gallery.is-pinned .case { width: clamp(300px, 26vw, 430px); }
.gallery.is-pinned .case figure { aspect-ratio: auto; height: min(52svh, 540px); }
.case.is-current .case-client { color: var(--ink); }

/* Ficha institucional y comercio. */
.feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; margin-top: clamp(60px, 8vw, 110px); padding: clamp(18px, 3vw, 44px); background: var(--sand); }
.feature-main { aspect-ratio: 1.3; }
.feature-copy h3 { margin-top: 8px; font-size: clamp(32px, 3.4vw, 54px); }
.feature-copy > p { max-width: 46ch; margin-top: 12px; }
.feature-copy .case-scope { font-size: 18px; }
.feature-detail { aspect-ratio: 1.6; margin-top: 24px; }
.sources { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.retail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; padding-top: clamp(40px, 6vw, 80px); }
.retail-copy { display: block; padding-bottom: 30px; }
.retail-copy h3 { margin-top: 6px; font-size: clamp(28px, 2.8vw, 42px); }
.retail figure { overflow: hidden; }
.retail img { width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.retail figcaption { position: relative; padding-top: 9px; font-size: 14px; background: var(--white); }
.retail figcaption a { margin-left: 8px; color: var(--muted); }
.archive { margin-top: clamp(40px, 6vw, 80px); }

/* Empresa y proceso. */
.company { padding-block: clamp(64px, 8vw, 120px); }
.principles article:last-child { margin-top: clamp(0px, 5vw, 72px); }
.step-number { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.process li.is-current .step-number { color: var(--ink); }
.contact h2 em { color: var(--yellow); }
.contact-place { margin-top: 8px; color: rgba(255, 255, 255, .62); }

.arrived { animation: arrive .6s var(--ease) both; }
@keyframes arrive { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 851px) and (prefers-reduced-motion: no-preference) {
  .process.is-live li { min-height: 24vh; }
}
@media (max-width: 1020px) {
  .header { padding-inline: var(--margin); }
  .hero { min-height: 0; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .feature { grid-template-columns: 1fr; }
  .retail { grid-template-columns: 1fr 1fr; }
  .retail-copy { grid-column: 1 / -1; padding-bottom: 6px; }
}
@media (max-width: 700px) {
  .header { position: relative; background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero { gap: 6px; padding-top: 10px; }
  .hero-object { order: -1; min-height: clamp(250px, 72vw, 360px); }
  .hero h1 .line:first-child > span { font-size: clamp(66px, 18vw, 105px); }
  .hero h1 .line:last-child > span { font-size: clamp(26px, 7.5vw, 41px); }
  .service-grid, .service-lead { grid-template-columns: 1fr; }
  .service-lead .story-image { min-height: 0; aspect-ratio: 1.45; }
  .case { width: 76vw; }
  .feature { padding: 0; background: transparent; }
  .retail { grid-template-columns: 1fr; }
  .scope-columns { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .line > span, .js .hero-copy > p, .js .hero-actions { transform: none; opacity: 1; transition: none; }
  .story-image img, .case figure img { transition: none; }
}

/* v11.1 · sin líneas sueltas ni huecos; cierre sobre negro */
.gallery-count { position: sticky; left: 0; width: max-content; margin: 18px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--muted); }
.gallery.is-pinned .gallery-count { position: static; margin-top: clamp(16px, 2.4svh, 28px); }
.gallery.is-pinned .case figure { height: min(54svh, 560px); }
.case-scope { min-height: 3.1em; }

.feature { align-items: stretch; }
.feature-main { aspect-ratio: auto; min-height: 100%; position: relative; }
.feature-main img { position: absolute; inset: 0; }

.scope-row { grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); }
.scope-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(20px, 3vw, 48px); }
.scope-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-body > p { max-width: 62ch; font-size: clamp(17px, 1.4vw, 21px); }

.principles { align-items: stretch; }
.principles article:last-child { margin-top: 0; }
.principles .story-image, .principles article:last-child .story-image { aspect-ratio: 1.5; }

.brand-outro.is-live { height: 220svh; background: var(--ink); }
.brand-outro.is-live .brand-end { z-index: 0; opacity: 1; visibility: visible; background: transparent; }
.brand-outro.is-live .brand-end img { visibility: hidden; }
.brand-outro.is-live .brand-end div { opacity: 0; }
.brand-outro.is-live .brand-token { z-index: 2; }

@media (max-width: 900px) {
  .scope-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .scope-columns { grid-template-columns: 1fr 1fr; }
  .feature-main { min-height: 0; aspect-ratio: 1.3; }
  .case-scope { min-height: 0; }
}

/* v11.2 · clientes en casillas fijas: un logo cambia a la vez */
.clients-head { flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.clients-head h2 { font-size: clamp(30px, 3.4vw, 52px); }
.clients-head p { max-width: 64ch; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.client-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 3vw, 48px); width: min(calc(100% - 2 * var(--margin)), 1510px); margin-inline: auto; }
.client-slot { position: relative; height: 92px; overflow: hidden; }
.client-slot li { position: absolute; inset: 0; display: grid; place-items: center; width: auto; height: auto; padding: 8px 4px; list-style: none; transition: transform .75s var(--ease), opacity .6s var(--ease), filter .6s var(--ease); }
.client-slot li img { width: 100%; max-width: 190px; height: 100%; max-height: 72px; object-fit: contain; }
.client-slot li.recolor img { max-height: 50px; filter: brightness(0); }
.client-slot li.enter { transform: translateY(70%); opacity: 0; filter: blur(6px); }
.client-slot li.leave { transform: translateY(-70%); opacity: 0; filter: blur(6px); }
@media (max-width: 700px) {
  .client-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .client-slot { height: 74px; }
  .client-slot li img { max-height: 56px; }
  .client-slot li.recolor img { max-height: 38px; }
}

/* v11.3 · títulos palabra por palabra, texto que se enciende, pie negro, logo de cierre mayor */
.split .word { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding: 0 .04em .1em 0; margin: 0 -.04em -.1em 0; }
.split .word > span { display: inline-block; transform: translateY(112%); transition: transform .85s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.split.words-in .word > span { transform: none; }
.scrub .word > span { transition: opacity .25s linear; }

.footer { display: flex; justify-content: center; align-items: center; width: 100%; max-width: none; min-height: 0; margin: 0; padding: clamp(28px, 4vw, 48px) var(--margin) 0; background: var(--ink); }
.back-top { color: var(--white); font-size: 15px; font-weight: 650; text-decoration: none; opacity: .72; transition: opacity .2s var(--ease); }
.back-top:hover { opacity: 1; text-decoration: underline; }
.back-top span { display: inline-block; transition: transform .3s var(--ease); }
.back-top:hover span { transform: translateY(-3px); }
.contact { padding-bottom: clamp(36px, 5vw, 64px); }
.brand-outro { background: var(--ink); }

.brand-end { --fs: clamp(54px, 12.5vw, 196px); gap: clamp(16px, 2.6vw, 42px); }
.brand-end img { width: calc(var(--fs) * 1.22); }
.brand-end strong { font-size: var(--fs); }
.brand-end span { font-size: max(14px, calc(var(--fs) * .15)); }

@media (prefers-reduced-motion: reduce) {
  .split .word > span { transform: none; transition: none; }
}
@media (max-width: 700px) {
  .brand-end { --fs: 17vw; gap: 14px; }
}

/* v11.4 · tarjetas con hover, primeras obras con foto, Somos ROHEL, contacto grande */
.scope-row h3 em, .history-head h3 em { font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.hover-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hover-cards-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hover-cards li { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(190px, 17vw, 250px); padding: clamp(20px, 2.2vw, 32px); background: var(--paper); cursor: default; transition: transform .45s var(--ease), color .35s var(--ease); }
.hover-cards li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: translateY(101%); transition: transform .5s var(--ease); }
.hover-cards li:hover { transform: translateY(-6px); color: var(--ink); }
.hover-cards li:hover::before { transform: none; }
.hc-num { font-family: Georgia, serif; font-style: italic; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; color: var(--muted); transition: color .35s var(--ease); }
.hover-cards h4 { margin: auto 0 0; padding-top: 18px; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.08; letter-spacing: -.03em; }
.hover-cards p { margin-top: 8px; max-width: 34ch; }
.hover-cards li:hover .hc-num { color: var(--ink); }

/* Equipo sobre negro */
.team .team-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: end; }
.team h3 em { color: var(--yellow); }
.team-lead { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.4; }
.team .hover-cards li { background: #262520; color: var(--white); }
.team .hover-cards .hc-num { color: var(--yellow); }
.team .hover-cards li:hover { color: var(--ink); }
.team .hover-cards li:hover .hc-num { color: var(--ink); }

/* Primeras obras: filas tipográficas con foto flotante */
.history { margin-top: clamp(60px, 8vw, 110px); }
.history-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; padding-bottom: clamp(18px, 2.4vw, 30px); border-bottom: 1px solid var(--ink); }
.history-head h3 { font-size: clamp(40px, 5.4vw, 82px); }
.history-head p { max-width: 38ch; color: var(--muted); }
.history-list { margin: 0; padding: 0; list-style: none; }
.history-list li { position: relative; display: grid; grid-template-columns: 4ch minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .6fr); align-items: center; gap: 0 clamp(16px, 2.4vw, 40px); padding: clamp(18px, 2vw, 28px) clamp(8px, 1vw, 16px); border-bottom: 1px solid rgba(25, 25, 22, .18); cursor: default; isolation: isolate; }
.history-list li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.h-num { font-family: Georgia, serif; font-style: italic; font-size: 20px; color: var(--muted); transition: color .3s; }
.h-name { font-size: clamp(26px, 3vw, 46px); font-weight: 680; line-height: 1; letter-spacing: -.04em; transition: transform .45s var(--ease), color .3s; }
.h-text { color: var(--muted); transition: color .3s; }
.h-tag { justify-self: end; padding: 5px 10px; font-size: 13px; font-weight: 650; border: 1px solid currentColor; border-radius: 99px; white-space: nowrap; transition: color .3s; }
.h-thumb { display: none; }
.history-list li:hover::before { transform: scaleY(1); }
.history-list li:hover .h-name { transform: translateX(14px); color: var(--yellow); }
.history-list li:hover .h-num, .history-list li:hover .h-text, .history-list li:hover .h-tag { color: var(--white); }
.history-float { position: fixed; z-index: 20; top: 0; left: 0; width: clamp(240px, 22vw, 340px); margin: 0; pointer-events: none; }
.history-float img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; translate: 24px -50%; scale: .6; opacity: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); transition: opacity .3s var(--ease), scale .45s var(--ease); }
.history-float.show img { scale: 1; opacity: 1; }

/* Somos ROHEL: grande y centrado */
.company-intro { display: grid; grid-template-columns: 1fr; justify-items: center; gap: clamp(22px, 3vw, 40px); text-align: center; }
.company-intro h2 { font-size: clamp(64px, 11.5vw, 196px); line-height: .9; transform-origin: center bottom; }
.company-intro > p { max-width: 30ch; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.25; letter-spacing: -.02em; }
.company { padding-top: clamp(80px, 11vw, 170px); }

/* Contacto: el correo es la llamada principal */
.contact { padding-block: clamp(80px, 10vw, 150px) clamp(36px, 5vw, 64px); }
.contact-inner { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; }
.contact-inner h2 { font-size: clamp(48px, 8vw, 132px); line-height: .95; }
.contact-inner > p:not(.contact-place) { max-width: 46ch; font-size: clamp(18px, 1.6vw, 24px); }
.contact-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 24px; width: 100%; margin-top: clamp(18px, 3vw, 40px); padding: clamp(22px, 3vw, 44px) clamp(22px, 3.6vw, 56px); color: var(--ink); background: var(--yellow); text-align: left; text-decoration: none; }
.contact-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: translateX(-101%); transition: transform .55s var(--ease); }
.contact-cta:hover::before, .contact-cta:focus-visible::before { transform: none; }
.cta-label { grid-column: 1; font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cta-mail { grid-column: 1; font-size: clamp(28px, 5.4vw, 92px); font-weight: 760; line-height: 1; letter-spacing: -.045em; overflow-wrap: anywhere; }
.cta-arrow { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: clamp(56px, 7vw, 110px); aspect-ratio: 1; border-radius: 50%; font-size: clamp(24px, 3vw, 46px); color: var(--yellow); background: var(--ink); transition: transform .45s var(--ease); }
.contact-cta:hover .cta-arrow { transform: rotate(45deg) scale(1.06); }
.contact-place { margin-top: 10px; }

/* Cierre: logotipo más grande */
.brand-end { --fs: clamp(64px, 15vw, 236px); }

@media (max-width: 1020px) {
  .hover-cards-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-list li { grid-template-columns: 3ch minmax(0, 1fr) auto; }
  .h-text { grid-column: 2 / -1; grid-row: 2; margin-top: 6px; }
}
@media (max-width: 700px) {
  .hover-cards, .hover-cards-four { grid-template-columns: 1fr; }
  .hover-cards li { min-height: 0; }
  .team .team-head { grid-template-columns: 1fr; }
  .history-list li { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; padding-inline: 0; }
  .h-thumb { display: block; grid-column: 1; grid-row: 1 / span 3; width: 76px; height: 76px; object-fit: cover; }
  .h-num { display: none; }
  .h-name, .h-text, .h-tag { grid-column: 2; }
  .h-text { grid-row: auto; margin: 0; font-size: 15px; }
  .h-tag { justify-self: start; }
  .history-float { display: none; }
  .company-intro h2 { font-size: clamp(56px, 17vw, 96px); }
  .contact-cta { grid-template-columns: 1fr; }
  .cta-arrow { grid-column: 1; grid-row: auto; width: 52px; }
  .brand-end { --fs: 17vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hover-cards li, .hover-cards li::before, .history-list li::before, .h-name, .contact-cta::before, .cta-arrow, .history-float img { transition: none; }
}
@media (max-width: 700px) {
  .cta-mail { font-size: 7vw; overflow-wrap: normal; white-space: nowrap; }
  .hover-cards-four { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hover-cards-four li { padding: 18px 16px; }
  .hover-cards-four p { font-size: 15px; }
}

/* v11.5 · servicios con menú desplegable, servicios puntuales en dos, pie al final */
.service-more { width: 100%; margin-top: 22px; border-top: 1px solid rgba(25, 25, 22, .2); }
.service-more summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 4px; font-weight: 700; cursor: pointer; list-style: none; }
.service-more summary::-webkit-details-marker { display: none; }
.service-more summary::after { content: "+"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; font-weight: 500; line-height: 1; color: var(--paper); background: var(--ink); transition: transform .35s var(--ease); }
.service-more[open] summary::after { transform: rotate(45deg); }
.service-more summary:hover::after { transform: scale(1.08); }
.service-more[open] summary:hover::after { transform: rotate(45deg) scale(1.08); }
.service-more ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; padding: 0; list-style: none; }
.service-more li { padding: 7px 12px; font-size: 15px; font-weight: 600; border: 1px solid rgba(25, 25, 22, .28); border-radius: 99px; background: rgba(255, 255, 255, .45); }
.service-more[open] li { animation: chip-in .45s var(--ease) both; }
.service-more[open] li:nth-child(2) { animation-delay: 40ms; }
.service-more[open] li:nth-child(3) { animation-delay: 80ms; }
.service-more[open] li:nth-child(4) { animation-delay: 120ms; }
.service-more[open] li:nth-child(5) { animation-delay: 160ms; }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.more-group { margin: 14px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.service-lead .service-more { max-width: 46ch; }
.service-lead .more-group, .service-lead .service-more li { color: var(--ink); }
.service-card .service-mail { margin-top: 22px; padding-top: 0; }

.hover-cards-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hover-cards-two li { min-height: clamp(170px, 14vw, 220px); }

body > .footer { padding: 0 var(--margin) clamp(30px, 4vw, 48px); background: var(--ink); }
.brand-outro.is-live { height: 200svh; }

@media (max-width: 700px) {
  .hover-cards-two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .service-more[open] li { animation: none; }
  .service-more summary::after { transition: none; }
}
.brand-outro { margin-top: -2px; padding-top: 2px; }
body > .footer { margin-top: -2px; }

/* v11.6 · Somos ROHEL a un costado, primeras obras en cuadrícula, volver arriba junto al contacto */
.company-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); justify-items: stretch; align-items: end; gap: var(--gap); text-align: left; }
.company-intro h2 { font-size: clamp(48px, 6.4vw, 104px); line-height: .95; }
.company-intro > p { max-width: 42ch; font-size: clamp(18px, 1.75vw, 25px); line-height: 1.45; letter-spacing: 0; }

.history-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(22px, 3vw, 36px); }
.history-list li { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: clamp(210px, 17vw, 260px); padding: clamp(16px, 1.6vw, 24px); overflow: hidden; border: 0; background: var(--paper); }
.history-list li:nth-child(even) { background: #f4f1eb; }
.history-list li::before { z-index: -1; transform: scaleY(0); }
.history-list li .h-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.12; transition: opacity .5s var(--ease), scale .9s var(--ease); }
.history-list li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(25, 25, 22, .35), rgba(25, 25, 22, .88)); opacity: 0; transition: opacity .5s var(--ease); }
.history-list li .h-num { order: 0; font-size: 18px; }
.history-list li .h-tag { position: absolute; top: clamp(14px, 1.4vw, 22px); right: clamp(14px, 1.4vw, 22px); justify-self: auto; font-size: 12px; }
.history-list li .h-name { margin-top: auto; font-size: clamp(22px, 2vw, 32px); line-height: 1.02; }
.history-list li .h-text { font-size: 14px; line-height: 1.4; max-height: 0; opacity: 0; transform: translateY(8px); transition: max-height .5s var(--ease), opacity .4s var(--ease), transform .5s var(--ease), color .3s; }
.history-list li:hover::before { transform: scaleY(1); }
.history-list li:hover .h-photo { opacity: 1; scale: 1; }
.history-list li:hover::after { opacity: 1; }
.history-list li:hover .h-name { transform: none; color: var(--yellow); }
.history-list li:hover .h-text { max-height: 5em; opacity: 1; transform: none; color: rgba(255, 255, 255, .88); }
.h-thumb { display: none; }

.contact-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; width: 100%; margin-top: 6px; }
.contact-foot .contact-place { margin: 0; }
.contact-foot .back-top { opacity: .8; }
.contact { padding-bottom: clamp(40px, 5vw, 64px); }

@media (max-width: 1020px) {
  .history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-list li { grid-template-columns: none; }
}
@media (hover: none) {
  .history-list li .h-photo { opacity: 1; scale: 1; }
  .history-list li::after { opacity: 1; }
  .history-list li { color: var(--white); }
  .history-list li .h-num, .history-list li .h-tag { color: var(--white); }
  .history-list li .h-name { color: var(--yellow); }
  .history-list li .h-text { max-height: none; opacity: 1; transform: none; color: rgba(255, 255, 255, .88); }
}
@media (max-width: 700px) {
  .company-intro { grid-template-columns: 1fr; gap: 18px; }
  .company-intro h2 { font-size: clamp(44px, 13vw, 64px); }
  .history-list { gap: 8px; }
  .history-list li { min-height: 200px; padding: 14px; }
  .history-list li .h-num { display: block; }
  .history-list li .h-name, .history-list li .h-text, .history-list li .h-tag { grid-column: auto; }
  .history-list li .h-name { font-size: 21px; }
  .history-list li .h-text { font-size: 13px; }
  .contact-foot { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .history-list li .h-photo, .history-list li::after, .history-list li .h-text { transition: none; }
}
.history-list li { align-items: flex-start; text-align: left; }
.history-list li .h-tag { max-width: calc(100% - 70px); white-space: normal; text-align: center; }
@media (max-width: 700px) {
  .history-list li .h-num { display: none; }
  .history-list li .h-tag { left: 14px; right: auto; max-width: calc(100% - 28px); }
}

/* v11.7 · primeras obras: foto y título siempre visibles; al pasar el cursor sale lo que hizo ROHEL */
.history-list li { color: var(--white); background: var(--ink); }
.history-list li:nth-child(even) { background: var(--ink); }
.history-list li .h-photo { opacity: 1; scale: 1.02; }
.history-list li::after { opacity: 1; background: linear-gradient(180deg, rgba(25, 25, 22, .25) 0%, rgba(25, 25, 22, .1) 40%, rgba(25, 25, 22, .82) 100%); }
.history-list li .h-num, .history-list li .h-tag { color: var(--white); }
.history-list li .h-tag { background: rgba(25, 25, 22, .35); backdrop-filter: blur(4px); }
.history-list li .h-name { color: var(--white); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.history-list li:hover .h-photo { scale: 1.1; }
.history-list li:hover::after { background: linear-gradient(180deg, rgba(25, 25, 22, .45) 0%, rgba(25, 25, 22, .7) 45%, rgba(25, 25, 22, .94) 100%); }
.history-list li:hover .h-name { color: var(--yellow); }
@media (hover: none) {
  .history-list li .h-text { max-height: none; opacity: 1; transform: none; }
}

/* v11.8 · obra horizontal en la galería y logos nuevos */
.case-wide { width: min(122vw, 640px); }
.case-wide figure { aspect-ratio: 1.28; }
.gallery.is-pinned .case-wide { width: clamp(560px, 46vw, 820px); }
.client-slot li img[src*="cggc"], .client-row img[src*="cggc"] { max-height: 70px; }
.client-slot li img[src*="albamar"] { max-width: 200px; }
#galeria-obras img[src*="re-albamar"] { object-position: center 30%; }
.client-slot li.recolor img[src*="cggc"] { max-height: 74px; }
.brand-outro.is-live .brand-token { opacity: 0; }

/* v11.9 · Somos ROHEL centrado con su texto */
.company-intro { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.company-intro > p { max-width: 48ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; }
@media (max-width: 700px) { .company-intro { grid-template-columns: 1fr; } }

/* v11.10 · ajustes de celular */
@media (max-width: 700px) {
  /* Servicios: carrusel que se desliza con el dedo */
  .service-grid { display: flex; align-items: flex-start; gap: 12px; margin-inline: calc(-1 * var(--margin)); padding: 0 var(--margin) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); scrollbar-width: none; overscroll-behavior-x: contain; }
  .service-grid::-webkit-scrollbar { display: none; }
  .service-card, .service-lead { flex: 0 0 84vw; scroll-snap-align: start; }
  .service-card .story-image, .service-lead .story-image { aspect-ratio: 1.5; min-height: 0; }
  .service-card h3, .service-lead h3 { font-size: 28px; }
  .service-lead p { font-size: 16px; }

  /* Primeras obras: foto y nombre; al tocar aparece lo que hicimos */
  .history-list li { min-height: 190px; cursor: pointer; }
  .history-list li .h-text { max-height: 0; opacity: 0; transform: translateY(8px); }
  .history-list li.is-open .h-text { max-height: 8em; opacity: 1; transform: none; }
  .history-list li.is-open::after { background: linear-gradient(180deg, rgba(25, 25, 22, .5), rgba(25, 25, 22, .94)); }
  .history-list li.is-open .h-name { color: var(--yellow); }
  .history-list li .h-tag { font-size: 11px; padding: 4px 8px; }
  .history-head p { font-size: 15px; }

  /* Dollarcity: dos fotos lado a lado */
  .retail { grid-template-columns: 1fr 1fr; gap: 10px; }
  .retail-copy { grid-column: 1 / -1; }
  .retail figcaption { font-size: 12px; line-height: 1.35; }
  .retail figcaption a { display: block; margin: 2px 0 0; }

  /* Proceso: fotos más bajas para acortar el recorrido */
  .process-inline img { aspect-ratio: 2; }

  /* Contacto: correo y flecha en una línea */
  .contact-cta { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 20px 18px; }
  .cta-label { grid-column: 1; }
  .cta-mail { grid-column: 1; font-size: 5.6vw; }
  .cta-arrow { grid-column: 2; grid-row: 1 / span 2; width: 46px; font-size: 20px; }

  /* Cierre más corto en celular */
  .brand-outro.is-live { height: 170svh; }
}
.hint-touch { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } }

/* v11.11 · Remodelar o construir: de lo macro a lo micro */
.remodel { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(20px, 3vw, 40px); border-top: 1px solid var(--ink); }
.remodel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: clamp(22px, 3vw, 36px); }
.remodel-head h3 { font-size: clamp(32px, 4.2vw, 64px); }
.remodel-head h3 em { font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.remodel-head p { max-width: 44ch; }
.rm-num { font-family: Georgia, serif; font-style: italic; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; color: var(--muted); transition: color .3s var(--ease); }
.remodel-macro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.remodel-macro article { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(180px, 15vw, 230px); padding: clamp(22px, 2.6vw, 38px); color: var(--white); background: var(--ink); transition: transform .45s var(--ease), color .35s var(--ease); }
.remodel-macro article::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: translateY(101%); transition: transform .5s var(--ease); }
.remodel-macro article .rm-num { color: var(--yellow); }
.remodel-macro h4 { margin: auto 0 0; padding-top: 16px; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.035em; }
.remodel-macro p { margin-top: 8px; max-width: 46ch; opacity: .85; }
.remodel-macro article:hover { transform: translateY(-6px); color: var(--ink); }
.remodel-macro article:hover::before { transform: none; }
.remodel-macro article:hover .rm-num { color: var(--ink); }
.remodel-label { margin: clamp(24px, 3vw, 36px) 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.remodel-micro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.remodel-micro a { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 4px 16px; height: 100%; padding: clamp(18px, 2vw, 26px); color: var(--ink); background: var(--paper); text-decoration: none; transition: transform .4s var(--ease); }
.remodel-micro a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.remodel-micro .rm-num { grid-row: 1 / span 2; font-size: clamp(22px, 2vw, 30px); }
.rm-title { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.rm-text { grid-column: 2; font-size: 15px; color: var(--muted); transition: color .3s; }
.rm-arrow { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--paper); background: var(--ink); transition: transform .4s var(--ease); }
.remodel-micro a:hover, .remodel-micro a:focus-visible { transform: translateY(-4px); }
.remodel-micro a:hover::before, .remodel-micro a:focus-visible::before { transform: none; }
.remodel-micro a:hover .rm-num, .remodel-micro a:hover .rm-text { color: var(--ink); }
.remodel-micro a:hover .rm-arrow { transform: rotate(45deg); }

@media (max-width: 1020px) {
  .remodel-micro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .remodel-macro, .remodel-micro { grid-template-columns: 1fr; gap: 10px; }
  .remodel-macro article { min-height: 0; }
  .remodel-micro a { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .remodel-macro article, .remodel-macro article::before, .remodel-micro a, .remodel-micro a::before, .rm-arrow { transition: none; }
}

/* v11.12 · franja de cotización */
.quote-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--gap); margin-top: clamp(40px, 6vw, 80px); padding: clamp(28px, 4vw, 60px); color: var(--white); background: var(--ink); }
.quote-band h3 { font-size: clamp(30px, 3.6vw, 56px); line-height: 1.02; }
.quote-band h3 em { font-family: Georgia, serif; font-weight: 400; font-style: italic; color: var(--yellow); }
.quote-band p { max-width: 48ch; color: rgba(255, 255, 255, .82); }
.quote-band .button { margin-top: 22px; }
@media (max-width: 700px) { .quote-band { grid-template-columns: 1fr; gap: 14px; margin-inline: calc(-1 * var(--margin)); padding: 32px var(--margin); } }

/* v11.13 · enlace al Libro de Reclamaciones */
.claims-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; color: var(--white); text-decoration: none; opacity: .85; }
.claims-link:hover { opacity: 1; text-decoration: underline; }
.contact-foot { justify-content: space-between; }
.contact-foot .contact-place { margin-right: auto; }

/* v11.14 · enlaces legales y botón de WhatsApp */
.legal-links { display: flex; gap: 16px; font-size: 14px; }
.legal-links a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.legal-links a:hover { color: var(--white); text-decoration: underline; }
.wa-float { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 30; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; background: #25d366; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transition: transform .3s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float[hidden] { display: none; }
@media (max-width: 700px) { .legal-links { width: 100%; justify-content: center; } }
.quote-band .quote-where { margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }

/* v11.15 · firma de FHOCS */
.made-by { font-size: 11px; letter-spacing: .02em; color: inherit; text-decoration: none; opacity: .5; transition: opacity .2s var(--ease); }
.made-by:hover { opacity: 1; text-decoration: underline; }
.made-by strong { font-weight: 800; letter-spacing: -.01em; }
.made-by-home { justify-self: center; margin-top: 14px; color: var(--white); }
.lg-foot .made-by, .lr-foot .made-by { opacity: .85; }
.made-by, .lg-foot .made-by, .lr-foot .made-by { opacity: 1; }
.made-by-home { color: rgba(255, 255, 255, .55); }
.made-by-home:hover { color: var(--white); }

/* Portada con foto de obra y capa negra plana (sin degradado). */
body { overflow-x: clip; }
.hero { position: relative; isolation: isolate; color: var(--white); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: rgba(14, 14, 12, .8); pointer-events: none; }
.hero-bg { position: absolute; z-index: -2; inset: 0 calc(50% - 50vw); overflow: hidden; background: var(--ink); pointer-events: none; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-bg img.is-active { opacity: 1; animation: slow-zoom 9s linear both; }
.hero-copy p { color: rgba(255, 255, 255, .86); }

/* Construcción integral: fotos que se turnan. */
.photo-rotator img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.photo-rotator img.is-active { opacity: 1; }

/* Diseño y planos: lámina de plano dibujada en CSS (no hay foto real de planos). */
.plan-graphic { position: relative; aspect-ratio: 1.35; margin: 0; overflow: hidden; background-color: var(--ink);
  background-image: linear-gradient(rgba(255,204,0,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,204,0,.5) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px; background-position: -1px -1px; }
.plan-graphic::before { content: ""; position: absolute; inset: 22% 18% 20% 16%; border: 3px solid var(--yellow); border-right-width: 10px; box-shadow: inset 70px 0 0 -67px var(--yellow), inset 0 -48px 0 -45px var(--yellow); }
.plan-graphic span { position: absolute; right: 14px; bottom: 10px; color: var(--yellow); font-weight: 700; font-size: 14px; letter-spacing: .08em; }

/* Orden tipo Urban: cifras, franja de garantías, cierre de Nosotros y preguntas. */
.button-line { color: var(--white); border: 1px solid rgba(255, 255, 255, .55); }
.button-line:hover { background: rgba(255, 255, 255, .1); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px clamp(22px, 3vw, 46px); margin: clamp(26px, 3vw, 40px) 0 0; }
.hero-stats div { display: grid; gap: 2px; }
.hero-stats dt { color: var(--yellow); font-size: clamp(30px, 3vw, 46px); font-weight: 780; line-height: 1; letter-spacing: -.04em; }
.hero-stats dd { margin: 0; max-width: 14ch; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .8); }
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0 max(var(--margin), calc((100% - 1510px) / 2)); list-style: none; background: var(--ink); color: var(--white); border-top: 1px solid rgba(255, 255, 255, .14); }
.trust-strip li { display: flex; align-items: center; gap: 10px; padding: 20px 16px 20px 0; font-size: 15px; font-weight: 640; }
.trust-strip li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
.company-cta { margin-top: clamp(36px, 5vw, 64px); }
.faq { padding-block: clamp(64px, 9vw, 130px); background: var(--sand); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--gap); align-items: start; }
.faq-head p { margin-top: 18px; max-width: 32ch; color: var(--muted); }
.faq-list details { border-top: 1px solid rgba(25, 25, 22, .22); }
.faq-list details:last-child { border-bottom: 1px solid rgba(25, 25, 22, .22); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: clamp(18px, 1.6vw, 23px); font-weight: 650; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink); background: var(--yellow); font-size: 22px; transition: transform .35s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 60ch; padding-bottom: 20px; color: var(--muted); }
@media (max-width: 860px) {
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip li { padding-block: 14px; font-size: 14px; }
  .faq-grid { grid-template-columns: 1fr; }
}

/* Servicios por área: Construcción destacada en amarillo al centro. */
.photo-rotator { position: relative; }
.service-feature .service-copy { background: var(--yellow); }
.service-feature .service-more { border-top-color: rgba(25, 25, 22, .35); }

/* Pie de página tipo Urban; la animación del disco queda después, como cierre. */
.site-footer { padding-top: clamp(56px, 7vw, 96px); background: var(--ink); color: rgba(255, 255, 255, .72); font-size: 15px; border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer h2 { margin-bottom: 18px; color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.sf-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.sf-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--white); font-size: 28px; font-weight: 790; letter-spacing: -.04em; }
.sf-brand p:last-child { max-width: 34ch; line-height: 1.6; }
.sf-col { display: grid; align-content: start; gap: 12px; }
.sf-col p { margin: 0; }
.site-footer .claims-link { font-size: 15px; opacity: 1; }
.sf-zones { margin-top: clamp(44px, 6vw, 80px); padding-block: clamp(32px, 4vw, 48px); border-block: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.sf-zones ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-zones li { padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .18); }
.sf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 26px 32px; }
.sf-bottom p { margin: 0; }
.sf-tag { color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.site-footer .made-by { position: static; margin: 0; }
@media (max-width: 860px) {
  .sf-grid { grid-template-columns: 1fr 1fr; }
  .sf-brand { grid-column: 1 / -1; }
  .sf-bottom { justify-content: center; text-align: center; }
}

/* Equipo centrado. */
.team .team-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.team .team-lead { max-width: 52ch; }

/* Servicios por área: tres apartados con galería rotativa. */
.depts { display: grid; gap: 14px; }
.dept { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-width: 0; background: var(--paper); }
.dept:nth-child(even) .dept-gallery { order: 2; }
.dept-gallery { position: relative; min-height: clamp(340px, 38vw, 560px); }
.dept-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dept-arq .dept-gallery { background: #0b0c0e; }
.dept-arq .dept-gallery img { object-fit: contain; }
.dept-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(26px, 4vw, 64px); }
.dept-copy h3 { font-size: clamp(36px, 4.2vw, 64px); }
.dept-kicker { margin-top: 8px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 650; }
.dept-copy > p:not(.dept-kicker):not(.dept-group) { margin-top: 14px; max-width: 48ch; color: var(--muted); }
.dept-group { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dept-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.dept-list li { padding: 7px 12px; font-size: 15px; font-weight: 600; border: 1px solid rgba(25, 25, 22, .28); border-radius: 99px; background: rgba(255, 255, 255, .5); }
/* El amarillo es interactivo: al pasar el cursor (escritorio) o al llegar al apartado (táctil). */
.dept-copy, .dept-copy > p, .dept-list li { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.dept-gallery img { transition: opacity 1.1s var(--ease), scale .8s var(--ease); }
@media (hover: hover) {
  .dept:hover .dept-copy { background: var(--yellow); }
  .dept:hover .dept-copy > p:not(.dept-kicker):not(.dept-group) { color: var(--ink); }
  .dept:hover .dept-list li { border-color: rgba(25, 25, 22, .4); background: rgba(255, 255, 255, .35); }
  .dept:hover .dept-gallery img.is-active { scale: 1.04; }
}
@media (hover: none) {
  .dept.is-current .dept-copy { background: var(--yellow); }
  .dept.is-current .dept-copy > p:not(.dept-kicker):not(.dept-group) { color: var(--ink); }
  .dept.is-current .dept-list li { border-color: rgba(25, 25, 22, .4); background: rgba(255, 255, 255, .35); }
}
.rotator-dots { position: absolute; z-index: 2; left: 18px; bottom: 16px; display: flex; gap: 6px; }
.rotator-dots span { width: 22px; height: 4px; background: rgba(255, 255, 255, .45); transition: background-color .4s var(--ease), width .4s var(--ease); }
.rotator-dots span.is-active { width: 38px; background: var(--yellow); }
@media (max-width: 860px) {
  .dept { grid-template-columns: 1fr; }
  .dept:nth-child(even) .dept-gallery { order: 0; }
  .dept-gallery { min-height: 0; aspect-ratio: 1.3; }
}

/* Somos ROHEL: claro, foto con sello y tarjetas (orden de la referencia). */
.about { padding-block: clamp(70px, 9vw, 130px); background: var(--white); }
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.about-photo { position: relative; margin: 0; padding: 18px; }
.about-photo::before, .about-photo::after { content: ""; position: absolute; width: 46px; height: 46px; border: 3px solid var(--yellow); }
.about-photo::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.about-photo::after { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.about-frame { position: relative; aspect-ratio: .82; overflow: hidden; background: var(--ink); }
.about-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-badge { position: absolute; top: 44px; left: -6px; display: grid; gap: 4px; margin: 0; padding: 18px 22px; background: var(--yellow); color: var(--ink); }
.about-badge strong { font-size: clamp(40px, 4vw, 58px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.about-badge span { max-width: 11ch; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; }
.about-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.about-kicker::before { content: ""; width: 34px; height: 2px; background: var(--yellow); }
.about-copy h2 { font-size: var(--heading); }
.about-copy > p:not(.about-kicker) { margin-top: 18px; max-width: 56ch; color: var(--muted); }
.about-copy > p strong { color: var(--ink); }
.about-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0; padding: 0; list-style: none; }
.about-cards li { padding: 20px 22px; background: var(--paper); border-left: 3px solid var(--yellow); }
.about-cards svg { display: block; box-sizing: content-box; padding: 9px; margin-bottom: 14px; background: rgba(255, 204, 0, .22); color: var(--ink); }
.about-cards h3 { font-size: 18px; letter-spacing: -.02em; }
.about-cards p { margin-top: 6px; font-size: 15px; color: var(--muted); }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-frame { aspect-ratio: 1.2; }
}
@media (max-width: 520px) { .about-cards { grid-template-columns: 1fr; } }

/* Misión y visión: breve, al final. */
.purpose { padding-block: clamp(48px, 6vw, 80px); background: var(--white); }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.purpose h2 { font-size: clamp(24px, 2.4vw, 34px); }
.purpose h2::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 12px; background: var(--yellow); }
.purpose p { margin-top: 14px; max-width: 52ch; color: var(--muted); }
@media (max-width: 700px) { .purpose-grid { grid-template-columns: 1fr; } }

/* Servicios: tres tarjetas en fila con fotos que se turnan; el amarillo aparece al pasar el cursor. */
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.svc-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--white); box-shadow: 0 10px 30px rgba(25, 25, 22, .06); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.svc-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.svc-photo { position: relative; margin: 0; aspect-ratio: 1.6; overflow: hidden; background: #0b0c0e; }
.svc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.1s var(--ease), scale .8s var(--ease); }
.svc-num { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 800; letter-spacing: .06em; transition: background-color .4s var(--ease), color .4s var(--ease); }
.svc-photo .rotator-dots { left: auto; right: 16px; bottom: 20px; }
.svc-body { padding: clamp(22px, 2.4vw, 34px); }
.svc-body h3 { font-size: clamp(24px, 2.2vw, 32px); }
.svc-body p { margin-top: 12px; color: var(--muted); }
.svc-body ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.svc-body li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.svc-body li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--yellow); transform: translateY(-1px) rotate(45deg); }
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(25, 25, 22, .12); }
  .svc-card:hover::after { transform: scaleX(1); }
  .svc-card:hover .svc-num { background: var(--yellow); color: var(--ink); }
  .svc-card:hover .svc-photo img.is-active { scale: 1.05; }
}
@media (max-width: 1020px) { .svc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .svc-cards { grid-template-columns: 1fr; } }

/* Somos ROHEL en celular: foto más baja para no ocupar toda la pantalla. */
@media (max-width: 860px) {
  .about-photo { padding: 12px; }
  .about-frame { aspect-ratio: 1.7; }
  .about-badge { top: 26px; padding: 12px 16px; }
  .about-badge strong { font-size: 34px; }
}

/* Misión y visión: más grandes, en tarjetas, sin espacio muerto. */
.projects { padding-bottom: clamp(36px, 4vw, 60px); }
.purpose { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 96px); }
.purpose-grid { gap: clamp(14px, 1.6vw, 24px); }
.purpose article { position: relative; padding: clamp(28px, 3.6vw, 56px); background: var(--sand); overflow: hidden; transition: background-color .45s var(--ease), transform .45s var(--ease); }
.purpose article::before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: var(--yellow); transform: scaleY(.25); transform-origin: top; transition: transform .5s var(--ease); }
.purpose h2 { font-size: clamp(36px, 4vw, 62px); }
.purpose h2::after { display: none; }
.purpose p { margin-top: 16px; max-width: 34ch; color: var(--ink); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.38; }
@media (hover: hover) {
  .purpose article:hover { background: var(--yellow); transform: translateY(-4px); }
  .purpose article:hover::before { transform: scaleY(1); background: var(--ink); }
}

/* Crédito FHOCS: última línea, centrado. */
.sf-credit { margin: 0; padding: 16px var(--margin) 26px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .08); }
.sf-credit .made-by { font-size: 13px; color: rgba(255, 255, 255, .7); }

/* Movimiento: zoom lento en la foto activa de cada galería. */
.photo-rotator img.is-active { animation: slow-zoom 7s linear both; }
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.history-list li img, .process-images img { transition: scale .7s var(--ease); }
.process-images figure:hover img { scale: 1.05; }
@media (prefers-reduced-motion: reduce) { .photo-rotator img.is-active { animation: none; } }

/* La galería de portada va detrás del contenido (gana a .photo-rotator { position: relative }). */
.hero > .hero-bg { position: absolute; }

/* Entradas más vivas al hacer scroll. */
.arrived { animation: arrive-up .75s var(--ease) both; }
@keyframes arrive-up { from { transform: translateY(34px) scale(.985); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
.svc-card, .about-cards li, .purpose article { transition: transform .35s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease); will-change: transform; }
.about-cards li:hover { box-shadow: 0 16px 34px rgba(25, 25, 22, .1); }
.about-cards li:hover svg { background: var(--yellow); }
.about-cards svg { transition: background-color .35s var(--ease); }
.faq-list summary { transition: padding-left .35s var(--ease); }
.faq-list summary:hover { padding-left: 10px; }
.about-photo .rotator-dots { left: 16px; bottom: 14px; }

/* Menos espacio en blanco entre bloques. */
.expertise { padding-block: clamp(52px, 6vw, 92px); }
.section-head { margin-bottom: clamp(24px, 3vw, 44px); }
.about { padding-block: clamp(52px, 6vw, 96px); }
.process { padding-block: clamp(52px, 6vw, 96px); }
.faq { padding-block: clamp(52px, 6vw, 96px); }
.clients { padding-block: clamp(44px, 6vw, 96px); }
.remodel { margin-top: clamp(40px, 5vw, 72px); }

/* Clientes: logos más pequeños, más a la vista (8). */
.client-slots { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, 2vw, 32px); }
.client-slot { height: 74px; }
.client-slot li img { max-width: 150px; max-height: 54px; }
.client-slot li.recolor img { max-height: 38px; }
.client-slot li img[src*="cggc"], .client-slot li.recolor img[src*="cggc"] { max-height: 56px; }
.client-slot li img[src*="albamar"] { max-width: 150px; }
.client-slot li { transition: transform .55s var(--ease), opacity .45s var(--ease), filter .45s var(--ease); }
@media (max-width: 700px) {
  .client-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .client-slot { height: 58px; }
  .client-slot li img { max-height: 40px; }
  .client-slot li.recolor img { max-height: 28px; }
}

/* ===== Móvil y tablet ===== */
/* Tablet: la tercera tarjeta de servicios ocupa todo el ancho, con la foto al lado (sin hueco). */
@media (min-width: 701px) and (max-width: 1020px) {
  .svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .svc-card:last-child:nth-child(odd) .svc-photo { flex: 0 0 50%; aspect-ratio: auto; min-height: 300px; }
}
/* Celular: servicios en carrusel deslizable; la siguiente tarjeta se asoma. */
@media (max-width: 700px) {
  .svc-cards { display: flex; gap: 12px; margin-inline: calc(-1 * var(--margin)); padding: 4px var(--margin) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); scrollbar-width: none; overscroll-behavior-x: contain; }
  .svc-cards::-webkit-scrollbar { display: none; }
  .svc-card { flex: 0 0 84%; scroll-snap-align: start; }
  .svc-body { padding: 20px; }
  .svc-body p { font-size: 15px; }
  .svc-body ul { gap: 8px; margin-top: 14px; }
  .svc-body li { font-size: 14px; }
  .svc-swipe { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--muted); }
  /* Somos: tarjetas en dos columnas compactas. */
  .about-cards { grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 0; }
  .about-cards li { padding: 14px; }
  .about-cards svg { padding: 6px; margin-bottom: 8px; }
  .about-cards h3 { font-size: 15px; }
  .about-cards p { font-size: 13px; }
  .about-copy > p:not(.about-kicker) { font-size: 15px; }
  /* Encabezados de sección más juntos. */
  .section-head { gap: 14px; }
  .purpose article { padding: 24px; }
  .purpose p { font-size: 18px; }
  .faq-list summary { font-size: 17px; padding: 16px 0; }
  /* Pie: servicios y empresa lado a lado, contacto abajo. */
  .sf-grid { gap: 26px 18px; }
  .sf-col:last-child { grid-column: 1 / -1; }
  .sf-zones { margin-top: 32px; padding-block: 24px; }
  .sf-zones li { padding: 7px 12px; font-size: 14px; }
  .sf-bottom { flex-direction: column; gap: 10px; }
}
.svc-swipe { display: none; }
/* Enlaces pequeños: área táctil cómoda. */
@media (hover: none) { .case-copy a, .sources a { display: inline-block; padding-block: 10px; } }

/* Portada: titular gancho grande y, debajo, ROHEL y quiénes somos. */
.hero .hero-hook .line > span { font-size: clamp(48px, 7.4vw, 124px); font-weight: 800; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; margin-top: 0; }
.hero .hero-hook .line:last-child > span { color: var(--yellow); }
.hero-rotate { display: inline-block; transition: transform .42s var(--ease), opacity .42s var(--ease), filter .42s var(--ease); }
.hero-rotate.is-out { transform: translateY(-40%); opacity: 0; filter: blur(6px); }
.hero-copy .hero-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: none; margin: clamp(20px, 2.4vw, 32px) 0 0; color: var(--white); }
.hero-brand strong { padding: 4px 12px; background: var(--yellow); color: var(--ink); font-size: clamp(20px, 1.8vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.hero-brand span { font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; }
.hero-copy .hero-brand + p { margin-top: 14px; }
.js .hero-copy > .hero-brand { transform: translateY(24px); opacity: 0; transition: transform .9s var(--ease) .2s, opacity .9s var(--ease) .2s; }
.is-ready .hero-copy > .hero-brand { transform: none; opacity: 1; }
@media (max-width: 700px) {
  .hero .hero-hook .line > span { font-size: clamp(40px, 12.5vw, 64px); }
  .hero-actions { gap: 10px; }
  .hero-actions .button { width: 100%; }
}

/* Celular: disco más pequeño para que el titular y el botón entren en la primera pantalla. */
@media (max-width: 700px) {
  .hero { gap: 6px; padding-block: 14px 40px; min-height: 0; }
  .hero-object, .hero .hero-object { min-height: 170px; height: 170px; }
}

/* Portada: titular en dos niveles (negrita grande + línea fina en mayúsculas). */
.hero .hero-hook .line:first-child > span { font-size: clamp(36px, 5.4vw, 92px); font-weight: 800; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; color: var(--white); max-width: 12ch; }
.hero .hero-hook .line.hero-sub:last-child > span { margin-top: 10px; font-size: clamp(20px, 2.5vw, 42px); font-weight: 300; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: var(--white); }
.hero-copy p strong { color: var(--white); font-weight: 700; }
@media (max-width: 700px) {
  .hero .hero-hook .line:first-child > span { font-size: clamp(32px, 10.4vw, 48px); }
  .hero .hero-hook .line.hero-sub:last-child > span { font-size: clamp(17px, 5.2vw, 24px); }
}

/* Portada con la tipografía del sitio: Inter Tight sin mayúsculas forzadas y acento en serif cursiva. */
.hero .hero-hook .line:first-child > span { font-size: clamp(44px, 6.2vw, 108px); font-weight: 790; line-height: .96; letter-spacing: -.045em; text-transform: none; max-width: 11ch; }
.hero .hero-hook .line.hero-sub:last-child > span { margin-top: 10px; font-size: clamp(28px, 3.4vw, 56px); font-weight: 610; line-height: 1.04; letter-spacing: -.035em; text-transform: none; color: var(--white); }
.hero-hook em { font-family: Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.02em; color: var(--yellow); }
.hero-copy .hero-brand { display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 2.4vw, 30px); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.hero-copy .hero-brand::before { content: ""; flex: none; width: 34px; height: 2px; background: var(--yellow); }
@media (max-width: 700px) {
  .hero .hero-hook .line:first-child > span { font-size: clamp(38px, 11.5vw, 54px); }
  .hero .hero-hook .line.hero-sub:last-child > span { font-size: clamp(24px, 7.2vw, 34px); }
  .hero-copy .hero-brand { font-size: 11px; letter-spacing: .12em; }
}

/* Titular: solo "Proyectamos y construimos." con el acento en serif cursiva. */
.hero .hero-hook .line.hero-main2:last-child > span { margin-top: 0; font-size: clamp(44px, 6.2vw, 108px); font-weight: 790; line-height: 1.02; letter-spacing: -.045em; text-transform: none; color: var(--white); }
.hero-hook .hero-main2 em { letter-spacing: -.03em; }
.hero-copy .hero-hook + p { margin-top: clamp(20px, 2.4vw, 30px); }
@media (max-width: 700px) { .hero .hero-hook .line.hero-main2:last-child > span { font-size: clamp(38px, 11.5vw, 54px); } }

/* Titular en dos líneas: "Proyectamos y construimos tu obra" + "de principio a fin." en serif cursiva. */
.hero .hero-hook .line:first-child > span { font-size: clamp(40px, 5.2vw, 90px); max-width: 13ch; }
.hero .hero-hook .line.hero-main2:last-child > span { margin-top: 6px; font-size: clamp(36px, 4.6vw, 80px); }
@media (max-width: 700px) {
  .hero .hero-hook .line:first-child > span { font-size: clamp(34px, 10vw, 46px); }
  .hero .hero-hook .line.hero-main2:last-child > span { font-size: clamp(30px, 9vw, 42px); }
}

/* Negritas en los textos: lo importante resalta en el tono principal. */
.section-head p strong, .svc-body p strong, .about-copy p strong, .faq-list p strong, .purpose p strong { color: var(--ink); font-weight: 700; }
.hero-copy p strong { color: var(--white); font-weight: 700; }

/* Celular: titular → disco de ROHEL al centro → texto → botones. */
@media (max-width: 700px) {
  .hero { display: flex; flex-direction: column; }
  .hero-copy { display: contents; }
  .hero-hook { order: 1; }
  .hero .hero-object { order: 2; align-self: stretch; margin-block: 8px 4px; }
  .hero-copy > p { order: 3; }
  .hero-actions { order: 4; }
}

/* Titular: "de principio a fin." más pegado a la primera línea. */
.hero .hero-hook .hero-main2 { margin-top: clamp(-16px, -1vw, -6px); }
.hero .hero-hook .line.hero-main2:last-child > span { margin-top: 0; line-height: .98; }

/* Celular: disco de ROHEL más grande y centrado entre el titular y el texto. */
@media (max-width: 700px) {
  .hero .hero-object { min-height: 0; height: clamp(230px, 66vw, 290px); margin-block: 14px 10px; }
}

/* Celular: el lienzo del disco trae aire interno; se compensa para pegarlo al titular y al texto. */
@media (max-width: 700px) {
  .hero .hero-object { height: clamp(230px, 66vw, 290px); margin-block: -26px -30px; }
}

/* Fondo de portada: las fotos se deslizan (entra por la derecha, la anterior sale por la izquierda). */
.hero-bg img, .hero-bg img.is-active { opacity: 1; animation: none; transform: translateX(100%); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.hero-bg img.is-active { transform: none; }
.hero-bg img.is-prev { transform: translateX(-100%); }
.hero-bg img:not(.is-active):not(.is-prev) { transition: none; }
@media (prefers-reduced-motion: reduce) { .hero-bg img { transition: none; } }

/* Barra superior con menos protagonismo: más delgada en todo el sitio. */
.header { min-height: 62px; gap: 18px; transition: background-color .35s var(--ease), color .35s var(--ease), min-height .35s var(--ease); }
.wordmark { width: clamp(96px, 8.6vw, 124px); transition: filter .35s var(--ease); }
.header nav a { font-size: 14px; font-weight: 600; }
.header-contact { min-height: 40px; padding: 8px 16px; gap: 16px; font-size: 14px; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }

/* En la portada (arriba del todo, escritorio y tablet): barra transparente sobre la foto, en blanco. */
@media (min-width: 701px) {
  .hero { margin-top: -62px; padding-top: 70px; min-height: 100svh; }
  .at-top .header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--white); }
  .at-top .header nav a { color: rgba(255, 255, 255, .88); }
  .at-top .header nav a:hover { color: var(--white); }
  .at-top .wordmark { mix-blend-mode: normal; filter: brightness(0) invert(1); }
  .at-top .header-contact { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
}

/* Logo claro (letras blancas, símbolo intacto) solo sobre la portada. */
.wordmark-light { display: none; }
@media (min-width: 701px) {
  .at-top .wordmark { filter: none; }
  .at-top .wordmark:not(.wordmark-light) { display: none; }
  .at-top .wordmark-light { display: block; mix-blend-mode: normal; }
}

/* ===== Celular: pasada de optimización (solo tamaños y espacios, misma estructura) ===== */
@media (max-width: 700px) {
  /* Ritmo general: títulos y espacios más contenidos. */
  h2, .section-head h2, .about-copy h2, .faq-head h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .expertise, .about, .process, .faq, .projects { padding-block: 40px; }
  .purpose { padding-block: 8px 40px; }
  .section-head { margin-bottom: 18px; }
  .section-head p, .faq-head p { font-size: 15px; }

  /* Han confiado en nosotros: más compacto. */
  .clients { padding-block: 30px 22px; }
  .clients-head { gap: 6px; margin-bottom: 14px; }
  .clients-head h2 { font-size: 26px; }
  .clients-head p { font-size: 14px; line-height: 1.4; }

  /* Remodelar o construir: tarjetas grandes más bajas y trabajos puntuales como fichas cortas en 2 columnas. */
  .remodel { margin-top: 32px; padding-top: 18px; }
  .remodel-head h3 { font-size: 28px; }
  .remodel-head p { font-size: 15px; }
  .remodel-macro { gap: 8px; }
  .remodel-macro article { padding: 18px; }
  .remodel-macro h4 { font-size: 20px; }
  .remodel-macro p { font-size: 14px; }
  .rm-num { font-size: 22px; }
  .remodel-label { margin: 20px 0 8px; font-size: 11px; }
  .remodel-micro { grid-template-columns: 1fr 1fr; gap: 6px; }
  .remodel-micro a { grid-template-columns: 1fr auto; grid-template-rows: auto; gap: 8px; padding: 12px; min-height: 58px; }
  .remodel-micro .rm-num, .remodel-micro .rm-text { display: none; }
  .remodel-micro .rm-title { font-size: 14px; line-height: 1.2; }
  .remodel-micro .rm-arrow { width: 26px; height: 26px; font-size: 13px; }
  .quote-band { margin-top: 28px; padding-block: 26px; }
  .quote-band h3 { font-size: 26px; }

  /* Así trabajamos: pasos más bajos. */
  .process li { padding: 18px; }
  .process li h3 { font-size: 22px; }
  .process li p { font-size: 15px; }
  .process li img, .process figure img { max-height: 170px; object-fit: cover; }

  /* Obras: fotos de Yungar y textos algo más chicos. */
  .feature-main { aspect-ratio: 1.5; }
  .feature-detail { aspect-ratio: 1.9; margin-top: 16px; }
  .feature-copy h3, .retail-copy h3, .history-head h3 { font-size: 26px; }
  .history { margin-top: 36px; }
  .history-list li { padding-block: 14px; }

  /* Pie más compacto. */
  .site-footer { padding-top: 40px; font-size: 14px; }
  .sf-col { gap: 9px; }
}

/* Servicios: lo que incluye cada área en píldoras redondeadas (como antes). */
.svc-body ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.svc-body li { display: inline-flex; align-items: center; padding: 7px 13px; font-size: 14px; font-weight: 600; line-height: 1.25; border: 1px solid rgba(25, 25, 22, .28); border-radius: 99px; background: rgba(255, 255, 255, .55); transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.svc-body li::before { display: none; }
@media (hover: hover) { .svc-card:hover .svc-body li { border-color: rgba(25, 25, 22, .4); } .svc-body li:hover { background: var(--yellow); border-color: var(--yellow); } }
@media (max-width: 700px) { .svc-body ul { gap: 6px; } .svc-body li { padding: 6px 11px; font-size: 13px; } }

/* Preguntas frecuentes: la respuesta se abre con altura animada y entra suave. */
.faq-list { interpolate-size: allow-keywords; }
.faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
.faq-list details[open] p { animation: faq-in .55s var(--ease) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.faq-list details { transition: background-color .35s var(--ease); }
.faq-list details[open] { background: rgba(255, 255, 255, .45); }
.faq-list details[open] summary { padding-left: 12px; }
.faq-list details[open] p { padding-left: 12px; padding-right: 12px; }
@media (prefers-reduced-motion: reduce) { .faq-list details::details-content { transition: none; } .faq-list details[open] p { animation: none; } }

/* Celular: "Así trabajamos" con más aire entre foto, número, título y texto. */
@media (max-width: 700px) {
  .process ol { gap: 14px; }
  .process li { padding: 22px 20px 24px; }
  .process li figure { margin: 0 0 18px; }
  .process li figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; }
  .process li .step-number { margin-bottom: 8px; }
  .process li h3 { line-height: 1.15; }
  .process li p { margin-top: 10px; line-height: 1.6; }
}

/* Celular: disco centrado con el mismo aire arriba y abajo (alto fijo, márgenes iguales) y párrafo más compacto. */
@media (max-width: 700px) {
  .hero .hero-object { height: 240px; min-height: 0; margin-block: -30px; }
  .hero-copy > p { max-width: 31ch; font-size: 15px; line-height: 1.5; text-align: left; }
  .hero-actions { margin-top: 4px; }
}

/* Botón flotante de WhatsApp más grande. */
.wa-float { width: 70px; height: 70px; right: clamp(16px, 2.2vw, 30px); bottom: clamp(16px, 2.2vw, 30px); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
@media (max-width: 700px) { .wa-float { width: 64px; height: 64px; } .wa-float svg { width: 34px; height: 34px; } }

/* Cinco áreas: 3 arriba y 2 abajo (más anchas) para no dejar huecos. */
@media (min-width: 1021px) {
  .svc-five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-five .svc-card { grid-column: span 2; }
  .svc-five .svc-card:nth-child(n+4) { grid-column: span 3; }
  .svc-five .svc-card:nth-child(n+4) .svc-photo { aspect-ratio: 2.2; }
}

/* Celular: aviso de deslizar visible sobre las tarjetas de servicios. */
@media (max-width: 700px) { .svc-swipe { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--muted); } }

/* Cinco áreas: las dos principales (Arquitectura y Construcción) primero y grandes; las otras tres debajo. */
@media (min-width: 1021px) {
  .svc-five .svc-card, .svc-five .svc-card:nth-child(n+4) { grid-column: span 2; }
  .svc-five .svc-card.svc-big { grid-column: span 3; }
  .svc-five .svc-card:nth-child(n+4) .svc-photo { aspect-ratio: 1.6; }
  .svc-five .svc-big .svc-photo { aspect-ratio: 1.75; }
  .svc-five .svc-big .svc-body { padding: clamp(26px, 2.8vw, 42px); }
  .svc-five .svc-big h3 { font-size: clamp(30px, 2.9vw, 44px); }
  .svc-five .svc-big p { font-size: 18px; }
}
@media (min-width: 701px) and (max-width: 1020px) {
  .svc-five .svc-big h3 { font-size: 30px; }
}