.hero { position: relative; min-height: max(760px, 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--white); background: var(--petrol); }
.hero__media, .hero__shade, .hero__grid { position: absolute; inset: 0; }
.hero__media { background: url("/cubiertas/assets/hero-roof-silicone-v2.png") right 56% / cover no-repeat; animation: heroZoom 16s ease-out both; }
.hero__shade { background: linear-gradient(90deg, rgba(5,30,35,.96) 0%, rgba(5,30,35,.82) 42%, rgba(5,30,35,.2) 78%), linear-gradient(0deg, rgba(5,30,35,.7), transparent 48%); }
.hero__grid { opacity: .3; background-image: linear-gradient(90deg, transparent calc(25% - 1px), rgba(255,255,255,.16) 25%, transparent calc(25% + 1px), transparent calc(75% - 1px), rgba(255,255,255,.16) 75%, transparent calc(75% + 1px)); }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero__content { position: relative; z-index: 2; padding-top: calc(var(--header) + 90px); padding-bottom: 180px; }
.hero h1 { max-width: 980px; margin-bottom: 30px; color: var(--white); font-size: clamp(4.2rem, 9.2vw, 9rem); font-weight: 600; text-transform: uppercase; }
.hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px rgba(255,255,255,.78); }
.hero__lead { max-width: 600px; margin-bottom: 36px; color: #d7e2e3; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero__actions { display: flex; align-items: center; gap: 36px; }
.hero__facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.26); }
.hero__facts > div { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: end; min-height: 112px; padding: 24px 28px 22px 0; border-right: 1px solid rgba(255,255,255,.26); }
.hero__facts > div:not(:first-child) { padding-left: 28px; }
.hero__facts > div:last-child { border-right: 0; }
.hero__facts strong { font-family: var(--display); font-size: 3.4rem; line-height: .8; }
.hero__facts span { max-width: 120px; font-size: .72rem; line-height: 1.4; text-transform: uppercase; }

.surface-ticker { overflow: hidden; color: var(--white); background: var(--red); }
.surface-ticker > div { width: max-content; display: flex; align-items: center; min-height: 66px; gap: 36px; padding-inline: 32px; animation: ticker 28s linear infinite alternate; font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.surface-ticker i { opacity: .65; font-style: normal; }
@keyframes ticker { to { transform: translateX(-14%); } }

.intro { display: grid; grid-template-columns: .9fr 1fr; gap: clamp(60px, 9vw, 132px); align-items: center; }
.intro__copy h2 { margin-bottom: 36px; font-size: clamp(3rem, 5.5vw, 5.4rem); }
.intro__copy > p:not(.kicker) { max-width: 620px; color: var(--text); }
.intro__visual { position: relative; min-height: 720px; }
.intro__image { height: 720px; overflow: hidden; margin-left: 12%; }
.intro__image img { height: 100%; object-fit: cover; object-position: center; }
.intro__stamp { position: absolute; left: 0; bottom: 50px; width: 190px; height: 190px; display: grid; place-content: center; color: var(--white); background: var(--red); text-align: center; }
.intro__stamp span, .intro__stamp small { font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.intro__stamp strong { font-family: var(--display); font-size: 5rem; line-height: .85; }

.services { color: var(--white); background: var(--petrol); }
.services .section-heading { margin-bottom: 72px; }
.service-explorer { display: grid; grid-template-columns: .8fr 1.2fr; border-top: 1px solid rgba(255,255,255,.2); }
.service-tabs { display: flex; flex-direction: column; }
.service-tab { min-height: 128px; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 12px 28px 12px 0; color: #9ab0b3; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); background: transparent; text-align: left; cursor: pointer; transition: color .25s, padding .25s; }
.service-tab span { font-size: .68rem; font-weight: 700; }
.service-tab strong { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 600; line-height: 1; text-transform: uppercase; }
.service-tab i { font-style: normal; opacity: 0; transform: translate(-10px, 10px); transition: opacity .25s, transform .25s; }
.service-tab.is-active { padding-left: 22px; color: var(--white); background: var(--red); }
.service-tab.is-active i { opacity: 1; transform: none; }
.service-stage { position: relative; min-height: 520px; overflow: hidden; background: #082a30; }
.service-stage::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(5,30,35,.95)); pointer-events: none; }
.service-stage > img { height: 100%; object-fit: cover; transition: opacity .25s, transform .6s ease; }
.service-stage.is-changing > img { opacity: .35; transform: scale(1.025); }
.service-stage__content { position: absolute; z-index: 2; inset: auto 42px 36px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: end; }
.service-stage__content p { margin: 0; font-size: 1.03rem; }
.service-stage__content ul { margin: 0; padding: 0; list-style: none; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.service-stage__content li { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.26); }

.system .section-heading { max-width: 1050px; margin-bottom: 88px; }
.system__layout { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(60px, 9vw, 132px); align-items: start; }
.system__media img { height: 330px; object-fit: cover; }
.system__media > p { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: .75rem; text-transform: uppercase; }
.system__media strong { color: var(--red); }
.process { margin: 0; padding: 0; list-style: none; }
.process li { display: grid; grid-template-columns: 54px 1fr; gap: 22px; padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.process li > span { color: var(--red); font-size: .68rem; font-weight: 700; }
.process h3 { margin-bottom: 8px; font-size: 2rem; font-weight: 600; text-transform: uppercase; }
.process p { margin: 0; color: var(--text); font-size: .9rem; }

.benefits { background: #dfe9e8; }
.benefits__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; }
.benefits__title { position: sticky; top: calc(var(--header) + 40px); align-self: start; }
.benefits__title h2 { font-size: clamp(3.4rem, 6vw, 6rem); }
.benefits__list { display: grid; grid-template-columns: 1fr 1fr; }
.benefits__list article { min-height: 275px; padding: 28px; border-top: 1px solid rgba(16,38,43,.25); border-left: 1px solid rgba(16,38,43,.25); }
.benefits__list article:nth-child(2n) { border-right: 1px solid rgba(16,38,43,.25); }
.benefits__list article:nth-last-child(-n+2) { border-bottom: 1px solid rgba(16,38,43,.25); }
.benefits__list span { color: var(--red); font-size: .68rem; font-weight: 700; }
.benefits__list h3 { margin: 72px 0 12px; font-size: 2rem; font-weight: 600; text-transform: uppercase; }
.benefits__list p { margin: 0; color: var(--text); font-size: .86rem; }

.projects { overflow: hidden; background: var(--white); }
.projects__top { display: flex; justify-content: space-between; align-items: end; margin-bottom: 64px; }
.project-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(520px, 72vw); gap: 18px; overflow-x: auto; padding: 0 max(32px, calc((100vw - var(--shell))/2)) 28px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--red) #e6e6e2; }
.project-rail figure { position: relative; min-height: 530px; margin: 0; overflow: hidden; scroll-snap-align: start; background: var(--petrol); }
.project-rail img { height: 100%; object-fit: cover; transition: transform .7s ease; }
.project-rail figure:hover img { transform: scale(1.04); }
.project-rail figure::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5,30,35,.92)); }
.project-rail figcaption { position: absolute; z-index: 2; inset: auto 30px 28px; display: grid; color: var(--white); }
.project-rail figcaption span, .project-rail figcaption small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-rail figcaption span { color: #ff9b9f; }
.project-rail figcaption strong { margin: 8px 0; font-family: var(--display); font-size: 2.2rem; line-height: 1; text-transform: uppercase; }

.contact { min-height: 720px; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--petrol); }
.contact__image { background: linear-gradient(rgba(5,30,35,.12),rgba(5,30,35,.12)), url("/cubiertas/wp-content/uploads/2021/03/Slide_3.jpg") center / cover no-repeat; }
.contact__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(60px, 8vw, 120px); color: var(--white); background: var(--red); }
.contact__panel .kicker { color: var(--white); }
.contact__panel h2 { margin-bottom: 30px; font-size: clamp(3.5rem, 6.5vw, 6.5rem); }
.contact__panel > p:not(.kicker) { max-width: 530px; }
.contact__actions { display: flex; align-items: center; gap: 30px; margin-top: 30px; }
.contact__phone { display: grid; }
.contact__phone small { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact__phone strong { font-size: .95rem; }

.footer { color: #c1d0d2; background: #071f24; }
.footer__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; padding-block: 76px; }
.footer__brand img { max-width: 210px; }
.footer__main > div { display: flex; flex-direction: column; align-items: flex-start; font-size: .78rem; }
.footer__main p { margin-bottom: 4px; }
.footer__main a { margin-bottom: 7px; }
.footer__main a:hover { color: var(--white); }
.footer__label { color: #718c90; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #718c90; font-size: .64rem; text-transform: uppercase; }

@media (max-width: 900px) {
  .hero__content { padding-bottom: 160px; }
  .hero h1 { font-size: clamp(4rem, 12vw, 7rem); }
  .intro, .system__layout, .benefits__grid { grid-template-columns: 1fr; }
  .intro__copy { max-width: 700px; }
  .intro__visual { min-height: 620px; }
  .intro__image { height: 620px; }
  .service-explorer { grid-template-columns: 1fr; }
  .service-stage { min-height: 480px; }
  .benefits__title { position: static; }
  .contact { grid-template-columns: .8fr 1.2fr; }
  .footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero { min-height: 760px; }
  .hero__media { background-position: 68% 56%; }
  .hero__shade { background: linear-gradient(90deg, rgba(5,30,35,.93), rgba(5,30,35,.52)), linear-gradient(0deg, rgba(5,30,35,.92), transparent 55%); }
  .hero__content { padding-top: 140px; padding-bottom: 210px; }
  .hero h1 { font-size: clamp(3.7rem, 18vw, 5.4rem); }
  .hero__lead { font-size: .95rem; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero__facts { position: absolute; inset: auto 18px 0; width: auto; }
  .hero__facts > div { display: block; min-height: 116px; padding: 20px 10px !important; }
  .hero__facts strong, .hero__facts span { display: block; }
  .hero__facts strong { margin-bottom: 12px; font-size: 2.5rem; }
  .hero__facts span { font-size: .56rem; }
  .surface-ticker > div { min-height: 58px; gap: 26px; font-size: 1rem; }
  .intro__visual { min-height: 520px; }
  .intro__image { height: 520px; margin-left: 9%; }
  .intro__stamp { width: 140px; height: 140px; }
  .intro__stamp strong { font-size: 3.8rem; }
  .services .section-heading { margin-bottom: 48px; }
  .service-tab { min-height: 94px; grid-template-columns: 34px 1fr auto; padding-right: 14px; }
  .service-tab strong { font-size: 1.7rem; }
  .service-stage { min-height: 520px; }
  .service-stage__content { inset: auto 22px 24px; grid-template-columns: 1fr; gap: 20px; }
  .system .section-heading { margin-bottom: 55px; }
  .system__media img { height: 220px; }
  .benefits__grid { gap: 40px; }
  .benefits__list { grid-template-columns: 1fr; }
  .benefits__list article { min-height: 220px; border-right: 1px solid rgba(16,38,43,.25); border-bottom: 0 !important; }
  .benefits__list article:last-child { border-bottom: 1px solid rgba(16,38,43,.25) !important; }
  .benefits__list h3 { margin-top: 48px; }
  .projects__top { align-items: flex-start; flex-direction: column; gap: 30px; }
  .project-rail { grid-auto-columns: 84vw; padding-left: 18px; padding-right: 18px; }
  .project-rail figure { min-height: 460px; }
  .contact { min-height: 0; grid-template-columns: 1fr; }
  .contact__image { min-height: 360px; }
  .contact__panel { padding: 80px 24px; }
  .contact__actions { align-items: flex-start; flex-direction: column; }
  .footer__main { grid-template-columns: 1fr; gap: 34px; }
  .footer__bottom { flex-direction: column; }
}