/* =====================================================
   CLARIDAD ORGÁNICA — Base de estilos
   Pureza, frescura y libertad para negocios locales de Vigo
   ===================================================== */

:root {
  --color-bg: #f7f5ee;
  --color-ink: #1b2b22;
  --color-sage: #6e8b74;
  --color-cream: #efeadc;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--color-bg);
  color: var(--color-ink);
}

body {
  font-family: "Manrope", sans-serif;
  font-weight: 300;
}

h1,
h2,
h3,
h4 {
  font-family: "Cormorant Garamond", serif;
  margin: 0;
}

p {
  margin: 0;
}

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

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

/* -----------------------------------------------------
   Scrollbar oculta en toda la web (mantiene el scroll, oculta la barra)
   ----------------------------------------------------- */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / Edge legacy */
}

* {
  scrollbar-width: none; /* Firefox, por si algún contenedor interno scrollea */
}

::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge (Chromium) */
}

/* -----------------------------------------------------
   Cursor personalizado: ocultamos el cursor nativo en TODA la
   web (el propio #custom-cursor de index.html lo sustituye).
   ----------------------------------------------------- */
* {
  cursor: none !important;
}

/* Las páginas legales no montan el cursor personalizado. */
.legal-page,
.legal-page * {
  cursor: auto !important;
}

/* -----------------------------------------------------
   Dispositivos táctiles (pointer: coarse): no hay ratón real, así
   que el cursor personalizado (punto + anillo) no tiene sentido —
   se queda "flotando" en la última posición de touch sin seguir
   nada. Lo desactivamos por CSS (más robusto que solo por JS: no
   depende de que el script cargue a tiempo) y devolvemos el cursor
   nativo del sistema, aunque en touch normalmente ni se vea.
   script.js ya hace la misma comprobación vía
   matchMedia("(pointer: fine)") antes de animar nada, así que esto
   es una capa de seguridad adicional, no la única.
   ----------------------------------------------------- */
@media (pointer: coarse) {
  #custom-cursor,
  #cursor-follower {
    display: none !important;
  }

  * {
    cursor: auto !important;
  }
}

/* -----------------------------------------------------
   Hero
   ----------------------------------------------------- */
#hero {
  top: 0;
}

/* -----------------------------------------------------
   Footer Reveal: el <footer> vive en flujo normal (no `fixed`),
   justo después de #main-content. El Hero es `fixed inset-0 z-0`
   y por tanto se renderiza a pantalla completa SIEMPRE, detrás de
   todo; el footer aparece de forma natural en cuanto el scroll
   alcanza el final real del documento, sin necesidad de ningún
   hueco/margen artificial ni de competir en z-index con el hueco
   transparente que usa el propio Hero al principio de la página.
   ----------------------------------------------------- */

.scroll-line {
  overflow: hidden;
}

/* -----------------------------------------------------
   Preloader — efecto "Spotlight": el texto se recorta con un
   degradado radial (background-clip: text) cuyo centro sigue al
   ratón a través de las variables --x/--y, que script.js actualiza
   en cada mousemove sobre el propio texto.
   ----------------------------------------------------- */
#preloader-enter {
  --x: 50%;
  --y: 45%;
  background: radial-gradient(
    circle 80px at var(--x) var(--y),
    #d4af37 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------
   Erradicación estricta del cursor personalizado en táctil: capa de
   seguridad EXTRA sobre el @media (pointer: coarse) de más arriba.
   Esta usa (hover: none) AND (pointer: coarse) a la vez (la combinación
   más fiable para detectar "es un dispositivo táctil real", evitando
   falsos positivos en portátiles con pantalla táctil que también tienen
   trackpad/ratón) y apunta a la clase compartida .custom-cursor que
   llevan tanto #custom-cursor como #cursor-follower en index.html.
   Tres propiedades a la vez (display/opacity/visibility), todas
   !important, para que no quede ninguna vía por la que un estilo
   inline de GSAP (que solo toca `transform`) pueda dejarlo visible.
   ----------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .custom-cursor {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* -----------------------------------------------------
   Banner de cookies: al aceptar, se desliza hacia abajo y se desvanece.
   ----------------------------------------------------- */
#cookie-banner {
  transition: transform 0.6s ease, opacity 0.6s ease;
}

#cookie-banner.cookie-banner-leave {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

/* Carrusel de métricas en móvil: el scroll horizontal no muestra barra. */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Tailwind 3 no genera `flex-shrink-1` (solo `shrink`). En escritorio
   el ítem vuelve a poder encogerse; la cuadrícula fija el ancho. */
@media (min-width: 768px) {
  .md\:flex-shrink-1 {
    flex-shrink: 1;
  }
}

/* -----------------------------------------------------
   Acordeón orgánico (Estándar GiVa Digital).
   La descripción vive en un grid 0fr → 1fr: colapsada no ocupa alto
   y al hover (PC) o al foco (tap en móvil) se abre con transición.
   Con el puntero dentro de la lista, los bloques no activos bajan
   al 35 %; el que se está leyendo se queda al 100 %.
   ----------------------------------------------------- */
.acordeon-trigger {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  gap: 1.25rem;
  width: 100%;
  padding: 1.65rem 0;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
}

.acordeon-num {
  font-family: "Manrope", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: #6e8b74;
}

.acordeon-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.1;
  color: #1b2b22;
}

.acordeon-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s ease;
}

.acordeon-body > div {
  overflow: hidden;
}

.acordeon-copy {
  max-width: 40rem;
  margin: 0 0 1.6rem 3.75rem;
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #6b7280;
}

.acordeon-item:hover .acordeon-body,
.acordeon-item:focus-within .acordeon-body {
  grid-template-rows: 1fr;
}

.acordeon:hover .acordeon-item,
.acordeon:focus-within .acordeon-item {
  opacity: 0.35;
  transition: opacity 0.45s ease;
}

.acordeon:hover .acordeon-item:hover,
.acordeon:focus-within .acordeon-item:focus-within {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .acordeon-body,
  .acordeon-item {
    transition: none;
  }
}

/* Orbe de luz: flota despacio detrás del acordeón y se apaga
   cuando entra una foto. */
@keyframes nexa-orb-float {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(22%, 14%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

#nexa-orb {
  opacity: 0.55;
  filter: blur(120px);
  animation: nexa-orb-float 18s ease-in-out infinite;
  transition: opacity 0.7s ease;
}

#nexa-orb.is-hidden {
  opacity: 0;
}

/* Arco del velocímetro móvil. GSAP anima stroke-dashoffset. */
.velocimetro-progreso {
  stroke-dasharray: 125.6;
  stroke-dashoffset: 125.6;
}

/* Con la foto activa el crema desaparece: el texto pasa a claro
   para seguir leyéndose sobre el velo negro. */
#servicios.is-bg-active .nexa-intro,
#servicios.is-bg-active .nexa-intro h2,
#servicios.is-bg-active .acordeon-title,
#servicios.is-bg-active .lighthouse-value {
  color: #f4f1ea;
}

#servicios.is-bg-active .acordeon,
#servicios.is-bg-active .acordeon-item {
  border-color: rgba(255, 255, 255, 0.18);
}

#servicios.is-bg-active .acordeon-num {
  color: rgba(244, 241, 234, 0.72);
}

#servicios.is-bg-active .acordeon-copy,
#servicios.is-bg-active .lighthouse-metric > span,
#servicios.is-bg-active .nexa-metrics-note,
#servicios.is-bg-active .velocimetro-nombre {
  color: rgba(244, 241, 234, 0.82);
}

#servicios.is-bg-active .velocimetro-valor {
  color: #f4f1ea;
}

#servicios.is-bg-active .velocimetro-carril {
  stroke: rgba(255, 255, 255, 0.2);
}

#servicios.is-bg-active .velocimetro-progreso {
  stroke: #f4f1ea;
}

@media (prefers-reduced-motion: reduce) {
  .nexa-orb,
  .arch-light {
    animation: none;
  }
}

/* Arquitectura: grano muy bajo y linterna.
   En táctil la luz flota en el centro. Con ratón, script.js
   escribe --x y --y y esta regla la sigue. */
.arch-noise {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIvPjwvc3ZnPg==");
  background-size: 180px 180px;
  opacity: 0.03;
}

.arch-light {
  --x: 50%;
  --y: 42%;
  left: 0;
  top: 0;
  transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%);
  background: radial-gradient(circle, rgba(30, 58, 138, 0.15) 0%, transparent 68%);
  z-index: 1;
}

@keyframes arch-light-float {
  0% { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
  50% { transform: translate(-50%, -50%) translate3d(0, 36px, 0); }
  100% { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
}

@media (hover: none), (pointer: coarse) {
  .arch-light {
    left: 50%;
    top: 42%;
    animation: arch-light-float 18s ease-in-out infinite;
  }
}

/* Por debajo de lg el pin no existe: las tarjetas se recorren
   con el dedo, dentro de su propia pista. */
@media (max-width: 1023px) {
  #arch-pin {
    height: auto;
    padding: 5rem 0;
  }

  #arch-scroller {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #arch-scroller::-webkit-scrollbar {
    display: none;
  }
}