/* ==========================================================================
   NIDO SIP HOMES · Hoja de estilos
   --------------------------------------------------------------------------
   Índice
     01. Tokens de diseño
     02. Reinicio y base
     03. Utilidades y tipografía de sección
     04. Encabezado y navegación
     05. Portada
     06. Cinta de atributos
     07. Nosotros
     08. Sistema SIP
     09. Servicios
     10. Proyectos y galería
     11. Proceso
     12. Llave en mano
     13. Zonas de atención
     14. Preguntas frecuentes
     15. Contacto y formulario
     16. Pie de página
     17. Botones flotantes
     18. Visor y diálogos
     19. Aviso flotante (toast)
     20. Movimiento reducido e impresión
   ========================================================================== */

/* ==========================================================================
   01. TOKENS DE DISEÑO
   ========================================================================== */

:root {
  /* --- Paleta ------------------------------------------------------------
     Derivada del logotipo original: verde bosque muy profundo y ocre cálido.
     El resto son neutros cálidos para que la fotografía mande. */
  --hueso:        #F8F5EF;
  --hueso-2:      #F1ECE2;
  --arena:        #E7DED0;
  --arena-2:      #D8CBB8;
  --piedra:       #8E8578;
  --piedra-2:     #B7AEA1;

  --carbon:       #17150F;
  --carbon-2:     #2B2721;
  --carbon-3:     #4A453C;

  --verde:        #1B2C12;
  --verde-2:      #22381A;
  --verde-3:      #2E4A22;

  --ocre:         #B07E4D;   /* decorativo, iniciales y filetes */
  --ocre-fuerte:  #96683C;   /* fondos de botón: cumple contraste AA */
  --ocre-claro:   #C99A66;

  --texto:        #17150F;
  --texto-2:      #6B6357;
  --texto-3:      #8B8377;

  --linea:        #DCD4C6;
  --linea-2:      #EDE7DB;

  --blanco:       #FFFFFF;
  --error:        #9B2C1E;
  --exito:        #2F6B3E;

  /* --- Tipografía -------------------------------------------------------- */
  --display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --texto-f: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida: cada tamaño se adapta sin saltos de media query */
  --t-hero:   clamp(2.7rem, 7.2vw, 6.4rem);
  --t-h2:     clamp(1.95rem, 4.3vw, 3.85rem);
  --t-h3:     clamp(1.12rem, 1.55vw, 1.4rem);
  --t-h4:     clamp(1rem, 1.15vw, 1.1rem);
  --t-lead:   clamp(1.05rem, 1.3vw, 1.28rem);
  --t-body:   clamp(0.97rem, 1vw, 1.04rem);
  --t-small:  clamp(0.82rem, 0.9vw, 0.88rem);
  --t-label:  0.72rem;
  --t-num:    clamp(2.4rem, 3.6vw, 3.4rem);

  /* --- Espaciado --------------------------------------------------------- */
  --e-1: 0.375rem;
  --e-2: 0.75rem;
  --e-3: 1.125rem;
  --e-4: 1.75rem;
  --e-5: 2.5rem;
  --e-6: 4rem;
  --e-7: clamp(4rem, 8vw, 7.5rem);
  --e-8: clamp(5.5rem, 11vw, 10rem);

  --margen: clamp(1.15rem, 4.5vw, 4.5rem);
  --ancho: 1440px;
  --ancho-texto: 34rem;

  --cabecera-alto: 4.75rem;

  /* --- Curvas y tiempos -------------------------------------------------- */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.33, 1, 0.68, 1);
  --d-rapido: 180ms;
  --d-medio: 380ms;
  --d-lento: 760ms;
}

/* ==========================================================================
   02. REINICIO Y BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* El encabezado fijo no debe tapar el destino de los enlaces internos. */
  scroll-padding-top: calc(var(--cabecera-alto) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texto-f);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--texto);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Evita el desplazamiento horizontal por elementos que se salen del lienzo. */
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

input, select, textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* Foco visible y consistente en todo el sitio. */
:focus-visible {
  outline: 2px solid var(--ocre-fuerte);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--verde);
  color: var(--hueso);
}

/* Enlace de salto: invisible hasta que recibe foco por teclado. */
.salto-contenido {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--carbon);
  color: var(--hueso);
  font-size: var(--t-small);
  transition: transform var(--d-rapido) var(--curva);
}

.salto-contenido:focus {
  transform: translate(-50%, 0);
}

/* ==========================================================================
   03. UTILIDADES Y TIPOGRAFÍA DE SECCIÓN
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.contenedor--estrecho {
  max-width: 62rem;
}

.seccion {
  padding-block: var(--e-8);
  position: relative;
}

.seccion + .seccion {
  border-top: 1px solid var(--linea);
}

.seccion__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 56rem;
  margin-bottom: var(--e-7);
}

.seccion__cabecera--fila {
  max-width: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
}

/* Índice numerado: 01 · Nosotros */
.indice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.indice__num {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ocre);
  font-variant-numeric: tabular-nums;
}

.indice--claro {
  color: rgb(248 245 239 / 0.66);
}

.indice--claro .indice__num {
  color: var(--ocre-claro);
}

.titulo-seccion {
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.018em;
  /* Las variantes ópticas hacen que el display se afine en tamaños grandes */
  font-variation-settings: 'opsz' 120;
  text-wrap: balance;
}

.titulo-seccion em {
  font-style: italic;
  font-weight: 300;
  color: var(--carbon-2);
}

.titulo-seccion--claro {
  color: var(--hueso);
}

.titulo-seccion--claro em {
  color: var(--arena-2);
}

.seccion__intro {
  max-width: var(--ancho-texto);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--texto-2);
}

.seccion__intro--claro {
  color: rgb(248 245 239 / 0.72);
}

.entradilla {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--texto);
  max-width: 40rem;
}

.mini-titulo {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: var(--e-3);
}

/* --- Botones ------------------------------------------------------------ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.65rem;
  font-family: var(--texto-f);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background-color var(--d-rapido) var(--curva),
              color var(--d-rapido) var(--curva),
              border-color var(--d-rapido) var(--curva),
              transform var(--d-rapido) var(--curva);
  will-change: transform;
}

.boton:active {
  transform: translateY(1px);
}

.boton--carbon {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--hueso);
}

.boton--carbon:hover {
  background: var(--verde);
  border-color: var(--verde);
}

.boton--ocre {
  background: var(--ocre-fuerte);
  border-color: var(--ocre-fuerte);
  color: #fff;
}

.boton--ocre:hover {
  background: #7F572F;
  border-color: #7F572F;
}

.boton--claro {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--carbon);
}

.boton--claro:hover {
  background: var(--arena);
  border-color: var(--arena);
}

.boton--contorno {
  background: transparent;
  border-color: rgb(248 245 239 / 0.42);
  color: var(--hueso);
}

.boton--contorno:hover {
  background: rgb(248 245 239 / 0.1);
  border-color: var(--hueso);
}

.boton--fantasma {
  background: transparent;
  border-color: var(--linea);
  color: var(--texto);
}

.boton--fantasma:hover {
  border-color: var(--carbon);
}

/* ==========================================================================
   04. ENCABEZADO Y NAVEGACIÓN
   ========================================================================== */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--cabecera-alto);
  display: flex;
  align-items: center;
  transition: background-color var(--d-medio) var(--curva),
              box-shadow var(--d-medio) var(--curva),
              border-color var(--d-medio) var(--curva);
  border-bottom: 1px solid transparent;
}

.cabecera__interior {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

/* --- Marca --------------------------------------------------------------- */

.marca {
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.marca__logo {
  width: clamp(92px, 8.4vw, 122px);
  height: auto;
  transition: opacity var(--d-medio) var(--curva);
}

/* Sobre la fotografía, el logotipo va en blanco; al desplazar, recupera su
   color original. El cambio de archivo lo hace el JS porque son dos PNG. */
.cabecera[data-estado="desplazado"] .marca__logo {
  /* nada extra: el src ya cambia */
}

/* --- Navegación de escritorio -------------------------------------------- */

.navegacion {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin-left: auto;
}

.navegacion__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.75rem);
}

.navegacion__enlace {
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  color: rgb(248 245 239 / 0.86);
  padding-block: 0.4rem;
  transition: color var(--d-rapido) var(--curva);
  white-space: nowrap;
}

/* Subrayado que crece desde la izquierda */
.navegacion__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-medio) var(--curva);
}

.navegacion__enlace:hover::after,
.navegacion__enlace:focus-visible::after {
  transform: scaleX(1);
}

/* Enlace de la sección visible */
.navegacion__enlace[aria-current="true"]::after {
  transform: scaleX(1);
}

.cabecera__cta {
  min-height: 2.6rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.navegacion__cta {
  display: none;
}

/* Pie de navegación: solo se ve en el menú móvil */
.navegacion__pie {
  display: none;
}

/* --- Estado desplazado --------------------------------------------------- */

.cabecera[data-estado="desplazado"] {
  background: var(--hueso);
  border-bottom-color: var(--linea);
}

.cabecera[data-estado="desplazado"] .navegacion__enlace {
  color: var(--texto-2);
}

.cabecera[data-estado="desplazado"] .navegacion__enlace:hover,
.cabecera[data-estado="desplazado"] .navegacion__enlace:focus-visible,
.cabecera[data-estado="desplazado"] .navegacion__enlace[aria-current="true"] {
  color: var(--carbon);
}

/* --- Botón hamburguesa --------------------------------------------------- */

.boton-menu {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: var(--hueso);
  transition: color var(--d-medio) var(--curva);
}

.boton-menu__raya {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--d-medio) var(--curva),
              opacity var(--d-rapido) var(--curva);
}

.cabecera[data-estado="desplazado"] .boton-menu {
  color: var(--carbon);
}

.boton-menu[aria-expanded="true"] {
  color: var(--carbon);
}

.boton-menu[aria-expanded="true"] .boton-menu__raya:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.boton-menu[aria-expanded="true"] .boton-menu__raya:nth-child(2) {
  opacity: 0;
}

.boton-menu[aria-expanded="true"] .boton-menu__raya:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ==========================================================================
   05. PORTADA
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--cabecera-alto) + 2rem) 0 var(--e-5);
  overflow: hidden;
  background: var(--carbon);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  /* Arranca ligeramente ampliada y se asienta: una entrada sobria. */
  transform: scale(1.06);
  animation: heroAsentar 1600ms var(--curva-suave) forwards;
}

@keyframes heroAsentar {
  to { transform: scale(1); }
}

.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgb(10 9 6 / 0.52) 0%,
      rgb(10 9 6 / 0.16) 16%,
      transparent 32%
    ),
    linear-gradient(
      to top,
      rgb(10 9 6 / 0.82) 0%,
      rgb(10 9 6 / 0.46) 34%,
      rgb(10 9 6 / 0.1) 62%,
      transparent 82%
    );
  pointer-events: none;
}

.hero__contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  color: var(--hueso);
}

.hero__antetitulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(248 245 239 / 0.82);
}

.hero__antetitulo .punto {
  color: var(--ocre-claro);
}

.hero__titulo {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.026em;
  font-variation-settings: 'opsz' 144;
  max-width: 22ch;
  text-wrap: balance;
}

.hero__titulo em {
  font-style: italic;
  font-weight: 300;
  color: var(--arena-2);
}

.hero__entradilla {
  max-width: 34rem;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: rgb(248 245 239 / 0.86);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.hero__pie {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  margin-top: var(--e-6);
  padding-inline: var(--margen);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
}

.hero__desliza {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(248 245 239 / 0.7);
}

.hero__desliza-linea {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: rgb(248 245 239 / 0.4);
  position: relative;
  overflow: hidden;
}

.hero__desliza-linea::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hueso);
  transform: translateX(-100%);
  animation: lineaCorre 2600ms var(--curva-suave) infinite;
}

@keyframes lineaCorre {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.hero__nota {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(248 245 239 / 0.55);
  text-align: right;
}

/* ==========================================================================
   06. CINTA DE ATRIBUTOS
   ========================================================================== */

.cinta {
  background: var(--carbon);
  color: rgb(248 245 239 / 0.62);
  overflow: hidden;
  padding-block: 1.05rem;
  border-block: 1px solid rgb(248 245 239 / 0.1);
}

.cinta__pista {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: cintaMueve 46s linear infinite;
}

.cinta__sep {
  color: var(--ocre);
  font-size: 0.55rem;
}

@keyframes cintaMueve {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   07. NOSOTROS
   ========================================================================== */

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

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

.nosotros__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.nosotros__figura figcaption {
  margin-top: var(--e-3);
  padding-left: 1rem;
  border-left: 1px solid var(--linea);
  font-size: var(--t-small);
  color: var(--texto-2);
  max-width: 30rem;
}

.nosotros__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: clamp(0rem, 3vw, 3rem);
}

.nosotros__texto p {
  color: var(--texto-2);
}

.nosotros__texto .entradilla {
  color: var(--texto);
}

/* Rasgos: filas con filete, no tarjetas */
.rasgos {
  display: flex;
  flex-direction: column;
  margin-top: var(--e-3);
  border-top: 1px solid var(--linea);
}

.rasgos__item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--e-2);
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linea);
}

.rasgos__num {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--ocre);
  padding-top: 0.15rem;
}

.rasgos__titulo {
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
}

.rasgos__item p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--texto-2);
}

/* ==========================================================================
   08. SISTEMA SIP
   ========================================================================== */

.seccion--sip {
  background: var(--verde);
  color: var(--hueso);
  border-top: 0;
}

.seccion--sip::before {
  /* Textura finísima para que el bloque oscuro no se vea plano */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(248 245 239 / 0.045) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
}

.sip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.sip__diagrama {
  margin: 0;
  position: sticky;
  top: calc(var(--cabecera-alto) + 2rem);
}

.panel-svg {
  width: 100%;
  height: auto;
  background: var(--hueso);
  padding: clamp(1rem, 2vw, 1.75rem);
}

.sip__diagrama figcaption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--e-3);
  font-size: var(--t-small);
  color: rgb(248 245 239 / 0.6);
}

.chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hueso);
  border: 1px solid rgb(248 245 239 / 0.25);
  border-radius: 1px;
}

.sip__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}

.sip__titulo {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 400;
  margin-bottom: var(--e-4);
  color: var(--hueso);
}

.definiciones {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(248 245 239 / 0.16);
}

.definiciones__fila {
  display: grid;
  grid-template-columns: minmax(5.5rem, 8rem) 1fr;
  gap: var(--e-3);
  padding-block: var(--e-3);
  border-bottom: 1px solid rgb(248 245 239 / 0.16);
}

.definiciones dt {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ocre-claro);
  letter-spacing: 0.02em;
}

.definiciones dd {
  font-size: var(--t-small);
  line-height: 1.65;
  color: rgb(248 245 239 / 0.75);
}

.lista-ventajas {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.lista-ventajas li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgb(248 245 239 / 0.78);
}

.lista-ventajas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 1px;
  background: var(--ocre-claro);
}

.nota-clave {
  padding: var(--e-4);
  border: 1px solid rgb(248 245 239 / 0.22);
  border-left: 2px solid var(--ocre-claro);
  background: rgb(0 0 0 / 0.18);
}

.nota-clave__titulo {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocre-claro);
  margin-bottom: var(--e-2);
}

.nota-clave p {
  font-size: var(--t-small);
  line-height: 1.65;
  color: rgb(248 245 239 / 0.72);
}

.nota-clave p + p {
  margin-top: var(--e-2);
}

.nota-clave strong {
  color: var(--hueso);
  font-weight: 600;
}

.sip__banda {
  position: relative;
  margin: clamp(3rem, 7vw, 6rem) 0 0;
}

.sip__banda img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 45%;
}

.sip__banda figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-small);
  color: rgb(248 245 239 / 0.55);
  max-width: 44rem;
}

/* ==========================================================================
   09. SERVICIOS
   ========================================================================== */

.servicios {
  position: relative;
  border-top: 1px solid var(--linea);
}

.servicio {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 9rem;
  gap: var(--e-4);
  align-items: start;
  padding-block: clamp(1.5rem, 2.6vw, 2.4rem);
  border-bottom: 1px solid var(--linea);
  transition: background-color var(--d-medio) var(--curva),
              padding-left var(--d-medio) var(--curva);
}

.servicio:hover {
  background: var(--hueso-2);
  padding-left: var(--e-3);
}

.servicio__num {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--ocre);
  padding-top: 0.45rem;
  font-variant-numeric: tabular-nums;
}

.servicio__cuerpo {
  max-width: 46rem;
}

.servicio__titulo {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-bottom: 0.45rem;
}

.servicio__texto {
  font-size: var(--t-small);
  line-height: 1.62;
  color: var(--texto-2);
  max-width: 42rem;
}

/* Miniatura fija a la derecha de cada fila (visible siempre, sin hover) */
.servicio__vista {
  width: 9rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--arena);
  align-self: center;
}

.servicio__vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-lento) var(--curva);
}

.servicio:hover .servicio__vista img {
  transform: scale(1.06);
}

/* Lupa que sigue al cursor: solo escritorio */
.servicios__lupa {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 20rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity var(--d-medio) var(--curva), transform var(--d-medio) var(--curva);
  box-shadow: 0 24px 60px -20px rgb(23 21 15 / 0.5);
  display: none;
}

.servicios__lupa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   10. PROYECTOS Y GALERÍA
   ========================================================================== */

.proyectos__aviso {
  max-width: 24rem;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--texto-2);
  padding-left: var(--e-3);
  border-left: 1px solid var(--linea);
}

.proyectos__aviso-marca {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocre-fuerte);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--e-5);
}

.filtro {
  padding: 0.55rem 1.1rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--texto-2);
  border: 1px solid var(--linea);
  border-radius: 1px;
  transition: background-color var(--d-rapido) var(--curva),
              color var(--d-rapido) var(--curva),
              border-color var(--d-rapido) var(--curva);
}

.filtro:hover {
  border-color: var(--carbon);
  color: var(--carbon);
}

.filtro.es-activo {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--hueso);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  /* dense: rellena los huecos que dejan las piezas de distinto ancho, para que
     la retícula no quede con agujeros cuando se filtra por categoría. */
  grid-auto-flow: dense;
}

/* --------------------------------------------------------------------------
   IMPORTANTE: la rejilla coloca los `<li>`, no los botones.
   --------------------------------------------------------------------------
   Antes las reglas `grid-column` estaban en `.pieza` (el botón), pero las
   celdas reales de la rejilla son los `<li>`. Cada `<li>` ocupaba una sola de
   las 12 columnas y las fotos se dibujaban como tiras de 90 px. Los atributos
   de maquetación se movieron al `<li>` (`.pieza-item`) y el botón se limita a
   llenar su celda.
   -------------------------------------------------------------------------- */

.pieza-item {
  grid-column: span 4;
  min-width: 0;
}

/* Variación editorial: alterna anchos según la orientación de cada imagen */
.pieza-item[data-orientacion="horizontal"] {
  grid-column: span 6;
}

.pieza-item[data-orientacion="vertical"] {
  grid-column: span 4;
}

.pieza-item[data-orientacion="cuadrada"] {
  grid-column: span 4;
}

/* Dos piezas destacadas ocupan más espacio */
.pieza-item[data-destacada="true"] {
  grid-column: span 8;
}

.pieza {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--arena);
  cursor: zoom-in;
  color: inherit;
  text-align: left;
}

.pieza__marco {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--arena);
}

/* --------------------------------------------------------------------------
   Aparición de las imágenes de la galería
   --------------------------------------------------------------------------
   El fundido de entrada se aplica SOLO cuando JavaScript está activo (clase
   `.js` en <html>). Antes la imagen nacía con `opacity: 0` a la espera de una
   clase que debía añadir el JS... y que no se añadía en ningún sitio: la
   galería entera se quedaba invisible aunque las imágenes estuvieran cargadas.

   Con esta forma, sin JavaScript las imágenes se ven igual y con JavaScript
   aparece el fundido. Nunca se depende de un script para que el contenido
   exista.
   -------------------------------------------------------------------------- */

.pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--curva), opacity 500ms var(--curva);
  opacity: 1;
}

.js .pieza img {
  opacity: 0;
}

.js .pieza img.es-cargada {
  opacity: 1;
}

.pieza:hover img {
  transform: scale(1.035);
}

.pieza__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(10 9 6 / 0.66) 0%, transparent 46%);
  opacity: 0;
  transition: opacity var(--d-medio) var(--curva);
  pointer-events: none;
}

.pieza:hover .pieza__velo,
.pieza:focus-visible .pieza__velo {
  opacity: 1;
}

.pieza__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--e-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-2);
  color: var(--hueso);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--d-medio) var(--curva), transform var(--d-medio) var(--curva);
}

.pieza:hover .pieza__info,
.pieza:focus-visible .pieza__info {
  opacity: 1;
  transform: translateY(0);
}

.pieza__titulo {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.25;
}

.pieza__tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(248 245 239 / 0.8);
  white-space: nowrap;
}

/* Sin puntero fino no hay hover: el título y el velo se muestran siempre.
   Antes solo se resolvía por ancho (≤ 720 px), así que en una tableta táctil
   las piezas se quedaban sin título visible. */
@media (hover: none) {
  .pieza__velo,
  .pieza__info {
    opacity: 1;
  }

  .pieza__info {
    transform: none;
  }
}

.galeria__vacio {
  padding: var(--e-6) 0;
  text-align: center;
  color: var(--texto-2);
}

/* ==========================================================================
   11. PROCESO
   ========================================================================== */

.proceso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 6rem);
  border-top: 1px solid var(--linea);
}

.etapa {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--e-2);
  padding-block: clamp(1.35rem, 2.2vw, 2rem);
  border-bottom: 1px solid var(--linea);
  align-items: start;
}

.etapa__num {
  font-family: var(--display);
  font-size: var(--t-num);
  font-weight: 300;
  line-height: 0.9;
  color: var(--arena-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-medio) var(--curva);
}

.etapa:hover .etapa__num {
  color: var(--ocre);
}

.etapa__titulo {
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-bottom: 0.3rem;
}

.etapa__texto {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 26rem;
}

.proceso__nota {
  margin-top: var(--e-5);
  font-size: var(--t-small);
  color: var(--texto-3);
  max-width: 40rem;
  padding-left: var(--e-3);
  border-left: 1px solid var(--linea);
}

/* ==========================================================================
   12. LLAVE EN MANO
   ========================================================================== */

.seccion--llave {
  padding-block: 0;
  border-top: 0;
  background: var(--hueso-2);
}

.llave {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.llave__media {
  position: relative;
  margin: 0;
  min-height: 60vh;
}

.llave__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.llave__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.15rem, 5vw, 5.5rem);
  justify-content: center;
}

.llave__cuerpo .titulo-seccion {
  margin-bottom: var(--e-2);
}

.llave__cuerpo p {
  color: var(--texto-2);
  max-width: 34rem;
}

.llave__cuerpo .entradilla {
  color: var(--texto);
}

.llave__dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--e-4);
  margin-block: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
}

.marcado {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.marcado li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--t-small);
  color: var(--texto-2);
  line-height: 1.55;
}

.marcado--si li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--exito);
  font-size: 0.8rem;
  font-weight: 600;
}

.marcado--no li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--piedra);
  font-size: 0.8rem;
}

.llave__nota {
  font-size: 0.78rem !important;
  color: var(--texto-3) !important;
  line-height: 1.55;
}

.llave__cuerpo .boton {
  align-self: flex-start;
  margin-top: var(--e-2);
}

/* ==========================================================================
   13. ZONAS DE ATENCIÓN
   ========================================================================== */

.zonas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  border-top: 1px solid var(--linea);
  padding-top: var(--e-5);
}

.zona__titulo {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.zona__lista {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--texto-2);
}

/* --- Mapa del estudio ---------------------------------------------------- */

/* Dos columnas: ficha con la dirección + mapa. La ficha NO flota sobre el
   mapa, de modo que la dirección se lee aunque el iframe no cargue. */
.mapa {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
  margin-top: clamp(2.25rem, 5vw, 4.5rem);
  border: 1px solid var(--linea);
  background: var(--hueso);
}

.mapa__ficha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.7rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-right: 1px solid var(--linea);
}

.mapa__etiqueta {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocre-fuerte);
}

.mapa__direccion {
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.3vw, 1.24rem);
  font-style: normal;
  line-height: 1.45;
  color: var(--carbon);
  /* La dirección va cortada a mano con <br>: así el navegador no parte
     «6075A» ni «Hierro» a mitad de palabra en pantallas estrechas. */
}

.mapa__enlace {
  margin-top: 0.4rem;
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.7rem;
}

/* El marco mantiene una altura mínima para que, si el mapa no carga, el bloque
   no se colapse y la retícula no se rompa. */
.mapa__marco {
  position: relative;
  overflow: hidden;
  min-height: clamp(18rem, 26vw, 24rem);
  background: var(--arena);
}

.mapa__iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Desaturación ligera: el mapa se integra a la paleta cálida del sitio sin
     perder legibilidad. */
  filter: grayscale(0.42) contrast(1.03) brightness(1.02);
}

/* Dirección en el pie */
.pie__direccion {
  font-size: var(--t-small);
  font-style: normal;
  line-height: 1.6;
  color: rgb(248 245 239 / 0.6);
}

.pie__mapa {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: rgb(248 245 239 / 0.85);
  border-bottom: 1px solid rgb(248 245 239 / 0.3);
  transition: color var(--d-rapido) var(--curva), border-color var(--d-rapido) var(--curva);
}

.pie__mapa:hover {
  color: var(--hueso);
  border-bottom-color: var(--hueso);
}

/* ==========================================================================
   14. PREGUNTAS FRECUENTES
   ========================================================================== */

.faq {
  border-top: 1px solid var(--linea);
}

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

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: clamp(1.1rem, 1.8vw, 1.5rem);
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  transition: color var(--d-rapido) var(--curva);
}

/* Quita el triángulo nativo en todos los motores */
.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta:hover {
  color: var(--ocre-fuerte);
}

.faq__icono {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.faq__icono::before,
.faq__icono::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--d-medio) var(--curva), opacity var(--d-medio) var(--curva);
}

.faq__icono::before {
  left: 0;
  top: 6.5px;
  width: 14px;
  height: 1px;
}

.faq__icono::after {
  left: 6.5px;
  top: 0;
  width: 1px;
  height: 14px;
}

.faq__item[open] .faq__icono::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__respuesta {
  padding-bottom: var(--e-4);
  padding-right: 2.5rem;
}

.faq__respuesta p {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--texto-2);
  max-width: 46rem;
}

/* Animación de apertura con grid (no cambia la accesibilidad nativa) */
.faq__item[open] .faq__respuesta {
  animation: faqAbre 320ms var(--curva-suave);
}

@keyframes faqAbre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   15. CONTACTO Y FORMULARIO
   ========================================================================== */

.seccion--contacto {
  background: var(--hueso-2);
}

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

.contacto__intro {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  position: sticky;
  top: calc(var(--cabecera-alto) + 2rem);
}

.contacto__intro p {
  color: var(--texto-2);
  max-width: 30rem;
}

.contacto__intro .entradilla {
  color: var(--texto);
}

.contacto__datos {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
}

.contacto__etiqueta {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 0.2rem;
}

.contacto__valor {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  color: var(--carbon);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-rapido) var(--curva), color var(--d-rapido) var(--curva);
  word-break: break-word;
}

.contacto__valor:hover {
  border-bottom-color: var(--ocre);
  color: var(--ocre-fuerte);
}

/* --- Formulario ---------------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: clamp(1.35rem, 3vw, 2.5rem);
  background: var(--hueso);
  border: 1px solid var(--linea);
}

.formulario__aviso {
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #5B4A22;
  background: #F6ECD8;
  border-left: 2px solid var(--ocre);
}

.formulario__aviso strong {
  font-weight: 600;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.campo__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--e-3);
}

.campo--grupo {
  gap: 0.55rem;
}

.campo__etiqueta {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0;
}

.req {
  color: var(--ocre-fuerte);
}

.opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-3);
  font-size: 0.72rem;
}

.campo__control {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 1px;
  transition: border-color var(--d-rapido) var(--curva), box-shadow var(--d-rapido) var(--curva);
  appearance: none;
}

select.campo__control {
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
                    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.campo__control--area {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.55;
}

.campo__control:focus {
  outline: none;
  border-color: var(--carbon);
  box-shadow: 0 0 0 3px rgb(176 126 77 / 0.18);
}

.campo__control[aria-invalid="true"] {
  border-color: var(--error);
  background: #FDF6F5;
}

.campo__error {
  font-size: 0.75rem;
  color: var(--error);
  min-height: 0;
}

.campo__error:empty {
  display: none;
}

/* Opciones tipo pastilla (Sí / No) */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.opcion {
  position: relative;
  display: inline-flex;
}

.opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opcion span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.85rem;
  color: var(--texto-2);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 1px;
  cursor: pointer;
  transition: background-color var(--d-rapido) var(--curva),
              color var(--d-rapido) var(--curva),
              border-color var(--d-rapido) var(--curva);
}

.opcion input:checked + span {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--hueso);
}

.opcion input:focus-visible + span {
  outline: 2px solid var(--ocre-fuerte);
  outline-offset: 2px;
}

.opcion input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}

.formulario__legal {
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--texto-3);
}

.formulario__legal a {
  color: var(--texto-2);
  border-bottom: 1px solid var(--linea);
}

.formulario__legal a:hover {
  color: var(--carbon);
  border-bottom-color: var(--carbon);
}

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

.formulario__estado {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--texto-2);
}

.formulario__estado:empty {
  display: none;
}

.formulario__estado.es-error {
  color: var(--error);
}

.formulario__estado.es-exito {
  color: var(--exito);
}

/* ==========================================================================
   16. PIE DE PÁGINA
   ========================================================================== */

.pie {
  background: var(--carbon);
  color: rgb(248 245 239 / 0.68);
  padding-block: var(--e-7) var(--e-5);
}

.pie__superior {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: var(--e-6);
  border-bottom: 1px solid rgb(248 245 239 / 0.14);
}

.pie__logo {
  width: 138px;
  height: auto;
  margin-bottom: var(--e-3);
}

.pie__descripcion {
  font-size: var(--t-small);
  line-height: 1.65;
  max-width: 24rem;
  color: rgb(248 245 239 / 0.6);
}

.pie__titulo {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hueso);
  margin-bottom: var(--e-3);
}

.pie__titulo--separado {
  margin-top: var(--e-5);
}

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: var(--t-small);
}

.pie__lista a {
  color: rgb(248 245 239 / 0.66);
  transition: color var(--d-rapido) var(--curva);
  border-bottom: 1px solid transparent;
}

.pie__lista a:hover {
  color: var(--hueso);
  border-bottom-color: rgb(248 245 239 / 0.4);
}

.pie__lista--contacto a {
  display: inline-block;
  word-break: break-word;
}

.pie__zonas {
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgb(248 245 239 / 0.55);
  max-width: 20rem;
}

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-top: var(--e-4);
  font-size: 0.76rem;
  color: rgb(248 245 239 / 0.48);
}

.pie__enlaces {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pie__enlaces a {
  transition: color var(--d-rapido) var(--curva);
}

.pie__enlaces a:hover {
  color: var(--hueso);
}

.pie__sep {
  color: rgb(248 245 239 / 0.3);
}

/* ==========================================================================
   17. BOTONES FLOTANTES
   ========================================================================== */

.flotantes {
  position: fixed;
  right: clamp(0.85rem, 2vw, 1.75rem);
  bottom: clamp(0.85rem, 2vw, 1.75rem);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Respeta el área segura de iPhone (muesca y barra inferior) */
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: opacity var(--d-medio) var(--curva), transform var(--d-medio) var(--curva);
}

.flotante {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--hueso);
  background: rgb(23 21 15 / 0.9);
  border: 1px solid rgb(248 245 239 / 0.16);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.55);
  transition: background-color var(--d-rapido) var(--curva),
              color var(--d-rapido) var(--curva),
              border-color var(--d-rapido) var(--curva),
              transform var(--d-rapido) var(--curva);
}

/* La etiqueta se muestra al pasar el cursor o al enfocar con el teclado.
   Así el botón ocupa sólo 48 px y deja de tapar el contenido que pasa por la
   esquina inferior derecha. En pantallas táctiles no hay hover: el nombre
   accesible viaja en el aria-label. */
.flotante__texto {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translate(6px, -50%);
  padding: 0.45rem 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--hueso);
  background: var(--carbon);
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-rapido) var(--curva), transform var(--d-rapido) var(--curva);
}

@media (hover: hover) and (pointer: fine) {
  .flotante:hover .flotante__texto,
  .flotante:focus-visible .flotante__texto {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

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

.flotante:active {
  transform: translateY(0);
}

.flotante__icono {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.flotante--wa {
  background: #1F8A4C;
  border-color: #1F8A4C;
  color: #fff;
}

.flotante--wa:hover {
  background: #186B3B;
  border-color: #186B3B;
}

.flotante--ig {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--carbon);
}

.flotante--ig:hover {
  background: var(--arena);
  border-color: var(--arena);
}

.flotante--share {
  background: rgb(23 21 15 / 0.9);
  color: var(--hueso);
}

.flotante--share:hover {
  background: var(--carbon);
  border-color: rgb(248 245 239 / 0.34);
}

/* Cuando el menú móvil está abierto, los flotantes se ocultan para no
   taparse entre sí ni estorbar la navegación. */
body.menu-abierto .flotantes {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   18. VISOR Y DIÁLOGOS
   ========================================================================== */

.visor {
  padding: 0;
  border: 0;
  background: #0C0B08;
  color: var(--hueso);
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

.visor::backdrop {
  background: #0C0B08;
}

.visor__area {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(2.75rem, 6vh, 4.5rem) clamp(1rem, 8vw, 6rem);
}

.visor__figura {
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
}

.visor__imagen {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 260ms var(--curva);
}

.visor__imagen.es-visible {
  opacity: 1;
}

.visor__cerrar {
  position: absolute;
  top: clamp(0.75rem, 2vh, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 3;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  color: var(--hueso);
  border: 1px solid rgb(248 245 239 / 0.24);
  border-radius: 50%;
  background: rgb(12 11 8 / 0.5);
  transition: background-color var(--d-rapido) var(--curva), border-color var(--d-rapido) var(--curva);
}

.visor__cerrar:hover {
  background: rgb(248 245 239 / 0.14);
  border-color: rgb(248 245 239 / 0.5);
}

.visor__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  color: var(--hueso);
  border: 1px solid rgb(248 245 239 / 0.22);
  border-radius: 50%;
  background: rgb(12 11 8 / 0.5);
  transition: background-color var(--d-rapido) var(--curva), border-color var(--d-rapido) var(--curva);
}

.visor__flecha:hover {
  background: rgb(248 245 239 / 0.14);
  border-color: rgb(248 245 239 / 0.5);
}

.visor__flecha--anterior {
  left: clamp(0.5rem, 2vw, 1.75rem);
}

.visor__flecha--siguiente {
  right: clamp(0.5rem, 2vw, 1.75rem);
}

.visor__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) clamp(1rem, 6vw, 4rem);
  font-size: 0.78rem;
  color: rgb(248 245 239 / 0.72);
}

.visor__titulo {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--hueso);
}

.visor__contador {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* --- Diálogo de copiado manual ------------------------------------------- */

.dialogo-copiar {
  padding: 0;
  border: 1px solid var(--linea);
  background: var(--hueso);
  color: var(--texto);
  max-width: min(30rem, 92vw);
}

.dialogo-copiar::backdrop {
  background: rgb(12 11 8 / 0.55);
}

.dialogo-copiar__caja {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
}

.dialogo-copiar__titulo {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
}

.dialogo-copiar__texto {
  font-size: var(--t-small);
  color: var(--texto-2);
  line-height: 1.6;
}

.dialogo-copiar__texto kbd {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.85em;
  padding: 1px 4px;
  border: 1px solid var(--linea);
  border-radius: 2px;
  background: var(--hueso-2);
}

.dialogo-copiar__entrada {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  border: 1px solid var(--linea);
  background: var(--blanco);
}

.dialogo-copiar__acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--e-2);
}

/* ==========================================================================
   19. AVISO FLOTANTE (TOAST)
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(4.5rem, 9vh, 6rem);
  transform: translate(-50%, 12px);
  z-index: 120;
  max-width: min(28rem, 90vw);
  padding: 0.75rem 1.25rem;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  color: var(--hueso);
  background: var(--carbon);
  border-radius: 2px;
  box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-medio) var(--curva), transform var(--d-medio) var(--curva);
}

.toast.es-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   ANIMACIÓN DE APARICIÓN AL DESPLAZAR
   ========================================================================== */

.revela {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--d-lento) var(--curva-suave),
              transform var(--d-lento) var(--curva-suave);
}

.revela.es-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   20. RESPONSIVE
   --------------------------------------------------------------------------
   Se decide por contenido, no por dispositivo: a 1080px la navegación de siete
   enlaces más el botón ya no cabe con holgura, así que ahí entra el menú.
   ========================================================================== */

/* --- Portátiles medianas ------------------------------------------------- */
@media (max-width: 1240px) {
  .navegacion {
    gap: 1.25rem;
  }

  .navegacion__lista {
    gap: 1rem;
  }

  .navegacion__enlace {
    font-size: 0.74rem;
  }
}

/* --- Entra el menú móvil ------------------------------------------------- */
@media (max-width: 1080px) {
  :root {
    --cabecera-alto: 4.25rem;
  }

  .navegacion__lista {
    display: flex;
  }

  .cabecera__cta {
    display: none;
  }

  .boton-menu {
    display: flex;
  }

  /* Panel a pantalla completa */
  .navegacion {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: calc(var(--cabecera-alto) + 1.5rem) var(--margen) 2.5rem;
    background: var(--hueso);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--d-medio) var(--curva),
                visibility var(--d-medio),
                transform var(--d-medio) var(--curva);
  }

  .navegacion.es-abierta {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navegacion__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--linea);
  }

  .navegacion__lista li {
    border-bottom: 1px solid var(--linea);
  }

  .navegacion__enlace {
    display: block;
    padding-block: 1rem;
    font-family: var(--display);
    font-size: clamp(1.5rem, 5.4vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--carbon);
  }

  .navegacion__enlace::after {
    display: none;
  }

  .navegacion__cta {
    display: inline-flex;
    margin-top: 1.75rem;
    width: 100%;
  }

  .navegacion__pie {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 2rem;
    width: 100%;
    font-size: 0.85rem;
    color: var(--texto-2);
  }

  .navegacion__dato {
    display: block;
    padding-block: 0.15rem;
    border-bottom: 1px solid transparent;
    width: fit-content;
  }

  .navegacion__dato:hover {
    color: var(--carbon);
    border-bottom-color: var(--linea);
  }

  /* Con el panel abierto, la cabecera se vuelve sólida y el logo recupera
     su color, igual que cuando está desplazada. */
  body.menu-abierto .cabecera {
    background: var(--hueso);
    border-bottom-color: var(--linea);
  }

  body.menu-abierto {
    overflow: hidden;
  }

  /* Los botones flotantes no deben convivir con el menú: se ocultan. */
  body.menu-abierto .flotantes {
    opacity: 0;
    pointer-events: none;
  }
}

/* --- Tabletas ------------------------------------------------------------ */
@media (max-width: 980px) {
  .nosotros {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }

  .nosotros__texto {
    padding-top: 0;
  }

  .sip {
    grid-template-columns: 1fr;
  }

  .sip__diagrama {
    position: static;
    max-width: 34rem;
  }

  .llave {
    grid-template-columns: 1fr;
  }

  .llave__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .llave__media img {
    position: static;
    height: 100%;
  }

  .contacto {
    grid-template-columns: 1fr;
  }

  .contacto__intro {
    position: static;
  }

  .zonas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--e-5);
  }

  .proceso {
    grid-template-columns: 1fr;
  }

  .pie__superior {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seccion__cabecera--fila {
    flex-direction: column;
    align-items: flex-start;
  }

  .proyectos__aviso {
    max-width: 32rem;
  }

  /* Galería: de 12 columnas a una retícula más simple */
  .galeria {
    grid-template-columns: repeat(6, 1fr);
  }

  .pieza-item,
  .pieza-item[data-orientacion="horizontal"],
  .pieza-item[data-orientacion="vertical"],
  .pieza-item[data-orientacion="cuadrada"] {
    grid-column: span 3;
  }

  .pieza-item[data-destacada="true"] {
    grid-column: span 6;
  }

  /* La lupa solo existe en puntero fino */
  .servicios__lupa {
    display: none !important;
  }
}

/* --- Teléfonos ----------------------------------------------------------- */
@media (max-width: 720px) {
  .seccion {
    padding-block: clamp(3.25rem, 9vw, 4.5rem);
  }

  .seccion__cabecera {
    margin-bottom: var(--e-5);
    gap: var(--e-3);
  }

  .hero {
    min-height: 92svh;
    padding-bottom: 1.75rem;
  }

  .hero__titulo {
    max-width: 16ch;
  }

  .hero__acciones {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .hero__acciones .boton {
    width: 100%;
  }

  .hero__pie {
    margin-top: var(--e-5);
  }

  .hero__nota {
    display: none;
  }

  .cinta__pista {
    gap: 1.4rem;
    font-size: 0.66rem;
  }

  /* Servicios: número + texto, y la imagen a lo ancho debajo */
  .servicio {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.85rem;
    padding-block: 1.4rem;
  }

  .servicio:hover {
    padding-left: 0;
    background: transparent;
  }

  .servicio__vista {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: 0.75rem;
  }

  .servicio__num {
    font-size: 0.85rem;
    padding-top: 0.3rem;
  }

  /* Galería en una sola columna */
  .galeria {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .pieza-item,
  .pieza-item[data-orientacion="horizontal"],
  .pieza-item[data-orientacion="vertical"],
  .pieza-item[data-orientacion="cuadrada"],
  .pieza-item[data-destacada="true"] {
    grid-column: 1 / -1;
  }

  /* En táctil no hay hover: la información se muestra siempre. */
  .pieza__velo,
  .pieza__info {
    opacity: 1;
  }

  .pieza__info {
    transform: none;
    padding: 0.85rem;
  }

  .pieza__titulo {
    font-size: 0.95rem;
  }

  .filtros {
    gap: 0.4rem;
    margin-bottom: var(--e-4);
  }

  .filtro {
    padding: 0.5rem 0.85rem;
    font-size: 0.72rem;
  }

  .etapa {
    grid-template-columns: 2.6rem 1fr;
  }

  .zonas {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }

  /* En móvil la ficha pasa arriba y el mapa ocupa el ancho completo. */
  .mapa {
    grid-template-columns: 1fr;
  }

  .mapa__ficha {
    border-right: 0;
    border-bottom: 1px solid var(--linea);
  }

  .mapa__marco {
    min-height: 17rem;
  }

  .mapa__enlace {
    width: 100%;
  }

  .llave__cuerpo {
    padding: clamp(2rem, 6vw, 3rem) var(--margen);
  }

  .pie__superior {
    grid-template-columns: 1fr;
  }

  .pie {
    padding-bottom: calc(var(--e-5) + 4.5rem);
  }

  .pie__inferior {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Flotantes: fila inferior compacta, con etiquetas ocultas para no tapar */
  .flotantes {
    right: 0.7rem;
    bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    gap: 0.5rem;
  }

  .flotante {
    width: 3rem;
    height: 3rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .flotante__texto {
    /* En táctil no hay hover: la etiqueta no se muestra y el nombre accesible
       queda en el aria-label del botón. */
    display: none;
  }

  /* Que el contenido no quede debajo de los flotantes */
  .seccion--contacto .formulario {
    padding-bottom: 2rem;
  }

  /* Visor: flechas abajo, donde la imagen no llega */
  .visor__area {
    padding: 3.5rem 1rem 5.5rem;
  }

  .visor__flecha {
    top: auto;
    bottom: 1.1rem;
    transform: none;
    width: 3rem;
    height: 3rem;
  }

  .visor__flecha--anterior {
    left: 1rem;
  }

  .visor__flecha--siguiente {
    right: 1rem;
  }

  .visor__imagen {
    max-height: calc(100vh - 11rem);
  }

  .visor__pie {
    bottom: 4.4rem;
    padding-inline: 1rem;
  }

  .visor__pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}

/* --- Teléfonos pequeños -------------------------------------------------- */
@media (max-width: 420px) {
  :root {
    --margen: 1rem;
  }

  .hero__antetitulo {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .formulario {
    padding: 1.1rem;
  }

  .campo__fila {
    grid-template-columns: 1fr;
  }

  .formulario__acciones {
    flex-direction: column;
  }

  .formulario__acciones .boton {
    width: 100%;
  }
}

/* --- Puntero fino: activa la lupa de servicios --------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
  .servicios__lupa {
    display: block;
  }

  /* En escritorio la miniatura fija estorba: la lupa ya muestra la imagen */
  .servicio__vista {
    display: none;
  }

  .servicio {
    grid-template-columns: 4.5rem minmax(0, 1fr) 3rem;
  }

  .servicio::after {
    content: '↗';
    grid-column: 3;
    align-self: center;
    justify-self: end;
    font-size: 1rem;
    color: var(--piedra-2);
    transition: color var(--d-rapido) var(--curva), transform var(--d-rapido) var(--curva);
  }

  .servicio:hover::after {
    color: var(--ocre-fuerte);
    transform: translate(2px, -2px);
  }
}

/* Pantallas muy anchas: el lienzo no crece sin límite */
@media (min-width: 1600px) {
  :root {
    --ancho: 1520px;
  }
}

/* ==========================================================================
   21. PÁGINA LEGAL (aviso de privacidad)
   ========================================================================== */

.legal {
  padding-block: calc(var(--cabecera-alto) + 3rem) var(--e-8);
}

.legal__titulo {
  margin-block: var(--e-3) var(--e-2);
}

.legal__fecha {
  font-size: var(--t-small);
  color: var(--texto-3);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--linea);
}

.legal__cuerpo {
  margin-top: var(--e-5);
  max-width: 44rem;
}

.legal__cuerpo h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.3;
  margin-top: var(--e-5);
  margin-bottom: var(--e-2);
}

.legal__cuerpo h2:first-child {
  margin-top: 0;
}

.legal__cuerpo p,
.legal__cuerpo li {
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--texto-2);
}

.legal__cuerpo p + p {
  margin-top: var(--e-2);
}

.legal__cuerpo ul {
  margin-block: var(--e-2) var(--e-2);
  padding-left: 1.15rem;
  list-style: disc;
}

.legal__cuerpo li + li {
  margin-top: 0.3rem;
}

.legal__cuerpo a {
  color: var(--carbon);
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--d-rapido) var(--curva);
}

.legal__cuerpo a:hover {
  border-bottom-color: var(--carbon);
}

.legal__cuerpo strong {
  color: var(--texto);
  font-weight: 600;
}

.legal__volver {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

/* La cabecera de la página legal siempre es sólida y con el logo en color */
.pagina-legal .cabecera {
  background: var(--hueso);
  border-bottom: 1px solid var(--linea);
}

/* ==========================================================================
   22. MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .revela {
    opacity: 1;
    transform: none;
  }

  .hero__foto {
    transform: none;
  }

  .cinta__pista {
    animation: none;
  }
}

@media print {
  .cabecera,
  .flotantes,
  .toast,
  .visor,
  .cinta {
    display: none !important;
  }

  .hero {
    min-height: auto;
    color: #000;
    background: #fff;
  }

  .seccion--sip {
    background: #fff;
    color: #000;
  }

  body {
    background: #fff;
  }
}