/* =============================================================================
   ObrasART — hoja de estilos
   Colores de la carta de marca (Identidad visual v3.1): carbón #303030
   (nombre), azul marino #173B63 (ART y fondos), blanco #FFFFFF y niebla
   #F1F4F7. La interfaz usa tonos claros sobre un lienzo de grafito neutro;
   los paneles transparentes dejan pasar el fondo sin teñirlo de azul.
   --acento-claro (#7FA8D9) es el azul aclarado para usarlo SOBRE el azul
   marino, donde el color de marca no tendría contraste. El color de marca
   sigue siendo #173B63.
   Sora en titulares y DM Sans en lectura, variables y servidas desde el
   dominio. Cristal luminoso, cantos definidos y luz cálida de fondo.
   ============================================================================= */

@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/sora-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("../fonts/dm-sans-latin-variable.woff2") format("woff2");
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --papel: #292E31;          /* grafito iluminado bajo las superficies de cristal */
  --gris-100: #30353B;
  --gris-300: #7C838B;
  --gris-500: #BEC3CA;
  --antracita: #25292F;
  --antracita-2: #353B42;
  --azul-profundo: #0F2A47;  /* el azul del pie */
  --carbon: #303030;         /* carbón original del logotipo */
  --tinta: #F2F3F5;          /* texto sobre cristal neutro */
  --tinta-suave: #CED1D5;
  --blanco: #FFFFFF;         /* soporte del logo y botones sobre azul */
  --acento: #173B63;         /* AZUL MARINO: rellenos y botones */
  --acento-texto: #C2D2E3;   /* acento discreto y legible sobre cristal */
  --acento-claro: #7FA8D9;   /* azul aclarado sobre el azul marino (4,6:1) */
  --acento-hover: #0F2A47;
  --linea: rgba(255, 255, 255, .16);
  --linea-oscura: rgba(255, 255, 255, .14);

  --fuente: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titular: "Sora", var(--fuente);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --ancho: 1200px;
  --margen: clamp(20px, 5vw, 56px);
  --sec: clamp(72px, 10vw, 136px);
  --radio: 20px;
  --cab: 72px;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -16px rgba(0,0,0,.28);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 14px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--fuente); font-size: 1.0625rem; line-height: 1.65; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
::selection { background: #7FA8D9; color: #0F2A47; text-shadow: none; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--titular); line-height: 1.12; letter-spacing: -.035em; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; border-radius: 2px; }
.oscuro :focus-visible, .portada :focus-visible, .cabecera :focus-visible, .pie :focus-visible { outline-color: var(--acento-claro); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--acento); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--sec); }

/* Etiqueta de sección: trazo fino y versales de la tipografía de lectura. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fuente); font-size: .76rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--acento-texto);
}
.etiqueta::before { content: ""; width: 36px; height: 1px; background: currentColor; }
/* Sobre el azul de la marca (portada y secciones oscuras) la etiqueta usa el
   azul aclarado: el color de marca sobre sí mismo no se vería. */
.oscuro .etiqueta, .portada .etiqueta { color: var(--acento-claro); }
.oscuro .etiqueta::before, .portada .etiqueta::before { background: var(--acento-claro); }
.titulo-sec { margin-top: 18px; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); max-width: 16ch; }
.intro-sec { margin-top: 18px; max-width: 58ch; color: var(--tinta-suave); font-size: 1.125rem; }
.oscuro .intro-sec { color: rgba(255,255,255,.74); }
.cabeza-sec { margin-bottom: clamp(36px, 5vw, 64px); }

/* ---------- 3. Botones --------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 54px; padding: 9px 22px; border-radius: 6px 16px 6px 6px;
  font-family: var(--fuente); font-weight: 650; font-size: 1rem; letter-spacing: .015em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--curva), box-shadow .3s ease;
}
.boton--acento { background: var(--acento); color: #fff; }
.boton--acento:hover { background: var(--acento-hover); }
.boton--linea { border-color: currentColor; color: inherit; background: transparent; }
.boton--linea:hover { background: rgba(255,255,255,.08); }
.boton:active { transform: translateY(1px); }
.boton svg { width: 22px; height: 22px; flex: none; }

/* ---------- 4. Franja de demostración ----------------------------------- */
.demo {
  background: var(--acento); color: #fff; text-align: center;
  font-size: .85rem; font-weight: 600; padding: 8px var(--margen);
}

/* ---------- 5. Cabecera -------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23, 59, 99, .94); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-oscura);
}
.cabecera__in { display: flex; align-items: center; gap: 24px; min-height: var(--cab); transition: min-height .3s var(--curva); }
/* El soporte blanco mantiene los colores originales del logo sobre el azul. */
.marca { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 10px 12px; border-radius: 8px; background: var(--blanco); text-decoration: none; line-height: 0; }
.marca img { display: block; width: 180px; height: auto; }
.marca__dibujo { position: relative; display: block; max-width: 100%; }
.marca__efecto { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.marca__mascara { mask-type: alpha; }
.marca__pulso, .marca__reflejo { opacity: 0; }
@media (min-width: 560px) { .marca img { width: 230px; } }
@media (max-width: 559px) { .cabecera__in { gap: 12px; } }
.pie .marca img { width: 260px; height: auto; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu a { text-decoration: none; font-size: .95rem; font-weight: 500; padding: 10px 12px; border-radius: var(--radio); color: rgba(255,255,255,.86); }
.menu a:hover { color: #fff; background: rgba(255,255,255,.07); }
.cabecera .boton { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.menu-boton { display: none; flex-shrink: 0; margin-left: auto; background: none; border: 0; color: #fff; width: 48px; height: 48px; cursor: pointer; }
.menu-boton svg { width: 26px; height: 26px; }

@media (max-width: 1079px) {
  .menu-boton { display: inline-grid; place-items: center; }
  .cabecera .boton--cab { display: none; }
  .menu {
    position: fixed; inset: var(--cab) 0 auto 0; z-index: 2; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--antracita); padding: 8px var(--margen) 24px; border-bottom: 1px solid var(--linea-oscura);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .25s var(--curva), visibility .2s;
  }
  .menu .boton { border-radius: 6px 16px 6px 6px; }
  .menu.abierto { opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: 16px 4px; font-size: 1.15rem; border-bottom: 1px solid var(--linea-oscura); border-radius: 0; }
  .menu .boton { margin-top: 18px; min-height: 52px; border-bottom: 0; }
  .demo + .cabecera .menu { inset-block-start: var(--cab); }
}
@media (min-width: 1080px) { .menu .boton { display: none; } }

/* ---------- 6. Portada --------------------------------------------------- */
.portada { position: relative; color: #fff; background: var(--antracita); overflow: hidden; isolation: isolate; }
.portada__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(25,28,32,.86) 0%, rgba(25,28,32,.52) 46%, rgba(25,28,32,.24) 72%, rgba(25,28,32,.64) 100%);
}
.portada__in { min-height: min(88svh, 860px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(72px, 12vw, 140px) clamp(56px, 8vw, 96px); }
.portada h1 { margin-top: 22px; font-size: clamp(2.6rem, 1.4rem + 5.6vw, 5.6rem); font-weight: 550; letter-spacing: -.055em; max-width: 13ch; text-wrap: balance; }
.portada__entradilla { margin-top: 26px; max-width: 52ch; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: rgba(255,255,255,.86); }
.portada__botones { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.portada__nota { position: absolute; right: var(--margen); bottom: 18px; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.portada__ficha { margin-top: clamp(48px, 7vw, 88px); display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); font-family: var(--fuente); font-size: .8rem; letter-spacing: .04em; color: rgba(255,255,255,.86); list-style: none; }
.portada__ficha li::before { content: "■"; color: var(--acento-claro); margin-right: 10px; font-size: .6em; vertical-align: .25em; }

/* ---------- 7. Servicios ------------------------------------------------- */
.servicios { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
.servicio { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.servicio__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-bottom: 3px solid var(--acento); }
.servicio__cuerpo { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.servicio__n { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--gris-500); }
.servicio h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); }
.servicio p { color: var(--tinta-suave); }
.servicio ul { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.servicio li { position: relative; padding-left: 22px; font-size: .98rem; }
.servicio li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 3px; background: var(--acento); }
.pendiente { margin-top: 6px; align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: #123050; background: #E6EDF5; border: 1px dashed #A9C2DD; padding: 7px 10px; border-radius: var(--radio); }

/* ---------- 8. Aplicaciones ---------------------------------------------- */
.banda { background: var(--blanco); border-block: 1px solid var(--linea); }
.aplicaciones { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--tinta); }
@media (min-width: 760px) { .aplicaciones { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
@media (min-width: 1100px) { .aplicaciones { grid-template-columns: repeat(3, 1fr); } }
.aplicacion { padding: 26px 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.aplicacion__n { grid-row: span 2; font-family: var(--mono); font-size: .8rem; color: var(--acento-texto); padding-top: .55em; }
.aplicacion h3 { font-size: 1.6rem; letter-spacing: -.035em; }
.aplicacion p { color: var(--tinta-suave); font-size: 1rem; }

/* ---------- 9. Trabajos (galería) --------------------------------------- */
.galeria { display: grid; gap: 14px; grid-template-columns: 1fr; list-style: none; }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.trabajo__enlace { display: block; text-decoration: none; cursor: zoom-in; border-radius: var(--radio); }
.trabajo__enlace:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; }
.trabajo__marco { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--gris-300); isolation: isolate; }
.trabajo__marco img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.trabajo__enlace:hover img { transform: scale(1.04); }
.trabajo__sello { position: absolute; left: 10px; top: 10px; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(21,23,26,.78); color: #fff; padding: 5px 8px; border-radius: 2px; }
.trabajo__pie { padding: 12px 2px 0; }
.trabajo__tipo { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.trabajo__titulo { font-weight: 700; font-size: 1.08rem; margin-top: 2px; }
.aviso { margin-top: 26px; display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--tinta-suave); max-width: 70ch; }
.aviso::before { content: "i"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--mono); font-size: .8rem; font-weight: 700; margin-top: 1px; }

/* Visor (dialog nativo) */
.visor { overflow: visible; border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; color: #fff; }
.visor::backdrop { background: rgba(12, 13, 15, .97); }
.visor img { width: 100%; max-height: 74vh; object-fit: contain; background: #111; border-radius: var(--radio); }
.visor__pie { margin-top: 14px; display: grid; gap: 4px; }
.visor__pie p { color: rgba(255,255,255,.8); }
.visor__cerrar { position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(21,23,26,.72); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.visor__cerrar:hover { background: var(--acento); color: #fff; }
.visor[open] { display: block; margin-top: 76px; }

/* ---------- 10. Quiénes somos ------------------------------------------- */
.sobre { display: grid; gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (min-width: 900px) { .sobre { grid-template-columns: 5fr 6fr; } }
.sobre__cita { position: relative; aspect-ratio: 1; max-width: 460px; background: var(--antracita); color: #fff; display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 44px); border-radius: var(--radio); overflow: hidden; isolation: isolate; }
.sobre__cita .sobre__logo { display: block; width: min(100%, 320px); height: auto; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .65)); }
.sobre__cita p { font-size: clamp(3.4rem, 2rem + 6vw, 6.4rem); font-weight: 900; letter-spacing: -.06em; line-height: .9; }
.sobre__parrafos { margin-top: 26px; }
.sobre__parrafos p + p { margin-top: 18px; }
.sobre__parrafos p { font-size: 1.12rem; color: var(--tinta-suave); }
.sobre__parrafos p:first-child { color: var(--tinta); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; }
.firma { margin-top: 26px; font-weight: 900; font-size: 1.6rem; letter-spacing: -.05em; }
.firma::after { content: ""; display: inline-block; width: .32em; height: .32em; background: var(--acento); margin-left: .1em; }

/* ---------- 11. Proceso -------------------------------------------------- */
.pasos { list-style: none; display: grid; gap: 0; counter-reset: paso; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.paso { counter-increment: paso; position: relative; padding: 26px 22px 26px 0; border-top: 2px solid var(--linea-oscura); }
@media (min-width: 900px) { .paso { padding-top: 34px; } }
.paso::before { content: "0" counter(paso); display: block; font-family: var(--mono); font-size: .85rem; color: var(--acento-claro); letter-spacing: .1em; }
.paso::after { content: ""; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--acento-claro); }
.paso h3 { margin-top: 12px; font-size: 1.45rem; }
.paso p { margin-top: 10px; color: rgba(255,255,255,.74); font-size: 1rem; }
.oscuro { background: var(--antracita); color: #fff; }

/* ---------- 12. Preguntas ------------------------------------------------ */
.faq { max-width: 860px; border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-weight: 700; font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid var(--linea); border-radius: 50%; font-weight: 400; font-size: 1.3rem; transition: transform .25s var(--curva), background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--acento); border-color: var(--acento); color: #fff; }
.faq details p { padding: 0 0 24px; max-width: 70ch; color: var(--tinta-suave); }

/* ---------- 13. Contacto ------------------------------------------------- */
.contacto { display: grid; grid-template-columns: 1fr; gap: 34px; text-align: center; }
.contacto__cabecera { max-width: 760px; margin-inline: auto; }
.contacto .titulo-sec { max-width: none; margin-inline: auto; }
.contacto .intro-sec { max-width: 54ch; margin-inline: auto; }
.contacto .vias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.contacto .via { flex-direction: column; justify-content: center; min-height: 184px; padding: 25px 20px; gap: 15px; }
.contacto .via__t { gap: 8px; }
.contacto .via__v { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.45; max-width: 25ch; }
.contacto__preparacion { padding: 22px 28px; border-block: 1px solid rgba(255, 255, 255, .13); }
.contacto__preparacion > p { color: #DEE7EB; font-size: .83rem; font-weight: 650; }
.contacto .contacto__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.contacto .contacto__lista li { justify-content: center; font-size: .88rem; line-height: 1.6; }
.contacto .contacto__lista li::before { display: none; }
@media (max-width: 759px) {
  .contacto { gap: 25px; }
  .contacto .vias { grid-template-columns: 1fr; gap: 12px; }
  .contacto .via { min-height: 106px; flex-direction: row; justify-content: flex-start; text-align: left; padding: 22px; }
  .contacto__preparacion { padding-inline: 8px; }
  .contacto .contacto__lista { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
}
.contacto__lista { margin-top: 26px; list-style: none; display: grid; gap: 10px; }
.contacto__lista li { display: flex; gap: 12px; align-items: baseline; color: rgba(255,255,255,.86); }
.contacto__lista li::before { content: ""; width: 10px; height: 3px; background: var(--acento-claro); flex: none; transform: translateY(-4px); }
.vias { display: grid; gap: 12px; }
.via { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--radio); text-decoration: none; border: 1px solid var(--linea-oscura); background: var(--antracita-2); transition: border-color .2s, background .2s; }
a.via:hover { border-color: var(--acento-claro); background: #27588B; }
.via__ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.via__ico svg { width: 22px; height: 22px; }
.via--wa .via__ico { background: var(--acento); color: #fff; }
.via__t { display: grid; }
.via__k { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.via__v { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.via--pendiente { border-style: dashed; opacity: .82; }
.via--pendiente .via__v { font-weight: 500; font-size: 1rem; color: rgba(255,255,255,.7); }

/* ---------- 14. Pie ------------------------------------------------------ */
.pie { background: var(--azul-profundo); color: rgba(255,255,255,.74); padding-block: 48px 36px; font-size: .92rem; }
.pie__in { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: center; }
.pie .marca { color: #fff; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__base { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--linea-oscura); display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: center; }
.credito { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.credito svg { height: 13px; width: auto; }
.credito:hover { color: #fff; }

/* ---------- 15. Contacto siempre a mano, también en escritorio -------- */
.wa-flotante {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 18px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .72); background: rgba(241, 243, 242, .88); color: #25322B;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .80), 0 12px 32px -12px rgba(0, 0, 0, .55);
}
.wa-flotante svg { flex: none; width: 28px; height: 28px; color: #137A3E; }
.wa-flotante__texto { font-size: .94rem; font-weight: 650; }
.wa-flotante:focus-visible { outline-color: #FFFFFF; outline-offset: 4px; }
@media (max-width: 559px) {
  .wa-flotante { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; padding: 0; }
  .wa-flotante__texto { display: none; }
}

/* ---------- 16. Páginas legales y 404 ----------------------------------- */
.legal { padding-block: clamp(56px, 8vw, 96px); }
.legal h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); }
.legal h2 { margin-top: 40px; font-size: 1.35rem; letter-spacing: -.02em; }
.legal p, .legal li { margin-top: 12px; color: var(--tinta-suave); max-width: 72ch; }
.legal ul { padding-left: 1.2em; }
.legal .actualizado { margin-top: 14px; font-family: var(--mono); font-size: .8rem; color: var(--gris-500); }
mark.falta { background: #E6EDF5; color: #123050; padding: 1px 6px; border-radius: 2px; font-family: var(--mono); font-size: .88em; }
.nota-legal { margin-top: 24px; padding: 16px 18px; border-left: 4px solid var(--acento); background: var(--blanco); color: var(--tinta); }
.trabajo__marco, .trabajo__pie, .trabajo__tipo, .trabajo__titulo { display: block; }
/* Sobre el azul de la marca el botón principal se invierte: un relleno azul
   sobre fondo azul no tendría contraste. Blanco sobre azul da 11,4:1. */
.portada .boton--acento, .oscuro .boton--acento,
.cabecera .boton--acento, .menu .boton--acento {
  background: #fff; color: var(--acento); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.portada .boton--acento:hover, .oscuro .boton--acento:hover,
.cabecera .boton--acento:hover, .menu .boton--acento:hover {
  background: var(--acento-claro); color: var(--azul-profundo);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7);
}
.h404 { margin-top: 18px; } .legal .volver { margin-top: 28px; }

/* ---------- 17. Base neutra: portada sin imagen y estados vacíos -------- */
.portada--lisa { background: radial-gradient(120% 90% at 85% 15%, #27547F 0%, var(--antracita) 62%); }
/* Rejilla técnica en su propia capa: se desvanece hacia abajo para que no
   compita con la entradilla ni con los botones. */
.portada--lisa::before {
  display: block; content: ""; position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 48%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 48%, transparent 92%);
}
/* Resplandor de acento: da profundidad al fondo liso. Deriva muy despacio
   (sección 18); quieto si se pide menos movimiento. */
.portada--lisa::after {
  content: ""; position: absolute; z-index: -1; inset: -28% -22% auto -22%; height: 125%;
  pointer-events: none;
  background: radial-gradient(38% 38% at 50% 50%, rgba(216, 219, 222, .20), rgba(216, 219, 222, .04) 56%, transparent 72%);
}
.vacio { padding: 28px; border: 1.5px dashed var(--gris-300); border-radius: var(--radio); color: var(--tinta-suave); background: var(--blanco); max-width: 60ch; }
/* El nombre de la marca se mide contra el ancho de su propio cuadro, no
   contra el de la ventana: así no se parte a mitad de palabra. */
.sobre__cita { container-type: inline-size; }
.sobre__cita p { font-size: clamp(2.2rem, 1.4rem + 4vw, 4.4rem); overflow-wrap: break-word; word-break: normal; }
@supports (font-size: 1cqw) { .sobre__cita p { font-size: clamp(1.8rem, 15cqw, 4.2rem); } }
@media (min-width: 760px) { .servicio--destacado { grid-column: 1 / -1; } .servicio--destacado h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); } .servicio--destacado ul { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 32px; } }

/* ---------- 18. Piezas nuevas (estructura, sin movimiento) --------------
   Decoraciones que la sección 19 pone en movimiento. Se definen aparte para
   que, sin animaciones, sigan teniendo un aspecto correcto y estable.
   ------------------------------------------------------------------------ */

/* Velo bajo el menú móvil: oscurece la página y recoge el clic para cerrar. */
.menu-fondo { display: none; }
@media (max-width: 1079px) {
  .menu-fondo {
    display: block; position: absolute; inset-inline: 0; top: calc(100% + 1px); height: 100vh; z-index: 1;
    background: rgba(12, 13, 15, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  }
  .menu.abierto + .menu-fondo { opacity: 1; visibility: visible; }
}
/* Con el menú abierto, la página de debajo no se mueve. */
body.sin-scroll { overflow: hidden; }

/* Línea de acento de la tarjeta de servicio: aparece al pasar por encima y
   está siempre puesta en la tarjeta destacada. */
.servicio::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--acento);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--curva);
}
.servicio:hover::after, .servicio:focus-within::after { transform: scaleX(1); }
@media (min-width: 760px) { .servicio--destacado::after { transform: scaleX(1); } }

/* Velo inferior de la foto de la galería: sostiene el pie al pasar por encima. */
.trabajo__marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(12, 13, 15, .55), transparent 55%);
  transition: opacity .4s ease;
}
.trabajo__enlace:hover .trabajo__marco::after, .trabajo__enlace:focus-visible .trabajo__marco::after { opacity: 1; }

/* Subrayado del menú de escritorio: marca el hover y la sección en pantalla. */
@media (min-width: 1080px) {
  .menu a:not(.boton) { position: relative; }
  .menu a:not(.boton)::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
    background: var(--acento); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .3s var(--curva);
  }
  .menu a:not(.boton):hover::after,
  .menu a:not(.boton)[aria-current]::after { transform: scaleX(1); }
  .menu a[aria-current] { color: #fff; }
}

/* El botón principal gana profundidad: degradado del acento y foco de luz. */
.boton--acento { background: linear-gradient(135deg, var(--acento) 0%, var(--acento-hover) 100%); box-shadow: 0 1px 2px rgba(21, 23, 26, .18); }
.boton--acento:hover { background: linear-gradient(135deg, var(--acento-hover) 0%, #0A1F36 100%); box-shadow: 0 12px 26px -12px rgba(23, 59, 99, .8); }

/* ---------- 19. Movimiento ----------------------------------------------
   Las entradas se activan sólo tras instalar IntersectionObserver. Sin JS,
   sin soporte o con movimiento reducido, todo permanece visible. Cada
   bloque entra una vez; el foco de teclado también lo muestra de inmediato.
   El desplazamiento nativo y el control del comparador no se interceptan.
   ------------------------------------------------------------------------ */
@keyframes surgir      { from { opacity: 0; transform: translateY(28px); } }
@keyframes surgir-poco { from { opacity: 0; transform: translateY(14px); } }
@keyframes aparecer    { from { opacity: 0; } }
@keyframes crecer-x    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes visor-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes deriva {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(12%, 7%, 0) scale(1.22); }
}

@media (prefers-reduced-motion: no-preference) {

  /* 19.1 Entradas únicas. Sólo se activan tras instalar el observador JS. */
  .animar-entradas .revelar {
    opacity: 0; translate: 0 22px;
    transition: opacity .65s var(--curva) var(--demora, 0ms), translate .65s var(--curva) var(--demora, 0ms);
  }
  .animar-entradas .revelar.en-vista { opacity: 1; translate: 0 0; }
  .animar-entradas .revelar:focus-within { opacity: 1; translate: 0 0; transition: none; }
  .en-vista .etiqueta::before { transform-origin: left; animation: crecer-x .7s var(--curva) both; }

  /* 19.2 Portada: secuencia de entrada ---------------------------------- */
  .portada__in > * { animation: surgir .9s var(--curva) both; }
  .portada .etiqueta { animation: surgir-poco .7s var(--curva) both; }
  .portada h1 { animation-delay: .07s; }
  .portada__entradilla { animation-delay: .16s; }
  .portada__botones { animation-delay: .24s; }
  .portada__ficha { animation-delay: .32s; }
  /* El resplandor del fondo deriva muy despacio: da vida sin distraer. */
  .portada--lisa::after { animation: deriva 16s ease-in-out both; }

  /* 19.3 La lectura modifica el tono del cristal de la cabecera. */
  .cabecera { transition: box-shadow .3s ease; }

  /* 19.4 Tarjetas de servicio ------------------------------------------- */
  .servicio { transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .3s ease; }
  .servicio:hover, .servicio:focus-within {
    transform: translateY(-5px); border-color: var(--gris-300);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 28px 50px -26px rgba(23, 59, 99, .4);
  }
  .servicio__n { transition: color .3s ease; }
  .servicio:hover .servicio__n { color: var(--acento-texto); }
  .servicio__img { transition: transform .6s var(--curva); }
  .servicio:hover .servicio__img { transform: scale(1.03); }

  /* 19.5 Proceso: la barra de acento se dibuja al entrar y se extiende --- */
  .paso::after { transform-origin: 0 50%; transition: width .5s var(--curva); }
  .paso:hover::after { width: 100%; }
  @supports (animation-timeline: view()) {
    .paso::after { animation: crecer-x .7s var(--curva) both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
  }

  /* 19.6 Preguntas: la respuesta se despliega en vez de dar un salto ----- */
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .4s var(--curva), content-visibility .4s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
  .faq summary { transition: color .2s ease; }
  .faq summary:hover { color: var(--acento-texto); }
  .faq summary:hover::after { border-color: var(--acento); }

  /* 19.7 Botones: la flecha acompaña al cursor -------------------------- */
  .boton svg { transition: transform .3s var(--curva); }
  .boton:hover svg { transform: translateX(4px); }
  .boton--acento:hover, .boton--linea:hover { transform: translateY(-2px); }
  .boton:active { transform: translateY(1px); }

  /* 19.8 Vías de contacto ----------------------------------------------- */
  .via { transition: border-color .25s ease, background .25s ease, transform .3s var(--curva); }
  a.via:hover { transform: translateX(5px); }
  .via__ico { transition: background .3s ease, color .3s ease, transform .35s var(--curva); }
  a.via:hover .via__ico { background: var(--acento); color: #fff; transform: scale(1.08); }

  /* 19.9 Marca: un reflejo recorre únicamente ART al pulsar ------------ */
  .marca--animando .marca__pulso { animation: art-pulso .62s ease-out both; }
  .marca--animando .marca__reflejo { animation: art-reflejo .62s cubic-bezier(.2, .65, .35, 1) both; }
  @keyframes art-pulso {
    0%, 100% { opacity: 0; }
    30% { opacity: .32; }
    68% { opacity: .12; }
  }
  @keyframes art-reflejo {
    0% { transform: translateX(680px); opacity: 0; }
    18% { opacity: .85; }
    74% { opacity: .85; }
    100% { transform: translateX(2140px); opacity: 0; }
  }

  /* 19.10 Galería y visor ------------------------------------------------ */
  .trabajo__titulo, .trabajo__tipo { transition: color .25s ease; }
  .trabajo__enlace:hover .trabajo__titulo { color: var(--acento-texto); }
  .visor[open] { animation: visor-entra .35s var(--curva) both; }
  .visor::backdrop { animation: aparecer .3s ease both; }
  .visor__cerrar { transition: background .25s ease, transform .25s var(--curva); }
  .visor__cerrar:hover { transform: rotate(90deg); }

  /* 19.11 Menú móvil: los enlaces entran escalonados --------------------- */
  @media (max-width: 1079px) {
    .menu.abierto a { animation: surgir-poco .45s var(--curva) both; }
    .menu.abierto a:nth-child(1) { animation-delay: .04s; }
    .menu.abierto a:nth-child(2) { animation-delay: .08s; }
    .menu.abierto a:nth-child(3) { animation-delay: .12s; }
    .menu.abierto a:nth-child(4) { animation-delay: .16s; }
    .menu.abierto a:nth-child(5) { animation-delay: .20s; }
    .menu.abierto a:nth-child(6) { animation-delay: .24s; }
  }
  .menu-boton svg { transition: transform .3s var(--curva), opacity .2s ease; }
  .menu-boton:hover svg { transform: scale(1.08); }

  /* 19.12 WhatsApp flotante: entra al final, ya leída la portada --------- */
  .wa-flotante { animation: surgir-poco .5s var(--curva) both .9s; transition: transform .3s var(--curva), box-shadow .3s ease; }
  .wa-flotante:hover { transform: scale(1.08); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55); }

  /* 19.13 Pie ------------------------------------------------------------ */
  .credito svg { transition: opacity .25s ease; opacity: .8; }
  .credito:hover svg { opacity: 1; }

  /* 19.14 Cambio de página (a los textos legales): fundido corto --------- */
  @view-transition { navigation: auto; }
}

/* El alto se mantiene estable: el avance se expresa con el tono del cristal. */

/* ---------- 20. Páginas interiores: contacto y servicios ----------------
   Mismo sistema que la portada, en formato más corto: cabecera oscura con
   migas de pan, bloques de acción y listas de zona y servicios.
   ------------------------------------------------------------------------ */

/* Cabecera corta de página interior */
.portada--corta .portada__in { min-height: 0; padding-block: clamp(44px, 6vw, 88px) clamp(40px, 6vw, 72px); }
.portada--corta h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.7rem); max-width: 19ch; }
main > .portada--corta + .seccion { padding-top: clamp(48px, 6vw, 80px); }

/* Migas de pan */
.migas { margin-bottom: 20px; font-family: var(--mono); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; }
.migas li { color: rgba(255, 255, 255, .62); }
.migas li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .32); }
.migas a { text-decoration: none; color: rgba(255, 255, 255, .72); }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas [aria-current] { color: var(--acento-claro); }

/* Botones grandes de contacto */
.acciones { display: grid; gap: 14px; max-width: 780px; }
.accion {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; text-decoration: none;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra);
}
.accion__ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-100); color: var(--tinta); }
.accion__ico svg { width: 24px; height: 24px; }
.accion__t { display: grid; gap: 3px; flex: 1; min-width: 0; }
.accion__t strong { font-size: 1.16rem; letter-spacing: -.015em; }
.accion__t span { color: var(--tinta-suave); font-size: .96rem; }
.accion > svg { flex: none; width: 22px; height: 22px; color: var(--gris-500); }
.accion--wa .accion__ico { background: #25D366; color: #fff; }
.accion--pendiente { border-style: dashed; box-shadow: none; background: transparent; }
.oscuro .accion { background: var(--antracita-2); border-color: var(--linea-oscura); box-shadow: none; }
.oscuro .accion__ico { background: rgba(255, 255, 255, .08); color: #fff; }
.oscuro .accion__t span { color: rgba(255, 255, 255, .72); }
.oscuro .accion > svg { color: rgba(255, 255, 255, .5); }
.oscuro .accion--pendiente { background: transparent; }

/* Zona de servicio: las localidades donde se trabaja */
.localidades { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.localidades li { padding: 9px 16px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); font-size: .95rem; font-weight: 500; }

/* Lo que incluye un servicio */
.puntos { display: grid; gap: 12px; list-style: none; max-width: 820px; }
@media (min-width: 760px) { .puntos { grid-template-columns: repeat(2, 1fr); gap: 14px 44px; } }
.puntos li { position: relative; padding-left: 26px; font-size: 1.05rem; }
.puntos li::before { content: ""; position: absolute; left: 0; top: .66em; width: 14px; height: 3px; background: var(--acento); }

/* Qué conviene enviar */
.sub-sec { margin-top: clamp(40px, 5vw, 64px); font-size: 1.3rem; letter-spacing: -.02em; }
.enviar { margin-top: 18px; display: grid; gap: 10px; list-style: none; max-width: 60ch; }
.enviar li { position: relative; padding-left: 26px; color: var(--tinta-suave); }
.enviar li::before { content: ""; position: absolute; left: 0; top: .66em; width: 14px; height: 3px; background: var(--acento); }

/* Enlaces a los demás servicios: el tejido interno que reparte autoridad */
.enlaces-serv { display: grid; gap: 12px; list-style: none; }
@media (min-width: 760px) { .enlaces-serv { grid-template-columns: repeat(2, 1fr); } }
.enlaces-serv li { display: flex; }
.enlaces-serv a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  width: 100%; padding: 20px 22px; text-decoration: none;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco);
}
.enlaces-serv strong { grid-column: 1; font-size: 1.08rem; letter-spacing: -.015em; }
.enlaces-serv span { grid-column: 1; color: var(--tinta-suave); font-size: .95rem; }
.enlaces-serv a > svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--acento-claro); }

@media (prefers-reduced-motion: no-preference) {
  .accion { transition: transform .3s var(--curva), box-shadow .3s ease, border-color .25s ease; }
  a.accion:hover { transform: translateY(-3px); border-color: var(--gris-300); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 22px 40px -24px rgba(23, 59, 99, .45); }
  .accion > svg, .enlaces-serv a > svg { transition: transform .3s var(--curva); }
  a.accion:hover > svg, .enlaces-serv a:hover > svg { transform: translateX(4px); }
  .oscuro a.accion:hover { border-color: var(--acento-claro); box-shadow: none; }
  .localidades li { transition: border-color .25s ease, background .25s ease; }
  .localidades li:hover { border-color: var(--acento); background: var(--blanco); }
  .enlaces-serv a { transition: transform .3s var(--curva), border-color .25s ease, box-shadow .3s ease; }
  .enlaces-serv a:hover { transform: translateY(-3px); border-color: var(--gris-300); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 20px 36px -22px rgba(23, 59, 99, .4); }
}

/* Enlace de la tarjeta de servicio a su página: el camino de la portada a
   cada "<oficio> en Cantabria". */
.servicio__mas {
  margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .98rem; letter-spacing: -.01em; text-decoration: none; color: var(--acento-texto);
}
.servicio__mas svg { width: 18px; height: 18px; flex: none; }
.servicio__mas:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .servicio__mas svg { transition: transform .3s var(--curva); }
  .servicio:hover .servicio__mas svg { transform: translateX(4px); }
}

/* ---------- 21. Obra con antes y después -------------------------------
   El par de fotos se mantiene junto en todos los tamaños: comparar es lo
   que convence, y separarlas en móvil rompería la idea.
   ------------------------------------------------------------------------ */
.obras { display: grid; gap: clamp(52px, 7vw, 96px); }
.obra { display: grid; gap: clamp(22px, 4vw, 44px); align-items: center; }
@media (min-width: 900px) { .obra { grid-template-columns: 4fr 6fr; } }

.obra__texto h3 { margin-top: 14px; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); max-width: 18ch; }
.obra__texto p { margin-top: 16px; color: var(--tinta-suave); max-width: 46ch; }
.obra__donde { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-500); }

.obra__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 14px); }
.obra__foto { position: relative; margin: 0; }
.obra__enlace { display: block; overflow: hidden; border-radius: var(--radio); cursor: zoom-in; background: var(--gris-100); }
.obra__enlace:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 3px; }
.obra__foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.obra__foto figcaption {
  position: absolute; left: 10px; top: 10px; pointer-events: none;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 2px; background: rgba(48, 48, 48, .88); color: #fff;
}
/* El "después" se marca con el color de la marca: es el final del recorrido. */
.obra__foto:last-child figcaption { background: var(--acento); }

@media (prefers-reduced-motion: no-preference) {
  .obra__foto img { transition: transform .6s var(--curva); }
  .obra__enlace:hover img { transform: scale(1.04); }
}

/* ---------- 22. Cristal ahumado: lienzo, superficies y capas interiores -
   Las luces amplias del fondo atraviesan los paneles. El relleno de respaldo
   conserva el contraste incluso sin desenfoque; los reflejos son decorativos.
   ------------------------------------------------------------------------ */
body {
  background:
    radial-gradient(ellipse at 0% 8%, rgba(228, 222, 199, .25), transparent 43%),
    radial-gradient(ellipse at 100% 45%, rgba(187, 213, 215, .22), transparent 48%),
    radial-gradient(ellipse at 25% 100%, rgba(234, 216, 182, .17), transparent 50%),
    linear-gradient(145deg, #363D3F, #252C2F 55%, #323A3C);
  background-attachment: fixed;
  text-wrap: pretty;
}
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-weight: 550; letter-spacing: -.05em; }
h3 { font-weight: 600; }

:is(.cristal, .servicio, .accion, .enlaces-serv a, .trabajo__enlace, .obra, .faq details, .paso, .via, .vacio, .nota-legal, .llamada-contacto) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025)), rgba(30, 33, 38, .94);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 1px 0 0 rgba(255, 255, 255, .07),
    0 8px 18px -12px rgba(0, 0, 0, .35),
    0 30px 70px -35px rgba(0, 0, 0, .55);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :is(.cristal, .servicio, .accion, .enlaces-serv a, .trabajo__enlace, .obra, .faq details, .paso, .via, .vacio, .nota-legal, .llamada-contacto) {
    background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .035)), rgba(20, 23, 27, .12);
    -webkit-backdrop-filter: blur(28px) saturate(1.1);
    backdrop-filter: blur(28px) saturate(1.1);
  }
}
.oscuro, .banda {
  background: linear-gradient(130deg, rgba(255, 255, 255, .035), rgba(12, 14, 18, .14));
  border-block: 1px solid rgba(255, 255, 255, .07);
}
.oscuro .accion, .oscuro .cristal, .portada .cristal {
  background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025)), rgba(20, 23, 27, .22);
  border-color: rgba(255, 255, 255, .17);
}
.pie { background: rgba(12, 14, 18, .36); border-top: 1px solid rgba(255, 255, 255, .10); padding-bottom: 100px; }
.marca { background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .72); border-radius: 14px; box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .25); }
.boton { border-radius: 6px 16px 6px 6px; }
.servicio ul { padding: 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: rgba(255, 255, 255, .045); }
.servicio li::before, .puntos li::before, .enviar li::before { background: var(--acento-claro); }
.servicio::after { background: linear-gradient(90deg, transparent, rgba(127, 168, 217, .55), transparent); height: 1px; }
.servicio:hover, .enlaces-serv a:hover, a.accion:hover, a.via:hover { border-color: rgba(255, 255, 255, .35); background-color: rgba(255, 255, 255, .05); }
.pasos { gap: 16px; }
.paso { padding: 26px; }
.paso::after { display: none; }
.faq { max-width: 960px; border: 0; display: grid; gap: 12px; }
.faq details { padding-inline: clamp(18px, 3vw, 28px); }
.faq summary { padding-block: 22px; }
.faq summary::after { background: rgba(255, 255, 255, .055); }
.localidades li { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .17); }
.localidades li:hover { background: rgba(255, 255, 255, .10); border-color: var(--acento-claro); }
.obra { padding: clamp(18px, 3vw, 36px); }
.obra__proceso { grid-column: 1 / -1; }
.galeria { margin-top: 32px; gap: 24px; }
.trabajo__enlace { padding: 10px; height: 100%; }
.trabajo__marco { border-radius: 16px; }
.trabajo__pie { padding: 18px 12px 14px; }
.llamada-contacto { margin-top: clamp(32px, 4vw, 52px); padding: clamp(22px, 3vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; }
.llamada-contacto__texto { max-width: 56ch; }
.llamada-contacto__texto h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); letter-spacing: -.03em; }
.llamada-contacto__texto p { margin-top: 8px; color: var(--tinta-suave); font-size: 1rem; }
.llamada-contacto__acciones { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.llamada-contacto .boton--linea { border-color: rgba(255, 255, 255, .35); }
@media (max-width: 1099px) { .llamada-contacto { flex-direction: column; align-items: flex-start; } }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  .servicio ul { padding: 14px; }
  .obra { padding: 14px; border-radius: 24px; }
  .llamada-contacto__acciones, .llamada-contacto__acciones .boton { width: 100%; }
  .llamada-contacto__acciones .boton { padding-inline: 18px; }
}

/* ---------- 23. Comparador deslizante antes / después ------------------
   Sin JavaScript se queda partido al 50 %: se ven las dos mitades con sus
   rótulos, que ya es una comparación legible. El JavaScript añade el mando
   (un input de rango), que trae gratis el arrastre con ratón, el táctil y
   el manejo con las flechas del teclado.
   ------------------------------------------------------------------------ */
.comparador {
  --pos: 50%;
  position: relative; overflow: hidden; border-radius: var(--radio);
  background: var(--gris-100); aspect-ratio: 3 / 4; touch-action: pan-y;
  box-shadow: 0 1px 2px rgba(23, 59, 99, .08), 0 22px 44px -26px rgba(23, 59, 99, .45);
}
.comparador--apaisada { aspect-ratio: 4 / 3; }
.comparador figure { margin: 0; }
.comparador img { display: block; width: 100%; height: 100%; object-fit: cover; }
.comparador__cara { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.comparador__cara--despues { z-index: 1; clip-path: inset(0 0 0 var(--pos)); }
.comparador__rotulo {
  position: absolute; top: 12px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 2px; color: #fff;
}
.comparador__rotulo--antes { left: 12px; background: rgba(48, 48, 48, .88); }
.comparador__rotulo--despues { right: 12px; background: var(--acento); }

/* Línea y tirador */
.comparador::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: #fff; z-index: 3; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(23, 59, 99, .25);
}
.comparador::before {
  content: ""; position: absolute; top: 50%; left: var(--pos); z-index: 4; pointer-events: none;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173B63' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l-5 5 5 5M14 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  box-shadow: 0 2px 10px rgba(23, 59, 99, .45);
}
/* El mando lo crea el JavaScript; va invisible y cubriendo todo. */
.comparador__mando {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.comparador__mando::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.comparador__mando::-moz-range-thumb { width: 46px; height: 100%; border: 0; border-radius: 0; }
.comparador:focus-within { outline: 3px solid var(--acento-claro); outline-offset: 3px; }

/* Tira de proceso: las fotos de la obra a medio hacer, en segundo plano. */
.obra__proceso { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.obra__proceso li { width: clamp(84px, 22%, 128px); }
.obra__proceso .obra__foto img { aspect-ratio: 1; }
.obra__proceso figcaption { font-size: .6rem; padding: 4px 7px; left: 6px; top: 6px; }

/* ---------- 24. Cristal compartido: navegación y tarjeta de estrellas --
   --lectura llega del JS (0..1). El relleno avanza de izquierda a derecha
   sólo en la cabecera. El material se define una vez para ambas superficies;
   el panel de portada conserva su cristal ahumado independiente.
   ------------------------------------------------------------------------ */
.portada__panel {
  background:
    radial-gradient(ellipse at var(--luz-x, 50%) var(--luz-y, 12%), rgba(238, 249, 255, .18), rgba(255, 255, 255, .025) 42%, transparent 72%),
    linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, .035) 43%, transparent 55%),
    linear-gradient(152deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .015)), rgba(23, 29, 30, .44);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}
.cabecera, .sobre__cita {
  --cristal-velo-logo: linear-gradient(180deg, rgba(238, 246, 250, .26), rgba(238, 246, 250, .26) clamp(76px, 8vw, 120px), transparent clamp(128px, 12vw, 180px));
  border: 1px solid rgba(246, 252, 255, .68);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at var(--luz-x, 18%) var(--luz-y, 0%), rgba(255, 255, 255, .10), transparent 62%),
    linear-gradient(118deg, transparent 20%, rgba(255, 255, 255, .025) 37%, rgba(255, 255, 255, .10) 41%, rgba(255, 255, 255, .025) 46%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .015) 12%, rgba(255, 255, 255, .01) 80%, rgba(255, 255, 255, .12)),
    var(--cristal-velo-logo), rgba(17, 26, 31, .10);
  -webkit-backdrop-filter: blur(14px) saturate(1.18) brightness(1.03);
  backdrop-filter: blur(14px) saturate(1.18) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(255, 255, 255, .24),
    0 2px 5px rgba(12, 25, 33, .06),
    0 22px 46px -26px rgba(5, 19, 29, .42);
}
.cabecera {
  --lectura: 0;
  position: sticky; top: 10px; z-index: 50;
  isolation: isolate;
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
  color: #F2F6FA;
}
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(152deg, rgba(220, 241, 255, .05), transparent 54%),
    linear-gradient(110deg, rgba(110, 183, 230, .10), rgba(158, 209, 242, .08) 48%, rgba(96, 169, 222, .14));
  clip-path: inset(0 calc((1 - var(--lectura)) * 100%) 0 0);
}
/* La portada empieza en y=0 también en las páginas interiores, para que
   ningún cambio de fondo atraviese el cristal de la barra. */
.cabecera--sobre-foto, .cabecera--sobre-portada { position: fixed; inset-inline: 0; }
.cabecera--sobre-foto + main .portada__in { padding-top: clamp(136px, 14vw, 196px); }
.cabecera--sobre-portada + main .portada--corta .portada__in { padding-top: clamp(124px, 11vw, 154px); }
.cabecera .contenedor { position: relative; z-index: 1; width: 100%; padding-inline: clamp(14px, 1.8vw, 22px); }
.cabecera .marca { position: relative; padding: 8px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
/* Sólo se encuadran los márgenes transparentes del PNG, sin modificar el archivo. */
.cabecera .marca img { width: 180px; height: 50px; object-fit: cover; filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .65)); }
@media (min-width: 560px) { .cabecera .marca img { width: 230px; height: 64px; } }
.cabecera .menu a:not(.boton) { color: #F2F6FA; }
.cabecera .menu-boton { color: #F2F6FA; background: rgba(12, 20, 26, .64); border: 1px solid rgba(255, 255, 255, .30); border-radius: 8px; }
.cabecera .boton--acento { background: linear-gradient(135deg, #F6FAFD, #D3E6F6); color: #153B5A; border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 #FFF, 0 4px 12px -6px rgba(0, 0, 0, .45); }
.cabecera .boton--acento:hover { background: #FFFFFF; color: #153B5A; }
.cabecera :focus-visible, .cabecera .boton:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 6px rgba(12, 24, 34, .82); }
/* Sin backdrop-filter, el color sólido mantiene la legibilidad. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cabecera, .sobre__cita { background: var(--cristal-velo-logo), rgba(27, 30, 35, .92); }
}
/* El salto a un ancla tiene que contar también el aire de arriba. */
html { scroll-padding-top: calc(var(--cab) + 26px); }

@media (max-width: 1079px) {
  .menu {
    position: absolute; top: calc(100% + 12px); border-radius: 24px;
    max-height: calc(100vh - var(--cab) - 44px);
    max-height: calc(100dvh - var(--cab) - 44px);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(152deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .025)), rgba(22, 31, 38, .88); border: 1px solid rgba(232, 243, 250, .40);
    -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 24px 50px -20px rgba(0, 0, 0, .45);
  }
  .cabecera .menu a:not(.boton) { border-bottom-color: rgba(255, 255, 255, .12); }
  .cabecera .menu a:not(.boton):hover, .cabecera .menu a[aria-current]:not(.boton) { color: #FFFFFF; background: rgba(255, 255, 255, .10); }
  body.sin-scroll .wa-flotante { visibility: hidden; pointer-events: none; }
  /* El velo, en cambio, tapa toda la ventana, no sólo el ancho de la barra. */
  .menu-fondo { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
}
@media (min-width: 1080px) {
  .menu { padding: 4px; gap: 0; border-radius: 999px; background: rgba(12, 20, 26, .64); border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20); }
  .menu a { border-radius: 999px; }
  .menu a:not(.boton)::after { display: none; }
  .cabecera .menu a:not(.boton):hover, .cabecera .menu a[aria-current] { color: #FFFFFF; background: rgba(255, 255, 255, .10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); }
}

/* ---------- 25. Portada: escena de obra y panel de cristal -------------
   Una foto de obra propia al fondo y, encima, un panel de cristal que
   parece separado de ella. La cuadrícula técnica desaparece: competía con
   el titular y no aportaba nada.
   ------------------------------------------------------------------------ */
.portada--escena { background: linear-gradient(158deg, #3C4148 0%, var(--antracita) 52%, #191C21 100%); }
.portada--lisa::before { display: none; }

.portada__escena { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.portada__marco { position: absolute; inset: -4%; display: block; will-change: transform; }
.portada__marco img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
/* Velo: la foto tiene que sostener texto encima sin pelearse con él. */
.portada__escena::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(24, 27, 31, .55) 0%, rgba(24, 27, 31, .34) 38%, rgba(24, 27, 31, .08) 70%, rgba(24, 27, 31, .16) 100%),
    linear-gradient(180deg, rgba(24, 27, 31, .12) 0%, transparent 30%, rgba(24, 27, 31, .26) 100%);
}
/* En ancho, la foto sigue ocupando toda la portada y es el velo —no un
   recorte— el que la deja respirar a la derecha. Un corte vertical duro
   partía la imagen por la mitad y se notaba más que el propio cristal. */
@media (min-width: 900px) {
  .portada__escena::after {
    background:
      linear-gradient(94deg, rgba(24, 27, 31, .54) 0%, rgba(24, 27, 31, .34) 26%, rgba(24, 27, 31, .04) 58%, transparent 100%),
      linear-gradient(180deg, rgba(24, 27, 31, .10) 0%, transparent 32%, rgba(24, 27, 31, .25) 100%);
  }
}

.portada--escena .portada__in { position: relative; z-index: 2; min-height: min(84svh, 800px); }
.portada__panel {
  position: relative; max-width: 42rem; isolation: isolate;
  padding: clamp(24px, 3.4vw, 42px);
  border: 1px solid rgba(232, 243, 250, .45);
  border-radius: 20px 44px 20px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 1px 0 0 rgba(255, 255, 255, .12),
    0 2px 3px rgba(0, 0, 0, .08),
    0 35px 65px -32px rgba(0, 0, 0, .70);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .portada__panel { background: rgba(27, 30, 35, .92); }
}
.portada--escena h1 { max-width: 15ch; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem); }
.portada--escena .portada__entradilla { max-width: 40ch; }
.portada--escena .portada__ficha { margin-top: clamp(26px, 3vw, 38px); padding-top: 20px; border-top-color: rgba(255, 255, 255, .18); }

/* ---------- 26. El momento de entrada de la portada --------------------
   Tres cosas coordinadas, no un fundido:
   1. la foto ya llena la pantalla y se acerca suavemente a su encuadre;
   2. el panel de cristal se barre de izquierda a derecha, un poco después;
   3. el texto entra dentro del panel, ya abierto.
   Después, el cursor separa las capas y la lectura tiñe la cabecera.
   Todo vive dentro de "sin preferencia de movimiento": con movimiento
   reducido la portada aparece quieta y completa.
   ------------------------------------------------------------------------ */
@keyframes encuadrar-escena { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes abrir-panel  { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  .portada--escena .portada__marco img { animation: encuadrar-escena 1.5s var(--curva) both; }
  .portada--escena .portada__panel  { animation: abrir-panel .85s cubic-bezier(.76, 0, .24, 1) backwards .26s; }

  /* El texto entra dentro del panel: por eso arranca después que él. */
  .portada__panel > * { animation: surgir .8s var(--curva) both .52s; }
  .portada .etiqueta { animation: surgir-poco .7s var(--curva) both .52s; }
  .portada h1 { animation-delay: .60s; }
  .portada__entradilla { animation-delay: .68s; }
  .portada__botones { animation-delay: .76s; }
  .portada__ficha { animation-delay: .84s; }

  /* Profundidad con el cursor: la foto se mueve al contrario que el reflejo,
     que es lo que hace que las capas parezcan separadas. Sin inclinaciones
     ni halos: sólo desplazamiento. */
  .portada__marco {
    transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -11px + var(--escena-avance, 0) * 38px), 0) scale(calc(1.06 + var(--escena-avance, 0) * .025));
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  /* Sin opacidad animada en el contenedor: el cristal necesita muestrear
     la fotografía que está detrás, fuera de este grupo de contenido. */
}

/* En móvil no hay cursor: la foto se queda quieta y basta con la entrada. */
@media (hover: none), (pointer: coarse) {
  .portada__marco { transform: scale(1.04); }
}

/* ---------- 27. Jerarquía de servicios ---------------------------------
   Los oficios sueltos van en filas compactas: no necesitan el mismo peso
   que la reforma integral, los baños o las cocinas, que es lo que más se
   pide y lo que se busca en Google.
   ------------------------------------------------------------------------ */
.enlaces-serv--compacta { margin-top: 18px; }
@media (min-width: 760px) {
  .enlaces-serv--compacta { grid-template-columns: repeat(2, 1fr); }
  .enlaces-serv--compacta a { padding: 16px 20px; }
  .enlaces-serv--compacta strong { font-size: 1rem; }
  .enlaces-serv--compacta span { font-size: .9rem; }
}
.servicios .servicio:not(.servicio--destacado) .servicio__n { color: var(--acento-texto); }

/* ---------- 28. Luz, cantos y profundidad ------------------------------
   La galería clara da aire entre los paneles de grafito. La luz cálida es
   un reflejo de material; el azul del logo conserva su papel de acento.
   ------------------------------------------------------------------------ */
.portada .etiqueta, .oscuro .etiqueta { color: #E3DDCA; }
.portada .etiqueta::before, .oscuro .etiqueta::before { background: currentColor; }
.portada__ficha li::before { color: #DDD8C9; }
.portada--escena h1 { line-height: 1.1; }
.servicio, .trabajo__enlace, .accion, .llamada-contacto { isolation: isolate; }
.trabajo__enlace, .accion, .llamada-contacto { position: relative; }
:is(.servicio, .trabajo__enlace, .accion, .llamada-contacto)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(520px circle at var(--luz-x, 50%) var(--luz-y, 12%), rgba(248, 238, 211, .10), transparent 65%);
}
.servicio__n { font-family: var(--titular); letter-spacing: -.04em; font-size: 1rem; }
.llamada-contacto { border-left: 2px solid #D9D4C2; }
.llamada-contacto__texto h3 { line-height: 1.3; }
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .24) 48%, transparent 76%);
  transform: translateX(-120%);
}
.boton--acento { border-color: rgba(255, 255, 255, .17); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 5px 0 rgba(0, 0, 0, .12), 0 12px 24px -14px rgba(0, 0, 0, .6); }
.portada .boton--acento, .oscuro .boton--acento {
  background: linear-gradient(120deg, #F7F5ED, #E3EBE9); color: #19343D;
  box-shadow: inset 0 1px 0 #FFF, 0 4px 0 rgba(216, 228, 225, .22), 0 12px 26px -12px rgba(0, 0, 0, .6);
}
.portada .boton--acento:hover, .oscuro .boton--acento:hover { background: #FFFFFF; color: #173B63; }
.boton--linea { border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .05); }
.portada__botones .boton--acento svg { width: 32px; height: 32px; padding: 6px; margin-right: -10px; margin-left: 6px; background: rgba(23, 59, 99, .08); border-radius: 3px; }
.cabecera .boton { border-radius: 5px 14px 5px 5px; font-weight: 600; }
.wa-flotante { border-radius: 8px 20px 8px 8px; }
@media (max-width: 559px) { .wa-flotante { border-radius: 16px; } }
@media (min-width: 1080px) { .menu { border-radius: 12px; } .menu a { border-radius: 8px; } }

#trabajos {
  --tinta: #26343A; --tinta-suave: #4E5C60; --gris-500: #536369; --acento-texto: #173B63;
  color: var(--tinta);
  background: radial-gradient(ellipse at 0 0, rgba(255, 248, 223, .55), transparent 50%),
              linear-gradient(135deg, #E5EBE9, #F0F1EB 52%, #DCE6E6);
  border-block: 1px solid rgba(255, 255, 255, .7);
}
#trabajos :is(.obra, .trabajo__enlace, .llamada-contacto, .vacio) {
  background: linear-gradient(140deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .22));
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #FFF, 0 5px 14px -10px rgba(32, 50, 53, .16), 0 28px 50px -36px rgba(32, 50, 53, .28);
}
#trabajos .etiqueta::before { background: #173B63; }
#trabajos .llamada-contacto { border-left-color: #173B63; }
#trabajos .boton--linea { border-color: rgba(23, 59, 99, .35); }
#trabajos .boton--linea:hover { background: rgba(23, 59, 99, .06); }
#trabajos .trabajo__enlace:hover .trabajo__titulo { color: #173B63; }
#trabajos :focus-visible, #trabajos .comparador:focus-within { outline-color: #173B63; }
#trabajos .visor { color: #F2F3F5; }
#trabajos .visor :focus-visible { outline-color: #7FA8D9; }

@keyframes brillo-boton { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: no-preference) {
  .boton:hover::before, .boton:focus-visible::before { animation: brillo-boton .65s ease-out; }
  .animar-entradas .servicio {
    transition: opacity .65s var(--curva) var(--demora, 0ms), translate .65s var(--curva) var(--demora, 0ms), transform .4s var(--curva), box-shadow .4s var(--curva), border-color .3s ease;
  }
  .servicio:hover, .servicio:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 35px 65px -30px rgba(0, 0, 0, .55); }
  .trabajo__enlace { transition: transform .4s var(--curva), box-shadow .4s var(--curva); }
  .trabajo__enlace:hover { transform: translateY(-5px); }
}

/* ---------- 29. Escena continua y detalles de interacción -------------
   Foto y cristal viajan a distinta velocidad. El panel sólo se inclina con
   cursor preciso; en táctil conservamos el desplazamiento pequeño de la foto.
   Las entradas y los trazos ocurren una vez, sin distracciones en bucle.
   ------------------------------------------------------------------------ */
.trabajo__pie { position: relative; padding-right: 62px; }
.trabajo__abrir {
  position: absolute; right: 12px; top: 50%; margin-top: -20px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(23, 59, 99, .24); border-radius: 5px 12px 5px 5px;
  color: var(--acento-texto); background: rgba(255, 255, 255, .32);
}
.trabajo__abrir svg { width: 21px; height: 21px; transform: rotate(-45deg); }
.paso::before { font-family: var(--titular); font-size: 2.3rem; font-weight: 350; line-height: 1; letter-spacing: -.06em; color: #E3DDCA; }
.paso::after, .paso:hover::after {
  display: block; top: 80px; left: 26px; width: calc(100% - 52px); height: 1px;
  background: linear-gradient(90deg, #E3DDCA, rgba(227, 221, 202, .12));
  animation: none;
}
.paso h3 { margin-top: 34px; }
.llamada-contacto::after {
  content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px;
  pointer-events: none; transform-origin: left;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
}
@keyframes descubrir-foto { from { clip-path: inset(0 0 24% 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
@media (prefers-reduced-motion: no-preference) {
  .portada__panel {
    transform: perspective(1400px) translateY(calc(var(--escena-avance, 0) * -12px)) rotateX(calc(var(--inclina-x, 0) * .8deg)) rotateY(calc(var(--inclina-y, 0) * 1deg));
    transition: transform .5s var(--curva), box-shadow .5s var(--curva);
  }
  .trabajo.en-vista .trabajo__marco { animation: descubrir-foto 1.15s var(--curva) both .1s; }
  .paso.en-vista::after { animation: crecer-x .9s var(--curva) both var(--demora, 0ms); }
  .llamada-contacto.en-vista::after { animation: crecer-x 1s var(--curva) both .18s; }
  .trabajo__abrir { transition: background .3s ease, color .3s ease, border-color .3s ease; }
  .trabajo__abrir svg { transition: transform .4s var(--curva); }
  .trabajo__enlace:is(:hover, :focus-visible) .trabajo__abrir { background: var(--acento); color: #FFF; border-color: var(--acento); }
  .trabajo__enlace:is(:hover, :focus-visible) .trabajo__abrir svg { transform: rotate(-45deg) translateX(2px); }
  .obra__enlace { transition: transform .35s var(--curva), box-shadow .35s ease; }
  .obra__enlace:is(:hover, :focus-visible) { transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgba(23, 59, 99, .5); }
}
@media (max-width: 559px) and (prefers-reduced-motion: no-preference) {
  .portada__panel { transform: none; }
  .portada__marco { transform: translateY(calc(var(--escena-avance, 0) * 18px)) scale(1.04); }
}

/* ---------- 30. Accesos QR: estilos en landing.css ------------------- */

/* ---------- 31. Cinco estrellas como objetivo de servicio --------------
   No representa una media de reseñas: la promesa aparece escrita junto a
   la animación. Sin JS o movimiento reducido, las estrellas quedan completas.
   ------------------------------------------------------------------------ */
.sobre__cita { aspect-ratio: auto; min-height: 440px; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 34px; }
.sobre__cita .calidad__etiqueta { font-family: var(--fuente); font-size: .72rem; font-weight: 600; line-height: 1.5; letter-spacing: .14em; color: #E4EFF8; }
.calidad__titulo { margin-top: 16px; max-width: 16ch; font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 550; line-height: 1.15; }
.calidad__estrellas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(100%, 300px); margin-block: 26px; }
.calidad__estrella { display: grid; aspect-ratio: 1; }
.calidad__estrella svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.calidad__contorno { fill: rgba(163, 210, 246, .05); stroke: rgba(188, 222, 249, .55); stroke-width: 1; stroke-linejoin: round; }
.calidad__relleno { fill: #B9DDF7; stroke: #E3F3FF; stroke-width: .4; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(136, 198, 245, .25)); }
.sobre__cita .calidad__texto { font-family: var(--fuente); font-size: 1rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: #F3F6F9; }
@keyframes completar-estrella { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  .animar-entradas .sobre__cita:not(.en-vista) .calidad__relleno { clip-path: inset(0 100% 0 0); }
  .animar-entradas .sobre__cita.en-vista .calidad__relleno { animation: completar-estrella .6s var(--curva) both .2s; }
  .animar-entradas .sobre__cita.en-vista .calidad__estrella:nth-child(2) .calidad__relleno { animation-delay: .42s; }
  .animar-entradas .sobre__cita.en-vista .calidad__estrella:nth-child(3) .calidad__relleno { animation-delay: .64s; }
  .animar-entradas .sobre__cita.en-vista .calidad__estrella:nth-child(4) .calidad__relleno { animation-delay: .86s; }
  .animar-entradas .sobre__cita.en-vista .calidad__estrella:nth-child(5) .calidad__relleno { animation-delay: 1.08s; }
}

/* El PNG del pie se apoya en la propia sección, sin placa ni recuadro. */
.pie { color: #354B58; background: linear-gradient(135deg, #EBF0F2, #D9E4E9); border-top-color: rgba(255, 255, 255, .65); }
.pie .marca { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pie .marca img { width: 260px; height: auto; }
.pie a:hover, .pie .credito:hover { color: #173B63; }
.pie .credito { color: #526570; }
.pie__base { border-top-color: rgba(23, 59, 99, .16); }
.pie :focus-visible { outline-color: #173B63; }

/* ---------- 32. Proceso: caída en perspectiva ligada al scroll -----------
   El RAF de scroll escribe --paso-avance de 0 a 1, sin transiciones temporales.
   Las tarjetas llegan desde arriba y desde el fondo, con un giro alterno.
   El acabado y la maquetación del cristal se conservan. Sin JS, sin observador
   o con movimiento reducido, las tarjetas y sus trazos aparecen completos.
   ------------------------------------------------------------------------ */
.pasos .paso.revelar {
  opacity: 1; translate: none; transform: none; animation: none; transition: none;
}
.pasos .paso::after { animation: none; transition: none; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .animar-pasos .pasos .paso.revelar {
    --caida-altura: -144px; --caida-giro: -7deg; --caida-lateral: -28px;
    --caida-fondo: -100px; --caida-inclinacion: 24deg; --caida-escala: .84;
    --caida-restante: calc(1 - var(--paso-avance, 1));
    opacity: clamp(0, calc(var(--paso-avance, 1) * 1.65), 1);
    transform-origin: 50% 70%;
    transform: perspective(1000px)
      translate3d(calc(var(--caida-restante) * var(--caida-lateral)), calc(var(--caida-restante) * var(--caida-altura)), calc(var(--caida-restante) * var(--caida-fondo)))
      rotateX(calc(var(--caida-restante) * var(--caida-inclinacion)))
      rotateZ(calc(var(--caida-restante) * var(--caida-giro)))
      scale(calc(var(--caida-escala) + var(--paso-avance, 1) * (1 - var(--caida-escala))));
  }
  .animar-pasos .pasos .paso:nth-child(2) { --caida-giro: 5deg; --caida-lateral: 16px; }
  .animar-pasos .pasos .paso:nth-child(3) { --caida-giro: -5deg; --caida-lateral: -16px; }
  .animar-pasos .pasos .paso:nth-child(4) { --caida-giro: 7deg; --caida-lateral: 28px; }
  .animar-pasos .pasos .paso::after {
    transform-origin: left; transform: scaleX(var(--paso-avance, 1));
  }
  .animar-pasos .pasos .paso.revelar:is(.paso--foco, :focus-within) {
    opacity: 1; transform: none;
  }
  .animar-pasos .pasos .paso:is(.paso--foco, :focus-within)::after {
    transform: none;
  }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .animar-pasos .pasos .paso.revelar {
    --caida-altura: -88px; --caida-giro: -3deg; --caida-lateral: -10px;
    --caida-fondo: -60px; --caida-inclinacion: 16deg; --caida-escala: .90;
  }
  .animar-pasos .pasos .paso.revelar:nth-child(even) { --caida-giro: 3deg; --caida-lateral: 10px; }
}