/* ==========================================================================
   Mobioffice — Global styles
   Structure:
   1.  Tokens
   2.  Reset & base
   3.  Layout helpers
   4.  Typography helpers
   5.  Buttons & links
   6.  Placeholder images
   7.  Navbar
   8.  Footer
   9.  Toast
   10. Home sections
   11. Page hero / breadcrumb
   12. Nosotros
   13. Proyectos
   14. Servicios
   15. Blog
   16. Contacto
   ========================================================================== */

/* Inter alojada en el sitio y no en Google Fonts: pedirla a Google eran dos
   dominios externos (conexion + CSS + archivo) antes de poder pintar, ~1 s en
   un celular con 4G. Variable: un solo archivo trae los pesos 300 a 800. El
   latino basico (48 KB) cubre todo el espanol; el extendido solo se baja si
   aparece un caracter que lo necesite. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Urbanist para los títulos (Notas Web 2: "tipo de letra"; elegida el 30/09
   entre cinco opciones). Es una geométrica de o redondas, como el logo. Se
   aloja igual que Inter: variable, 300 a 700, 28 KB el latino básico. */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens ------------------------------------------------------------- */

:root {
  --color-dark:       #111111;
  --color-dark-alt:   #1A1A1A;
  --color-dark-card:  #1E1E1E;
  /* Verde lima: texto y detalles sobre oscuro (10.10:1 sobre #111). Con
     texto blanco encima no se lee (1.87:1), asi que el boton principal va en
     un lima mas oscuro (#3F9A1A, 3.59:1, en .btn--green). Antes era #5A9B3E,
     el mismo tono pero mas apagado. */
  --color-green:      #7ED321;
  /* El lima oscurecido: fondos chicos con texto blanco encima y texto verde
     sobre claro (4.98:1 en los dos casos). */
  --color-green-deep: #2F8010;
  --color-white:      #FFFFFF;
  --color-gray:       #9CA3AF;
  --color-gray-light: #F5F5F5;
  --color-border:     rgba(255, 255, 255, 0.1);

  /* Títulos en Urbanist, la geométrica más cercana al logo (o redondas, f
     alta y angosta). El texto corrido sigue en Inter, que lee mejor en
     párrafos largos. Antes todo iba en Inter. */
  --font-display: 'Urbanist', 'Inter', sans-serif;
  /* Urbanist es más angosta que Inter: con el -0.02em que llevaba Inter los
     titulares se apretaban hasta pegar palabras. */
  --tracking-display: -0.005em;
  --font-body:    'Inter', sans-serif;

  --radius-pill: 999px;
  --transition:  0.25s ease;

  --container: 1200px;
  --gutter: clamp(1rem, 5vw, 4rem);

  --navbar-height: 76px;
  --topbar-height: 36px;
  /* Lo que hay que descontar para que el contenido no quede bajo el
     encabezado fijo. En movil la franja se oculta y vale solo el navbar. */
  --header-height: calc(var(--topbar-height) + var(--navbar-height));
}

/* 2. Reset & base ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* No `scroll-behavior: smooth`: an animated fragment scroll gets cancelled
     by the reflow that happens when the web fonts finish loading, which left
     "+ Ver productos" and the Productos/Ambientes nav links doing nothing.
     Instant jumps are reliable; scroll-padding keeps the navbar clear. */
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-white);
  background-color: var(--color-dark);
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-border);
}

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 1200;
  padding: 0.75rem 1.25rem;
  background: var(--color-green-deep);
  color: var(--color-white);
  font-size: 0.9rem;
}

.skip-link:focus {
  top: 0.75rem;
}

/* 3. Layout helpers ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: 1440px;
}

/* El aire es la mitad del efecto "premium": Andreu World, Alea y Fursys
   respiran mucho más que la competencia local. */
.section {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.section--tight {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

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

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

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

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

/* Main content needs to clear the fixed navbar, except on full-bleed heroes */
.page-main {
  padding-top: var(--header-height);
}

.page-main--flush {
  padding-top: 0;
}

/* 4. Typography helpers -------------------------------------------------- */

.eyebrow {
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* Revisión del 03/10: "el tipo de letra del Home está bueno, en las demás
   secciones agrandar o engrosar". Es la misma Urbanist del hero, pero el 300
   que luce a 96px se ve flaco a 40-50px: los títulos de sección y de portada
   suben a 500 y un escalón de tamaño. El hero del Home queda igual. */
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.15rem, 4.8vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
}

/* Used inside half-width columns */
.display-title {
  font-family: var(--font-display);
  /* 500: vive en columnas angostas y a 2rem el 300 se desvanece */
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.12;
  /* Last-resort break so a long Spanish word can never spill out of a column */
  overflow-wrap: break-word;
}

.body-text {
  font-size: clamp(1rem, 1.3vw, 1.075rem);
  line-height: 1.8;
  color: var(--color-gray);
}

.section--light .body-text,
.section--gray .body-text {
  color: #4B5563;
}

.section-head {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.section-head hr {
  margin-top: 1.5rem;
}

.section--light .section-head hr,
.section--gray .section-head hr {
  background: rgba(17, 17, 17, 0.12);
}

/* Vertical rotated label (used in Servicio teaser & video section) */
.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray);
  white-space: nowrap;
}

/* 5. Buttons & links ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--outline-white {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

.btn--outline-white:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}

.btn--outline-dark {
  border-color: rgba(17, 17, 17, 0.35);
  color: var(--color-dark);
}

.btn--outline-dark:hover {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn--dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn--dark:hover {
  background: var(--color-green-deep);
  border-color: var(--color-green-deep);
}

.btn--green {
  background: #3F9A1A;
  border-color: #3F9A1A;
  color: var(--color-white);
}

.btn--green:hover {
  background: #4CAF26;
  border-color: #4CAF26;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Inline green text link with arrow */
.link-green {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-green);
}

.link-green:hover {
  color: var(--color-white);
}

.section--light .link-green:hover,
.section--gray .link-green:hover {
  color: var(--color-dark);
}

.link-green span[aria-hidden] {
  transition: transform var(--transition);
}

.link-green:hover span[aria-hidden] {
  transform: translateX(4px);
}

/* 6. Placeholder images -------------------------------------------------- */

.placeholder-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background: var(--color-dark-card);
  color: var(--color-gray);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.placeholder-img::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.placeholder-img__label {
  padding: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.placeholder-img--light {
  background: var(--color-gray-light);
  color: #6B7280;
}

.placeholder-img--light::before {
  border-color: rgba(17, 17, 17, 0.12);
}

.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* 7. Navbar -------------------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition);
}

/* El fondo translucido con blur va en una capa aparte y no en el .navbar:
   backdrop-filter convierte a su elemento en el marco de los position:fixed
   de adentro, y el menu movil (que vive dentro del navbar) quedaba encerrado
   en los 68px del header al abrirlo con la pagina scrolleada. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(17, 17, 17, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity var(--transition);
  pointer-events: none;
}

.navbar.scrolled {
  background: transparent;
}

.navbar.scrolled::before {
  opacity: 1;
}

/* Con el menu movil abierto el header va opaco: translucido se veia la
   pagina de abajo pasando por detras del logo. */
.navbar.menu-open {
  background: var(--color-dark);
}

.navbar.menu-open::before {
  opacity: 0;
}

.navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: 1440px;
  height: var(--navbar-height);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Logo oficial (entregado el 26/09/2026), en blanco sobre transparente */
.navbar__logo {
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.navbar__logo img {
  width: auto;
  height: 38px;
}

.navbar__logo:hover {
  opacity: 0.75;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}

.navbar__links a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-white);
  white-space: nowrap;
}

.navbar__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--color-green);
  transition: width var(--transition);
}

.navbar__links a:hover {
  color: var(--color-green);
}

.navbar__links a:hover::after,
.navbar__links a.is-active::after {
  width: 100%;
}

.navbar__links a.is-active {
  color: var(--color-green);
}

.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--color-white);
  transition: transform var(--transition), opacity var(--transition);
}

.navbar__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 8. Footer --------------------------------------------------------------
   Modelo Format (el competidor local mas cercano al tier premium): arriba un
   cierre de marca con la frase y el boton, al medio columnas cortas, abajo
   el copyright, lo legal y las redes en una sola linea. */

.footer {
  background: var(--color-dark);
  border-top: 1px solid var(--color-border);
  color: var(--color-white);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--color-border);
}

.footer__logo {
  display: inline-block;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.footer__logo img {
  width: auto;
  height: 48px;
}

/* Titular ligero y grande, como los del sitio: es lo ultimo que se lee */
.footer__claim {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

.footer__cta {
  flex-shrink: 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.footer__title {
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* En escritorio el <summary> se ve y se comporta como un titulo mas */
.footer__group > summary {
  display: block;
  list-style: none;
  cursor: default;
}

.footer__group > summary::-webkit-details-marker {
  display: none;
}

.footer__list li + li,
.footer__contact li + li {
  margin-top: 0.7rem;
}

.footer__list a,
.footer__contact a,
.footer__bottom a {
  font-size: 0.9rem;
  color: var(--color-gray);
  transition: color var(--transition);
}

.footer__list a:hover,
.footer__contact a:hover,
.footer__bottom a:hover {
  color: var(--color-green);
}

.footer__address {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-gray);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-gray);
}

.footer__bottom a {
  font-size: inherit;
}

.footer__social {
  display: flex;
  gap: 0.6rem;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-gray);
  transition: color var(--transition), border-color var(--transition);
}

.footer__social a:hover {
  color: var(--color-green);
  border-color: var(--color-green);
}

.footer__social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* 9. Toast --------------------------------------------------------------- */

.toast-stack {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(360px, calc(100vw - 3rem));
}

.toast {
  padding: 1rem 1.25rem;
  border-left: 3px solid;
  background: var(--color-dark-card);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  color: var(--color-white);
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--success { border-left-color: var(--color-green); }
.toast--error   { border-left-color: #D1483C; }

/* 10. Home sections ------------------------------------------------------ */

/* 10.1 Hero */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-height);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  /* Sin colchon ni parallax: el video ya se mueve solo, y la capa 20% mas
     alta que pedia el parallax obligaba al video a recortar un cuarto del
     ancho para llenarla. Quadrifoglio tampoco lo usa sobre video. */
  inset: 0;
  background-color: var(--color-dark-alt);
  /* El primer cuadro del video: es lo que se ve si el video no carga */
  background-image: url('../videos/hero-home-poster.webp');
  background-size: cover;
  background-position: center;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
}

/* Wider than the standard container so the headline keeps its two-line
   break at the largest clamp size, and aligns with the navbar logo. */
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 300;
  /* Full spec size: Inter is far narrower than Syne was, so the copy keeps its
     intended two-line break (<br>) even at 6rem. */
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}

.hero__sub {
  max-width: 48ch;
  margin-top: 1.75rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.hero__content .btn {
  margin-top: 2.5rem;
}

/* 10.2 Intro */
.intro {
  text-align: center;
}

.intro__text {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.8;
}

.intro .link-green {
  margin-top: 2.5rem;
}

/* 10.3 Categorías */
/* Hairlines come from the cards themselves, not from a grid background, so
   the empty cells of the last row stay dark instead of showing a gray block. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.cat-card {
  position: relative;
  display: block;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-dark);
}

.cat-card__img {
  overflow: hidden;
}

.cat-card__img > * {
  transition: transform 0.5s ease;
}

.cat-card:hover .cat-card__img > * {
  transform: scale(1.03);
}

/* Format e Interstuhl ponen el nombre DENTRO de la foto con un degradado
   encima, no en una barra aparte debajo. Es lo que separa una tarjeta de
   catálogo de una tarjeta de plantilla. */
.cat-card__label {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem 1.5rem;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.8) 0%,
              rgba(0, 0, 0, 0.45) 50%,
              rgba(0, 0, 0, 0) 100%);
}

.cat-card__line {
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 1px;
  background: var(--color-gray);
  transition: background-color var(--transition), width var(--transition);
}

.cat-card:hover .cat-card__line {
  width: 48px;
  background: var(--color-green);
}

.cat-card__label h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.cat-card:hover .cat-card__label h3 {
  color: var(--color-green);
}

.cat-grid + .link-green {
  margin-top: 2.5rem;
}

/* 10.4 Ambientes */
/* fr instead of % everywhere below: percentage tracks resolve against the
   container and then the gap is added on top, which overflows the grid. */
.ambientes__layout {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.ambiente-list {
  border-top: 1px solid var(--color-border);
}

.ambiente-item {
  display: block;
  width: 100%;
  padding-block: clamp(0.75rem, 1.6vw, 1.1rem);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  text-align: left;
  color: var(--color-gray);
  transition: color var(--transition), font-size var(--transition);
}

.ambiente-item:hover {
  color: var(--color-white);
}

.ambiente-item.active {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-green);
}

.ambientes__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ambiente-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.ambiente-photo.active {
  opacity: 1;
  visibility: visible;
}

.ambientes__footer {
  max-width: 640px;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.ambientes__footer p {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.8;
  color: var(--color-gray);
}

.ambientes__footer .link-green {
  margin-top: 1.5rem;
}

/* 10.5 Servicio teaser */
.servicio-teaser__layout {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 45fr) minmax(0, 45fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.servicio-teaser__label {
  display: flex;
  justify-content: center;
}

.servicio-teaser__media {
  position: relative;
}

.servicio-teaser__badge {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: clamp(136px, 17vw, 186px);
  height: clamp(136px, 17vw, 186px);
  border-radius: 50%;
  background: var(--color-dark);
  display: grid;
  place-items: center;
}

.servicio-teaser__badge svg {
  width: 100%;
  height: 100%;
}

.servicio-teaser__badge text {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--color-gray);
}

/* El logo al centro (revisión del 03/10). El PNG es blanco, así que va
   sobre un disco oscuro que no gira: el texto da vueltas alrededor. */
.servicio-teaser__badge-logo {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-dark);
}

.servicio-teaser__badge-logo img {
  width: 74%;
  height: auto;
}

.servicio-teaser__copy p {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.8;
  color: var(--color-gray);
}

.servicio-teaser__copy .btn {
  margin-top: 2.25rem;
}

/* 10.6 Lo más buscado */
.products-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.product-card__media {
  position: relative;
  background: var(--color-gray-light);
}

.product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-green-deep);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}

.product-card__name {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-dark);
}

.product-card--pending .product-card__name {
  color: #9CA3AF;
}

/* 10.7 Blog teaser */
.blog-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.blog-teaser__side {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-content: start;
}

.post-card {
  display: block;
  color: var(--color-dark);
}

.post-card__media {
  overflow: hidden;
}

.post-card__media > * {
  transition: transform 0.5s ease;
}

.post-card:hover .post-card__media > * {
  transform: scale(1.03);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-green);
}

.post-card__meta .post-card__date {
  color: var(--color-gray);
}

.post-card__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.25;
}

.post-card--featured .post-card__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.post-card:hover .post-card__title {
  color: var(--color-green);
}

.post-card--dark {
  color: var(--color-white);
}

.post-card--dark .post-card__date {
  color: var(--color-gray);
}

/* 10.8 Marcas */
.brands {
  text-align: center;
}

.brands__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.brand-item {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #6B7280;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--transition), opacity var(--transition), color var(--transition);
}

.brand-item:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--color-dark);
}

/* 11. Page hero / breadcrumb --------------------------------------------- */

.page-hero {
  display: flex;
  align-items: center;
  min-height: 30vh;
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-border);
}

.page-hero--tall {
  min-height: 52vh;
}

.breadcrumb {
  margin-bottom: 1.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--color-gray);
}

.breadcrumb a:hover {
  color: var(--color-green);
}

.breadcrumb span {
  color: var(--color-white);
}

.page-hero__headline {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 5.25rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}

.page-hero__desc {
  max-width: 62ch;
  margin-top: 1.75rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.8;
  color: var(--color-gray);
}

/* 12. Nosotros ----------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.two-col__body p + p {
  margin-top: 1.5rem;
}

.statement {
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.6;
  text-align: center;
  color: var(--color-white);
}

.video-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 90fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.video-section__label {
  display: flex;
  justify-content: center;
}

.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.video-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(72px, 9vw, 104px);
  height: clamp(72px, 9vw, 104px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.35);
  transition: background-color var(--transition), border-color var(--transition);
}

.video-thumb:hover .video-thumb__play {
  background: var(--color-green-deep);
  border-color: var(--color-green-deep);
}

.video-thumb__play svg {
  width: 22px;
  height: 22px;
  margin-left: 4px;
  fill: var(--color-white);
}

/* Video modal */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, 0.88);
}

.video-modal.is-open {
  display: flex;
}

.video-modal__dialog {
  position: relative;
  width: min(960px, 100%);
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-dark-card);
}

.video-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__pending {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-gray);
}

.video-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.video-modal__close:hover {
  color: var(--color-green);
}

/* 13. Proyectos ---------------------------------------------------------- */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-dark-card);
}

.project-card__media > * {
  transition: transform 0.6s ease;
}

.project-card:hover .project-card__media > * {
  transform: scale(1.04);
}

.project-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  /* Antes vivia en opacity:0 y el nombre del proyecto solo aparecia al pasar
     el mouse — invisible en tactil. Format lo muestra siempre y refuerza el
     velo en hover. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 65%);
  transition: background var(--transition);
}

.project-card:hover .project-card__overlay,
.project-card:focus-visible .project-card__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.15) 75%);
}

.project-card:hover .project-card__overlay,
.project-card:focus-visible .project-card__overlay {
  opacity: 1;
}

.project-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--color-white);
}

.project-card__cta {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
}

.project-card--pending {
  cursor: default;
}

.project-card--pending .project-card__overlay {
  opacity: 1;
  background: rgba(17, 17, 17, 0.55);
  align-items: center;
  justify-content: center;
}

/* En toda tarjeta de proyecto el nombre y las etiquetas ya van encima de la
   foto: el rotulo del placeholder se montaba sobre ellos (en celular se
   cruzaba con "Financiero / Oficinas"). */
.project-card .placeholder-img__label {
  display: none;
}

.project-card--pending .project-card__name {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* Project detail */
.project-detail__hero {
  aspect-ratio: 21 / 9;
  min-height: 320px;
}

.project-detail__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.project-meta {
  border-top: 1px solid var(--color-border);
}

.project-meta__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.project-meta__label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--color-gray);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
}

.cta-band h2 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

/* 14. Servicios ---------------------------------------------------------- */

.service-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.service-hero__headline {
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5.75rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
}

.service-hero hr {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.value-prop__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.value-prop__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.process-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.process-step {
  position: relative;
  padding-top: 4rem;
}

/* Horizontal connector line across the top of the timeline */
.process-step::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

.process-step:first-child::before { left: 24px; }
.process-step:last-child::before  { right: calc(100% - 24px); }

.process-step__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-white);
  transition: color var(--transition), border-color var(--transition);
}

.process-step__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  transition: color var(--transition);
}

.process-step__desc {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-gray);
  transition: color var(--transition);
}

.process-step:hover .process-step__num,
.process-step:hover .process-step__name,
.process-step:hover .process-step__desc {
  color: var(--color-green);
}

.process-step:hover .process-step__num {
  border-color: var(--color-green);
}

/* 15. Blog --------------------------------------------------------------- */

.blog-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 500px;
  overflow: hidden;
}

.blog-feature__bg {
  position: absolute;
  inset: 0;
  height: 100%;
  /* Keep the "foto pendiente" caption clear of the headline */
  align-items: flex-start;
  padding-top: 1.25rem;
}

.blog-feature__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25));
}

.blog-feature__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}

.blog-feature__meta {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* Notas Web v4: los títulos reales son largos (hasta 75 caracteres); a
   4.75rem y 18ch el del destacado ocupaba cinco líneas. */
.blog-feature__title {
  max-width: 24ch;
  margin-block: 1.25rem 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}

.blog-index__title {
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.blog-index li {
  border-top: 1px solid var(--color-border);
}

.blog-index li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.blog-index a {
  display: block;
  padding-block: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-gray);
}

.blog-index a:hover {
  color: var(--color-white);
}

.blog-index .is-active {
  border-left: 2px solid var(--color-green);
}

.blog-index .is-active a {
  padding-left: 0.85rem;
  color: var(--color-white);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Article page */
.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.article__body {
  max-width: 68ch;
}

.article__body p,
.article__body ul {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-gray);
}

.article__body h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  color: var(--color-white);
}

.article__body ul li {
  position: relative;
  padding-left: 1.25rem;
}

.article__body ul li + li {
  margin-top: 0.75rem;
}

.article__body ul li::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--color-green);
}

.article__note {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--color-green);
  background: var(--color-dark-alt);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-gray);
}

.article__sidebar {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.sidebar-block + .sidebar-block {
  margin-top: 2.5rem;
}

.sidebar-block__title {
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.sidebar-list li + li {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.sidebar-list a {
  font-size: 0.9rem;
  line-height: 1.5;
}

.sidebar-list a:hover {
  color: var(--color-green);
}

.sidebar-list a[aria-current="page"] {
  color: var(--color-green);
}

.sidebar-list .sidebar-list__date {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--color-gray);
}

/* Cierre de cada artículo: "Hablemos de tu proyecto." del texto del cliente */
.article__body .article__cta {
  margin-top: 2.5rem;
  font-size: 1.15rem;
  font-weight: 500;
}

.article__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* 16. Contacto ----------------------------------------------------------- */

/* Es el h1 de la pagina: Contacto no tenia ninguno. El peso 300 y el
   tracking lo alinean con los titulares del resto del sitio. */
.contact-call h1 {
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

.contact-call hr {
  margin-block: clamp(2rem, 4vw, 3rem);
}

.contact-phones {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.contact-phones a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}

.contact-phones a:hover {
  color: var(--color-green);
}

.contact-form__layout {
  display: grid;
  /* El formulario pesa mas que la columna de apoyo: al 50/50 quedaba medio
     ancho de pantalla vacio al lado de los campos. */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* 16.1 Columna de apoyo: que pasa despues de enviar --------------------- */

.next-steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: 0.5rem;
}

.next-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.next-step__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-green);
}

.next-step__name {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
}

.next-step__desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-gray);
}

/* 16.2 El formulario ----------------------------------------------------- */

/* En tarjeta y no suelto sobre el fondo: sin un borde que lo contenga, los
   campos flotaban y la seccion se leia a medio terminar. */
.contact-form {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--color-border);
  background: var(--color-dark-card);
}

.field-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.field-group legend {
  padding: 0;
}

/* Etiquetas visibles, no placeholders: el placeholder desaparece al escribir
   y el visitante pierde de vista que le estan pidiendo. Format tambien las
   muestra. */
.field-label {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.field-req {
  color: var(--color-green);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-white);
  transition: border-color var(--transition), background-color var(--transition);
}

.contact-form textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.6;
}

.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239CA3AF' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  /* Hace que el desplegable nativo tambien se pinte oscuro */
  color-scheme: dark;
  cursor: pointer;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-green);
  background-color: rgba(255, 255, 255, 0.07);
}

.contact-form input.has-error,
.contact-form select.has-error,
.contact-form textarea.has-error {
  border-color: #E5685A;
}

/* 16.3 Persona natural / Empresa ---------------------------------------- */

/* Pastillas en vez de radios nativos: los circulos del sistema son lo que
   mas delata a un formulario sin trabajar. El input sigue siendo un radio
   de verdad, solo que oculto, asi el teclado y el lector de pantalla no
   pierden nada. */
.segmented {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  color: var(--color-gray);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.segmented label:hover {
  color: var(--color-white);
}

.segmented input:checked + label {
  background: #3F9A1A;
  color: var(--color-white);
}

.segmented input:focus-visible + label {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

/* 16.4 Estados ----------------------------------------------------------- */

.empresa-fields[hidden] {
  display: none;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.form-error {
  margin: -0.35rem 0 0;
  font-size: 0.85rem;
  /* Aclarado respecto del rojo anterior (#D1483C): sobre la tarjeta oscura
     no llegaba al contraste minimo. */
  color: #FF8B7C;
}

.form-error[hidden] {
  display: none;
}

.contact-form button[type="submit"] {
  justify-self: start;
  margin-top: 0.25rem;
}

.form-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-gray);
}

.contact-details__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}

.contact-detail__label {
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.contact-detail p,
.contact-detail a {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
}

.contact-detail a:hover {
  color: var(--color-green);
}

/* 17. Trust & conversion components ---------------------------------------
   Added after benchmarking the sector: client proof, metrics, FAQ, project
   tags and showroom data are what the local competition leads with. */

/* 17.1 Navbar quote button */
/* 03/10: "la letra más grande, más gruesa y más blanca" */
.navbar__cta {
  flex-shrink: 0;
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #FFFFFF;
}

/* 17.2 Metrics row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.stat {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}

.stat + .stat {
  border-left: 1px solid var(--color-border);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}

.stat__value {
  font-family: var(--font-display);
  /* 300 como los titulares: a 800 quedaba como un bloque suelto del sistema
     viejo al lado de todo lo demas ya aligerado. */
  font-weight: 300;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  /* Cifras de ancho fijo: contando de 0 a 10 el "1" es mas angosto que el
     "8" y la fila entera temblaba en cada cuadro. */
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-gray);
}

/* Values the client still has to confirm are dimmed and dashed, so nobody
   mistakes a placeholder number for a real one. */
.stat--pending .stat__value {
  color: var(--color-gray);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
}

/* 17.3 Client logo band */
.clients__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* Grilla fija de logos, como Format (16 en negro sobre blanco, con "Ver
   todos"). Notas Web 2 pidió logos "más impresionantes" y preguntó "¿a
   color?": van en gris para que la franja no se lea como publicidad y toman
   su color al pasar el mouse. En táctil no hay hover, así que van a color. */
.clients--grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: 0;
}

.clients__head {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.clients__head .link-green {
  margin-top: 0.75rem;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  border-left: 1px solid rgba(17, 17, 17, 0.08);
}

.logo-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(84px, 9vw, 112px);
  padding: 1rem;
  border-right: 1px solid rgba(17, 17, 17, 0.08);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

/* Al tamaño natural como techo: los archivos chicos no se agrandan y no se pixelan */
.logo-grid img {
  width: auto;
  height: auto;
  max-width: min(150px, 85%);
  max-height: 52px;
  object-fit: contain;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .logo-grid img {
    filter: grayscale(1);
    opacity: 0.7;
  }

  .logo-grid li:hover img {
    filter: none;
    opacity: 1;
  }
}

/* Proyectos: los 74, título arriba y seis columnas */
.clients--todos {
  grid-template-columns: minmax(0, 1fr);
}

.logo-grid--todos {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 17.4 FAQ */
.faq {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--color-green);
}

/* Plus turning into a minus when the answer is open */
.faq__item summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-green);
}

.faq__item[open] summary::after {
  content: '\2013';
}

.faq__answer {
  padding-bottom: 1.5rem;
  max-width: 70ch;
  font-size: 0.975rem;
  line-height: 1.8;
  color: var(--color-gray);
}

.faq__answer a {
  color: var(--color-green);
}

.faq__answer a:hover {
  text-decoration: underline;
}

/* 17.5 Project card tags */
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.tag {
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
}

.tag--green {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* 17.6 Case study blocks (project detail) */
.case-block + .case-block {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.case-block__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-green);
}

.case-block__label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-green);
}

/* 17.7 Showroom / visit block */
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.visit__data dt {
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.visit__data dd {
  margin: 0 0 1.75rem;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.7;
  color: var(--color-white);
}

.visit__data dd:last-child {
  margin-bottom: 0;
}

.visit__data a:hover {
  color: var(--color-green);
}

/* Marks copy the client still has to confirm */
.data-pending {
  color: var(--color-gray);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
}

/* 17. Piezas nuevas (Notas web 22/09/2026) ------------------------------- */

/* Subtexto bajo el titulo de seccion. El titulo da el que, esto el porque. */
.section-sub {
  max-width: 62ch;
  margin: 1rem 0 0;
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height: 1.65;
  color: var(--color-gray);
}

.section--light .section-sub,
.section--gray .section-sub {
  color: rgba(17, 17, 17, 0.65);
}

/* El titulo "Confian en nosotros" lleva subtexto propio, asi que el aire
   que antes vivia en su margin-bottom pasa al bloque. */
.clients {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.clients .clients__title {
  margin-bottom: 0;
}

/* El proceso del home son 4 pasos, no los 5 de la pagina de Servicios. */
.process-timeline--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.servicio-teaser__copy .section-title {
  margin-bottom: 1.25rem;
}

/* 18. Soluciones (pagina Productos) -------------------------------------- */

/* Misma reja que .cat-grid: los bordes hacen de separador, sin gap. Con
   dense, la tarjeta que sigue a un panel abierto sube a llenar el hueco de su
   fila, así que abrir una solución nunca deja una tarjeta sola. */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-flow: dense;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.solution {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-dark);
}

.solution__heading {
  margin: 0;
  font: inherit;
}

.solution__summary {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.solution__summary:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: -2px;
}

.solution__media {
  display: block;
  overflow: hidden;
}

.solution__media > * {
  display: block;
  transition: transform 0.5s ease;
}

.solution:hover .solution__media > * {
  transform: scale(1.03);
}

.solution__head {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem 1.5rem;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.8) 0%,
              rgba(0, 0, 0, 0.45) 50%,
              rgba(0, 0, 0, 0) 100%);
}

.solution__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.solution:hover .cat-card__line,
.solution.is-open .cat-card__line {
  width: 48px;
  background: var(--color-green);
}

/* Más/menos dibujado con dos barras para no depender de un ícono */
.solution__toggle {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.solution__toggle::before,
.solution__toggle::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--color-gray);
  transition: transform var(--transition), background-color var(--transition);
}

.solution__toggle::after {
  transform: rotate(90deg);
}

.solution:hover .solution__toggle::before,
.solution:hover .solution__toggle::after,
.solution.is-open .solution__toggle::before,
.solution.is-open .solution__toggle::after {
  background: var(--color-green);
}

.solution.is-open .solution__toggle::after {
  transform: rotate(0deg);
}

/* El panel ocupa la fila completa debajo de la tarjeta. Dos columnas (lo que
   es y lo que incluye) para que entre en una pantalla sin desplazarse. La
   tarjeta abierta y el borde verde del panel marcan de dónde sale. */
.solution__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.75rem);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-top: 2px solid var(--color-green);
  background: var(--color-dark-alt);
  color: var(--color-gray);
}

.solution__panel[hidden] {
  display: none;
}

.solution__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-green);
}

.solution__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-white);
}

.solution__intro {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.7;
  color: var(--color-white);
}

.solution__panel p {
  line-height: 1.75;
}

.solution__products {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.solution__products strong {
  color: var(--color-white);
  font-weight: 500;
}

.solution__panel .link-green {
  margin-top: 1.75rem;
}

/* Ocho familias de producto (Auditorios desde el 30/09). Cuatro columnas dejan
   cada tarjeta a ~250px en dos filas completas. */
.products-row--portafolio {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 19. Espacios (pagina Espacios) ----------------------------------------- */

.space-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Alternar el lado de la foto evita que cinco bloques iguales se lean
   como una lista. */
.space-row--flip .space-row__media {
  order: 2;
}

.space-row__body .display-title {
  margin: 0.75rem 0 1.5rem;
}

.space-row__label {
  margin: 2rem 0 0.9rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.space-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.space-row__links a {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  color: var(--color-white);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.space-row__links a:hover,
.space-row__links a:focus-visible {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* 20. Valores (pagina Nosotros) ------------------------------------------ */

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.value-card__num {
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-green);
}

.value-card__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
}

.value-card__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-gray);
}

/* 21. Etapas del proyecto (pagina Servicios) ----------------------------- */

.stage-grid {
  display: grid;
  /* Fijas en 5: las diez etapas caen en dos filas parejas en vez de dejar
     huecos al final. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.stage {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.stage__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-green);
}

.stage__name {
  font-weight: 500;
}

/* 22. Mapa (pagina Contacto) --------------------------------------------- */

.map-embed {
  position: relative;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--color-border);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* El mapa llega en claro y en una pagina oscura quema la vista. */
  filter: grayscale(0.4) contrast(1.05);
}

/* Una nota corta bajo los telefonos de Contacto */
.contact-call__note {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--color-gray);
}

.contact-call__note a {
  color: var(--color-green);
}

/* 23. Aparicion al scroll ------------------------------------------------
   Lo unico que anima el tier premium: un desplazamiento corto y lento al
   entrar en pantalla. La clase .reveal-ready la pone reveal.js, asi que sin
   JS todo queda visible en vez de en blanco. */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 25. Entrada del hero ---------------------------------------------------
   Andreu World y Fursys asientan la foto y dejan caer el texto al cargar. Una
   vez, lento y corto. El bloque de reduced-motion del final lo desactiva. */

@keyframes mo-hero-asienta {
  from { transform: scale(1.07); }
  to   { transform: none; }
}

@keyframes mo-hero-entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero__bg {
  animation: mo-hero-asienta 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__headline,
.hero__sub,
.hero__content .btn {
  animation: mo-hero-entra 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* El escalonado es lo que lo hace leerse como una frase y no como un bloque */
.hero__headline     { animation-delay: 0.10s; }
.hero__sub          { animation-delay: 0.22s; }
.hero__content .btn { animation-delay: 0.34s; }

/* 26. Respiro a sangre ---------------------------------------------------
   El unico modulo que se sale del container. Existe para cortar la sucesion
   de "encabezado + reja": Andreu World y Fursys usan la foto a ancho completo
   como pausa entre secciones. */

.showcase {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 50vh, 540px);
  overflow: hidden;
  background: var(--color-dark-alt);
}

/* Cuando lleguen las fotos: aca va el background-image y se borra el
   .placeholder-img de adentro. */
.showcase__media {
  position: absolute;
  inset: 0;
}

.showcase__media .placeholder-img {
  height: 100%;
  /* El rotulo arriba y no centrado: centrado se cruza con la frase. Solo
     importa mientras no haya foto. */
  align-items: flex-start;
  padding-top: 1.25rem;
}

/* El velo va en el ::after del contenedor y no dentro de __media para que
   quede por encima de la foto pero por debajo del texto. */
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.78) 0%,
              rgba(0, 0, 0, 0.25) 55%,
              rgba(0, 0, 0, 0.45) 100%);
}

.showcase__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.25rem) var(--gutter);
}

.showcase__quote {
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 3.4vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}

.showcase .link-green {
  margin-top: 1.35rem;
}

/* 27. Transicion entre paginas -------------------------------------------
   Una navegacion normal deja un parpadeo en blanco entre pagina y pagina.
   Esto la funde. Son tres lineas porque el navegador hace todo el trabajo:
   captura la pagina vieja, la nueva, y las cruza.

   Degrada solo: donde no este soportado (Firefox al dia de hoy), la
   navegacion es la de siempre. No hay JavaScript de por medio. */

@view-transition {
  navigation: auto;
}

/* El cruce por defecto es rapido y se siente a corte. Un poco mas largo se
   lee como una pieza que cambia, no como una pagina que se recarga. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 28. Revelado de fotos --------------------------------------------------
   Las imagenes grandes no entran con el mismo fundido que el texto: se
   descubren de abajo hacia arriba. reveal.js les pone data-reveal="media".

   Va DESPUES del bloque 23 a proposito: comparte especificidad con la regla
   general de [data-reveal] y necesita ganarle por orden. */

.reveal-ready [data-reveal="media"] {
  /* Ni opacidad ni desplazamiento: aca la entrada es la mascara */
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-ready [data-reveal="media"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* La foto se asienta mientras la mascara la descubre. Solo donde el hijo es
   la imagen y nada mas: en .video-thumb tambien esta el boton de play y en
   .servicio-teaser__media el sello giratorio, que ademas se sale del marco a
   proposito (por eso ese bloque no lleva mascara: la recortaria). */
.reveal-ready .showcase__media > *,
.reveal-ready .space-row__media > * {
  transform: scale(1.1);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-ready .showcase__media.is-visible > *,
.reveal-ready .space-row__media.is-visible > * {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Sin recorte de entrada: la foto esta ahi desde el principio. El bloque
     general de abajo ya acorta las transiciones. */
  .reveal-ready [data-reveal="media"] {
    clip-path: none;
  }

  .reveal-ready .showcase__media > *,
  .reveal-ready .space-row__media > * {
    transform: none;
  }
}

/* Reduced motion: se ve, pero no se mueve. El bloque general de abajo ya
   acorta la transicion; esto evita ademas el desplazamiento inicial. */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    transform: none;
  }
}

/* 24. Franja utilitaria --------------------------------------------------
   Ergomatic la usa para tener telefono y WhatsApp siempre a la vista. En B2B
   el visitante suele querer hablar con alguien antes que navegar. */

.topbar {
  border-bottom: 1px solid var(--color-border);
  /* Semitransparente y no un color propio: asi al hacer scroll, cuando el
     navbar se vuelve translucido con blur, la franja lo acompana en vez de
     quedar como una barra opaca pegada arriba. */
  background: rgba(0, 0, 0, 0.35);
}

.topbar__container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;
  width: 100%;
  max-width: 1440px;
  height: var(--topbar-height);
  margin: 0 auto;
  padding-inline: var(--gutter);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-gray);
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.topbar__item:hover,
.topbar__item:focus-visible {
  color: var(--color-white);
}

.topbar__item svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Notas Web v4: el ícono de WhatsApp en su verde para que se note más; el
   texto sigue igual. */
.topbar__item[href^="https://wa.me"] svg {
  fill: #25D366;
}

.topbar__sep {
  width: 1px;
  height: 14px;
  background: var(--color-border);
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 29. Fotos y video del cliente ------------------------------------------
   Material entregado el 26/09/2026. Las fotos de soluciones y categorias son
   verticales (3:4), asi que las tarjetas pasan a vertical en vez de
   recortarlas a 4:3, que se comia casi la mitad del mueble. */

img[class*="ratio-"] {
  width: 100%;
  object-fit: cover;
}

.showcase__media > img,
.page-hero__media > img,
.blog-feature__bg > img,
.video-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.ambiente-photo {
  width: 100%;
  object-fit: cover;
}

.video-fondo {
  position: absolute;
  inset: 0;
}

/* Nueve soluciones: tres columnas las dejan en una reja de 3 x 3 cerrada.
   Con auto-fill caian cuatro por fila y la ultima quedaba sola. */
.cat-grid,
.solution-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Hero de pagina con foto o video: la misma receta del hero del Home, a
   menor altura. El titular baja al pie para no taparle el centro a la foto. */
.page-hero--media {
  position: relative;
  /* Servicios y Contacto no son .page-hero (no traen el flex): se lo da
     el modificador para que el texto baje al pie igual que en el resto. */
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 640px);
  overflow: hidden;
  border-bottom: 0;
}

.page-hero--media.page-hero--tall {
  min-height: clamp(460px, 74vh, 780px);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  animation: mo-hero-asienta 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-hero--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.8));
}

.page-hero--media > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.page-hero--media .breadcrumb,
.page-hero--media .page-hero__desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Franja solo de foto (Nosotros): sin frase no necesita el velo oscuro que
   la hace legible, y un poco mas alta para que la foto respire. */
.showcase--solo {
  min-height: clamp(320px, 62vh, 640px);
}

.showcase--solo::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 40%);
}

/* 30. Contraste en secciones claras ---------------------------------------
   Verde y gris pensados para fondo oscuro no llegan a 4.5:1 sobre blanco. */
.section--light .post-card__meta,
.section--light .link-green {
  color: var(--color-green-deep);
}

.section--light .post-card__meta .post-card__date {
  color: #6B7280;
}

/* Espaciados sueltos que antes iban como style="" en el HTML: la politica
   de seguridad (CSP) no permite estilos en linea. */
.u-mt-sm { margin-top: 1.25rem; }
.u-mt-md { margin-top: 2rem; }

/* Campo trampa del formulario (ver contact.php): fuera de pantalla, no
   display:none, porque algunos bots se saltan los campos ocultos. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.u-ml { margin-left: 1.5rem; }

/* Botón + enlace en la misma línea (Gracias y 404). En celular el enlace
   bajaba a otra línea pegado al botón: con flex y gap queda separado en
   ambos casos, y en escritorio se ve igual que antes (1.5rem al costado). */
p.u-mt-md:has(> .btn + .u-ml) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
}
p.u-mt-md:has(> .btn + .u-ml) > .u-ml { margin-left: 0; }

/* 31. Texto legal (Política de privacidad) --------------------------------
   Ancho de lectura, no de pantalla: un párrafo legal a 1200px no se lee. */
.legal {
  max-width: 70ch;
  color: var(--color-gray);
  font-size: 1rem;
  line-height: 1.8;
}

.legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-white);
}

.legal p + p {
  margin-top: 1rem;
}

.legal ul {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.legal li + li {
  margin-top: 0.4rem;
}

.legal a {
  color: var(--color-green);
}

.form-note a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 21. Notas Web 2 (28/09/2026) ------------------------------------------- */

/* Propuesta de valor del Home: la primera frase hace de titular. */
.intro__lead {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}

/* Texto de cada solución al pasar el mouse (Home y Productos). Solo con
   mouse: en táctil el primer toque ya navega o abre el panel, así que el
   texto nunca llegaría a leerse. */
.cat-card__label,
.solution__head {
  flex-wrap: wrap;
}

.cat-card__desc,
.solution__teaser {
  display: none;
  flex-basis: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .cat-card__desc,
  .solution__teaser {
    display: block;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.3s ease;
  }

  .cat-card:hover .cat-card__desc,
  .cat-card:focus-visible .cat-card__desc,
  .solution:not(.is-open) .solution__summary:hover .solution__teaser,
  .solution:not(.is-open) .solution__summary:focus-visible .solution__teaser {
    max-height: 8em;
    margin-top: 0.75rem;
    opacity: 1;
  }

  /* Con el texto a la vista el degradado sube, para que se lea sobre la foto */
  .cat-card:hover .cat-card__label,
  .solution:not(.is-open) .solution__summary:hover .solution__head {
    background: linear-gradient(to top,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(0, 0, 0, 0.7) 60%,
                rgba(0, 0, 0, 0) 100%);
  }
}

/* Abierta, el panel ya trae el mismo texto */
.solution.is-open .solution__teaser {
  display: none;
}

/* Portafolio: que responda al mouse como las tarjetas de soluciones */
.product-card__media {
  overflow: hidden;
}

.product-card__media > img {
  transition: transform 0.6s ease;
}

.product-card__name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color var(--transition);
}

.product-card__name::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: width var(--transition), background-color var(--transition);
}

.product-card:hover .product-card__media > img {
  transform: scale(1.05);
}

.product-card:hover .product-card__name {
  color: var(--color-green);
}

.product-card:hover .product-card__name::before {
  width: 36px;
}

/* Ambientes del Home: el activo iba en negrita 700 a 4rem y era el único
   titular pesado del sitio. Ahora los cinco van grandes en el peso ligero de
   los demás títulos (el del tier premium: Andreu World, Fursys, Alea) y el
   activo solo cambia de color. Con el mismo tamaño la lista no se mueve, y
   eso hace posible cambiar la foto al pasar el mouse sin que salte. */
.ambiente-item,
.ambiente-item.active {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
}

.ambiente-item.active {
  color: var(--color-green);
}

/* Menú de ambientes (página Ambientes): queda pegado bajo el encabezado */
.subnav {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
  background: rgba(17, 17, 17, 0.92);
}

.subnav__list {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav__list::-webkit-scrollbar {
  display: none;
}

.subnav__list a {
  display: block;
  padding-block: 1.1rem;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-gray);
  transition: color var(--transition), border-color var(--transition);
}

.subnav__list a:hover,
.subnav__list a:focus-visible,
.subnav__list a[aria-current="true"] {
  color: var(--color-white);
  border-bottom-color: var(--color-green);
}

/* El salto a cada ambiente descuenta también el menú pegado */
html:has(.subnav) {
  scroll-padding-top: calc(var(--header-height) + 4.25rem);
}

/* Contacto: el mapa va al lado del texto de Visítanos */
.visit__grid .map-embed {
  aspect-ratio: 4 / 3;
}

/* Renders claros (Atreo): con el velo de siempre la frase blanca no se leía
   sobre el piso y las ventanas. Más oscuro a la izquierda, donde va el texto. */
.showcase--claro::after {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 70%),
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%);
}

@media (hover: hover) and (pointer: fine) {
  /* Con el texto abierto el nombre queda en blanco: en verde se perdía
     cuando la foto es clara arriba del degradado. */
  .cat-card:hover .cat-card__label h3 {
    color: var(--color-white);
  }
}

@media (hover: hover) and (pointer: fine) {
  .solution:not(.is-open) .solution__summary:hover .solution__name {
    color: var(--color-white);
  }
}

/* Nombre en dos líneas (Mamparas y cabinas acústicas): la raya va con la primera */
.product-card__name {
  align-items: flex-start;
}

.product-card__name::before {
  margin-top: 0.7em;
}

/* Redes del pie (Notas Web 2: "¿más notorias? ¿a color?"). Pasan de 38px en
   gris a 48px en blanco, como Format (38px) y Alea (33px), y al pasar el mouse
   toman el color de cada red. */
.footer__social {
  gap: 0.75rem;
}

.footer__social a {
  width: 48px;
  height: 48px;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.footer__social svg {
  width: 22px;
  height: 22px;
}

.footer__social a[aria-label="Instagram"]:hover { background: #E1306C; border-color: #E1306C; color: #fff; }
.footer__social a[aria-label="LinkedIn"]:hover  { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.footer__social a[aria-label="Facebook"]:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.footer__social a[aria-label="WhatsApp"]:hover  { background: #25D366; border-color: #25D366; color: #fff; }

/* 22. Secciones claras (Notas Web 2) --------------------------------------
   Servicios, Nosotros, el teaser de servicio y los clientes del Home pasaron a
   fondo claro. En vez de reescribir cada componente, las secciones claras
   redefinen los tokens que esos componentes ya usan: el borde se oscurece, el
   gris sube de contraste y el verde pasa a su versión profunda (4.98:1 sobre
   blanco; el lima da 1.87:1). */
.section--light,
.section--gray {
  --color-border: rgba(17, 17, 17, 0.12);
  --color-gray: #5B6470;
  --color-green: var(--color-green-deep);
}

.section--light .btn--outline-white,
.section--gray .btn--outline-white {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.section--light .btn--outline-white:hover,
.section--gray .btn--outline-white:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/* Sello giratorio sobre fondo claro */
.section--gray .servicio-teaser__badge {
  background: var(--color-gray-light);
}

.section--gray .servicio-teaser__badge text {
  fill: var(--color-dark);
}

/* Proceso (Home y Servicios). Notas Web 2: "mantener concepto, mejorar arte".
   Los círculos de 48px con el número a 1rem se perdían. Ahora el número es el
   protagonista, a peso ligero y grande, sobre una regla que se llena de verde
   al pasar el mouse. Sigue siendo una secuencia, así que la numeración queda. */
.process-step {
  padding-top: 0;
  border-top: 1px solid var(--color-border);
}

.process-step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: auto;
  width: 0;
  height: 2px;
  background: var(--color-green);
  transition: width 0.5s ease;
}

.process-step:first-child::before,
.process-step:last-child::before {
  left: 0;
  right: auto;
}

.process-step:hover::before {
  width: 100%;
}

.process-step__num {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0.75rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-green);
}

.process-step__name {
  font-weight: 500;
}

.process-step:hover .process-step__name,
.process-step:hover .process-step__desc {
  color: inherit;
}

/* Servicios: tira de renders de producto a color */
.color-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.color-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Nosotros: valores con foto */
.values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
}

.value-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1.25rem;
}

.value-card__num {
  font-weight: 500;
}

/* Desplegable de Ambientes en el menú (30/09): pasa el mouse sobre
   "Ambientes" y aparecen los cinco; cada uno lleva a su sección de la
   página. También se abre con el teclado (focus-within). */
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-drop__caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.nav-drop__menu {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  z-index: 10;
  min-width: 260px;
  margin: 0;
  /* El padding de arriba es el puente entre el enlace y la lista: sin él, el
     mouse cruza un hueco y el menú se cierra antes de llegar. */
  padding: 1.25rem 0 0.5rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}

.nav-drop__menu::before {
  content: '';
  position: absolute;
  inset: 0.75rem 0 0;
  z-index: -1;
  border: 1px solid var(--color-border);
  background: rgba(17, 17, 17, 0.97);
}

.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop:hover .nav-drop__caret,
.nav-drop:focus-within .nav-drop__caret {
  transform: translateY(2px) rotate(225deg);
}

.navbar__links .nav-drop__menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--color-gray);
  transition: color var(--transition), background-color var(--transition);
}

.navbar__links .nav-drop__menu a::after {
  display: none;
}

.navbar__links .nav-drop__menu a:hover,
.navbar__links .nav-drop__menu a:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
}

/* Formulario de Contacto: la lista de "¿Qué necesitas resolver?" la dibuja
   el sistema con fondo blanco, y heredaba el texto blanco del campo, así que
   las opciones no se leían. El color-scheme: dark del campo no alcanzaba en
   Chrome para Windows: cada opción lleva su fondo y su texto. */
.contact-form select option {
  background: var(--color-dark-card);
  color: var(--color-white);
}

/* Contacto: el mapa en la portada, al lado del correo y WhatsApp */
.contact-call__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.contact-call__map .map-embed {
  aspect-ratio: 4 / 3;
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--color-dark-card);
}

.contact-call__visit {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.contact-call__visit a {
  color: var(--color-green);
  font-weight: 500;
  white-space: nowrap;
}

/* Mapa de Contacto en modo oscuro (30/09). El iframe de Google no se puede
   estilar por dentro sin la API de Maps (clave y costo), así que se invierte
   con un filtro: invertir y girar el tono 180° da un mapa oscuro que
   conserva los colores (pin rojo, parques verdes), como el modo oscuro del
   propio Google Maps. Se probó primero en gris: combinaba, pero las calles
   perdían contraste y el mapa solo se leía al pasar el mouse. */
.contact-call__map iframe {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.6) contrast(1.1) brightness(1.1);
}

/* Contacto: redes junto al correo y WhatsApp, con el estilo de las del pie */
.contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.contact-social__label {
  margin-right: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.contact-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.contact-social a[aria-label="Instagram"]:hover { background: #E1306C; border-color: #E1306C; }
.contact-social a[aria-label="LinkedIn"]:hover  { background: #0A66C2; border-color: #0A66C2; }
.contact-social a[aria-label="Facebook"]:hover  { background: #1877F2; border-color: #1877F2; }

/* 23. Revisión del 03/10 ---------------------------------------------------- */

/* 23.1 Clientes del Home: tres filas en movimiento, logos chicos y a color.
   Referencia del cliente: Stuhl ("Confiaron en nosotros"). Cada fila tiene la
   lista dos veces; la pista se corre su propio ancho y vuelve sin corte. */
.section-head--center {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.section-head--center .section-sub {
  margin-inline: auto;
}

.logo-marquee {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  /* Los bordes se desvanecen: los logos entran y salen sin cortarse en seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__row {
  display: flex;
  overflow: hidden;
}

.logo-marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-marquee 70s linear infinite;
}

.logo-marquee__row--rev .logo-marquee__track {
  animation-duration: 80s;
  animation-direction: reverse;
}

.logo-marquee__row--3 .logo-marquee__track {
  animation-duration: 75s;
}

.logo-marquee__row:hover .logo-marquee__track {
  animation-play-state: paused;
}

.logo-marquee__track li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(116px, 11vw, 150px);
  height: clamp(60px, 6vw, 74px);
  padding: 0.75rem 1.1rem;
}

/* Más chicos que la grilla anterior (52px de alto): el muro se lee entero */
.logo-marquee__track img,
.clients-wall img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.logo-marquee__track li:hover img {
  transform: scale(1.12);
}

@keyframes logo-marquee {
  to { transform: translateX(-100%); }
}

/* Quieto: la primera copia se acomoda en muro y la segunda se oculta */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .logo-marquee__track {
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    animation: none;
  }

  .logo-marquee__track[aria-hidden="true"] {
    display: none;
  }
}

/* 23.2 Proyectos: todos los clientes en un solo muro (Notas Web v4) */
.clients-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clients-wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 0.9rem 1rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #F6F7F5;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, transform 0.3s ease;
}

.clients-wall li:hover {
  border-color: rgba(17, 17, 17, 0.08);
  background: var(--color-white);
  box-shadow: 0 12px 28px -14px rgba(17, 17, 17, 0.28);
  transform: translateY(-3px);
}

.clients-wall li:hover img {
  transform: scale(1.06);
}

/* Varios archivos traen fondo blanco: multiplicar lo funde con el gris */
.clients-wall img {
  mix-blend-mode: multiply;
}

@media (max-width: 768px) {
  .clients-wall {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.5rem;
  }

  .clients-wall li {
    height: 70px;
    padding: 0.7rem;
  }

  .clients-wall img {
    max-height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-wall li:hover {
    transform: none;
  }
}

/* 23.3 Servicios con más foto (revisión del 03/10) */
.aliados {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.aliados__media {
  position: relative;
  margin: 0;
}

.aliados__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
}

/* La cifra flota sobre la esquina de la foto, en el verde de los botones */
.aliados__badge {
  position: absolute;
  right: clamp(-1.5rem, -2vw, -1rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  max-width: 220px;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  background: #3F9A1A;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-white);
  box-shadow: 0 18px 40px -18px rgba(17, 17, 17, 0.45);
}

.aliados__badge strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.75rem;
  line-height: 1;
}

.aliados__body .display-title {
  margin-bottom: 1.5rem;
}

.aliados__body .body-text + .body-text {
  margin-top: 1rem;
}

.color-strip--mini {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.color-strip--mini img {
  border-radius: 4px;
  background: var(--color-gray-light);
  transition: transform 0.4s ease;
}

.color-strip--mini img:hover {
  transform: translateY(-4px);
}

.process-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-gray-light);
}

.process-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.process-card:hover .process-card__media img {
  transform: scale(1.05);
}

/* El velo de abajo deja leer el número sobre cualquier foto */
.process-card__media::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(17, 17, 17, 0.6));
  pointer-events: none;
}

.process-card__num {
  position: absolute;
  left: 1rem;
  bottom: 0.6rem;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 1;
  color: var(--color-white);
}

.process-card__name {
  position: relative;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.25;
}

/* La regla verde crece al pasar por la tarjeta, como en el proceso del Home */
.process-card__name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2px;
  background: var(--color-green);
  transition: width 0.45s ease;
}

.process-card:hover .process-card__name::before {
  width: 100%;
}

.process-card__desc {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-gray);
}

.process-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 4px;
  background: var(--color-gray-light);
}

.process-cta p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .aliados {
    grid-template-columns: minmax(0, 1fr);
  }

  .aliados__media img {
    aspect-ratio: 3 / 2;
  }

  .aliados__badge {
    right: 1rem;
  }

  /* Cinco tarjetas no entran: se deslizan de lado, una y media a la vista */
  .process-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 42%);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .process-cards::-webkit-scrollbar {
    display: none;
  }

  .process-card {
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .process-cards {
    grid-auto-columns: 72%;
  }

  /* La tira de sillas aquí es chica: las tres entran también en celular */
  .color-strip--mini {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .color-strip--mini img + img {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-card:hover .process-card__media img,
  .color-strip--mini img:hover {
    transform: none;
  }
}

/* 23.4 Contacto: el mapa centrado a la altura del texto (revisión del
   03/10). Antes iba pegado abajo (align-items: end). La foto de fondo no
   se toca. */
.contact-call__layout {
  align-items: center;
}

/* Notas Web v4 (09/10): "centrar mapa en vertical". Centrar la columna no
   bastaba: el texto de Visítanos de abajo subía el mapa. En escritorio ese
   texto cuelga bajo el mapa sin ocupar alto, y lo que se centra con el texto
   de la izquierda es el mapa solo. */
@media (min-width: 1025px) {
  .contact-call__map {
    position: relative;
  }

  .contact-call__visit {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}

/* 23.5 Formulario: los campos opcionales lo dicen (revisión del 03/10) */
.field-opt {
  margin-left: 0.25rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
}

/* 23.6 Volver arriba (lo crea main.js) */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 900;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-white);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s,
              background-color var(--transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  background: #3F9A1A;
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
}

.back-to-top svg {
  grid-area: 1 / 1;
}

.back-to-top__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.back-to-top__ring circle {
  fill: none;
  stroke: #7ED321;
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
}

.back-to-top__arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.back-to-top:hover .back-to-top__arrow {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transform: none;
  }
}

/* 23.7 Más blanco (revisión del 03/10): lo que tenía blanco fijo y ahora
   también vive en secciones claras. */
.section--light .intro__lead,
.section--gray .intro__lead {
  color: var(--color-dark);
}

.intro__lead {
  font-weight: 500;
}

.section--light .ambiente-item:hover,
.section--gray .ambiente-item:hover {
  color: var(--color-dark);
}

.section--light .space-row__links a,
.section--gray .space-row__links a {
  border-color: rgba(17, 17, 17, 0.2);
  color: var(--color-dark);
}

.section--light .space-row__links a:hover,
.section--light .space-row__links a:focus-visible,
.section--gray .space-row__links a:hover,
.section--gray .space-row__links a:focus-visible {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* El menú pegado de Ambientes: pasó a blanco el 03/10 y en las Notas Web v4
   (09/10) el cliente lo pidió más oscuro. Va casi negro, opaco, para que se
   distinga de las secciones claras que recorre. */
.subnav {
  background: rgba(17, 17, 17, 0.96);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.subnav__list a {
  color: #B5BBC3;
}

/* En celular el botón comparte barra con el logo y el menú */
@media (max-width: 560px) {
  .navbar__cta {
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
  }
}

/* Aviso superior: se enciende desde el panel */
.aviso-superior { margin: 0; padding: 8px 16px; background: #4C8234; color: #fff; text-align: center; font-size: .875rem; line-height: 1.4; position: relative; z-index: 1001; }