/* ==========================================================================
   REFORMA UNIVERSOS — Hoja de estilos única para toda la web
   --------------------------------------------------------------------------
   Cómo está organizado este archivo (por orden de aparición):

     1. Variables (colores, tipografías, sombras)  ← EMPIEZA A EDITAR AQUÍ
     2. Bases y utilidades generales
     3. Botones
     4. Cabecera y menú
     5. Portada (hero)
     6. Secciones y tarjetas de servicios
     7. Carrusel
     8. Galería de trabajos y cifras
     9. Formulario de contacto y mapa
    10. Página de privacidad
    11. Pie de página
    12. Móvil y tablet (media queries)

   Consejo: para cambiar los colores de TODA la web te basta con tocar
   los valores del apartado 1.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* --- Paleta de colores --- */
  --fondo:      #FAF7F2;  /* Blanco cálido / hueso: fondo general */
  --arena:      #EDE6DA;  /* Arena: secciones alternas y tarjetas */
  --tinta:      #1E2A44;  /* Azul marino: títulos y texto principal */
  --acento:     #C15A2B;  /* Terracota: BOTONES, iconos y detalles */
  --acento-cl:  #E08A5A;  /* Terracota claro: SOLO sobre fondos oscuros (el pie) */
  --gris:       #55524C;  /* Gris cálido: texto secundario */
  --blanco:     #FFFFFF;
  --borde:      rgba(30, 42, 68, 0.10); /* Línea suave para separar bloques */
  --borde-campo: rgba(30, 42, 68, 0.55); /* Borde de los campos del formulario (3,4:1) */

  /* Un solo terracota auxiliar, más oscuro y del mismo tono.
     Hace falta porque el terracota de marca, siendo perfecto como color de
     relleno, se queda corto de contraste cuando ES texto pequeño (4,1:1
     sobre el fondo hueso, y la norma AA pide 4,5:1). Se usa SOLO en:
       · enlaces y textos pequeños en terracota   (5,4:1 ✓)
       · botones al pasar el ratón (se OSCURECE, nunca se aclara)
     Los botones grandes sí llevan el --acento exacto: al ir en negrita y a
     19 px cuentan como "texto grande", donde la norma pide 3:1 y tenemos 4,4:1.
     Si cambias --acento por otro color, oscurece también este. */
  --acento-os:  #A8491F;

  /* --- Tipografía ---
     Usamos la tipografía que YA trae el dispositivo: la web no descarga
     nada de internet, carga antes y no comparte datos con terceros. */
  --tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Sombras suaves --- */
  --sombra-suave: 0 2px 10px rgba(30, 42, 68, 0.05);
  --sombra-media: 0 10px 30px rgba(30, 42, 68, 0.08);
  --sombra-alta:  0 18px 44px rgba(30, 42, 68, 0.13);

  /* --- Medidas --- */
  --radio:        18px;  /* Redondeo de tarjetas */
  --radio-boton:  999px; /* Botones tipo "píldora" */
  --ancho-maximo: 1180px;
  --alto-cabecera: 76px;

  /* --- Velocidad de las animaciones --- */
  --transicion: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   2. BASES Y UTILIDADES
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Evita que la cabecera fija tape los títulos al saltar con un enlace */
  scroll-padding-top: calc(var(--alto-cabecera) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bloquea el desplazamiento del fondo cuando el menú móvil está abierto */
body.menu-abierto { overflow: hidden; }

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

/* Los correos y las direcciones web son "palabras" larguísimas sin espacios
   (proyectos@reformauniverso.com son 29 caracteres seguidos). En un móvil
   estrecho no caben y empujarían la página hacia los lados, obligando a
   desplazarse en horizontal. Con esto se parten y se quedan dentro. */
.dato-valor,
.pie-dato a,
.pie-dato span,
.caja-datos p,
.texto-legal li { overflow-wrap: anywhere; }

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance; /* Reparte mejor los títulos en varias líneas */
}

h1 { font-size: clamp(2.15rem, 5.4vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--acento-os); text-decoration: none; transition: color var(--transicion); }
a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; }

/* Contenedor central: mantiene el contenido dentro de un ancho cómodo */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Texto pequeño en mayúsculas que va encima de los títulos */
.antetitulo {
  display: block;
  margin: 0 0 0.7em;
  color: var(--acento-os);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.texto-secundario { color: var(--gris); }

/* Enlace de accesibilidad: invisible hasta que se navega con el tabulador */
.saltar-contenido {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 12px 22px;
  background: var(--tinta);
  color: var(--fondo);
  border-radius: 0 0 12px 12px;
  font-weight: 600;
  transition: top var(--transicion);
}
.saltar-contenido:focus { top: 0; color: var(--fondo); }

/* <main> lleva tabindex="-1" para que el enlace de salto pueda dejar el foco
   ahí de verdad. Como no es un control, no le dibujamos marco. */
main:focus { outline: none; }

/* Marco visible al navegar con teclado (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  /* Sin border-radius aquí: el navegador dibuja el marco siguiendo la forma
     de cada elemento. Si se pusiera, los botones redondos se volverían
     rectángulos justo al llegar a ellos con el tabulador. */
}

/* Texto solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. BOTONES
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  /* Terracota EXACTO del encargo (#C15A2B) */
  background-color: var(--acento);
  color: var(--blanco);
  border: 2px solid var(--acento);
  border-radius: var(--radio-boton);
  font-family: inherit;
  font-size: 1.2rem;   /* 19,2 px en negrita: cuenta como "texto grande" para
                          la norma de accesibilidad, así el terracota exacto vale */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(193, 90, 43, 0.22);
  transition: background-color var(--transicion), border-color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion), color var(--transicion);
}
/* Al pasar el ratón el botón se OSCURECE, nunca se aclara: si se aclarase,
   el texto blanco dejaría de leerse justo cuando el usuario va a pulsarlo. */
.boton:hover {
  background-color: var(--acento-os);
  border-color: var(--acento-os);
  color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(193, 90, 43, 0.28);
}
.boton:active { transform: translateY(0); }

/* Botón secundario: transparente con borde azul marino */
.boton-secundario {
  background-color: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
  box-shadow: none;
}
.boton-secundario:hover {
  background-color: var(--tinta);
  border-color: var(--tinta);
  color: var(--fondo);
  box-shadow: var(--sombra-media);
}

/* Botón pequeño (el de la cabecera). Al ser letra pequeña necesita el
   terracota oscuro para cumplir la norma de contraste: la diferencia con el
   terracota de marca es mínima a la vista, pero pasa de 4,4:1 a 5,4:1. */
.boton-pequeno {
  padding: 10px 22px;
  font-size: 0.92rem;
  background-color: var(--acento-os);
  border-color: var(--acento-os);
}
.boton-grande { padding: 19px 48px; font-size: 1.3rem; }


/* ==========================================================================
   4. CABECERA Y MENÚ
   ========================================================================== */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  background-color: rgba(250, 247, 242, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicion), border-color var(--transicion),
              background-color var(--transicion);
}
/* Al bajar por la página, la cabecera gana una línea y una sombra sutil */
.cabecera.desplazada {
  border-bottom-color: var(--borde);
  box-shadow: var(--sombra-suave);
  background-color: rgba(250, 247, 242, 0.96);
}

.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Todas las páginas menos la portada dejan hueco bajo la cabecera fija */
main { padding-top: var(--alto-cabecera); }
body.con-hero main { padding-top: 0; }

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--tinta);
  text-decoration: none;
}
/* El logo es una imagen. Se fija el ALTO y el ancho se ajusta solo, así que
   si algún día cambias el archivo por otro de distinta proporción, no hay que
   tocar nada aquí.
   En el pie se usa el mismo tamaño pero el archivo "logo-claro.png", que lleva
   el nombre en color hueso para que se lea sobre el azul marino. */
.logo-img {
  display: block;
  height: 44px;
  width: auto;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.logo:hover .logo-img { transform: scale(1.03); }

/* --- Menú --- */
.nav { display: flex; align-items: center; }

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.menu a:not(.boton) {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  color: var(--tinta);
  font-size: 0.98rem;
  font-weight: 600;
  transition: color var(--transicion);
}
/* Subrayado que crece al pasar el ratón o en la página activa */
.menu a:not(.boton)::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background-color: var(--acento);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.menu a:not(.boton):hover { color: var(--acento-os); }
.menu a:not(.boton):hover::after { transform: scaleX(1); }
/* OJO con el ":not(.boton)": la página activa se marca poniendo el texto en
   terracota, pero el botón "Pedir presupuesto" YA tiene el fondo terracota.
   Sin esta exclusión, en la página de contacto el texto del botón salía
   terracota sobre terracota y el botón se veía vacío. */
.menu a:not(.boton).activo { color: var(--acento-os); }
.menu a:not(.boton).activo::after { transform: scaleX(1); }

.menu-cta { margin-left: 10px; }

/* --- Botón hamburguesa (oculto en escritorio) --- */
.menu-boton {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.menu-boton:hover { background-color: var(--arena); }
.menu-linea {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background-color: var(--tinta);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
/* Las tres líneas se convierten en una "X" cuando el menú está abierto */
.menu-boton[aria-expanded="true"] .menu-linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-linea:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] .menu-linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   5. PORTADA (HERO)
   ========================================================================== */
/* La portada ES el carrusel: las fotos ocupan toda la pantalla y van pasando
   por detrás del texto, agrupadas por tipo de trabajo (cocinas, baños...).
   El texto de encima NO cambia con las fotos: así la página conserva un
   único titular, que es lo que necesitan Google y los lectores de pantalla. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 840px);
  padding-top: calc(var(--alto-cabecera) + 48px);
  padding-bottom: 132px;  /* hueco para la barra inferior de controles */
  overflow: hidden;
  background-color: var(--arena);
}

/* --- Capa 1: las fotos --- */
/* Anula el recuadro redondeado del carrusel normal: aquí va a sangre. */
.hero-ventana {
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--arena);
}
.hero-ventana .carrusel-pista { height: 100%; }
.hero-diapositiva { height: 100%; }
.hero-diapositiva img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;   /* anula el 16/9 del carrusel normal */
  object-fit: cover;
  /* Las fotos son verticales (hechas con el móvil). Encuadrando un poco por
     encima del centro se ve la parte interesante y no el suelo. */
  object-position: center 38%;
}

/* --- Capa 2: velo blanco translúcido --- */
/* Muy cubriente donde va el texto (izquierda) y casi transparente a la
   derecha, para que la foto se vea de verdad. Es el gesto que hacía bonita
   la portada de la versión anterior, pero con la zona del texto protegida. */
.hero-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* En móvil y tablet la foto va detrás del texto, así que el velo cubre de
     arriba abajo. No baja de 0,70: medido contra una foto totalmente negra,
     el texto sigue cumpliendo la norma de contraste. */
  background: linear-gradient(
    180deg,
    rgba(250, 247, 242, 0.94) 0%,
    rgba(250, 247, 242, 0.88) 52%,
    rgba(250, 247, 242, 0.70) 100%
  );
}

/* --- Capa 3: el texto --- */
/* "pointer-events" deja pasar los clics a las fotos de debajo, salvo en los
   botones, que sí se pueden pulsar. */
.hero-capa { position: relative; width: 100%; pointer-events: none; }
.hero-capa a,
.hero-capa button { pointer-events: auto; }
.hero-contenido > * { max-width: 720px; }

/* --- Capa 4: barra inferior (tipo de trabajo + controles) --- */
.hero-barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 28px;
}
.hero-barra-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
/* Pastilla que dice de qué tipo de trabajo es la foto que se está viendo.
   La cambia sola el archivo script.js. */
.hero-tipo {
  margin: 0;
  padding: 9px 21px;
  background-color: rgba(250, 247, 242, 0.93);
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  color: var(--tinta);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--sombra-suave);
}
/* En la portada las flechas van en la barra de abajo, no flotando en el
   centro: allí taparían el texto. */
.hero-controles { margin-top: 0; }
.hero-controles .carrusel-flecha {
  position: static;
  transform: none;
  width: 42px;
  height: 42px;
}
.hero-controles .carrusel-flecha:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   PORTADA EN PANTALLA ANCHA: texto a la izquierda, foto a la derecha
   --------------------------------------------------------------------------
   Las fotos de obra están hechas con el móvil, o sea que son VERTICALES. Si se
   ponen a sangre en una portada apaisada hay que recortarlas tantísimo que solo
   se ve un trozo suelto y no se entiende el trabajo. Reservándoles la mitad
   derecha se ven casi enteras, y además el texto queda sobre fondo liso, que se
   lee mejor que sobre cualquier foto.
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .hero {
    background-color: var(--fondo);
    padding-bottom: 120px;
  }

  /* La foto ocupa la mitad derecha, de arriba abajo */
  .hero-ventana {
    left: auto;
    width: 52%;
  }

  /* El velo solo cubre el borde izquierdo de la foto, para fundirla con el
     fondo en lugar de dejar un corte recto */
  .hero-velo {
    left: auto;
    width: 52%;
    background: linear-gradient(
      90deg,
      var(--fondo) 0%,
      rgba(250, 247, 242, 0.72) 12%,
      rgba(250, 247, 242, 0.30) 28%,
      rgba(250, 247, 242, 0.08) 46%,
      rgba(250, 247, 242, 0) 62%
    );
  }

  /* EL BLOQUE DE TEXTO SE DESPEGA DEL CONTENEDOR CENTRADO
     ----------------------------------------------------
     El resto de la página va dentro de un contenedor centrado de 1180 px. En
     la portada eso es un problema: cuanto más ancha es la pantalla, más a la
     derecha empieza ese contenedor, y el texto acababa montándose sobre la
     foto. Así que aquí el bloque se coloca por su cuenta:

       · Empieza donde empezaría el contenedor... pero como mucho a 160 px del
         borde. Hasta ~1500 px queda alineado con las secciones de abajo; a
         partir de ahí se queda quieto en vez de irse hacia la derecha.
       · Su caja termina 36 px antes de donde empieza la foto (la foto ocupa
         el 52% derecho, o sea que empieza en el 48%).

     Con esto el texto NUNCA toca la foto, y en pantallas grandes gana sitio
     en lugar de perderlo. */
  .hero .hero-contenido {
    max-width: none;
    margin-inline: 0;
    padding-inline-start: clamp(24px, calc((100vw - 1180px) / 2 + 24px), 130px);
    padding-inline-end: 0;
    width: calc(48vw - 36px);
    box-sizing: border-box;
  }
  /* El titular puede usar toda la caja: lo necesita para que el eslogan quepa
     en DOS líneas ("Transformamos tu espacio," / "creamos tu universo"). */
  .hero .hero-contenido > * { max-width: 720px; }

  /* El tamaño del titular sigue al ancho disponible (2,7vw) en vez de ser fijo.
     Así el eslogan se parte siempre por la coma y en dos líneas, desde 1100 px
     hasta 2560 px, en lugar de romperse en tres o cuatro trozos. */
  .hero .hero-contenido h1 { font-size: clamp(1.9rem, 2.5vw, 3.4rem); }

  /* El párrafo sí se queda más estrecho: una línea de texto muy larga cansa */
  .hero .hero-texto { max-width: 520px; }

  /* LA CABECERA SE ALINEA CON EL TEXTO DE LA PORTADA
     Mismo cálculo que el bloque de texto de arriba, así el logo arranca
     exactamente donde arranca el titular y el menú queda a la misma distancia
     del borde derecho. */
  .cabecera .contenedor {
    max-width: none;
    padding-inline: clamp(24px, calc((100vw - 1180px) / 2 + 24px), 130px);
  }

  /* La pastilla del tipo de trabajo va sobre la foto; los controles, debajo
     del texto */
  .hero-barra-interior { flex-direction: row-reverse; }

  /* EL BOTÓN DE WHATSAPP, A LA DERECHA DEL RECUADRO
     Pegado al teléfono quedaba apretujado en mitad de la frase. Aquí se saca
     del texto y se lleva a su propia franja de 84 px a la derecha, centrado
     tanto en esa franja como entre las dos líneas de texto.
     El "padding-right" reserva ese hueco para que el texto no pase por debajo.
     (En móvil NO se aplica: allí sigue en medio, que es donde cabe.)

     Todo lleva ".hero" delante a propósito: las reglas normales de
     ".hero-etiqueta" y ".hero-wasap" están más abajo en este archivo y, con la
     misma especificidad, ganaban ellas y esto no hacía nada. */
  .hero .hero-etiqueta {
    position: relative;
    padding-right: 90px;
  }
  .hero .hero-wasap {
    position: absolute;
    top: 50%;
    right: 25px;              /* (90 - 40) / 2 = 25: centrado en su franja */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
  }
  .hero .hero-wasap svg { width: 22px; height: 22px; }
  /* El "-50%" hay que repetirlo en el hover, o el icono se descolocaría */
  .hero .hero-wasap:hover { transform: translateY(calc(-50% - 2px)); }
}

/* Reclamo de la portada: qué hacemos, dónde, el teléfono y el WhatsApp.
   Va en negrita y en azul marino (no en gris) porque es lo primero que tiene
   que quedar claro al entrar. La barra terracota de arriba lo separa del resto
   sin descuadrar el texto, que va centrado. */
.hero-etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  max-width: 560px;
  margin-bottom: 26px;
  padding: 16px 22px;
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--acento);
  border-radius: 16px;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: center;
  box-shadow: var(--sombra-suave);
}
.hero-etiqueta-texto { display: inline; }

/* El teléfono y "pide presupuesto" son enlaces: se subrayan siempre para que
   se vea que se pueden pulsar, no solo al pasar el ratón. */
.hero-etiqueta a:not(.hero-wasap) {
  color: var(--acento-os);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-etiqueta a:not(.hero-wasap):hover { color: var(--tinta); }

/* Botón redondo de WhatsApp. Va en el verde de la propia marca WhatsApp
   porque es lo que la gente reconoce de un vistazo; es el único punto de la
   web donde se usa un color de fuera de la paleta, y es a propósito. */
.hero-wasap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  /* Verde WhatsApp, algo oscurecido: con el verde original el icono blanco
     se quedaba en 3,09:1 y la norma pide 3:1 justos. Así sube a 3,47:1. */
  background-color: #1B9E50;
  color: var(--blanco);
  border-radius: 50%;
  transition: background-color var(--transicion), transform var(--transicion);
}
.hero-wasap svg { width: 19px; height: 19px; }
.hero-wasap:hover {
  background-color: #17833F;
  color: var(--blanco);
  transform: translateY(-2px);
}
.hero-texto {
  max-width: 560px;
  margin-bottom: 34px;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--gris);
}
.hero-botones { display: flex; flex-wrap: wrap; gap: 14px; }

/* Cabecera pequeña para las páginas interiores (trabajos, contacto, aviso legal) */
.cabecera-pagina {
  position: relative;
  padding: 74px 0 62px;
  background-color: var(--arena);
  overflow: hidden;
  text-align: center;
}
.cabecera-pagina-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cabecera-pagina-velo {
  position: absolute;
  inset: 0;
  background-color: rgba(250, 247, 242, 0.90);
}
.cabecera-pagina .contenedor { position: relative; }
.cabecera-pagina h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.cabecera-pagina p {
  max-width: 620px;
  margin-inline: auto;
  color: var(--gris);
  font-size: 1.08rem;
}


/* ==========================================================================
   6. SECCIONES Y TARJETAS DE SERVICIOS
   ========================================================================== */
.seccion { padding: clamp(64px, 9vw, 108px) 0; }
.seccion-arena { background-color: var(--arena); }

.seccion-cabecera {
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 62px);
  text-align: center;
}
.seccion-cabecera p:not(.antetitulo) { color: var(--gris); font-size: 1.08rem; }

/* --- Presentación (texto + foto) --- */
.presentacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
}
.presentacion-texto p { color: var(--gris); }

.lista-ventajas { list-style: none; margin-top: 26px; }
.lista-ventajas li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 34px;
  color: var(--tinta);
  font-weight: 500;
}
/* Pequeño check dibujado con CSS delante de cada ventaja */
.lista-ventajas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(193, 90, 43, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C15A2B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.6 4.6L19 7.8'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}

.presentacion-foto { margin: 0; }
.presentacion-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}

/* --- Tarjetas de servicios --- */
/* El "min(320px, 100%)" es importante: sin él, en pantallas muy estrechas
   (320px) las tarjetas no se encogen y el contenido se sale de la pantalla.
   Con 320px salen 3 columnas en escritorio, 2 en tablet y 1 en móvil. */
.tarjetas-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}
.tarjeta-servicio {
  padding: 34px 30px 32px;
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta-servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
  border-color: rgba(193, 90, 43, 0.32);
}
.tarjeta-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  background-color: rgba(193, 90, 43, 0.10);
  border-radius: 16px;
  color: var(--acento);
  transition: background-color var(--transicion);
}
.tarjeta-icono svg { width: 27px; height: 27px; }
.tarjeta-servicio:hover .tarjeta-icono { background-color: rgba(193, 90, 43, 0.18); }
.tarjeta-servicio h3 { margin-bottom: 0.45em; }
.tarjeta-servicio p { color: var(--gris); font-size: 0.98rem; margin: 0; }

/* --- Banda de llamada a la acción --- */
.banda-cta {
  padding: clamp(60px, 8vw, 92px) 0;
  background-color: var(--tinta);
  text-align: center;
}
.banda-cta h2 { color: var(--fondo); }
.banda-cta p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: rgba(250, 247, 242, 0.82);
  font-size: 1.08rem;
}


/* ==========================================================================
   7. CARRUSEL
   ========================================================================== */
.carrusel { position: relative; }

.carrusel-ventana {
  overflow: hidden;
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
  background-color: var(--blanco);
}
/* La "pista" contiene todas las fotos en fila y se desplaza de una en una */
.carrusel-pista {
  display: flex;
  transition: transform 620ms cubic-bezier(0.4, 0.02, 0.2, 1);
}
.carrusel-diapositiva {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
}
.carrusel-diapositiva img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.carrusel-pie {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 11px 22px;
  background-color: rgba(250, 247, 242, 0.93);
  border-radius: var(--radio-boton);
  color: var(--tinta);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: var(--sombra-suave);
}

/* --- Flechas --- */
.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--sombra-media);
  transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.carrusel-flecha svg { width: 22px; height: 22px; }
/* Mismo terracota que el botón de pausa: son controles hermanos */
.carrusel-flecha:hover {
  background-color: var(--acento-os);
  color: var(--blanco);
  border-color: var(--acento-os);
}
.carrusel-anterior  { left: 16px; }
.carrusel-siguiente { right: 16px; }
.carrusel-anterior:hover  { transform: translateY(-50%) scale(1.06); }
.carrusel-siguiente:hover { transform: translateY(-50%) scale(1.06); }

/* --- Puntos de navegación y botón de pausa --- */
.carrusel-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}
.carrusel-puntos {
  display: flex;
  align-items: center;
  gap: 10px;
}
.carrusel-punto {
  width: 10px;
  height: 10px;
  padding: 0;
  /* Bastante opaco a propósito: un punto casi transparente es un botón que
     nadie ve, y estos puntos indican en qué foto estamos. */
  background-color: rgba(30, 42, 68, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transicion), width var(--transicion);
}
.carrusel-punto:hover { background-color: var(--acento-os); }
.carrusel-punto[aria-current="true"] {
  width: 32px;
  border-radius: var(--radio-boton);
  background-color: var(--acento-os);
}

/* Botón para parar o reanudar el paso automático de fotos.
   Es obligatorio para accesibilidad: quien lea despacio debe poder pararlo. */
.carrusel-pausa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--borde-campo);
  border-radius: 50%;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}
.carrusel-pausa:hover {
  background-color: var(--acento-os);
  border-color: var(--acento-os);
  color: var(--blanco);
}
.carrusel-pausa svg { width: 15px; height: 15px; }
/* Se muestra el icono de "play" o el de "pausa" según el estado */
.carrusel-pausa .icono-reanudar { display: none; }
.carrusel-pausa[data-pausado="true"] .icono-pausar  { display: none; }
.carrusel-pausa[data-pausado="true"] .icono-reanudar { display: block; }


/* ==========================================================================
   8. GALERÍA DE TRABAJOS Y CIFRAS
   ========================================================================== */
/* Dos proyectos por fila, no tres: cada tarjeta lleva DOS fotos (antes y
   después) y con tres columnas cada foto quedaba tan pequeña que no se
   apreciaba el cambio, que es justo lo que hay que ver aquí. */
/* Cada bloque es un tipo de trabajo, con su título y sus fotos debajo */
.galeria-grupo { margin-bottom: clamp(48px, 6vw, 76px); }
.galeria-grupo:last-child { margin-bottom: 0; }

.galeria-grupo-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;   /* en móvil el texto baja a la línea siguiente */
  gap: 6px 16px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}
.galeria-grupo-titulo h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  /* "Cubiertas e impermeabilización" es más largo que una pantalla de 320 px */
  overflow-wrap: anywhere;
}
.galeria-grupo-titulo p { margin: 0; color: var(--gris); font-size: 0.97rem; }

/* Rejilla de 3 columnas fijas a propósito, en vez de "auto-fit": con auto-fit,
   un grupo que solo tiene una foto la estiraba a todo el ancho de la página y
   quedaba desproporcionada. Así una foto sola ocupa un tercio, como las demás. */
.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.galeria-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background-color: var(--arena);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.galeria-foto:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.galeria-foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
/* Pie de foto: se apoya sobre la propia imagen, con fondo claro para que se lea */
.galeria-foto figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 16px;
  background-color: rgba(250, 247, 242, 0.94);
  border-radius: 12px;
  color: var(--tinta);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Alguna foto es apaisada: ocupa dos huecos y se ve mejor */
.galeria-foto.ancha { grid-column: span 2; }
.galeria-foto.ancha img { aspect-ratio: 16 / 10; }

.etiqueta-foto {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 14px;
  border-radius: var(--radio-boton);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.etiqueta-antes   { background-color: rgba(250, 247, 242, 0.94); color: var(--gris); }
.etiqueta-despues { background-color: var(--acento-os); color: var(--blanco); }

.proyecto-info { padding: 26px 28px 30px; }
.proyecto-info h3 { margin-bottom: 0.35em; }
.proyecto-lugar {
  display: block;
  margin-bottom: 0.9em;
  color: var(--acento-os);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.proyecto-info p { color: var(--gris); font-size: 0.97rem; margin: 0; }

/* (Aquí había los estilos de las opiniones de clientes. Se quitaron junto con
   la sección: eran opiniones de ejemplo con nombres inventados.) */

/* --- Cifras destacadas --- */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 22px;
  text-align: center;
}
.cifra {
  padding: 32px 20px;
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
}
.cifra-numero {
  display: block;
  color: var(--acento);
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.cifra-texto {
  display: block;
  margin-top: 6px;
  color: var(--gris);
  font-size: 0.92rem;
  font-weight: 600;
}


/* ==========================================================================
   9. FORMULARIO DE CONTACTO Y MAPA
   ========================================================================== */
.contacto-rejilla {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 58px);
  align-items: start;
}

.tarjeta-formulario {
  padding: clamp(30px, 4vw, 46px);
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
}

.campo { margin-bottom: 22px; }
.campo label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--tinta);
}
.campo-obligatorio { color: var(--acento-os); }

/* El borde de los campos es más marcado que el de las tarjetas: tiene que
   verse dónde se puede escribir, incluso con poca vista o pantalla con brillo. */
.campo input,
.campo textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: var(--fondo);
  border: 1.5px solid var(--borde-campo);
  border-radius: 12px;
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transicion), background-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 148px; resize: vertical; }
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(85, 82, 76, 0.85); }

/* Ojo: la casilla de verificación queda FUERA de esta regla. En una casilla
   nativa el navegador no pinta ni el fondo ni el borde, así que quitarle el
   "outline" la dejaría sin ninguna marca de foco al navegar con el tabulador. */
.campo input:not([type="checkbox"]):focus,
.campo textarea:focus {
  outline: none;
  background-color: var(--blanco);
  border-color: var(--acento-os);
  box-shadow: 0 0 0 4px rgba(168, 73, 31, 0.18);
}

/* Marca de foco explícita para la casilla de la política de privacidad */
.campo-casilla input:focus-visible {
  outline: 3px solid var(--acento-os);
  outline-offset: 3px;
}
/* Campo con error: borde rojizo y mensaje debajo */
.campo.con-error input,
.campo.con-error textarea { border-color: #B3261E; background-color: #FDF5F4; }

/* Campo señuelo contra el spam. Se esconde así, y no con "display:none",
   porque muchos programas automáticos saben ignorar lo que está oculto de la
   forma evidente. Lleva aria-hidden en el HTML para que ningún lector de
   pantalla se lo lea a una persona. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo-error {
  display: none;
  margin-top: 7px;
  color: #B3261E;
  font-size: 0.86rem;
  font-weight: 600;
}
.campo.con-error .campo-error { display: block; }

/* Casilla de aceptación de la política de privacidad */
.campo-casilla {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 26px;
}
/* El mensaje de error de la casilla ocupa toda la fila, debajo del texto */
.campo-casilla .campo-error { flex-basis: 100%; margin-top: 0; }
.campo-casilla input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  padding: 0;
  accent-color: var(--acento-os);
  cursor: pointer;
}
.campo-casilla label {
  flex: 1 1 0;
  margin: 0;
  color: var(--gris);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.55;
}
.campo-casilla.con-error label { color: #B3261E; }

.aviso-formulario {
  margin-top: 18px;
  color: var(--gris);
  font-size: 0.85rem;
}

/* Mensaje verde de "enviado correctamente" */
.mensaje-exito {
  display: none;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 24px;
  padding: 18px 20px;
  background-color: #EDF6EE;
  border: 1.5px solid #B7D9BC;
  border-radius: 14px;
  color: #1E5B2A;
  font-weight: 600;
}
.mensaje-exito.visible { display: flex; }
.mensaje-exito svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }

/* Aviso ámbar: sale cuando el mensaje NO se ha podido enviar (el servidor no
   responde, o se han mandado dos muy seguidos). Nunca se enseña un «¡Gracias!»
   si el envío ha fallado: quien escribe creería que su mensaje ha llegado. */
.mensaje-aviso {
  display: none;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 24px;
  padding: 18px 20px;
  background-color: #FDF3E3;
  border: 1.5px solid #E0B473;
  border-radius: 14px;
  color: #6B4408;
  font-weight: 600;
}
.mensaje-aviso.visible { display: flex; }
.mensaje-aviso svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; }
.mensaje-aviso code {
  padding: 1px 6px;
  background-color: rgba(107, 68, 8, 0.10);
  border-radius: 5px;
  font-size: 0.92em;
}

/* --- Columna lateral con los datos de contacto --- */
.panel-datos {
  padding: clamp(28px, 4vw, 40px);
  background-color: var(--arena);
  border-radius: var(--radio);
}
.dato-contacto {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(30, 42, 68, 0.10);
}
.dato-contacto:last-of-type { border-bottom: none; }
.dato-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--blanco);
  border-radius: 13px;
  color: var(--acento);
  box-shadow: var(--sombra-suave);
}
.dato-icono svg { width: 21px; height: 21px; }
.dato-titulo {
  display: block;
  color: var(--gris);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.dato-valor {
  display: block;
  color: var(--tinta);
  font-size: 1.04rem;
  font-weight: 600;
}
a.dato-valor:hover { text-decoration: underline; }

/* --- Cómo trabajamos: los tres pasos de la página de contacto --- */
/* (Sustituyen al mapa, que se quitó porque la dirección es solo el domicilio
   fiscal y no hay local que visitar.) */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.paso {
  padding: 30px 28px;
  background-color: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
}
.paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  background-color: var(--acento);
  color: var(--blanco);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
}
.paso h3 { margin-bottom: 0.4em; }
.paso p { margin: 0; color: var(--gris); font-size: 0.97rem; }


/* ==========================================================================
   10. PÁGINA DE PRIVACIDAD
   ========================================================================== */
.texto-legal {
  max-width: 780px;
  margin-inline: auto;
}
.texto-legal h2 {
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--borde);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.texto-legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.texto-legal h3 { margin-top: 1.8em; font-size: 1.08rem; }
.texto-legal p,
.texto-legal li { color: var(--gris); }
.texto-legal ul { margin: 0 0 1.2em; padding-left: 24px; list-style: disc; }
.texto-legal li { margin-bottom: 8px; }
.texto-legal strong { color: var(--tinta); }

/* Recuadro de arena para destacar los datos del responsable */
.caja-datos {
  margin: 26px 0 34px;
  padding: 26px 30px;
  background-color: var(--arena);
  border-left: 4px solid var(--acento);
  border-radius: 14px;
}
.caja-datos p { margin-bottom: 6px; }
.caja-datos p:last-child { margin-bottom: 0; }

/* Aclaración destacada dentro del texto legal (sin fondo, solo una línea
   lateral): sirve para explicar en cristiano un punto importante. */
.nota-legal {
  margin: 22px 0 30px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--arena);
  font-size: 0.97rem;
}

.fecha-actualizacion {
  margin-bottom: 34px;
  color: var(--gris);
  font-size: 0.9rem;
  font-style: italic;
}

/* Tabla de derechos / conservación.
   Va dentro de un <div class="tabla-scroll"> para que en móvil se desplace
   lateralmente ELLA sola, sin arrastrar el resto de la página. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 22px 0 32px;
}
.tabla-legal {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tabla-legal th,
.tabla-legal td {
  padding: 13px 16px;
  border: 1px solid var(--borde);
  text-align: left;
  vertical-align: top;
}
.tabla-legal th { background-color: var(--arena); color: var(--tinta); font-weight: 700; }
.tabla-legal td { color: var(--gris); }


/* ==========================================================================
   11. PIE DE PÁGINA
   ========================================================================== */
.pie {
  background-color: var(--tinta);
  color: rgba(250, 247, 242, 0.76);
}
.pie-columnas {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(34px, 5vw, 64px);
  padding-top: clamp(54px, 7vw, 78px);
  padding-bottom: clamp(40px, 5vw, 56px);
}
.pie h3 {
  margin-bottom: 1.1em;
  color: var(--fondo);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* (Aquí se coloreaba el nombre del logo del pie cuando era texto. Ahora el pie
   usa el archivo "logo-claro.png", que ya viene con el color correcto.) */

.pie-eslogan {
  max-width: 330px;
  margin: 20px 0 24px;
  color: rgba(250, 247, 242, 0.7);
  font-size: 0.98rem;
  font-style: italic;
}

.pie-social { display: flex; gap: 12px; }
.pie-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: rgba(250, 247, 242, 0.08);
  border-radius: 50%;
  color: var(--fondo);
  transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.pie-social a:hover {
  background-color: var(--acento);
  color: var(--blanco);
  transform: translateY(-3px);
}
.pie-social svg { width: 19px; height: 19px; }

.pie-dato {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  font-size: 0.98rem;
}
.pie-dato svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; color: var(--acento-cl); }
.pie-dato a { color: rgba(250, 247, 242, 0.86); }
.pie-dato a:hover { color: var(--acento-cl); }

.pie-enlaces { list-style: none; margin-top: 20px; }
.pie-enlaces li { margin-bottom: 11px; }
.pie-enlaces a { color: rgba(250, 247, 242, 0.86); font-size: 0.98rem; }
.pie-enlaces a:hover { color: var(--acento-cl); }

.pie-legal {
  border-top: 1px solid rgba(250, 247, 242, 0.14);
  font-size: 0.88rem;
}
.pie-legal-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.pie-legal p { margin: 0; color: rgba(250, 247, 242, 0.6); }
.pie-legal a { color: rgba(250, 247, 242, 0.75); }
.pie-legal a:hover { color: var(--acento-cl); }

/* --- Crédito de quien ha hecho la web --- */
.pie-autor {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 26px;
  color: rgba(250, 247, 242, 0.62);
  font-size: 0.82rem;
}
/* El logo y la dirección web van dentro del MISMO enlace, para que sean una
   sola cosa que pulsar y no dos enlaces al mismo sitio, uno detrás de otro. */
.pie-autor-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pie-autor-marca img {
  display: block;
  height: 18px;
  width: auto;
  /* Se aclara un poco al pasar el ratón, igual que el texto de al lado */
  opacity: 0.9;
  transition: opacity var(--transicion);
}
.pie-autor-marca:hover img { opacity: 1; }
.pie-autor a { color: rgba(250, 247, 242, 0.82); }


/* ==========================================================================
   12. MÓVIL Y TABLET
   --------------------------------------------------------------------------
   Lo de arriba es el diseño para pantalla de ordenador; aquí abajo se ajusta
   lo que cambia en pantallas más pequeñas, de mayor a menor.
   ========================================================================== */

/* --- Tablet y móvil: menú hamburguesa (hasta 900 px) --- */
@media (max-width: 900px) {

  .menu-boton { display: flex; }

  /* El menú se convierte en un panel desplegable a pantalla completa */
  .menu {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--alto-cabecera));
    padding: 14px 24px 34px;
    overflow-y: auto;
    background-color: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    /* Oculto por defecto: se desliza hacia abajo al abrirlo */
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transicion), opacity var(--transicion), visibility var(--transicion);
  }
  .menu.abierto {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu li { border-bottom: 1px solid var(--borde); }
  .menu li:last-child { border-bottom: none; }

  .menu a:not(.boton) {
    display: block;
    padding: 17px 4px;
    font-size: 1.08rem;
  }
  .menu a:not(.boton)::after { left: 4px; right: auto; bottom: 10px; width: 26px; }

  .menu-cta { margin: 22px 0 0; }
  .menu-cta .boton { width: 100%; padding: 15px 24px; font-size: 1rem; }

  /* --- Ajustes de contenido --- */
  .galeria { grid-template-columns: repeat(2, 1fr); }

  .presentacion { grid-template-columns: 1fr; }
  .presentacion-foto img { aspect-ratio: 16 / 11; }

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

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

  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}

/* --- Móvil (hasta 640 px) --- */
@media (max-width: 640px) {

  body { font-size: 1rem; }

  .contenedor { padding-inline: 20px; }

  .hero-botones .boton { width: 100%; }

  /* En móvil las flechas se hacen más pequeñas y se pegan al borde de la foto */
  .carrusel-flecha { width: 42px; height: 42px; }
  .carrusel-anterior  { left: 8px; }
  .carrusel-siguiente { right: 8px; }
  .carrusel-diapositiva img { aspect-ratio: 4 / 3; }
  /* ...pero las de la portada siguen ocupando toda la altura */
  .hero-diapositiva img { aspect-ratio: auto; }
  .carrusel-pie {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 9px 16px;
    font-size: 0.84rem;
    text-align: center;
  }

  /* Una sola columna: la foto apaisada ya no puede ocupar dos huecos */
  .galeria { grid-template-columns: 1fr; }
  .galeria-foto.ancha { grid-column: span 1; }
  .galeria-foto.ancha img { aspect-ratio: 4 / 3; }

  .pie-columnas { grid-template-columns: 1fr; }
  .pie-legal-interior { flex-direction: column; align-items: flex-start; text-align: left; }

  .mapa iframe { height: 320px; }

  .caja-datos { padding: 22px 20px; }
}


/* ==========================================================================
   PORTADA EN MÓVIL Y TABLET: LA FOTO ARRIBA, EL TEXTO DEBAJO
   ==========================================================================
   En pantalla ancha el texto va a la izquierda y la foto a la derecha, y
   funciona. Apilado, en cambio, no: si el texto se pone ENCIMA de la foto
   hace falta un velo tan cubriente que la foto se convierte en una textura
   y, al entrar, no se entiende a qué se dedica la empresa.

   Así que en móvil se separan: primero una banda de foto limpia, sin velo
   ninguno, con la etiqueta de qué tipo de trabajo es; y debajo el eslogan,
   el texto y los botones sobre fondo liso. Lo primero que ve el visitante
   es una obra terminada, que es lo que vende.

   Se mantiene todo lo demás: el carrusel sigue pasando solo, con sus flechas,
   sus puntos, su botón de pausa y el gesto de deslizar el dedo.
   ========================================================================== */
@media (max-width: 1099px) {

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--alto-cabecera) 0 clamp(36px, 7vw, 60px);
    background-color: var(--fondo);
  }

  /* 1) La banda de foto, arriba del todo */
  .hero-ventana {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(260px, 46vh, 420px);
  }
  .hero-diapositiva img { object-position: center 42%; }

  /* Sin velo: aquí la foto no lleva texto encima, así que se ve limpia */
  .hero-velo { display: none; }

  /* 2) Debajo de la foto, la fila de controles del carrusel, centrada.
        La pastilla NO va en esta fila: en una pantalla estrecha, pastilla más
        pausa más puntos más flechas no caben de ancho y se salían de la
        pantalla. Va flotando sobre la esquina de la foto (ver más abajo). */
  .hero-barra {
    order: 2;
    position: relative;
    padding: 16px 0 4px;
  }
  .hero-barra-interior {
    justify-content: center;
    gap: 12px;
  }
  /* Por si algún día se añaden más fotos y los puntos crecen: que bajen de
     línea en vez de desbordar */
  .hero-controles { flex-wrap: wrap; gap: 10px; }

  /* La pastilla del tipo de trabajo se apoya sobre la esquina de la foto.
     Lleva fondo sólido para que se lea sobre cualquier fotografía. */
  .hero-tipo {
    position: absolute;
    left: 24px;
    bottom: calc(100% + 12px);
    max-width: calc(100% - 48px);
    font-size: 0.84rem;
    padding: 8px 16px;
  }

  /* 3) Y por último el texto, sobre fondo liso */
  .hero-capa {
    order: 3;
    padding-top: clamp(18px, 4vw, 28px);
  }
  .hero-contenido > * { max-width: 100%; }
  .hero-etiqueta { margin-bottom: 18px; }
  .hero-botones { gap: 12px; }
}


/* --- Respeta a quien prefiere menos animaciones --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Impresión: quita cabecera, pie y adornos --- */
@media print {
  .cabecera, .pie, .banda-cta, .carrusel-flecha, .carrusel-controles,
  .hero-barra, .saltar-contenido { display: none !important; }
  main { padding-top: 0; }
  body { background: #fff; color: #000; }
}