/* ui layer — SkyFilms refactor, 2026-09-04 */

/* NOTE ON CASCADE ORDER
   head.chunk.tpl loads this file BEFORE /assets/css/main.min.css, so anything
   that has to beat a legacy declaration needs a higher specificity, not just a
   later position. Hence the `.s-about.faq-visible-source` prefixes below:
   legacy `.s-about > * .text` is 0-2-0 and would otherwise win the tie. */


/* ==========================================================================
   FAQ accordion — block_text with css_class="faq-visible-source"
   Native <details>/<summary>: opens with mouse, Enter and Space with no JS.
   ========================================================================== */

.s-about.faq-visible-source .text {
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  color: #3f4b4d;
}

.faq {
  display: grid;
  gap: .5rem;
  width: 100%;
}

.faq__item {
  border: 1px solid #ddd7cb;
  border-radius: .25rem;
  background: #fff;
}

.faq__item[open] {
  border-color: #c7b793;
}

.faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: .95rem 1.15rem;
  list-style: none;
  cursor: pointer;
  color: #1e4850;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* Safari still paints the disclosure triangle without this. */
.faq__item > summary::-webkit-details-marker {
  display: none;
}

/* State icon: a chevron that points down when closed and up when open. */
.faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  margin-top: .3rem;
  border-right: 2px solid #958c78;
  border-bottom: 2px solid #958c78;
  transform: rotate(45deg);
  transition: transform .18s ease-out;
}

.faq__item[open] > summary::after {
  transform: rotate(-135deg);
}

@media (hover: hover) {
  .faq__item > summary:hover {
    color: #0f3239;
  }
  .faq__item > summary:hover::after {
    border-color: #1e4850;
  }
}

.faq__item > summary:focus-visible {
  outline: 3px solid #1e4850;
  outline-offset: 2px;
}

.faq__answer {
  padding: 0 1.15rem 1.1rem;
}

.faq__answer > p {
  margin: 0;
  color: #48545a;
  font-size: 1rem;
  line-height: 1.6;
}

.faq__answer a {
  color: #1e4850;
  text-decoration: underline;
  text-underline-offset: .14em;
}

/* Closing paragraph that is not a question/answer pair. */
.faq__note {
  margin: 1.5rem 0 0;
  color: #5b767b;
  font-size: 1rem;
  line-height: 1.6;
}

.faq + .faq__note {
  margin-top: 1.75rem;
}

@media (max-width: 30rem) {
  .faq__item > summary {
    padding: .85rem .9rem;
    font-size: 1rem;
  }
  .faq__answer {
    padding: 0 .9rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item > summary::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .faq__item,
  .faq__item[open] {
    border-color: CanvasText;
  }
  .faq__item > summary::after {
    border-color: CanvasText;
  }
}


/* "Cómo pedir presupuesto" (block_garanties, css_class="request-steps") needs
   no rules here: pricing.css owns the numbered-garanties presentation and
   styles .request-steps explicitly (2 columns desktop, 1 column mobile). */


/* ==========================================================================
   "Qué incluye la entrega" — block_text with css_class="delivery-scope"
   A definition-style list of what is handed over.
   ========================================================================== */

.s-about.delivery-scope .text {
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  color: #3f4b4d;
}

.delivery-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.delivery-list li {
  padding: .85rem 1.1rem;
  border-left: 3px solid #c7b793;
  background: #fff;
}

.delivery-list li b {
  display: block;
  margin-bottom: .2rem;
  color: #1e4850;
}

.s-about:not(.background):not(.background-dark) .delivery-list li {
  background: #f8f6f2;
}

@media (max-width: 30rem) {
  .delivery-list li {
    padding: .75rem .9rem;
  }
}


/* ==========================================================================
   Site-wide accessibility and brand-contrast layer — Codex #10
   This file loads before the legacy bundle, so critical overrides deliberately
   use the `html body` prefix. All interactive CSS stays outside Fenom chunks.
   ========================================================================== */

:root {
  --a11y-brand-teal: #1e4850;
  --a11y-brand-teal-mid: #5b767b;
  --a11y-brand-gold-dark: #6f6244;
  --a11y-focus-light: #ffffff;
  --a11y-footer-muted: #b0b0b0;
}

/* One keyboard-focus language for every native or explicitly tabbable control. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body textarea:focus-visible,
html body select:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible {
  outline: 3px solid var(--a11y-brand-teal) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

html body .header a:focus-visible,
html body .header button:focus-visible,
html body .footer a:focus-visible,
html body .footer button:focus-visible,
html body .background-dark a:focus-visible,
html body .background-dark button:focus-visible,
html body .background-dark input:focus-visible,
html body .background-dark textarea:focus-visible,
html body .background-dark select:focus-visible,
html body .background-dark summary:focus-visible,
html body .background-dark [tabindex]:focus-visible,
html body .s-contacts .item a:focus-visible,
html body .s-contacts .item button:focus-visible {
  outline-color: var(--a11y-focus-light) !important;
  box-shadow: 0 0 0 2px var(--a11y-brand-teal) !important;
}

html body a:focus:not(:focus-visible),
html body button:focus:not(:focus-visible),
html body input:focus:not(:focus-visible),
html body textarea:focus:not(:focus-visible),
html body select:focus:not(:focus-visible),
html body summary:focus:not(:focus-visible),
html body [tabindex]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Header navigation: native buttons retain the legacy dimensions and visuals. */
html body .header .logo img {
  display: block;
  width: auto;
  height: 48px;
}

html body .header nav .has-drop {
  display: flex;
  align-items: center;
  position: relative;
}

html body .header nav > ul {
  display: flex;
  align-items: center;
}

html body .header nav > ul > li {
  display: flex;
  align-items: center;
  height: 48px;
  min-height: 48px;
}

html body .header nav ul.drop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .header nav > ul > li > a,
html body .header nav > ul > li > .drop-parent {
  display: inline-flex;
  align-items: center;
  height: 48px;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 0;
  line-height: 1.5;
}

html body .header nav > ul > li > .drop-parent {
  appearance: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  user-select: none;
}

html body .header nav .has-drop > .drop-parent::after {
  content: "\25BE";
  display: inline-block;
  flex: 0 0 auto;
  margin-left: .35rem;
  font-size: .7em;
  line-height: 1;
  transition: transform .2s ease-out;
}

html body .header nav ul.drop > li {
  display: block;
  width: 100%;
  min-height: 42px;
}

html body .header nav ul.drop > li > a {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  padding: .55rem 1.25rem;
  border: 0;
  text-align: left;
}

html body .header nav .has-drop.open > .drop-parent::after,
html body .header nav .has-drop:focus-within > .drop-parent::after {
  transform: rotate(180deg);
}

html body .header nav > ul > li > a:hover,
html body .header nav > ul > li > a:focus-visible,
html body .header nav .drop-parent:hover,
html body .header nav .drop-parent:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

html body .header .toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
}

@media (max-width: 73.6875rem) {
  html body .header > * nav > ul {
    flex-direction: column;
    align-items: stretch;
  }

  html body .header > * nav > ul > li {
    width: 100%;
    height: auto;
    min-height: 48px;
    flex-direction: column;
    align-items: stretch;
  }

  html body .header > * nav > ul > li > a,
  html body .header > * nav > ul > li > .drop-parent {
    width: 100%;
    justify-content: center;
  }

  html body .header > * nav .has-drop {
    width: 100%;
  }

  html body .header > * nav .drop-parent {
    width: 100%;
    text-align: center;
  }

  html body .header > * nav .drop {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-out;
  }

  html body .header > * nav .has-drop.open .drop {
    max-height: 44rem;
  }

  html body .header > * nav .drop li a {
    padding-left: 2.5rem;
    font-size: .9375rem;
  }

  /* Closed mobile navigation must not leak invisible links into the Tab order. */
  html body .header .menu:not(.open) a,
  html body .header .menu:not(.open) button,
  html body .header .has-drop:not(.open) > .drop a {
    visibility: hidden;
  }

  html body .header .menu.open > ul > li > a,
  html body .header .menu.open > ul > li > button,
  html body .header .has-drop.open > .drop a {
    visibility: visible;
  }
}

@media (min-width: 73.75rem) {
  html body .header > * nav > ul {
    flex-direction: row;
  }

  html body .header > * nav .drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    width: max-content;
    min-width: 15.5rem;
    padding: .5rem 0;
    border-radius: 0 0 .5rem .5rem;
    background: var(--a11y-brand-teal);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.4rem);
    transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s .2s;
    text-align: left;
  }

  html body .header > * nav .has-drop:hover .drop,
  html body .header > * nav .has-drop:focus-within .drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease-out, transform .2s ease-out;
  }

  html body .header > * nav .drop li {
    display: block;
    opacity: 1;
  }

  html body .header > * nav .drop li a {
    display: block;
    padding: .55rem 1.25rem;
    border-top: 0;
    color: #fff;
    font-size: .9375rem;
    white-space: nowrap;
  }

  html body .header > * nav .drop li a:hover,
  html body .header > * nav .drop li a:focus-visible {
    border-top: 0;
    color: #fff;
    background: rgba(255, 255, 255, .14);
  }
}

/* Wave 7-I service pictograms share one optical box and inherit the same
   foreground colour as their adjacent card headings. */
html body section.s-prices svg.service-icon,
html body section.s-garanties svg.service-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  flex: 0 0 40px;
  color: #5b767b;
}
html body section.s-prices svg.service-icon {
  display: block;
}
html body section.s-garanties.background-dark svg.service-icon {
  color: #fff;
}

/* Brand contrast: darker existing gold on light surfaces, white on teal. */
html body .s-banner > * .content .title,
html body .breadcrumbs ul li > span,
html body .breadcrumbs ul li > span:hover,
html body .s-feedback:not(.background-dark) > * .content .title {
  color: var(--a11y-brand-gold-dark);
}

html body section.background-dark > .container > .top > .title,
html body .s-prices.background-dark > .container > .top > .title,
html body .s-prices.background-dark > .container > .title,
html body .s-feedback.background-dark > * .content .title {
  color: #fff;
}

html body .s-about.background-dark .text,
html body .s-about.background-dark .text p,
html body .s-about.background-dark .text li,
html body .s-prices.background-dark > .container > .top > .descr {
  color: #fff;
}

html body .s-info.background-dark > .container > .title,
html body .s-info.background-dark > .container > .descr,
html body .s-info.background-dark > .container > .notation,
html body .s-garanties.background-dark .guarantee-item .title,
html body .s-garanties.background-dark .guarantee-item .descr {
  color: #fff;
}

html body .s-garanties.background-dark > .container > .top > .descr,
html body .s-garanties.background-dark .guarantee-item > .title,
html body .s-garanties.background-dark .guarantee-item > .descr,
html body .s-garanties.background-dark .guarantee-item__body > .title,
html body .s-garanties.background-dark .guarantee-item__body > .descr {
  color: #fff !important;
}

html body .s-banner > .container > .content > .notation {
  color: var(--a11y-brand-teal-mid);
}

html body .s-service-area .zone-list span[aria-hidden="true"] {
  color: var(--a11y-brand-gold-dark);
}

html body .btn.btn--main,
html body button.btn.btn--main,
html body a.btn.btn--main {
  border-color: var(--a11y-brand-gold-dark);
  background-color: var(--a11y-brand-gold-dark);
  color: #fff;
}

html body .btn.btn--main:hover,
html body button.btn.btn--main:hover,
html body a.btn.btn--main:hover {
  border-color: var(--a11y-brand-gold-dark);
  background-color: transparent;
  color: var(--a11y-brand-gold-dark);
}

html body .btn.btn--border,
html body button.btn.btn--border,
html body a.btn.btn--border,
html body .s-price .price {
  border-color: var(--a11y-brand-gold-dark);
  color: var(--a11y-brand-gold-dark);
}

html body .s-prices > .container .wrapper .card .content .button {
  border-color: var(--a11y-brand-gold-dark) !important;
  color: var(--a11y-brand-gold-dark) !important;
}

html body .btn.btn--border:hover,
html body button.btn.btn--border:hover,
html body a.btn.btn--border:hover,
html body .s-prices > .container .wrapper .card .content .button:hover {
  border-color: var(--a11y-brand-gold-dark);
  background-color: var(--a11y-brand-gold-dark);
  color: #fff !important;
}

html body .background-dark .btn.btn--main:hover,
html body .background-dark .btn.btn--border,
html body .s-contacts .item .btn.btn--border {
  border-color: #fff;
  color: #fff;
}

html body .background-dark .btn.btn--border:hover,
html body .s-contacts .item .btn.btn--border:hover {
  border-color: #fff;
  background-color: #fff;
  color: var(--a11y-brand-teal);
}

html body footer .copyright {
  color: var(--a11y-footer-muted);
}

/* Replace Bootstrap blue only for textual content links. */
html body main p a,
html body main .text a,
html body main .faq a,
html body main .consent-label a,
html body main .breadcrumbs a,
html body main li > a:not(.btn):not(.button):not(.blog-card):not(.article-related-card) {
  color: var(--a11y-brand-teal);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

html body main .s-service-area a.route-link {
  color: var(--a11y-brand-teal);
}

html body .background-dark .consent-label,
html body .background-dark .consent-label span,
html body .background-dark .consent-label a {
  color: #fff;
}

html body form .consent-label a {
  color: var(--a11y-brand-teal);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

html body .background-dark form .consent-label a {
  color: #fff;
}

/* Persistent form labels and a 44px minimum consent hit area. */
html body form .field-label {
  display: block;
  margin: 0;
  color: #383838;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

html body .background-dark form .field-label {
  color: #fff;
}

html body .s-feedback form .form-field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: .375rem;
  width: 100%;
  min-width: 0;
}

html body .s-feedback form .form-field input,
html body .s-feedback form .form-field textarea {
  width: 100%;
}

html body .modal form .input-group {
  flex-direction: column;
  align-items: stretch;
  gap: .375rem;
}

html body .modal form .input-group .icon {
  top: 2.35rem;
}

html body form .input-group.consent {
  width: 100%;
}

html body form .consent-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 44px;
  padding: .375rem 0;
  cursor: pointer;
  color: #383838;
}

html body form .consent-label input[type="checkbox"],
html body .modal form .consent-label input[type="checkbox"] {
  appearance: auto;
  flex: 0 0 24px;
  width: 24px !important;
  height: 24px !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: .25rem;
  opacity: 1;
  accent-color: var(--a11y-brand-teal);
}

html body form .consent-label input[type="checkbox"]::after,
html body .modal form .consent-label input[type="checkbox"]::after {
  content: none;
}

@media (min-width: 48rem) {
  html body .modal form .input-group .icon {
    top: 2.6rem;
  }
}

@media (max-width: 30rem) {
  html body .modal form .inputs {
    flex-direction: column;
  }
}

/* Preserve the source artwork's intrinsic ratio inside the 40px icon box. */
html body img[src$="/player.svg"],
html body img[src$="/rotate-360.svg"] {
  object-fit: contain !important;
}

/* Footer layout moved here from the Fenom chunk. */
html body .footer .f-links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 2rem 4.5rem;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

html body .footer .f-col {
  min-width: 180px;
}

html body .footer .f-h {
  margin-bottom: .875rem;
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .03em;
  opacity: .95;
}

html body .footer .f-col ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .footer .f-col li {
  display: block;
  margin: 0;
}

html body .footer .f-col a,
html body .footer .f-col span {
  display: inline-block;
  color: var(--a11y-footer-muted);
  font-size: .8125rem;
  line-height: 2.1;
  text-decoration: none;
  transition: color .2s ease-out;
}

html body .footer .f-col a:hover,
html body .footer .f-col a:focus-visible {
  color: #fff;
}

@media (max-width: 47.9375rem) {
  html body .footer .f-links {
    justify-content: flex-start;
    gap: 1.5rem 2.25rem;
  }

  html body .footer .f-col {
    min-width: 44%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .header nav .drop,
  html body .header nav .drop-parent::after,
  html body .footer .f-col a {
    transition: none;
  }
}

@media (forced-colors: active) {
  html body a:focus-visible,
  html body button:focus-visible,
  html body input:focus-visible,
  html body textarea:focus-visible,
  html body select:focus-visible,
  html body summary:focus-visible,
  html body [tabindex]:focus-visible {
    outline-color: Highlight !important;
    box-shadow: none !important;
  }
}

/* The blog cards are one link wrapping image, label, headline and excerpt, so the
   content-link underline landed on every word. Underline the headline only. */
html body main a.blog-card,
html body main .text a.blog-card,
html body main a.blog-card:hover,
html body main a.blog-card:focus-visible,
html body main a.article-related-card,
html body main .blog-article .text a.article-related-card,
html body main .s-about.blog-article .text a.article-related-card {
    text-decoration: none;
}
a.blog-card .blog-card__title,
a.blog-card:hover .blog-card__title {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* The form had no way to show a rejection: the library's message channels were stubbed
   out and no error node existed in the markup. */
.af-error-summary {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-left: 3px solid #a4402f;
    background: #fbf1ef;
    color: #7a2e21;
    font-size: .9375rem;
    line-height: 1.45;
    border-radius: .25rem;
}
.ajax_form .is-invalid {
    border-color: #a4402f;
    box-shadow: 0 0 0 2px rgba(164, 64, 47, .18);
}

/* --- carousel controls and tap targets (critic pass, 2026-09-04) --- */

/* The reviews carousel had no visible affordance at all: 9 of 12 slides were
   unreachable because the elements its config points at were never in the markup. */
.s-reviews .swiper-container.reviews { position: relative; padding-bottom: 2.75rem; }
.s-reviews .swiper-pagination { bottom: .5rem; }
.s-reviews .swiper-button-prev,
.s-reviews .swiper-button-next {
    width: 2.75rem; height: 2.75rem;
    border: 1px solid #ddd8cd; border-radius: 50%;
    background: #fff center/.6rem no-repeat;
    top: 50%; transform: translateY(-50%);
    cursor: pointer;
}
.s-reviews .swiper-button-prev::after,
.s-reviews .swiper-button-next::after { font-size: 1rem; color: #1e4850; }
.s-reviews .swiper-button-prev { left: -.25rem; }
.s-reviews .swiper-button-next { right: -.25rem; }

/* 6x6 bullets were below any usable tap size; keep the dot, grow the target */
.swiper-pagination-bullet {
    position: relative;
    margin: 0 .3125rem;
}
.swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    inset: -.5625rem;          /* 6px dot + 2x9px = 24px target */
}

/* Map pins render at 13.9px on mobile and sit as close as 8px apart */
.s-service-area svg a,
.s-service-area svg .marker { cursor: pointer; }
.s-service-area svg circle.pin-hit { fill: transparent; }

/* The brand teal sat at 4.38-4.46 on the two cream grounds, just under 4.5 */
:root { --a11y-brand-teal-soft: #526b70; }
html body main .title.lines,
html body main figcaption,
html body main .blog-card__category { color: var(--a11y-brand-teal-soft); }

/* Lead paragraphs ran at line-height 1.2 and lines reached 182 characters */
html body main .descr { line-height: 1.45; }
html body main p, html body main li { max-width: 72ch; }
html body main .descr, html body main .text p { max-width: 72ch; }





/* The contact cards paint a dark teal panel, and one link there kept the browser
   default blue (2.52 against a 4.5 floor). Only that panel is recoloured. */
html body main .s-contacts .descr a,
html body main .contacts .item .descr a {
    color: #e8dcc0;
    text-decoration: underline;
    text-underline-offset: .16em;
}
html body .footer .socials a { color: #d8d8d8; }