/* ==========================================================================
   Base común de las tres webs (Galswiss, Galgrill, YLG).

   La familia se reconoce por lo que comparten: la letra de texto, la rejilla,
   el ritmo de las secciones, las etiquetas numeradas, la forma de los
   botones y del pie. La identidad de cada marca la pone su tema.css: letra
   de titulares, colores y un motivo sacado del logo.
   ========================================================================== */

@font-face { font-family: 'Schibsted Grotesk'; src: url(fuentes/schibsted-latin.woff2) format('woff2'); font-weight: 400 900; font-display: swap; 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: 'Schibsted Grotesk'; src: url(fuentes/schibsted-latin-ext.woff2) format('woff2'); font-weight: 400 900; font-display: swap; 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; }

:root {
  /* Lo que cada tema redefine */
  --f-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --f-texto: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display-peso: 700;
  --display-ancho: 100%;
  --display-mayus: none;
  --display-espacio: -0.01em;
  --display-interlinea: 1.02;

  --c-fondo: #ffffff;
  --c-fondo-2: #f4f4f2;
  --c-tinta: #16181d;
  --c-tinta-2: #5a5f68;
  --c-linea: #dfe1e5;
  --c-acento: #2d217f;
  --c-acento-hover: #241a66;
  --c-sobre-acento: #ffffff;
  --c-oscuro: #12141a;
  --c-oscuro-2: #1b1e26;
  --c-sobre-oscuro: #f1f2f4;
  --c-sobre-oscuro-2: #a9aeb8;
  --c-foco: #2d6cdf;

  --forma: none;          /* clip-path de botones y tarjetas */
  --forma-imagen: none;   /* clip-path de las fotos destacadas */

  /* Escala */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.125rem, 1rem + 0.45vw, 1.3rem);
  --t-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.55rem);
  --t-h2: clamp(2rem, 1.35rem + 2.5vw, 3.35rem);
  --t-h1: clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem);
  --margen: clamp(20px, 4.2vw, 56px);
  --ancho: 1240px;
  --seccion: clamp(68px, 9vw, 132px);
  --alto-cabecera: 76px;
  --sombra: 0 1px 2px rgba(16, 18, 24, .05), 0 12px 32px -12px rgba(16, 18, 24, .18);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
  margin: 0; background: var(--c-fondo); color: var(--c-tinta);
  font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 3px; }
::selection { background: var(--c-acento); color: var(--c-sobre-acento); }

.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--c-tinta); color: var(--c-fondo); text-decoration: none; font-weight: 700; }
.saltar:focus { top: 12px; }

/* --------------------------------------------------------------- tipografía */
.titular, h1, h2 {
  font-family: var(--f-display); font-weight: var(--display-peso); font-stretch: var(--display-ancho);
  text-transform: var(--display-mayus); letter-spacing: var(--display-espacio); line-height: var(--display-interlinea);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; }
.entradilla { font-size: var(--t-l); line-height: 1.55; color: var(--c-tinta-2); max-width: 60ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.texto { max-width: 68ch; }
.texto > * + * { margin-top: 1em; }
.texto ul { padding-left: 1.2em; }
.texto li + li { margin-top: .35em; }
.texto a { color: var(--c-acento); text-underline-offset: 3px; }

/* Etiqueta numerada: «01 — Services». Es la firma común de la familia. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-acento);
}
.etiqueta::before { content: attr(data-n); font-variant-numeric: tabular-nums; }
.etiqueta::after { content: ''; width: 36px; height: 2px; background: currentColor; order: -1; display: none; }
.etiqueta:not([data-n])::after { display: block; }
.etiqueta[data-n]::before { padding-right: 12px; border-right: 2px solid currentColor; }

/* ------------------------------------------------------------------- rejilla */
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 2 * var(--margen), 820px); margin-inline: auto; }
.seccion { padding-block: var(--seccion); position: relative; }
.seccion--alt { background: var(--c-fondo-2); }
.seccion--oscura { background: var(--c-oscuro); color: var(--c-sobre-oscuro); }
.seccion--oscura .entradilla, .seccion--oscura .tenue { color: var(--c-sobre-oscuro-2); }
.seccion--ajustada { padding-block: calc(var(--seccion) * .6); }
.tenue { color: var(--c-tinta-2); }

.encabezado { display: grid; gap: 20px 64px; margin-bottom: clamp(36px, 5vw, 64px); }
.encabezado--partido { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
.encabezado--centrado { text-align: center; justify-items: center; }
@media (max-width: 860px) { .encabezado--partido { grid-template-columns: 1fr; } }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dos-columnas--texto-ancho { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .dos-columnas, .dos-columnas--texto-ancho { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ botones */
.boton {
  --b-fondo: var(--c-acento); --b-tinta: var(--c-sobre-acento); --b-borde: var(--c-acento);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border: 2px solid var(--b-borde); background: var(--b-fondo); color: var(--b-tinta); clip-path: var(--forma);
  font-weight: 700; font-size: var(--t-s); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.boton:hover { --b-fondo: var(--c-acento-hover); --b-borde: var(--c-acento-hover); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 18px; height: 18px; transition: transform .25s var(--curva); }
.boton:hover svg { transform: translateX(4px); }
.boton--secundario { --b-fondo: transparent; --b-tinta: var(--c-tinta); --b-borde: currentColor; }
.boton--secundario:hover { --b-fondo: var(--c-tinta); --b-tinta: var(--c-fondo); --b-borde: var(--c-tinta); }
.boton--claro { --b-fondo: #fff; --b-tinta: #111; --b-borde: #fff; }
.boton--claro:hover { --b-fondo: transparent; --b-tinta: #fff; --b-borde: #fff; }
.boton--contorno-claro { --b-fondo: transparent; --b-tinta: #fff; --b-borde: rgba(255, 255, 255, .7); }
.boton--contorno-claro:hover { --b-fondo: #fff; --b-tinta: #111; --b-borde: #fff; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--t-s);
  color: var(--c-acento); text-decoration: none;
}
.enlace-flecha svg { width: 16px; height: 16px; transition: transform .25s var(--curva); }
.enlace-flecha:hover svg, a:hover .enlace-flecha svg { transform: translateX(4px); }

/* -------------------------------------------------------------- cinta y cabecera */
.cinta-propuesta {
  position: relative; z-index: 60; padding: 7px var(--margen); text-align: center;
  background: #111; color: #ffd400;
  font: 700 12px/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase;
}

.cabecera {
  position: sticky; top: 0; z-index: 50; height: var(--alto-cabecera);
  background: color-mix(in srgb, var(--c-fondo) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.cabecera.con-sombra { border-bottom-color: var(--c-linea); }
.cabecera__fila { height: 100%; display: flex; align-items: center; gap: 28px; }
.cabecera__marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.cabecera__menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cabecera__menu a {
  position: relative; padding: 10px 12px; font-size: var(--t-s); font-weight: 600; text-decoration: none; color: var(--c-tinta-2);
  transition: color .2s;
}
.cabecera__menu a:hover, .cabecera__menu a[aria-current="page"] { color: var(--c-tinta); }
.cabecera__menu a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--c-acento); }
.cabecera__accion { min-height: 44px; padding: 0 18px; margin-left: 10px; }
.cabecera__menu a.boton, .cabecera__menu a.boton:hover { color: var(--b-tinta); }
.cabecera__menu a.boton::after { display: none; }
.cabecera__abrir { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; }
.cabecera__abrir span, .cabecera__abrir span::before, .cabecera__abrir span::after {
  display: block; width: 24px; height: 2px; background: var(--c-tinta); margin: auto; position: relative; transition: transform .3s var(--curva), background .2s;
}
.cabecera__abrir span::before, .cabecera__abrir span::after { content: ''; position: absolute; left: 0; }
.cabecera__abrir span::before { top: -7px; }
.cabecera__abrir span::after { top: 7px; }
.menu-abierto .cabecera__abrir span { background: transparent; }
.menu-abierto .cabecera__abrir span::before { transform: translateY(7px) rotate(45deg); }
.menu-abierto .cabecera__abrir span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .cabecera__abrir { display: block; }
  .cabecera__menu {
    position: fixed; inset: var(--alto-cabecera) 0 0 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 0;
    padding: 24px var(--margen) 40px; background: var(--c-fondo); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--curva), visibility .25s;
  }
  .menu-abierto .cabecera__menu { opacity: 1; visibility: visible; transform: none; }
  .cabecera__menu a { padding: 16px 0; font-size: 1.35rem; font-family: var(--f-display); font-stretch: var(--display-ancho); color: var(--c-tinta); border-bottom: 1px solid var(--c-linea); }
  .cabecera__menu a[aria-current="page"]::after { display: none; }
  .cabecera__menu a[aria-current="page"] { color: var(--c-acento); }
  .cabecera__menu .cabecera__accion { margin-top: 24px; border-bottom: 0; font-family: var(--f-texto); font-size: var(--t-m); color: var(--c-sobre-acento); }
  .menu-abierto { overflow: hidden; }
}

/* -------------------------------------------------------------------- héroe */
.heroe { position: relative; isolation: isolate; color: #fff; min-height: min(88vh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.heroe__imagen { position: absolute; inset: 0; z-index: -2; }
.heroe__imagen img { width: 100%; height: 100%; object-fit: cover; }
.heroe::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--heroe-velo, linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.78) 100%)); }
.heroe__contenido { padding-block: clamp(120px, 18vh, 200px) clamp(40px, 6vw, 72px); }
.heroe h1 { max-width: 14ch; }
.heroe .entradilla { color: rgba(255, 255, 255, .86); margin-top: 22px; }
.heroe .botones { margin-top: 34px; }
.heroe .etiqueta { color: #fff; }
.heroe__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px 40px; margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .28);
}
.heroe__datos div { font-size: var(--t-s); color: rgba(255, 255, 255, .8); line-height: 1.4; }
.heroe__datos strong { display: block; color: #fff; font-size: var(--t-m); margin-bottom: 2px; }

.cabecera-pagina { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 6vw, 72px); background: var(--c-fondo-2); position: relative; overflow: hidden; }
.cabecera-pagina h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem); max-width: 18ch; }
.cabecera-pagina .entradilla { margin-top: 20px; }
.miga { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-size: var(--t-xs); color: var(--c-tinta-2); }
.miga a { text-decoration: none; color: inherit; }
.miga a:hover { color: var(--c-tinta); text-decoration: underline; }
.miga span[aria-hidden] { opacity: .5; }

/* ----------------------------------------------------------------- tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.tarjetas--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); }
.tarjeta {
  position: relative; display: flex; flex-direction: column; background: var(--c-fondo); color: inherit; text-decoration: none;
  border: 1px solid var(--c-linea); clip-path: var(--forma); transition: border-color .25s, transform .3s var(--curva), box-shadow .3s;
}
a.tarjeta:hover { border-color: var(--c-acento); transform: translateY(-3px); box-shadow: var(--sombra); }
.tarjeta__imagen { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-fondo-2); }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
a.tarjeta:hover .tarjeta__imagen img { transform: scale(1.045); }
.tarjeta__cuerpo { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tarjeta__cuerpo p { color: var(--c-tinta-2); font-size: var(--t-s); }
.tarjeta__cuerpo .enlace-flecha { margin-top: auto; padding-top: 8px; }
.tarjeta__numero { font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; color: var(--c-acento); }

/* Ventajas: icono pequeño + texto, en fila */
.ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.ventaja { display: grid; gap: 10px; align-content: start; }
.ventaja__icono { width: 44px; height: 44px; color: var(--c-acento); }
.ventaja h3 { font-size: 1.12rem; }
.ventaja p { color: var(--c-tinta-2); font-size: var(--t-s); }
.seccion--oscura .ventaja p { color: var(--c-sobre-oscuro-2); }

/* Lista con marcas */
.lista-marcas { display: grid; gap: 12px; padding: 0; list-style: none; }
.lista-marcas li { position: relative; padding-left: 30px; }
.lista-marcas li::before {
  content: ''; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border: solid var(--c-acento);
  border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
.lista-marcas--columnas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px 40px; }

/* Pasos del proceso */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0; counter-reset: paso; border-top: 1px solid var(--c-linea); }
.paso { counter-increment: paso; padding: 28px 28px 8px 0; border-right: 1px solid var(--c-linea); }
.paso:last-child { border-right: 0; }
.paso::before {
  content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 18px;
  font-family: var(--f-display); font-stretch: var(--display-ancho); font-weight: var(--display-peso); font-size: 2.6rem; line-height: 1; color: var(--c-acento);
}
.paso h3 { font-size: 1.15rem; margin-bottom: 8px; }
.paso p { color: var(--c-tinta-2); font-size: var(--t-s); }
.paso + .paso { padding-left: 28px; }
@media (max-width: 760px) { .paso, .paso + .paso { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--c-linea); } }
.seccion--oscura .pasos, .seccion--oscura .paso { border-color: rgba(255, 255, 255, .14); }
.seccion--oscura .paso p { color: var(--c-sobre-oscuro-2); }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 28px; }
.cifra strong { display: block; font-family: var(--f-display); font-stretch: var(--display-ancho); font-weight: var(--display-peso); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); line-height: 1; color: var(--c-acento); }
.cifra span { display: block; margin-top: 10px; font-size: var(--t-s); color: var(--c-tinta-2); }

/* ------------------------------------------------------------------ galerías */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 10px; }
.mosaico__item { position: relative; margin: 0; overflow: hidden; background: var(--c-fondo-2); }
.mosaico__item--alto { grid-row: span 2; }
.mosaico__item--ancho { grid-column: span 2; }
@media (max-width: 560px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 6px; }
  .mosaico__item--ancho { grid-column: span 2; }
  .mosaico__item figcaption { display: none; }
}
.mosaico--destacado .mosaico__item:first-child { grid-column: span 2; grid-row: span 2; }
.mosaico__item button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.mosaico__item button:focus-visible { outline: 3px solid var(--c-foco); outline-offset: -3px; }
.mosaico__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva), filter .3s; }
.mosaico__item:hover img { transform: scale(1.04); }
.mosaico__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: #fff; font-size: var(--t-xs); font-weight: 600; line-height: 1.35;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.mosaico__item:hover figcaption, .mosaico__item:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) { .mosaico__item figcaption { opacity: 1; transform: none; } }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtros button {
  min-height: 42px; padding: 0 18px; border: 1px solid var(--c-linea); background: var(--c-fondo); cursor: pointer;
  font-size: var(--t-s); font-weight: 600; color: var(--c-tinta-2); clip-path: var(--forma); transition: all .2s;
}
.filtros button:hover { border-color: var(--c-tinta); color: var(--c-tinta); }
.filtros button[aria-pressed="true"] { background: var(--c-tinta); border-color: var(--c-tinta); color: var(--c-fondo); }
.filtros button span { opacity: .55; font-weight: 500; margin-left: 4px; }

/* Visor de fotos */
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 9, 12, .94); color: #fff; }
.visor::backdrop { background: rgba(8, 9, 12, .9); }
.visor[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.visor figure { display: grid; place-items: center; width: 100%; height: 100%; padding: 64px 72px 8px; }
.visor img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.visor figcaption { padding: 12px 24px 28px; font-size: var(--t-s); color: #c9ccd2; text-align: center; }
.visor__boton { position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.visor__boton:hover { background: rgba(255, 255, 255, .22); }
.visor__boton svg { width: 22px; height: 22px; }
.visor__cerrar { top: 16px; right: 16px; }
.visor__ant { left: 16px; top: 50%; transform: translateY(-50%); }
.visor__sig { right: 16px; top: 50%; transform: translateY(-50%); }
.visor__cuenta { position: absolute; top: 28px; left: 24px; font-size: var(--t-xs); letter-spacing: .14em; color: #9da3ad; }
@media (max-width: 640px) { .visor figure { padding: 64px 8px 8px; } .visor__ant, .visor__sig { top: auto; bottom: 16px; transform: none; } }

/* ------------------------------------------------------------- testimonios */
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.testimonio { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 34px); background: var(--c-fondo); border: 1px solid var(--c-linea); clip-path: var(--forma); }
.testimonio__estrellas { display: flex; gap: 3px; color: #e5a100; }
.testimonio__estrellas svg { width: 17px; height: 17px; }
.testimonio blockquote { font-size: 1.04rem; line-height: 1.55; }
.testimonio figcaption { margin-top: auto; font-size: var(--t-s); color: var(--c-tinta-2); }
.testimonio figcaption strong { color: var(--c-tinta); display: block; }

.clientes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 48px; align-items: center; }
.clientes img { max-height: 54px; width: auto; margin-inline: auto; filter: grayscale(1); opacity: .72; transition: filter .3s, opacity .3s; }
.clientes img:hover { filter: none; opacity: 1; }

/* ------------------------------------------------------------- preguntas */
.preguntas { border-top: 1px solid var(--c-linea); }
.pregunta { border-bottom: 1px solid var(--c-linea); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.08rem; font-weight: 700; line-height: 1.35;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ''; flex: none; width: 14px; height: 14px; margin-right: 6px; border: solid var(--c-acento); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-4px); transition: transform .25s var(--curva);
}
.pregunta[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pregunta__respuesta { padding: 0 0 24px; color: var(--c-tinta-2); max-width: 70ch; }
.seccion--oscura .preguntas, .seccion--oscura .pregunta { border-color: rgba(255, 255, 255, .14); }
.seccion--oscura .pregunta__respuesta { color: var(--c-sobre-oscuro-2); }

/* ---------------------------------------------------------------- formulario */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.formulario .ancho-total { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 7px; }
.campo label, .campo .campo__etiqueta { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--c-linea); border-radius: 0; background: var(--c-fondo);
  font-size: var(--t-m); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.campo textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--c-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-acento) 18%, transparent); }
.campo--error input, .campo--error textarea, .campo--error select { border-color: #c4271b; }
.campo__error { font-size: var(--t-xs); color: #c4271b; font-weight: 600; }
.casilla-form { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-s); color: var(--c-tinta-2); }
.casilla-form input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--c-acento); }
.formulario__nota { font-size: var(--t-xs); color: var(--c-tinta-2); }
.formulario__ok { padding: 28px; border: 1.5px solid var(--c-acento); background: color-mix(in srgb, var(--c-acento) 6%, var(--c-fondo)); }
.formulario__ok h3, .formulario__titulo { margin-bottom: 8px; font-family: var(--f-texto); font-size: 1.3rem; font-weight: 700; letter-spacing: 0; text-transform: none; font-stretch: 100%; line-height: 1.3; }

.contacto-datos { display: grid; gap: 26px; }
.contacto-dato { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.contacto-dato svg { width: 22px; height: 22px; color: var(--c-acento); margin: 11px auto 0; }
.contacto-dato span { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-tinta-2); }
.contacto-dato a, .contacto-dato p { font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.contacto-dato a:hover { color: var(--c-acento); }

/* ---------------------------------------------------------- llamada final */
.llamada { position: relative; overflow: hidden; isolation: isolate; background: var(--c-acento); color: var(--c-sobre-acento); }
.llamada .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding-block: clamp(56px, 7vw, 96px); }
.llamada h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); max-width: 20ch; }
.llamada p { margin-top: 12px; opacity: .85; max-width: 52ch; }

/* -------------------------------------------------------------------- pie */
.pie { background: var(--c-oscuro); color: var(--c-sobre-oscuro-2); font-size: var(--t-s); }
.pie a { color: var(--c-sobre-oscuro); text-decoration: none; }
.pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__rejilla { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-block: clamp(56px, 7vw, 88px) 48px; }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie h2 { font-family: var(--f-texto); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-sobre-oscuro); margin-bottom: 16px; font-stretch: 100%; }
.pie ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.pie__marca p { margin-top: 18px; max-width: 34ch; line-height: 1.55; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--t-xs); }
.redes { display: flex; gap: 10px; margin-top: 20px; }
.redes a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); color: var(--c-sobre-oscuro); transition: background .2s, border-color .2s; }
.redes a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); text-decoration: none; }
.redes svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- notas de propuesta */
.notas-boton {
  position: fixed; right: 16px; bottom: 16px; z-index: 70; display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 18px 0 14px; border: 0; border-radius: 23px; background: #111; color: #ffd400; cursor: pointer;
  font: 700 13px/1 var(--f-texto); letter-spacing: .04em; box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}
.notas-boton i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #ffd400; color: #111; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.notas {
  position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(100vw, 520px); overflow-y: auto; padding: 28px 28px 80px;
  background: #fffdf2; color: #1b1b1b; box-shadow: 20px 0 60px rgba(0, 0, 0, .3); font: 15px/1.55 var(--f-texto);
  transform: translateX(-104%); transition: transform .35s var(--curva);
}
.notas.abierto { transform: none; }
.notas h2 { font: 800 22px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; margin: 0 40px 6px 0; font-stretch: 100%; }
.notas h3 { font: 800 13px/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; margin: 26px 0 10px; color: #6b5900; }
.notas p, .notas li { color: #333; }
.notas ul { padding-left: 1.1em; display: grid; gap: 7px; }
.notas .notas__cerrar { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #111; color: #fff; cursor: pointer; font-size: 20px; }
.notas mark { background: #ffe57a; padding: 0 3px; }

@media (max-width: 640px) {
  .notas-boton { width: 46px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .notas-boton i { width: 26px; height: 26px; font-size: 14px; }
}

/* --------------------------------------------------------------- aparición */
@media (prefers-reduced-motion: no-preference) {
  [data-revelar] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--curva), transform .8s var(--curva); }
  [data-revelar].visible { opacity: 1; transform: none; }
  [data-revelar="2"] { transition-delay: .08s; } [data-revelar="3"] { transition-delay: .16s; } [data-revelar="4"] { transition-delay: .24s; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Marcas de datos pendientes (sólo en la propuesta) */
.pendiente { background: repeating-linear-gradient(-45deg, #fff6c2 0 8px, #ffefa0 8px 16px); color: #5c4a00; padding: 1px 6px; font-weight: 700; font-size: .92em; }

@media print { .cabecera, .pie, .notas, .notas-boton, .cinta-propuesta { display: none !important; } }

/* Números de pasos y cifras sobre fondo oscuro: cada tema define su tono claro */
.seccion--oscura .paso::before, .seccion--oscura .cifra strong { color: var(--c-acento-claro, var(--c-sobre-oscuro)); }

/* ==========================================================================
   Galswiss · construction métallique, Lausanne
   El índigo y el rojo del logotipo; titulares anchos como «GALSWISS»; y la
   pendiente de los tejados del logo como motivo: esquinas cortadas en
   diagonal y líneas de cubierta en los fondos.
   ========================================================================== */
@font-face { font-family: 'Archivo'; src: url(fuentes/archivo-latin.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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: 'Archivo'; src: url(fuentes/archivo-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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; }

:root {
  --f-display: 'Archivo', 'Arial Black', sans-serif;
  --display-peso: 760;
  --display-ancho: 116%;
  --display-espacio: -0.028em;
  --display-interlinea: 1.0;

  --c-fondo: #ffffff;
  --c-fondo-2: #f3f3f8;
  --c-tinta: #14122e;
  --c-tinta-2: #5a5b72;
  --c-linea: #dfdfeb;
  --c-acento: #2d217f;
  --c-acento-hover: #1f1663;
  --c-rojo: #bf0404;
  --c-oscuro: #15123a;
  --c-oscuro-2: #1e1a52;
  --c-sobre-oscuro: #f4f3fb;
  --c-sobre-oscuro-2: #aeacd0;
  --c-foco: #bf0404;
  --c-acento-claro: #ff7b6e;

  /* La esquina de tejado: un solo corte a 45°, arriba a la derecha. */
  --tejado: 22px;
  --forma: polygon(0 0, calc(100% - var(--tejado)) 0, 100% var(--tejado), 100% 100%, 0 100%);
}

.etiqueta { color: var(--c-rojo); }
.heroe .etiqueta { color: #fff; }
.heroe .etiqueta[data-n]::before { border-color: var(--c-rojo); }
.seccion--oscura .etiqueta { color: #ff6b5e; }

/* Cabecera */
.cabecera__marca img { height: 56px; width: auto; }
:root { --alto-cabecera: 84px; }
.cabecera__accion { --tejado: 12px; }
.boton { --tejado: 14px; }

/* Héroe: velo índigo y la línea de los tejados del logo, muy tenue */
.heroe { --heroe-velo: linear-gradient(100deg, rgba(21, 18, 58, .92) 0%, rgba(21, 18, 58, .72) 42%, rgba(21, 18, 58, .18) 75%, rgba(21, 18, 58, .35) 100%); }
.heroe::after {
  content: ''; position: absolute; right: -4%; top: 12%; width: min(56vw, 760px); aspect-ratio: 1.9; z-index: -1; opacity: .22; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 200'%3E%3Cpath d='M2 198 72 92 150 168M118 120 172 104 238 180 300 70 378 198M72 92l28-12' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.heroe h1 { max-width: 13ch; }
.heroe h1 em { font-style: normal; color: #fff; background: linear-gradient(transparent 82%, var(--c-rojo) 82% 94%, transparent 94%); }

/* Cabecera de página: plano técnico */
.cabecera-pagina {
  background-color: var(--c-fondo-2);
  background-image: linear-gradient(rgba(45, 33, 127, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 33, 127, .06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cabecera-pagina::after {
  content: ''; position: absolute; right: var(--margen); bottom: 0; width: min(38vw, 460px); aspect-ratio: 1.9; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 200'%3E%3Cpath d='M2 198 72 92 150 168M118 120 172 104 238 180 300 70 378 198M72 92l28-12' fill='none' stroke='%232d217f' stroke-width='1.2' stroke-opacity='.35'/%3E%3C/svg%3E") no-repeat bottom right / contain;
}
@media (max-width: 760px) { .cabecera-pagina::after { display: none; } }

/* Separador inclinado como un faldón de tejado */
.seccion--inclinada { clip-path: polygon(0 clamp(28px, 4vw, 64px), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--seccion) + clamp(28px, 4vw, 64px)); margin-top: calc(-1 * clamp(28px, 4vw, 64px)); }

/* Servicios: tarjetas con número y el rojo en el filo */
.servicio .tarjeta__cuerpo { border-top: 3px solid var(--c-acento); position: relative; }
.servicio:hover .tarjeta__cuerpo { border-top-color: var(--c-rojo); }
.servicio h3 { font-family: var(--f-display); font-stretch: 112%; font-weight: 720; letter-spacing: -0.015em; }

/* Foto con marco desplazado en rojo */
.foto-marco { position: relative; }
.foto-marco img { position: relative; z-index: 1; width: 100%; clip-path: var(--forma); --tejado: 36px; }
.foto-marco::before { content: ''; position: absolute; inset: 22px -22px -22px 22px; border: 2px solid var(--c-rojo); clip-path: var(--forma); --tejado: 36px; }
@media (max-width: 640px) { .foto-marco::before { inset: 12px -10px -12px 10px; } }

/* Banda de gerencias */
.banda-gerancias { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; background: var(--c-oscuro); color: var(--c-sobre-oscuro); clip-path: var(--forma); --tejado: 48px; overflow: hidden; }
.banda-gerancias__texto { padding: clamp(32px, 5vw, 72px); display: grid; gap: 18px; align-content: center; }
.banda-gerancias__texto p { color: var(--c-sobre-oscuro-2); }
.banda-gerancias .lista-marcas li::before { border-color: #ff6b5e; }
.banda-gerancias img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
@media (max-width: 900px) { .banda-gerancias { grid-template-columns: 1fr; } .banda-gerancias img { max-height: 340px; } }

/* Llamada final en índigo con la línea de tejados */
.llamada { background: var(--c-acento); }
.llamada::before {
  content: ''; position: absolute; left: -2%; bottom: -8%; width: min(60vw, 700px); aspect-ratio: 1.9; opacity: .16; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 200'%3E%3Cpath d='M2 198 72 92 150 168M118 120 172 104 238 180 300 70 378 198M72 92l28-12' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.llamada .boton--claro:hover { --b-tinta: #fff; }

.pie { background: var(--c-oscuro); }
.pie__marca img { width: 170px; height: auto; }
.pie__suisse { display: inline-flex; align-items: center; gap: 8px; }
.pie__suisse::before { content: ''; width: 14px; height: 14px; background: var(--c-rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 6h6v7h7v6h-7v7h-6v-7H6v-6h7z' fill='white'/%3E%3C/svg%3E") center / 100%; }

.clientes img { max-height: 58px; }
.testimonio { --tejado: 20px; }