/* FONTS */
@font-face {
  font-family: 'Montserrat Light';
  src: url('./../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 200;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'Montserrat Bold';
  src: url('./../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'Montserrat Black';
  src: url('./../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 900;
}

/* COMMON */
:root {
  --font-primary-light: 'Montserrat Light', Arial, Helvetica, sans-serif;
  --font-primary:       'Montserrat', Arial, Helvetica, sans-serif;
  --font-primary-bold:  'Montserrat Bold', Arial, Helvetica, sans-serif;
  --font-primary-black: 'Montserrat Black', Arial, Helvetica, sans-serif;
  --font-secondary:     'Montserrat Bold', Arial, Helvetica, sans-serif;

  --color-text: #333333;
  --color-link: #000000;
  --color-link-hover: #000000;
  
  --form-input-color: #000000;
  --form-label-color: #ffffff;
  --form-label-active-color: #ffffff;
  --form-placeholder-color: #000000;
  --form-preguntas-question-color: #ffffff;
  --form-input-backgroud-color: #ffffff;
  --form-text-size: 16px;

  --color-primary: #18202B;
  --color-primary-dark: #000000;
  --color-primary-light: #333333;

  --color-secondary: #e2ba43;
  --color-secondary-dark: #9a7f2e;
  --color-secondary-light: #fcc00e;

  --color-tertiary: #D7D7DA;
  --color-tertiary-dark: #18202B;
  --color-tertiary-light: #ffffff;

  --color-list-bg: #ffffff;
  --color-list-bg-light: #eeeeee;

  --color-admin-area-bg: #fafafa;
  --color-admin-area-bg-dark: #333333;
  --color-admin-area-border: #dddddd;
  --color-admin-area-button-bg: #fafafa;
  --color-admin-area-button-bg-hover: #ffffff;
  --color-admin-area-ok: #1ba2c0;
  --color-admin-area-ok-hover: #0fc2ea;
  --color-admin-area-ko: #c34a4a;
  --color-admin-area-ko-hover: #e63434;

  --color-alert-green: #7ccf29;
  --color-alert-green-hover: #64ae1b;
  --color-alert-red: #c34a4a;
  --color-alert-red-hover: #e63434;

  --padding-container-x: 120px;
  --padding-container-y: 120px;

  --max-width-container: 2250px; /* ¡Ojo! Cambiar también en los márgenes de los elementos de la cabecera y contacto */
  --max-width-container-semi-narrow: 1600px;
  --max-width-container-narrow: 1350px;
  --max-width-container-super-narrow: 900px;
  --max-width-container-ultra-narrow: 600px;

  --width-form-content: 450px;

  --height-header-top-bar: 120px;

  --transition-duration: 300ms;

  --navigation-height: 40px;

  /* Ancho mínimo de cada columna de texto (ver .text-columns) */
  --text-column-width: 320px;
  --text-column-gap: 60px;

  /* Medidas del panel lateral. La franja de proyectos (.section-stripe) las
     copia para que la parrilla arranque justo donde acaba el panel. */
  --navi-nav-width: 320px;
  --navi-nav-padding-x: calc(var(--padding-container-x) / 2);

  /* Relevo entre el logo del header y la W del panel (ver ANIMACIÓN LOGO) */
  --logo-hide-delay: 0s;        /* Espera desde que termina la animación */
  --logo-hide-duration: 0.8s;   /* Duración del fundido de salida del logo */
  --logo-w-fade-duration: 0.8s; /* Duración de la entrada de la W del panel */
}
@media (max-width: 1200px) {
  :root {
    --padding-container-x: 80px;
    --padding-container-y: 80px;
  }
}
@media (max-width: 992px) {
  :root {
    --padding-container-x: 30px;
    --padding-container-xl: 75px;
    --padding-container-y: 60px;

    --text-column-width: 260px;
    --text-column-gap: 40px;
  }
}
.hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
* {
  box-sizing: border-box;
  font-family: var(--font-primary);
}
html.modal-open {
  overflow-y: hidden;
}
html {
}
body {
  position: relative;
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: hidden;
}
body .white-fade {
  position: fixed;
  inset: 0;
  background-color: white;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  animation: white-fade-out 1s forwards;
  transition: opacity var(--transition-duration) ease-in-out;
}
@keyframes white-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
body .h-wrap {
  min-width: 100vw;
  display: flex;
  width: max-content;
  overflow-x: hidden;
  z-index: 1;
}
body .h-wrap .main-header {
  width: 100vw;
}
/*
body .h-wrap > * {
  width: 100vw;
}
*/
/* NAVEGACIÓN LATERAL
   ============================================================
   El panel ocupa siempre el alto de la ventana y está siempre visible, pero
   en reposo solo se ven (y solo son clicables) el botón de menú y la W:
   el resto del panel es transparente y deja pasar los clics al contenido.
   Al abrir, los bloques .navi-collapse se despliegan con max-height +
   opacidad, así la W se recoloca sola siguiendo el flujo del flex.
   ============================================================ */
.navi-nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100dvh;
  max-height: 300px;
  width: var(--navi-nav-width);
  padding-left: var(--navi-nav-padding-x);
  padding-right: var(--navi-nav-padding-x);
  padding-top: calc(var(--padding-container-y) / 2);
  padding-bottom: calc(var(--padding-container-y) / 2);
  background-color: transparent;
  /* Declarada en transparente (y no como none) para que la sombra interpole */
  box-shadow: 8px 0px 10px -10px rgba(0, 0, 0, 0);
  z-index: 2;
  /* Solo el botón de menú captura el ratón mientras está cerrado */
  pointer-events: none;
  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1), max-height 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.navi-show .navi-nav {
  background-color: white;
  box-shadow: 8px 0px 10px -10px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  max-height: 100dvh;
}
.navi-nav .nav-top {
  width: 100%;
}
.navi-nav .navi-toggle {
  display: block;
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  background-color: transparent;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
}
.navi-nav .navi-toggle-icon {
  display: block;
  width: 32px;
}
.navi-nav .navi-toggle-icon rect {
  fill: black;
}
/* Bloques que solo aparecen con el menú abierto. El max-height es un techo:
   debe superar el alto real del contenido, no medirlo. */
.navi-nav .navi-collapse {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 500ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 250ms ease-in-out,
              visibility 0s linear 500ms;
}
.navi-show .navi-nav .navi-collapse {
  max-height: 60vh;
  opacity: 1;
  visibility: visible;
  transition: max-height 500ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 300ms ease-in-out 200ms,
              visibility 0s;
}
.navi-nav .nav-logo {
  width: 100px;
  pointer-events: none;
}
@media (max-width: 992px) {
  .navi-nav .nav-logo {
    width: 100%;
    max-width: 36px;
    transition: max-width var(--transition-duration) ease-in-out;
  }
  .navi-show .navi-nav .nav-logo {
    max-width: 100px;
  }
  .navi-nav {
    max-height: 150px;
    max-width: 100%;
    width: 100%;
    padding-left: 20px;
  }
}
.navi-nav .nav-logo svg {
  display: block;
  width: 100%;
}
.navi-nav .nav-logo svg polygon {
  fill: black;
}
.navi-nav .lang {
  margin-bottom: 40px;
}
.navi-nav .nav-nav ul,
.navi-nav .nav-nav ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navi-nav .nav-nav ul li a {
  color: var(--color-tertiary);
  font-family: var(--font-primary-black);
  font-size: 28px;
  transition: color var(--transition-duration) ease-in-out;
}
.navi-nav .nav-nav ul li a.active,
.navi-nav .nav-nav ul li:hover a {
  color: var(--color-tertiary-dark);
}
.navi-nav .nav-nav ul li a.active {
  font-size: 34px
}
.navi-nav .nav-bottom .bottom-address {
  display: block;
  margin-bottom: 6px;
  font-size: 12px
}
a {
  color: inherit;
  text-decoration: none;
}
a.color-link {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-duration) ease-in-out;
}
a.color-link:hover {
  color: var(--color-link-hover);
}
strong, b {
  font-family: var(--font-primary-bold);
  font-weight: 600;
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0;
}
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
@media (max-width: 992px) {
  h1 { font-size: 32px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
}
p,
span,
ul,
li,
summary,
details,
.button {
  font-size: 16px;
}
@media (max-width: 992px) {
  p,
  span,
  ul,
  li,
  summary,
  details,
  .button {
    font-size: 16px;
  }
}
p,
span,
ul,
li {
  color: var(--color-text);
}
i,
em,
div span,
p span,
a span,
li span,
span span,
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}
figure,
p {
  margin-bottom: 0px;
}
::selection {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}
img {
  width: 100%;
  height: auto;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.section {
  display: flex;
  justify-content: center;
}
.section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--max-width-container);
  /* padding: var(--padding-container-y) var(--padding-container-x); */
  padding: 0;
  margin: 0;
  z-index: 1;
}
.section .container > * {
  width: 100%;
}
.section.vertical .container .section-header {
  padding-inline: var(--padding-container-x);
}
@media (max-width: 992px) {
  .section.vertical .container .section-header {
    padding-top: var(--padding-container-y);
  }
}

.container.semi-narrow, .semi-narrow  { max-width: var(--max-width-container-semi-narrow); }
.container.narrow, .narrow       { max-width: var(--max-width-container-narrow); }
.container.super-narrow, .super-narrow { max-width: var(--max-width-container-super-narrow); }
.container.ultra-narrow, .ultra-narrow { max-width: var(--max-width-container-ultra-narrow); }

.button {
  display: inline-block;
  padding: 12px 40px;
  cursor: pointer;
  text-align: center;
  border-radius: 30px;
  border: 1px solid var(--color-primary);
  transition: all var(--transition-duration) ease-in-out;
}
.button:hover {
  background-color: var(--color-primary);
  color: white;
}
.section .section-header {
  text-align: center;
}
.section .section-header:has(+ div) {
  margin-bottom: calc(var(--padding-container-y) / 2);
}
.section .section-title {
  font-family: var(--font-secondary);
}
.section .section-title:has(+ p) {
  margin-bottom: 20px;
}
.section p.section-text {
  margin-bottom: 0;
}
.section .section-text:has(+ .button) {
  margin-bottom: 40px;
}

.section.dark                 { background-color: var(--color-primary); }
.section.light                { background-color: white; }

.section.dark .section-title  { color: white; }
.section.dark .section-text   { color: white; }
.section.light .section-title { color: var(--color-primary); }
.section.light .section-text  { color: var(--color-text); }

.section.light .button        { color: var(--color-primary); background-color: white; border: 1px solid var(--color-primary); }
.section.light .button:hover  { color: white; background-color: var(--color-primary); border: 1px solid var(--color-primary); }
.section.dark .button         { color: white; background-color: rgba(255,255,255,.2); border: 1px solid white; }
.section.dark .button:hover   { color: var(--color-primary); background-color: white; border: 1px solid white; }

.section.light:has(+ .section.light).padding-y,
.section.dark:has(+ .section.dark).padding-y {
  padding-bottom: 0;
}

.section.vertical .section-header {
  text-align: left;
  margin-bottom: 0;
}
.section.vertical .container {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}
.section.vertical .container > * {
  padding: var(--padding-container-y) var(--padding-container-x);
}
.section.vertical .container .section-image {
  background-position: center center;
  background-size: cover;
}
.pin-spacer,
.pin-spacer .h-wrap {
  pointer-events: none;
}
.section.padding-scroll {
  padding: var(--navigation-height) 40px;
  pointer-events: none;
  max-height: 100dvh;
  overflow-y: hidden;
}
.section.padding-scroll .container {
  pointer-events: all;
}
@media (min-width: 992px) {
  .section.vertical.flip .container {
    flex-direction: row-reverse;
  }
  .section.vertical .container > * {
    width: 50%;
  }
  .section.vertical.one-two .container > *:first-child {
    width: calc((100% / 3) * 1);
  }
  .section.vertical.one-two .container > *:nth-child(2) {
    width: calc((100% / 3) * 2);
  }
  .section.vertical.two-one .container > *:first-child {
    width: calc((100% / 3) * 2);
  }
  .section.vertical.two-one .container > *:nth-child(2) {
    width: calc((100% / 3) * 1);
  }
}
@media (max-width: 992px) {
  .section.vertical .container,
  .section.vertical.flip .container {
    flex-direction: column;
  }
  .section.vertical .container .section-image {
    aspect-ratio: 1 / 1;
  }
}

/* TOP BAR */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
  transition: top 0.3s;font-size: 16px;
}
.skip-to-content:focus {
  top: 0;
}
.header-top-bar {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--height-header-top-bar);
  z-index: 10;
}
.header-top-bar .header-nav > ul li {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
}

/* SUB MENU DESPLEGABLE */
@media (min-width: 1200px) {
  .header-top-bar .header-nav ul li ul {
    position: absolute;
    top: 100%;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px 0 0;
    transition: max-height var(--transition-duration) ease-in-out;
  }
  .header-top-bar .header-nav ul li:hover ul {
    max-height: 300px;
    transition: max-height var(--transition-duration) ease-in-out;
  }
  .header-top-bar .header-nav ul li ul li {
    padding: 10px;
    white-space: nowrap;
  }
}
/* FIN SUB MENU DESPLEGABLE */

.header-top-bar .container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  max-width: var(--max-width-container);
  padding-inline: var(--padding-container-x);
}
.header-top-bar .logo img {
  width: 100%;
  height: auto;
  max-width: 400px;
}
.header-top-bar .container .nav-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
}
.header-top-bar .header-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;
}
.header-top-bar .header-nav > ul li a {
  color: white;
  font-size: 20px;
}
.header-top-bar .header-nav > ul li a.active {
  font-family: var(--font-primary-bold);
}
@media (max-width: 1200px) {
  .header-top-bar .logo img {
    max-width: 200px;
  }
  .header-top-bar .header-nav ul li a {
    font-size: 18px;
  }
}
.header-top-bar .header-lang {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-top-bar .header-lang a,
.header-top-bar .header-lang span {
  color: white;
}
.header-top-bar .header-lang a.selected {
  font-family: var(--font-primary-bold);
}

/* NAV MOBILE */
.nav-toggler-btn,
.nav-close-btn {
  display: none;
}
.backdrop {
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
  backdrop-filter: blur(0px);
  opacity: 0;
  z-index: 5;
  transition: opacity var(--transition-duration) ease-in-out;
}
@media (max-width: 1200px) {
  html.mobile .backdrop {
    display: block;
    backdrop-filter: blur(3px);
    opacity: 1;
    transition: opacity var(--transition-duration) ease-in-out;
  }
  html .header-nav {
    position: fixed;
    height: 100dvh;
    right: -500px;
    top: 0;
    display: block;
    background-color: black;
    padding: var(--height-header-top-bar) 0 0 0;
    transition: right var(--transition-duration) ease-in-out;
  }
  html.mobile .header-nav {
    right: 0;
    top: 0;
    transition: right var(--transition-duration) ease-in-out;
  }
  .header-top-bar {
    height: var(--height-header-top-bar);
    padding: 0 0 0 var(--padding-x-container);
  }
  .header-top-bar .header-logo img {
    width: 200px;
  }
  .header-top-bar .header-nav ul {
    flex-direction: column;
    padding: 10px 0;
    gap: 0;
  }
  .header-top-bar .header-nav ul li {
    display: block;
    width: 100%;
  }
  .header-top-bar .header-nav ul li a {
    display: block;
    color: white;
    padding: 24px 30px 24px 30px;
    font-size: 18px;
    background-image: none;
    font-weight: 100;
  }
  .nav-toggler-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    aspect-ratio: 1/1;
  }
  .nav-toggler-btn img {
    width: 26px;
  }
  .nav-close-btn {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 100%;
    height: var(--height-header-top-bar);
    position: absolute;
    padding: 0 var(--padding-container-x);
    top: 0;
    right: 0;
    aspect-ratio: 1/1;
    background-color: var(--color-primary);
  }
  .nav-close-btn img {
    width: 40px;
  }
}

/* VIDEO BACKGROUND VIMEO COMPONENT */
.vimeo-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.vimeo-container iframe {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* CAROUSEL BASE */
.owl-carousel {
  position: relative;
  z-index: -1;
}
.owl-carousel .owl-item,
.owl-carousel .owl-item img {
  aspect-ratio: 3 / 4;
}
@media (max-width: 768px) {
  .owl-carousel .owl-item,
  .owl-carousel .owl-item img {
    aspect-ratio: 3 / 4;
  }
}
.owl-carousel .owl-item img {
  object-fit: cover;
  object-position: center center;
}
.owl-carousel .owl-nav {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 40px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.owl-carousel .owl-nav .owl-next {
  transform: rotate(180deg);
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  pointer-events: all;
  opacity: .5;
  transition: opacity var(--transition-duration) ease-in-out;
}
.owl-carousel .owl-nav .owl-prev:hover,
.owl-carousel .owl-nav .owl-next:hover {
  opacity: .8;
}
.owl-carousel .owl-dots {
  position: absolute;
  bottom: 50px;
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.owl-carousel .owl-dots .owl-dot {
  width: 20px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: rgba(255,255,255,.5);
  transition: background var(--transition-duration) ease-in-out;
}
.owl-carousel .owl-dots .owl-dot.active {
  background-color: rgba(255,255,255,.8);
}
.owl-carousel .owl-dots .owl-dot:hover {
  background-color: rgba(255,255,255,1);
}

/* LIGHTBOX */
.lb-dataContainer {
  display: none!important;
}

/* MAIN HEADER */
.main-header {
  height: max(100dvh, 900px);
  position: relative;
}
@media (max-width: 992px) {
  .main-header {
    height: auto;
    min-height: unset;
  }
}
.main-header .header-bg {
  background-size: cover;
  background-position: center center;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.main-header .header-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%); */
}
.main-header .header-bg.header-video::before {
  z-index: 1;
}
.main-header .lang {
  position: absolute;
  display: flex;
  right: var(--padding-container-x);
  top: var(--padding-container-y);
  gap: 8px;
  z-index: 20;
}
.main-header.has-form .lang {
  right: calc(450px + var(--padding-container-x) + 40px); /* Width de .form-container + content padding + margen de seguridad */
}
.main-header .lang a,
.main-header .lang span {
  font-size: 24px;
  color: white;
}
.main-header .lang a.selected {
  font-family: var(--font-primary-bold);
}
@media (max-width: 1200px) {
  .main-header .lang,
  .main-header.has-form .lang {
    top: 7%;
    right: 7%;
  }
}
.main-header .main-header-logo {
  width: 100%;
  max-width: 400px;
}
.main-header .main-header-logo svg {
  width: 100%;
  max-width: 400px;
}
.main-header .main-header-logo svg path,
.main-header .main-header-logo svg polygon {
  fill: white;
}
/* ANIMACIÓN LOGO */

/* ============================================================
   Cada letra se revela siguiendo su propia línea de fuerza:
   W  → crece desde abajo-izquierda hacia arriba-derecha (sus diagonales)
   O  → se abre en círculo desde el centro (letra radial)
   R1 → crece desde arriba-izquierda (asta) hacia la pata inferior-derecha
   K  → se abre en abanico desde el centro-izquierda (donde nacen sus brazos)
   I  → banda inclinada que sube (el corte del ápice es un slash "/")
   E  → wipe horizontal puro, como barras que se extienden
   R2 → crece desde arriba-derecha, cerrando la palabra en espejo con R1
   Todos los clip-path usan el fill-box de cada letra, así los
   porcentajes son relativos a la propia letra.

   ¡Ojo! El pin de ScrollTrigger (js/gsap.js) envuelve .h-wrap en
   un pin-spacer, y cada ScrollTrigger.refresh() (evento load,
   resizes...) deshace y rehace ese envoltorio. Ese re-parenting
   reinicia cualquier animación CSS en curso, por eso:
   - html.js        (inline en head.php) → el logo espera oculto;
                    sin JS se muestra estático.
   - html.logo-anim-ready (gsap.js, tras el refresh del load) →
                    arrancan las animaciones.
   - html.logo-anim-done  (gsap.js, al terminar) → estado final
                    congelado; los refresh posteriores ya no la
                    vuelven a disparar.
   ============================================================ */
.workier-svg {
  --logo-letter-duration: 1.8s;  /* Duración del revelado de cada letra */
  --logo-letter-stagger: 0.3s;   /* Retardo entre letra y letra (se solapan) */
  --logo-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .workier-svg .workier-w,
html.js .workier-svg .workier-o,
html.js .workier-svg .workier-r-1,
html.js .workier-svg .workier-k,
html.js .workier-svg .workier-i,
html.js .workier-svg .workier-e,
html.js .workier-svg .workier-r-2,
html.js .workier-svg .logo-text-arquitectes {
  opacity: 0;
}

.workier-svg .workier-w,
.workier-svg .workier-o,
.workier-svg .workier-r-1,
.workier-svg .workier-k,
.workier-svg .workier-i,
.workier-svg .workier-e,
.workier-svg .workier-r-2 {
  animation-duration: var(--logo-letter-duration);
  animation-timing-function: var(--logo-ease);
  animation-fill-mode: both;
}
html.logo-anim-ready .workier-svg .workier-w   { animation-name: logo-w-reveal;  animation-delay: 0s; }
html.logo-anim-ready .workier-svg .workier-o   { animation-name: logo-o-reveal;  animation-delay: calc(var(--logo-letter-stagger) * 1); }
html.logo-anim-ready .workier-svg .workier-r-1 { animation-name: logo-r1-reveal; animation-delay: calc(var(--logo-letter-stagger) * 2); }
html.logo-anim-ready .workier-svg .workier-k   { animation-name: logo-k-reveal;  animation-delay: calc(var(--logo-letter-stagger) * 3); }
html.logo-anim-ready .workier-svg .workier-i   { animation-name: logo-i-reveal;  animation-delay: calc(var(--logo-letter-stagger) * 4); }
html.logo-anim-ready .workier-svg .workier-e   { animation-name: logo-e-reveal;  animation-delay: calc(var(--logo-letter-stagger) * 5); }
html.logo-anim-ready .workier-svg .workier-r-2 { animation-name: logo-r2-reveal; animation-delay: calc(var(--logo-letter-stagger) * 6); }

@keyframes logo-w-reveal {
  0% {
    clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    clip-path: polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%);
    opacity: 1;
  }
}

@keyframes logo-o-reveal {
  0% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    clip-path: circle(75% at 50% 50%);
    opacity: 1;
  }
}

@keyframes logo-r1-reveal {
  0% {
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    clip-path: polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%);
    opacity: 1;
  }
}

@keyframes logo-k-reveal {
  0% {
    clip-path: polygon(0% 50%, 0% 50%, 0% 50%, 0% 50%);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    clip-path: polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%);
    opacity: 1;
  }
}

@keyframes logo-i-reveal {
  0% {
    clip-path: polygon(0% 130%, 100% 110%, 100% 170%, 0% 190%);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    clip-path: polygon(0% 10%, 100% -10%, 100% 170%, 0% 190%);
    opacity: 1;
  }
}

@keyframes logo-e-reveal {
  0% {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
    opacity: 1;
  }
}

@keyframes logo-r2-reveal {
  0% {
    clip-path: polygon(100% 0%, 100% 0%, 100% 0%, 100% 0%);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    clip-path: polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%);
    opacity: 1;
  }
}

.workier-svg .logo-text-workier {
  transform-box: fill-box;
  transform-origin: center;
}
html.logo-anim-ready .workier-svg .logo-text-workier {
  animation: logo-word-settle 3.8s var(--logo-ease) both;
}
@keyframes logo-word-settle {
  0% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.workier-svg .logo-text-arquitectes {
  transform-box: fill-box;
}
html.logo-anim-ready .workier-svg .logo-text-arquitectes {
  animation: logo-sub-reveal 1.7s var(--logo-ease) 2.4s both;
}
@keyframes logo-sub-reveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Un segundo después de terminar la animación, el logo se desvanece.
   La transición vive en la regla de destino (html.logo-anim-done), así solo
   se aplica al ocultarse y nunca al pintar el estado inicial. */
html.logo-anim-done .main-header .main-header-logo {
  opacity: 0;
  transition: opacity var(--logo-hide-duration) ease var(--logo-hide-delay);
}

/* Relevo: la W del panel entra en cuanto el logo del header acaba de irse.
   Comparten reloj, así que su retardo es el del fundido de salida completo.
   Solo en la home: es la única página con main-header, y sin JS (o sin que la
   animación llegue a terminar) la W no debe quedarse oculta. */
html.js body.home .navi-nav .nav-logo {
  opacity: 0;
}
html.js.logo-anim-done body.home .navi-nav .nav-logo {
  opacity: 1;
  transition: opacity var(--logo-w-fade-duration) ease calc(var(--logo-hide-delay) + var(--logo-hide-duration)), max-width var(--logo-w-fade-duration) ease;
}

html.logo-anim-done .workier-svg .workier-w,
html.logo-anim-done .workier-svg .workier-o,
html.logo-anim-done .workier-svg .workier-r-1,
html.logo-anim-done .workier-svg .workier-k,
html.logo-anim-done .workier-svg .workier-i,
html.logo-anim-done .workier-svg .workier-e,
html.logo-anim-done .workier-svg .workier-r-2,
html.logo-anim-done .workier-svg .logo-text-workier,
html.logo-anim-done .workier-svg .logo-text-arquitectes {
  animation: none;
  opacity: 1;
  clip-path: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html .workier-svg .workier-w,
  html .workier-svg .workier-o,
  html .workier-svg .workier-r-1,
  html .workier-svg .workier-k,
  html .workier-svg .workier-i,
  html .workier-svg .workier-e,
  html .workier-svg .workier-r-2,
  html .workier-svg .logo-text-workier,
  html .workier-svg .logo-text-arquitectes {
    animation: none;
    opacity: 1;
  }
  /* Sin animación no hay logo-anim-done, así que la W entra ya visible */
  html.js body.home .navi-nav .nav-logo {
    opacity: 1;
  }
}
@media (max-width: 1200px) {
  .main-header .main-header-logo {
    display: block!important;
  }
}
.main-header .header-info,
.contact .contact-info {
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-header.has-form .header-info,
.contact .contact-info {
  max-width: calc(100vw - var(--width-form-content) - (calc(var(--padding-container-x) * 3)));
}
.main-header .header-info .title,
.contact .contact-info .title {
  color: white;
  font-size: 52px;
}
.main-header .header-info .subtitle,
.contact .contact-info .subtitle {
  color: white;
  font-size: 38px;
}
.main-header .header-info .text,
.contact .contact-info .text {
  color: white;
  font-size: 28px;
}
.main-header .header-vimeo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.main-header .header-vimeo iframe {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.main-header .header-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.main-header .header-video video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.main-header .header-carousel,
.main-header .header-carousel .owl-carousel,
.main-header .header-carousel .owl-carousel .owl-stage-outer,
.main-header .header-carousel .owl-carousel .owl-stage-outer .owl-stage,
.main-header .header-carousel .owl-carousel .owl-stage-outer .owl-stage .owl-item,
.main-header .header-carousel .owl-carousel .owl-stage-outer .owl-stage .owl-item figure,
.main-header .header-carousel .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a,
.main-header .header-carousel .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a img {
  height: 100%;
}
.main-header .header-carousel .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a {
  pointer-events: none;
}
@media (max-width: 1200px) {
  .main-header {
    height: auto;
  }
  .main-header .header-bg {
    min-height: 600px;
    height: 100dvh;
    position: relative;
  }
  .main-header.has-form .header-info {
    max-width: 100%;
  }
  .main-header #main-header-vimeo-container {
    position: relative;
    inset: 0;
    overflow: hidden;
  }
}
@media (max-width: 992px) {
  .main-header .header-info .title,
  .contact .contact-info .title {
    font-size: 32px;
  }
  .main-header .header-info .subtitle,
  .contact .contact-info .subtitle {
    font-size: 26px;
  }
  .main-header .header-info .text,
  .contact .contact-info .text {
    font-size: 22px;
  }
}


/* FORM COMMON */
.form-container {
  position: absolute;
  top: 0;
  right: var(--padding-container-x);
  display: flex;
  align-items: center;
  height: 100%;
}
@media (max-width: 2250px) {
  .form-container {
    right: var(--padding-container-x);
  }
}
@media (min-width: 2250px) {
  .form-container {
    right: calc(((100vw - var(--max-width-container)) / 2) + var(--padding-container-x));
  }
}
.form-container.form-sticky {
  right: 0;
  background-color: var(--color-primary);
}
.form-container .form-content {
  background-color: var(--color-primary);
  padding: 50px;
  width: 450px;
}
.form-container.form-sticky .form-content {
  background-color: transparent;
  width: 550px;
}
.form-container .form-content .form-header {
  text-align: center;
  margin-bottom: 40px;
}
.form-container .form-content .form-logo {
  max-width: 300px;
  margin-bottom: 40px;
}
.form-container .form-content .form-title {
  display: block;
  text-align: left;
  color: #ffffff;
  font-weight: 500;
  font-size: 24px;
}
.form-container .form-content .form-text {
  display: block;
  text-align: left;
  color: #ffffff;
  font-size: 16px;
}
@media (max-width: 1200px) {
  .form-container {
    position: relative;
    right: unset;
  }
  .form-container .form-content,
  .form-container.form-sticky .form-content {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .form-container .form-content {
    padding: 50px var(--padding-container-x);
  }
}

/* FORM */
.form .form-fieldset {
  display: none;
}
.form .form-fieldset.active {
  display: block;
}
.form legend {
  text-align: center;
  font-size: 22px;
  color: var(--form-preguntas-question-color);
  margin-bottom: 20px;
}
.form .form-fieldset-questions input[type='radio'] {
  display: none;
}
.form .form-fieldset-questions label:not(.checkbox label) {
  background-color: #ffffff;
  color: #000000;
  border-radius: 5px;
  cursor: pointer;
  padding: 16px 10px;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
}
.form .form-inputs {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .form .form-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'nombre nombre' 'telefono telefono' 'email email' 'mensaje mensaje';
  }
}
@media (max-width: 992px) {
  .form .form-inputs {
    grid-template-areas: 'nombre' 'telefono' 'email' 'mensaje';
  }
}
.form .box-nombre   { grid-area: nombre; }
.form .box-apellido { grid-area: apellido; }
.form .box-telefono { grid-area: telefono; }
.form .box-email    { grid-area: email; }
.form .box-cp       { grid-area: cp; }
.form .box-mensaje  { grid-area: mensaje; }

.form .input-box {
  display: flex;
  flex-direction: column-reverse;
}
.form .input-box label {
  margin-bottom: 5px;
  color: var(--form-label-color);
}
.form .input-box input,
.form .input-box textarea,
.form .input-box select {
  background-color: var(--form-input-backgroud-color);
  color: var(--form-input-color);
  font-size: var(--form-text-size);
  border: 0;
  border-radius: 5px;
  padding: 10px 18px;
  width: 100%;
}
.form .input-box .iti__selected-dial-code {
  background-color: var(--form-input-backgroud-color);
  color: var(--form-input-color);
  font-size: var(--form-text-size);
  width: 100%;
}
.form .input-box .iti__arrow {
    border-right-color: var(--form-input-color);
    border-bottom-color: var(--form-input-color);
}
.form .input-box textarea {
  resize: none;
}
.form .input-box select {
  padding-left: 0px;
  background-color: transparent;
}
.form .input-box select option {
  color: black;
}
.form .input-box input::placeholder,
.form .input-box textarea::placeholder {
  font-size: var(--form-text-size);
  color: var(--form-placeholder-color);
}
.form .form-policies {
  margin-bottom: 20px;
}
.form .form-policies .checkbox {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}
.form .form-policies .checkbox input[type='checkbox'] {
  appearance: none;
  background-color: transparent;
  border: 1px solid white;
  height: 1em;
  width: 1em;
  cursor: pointer;
  place-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  margin-top: 6px;
  aspect-ratio: 1/1;
}
.form .form-policies .checkbox input[type='checkbox']::before {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: var(--color-secondary-light);
}
.form .form-policies .checkbox input[type='checkbox']:checked::before {
  transform: scale(1);
}
.form .form-policies .checkbox label {
  color: #ffffff;
  font-size: 14px;
}
.form .button-submit {
  border: 0;
  background-color: var(--color-secondary);
}
.form .button-submit:hover {
  background-color: var(--color-secondary-light);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--form-input-color) !important;
  color: var(--form-input-color) !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 0px 0px transparent;
}
@media (max-width: 992px) {
  .form-container .submit-btn {
    width: 100%;
  }
}

/* ESTILOS PARA LABEL FLOTANTES */
.form-container.floating-labels .form .input-box {
  flex-direction: column;
  position: relative;
  margin-bottom: 10px;
}
.form-container.floating-labels .form .input-box label {
  position: absolute;
  left: 18px;
  top: 10px;
  margin-bottom: 0;
  transition:
    font-size var(--transition-duration) ease-in-out,
    top var(--transition-duration) ease-in-out,
    left var(--transition-duration) ease-in-out,
    color var(--transition-duration) ease-in-out;
}
.form-container.floating-labels .form .input-box.box-telefono label {
  left: 100px;
}
.form-container.floating-labels .form .input-box:focus-within label,
.form-container.floating-labels .form .input-box:focus-within textarea {
  top: -22px;
  left: 17px;
  font-size: 12px;
  color: var(--form-label-active-color);
  transition:
    font-size var(--transition-duration) ease-in-out,
    top var(--transition-duration) ease-in-out,
    left var(--transition-duration) ease-in-out,
    color var(--transition-duration) ease-in-out;
}
.form-container.floating-labels .form .input-box input:not(:placeholder-shown)+label,
.form-container.floating-labels .form .input-box textarea:not(:placeholder-shown)+label,
.form-container.floating-labels .form .input-box:has(input:not(:placeholder-shown))>label {
  top: -14px;
  font-size: 12px;
  color: var(--form-label-active-color);
}

/* SECTIONS */
.section.section-stripe {
  width: max-content;
  flex: 0 0 auto;
  padding: 40px 0;
}
.section-stripe:has( + .section) {
  padding-right: 0;
}
.section-stripe + .section {
  padding-left: 0;
}

/* MAIN TITLE */
.main-title .section-header {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.main-title .section-header h1 {
  position: fixed;
  font-size: 28px;
  font-family: var(--font-primary-bold);
  transform: rotate(-90deg) translateX(50%) translateY(-60px);
  display: flex;
}

/* VERTICAL CARDS */
/* El ancho lo marca el contenido, no el max-width del contenedor: estas
   secciones crecen en horizontal (columnas de texto, galerías...) y el tope
   de 2250px las recortaba. Mismo criterio que en .proyectos.page .proyectos .container. */
.verticard.section.vertical .container {
  width: max-content;
  max-width: none;
}
.verticard.section.vertical .container > a {
  aspect-ratio: 4 / 5;
}
.verticard.section.vertical .container > a > .section-header {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 20px;
}
.verticard.section.vertical .container > a > .section-image {
  height: 100%;
  width: 100%;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center center;
}
.verticard.section.vertical .container > *,
.verticard.section.vertical .container > article > * {
  height: calc(100dvh - (var(--navigation-height) * 2));
  width: auto;
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-inline: 0px;
  padding: 0 60px;
}
.proyecto .verticard.section.vertical .container > .section-header {
  padding-left: 20px;
  justify-content: flex-end;
}
.proyecto .verticard.section.vertical .container > .section-header .text-columns {
  flex-grow: 0;
  margin-bottom: var(--padding-container-y);
}
.proyecto .verticard.section.vertical .container > .section-header .text-columns p {
  display: none;
}
@media (max-height: 992px) {
  .proyecto .verticard.section.vertical .container > .section-header .text-columns {
    margin-bottom: 0;
  }
}
.verticard.section.vertical .container .section-header .section-title {
  width: 100%;
  text-align: left;
}
@media (max-width: 992px) {
  .proyecto .verticard.section.vertical .container .section-header .section-title {
    margin-top: -5px;
    font-size: 28px;
  }
}
.verticard.section.vertical .container .section-header .section-title:has(+ .section-text) {
  margin-bottom: 40px;
}
.verticard.section.vertical .container .section-header .section-text h3 {
  font-family: var(--font-primary-bold);
  font-size: 16px;
  margin-bottom: 10px;
}
.verticard.section.vertical .container .section-image:has(+ .section-image) {
  margin-right: 60px;
}

/* COLUMNAS DE TEXTO
   La web mantiene un alto fijo (todo el scroll es horizontal), así que un texto
   largo se cortaba en cuanto la ventana perdía altura. En vez de darle un scroll
   vertical propio, se reparte en columnas: CSS crea de forma nativa tantas como
   hagan falta, pero NO ensancha la caja (las columnas sobrantes se desbordan),
   así que js/text-columns.js mide ese desbordamiento y le da a la caja el ancho
   que necesita. Más texto = más ancho = más scroll horizontal. */
.text-columns {
  flex: 1 1 auto;
  min-height: 0;
  column-width: var(--text-column-width);
  column-gap: var(--text-column-gap);
  column-fill: auto;
  font-size: 16px;
  color: var(--color-text);
  orphans: 2;
  widows: 2;
}
.text-columns > *:first-child {
  margin-top: 0;
}
.text-columns h3 {
  margin-bottom: 10px;
  font-family: var(--font-primary-bold);
  /* Que un título no se quede solo al final de una columna */
  break-after: avoid;
}
.text-columns p:has(+ h3) {
  margin-bottom: 20px;
}
/* El título va fuera del flujo de columnas, así que se limita al ancho de una
   para que no cambie de altura cuando la caja se ensancha: si cambiase, variaría
   el alto disponible del texto y el número de columnas no llegaría a estabilizarse.
   text-columns.js afina la medida con el ancho real de columna ya renderizado. */
.section-header:has(> .text-columns) .section-title {
  max-width: var(--text-column-render-width, var(--text-column-width));
  align-self: flex-start;
}

/* PROYECTOS
   ============================================================
   Esta página no entra en el scroll horizontal (ver js/gsap.js): la parrilla
   crece hacia abajo y se recorre con el scroll normal del navegador. El
   .h-wrap se queda en dos columnas, la franja lateral y la parrilla.
   ============================================================ */
.proyectos.page {
  height: auto;
  max-height: none;
  overflow-y: visible;
}
.proyectos.page .h-wrap {
  width: 100%;
}
/* La franja iguala ancho y padding de .navi-nav, así la parrilla arranca
   justo donde acaba el panel. */
.proyectos.page .section.section-stripe,
.estudio.page .section.section-stripe {
  width: var(--navi-nav-width);
  flex: 0 0 var(--navi-nav-width);
  padding-left: var(--navi-nav-padding-x);
  padding-right: var(--navi-nav-padding-x);
}
.proyectos.page .section.proyectos {
  /* Solo la parrilla se libera del alto de la ventana; la franja sigue
     ocupando una pantalla, con su título a la vista. */
  max-height: none;
  overflow-y: visible;
  flex: 1 1 auto;
  min-width: 0;
}
.proyectos.page .proyectos .container {
  display: flex;
  flex-direction: column;
  /* Los dos márgenes del marco: cierra una pareja y abre la siguiente, así el
     ritmo se repite exactamente cada pantalla */
  gap: calc(var(--navigation-height) * 2);
  width: 100%;
  max-width: none;
}
/* Cada proyecto es una fila de tres tarjetas, una por imagen (ver
   views/proyectos.php), y ocupa una pantalla descontando el marco: el padding
   vertical de .padding-scroll arriba y abajo. */
.proyectos.page .proyectos .container .proyectos-row {
  display: flex;
  flex-direction: row;
  gap: 40px;
  height: calc(100dvh - (var(--navigation-height) * 2));
}
.proyectos.page .proyectos .container .proyecto-card {
  /* Ancho fijo a un tercio: si el proyecto tiene menos de tres imágenes, las
     que hay no se estiran */
  position: relative;
  width: calc((100% - 80px) / 3);
  flex: 0 0 calc((100% - 80px) / 3);
  height: 100%;
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* Al ir de tres en tres la tarjeta es más estrecha: menos margen lateral */
  padding: 40px 20px;
}
.proyectos.page .proyectos .container .proyecto-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: all var(--transition-duration) ease-in-out;
}
/* El hover es de la fila: al pasar por cualquiera de las tres imágenes se
   oscurecen todas y aparece el título, que sólo lleva la primera. */
.proyectos.page .proyectos .container .proyectos-row:hover .proyecto-card::after {
  background-color: rgba(0, 0, 0, .5);
}
@media (max-width: 992px) {
  .proyectos.page .proyectos .container .proyecto-card::after {
    background-color: rgba(0, 0, 0, .2);
  }
}
.proyectos.page .proyectos .container .proyecto-card .section-header {
  position: relative;
  opacity: 0;
  padding: 60px 20px;
  max-width: 100%;
  z-index: 1;
  transition: all var(--transition-duration) ease-in-out;
}
.proyectos.page .proyectos .container .proyecto-card .section-header h2 {
  text-transform: uppercase;
  font-size: 24px;
  font-family: var(--font-primary-light);
  color: white;
}
.proyectos.page .proyectos .container .proyecto-card .section-header h2 span {
  display: block;
  text-transform: unset;
  font-size: 50px;
  font-family: var(--font-primary);
  color: white;
}
.proyectos.page .proyectos .container .proyectos-row:hover .proyecto-card .section-header {
  opacity: 1;
}
@media (max-width: 768px) {
  .proyectos.page .proyectos .container .proyecto-card .section-header {
    opacity: 1;
  }
  .proyectos.page .proyectos .container .proyecto-card .section-header h2 {
    font-size: 20px;
  }
  .proyectos.page .proyectos .container .proyecto-card .section-header h2 span {
    font-size: 38px;
  }
}

/* ESTUDIO */
.estudio .info .section-image:has( > .section-header) {  
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 80px;
}
.estudio .info .section-image .section-header {
  position: relative;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  padding: 40px 60px 20px;
  max-width: max-content;
  text-align: center;
  transition: all var(--transition-duration) ease-in-out;
}
.estudio .info .section-image .section-header h2 {
  line-height: 1.6;
}

/* PROYECTO */
.proyecto .section-header .section-title {
  margin-bottom: 20px
}
/* Media pantalla para el texto y media para el carousel. Las mitades salen del
   ancho de la ventana, así que la sección se fija a 100vw y el .container deja
   de medir por su contenido (por defecto va en max-content). */
.proyecto .proyecto-info.verticard.section.vertical {
  width: 100vw;
  flex: 0 0 100vw;
}
.proyecto .proyecto-info.verticard.section.vertical .container {
  width: 100%;
  max-width: none;
}
@media (max-width: 992px) {
  .proyecto .section-header .section-title {
    margin-bottom: 18px
  }
}
@media (min-width: 992px) {
  .proyecto .proyecto-info .section-header {
    min-height: 600px!important;
  }
}
.proyecto .proyecto-info .section-header .section-title {
  color: #333333;
}
/* La ficha se reparte en tres columnas: el texto, el carousel cuadrado y un
   hueco vacío (.section-spacer, ver views/proyecto.php). Texto y hueco crecen y
   encogen igual (flex: 1 1 0), así el carousel queda centrado en la ventana; el
   texto nunca baja de --info-text-min y, cuando la ventana se estrecha, el
   hueco de la derecha es el primero en desaparecer. */
.proyecto .proyecto-info.verticard.section.vertical .container {
  /* Una columna de texto entera más el padding del header (20px + 60px) */
  --info-text-min: calc(var(--text-column-width) + 80px);
  /* El carousel es cuadrado, así que este lado es a la vez su alto y su ancho:
     el alto que reparte .verticard .container > * (ver más arriba), salvo que
     no quede sitio a lo ancho. 100vw - 80px es el interior del contenedor,
     descontando el padding lateral de .section.padding-scroll. */
  --carousel-size: min(
    calc(100dvh - (var(--navigation-height) * 2)),
    calc(100vw - 80px - var(--info-text-min))
  );
}
.proyecto .proyecto-info .container > .section-header,
.proyecto .proyecto-info .container > .section-spacer {
  /* text-columns.js puede escribir un width en línea sobre el header; con
     flex-basis 0 el reparto no depende de él y no se rompe. */
  width: auto;
  max-width: none;
  flex: 1 1 0;
  aspect-ratio: auto;
}
.proyecto .proyecto-info .container > .section-header {
  align-items: flex-start;
  min-width: min(100%, var(--info-text-min));
}
.proyecto .proyecto-info .container > .section-spacer {
  padding: 0;
  min-width: 0;
}
/* El texto no pasa de 600px dentro de su columna */
.proyecto .proyecto-info .container > .section-header > * {
  width: 100%;
  max-width: 600px;
}
.proyecto .proyecto-info .section-image {
  padding: 0!important;
  overflow: hidden;
  pointer-events: none;
}
/* La columna del carousel mide justo el cuadrado, ni más ni menos: el centrado
   lo hacen las dos columnas elásticas de los lados. */
.proyecto .proyecto-info .container > .section-image {
  width: var(--carousel-size);
  max-width: 100%;
  flex: 0 0 var(--carousel-size);
  aspect-ratio: auto;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.proyecto .proyecto-info .container > .section-image .owl-carousel {
  flex: 0 0 auto;
  /* Alto y ancho explícitos (el mismo valor: 1/1) y no un aspect-ratio: Owl
     mide el elemento al arrancar para repartir los items en px, y un ancho que
     dependa del ratio no está resuelto en ese momento. */
  height: var(--carousel-size);
  width: var(--carousel-size);
  max-width: 100%;
}
.proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer,
.proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage,
.proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item,
.proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure,
.proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a,
.proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a img {
  height: 100%!important;
  max-height: 100dvh!important;
}

/* PRENSA NOTICIAS */
.prensa .noticias {
  width: max-content;
  flex: 0 0 auto;
}
.prensa .noticias .container {
  display: flex;
  flex-direction: row;
  gap: 40px;
  width: max-content;
  max-width: none;
}
.prensa .noticias .container .noticia-card {
  height: calc(100dvh - (var(--navigation-height) * 2));
  width: auto;
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 40px 80px;
}
.prensa .noticias .container .noticia-card .section-header {
  position: relative;
  opacity: 0;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  padding: 40px 60px 20px;
  max-width: 100%;
  transition: all var(--transition-duration) ease-in-out;
}
.prensa .noticias .container .noticia-card .section-header::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 2px;
  background-color: var(--color-primary);
}
.prensa .noticias .container .noticia-card .section-header h2 {
  font-size: 24px;
  font-family: var(--font-primary-light);
}
.prensa .noticias .container .noticia-card .section-header h2 span {
  display: block;
  font-size: 50px;
  font-family: var(--font-primary);
}
.prensa .noticias .container .noticia-card:hover .section-header {
  opacity: 1;
}
@media (max-width: 768px) {
  .prensa .noticias .container .noticia-card .section-header {
    opacity: 1;
  }
  .prensa .noticias .container .noticia-card .section-header h2 {
    font-size: 20px;
  }
  .prensa .noticias .container .noticia-card .section-header h2 span {
    font-size: 38px;
  }
}

/* NOTICIA */
.noticia .section-header .section-title {
  margin-bottom: 30px
}
.noticia .noticia-info .section-image {
  padding: 0!important;
  overflow: hidden;
  pointer-events: none;
}
.noticia .noticia-info .section-image .owl-carousel .owl-stage-outer,
.noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage,
.noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item,
.noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure,
.noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a,
.noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a img {
  height: 100%!important;
  max-height: 100dvh!important;
}

/* HOME TIPOLOGÍAS */
.tipologias .section-tipologias ul {
  list-style: none;
  padding: 0;
}
.tipologias .section-tipologias ul li > span {
  display: block;
}
.tipologias .section-tipologias ul li,
.tipologias .section-tipologias .tipologias-titles {
  padding: 10px 20px;
}
.tipologias .section-tipologias ul li:nth-child(odd) {
  background-color: var(--color-list-bg-light);
}
@media (min-width: 768px) {
  .tipologias .section-tipologias ul li,
  .tipologias .section-tipologias .tipologias-titles {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    width: 100%;
  }
  .tipologias .section-tipologias ul li .tipologias-title-mobile {
    display: none;
  }
}
@media (max-width: 768px) {
  .tipologias .section-tipologias .tipologias-titles {
    display: none;
  }
  .tipologias .section-tipologias ul li h4 {
    font-size: 16px;
    display: inline-block;
  }
}

/* HOME ICONOS */
.icons .section-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.icons .section-icons .icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.icons .section-icons .icon-box img {
  max-width: 100px;
}
.icons .section-icons .icon-box h3 {
  font-size: 18px;
}
@media (max-width: 768px) {
  .icons .section-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .icons .section-icons .icon-box img {
    max-width: 80px;
  }
  .icons .section-icons .icon-box h3 {
    font-size: 16px;
  }
}

/* HOME CAROUSEL */
.carousel.section {
  padding-bottom: 0;
}
.carousel.section .container {
  padding: 0;
}

/* HOME FAQ */
.faq .section-faq details {
  width: 100%;
  border: 1px solid var(--color-list-bg-light);
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 15px;
  background-color: #fafafa;
  transition: all 0.3s ease;
}
.faq .section-faq details:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.faq .section-faq details summary {
  cursor: pointer;
  padding-left: 10px;
  outline: none;
}
.faq .section-faq details p {
  padding: 10px 30px 0;
  color: #666666;
}
.faq .section-faq details[open] {
  background-color: #ffffff;
}

/* HOME CONTACT */
.contact {
  height: max(100dvh, 900px);
  position: relative;
}
.contact .contact-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-position: center center;
  background-size: cover;
}
.contact .contact-bg::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%);
}
@media (max-width: 1200px) {
  .contact {
    height: auto;
  }
  .contact .contact-bg {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 400px;
  }
  .contact .contact-bg .contact-info {
    position: relative;
    max-width: 100%;
    height: 100%;
    padding: var(--padding-container-y) var(--padding-container-x);
    left: unset;
    bottom: unset;
  }
  .contact .form-container {
    position: relative;
    width: 100%;
    right: unset;
  }
}

/* FOOTER */
.footer {
  background-color: var(--color-primary-dark);
}
.footer .footer-button-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.footer,
.footer * {
  font-size: 18px;
  color: white;
}
.footer a {
  cursor: pointer;
  color: white;
}
.footer a:hover {
  color: white;
}
.footer .container {
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}
.footer .container > div {
  width: auto;
  display: flex;
  gap: 20px;
}
@media (max-width: 992px) {
  .footer .container {
    flex-direction: column;
    gap: 30px;
  }
  .footer .container > div {
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 460px) {
  .footer .container > div {
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }
}

/* LOGIN */
.login-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-form {
  width: 100%;
  max-width: 500px;
  padding: 35px;
  border-radius: 10px;
  border: 1px solid #dddddd;
}
.login-form .form-title {
  font-size: 24px;
  margin-bottom: 20px;
}
.login-form fieldset {
  margin-bottom: 14px;
}
.login-form .error {
  text-align: center;
  border-radius: 2px;
  padding: 4px;
  margin-bottom: 10px;
  border: 1px solid #fdcbcb;
  background-color: #ffe0e0;
  color: #bd4c4c;
}
.login-form .input-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 16px;
  color: #666666;
  margin-bottom: 10px;
}
.login-form .input-box input {
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #bbbbbb;
}
.login-form .submit-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  background-color: var(--color-primary);
  color: white;
  transition:
    background var(--transition-duration) ease-in-out,
    color var(--transition-duration) ease-in-out;
}
.login-form .submit-button:hover {
  background-color: var(--color-primary-light);
  transition:
    background var(--transition-duration) ease-in-out,
    color var(--transition-duration) ease-in-out;
}

/* ADMIN */
.admin .header-top-bar,
.admin-data .header-top-bar,
.admin-users .header-top-bar {
  display: none;
}

/* ADMIN PANEL */
.admin-panel {
  background-color: var(--color-admin-area-bg);
}
.admin-panel * {
  font-family: Arial, Helvetica, sans-serif!important;
}
.admin-panel p,
.admin-panel span,
.admin-panel a {
  font-size: 16px;
}
.admin-panel .admin-panel-header {
  background-color: white;
  height: auto;
}
.admin-panel .admin-panel-header .container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.admin-panel .container {
  padding: 20px;
}
.admin-panel .admin-panel-button {
  display: inline-block;
  border: 1px solid var(--color-admin-area-border);
  background-color: var(--color-admin-area-button-bg);
  text-align: center;
  border-radius: 5px;
  padding: 4px 12px;
  transition: background var(--transition-duration) ease-in-out;
}
.admin-panel .admin-panel-button:hover {
  background-color: var(--color-admin-area-button-bg-hover);
}
.admin-panel .button-ko {
  color: white;
  border-color: var(--color-admin-area-ko);
  background-color: var(--color-admin-area-ko);
  transition: background var(--transition-duration) ease-in-out;
}
.admin-panel .button-ko:hover {
  color: white;
  border-color: var(--color-admin-area-ko);
  background-color: var(--color-admin-area-ko-hover);
}
.admin-panel .eliminar-archivo {
  background: none;
  border: none;
  color: var(--color-admin-area-ko);
  cursor: pointer;
  font-size: 0.85em;
  margin-left: 10px;
  padding: 0;
  text-decoration: underline;
  transition: color var(--transition-duration) ease-in-out;
}
.admin-panel .eliminar-archivo:hover {
  color: var(--color-admin-area-ko-hover);
}
.admin-panel .button-ok {
  color: white;
  border-color: var(--color-admin-area-ok);
  background-color: var(--color-admin-area-ok);
}
.admin-panel .button-ok:hover {
  color: white;
  border-color: var(--color-admin-area-ok);
  background-color: var(--color-admin-area-ok-hover);
}
.admin-panel .admin-panel-header h1 {
  padding: 10px;
  font-size: 16px;
  text-align: center;
  background-color: var(--color-admin-area-bg-dark);
  color: var(--color-admin-area-border);
}
.admin-panel .admin-name {
  font-size: 18px;
}
.admin-panel .admin-nav {
  padding: 20px;
  display: flex;
  gap: 20px;
  background-color: white;
  border: 1px solid var(--color-admin-area-border);
}
.admin-panel .admin-panel-message {
  margin-bottom: 20px;
}
.admin-panel .admin-panel-message.message-ok {
  color: var(--color-admin-area-ok);
}
.admin-panel .admin-panel-message.message-ko {
  color: var(--color-admin-area-ko);
}
.admin-panel .admin-card {
  border: 1px solid var(--color-admin-area-border);
  padding: 40px;
  border-radius: 20px;
  background-color: white;
}
.admin-panel .admin-card h2 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}
.admin-panel .admin-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.admin-panel .user-table-head,
.admin-panel .user-item {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
  margin-bottom: 10px;
  align-items: center;
}
@media (min-width: 768px) {
  .admin-panel .user-table .user-data-title-mobile {
    display: none;
  }
}
.form-row + .form-row {
  margin-top: 40px;
}
.admin-panel .form-inputs {
  margin-bottom: 10px;
}
.admin-panel .form-inputs .input-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.admin-panel .form-inputs .input-box label {
  margin: 0 0 5px 0;
}
.admin-panel .form-inputs .input-box input,
.admin-panel .form-inputs .input-box textarea,
.admin-panel .form-inputs .input-box select {
  border: 1px solid var(--color-admin-area-border);
  background-color: var(--color-admin-area-button-bg);
  padding: 6px 10px;
  border-radius: 5px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
}
.admin-panel .form-inputs .input-box textarea {
  field-sizing: content;
}
.admin-panel .form-add-new {
  padding: 40px;
  border-top: 3px solid var(--color-admin-area-border);
  background-color: var(--color-admin-area-bg);
  margin: 40px 0 0 0;
}
@media (max-width: 768px) {
  .admin-panel .admin-card {
    padding: 25px 20px;
  }
  .admin-panel .user-table-head {
    display: none;
  }
  .admin-panel .user-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-admin-area-border);
    margin-bottom: 20px;
  }
  .admin-panel .user-item:last-of-type {
    padding-bottom: 0px;
    border-bottom: 0;
    margin-bottom: 0px;
  }
  .admin-panel .form-add-new {
    padding: 25px 20px;
  }
}

/* PÁGINA COMPROBANTE */
.comprobante.page,
.comprobante.section {
  text-align: center;
  background-color: #fafafa;
}
@media (min-width: 992px) {
  .comprobante.section .container {
    padding: calc(var(--padding-container-y) / 1.5) calc(var(--padding-container-x));
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background-color: white;
  }
}
.comprobante.section .section-header {
  margin-bottom: 20px;
}
.comprobante.section.has-profiles .section-header {
  margin-bottom: 40px;
}
.comprobante.section .section-header .check-image svg {
  width: 120px;
  height: 120px;
  margin-bottom: 30px;
}
.comprobante.section.has-profiles .section-header .check-image svg {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}
.comprobante.section .section-header .check-image svg rect {
  fill: var(--color-alert-green);
}
.comprobante.section .section-header .check-image svg polyline {
  stroke: var(--color-alert-green)!important;
}
.comprobante.section .section-header .section-title {
  font-size: 28px;
  color: black;
}
.comprobante.section.has-profiles .section-header .section-title {
  margin-bottom: 10px;
}
@media (max-width: 992px) {
  .comprobante.section .section-header .check-image svg {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
  }
  .comprobante.section .section-header .section-title {
    font-size: 24px;
  }
}

/* COMPROBANTE FORMULARIO */
.comprobante.section .section-form {
  max-width: var(--max-width-container-ultra-narrow);
  margin: 0 auto;
}
.comprobante.section .section-form legend {
  color: var(--color-text);
  font-family: var(--font-secondary);
}
.comprobante.section .section-form .form-fieldset-questions label {
  background-color: #ffffff;
  color: var(--color-text);
  border: 1px solid var(--color-admin-area-border);
  transition: border-color var(--transition-duration), color var(--transition-duration), background-color var(--transition-duration);
}
.comprobante.section .section-form .form-fieldset-questions label:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: white;
}

/* PÁGINAS POLÍTICAS LEGALES */
.politica-legal .section .section-header {
  text-align: left;
  margin-bottom: 40px;
}
.politica-legal .section .section-header h2 {
  font-size: 24px;
}
.politica-legal p,
.politica-legal span,
.politica-legal a,
.politica-legal li {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  font-size: 16px;
}

/* MODALES */
.modal {
  z-index: 999;
}
.modal-backdrop {
  z-index: 998;
}

/* MODAL + FORM PROFILE FORM */
.profile-modal .modal-dialog .modal-content {
  padding: 20px 20px 10px 20px;
}
.profile-modal .profile-form .form-inputs {
  display: flex;
  flex-direction: column;
}
.profile-modal .profile-form .form-inputs .form-legend {
  color: black;
  font-size: 24px;
  font-family: var(--font-primary-bold);
  margin-bottom: 0px;
}
.profile-modal .profile-form .form-inputs .form-legend .form-title {
  margin-bottom: 0px;
}
.profile-modal .profile-form .form-inputs .form-legend .form-text {
  text-align: center;
  font-size: 14px;
}
.profile-modal .profile-form .form-inputs .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-modal .profile-form .form-inputs .form-group .button {
  border-radius: 5px;
  padding: 12px 20px;
  background-color: #eeeeee;
  border: 1px solid #dddddd;
  font-size: 16px;
}
.profile-modal .profile-form .form-inputs .form-group .button:hover {
  background-color: #dddddd;
}

/* MODAL CONFIGURACIÓN COOKIES */
#PopCookies * {
  font-family: var(--font-primary);
  font-size: 14px;
  color: black;
}
#PopCookies .modal-content {
  background-color: white;
  padding: 30px;
}
#PopCookies .modal-header {
  border-bottom: none;
  padding: 0;
  margin-bottom: 20px;
}
#PopCookies .modal-title {
  color: #000000;
  font-size: 20px;
}
#PopCookies .modal-body {
  padding: 0;
  margin-bottom: 20px;
}
#PopCookies .modal-body span,
#PopCookies .modal-body a {
  color: var(--color-primary);
  font-family: var(--font-primary);
  cursor: pointer;
}
#PopCookies #textoPopCookiesShow h5 {
  display: none;
}
#PopCookies #textoPopCookiesShow label {
  display: flex;
  align-items: center;
}
#PopCookies #textoPopCookiesShow label strong {
  font-size: 16px;
}
#PopCookies #textoPopCookiesShow label input {
  accent-color: var(--color-primary);
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin-right: 8px;
}
#PopCookies #textoPopCookiesShow small {
  color: #666666;
  display: block;
  font-family: var(--font-primary);
  font-size: 14px;
  margin-left: 26px;
  margin-bottom: 10px;
}
#PopCookies #textoPopCookiesShow .modal-footer {
  margin-top: 30px;
}
#PopCookies .modal-footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  border-top: none;
  padding: 0;
}
#PopCookies .modal-footer .btn {
  width: 100%;
  background-color: #F0F0F0;
  border: 0;
  margin: 0;
  border-radius: 4px;
  padding: 10px;
  text-transform: uppercase;
}

/* CONTACTO */
/* Esta página no lleva scroll horizontal ni Lenis, así que el documento
   recupera su scroll propio: en una ventana alta ocupa una pantalla exacta y en
   una baja se puede bajar, en vez de quedarse el formulario fuera de alcance. */
body.contact {
  height: auto;
  max-height: none;
  overflow-y: visible;
}
/* Sin scroll horizontal, .h-wrap no necesita ser una fila max-content */
body.contact .h-wrap {
  display: block;
  width: 100%;
  min-width: 0;
}
/* 100% y no 100vw: con barra de scroll, 100vw se pasa de ancho */
.contacto {
  width: 100%;
}
@media (max-width: 992px) {
  .contacto {
    padding: calc(var(--padding-container-y) - 35px) calc(var(--padding-container-x)) calc(var(--padding-container-y)) var(--padding-container-xl);
  }
}
/* Dos bandas horizontales a todo el ancho: el formulario arriba y la imagen
   debajo. La línea inferior cierra la página. */
.contacto .container {
  display: grid;
  /* minmax(0,...) y no 1fr a secas: si no, el track no baja del min-content de
     su contenido (el desplegable de prefijo) y se lleva la columna por delante */
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: calc(var(--padding-container-y) / 2) 0;
  border-bottom: 1px solid var(--color-primary);
}
/* La banda del formulario se divide en tres columnas. Las laterales solo
   reservan espacio, así que son tracks vacíos: no hace falta ningún elemento.
   Miden lo mismo que el panel .navi-nav, de modo que la izquierda libera la
   franja que este ocupa y la derecha compensa ese hueco, dejando la columna
   central centrada en pantalla. */
.contacto .contacto-content {
  display: grid;
  grid-template-columns: var(--navi-nav-width) minmax(0, 1fr) var(--navi-nav-width);
}
.contacto .contacto-logo {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.contacto .contacto-logo svg {
  height: 100px;
  width: auto;
  fill: var(--color-primary);
}
/* El bloque de título + formulario ocupa la columna central y se centra en el
   espacio que sobra */
.contacto .contacto-main {
  grid-column: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(var(--padding-container-y) / 2);
}
.contacto .contacto-title {
  font-size: 36px;
  font-family: var(--font-primary-black);
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 10px;
}
.contacto .contacto-text {
  text-align: justify;
  line-height: 1.4;
  margin-bottom: 40px;
}
.contacto .contacto-image {
  background-size: cover;
  background-position: center center;
  /* Alto propio: apilada ya no puede heredarlo de una fila a media pantalla */
  height: 600px;
}

/* CONTACTO: FORMULARIO
   Mismo componente que el resto de la web (php/formulario.php), con la piel de
   esta página: campos con línea inferior en vez de caja, sobre fondo claro. */
.contacto .form .form-inputs {
  gap: 20px 40px;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .contacto .form .form-inputs {
    grid-template-areas: 'nombre nombre' 'email telefono' 'mensaje mensaje';
  }
}
/* flex para que el salto de línea del PHP no deje un hueco antes del asterisco */
.contacto .form .input-box label {
  display: flex;
  color: var(--color-primary);
  margin-bottom: 0px;
  font-size: 14px;
}
/* El asterisco lo pone el propio campo: así marca lo que de verdad es obligatorio */
.contacto .form .input-box:has(input:required) label::after,
.contacto .form .input-box:has(textarea:required) label::after {
  content: '*';
}
.contacto .form .input-box input,
.contacto .form .input-box textarea {
  background-color: transparent;
  color: var(--color-text);
  border: 0;
  border-bottom: 1px solid var(--color-primary);
  border-radius: 0;
  padding: 4px 0;
}
/* Una línea, como el resto de campos: el texto largo sigue haciendo scroll pero
   sin barra a la vista, que rompería la línea del diseño */
.contacto .form .input-box textarea {
  height: 40px;
  min-height: 40px;
  scrollbar-width: none;
}
.contacto .form .input-box textarea::-webkit-scrollbar {
  display: none;
}
.contacto .form .input-box input:focus,
.contacto .form .input-box textarea:focus {
  outline: 0;
}
/* El desplegable de prefijo telefónico hereda el mismo tratamiento */
.contacto .form .input-box .iti__selected-dial-code,
.contacto .form .input-box .iti {
  background-color: transparent;
  color: var(--color-text);
}
.contacto .form .input-box .iti__arrow {
  border-right-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.contacto .form .form-policies {
  margin-bottom: 30px;
}
.contacto .form .form-policies .checkbox input[type='checkbox'] {
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  margin-top: 4px;
  margin-right: 12px;
}
.contacto .form .form-policies .checkbox input[type='checkbox']::before {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.contacto .form .form-policies .checkbox label {
  color: var(--color-text);
}
.contacto .form .button-submit {
  background-color: var(--color-list-bg-light);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  letter-spacing: 6px;
  padding: 10px 40px;
  cursor: pointer;
}
.contacto .form .button-submit:hover {
  background-color: var(--color-primary);
  color: white;
}


/* ============================================================
   MÓVIL Y TABLET: NAVEGACIÓN VERTICAL
   Por debajo de 992px se abandona el scroll horizontal: GSAP no se inicializa
   y text-columns.js no ensancha nada (mismo corte en js/gsap.js y en
   js/text-columns.js). Las secciones se apilan y la página se recorre con el
   scroll normal del navegador.
   ============================================================ */
@media (max-width: 992px) {

  /* El documento vuelve a hacer scroll por sí solo: en escritorio el alto está
     bloqueado a 100dvh y quien mueve la página es Lenis. */
  body {
    height: auto;
    max-height: none;
    overflow-y: visible;
  }
  body .h-wrap {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* Las secciones dejan de estar limitadas al alto de la ventana */
  .section.padding-scroll {
    max-height: none;
    overflow-y: visible;
    padding: 0;
  }
  .verticard.section.vertical .container {
    width: 100%;
    max-width: 100%;
  }
  .verticard.section.vertical .container > *,
  .verticard.section.vertical .container > article > * {
    height: auto;
    width: 100%;
    aspect-ratio: auto;
    padding-left: var(--padding-container-xl);
  }
  .verticard.section.vertical .container > *:not(.section-image) {
    padding-top: 15px;
    padding-right: var(--padding-container-x);
    padding-bottom: var(--padding-container-y);
  }
  .proyecto .verticard.section.vertical .container > *:not(.section-image),
  .verticard.section.vertical .container > article > *:not(.section-image),
  .proyecto .verticard.section.vertical .container > .section-header {
    padding: calc(var(--padding-container-y) / 2) var(--padding-container-x) var(--padding-container-y) var(--padding-container-xl);
    padding-left: var(--padding-container-xl);
  }
  .verticard.section.vertical .container .section-image {
    /*aspect-ratio: 1 / 1;*/
  }
  .verticard.section.vertical .container .section-image:has(+ .section-image) {
    margin-right: 0;
  }

  /* Las dos mitades de la ficha se apilan a ancho completo */
  .proyecto .proyecto-info.verticard.section.vertical,
  .proyecto .proyecto-info .container > .section-header,
  .proyecto .proyecto-info .container > .section-image {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
  .proyecto .proyecto-info .container > .section-header > * {
    max-width: none;
  }
  /* Apilado no hay laterales que repartir: el hueco de centrado sobra */
  .proyecto .proyecto-info .container > .section-spacer {
    display: none;
  }
  .proyecto .proyecto-info .container > .section-image .owl-carousel {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }

  /* El texto se lee en una sola columna y con el alto que necesite */
  .text-columns {
    column-width: auto;
    column-count: 1;
    height: auto;
  }
  .section-header:has(> .text-columns) .section-title {
    max-width: none;
  }

  /* El título de sección deja de ir rotado en una franja vertical */
  .section.section-stripe,
  .section-stripe:has( + .section) {
    width: 100%;
    padding: 0;
  }
  .section.section-stripe .container {
    padding: 25px var(--padding-container-x) 0 var(--padding-container-xl);
  }
  .section.section-stripe .container .section-header {
    width: 100%;
  }
  .section-stripe + .section {
    padding-left: 0;
  }
  .main-title .section-header {
    height: auto;
  }
  /* Sin scroll horizontal el título no tiene que quedarse quieto: vuelve al
     flujo, si no se queda clavado arriba y además no ocupa sitio en la franja */
  .main-title .section-header h1 {
    position: static;
    transform: none;
    display: block;
  }

  /* La franja lateral de proyectos deja de reservar el hueco del panel */
  .proyectos.page .section.section-stripe,
  .estudio.page .section.section-stripe,
  .proyecto.page .section.section-stripe {
    width: 100%;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* Tarjetas de home y prensa, apiladas */
  .proyectos.page .proyectos,
  .prensa .noticias {
    width: 100%;
  }
  /* Las filas se deshacen: una tarjeta por fila y sin alto de pantalla */
  .proyectos.page .proyectos .container .proyectos-row {
    flex-direction: column;
    gap: 20px;
    height: auto;
  }
  /* A una columna sólo se muestra la primera imagen, la que lleva el título */
  .proyectos.page .proyectos .container .proyectos-row .proyecto-card:not(:first-child) {
    display: none;
  }
  .proyectos.page .proyectos .container,
  .prensa .noticias .container {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: 20px;
    padding: 20px var(--padding-container-x) var(--padding-container-y) var(--padding-container-xl);
  }
  .proyectos.page .proyectos .container .proyecto-card,
  .prensa .noticias .container .noticia-card {
    height: auto;
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 3 / 4;
    padding: 40px;
  }
  /* En táctil no hay hover: el título va siempre visible */
  .proyectos.page .proyectos .container .proyecto-card .section-header,
  .prensa .noticias .container .noticia-card .section-header {
    opacity: 1;
  }

  /* La galería de la ficha se ajusta a su caja, no al alto de la ventana */
  .proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer,
  .proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage,
  .proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item,
  .proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure,
  .proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a,
  .proyecto .proyecto-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a img,
  .noticia .noticia-info .section-image .owl-carousel .owl-stage-outer,
  .noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage,
  .noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item,
  .noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure,
  .noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a,
  .noticia .noticia-info .section-image .owl-carousel .owl-stage-outer .owl-stage .owl-item figure a img {
    max-height: none!important;
  }
}

/* CONTACTO: ADAPTACIÓN */
@media (max-width: 1200px) {
  .contacto .contacto-title {
    font-size: 44px;
  }
  .contacto .contacto-logo svg {
    height: 80px;
  }
}
@media (max-width: 992px) {
  /* Igual que el resto de la web en móvil: una columna y scroll vertical */
  .contacto .container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--padding-container-y);
    padding-bottom: var(--padding-container-y);
    padding-top: 0;
  }
  /* Sin franjas laterales: el formulario ocupa todo el ancho */
  .contacto .contacto-content {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .contacto .contacto-main {
    grid-column: auto;
  }
  .contacto .contacto-logo {
    padding: 20px 0 40px;
  }
  .contacto .contacto-logo svg {
    height: 64px;
  }
  .contacto .contacto-title {
    font-size: 28px;
    font-family: var(--font-primary-bold);
    margin-bottom: 30px;
  }
  .contacto .contacto-text {
    text-align: left;
  }
  .contacto .contacto-image {
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .contacto .form .form-inputs {
    grid-template-areas: 'nombre' 'email' 'telefono' 'mensaje';
  }
  .contacto .form .submits > div:has(.button-submit) {
    justify-content: stretch;
  }
  .contacto .form .button-submit {
    width: 100%;
    padding: 16px 20px;
  }
}