/* Home composition only. Global palette, typography, controls and shared
   component semantics remain owned by site-global-system.css and udc-components.css. */

.home-hero {
    position: relative;
    padding: 0;
}
.page-home .home-hero > .container,
.page-home .home-services > .container,
.page-home .home-areas > .container,
.page-home .home-about > .container,
.page-home .home-applied > .container,
.page-home .home-articles > .container {
    width: min(100% - 72px, 1390px);
    max-width: none;
}
.home-hero-shell {
    position: relative;
    display: block;
    min-height: 350px;
    overflow: hidden;
    background: var(--udc-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.home-hero-copy {
    position: relative;
    z-index: 2;
    width: min(660px, 52%);
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--udc-section-space) 0 var(--udc-section-space) 48px;
}
.home-hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -150px 0 0;
    background: linear-gradient(90deg, rgba(18,18,18,.94) 0%, rgba(18,18,18,.82) 60%, rgba(18,18,18,0) 100%);
}
.home-hero-copy h1 {
    margin: 0;
    max-width: 620px;
    color: var(--udc-text);
    line-height: 1.05;
    letter-spacing: -.035em;
}
.home-hero-copy .eyebrow { margin-bottom: 10px; }
.home-hero-lead {
    max-width: 600px;
    margin: 14px 0 0;
    color: var(--udc-text);
    line-height: 1.45;
}
.home-hero .hero-actions { margin-top: 18px; }
/* No z-index here: the slider must not create a stacking context, so its controls (z-index 3) sit above the copy (z-index 2). */
.home-media-slider { position: absolute; inset: 0; background: var(--udc-surface); overflow: hidden; }
.home-media-track { position: relative; width: 100%; height: 100%; min-height: 350px; }
.home-media-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s ease; }
.home-media-slide.is-active { opacity: 1; visibility: visible; }
.home-media-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* Dots, arrows and pause form one control bar at the bottom right, clear of the hero copy, in DOM = visual order. */
.home-slider-arrow {
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--udc-line); border-radius: 50%;
    background: rgba(48,48,48,.94); color: var(--udc-text); cursor: pointer; font-size: 1.8rem; line-height: 1;
}
.home-slider-arrow:hover,.home-slider-arrow:focus-visible { background: var(--udc-elevated); border-color: var(--udc-orange); }
.home-slider-footer { position: absolute; z-index: 3; right: 18px; bottom: 12px; display: flex; align-items: center; gap: 8px; }
.home-slider-dots { display: flex; gap: 2px; margin-right: 4px; padding: 0 4px; border-radius: 999px; background: rgba(18,18,18,.62); }
.home-slider-dots button { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.home-slider-dots button::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--udc-text); box-shadow: 0 0 0 1px rgba(18,18,18,.6); }
.home-slider-dots button.is-active::before { background: var(--udc-orange); transform: scale(1.15); }
.home-slider-dots button:hover::before { transform: scale(1.15); }
.home-slider-dots button:focus-visible { outline-color: var(--udc-text); outline-offset: 0; }
.home-slider-pause { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--udc-line); border-radius: 50%; background: rgba(48,48,48,.94); color: var(--udc-text); cursor: pointer; }
.home-slider-pause:hover,.home-slider-pause:focus-visible { background: var(--udc-elevated); border-color: var(--udc-orange); }
.home-slider-pause .play-icon { display: none; }
.home-slider-pause[aria-pressed="true"] .pause-icon { display: none; }
.home-slider-pause[aria-pressed="true"] .play-icon { display: inline; }

.page-home .section-heading { margin-bottom: var(--udc-space-5); }

.page-home .home-services { --udc-band-space: var(--udc-section-compact-space); }
.home-services .section-heading,
.home-areas .section-heading { max-width: none; margin-bottom: 12px; }
.home-services .section-heading h2,
.home-areas .section-heading h2 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
.home-section-summary { margin: 3px 0 0; color: var(--udc-muted); font-size: .86rem; font-weight: 400; line-height: 1.15; letter-spacing: 0; }
.home-services .card-grid { gap: var(--udc-block-gap); }
.home-services .service-card {
    min-height: 132px;
    display: grid;
    grid-template-columns: 76px 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: var(--udc-card);
    border-color: var(--udc-line);
    border-radius: var(--udc-radius-sm);
}
.home-services .service-card::before { display: none; }
.home-services .service-icon { grid-row: 1 / 3; width: 64px; height: 58px; display: block; margin: 0; object-fit: contain; }
.home-services .service-card h3 { grid-column: 2; margin: 0 0 2px; }
.home-services .service-card p { grid-column: 2; margin: 0; line-height: 1.4; }
.home-services .service-card > a { position: relative; grid-column: 3; grid-row: 1 / 3; width: 34px; min-height: 44px; display: grid; place-items: center; border-radius: var(--udc-radius-sm); white-space: nowrap; color: transparent; font-size: 0; text-decoration: none; }
.home-services .service-card > a::before { content: ""; position: absolute; inset: 0 -5px; } /* 44px target without narrowing the text column */
.home-services .service-card > a::after { content: "→"; color: var(--udc-text); font-size: 1.55rem; font-weight: 400; }

.page-home .home-areas { --udc-band-space: var(--udc-section-compact-space); }
.home-area-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.home-area-card {
    overflow: hidden; display: block; text-align: left; text-decoration: none; background: var(--udc-card);
    border: 1px solid var(--udc-line); border-radius: var(--udc-radius-sm); transition: background-color .2s ease, border-color .2s ease;
}
.home-area-card .home-area-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-area-card .home-area-band { min-height: 68px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 10px; }
.home-area-card .home-area-icon { width: 28px; height: 28px; object-fit: contain; }
.home-area-card .home-area-label { color: var(--udc-text); font-size: .78rem; font-weight: 700; line-height: 1.18; }
.home-area-card .home-area-arrow { justify-self: end; color: var(--udc-orange); font-size: 1.15rem; font-weight: 400; line-height: 1; }

.page-home .home-about { --udc-band-space: var(--udc-section-compact-space); }
.home-about-grid { display: grid; grid-template-columns: 1.05fr .72fr .78fr; gap: 28px; align-items: center; }
.home-about h2 { margin: 0 0 4px; }
.home-about .section-copy { margin: 0; font-size: var(--udc-font-body); line-height: 1.5; text-wrap: pretty; }
.home-about .text-link { display: inline-block; margin-top: 10px; font-size: var(--udc-font-body); }
.home-about-media { margin: 0; align-self: stretch; min-height: 180px; overflow: hidden; border: 1px solid var(--udc-line); }
.home-about-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-about-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-about-facts li { padding: 0 0 10px 42px; border-bottom: 1px solid var(--udc-line); background: linear-gradient(90deg, var(--udc-orange) 0 3px, transparent 3px) no-repeat 16px 0 / 3px 100%; }
.home-about-facts li:last-child { padding-bottom: 0; border-bottom: 0; }
.home-about-facts strong,.home-about-facts span { display: block; }
.home-about-facts strong { color: var(--udc-text); font-size: 1.125rem; line-height: 1.3; }
.home-about-facts span { margin-top: 2px; color: var(--udc-muted); font-size: var(--udc-font-body); line-height: 1.45; text-wrap: pretty; }

.page-home .home-applied { --udc-band-space: var(--udc-section-compact-space); }
.home-applied .section-heading { max-width: none; margin-bottom: 10px; }
.home-applied .section-heading h2 { margin: 0; line-height: 1.15; }
.home-applied .home-section-summary { margin-top: 6px; font-size: var(--udc-font-body); line-height: 1.45; }
.applied-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; }
.applied-grid article { min-height: 126px; padding: 8px 18px; border-right: 1px solid var(--udc-line); }
.applied-grid article:first-child { padding-left: 0; }
.applied-grid article:last-child { border-right: 0; padding-right: 0; }
.applied-icon { display: block; width: 38px; height: 38px; margin-bottom: 8px; object-fit: contain; }
.applied-grid h3 { margin: 0 0 5px; color: var(--udc-text); line-height: 1.2; }
.applied-grid p { margin: 0; color: var(--udc-muted); font-size: var(--udc-font-body); line-height: 1.45; text-wrap: pretty; }

.page-home .home-clients {
    --udc-band-space: var(--udc-section-compact-space);
}
.page-home .home-clients > .container {
    width: min(100% - 72px, 1390px);
    max-width: none;
}
.home-clients .section-heading { max-width: none; margin-bottom: 12px; }
.home-clients .section-heading h2 { margin: 0; line-height: 1.15; }
.home-client-grid {
    --visible-columns: 4;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(70px, auto));
    grid-auto-columns: calc((100% - (var(--visible-columns) - 1) * 10px) / var(--visible-columns));
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--udc-muted) var(--udc-section-bg, var(--udc-canvas));
}
.home-client-grid span {
    min-width: 0;
    min-height: 70px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    color: var(--udc-text);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.3;
    background: var(--udc-card);
    border: 1px solid var(--udc-line);
    border-radius: var(--udc-radius-sm);
    scroll-snap-align: start;
}
.home-client-grid:focus-visible { outline: 2px solid var(--udc-orange); outline-offset: 3px; }
.home-client-controls { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.home-client-controls button { width: 44px; height: 44px; font-size: 1.25rem; line-height: 1; border: 1px solid var(--udc-line); border-radius: var(--udc-radius-sm); background: var(--udc-card); color: var(--udc-text); cursor: pointer; }
.home-client-controls button:disabled { opacity: .45; cursor: default; }
.home-client-controls button:focus-visible { outline: 2px solid var(--udc-orange); outline-offset: 2px; }
.home-client-controls [data-client-position] { font-size: .86rem; color: var(--udc-muted); }

.page-home .home-articles { --udc-band-space: var(--udc-section-compact-space); }
.home-section-row { display: flex; justify-content: space-between; gap: var(--udc-space-5); align-items: end; margin-bottom: 10px; }
.home-section-row .section-heading { max-width: none; margin-bottom: 0; }
.home-articles .section-heading h2 { margin: 0; line-height: 1.15; }
.home-articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--udc-block-gap); }
.home-article-card { overflow: hidden; background: var(--udc-card); border: 1px solid var(--udc-line); border-radius: var(--udc-radius-sm); }
/* The rotating featured article (#484) carries the accent rule of ordered cards (#295, P24),
   drawn over the image so the three cards keep the same height. */
.home-article-card.is-featured { position: relative; }
.home-article-card.is-featured::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--udc-orange); z-index: 1; }
.home-article-media { display: block; aspect-ratio: 2.35/1; overflow: hidden; background: var(--udc-surface); }
.home-article-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-article-body { padding: 12px 14px; }
.home-article-body h3 { margin: 0 0 8px; line-height: 1.25; }
.home-article-body h3 a { text-decoration: none; }
.home-article-body h3 a:hover,.home-article-body h3 a:focus-visible { color: var(--udc-orange-hover); }
.article-kicker { margin: 0 0 5px; color: var(--udc-orange-hover); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.article-meta { margin: 0 0 7px; color: var(--udc-muted); font-size: .7rem; }
.home-article-body .text-link { font-size: .76rem; }

/* Home opts into the shared band alternation (main.udc-bands, decision of 3 Oct 2026): sections alternate
   canvas/surface without dividers, interior bands use the same vertical space as the other banded pages,
   and the final CTA keeps its photo. Reverting the PR that introduced this restores the divided layout. */
.page-home main#contenido.udc-bands > section:not(.home-hero):not(.home-cta) { --udc-band-space: var(--udc-section-space); }
.page-home main#contenido.udc-bands > section.home-cta,
.page-home .home-cta { --udc-band-space: 0px; --udc-section-bg: linear-gradient(90deg, rgba(9,20,27,.88), rgba(9,20,27,.48)), url("/assets/img/home-contact-cta.webp") center 50% / cover no-repeat; position: relative; overflow: hidden; padding: 0; }
.home-cta .container { width: min(100% - 72px, 1390px); max-width: none; }
.home-cta .udc-cta { min-height: 160px; padding: var(--udc-section-compact-space) 34px; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--udc-text); }
.home-cta .udc-cta h2,.home-cta .udc-cta p { color: var(--udc-text); }
.home-cta .udc-cta h2 { margin: 0 0 3px; }
.home-cta .udc-cta p { margin: 0; font-size: .9rem; }
/* Cierre de Inicio: los dos botones juntos y la línea de WhatsApp debajo. */
@media (min-width: 621px) {
    .home-cta .udc-cta { display: grid; column-gap: 16px; row-gap: 12px; align-items: center; }
    .home-cta .udc-cta > div:first-child { grid-area: copy; }
    .home-cta .udc-cta > .button { grid-area: contact; }
    .home-cta .udc-whatsapp-contact { display: contents; }
    .home-cta .udc-whatsapp-button { grid-area: wa; }
    .home-cta .udc-whatsapp-notice { grid-area: notice; margin: 0; font-size: .78rem; }
}
/* Tableta: texto arriba, botones en fila y la línea debajo. */
@media (min-width: 621px) and (max-width: 1099px) {
    .home-cta .udc-cta { grid-template-columns: max-content max-content minmax(0, 1fr); grid-template-areas: "copy copy copy" "contact wa ." "notice notice notice"; justify-items: start; }
}
/* Escritorio: texto a la izquierda; botones y línea a la derecha, sin partir la línea. */
@media (min-width: 1100px) {
    .home-cta .udc-cta { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "copy contact wa" "copy notice notice"; }
    .home-cta .udc-whatsapp-notice { justify-self: end; white-space: nowrap; }
}
@media (max-width: 1100px) {
    .home-area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .applied-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .applied-grid article { padding: 12px 18px; border-bottom: 1px solid var(--udc-line); }
    .applied-grid article:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--udc-line); }
    .applied-grid article:nth-child(even) { padding-right: 0; border-right: 0; }
    .applied-grid article:last-child { border-right: 0; }
}
@media (max-width: 980px) {
    .page-home .home-hero > .container,
    .page-home .home-services > .container,
    .page-home .home-areas > .container,
    .page-home .home-about > .container,
    .page-home .home-applied > .container,
    .page-home .home-clients > .container,
    .page-home .home-articles > .container { width: min(100% - 40px, 1390px); }
    .home-hero-copy { width: 68%; }
    .home-services .service-card { grid-template-columns: 58px 1fr auto; padding: 16px; }
    .home-services .service-icon { width: 50px; height: 48px; }
    .home-media-track { min-height: 350px; }
    .home-about-grid { grid-template-columns: 1fr 1fr; gap: var(--udc-space-4); }
    .home-about-facts { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .home-about-facts li { padding-bottom: 0; border-bottom: 0; }
    .home-client-grid { --visible-columns: 2; }
    .home-articles-grid { grid-template-columns: repeat(2, 1fr); }
    .home-cta .container { width: min(100% - 40px, 1390px); }
    .home-cta .udc-cta { min-height: 156px; padding: var(--udc-section-compact-space) 28px; }
}
@media (max-width: 640px) {
    .page-home .home-hero > .container,
    .page-home .home-services > .container,
    .page-home .home-areas > .container,
    .page-home .home-about > .container,
    .page-home .home-applied > .container,
    .page-home .home-articles > .container { width: calc(100% - 28px); }
    .home-hero-shell { min-height: 576px; }
    .home-hero-copy { width: 100%; min-height: 576px; justify-content: flex-end; padding: var(--udc-section-space) 24px calc(var(--udc-section-space) + 56px); } /* 56px = control bar; the hero grows by the same amount so the copy keeps its position over the photo. */
    .home-hero-copy::before { inset: 0; background: linear-gradient(0deg, rgba(18,18,18,.96) 0%, rgba(18,18,18,.76) 58%, rgba(18,18,18,.16) 100%); }
    .home-media-track { min-height: 576px; }
    .home-slider-footer { right: 24px; }
    .page-home .home-services { --udc-band-space: var(--udc-section-compact-space); }
    .home-services .card-grid { grid-template-columns: 1fr; }
    .home-services .service-card { min-height: 116px; }
    .page-home .home-areas { --udc-band-space: var(--udc-section-compact-space); }
    .home-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-area-card { min-height: 160px; }
    .home-about-grid { grid-template-columns: 1fr; }
    .home-about-facts { grid-column: auto; grid-template-columns: 1fr; }
    .home-about-media { height: 190px; }
    .applied-grid { grid-template-columns: 1fr; }
    .applied-grid article,.applied-grid article:first-child,.applied-grid article:last-child,
    .applied-grid article:nth-child(odd),.applied-grid article:nth-child(even) { min-height: 0; padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--udc-line); }
    .page-home .home-clients > .container { width: calc(100% - 28px); }
    .home-client-grid { --visible-columns: 1; }
    .home-articles-grid { grid-template-columns: 1fr; }
    .home-cta .container { width: calc(100% - 28px); }
    .home-section-row { display: block; }
    .home-section-row > .text-link { display: inline-block; margin-top: var(--udc-space-3); }
}
@media (max-width: 620px) {
    .home-cta .udc-cta { min-height: 0; gap: 20px; padding: var(--udc-section-compact-space) 24px; }
    .home-cta .udc-cta h2 { line-height: 1.15; }
    .home-cta .udc-cta p { font-size: .86rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
    .home-media-slide { transition: none; }
    .home-area-card { transition: none; }
}