/* ==========================================================================
   El Taller · Componentes
   ========================================================================== */

/* --- Navegación ----------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background var(--t-media) var(--curva),
              border-color var(--t-media) var(--curva);
  border-bottom: 1px solid transparent;
}

/* Sobre el hero (no sólida) la nav es un contexto OSCURO: se redefinen sus
   tokens para que el texto y el logo se lean sobre la foto, con un velo que
   garantiza el contraste sea cual sea la diapositiva. */
.nav:not(.solida) {
  --texto:       #F4EFE6;
  --texto-sec:   #C7BCA9;
  --texto-tenue: #9C9080;
  --acento:      #FF7F1D;
  --linea:       #4A3E2C;
  background: linear-gradient(to bottom, rgba(14, 12, 10, .65) 0%, rgba(14, 12, 10, .25) 60%, transparent 100%);
}

/* Al bajar se vuelve una barra CLARA, en la piel del sitio (tokens claros por
   defecto: texto oscuro, logo en su color original). */
.nav.solida {
  background: rgba(247, 243, 236, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--linea);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e6);
  min-height: 76px;
}

.nav-logo { flex: none; }

/* El logo original es texto casi negro (#1B1B1B) con la pantalla en naranja.
   Sobre la barra CLARA va en su color original —y así recupera el naranja del
   isotipo—; sobre el hero oscuro y en el pie oscuro se pasa a blanco por filtro.
   PENDIENTE: pedir a El Taller el logo en SVG con versión negativa. */
.nav-logo img { height: 34px; width: auto; }
.nav:not(.solida) .nav-logo img { filter: brightness(0) invert(1); }

.pie-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--e8);
}

.nav-enlace {
  position: relative;
  display: inline-block;
  padding-block: var(--e2);
  color: var(--texto);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--t-rapida) var(--curva);
  cursor: pointer;
}

/* Subrayado que crece: sólo transform, no provoca reflow */
.nav-enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-media) var(--curva);
}

.nav-enlace:hover { color: var(--acento); }
.nav-enlace:hover::after,
.nav-enlace[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-enlace[aria-current="page"] { color: var(--acento); }

.nav-lado {
  display: flex;
  align-items: center;
  gap: var(--e6);
}

/* Selector de idioma */
.idiomas {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
}

.idiomas a {
  padding: var(--e1) var(--e2);
  color: var(--texto-tenue);
  text-decoration: none;
  text-transform: uppercase;
  border-radius: var(--radio-sm);
  transition: color var(--t-rapida) var(--curva);
}

.idiomas a:hover { color: var(--texto); }
.idiomas a[aria-current="true"] { color: var(--acento); font-weight: 600; }
.idiomas span { color: var(--linea); }

/* Botón hamburguesa (sólo móvil) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;   /* objetivo táctil mínimo */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle-barras,
.nav-toggle-barras::before,
.nav-toggle-barras::after {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--texto);
  transition: transform var(--t-media) var(--curva),
              opacity var(--t-rapida) var(--curva);
}

.nav-toggle-barras::before,
.nav-toggle-barras::after {
  content: "";
  position: absolute;
}

.nav-toggle-barras::before { transform: translateY(-7px); }
.nav-toggle-barras::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle-barras { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-barras::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-barras::after  { transform: rotate(-45deg); }

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 46px;
  padding: var(--e3) var(--e8);
  border: 1px solid var(--naranja);
  border-radius: var(--radio);
  background: transparent;
  color: var(--acento);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--t-media) var(--curva);
}

/* Barrido de marca: un velo que entra por la izquierda. Sólo transform. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-media) var(--curva);
  z-index: -1;
}

.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { color: var(--sobre-naranja); }

.btn-solido {
  background: var(--naranja);
  color: var(--sobre-naranja);
}
.btn-solido::before { background: var(--naranja-claro); }
.btn-solido:hover { color: var(--sobre-naranja); }

.btn-flecha svg {
  width: 16px; height: 16px;
  transition: transform var(--t-media) var(--curva);
}
.btn-flecha:hover svg { transform: translateX(3px); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fondo);
}

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

.hero-fondo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--curva);
}

.hero-fondo img.activa {
  opacity: 1;
  animation: kenburns 16s ease-out forwards;
}

@keyframes kenburns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}

/* Doble velo: vertical para el texto, diagonal para dar cuerpo */
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--fondo) 0%, rgba(14,12,10,.75) 35%, rgba(14,12,10,.15) 70%, rgba(14,12,10,.4) 100%),
    linear-gradient(105deg, rgba(14,12,10,.7) 0%, transparent 55%);
}

.hero-inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  padding-block: var(--e24) var(--e16);
}

.hero-claim {
  max-width: 17ch;
  margin-bottom: var(--e6);
  text-wrap: balance;
}

.hero-sub {
  max-width: 46ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: var(--texto-sec);
  margin-bottom: var(--e8);
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e4); }

/* Pie del hero: qué proyecto se está viendo + control del slider */
.hero-pie {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e6);
  padding-block: var(--e6);
  margin-top: var(--e16);
  border-top: 1px solid rgba(244, 239, 230, .12);
}

.hero-credito {
  font-size: var(--fs-sm);
  color: var(--texto-tenue);
  min-height: 2.6em;   /* reserva sitio: el texto cambia y no debe saltar */
}

.hero-credito strong {
  display: block;
  color: var(--texto);
  font-weight: 500;
}

.hero-controles { display: flex; align-items: center; gap: var(--e2); flex: none; }

.hero-pausa {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;      /* objetivo táctil */
  margin-right: var(--e2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--texto-sec);
  cursor: pointer;
  transition: color var(--t-rapida) var(--curva);
}

.hero-pausa:hover { color: var(--acento); }
.hero-pausa svg { width: 20px; height: 20px; }

/* Reproduciendo: se ve el icono de pausa. Pausado: el de play. */
.hero-pausa .i-play  { display: none; }
.hero-pausa.esta-pausado .i-pausa { display: none; }
.hero-pausa.esta-pausado .i-play  { display: block; }

/* Sin auto-avance (el usuario pidió menos movimiento) no hay nada que pausar */
@media (prefers-reduced-motion: reduce) {
  .hero-pausa { display: none; }
}

.hero-puntos { display: flex; gap: var(--e2); flex: none; }

.hero-punto {
  width: 44px; height: 44px;      /* objetivo táctil */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.hero-punto::after {
  content: "";
  width: 28px; height: 2px;
  background: rgba(244, 239, 230, .25);
  transition: background var(--t-media) var(--curva);
}

.hero-punto:hover::after { background: var(--texto-sec); }
.hero-punto[aria-selected="true"]::after { background: var(--naranja); }

/* --- Cifras --------------------------------------------------------------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea-suave);
  border-block: 1px solid var(--linea-suave);
}

.cifra {
  background: var(--fondo);
  padding: var(--e12) var(--e6);
  text-align: center;
}

.cifra-dato {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1;
  color: var(--acento);
  margin-bottom: var(--e2);
}

.cifra-etiqueta {
  font-size: var(--fs-sm);
  color: var(--texto-tenue);
  line-height: 1.4;
}

/* --- Tarjeta de servicio -------------------------------------------------- */

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e6);
}

.servicio {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radio);
  text-decoration: none;
  background: var(--superficie-alt);
  cursor: pointer;
  isolation: isolate;
}

.servicio img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.55) brightness(.7);
  transition: transform var(--t-lenta) var(--curva-salida),
              filter var(--t-lenta) var(--curva);
}

.servicio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,.95) 5%, rgba(14,12,10,.35) 55%, rgba(14,12,10,.1) 100%);
  z-index: 1;
}

/* El zoom vive en la imagen, dentro de un contenedor con overflow oculto:
   la tarjeta no cambia de tamaño y no mueve la rejilla. */
.servicio:hover img,
.servicio:focus-visible img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(.85);
}

.servicio-texto {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--e6);
}

.servicio-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--texto);
  margin-bottom: var(--e2);
}

/* Sin span decorativo: el título va en una línea y se parte solo si hace falta */

.servicio-desc {
  font-size: var(--fs-sm);
  color: var(--texto-sec);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--t-lenta) var(--curva),
              opacity var(--t-media) var(--curva);
}

.servicio:hover .servicio-desc,
.servicio:focus-visible .servicio-desc {
  max-height: 6em;
  opacity: 1;
}

/* --- Rejilla de proyectos ------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e8);
}

.filtro {
  min-height: 44px;
  padding: var(--e2) var(--e6);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 100px;
  color: var(--texto-sec);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-rapida) var(--curva),
              border-color var(--t-rapida) var(--curva),
              background var(--t-rapida) var(--curva);
}

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

.filtro[aria-pressed="true"] {
  background: var(--naranja);
  border-color: var(--acento);
  color: var(--sobre-naranja);
  font-weight: 600;
}

.filtro-num {
  margin-left: var(--e2);
  font-size: var(--fs-micro);
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--e4);
}

.proyecto {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-radius: var(--radio);
  background: var(--superficie-alt);
  cursor: pointer;
  isolation: isolate;
}

.proyecto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lenta) var(--curva-salida);
}

.proyecto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,12,10,.9) 0%, rgba(14,12,10,.2) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--t-media) var(--curva);
  z-index: 1;
}

.proyecto:hover img,
.proyecto:focus-visible img { transform: scale(1.05); }

.proyecto:hover::after,
.proyecto:focus-visible::after { opacity: 1; }

.proyecto-pie {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--e4);
  text-align: left;
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--t-media) var(--curva),
              opacity var(--t-media) var(--curva);
}

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

.proyecto-nombre {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--texto);
  line-height: 1.3;
}

.proyecto-cat {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ancho);
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--e1);
}

.proyecto[hidden] { display: none; }

/* Aviso de rejilla vacía */
.rejilla-vacia {
  padding: var(--e16) 0;
  text-align: center;
  color: var(--texto-tenue);
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  /* El UA da al <dialog> `width/height: fit-content` y `margin: auto`, y eso
     gana a `inset: 0`: sin esto el velo sólo cubre la figura y la página se
     sigue viendo a los lados. Hay que forzar el tamaño y anular los máximos. */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  z-index: var(--z-lightbox);
  place-items: center;
  padding: var(--e6);
  background: rgba(8, 7, 6, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;

  /* Cerrado: fuera del render Y del árbol de accesibilidad. Con `display:grid`
     fijo y sólo `opacity:0`, los botones de cerrar/anterior/siguiente seguirían
     siendo tabulables y visibles para un lector de pantalla con el diálogo
     cerrado. `display:none` es lo único que los saca de verdad. */
  display: none;
}

.lightbox[open] { display: grid; opacity: 1; }
.lightbox::backdrop { background: transparent; }

/* El fundido de entrada, para quien lo soporte. Donde no, entra sin más:
   no vale la pena pagar la trampa de accesibilidad por una transición. */
@media (prefers-reduced-motion: no-preference) {
  .lightbox { transition: opacity var(--t-media) var(--curva), display var(--t-media) allow-discrete; }
  @starting-style { .lightbox[open] { opacity: 0; } }
}

.lightbox-figura {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 86svh;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.lightbox-figura img {
  max-height: 76svh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}

.lightbox-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e6);
  font-size: var(--fs-sm);
  color: var(--texto-sec);
}

.lightbox-cat {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ancho);
  text-transform: uppercase;
  color: var(--acento);
}

.lightbox-contador { font-variant-numeric: tabular-nums; color: var(--texto-tenue); }

.lightbox-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: rgba(34, 28, 20, .8);
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--texto);
  cursor: pointer;
  transition: background var(--t-rapida) var(--curva),
              border-color var(--t-rapida) var(--curva);
}

.lightbox-btn:hover { background: var(--naranja); border-color: var(--acento); color: var(--sobre-naranja); }
.lightbox-btn svg { width: 20px; height: 20px; }

.lightbox-cerrar { top: var(--e6); right: var(--e6); }
.lightbox-prev   { left: var(--e6);  top: 50%; transform: translateY(-50%); }
.lightbox-sig    { right: var(--e6); top: 50%; transform: translateY(-50%); }

/* --- Clientes ------------------------------------------------------------- */

.clientes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--linea-suave);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  overflow: hidden;
}

.cliente {
  display: grid;
  place-items: center;
  padding: var(--e8) var(--e4);
  background: var(--fondo);
  min-height: 108px;
}

/* Muro de clientes en monocromo. En la sección clara los logos van en negro
   atenuado (silueta gris); dentro de un contexto oscuro, en blanco. */
.cliente img {
  max-width: 100%;
  max-height: 46px;
  width: auto;
  object-fit: contain;
  filter: brightness(0);
  opacity: .5;
  transition: opacity var(--t-media) var(--curva);
}

.oscuro .cliente img { filter: brightness(0) invert(1); opacity: .45; }
.cliente:hover img { opacity: .9; }

/* --- Franja de cita ------------------------------------------------------- */

.cita {
  position: relative;
  padding-block: var(--e32);
  background: var(--superficie-alt);
  overflow: hidden;
}

.cita::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--naranja-velo) 0%, transparent 65%);
  pointer-events: none;
}

.cita-texto {
  position: relative;
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--texto);
}

.cita-texto em { font-style: italic; color: inherit; }   /* cursiva sí, color no */

/* --- Bloque de contacto (CTA final) --------------------------------------- */

.cta {
  position: relative;
  padding-block: var(--e24);
  text-align: center;
  overflow: hidden;
}

.cta-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta-fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.4) brightness(.32);
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--fondo), rgba(14,12,10,.55), var(--fondo));
}

/* --- Ficha de datos (contacto) -------------------------------------------- */

.datos { display: grid; gap: var(--e6); }

.dato {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding-block: var(--e4);
  border-bottom: 1px solid var(--linea-suave);
}

.dato-icono {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 3px;
  color: var(--acento);
}

.dato-etiqueta {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ancho);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e1);
}

.dato-valor { color: var(--texto); }
.dato-valor a { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--linea); }
.dato-valor a:hover { color: var(--acento); border-bottom-color: var(--acento); }

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

.form { display: grid; gap: var(--e6); }
.campo { display: grid; gap: var(--e2); }

.campo label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--texto-sec);
}

.campo label .req { color: var(--acento); }

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: 48px;
  padding: var(--e3) var(--e4);
  background: var(--superficie);   /* blanco: el borde-campo da 3,2:1 aquí; sobre
                                      el crema alterno se quedaba en 2,7 (1.4.11) */
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  color: var(--texto);
  font-size: var(--fs-base);   /* 16px: evita el zoom automático de iOS */
  transition: border-color var(--t-rapida) var(--curva),
              background var(--t-rapida) var(--curva);
}

.campo textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-tenue); opacity: .6; }

.campo input:hover,
.campo textarea:hover { border-color: var(--texto-tenue); }

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--superficie-2);
  box-shadow: 0 0 0 3px var(--naranja-velo);
}

/* Error: color + icono + texto. Nunca sólo color. */
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--error); }

.campo-error {
  display: none;
  align-items: center;
  gap: var(--e2);
  font-size: var(--fs-sm);
  color: var(--error-texto);
}

.campo-error svg { width: 14px; height: 14px; flex: none; }
.campo-error.visible { display: flex; }

/* Consentimiento */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--superficie-alt);
  border: 1px solid var(--linea-suave);
  border-radius: var(--radio);
  cursor: pointer;
}

.consent input[type="checkbox"] {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--acento);
  cursor: pointer;
}

.consent span { font-size: var(--fs-sm); color: var(--texto-sec); line-height: 1.5; }

/* --- Pie ------------------------------------------------------------------ */

.pie {
  padding-block: var(--e16) var(--e8);
  background: var(--superficie-alt);
  border-top: 1px solid var(--linea-suave);
}

.pie-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--e8);
  padding-bottom: var(--e12);
  border-bottom: 1px solid var(--linea-suave);
}

.pie-logo img { height: 40px; width: auto; margin-bottom: var(--e4); }

.pie-titulo {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ancho);
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--e4);
}

.pie-lista { display: grid; gap: var(--e3); }

.pie-lista a {
  color: var(--texto-sec);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--t-rapida) var(--curva);
}

.pie-lista a:hover { color: var(--acento); }

.pie-texto { font-size: var(--fs-sm); color: var(--texto-tenue); line-height: 1.7; }

.redes { display: flex; gap: var(--e2); margin-top: var(--e4); }

.red {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--texto-sec);
  transition: color var(--t-rapida) var(--curva),
              border-color var(--t-rapida) var(--curva),
              background var(--t-rapida) var(--curva);
}

.red:hover { color: var(--sobre-naranja); background: var(--naranja); border-color: var(--acento); }
.red svg { width: 17px; height: 17px; }

.pie-abajo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-top: var(--e8);
  font-size: var(--fs-sm);
  color: var(--texto-tenue);
}

.pie-legal { display: flex; flex-wrap: wrap; gap: var(--e6); }
.pie-legal a { color: var(--texto-tenue); text-decoration: none; }
.pie-legal a:hover { color: var(--acento); }

/* Sellos: certificados y Kit Digital */
.sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e6);
  padding-top: var(--e8);
  margin-top: var(--e8);
  border-top: 1px solid var(--linea-suave);
}

.sellos img {
  height: 34px;
  width: auto;
  opacity: .55;
  transition: opacity var(--t-media) var(--curva);
}

.sellos img:hover { opacity: 1; }

.sellos-titulo {
  width: 100%;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ancho);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* --- Cabecera de página interior ------------------------------------------ */

.cabecera {
  position: relative;
  padding-block: calc(76px + var(--e24)) var(--e16);
  overflow: hidden;
  border-bottom: 1px solid var(--linea-suave);
}

.cabecera-fondo { position: absolute; inset: 0; z-index: -2; }

.cabecera-fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.5) brightness(.38);
}

.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--fondo) 0%, rgba(14,12,10,.65) 60%, rgba(14,12,10,.85) 100%);
}

.miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e4);
  font-size: var(--fs-sm);
  color: var(--texto-tenue);
}

.miga a { color: var(--texto-tenue); text-decoration: none; }
.miga a:hover { color: var(--acento); }
.miga li { display: flex; align-items: center; gap: var(--e2); }
.miga li:not(:last-child)::after { content: "/"; color: var(--linea); }
.miga [aria-current="page"] { color: var(--texto-sec); }

/* --- Bloque de dos columnas (texto + media) ------------------------------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e16);
  align-items: center;
}

.duo-media { position: relative; }

.duo-media img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* Marco desplazado: da profundidad sin cargar peso */
.duo-media::after {
  content: "";
  position: absolute;
  inset: var(--e6) calc(var(--e6) * -1) calc(var(--e6) * -1) var(--e6);
  border: 1px solid var(--naranja);
  border-radius: var(--radio);
  opacity: .3;
  z-index: -1;
  pointer-events: none;
}

/* --- Vídeo ---------------------------------------------------------------- */

.video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--superficie-alt);
  cursor: pointer;
  isolation: isolate;
}

.video img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.6);
  transition: transform var(--t-lenta) var(--curva-salida),
              filter var(--t-media) var(--curva);
}

.video:hover img { transform: scale(1.04); filter: brightness(.75); }

.video-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}

.video-play span {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  background: var(--naranja-solido);
  border-radius: 50%;
  color: var(--sobre-naranja);
  box-shadow: var(--resplandor);
  transition: transform var(--t-media) var(--curva);
}

.video:hover .video-play span { transform: scale(1.08); }
.video-play svg { width: 24px; height: 24px; margin-left: 3px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .clientes { grid-template-columns: repeat(4, 1fr); }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .duo { gap: var(--e12); }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    /* El desplegable tiene su propio contexto CLARO, no herede lo que herede
       la nav (que sobre el hero es oscura): así el texto siempre contrasta. */
    --texto: #1A1510;
    --acento: #A84A06;
    --linea-suave: #E0D8CA;
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e4) var(--wrap-lateral) var(--e8);
    background: rgba(247, 243, 236, .98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linea-suave);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t-media) var(--curva),
                opacity var(--t-media) var(--curva),
                visibility var(--t-media);
  }

  .nav-menu.abierto { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav-enlace {
    padding-block: var(--e4);
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--linea-suave);
  }

  .nav-enlace::after { display: none; }
  .nav-lado .btn { display: none; }

  .duo { grid-template-columns: 1fr; }
  .duo-media::after { display: none; }

  /* En vertical el texto ocupa casi todo el alto y cae sobre las zonas
     iluminadas de la foto. El velo diagonal ya no ayuda ahí, así que se
     sustituye por uno vertical más denso: la legibilidad manda sobre la foto. */
  .hero-velo {
    background: linear-gradient(to top,
      var(--fondo) 0%, rgba(14,12,10,.86) 45%, rgba(14,12,10,.62) 78%, rgba(14,12,10,.3) 100%);
  }

  .hero-pie { flex-direction: column; align-items: flex-start; gap: var(--e4); }
  .lightbox-prev { left: var(--e2); }
  .lightbox-sig { right: var(--e2); }
  .lightbox-cerrar { top: var(--e2); right: var(--e2); }
}

@media (max-width: 640px) {
  .seccion { padding-block: var(--e16); }
  .cita { padding-block: var(--e24); }
  .clientes { grid-template-columns: repeat(3, 1fr); }
  .pie-grid { grid-template-columns: 1fr; gap: var(--e8); }
  .rejilla { grid-template-columns: 1fr; }
  .hero-acciones { flex-direction: column; align-items: stretch; }
  .hero-acciones .btn { width: 100%; }

  /* En móvil el texto de la tarjeta se ve siempre: no hay hover que lo revele */
  .servicio-desc { max-height: 6em; opacity: 1; }
}