@import url("acabados.css");
@import url('espirales-fondo.css?v=cierres-dobles-20261102');

:root {
  --caida-tinta: linear-gradient(to bottom, transparent, #000 7%, #000 45%,
    rgb(0 0 0 / .89) 58%, rgb(0 0 0 / .48) 76%, rgb(0 0 0 / .10) 92%, transparent);
  --beos-impresion-hero: radial-gradient(ellipse clamp(380px, 32vw, 740px) 40% at calc(100% - max(5vw, (100% - 1600px) / 2 + 76px) - 190px) 31%, rgba(251,253,253,.73) 0%, rgba(251,253,253,.69) 48%, transparent 100%),
    radial-gradient(ellipse 36% 58% at 76% 36%, rgba(251,253,253,.78) 0%, rgba(251,253,253,.65) 35%, rgba(251,253,253,.18) 78%, transparent 100%),
    linear-gradient(90deg, rgba(250,253,253,.24), transparent 87%),
    url("assets/hero-tinta.webp") 50% 50% / cover no-repeat;
}
/* El contenido conserva el ancho y la composición de la home oficial. */
#home #root .variant-main {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
#home #root .variant-main::before {
  /* Una misma impresión desde el hero hasta el pie del carrusel. */
  --cola-clientes: 160px;
  position: absolute;
  content: "";
  inset: 0 calc((100% - 100vw) / 2) calc(-1 * var(--cola-clientes));
  pointer-events: none;
  z-index: -1;
  transform: scaleX(-1);
  /* Al reflejar la plancha, el velo de lectura cae sobre la columna de texto. */
  background: var(--beos-impresion-hero);
  /* El pigmento naranja está en el borde derecho de la plancha, el izquierdo al reflejarla. */
  background-position: 0 0, 0 0, 0 0, right center;
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 6%, #000 46%,
    rgba(0,0,0,.96) 53%, rgba(0,0,0,.80) 62%,
    rgba(0,0,0,.56) 72%, rgba(0,0,0,.32) 82%,
    rgba(0,0,0,.13) 90%, rgba(0,0,0,.037) 96%, transparent 100%);
}
#home #clientes {
  /* El papel blanco incrustado en algunos logos se integra con la tinta. */
  mix-blend-mode: multiply;
}
@media (max-width: 760px) {
  #home #root .variant-main::before { background-position: 0 0, 0 0, right center; }
  :root {
    --beos-impresion-hero: radial-gradient(ellipse 98% 30% at 68% 47%, rgba(251,253,253,.89), rgba(251,253,253,.76) 65%, transparent 100%),
      linear-gradient(90deg, rgba(250,253,253,.62), rgba(250,253,253,.29) 56%, rgba(250,253,253,.06)),
      url("assets/hero-tinta.webp") 79% center / cover no-repeat;
  }
}
@media (max-width: 600px) {
  #home #root .variant-main::before { --cola-clientes: 130px; }
}

/* La tinta sigue la altura y la anchura del hero real de cada plantilla. */
:root body[data-sky="soft"] :is(.solution-hero, .page-equipo main > .hero, .cases-hero,
  .contact-layout, .blog-opening, .article-hero, .author-hero, .topic-hero) {
  position: relative;
  isolation: isolate;
}
:root body[data-sky="soft"] :is(.solution-hero, .page-equipo main > .hero, .cases-hero,
  .contact-layout, .blog-opening, .article-hero, .author-hero, .topic-hero)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 auto 0 calc((100% - 100vw) / 2);
  width: 100vw;
  transform: scaleX(-1);
  background: var(--beos-impresion-hero);
  opacity: var(--beos-carga-hero, .94);
  mask-image: var(--mascara-tinta, var(--caida-tinta));
  mask-composite: intersect;
}
:root body[data-sky="soft"] :is(.blog-opening, .article-hero, .author-hero, .topic-hero) {
  --beos-carga-hero: .81;
}
/* Se conserva la impresión en toda la cabecera. El papel claro está ligado
   a la caja de la portada y la acompaña al cambiar de columna o de fila. */
:root body[data-sky="soft"] :is(.article-hero--illustrated, .blog-opening:has(.blog-featured)) {
  --beos-carga-hero: .94;
}
:root body[data-sky="soft"] :is(.article-hero-art, .blog-featured .blog-preview-card-image) {
  mix-blend-mode: normal;
  background-color: rgb(255 255 255 / 94%);
}
/* En Contacto hay una sola sección. La tinta se acaba en la introducción. */
:root body[data-sky="soft"].page-contacto .contact-layout::after {
  bottom: auto;
  height: min(100%, clamp(420px, 55vw, 720px));
}
@media (max-width: 760px) {
  /* En las interiores el título va antes de la ilustración. */
  :root body[data-sky="soft"] :is(.solution-hero, .page-equipo main > .hero, .cases-hero,
    .contact-layout, .blog-opening, .article-hero, .author-hero, .topic-hero)::after {
    background: radial-gradient(ellipse 120% 170px at 65% 80px,
      rgba(251,253,253,.89), rgba(251,253,253,.76) 48%, transparent 100%),
      var(--beos-impresion-hero);
  }
}

/* BEOS-77 · lectura, navegación y formularios de la revisión de Rober */
.site-footer .footer-columns h2,.site-footer .footer-grid h2{font-weight:750}
.site-footer .footer-contact h2 a{color:inherit;text-decoration:none;font:inherit}
.site-footer .footer-contact address a,.contact-direct address a{color:inherit;text-decoration:underline;text-underline-offset:.18em}
.site-footer .footer-legal{display:flex;gap:.6rem 1.25rem;justify-content:center;align-items:center;flex-wrap:wrap}
.site-footer .footer-legal :is(a,button){font:inherit;color:inherit;background:none;border:0;padding:.25em 0;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.site-footer .footer-legal{font-size:.86rem}
#casos #beos-impact .impact-footer{display:flex;justify-content:flex-end}
#casos #beos-impact a.case-link,#casos #beos-impact .impact-footer a{display:inline-flex;align-items:center;gap:.8em;padding:.68em 1.05em;border-radius:.45rem;background:#086181;color:white;text-decoration:none}
#casos #beos-impact a.case-link:is(:hover,:focus-visible),#casos #beos-impact .impact-footer a:is(:hover,:focus-visible){background:#f29a58;color:#222}
#nosotros .hero-intro{padding-block:clamp(.6rem,1.3vw,1.2rem)}
/* Un solo fondo para todo el carrusel; al avanzar, el siguiente logo sustituye al anterior sin destellos. */
#nosotros .hero-media-specialties .hero-media-square{background:#f6f9fa}
#nosotros .hero-media-specialties .hero-media-square .hero-slide{background:transparent;object-fit:contain;object-position:center;padding:17%;border-radius:0;box-sizing:border-box;transition:none}
#nosotros .hero-media-specialties .hero-media-square .hero-slide.logo-wordmark{padding:9%}
.solution-orient{margin:.75rem 0 1.25rem;max-width:58ch}.solution-orient a{color:#075c7a;font-weight:700;text-underline-offset:.2em}
#candidatura{max-width:800px;margin:0 auto;padding:clamp(32px,5vw,80px) clamp(20px,4vw,48px);scroll-margin-top:5rem}
#candidatura .contact-form-panel{width:100%}
.contact-form-panel [hidden]{display:none!important}
.contact-form-panel .service-origin{color:#086181;font-weight:600}

#brand-selector-label[hidden]{display:none!important}
#candidatura .contact-form-panel{background:#fff;border:1px solid #dbe7eb;border-radius:12px;padding:clamp(20px,4vw,44px);color:#222}
#candidatura h2{font-size:clamp(1.75rem,4vw,3rem);line-height:1.1;margin:0 0 .65em}
#candidatura .contact-form-panel>p{margin:0 0 1.5em}
#career-form{display:grid;gap:1.15rem}
#career-form label{display:grid;gap:.45rem;font-weight:600}
#career-form input:not([type=checkbox]),#career-form select,#career-form textarea{width:100%;box-sizing:border-box;padding:.75rem .85rem;border:1px solid #9aafb7;border-radius:6px;background:#fff;color:#222;font:inherit}
#career-form .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1rem}
#career-form .consent-label{display:flex;align-items:flex-start;font-size:.9rem;font-weight:400}
#career-form .consent-label input{margin-top:.2em}
#career-form .form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#career-form .form-submit{justify-self:start;border:0;padding:.85rem 1.35rem;border-radius:8px;background:#f29a58;color:#222;font:inherit;font-weight:700;cursor:pointer}
#career-form .form-submit:is(:hover,:focus-visible){background:#086181;color:white}
#career-form .form-submit:disabled{opacity:.65;cursor:default}
#career-form :focus-visible{outline:3px solid #086181;outline-offset:2px}
#career-form .security-status,#career-form .form-note{font-size:.88rem}
#career-form .form-result{margin:0}#career-form .form-result:empty,#career-form .form-note:empty{display:none}

#casos #beos-impact a.case-link span{color:inherit;flex:none}
#casos #beos-impact a.case-link:is(:hover,:focus-visible) span{transform:translateX(2px)}

/* Dos lecturas consecutivas: personas y conocimiento, luego soluciones. */
#nosotros .hero-topline .team-link{margin-inline-start:clamp(16px,3vw,42px);width:auto;gap:16px}
#nosotros .hero-lowerline{margin-top:clamp(32px,4.5vw,72px);padding-top:clamp(20px,3vw,46px);border-top:1px solid #b3cbd4}
#casos #beos-impact a.case-link{border-bottom:0;box-shadow:none}
#casos #beos-impact .impact-footer{border-top:0}
.site-footer .footer-baseline{flex-wrap:wrap}
.site-footer .footer-baseline .footer-legal{font-size:inherit;justify-content:flex-start;gap:16px}
.site-footer .footer-baseline .footer-legal :is(a,button){font:inherit;color:inherit;text-decoration:none}
.site-footer .footer-baseline .footer-legal :is(a,button):is(:hover,:focus-visible){color:#086181;text-decoration:underline}
.site-footer .footer-bottom [data-cookie-reopen]{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
@media(max-width:760px){
  #nosotros .hero-topline{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  #nosotros .hero-topline>.hero-words{grid-column:1;grid-row:1;align-self:center}
  #nosotros .hero-topline>.hero-media-people{grid-column:2;grid-row:1;justify-self:end}
  #nosotros .hero-topline>.team-link{grid-column:2;grid-row:2;justify-self:end;margin:0;width:auto;max-width:100%;gap:10px}
  #nosotros .hero-topline>.team-link .team-word{font-size:20px}
  #nosotros .hero-lower-lead{border-top:1px solid #b3cbd4;margin-top:34px;padding-top:26px}
  .site-footer .footer-baseline{align-items:center;gap:12px 18px}
  .site-footer .footer-baseline .footer-legal{order:3;flex-basis:100%}
}