/* Apheloria — estilos comunes a todas las páginas */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* Colores base */
  --ink: #1a1612;         --ink-rgb: 26, 22, 18;
  --bg: #FFFFFF;          --bg-rgb: 255, 255, 255;
  --bg-dark: #111;        /* secciones fotográficas a pantalla completa (hero, conector, nosotros) */
  --beige: #F2EDE4;       --beige-rgb: 242, 237, 228; /* antiguo --bg: ahora reservado para botones (p.ej. doc catálogo) */
  --accent: #b0a898;      --accent-rgb: 176, 168, 152;
  --accent-soft: #c8bfb0; /* bordes y scrollbars sutiles */
  --accent-text: #6f6556; /* texto informativo: 5,1:1 sobre blanco, cumple AA */
  --heading: #6d5f52;     /* títulos y nav sobre fondo claro */
  --placeholder-bg: #e8e0d0; /* fondo mientras carga una foto */
  --white-rgb: 255, 255, 255;
  --nav-h: 70px;
  --footer-h: 34px;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: arranque rápido, llegada suave */
  --dur-slide: 1.25s;
  --dur-card: 0.55s;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif;
  /* el nav y el pie son barras fijas: se les reserva sitio */
  padding-top: var(--nav-h); padding-bottom: var(--footer-h);
}

/* ── Barras de desplazamiento ──
   Windows las dibuja con el aspecto del sistema y además ocupan sitio real
   (en macOS e iOS se superponen y se esconden solas, por eso allí no se notan).
   Se les da un aspecto fino y con los colores de la web, sin impedir el arrastre.
   Nada tiene scroll propio salvo el menú móvil: el resto usa el de la página,
   así que no hay barra inferior que ocultar. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-soft) transparent;
}
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: var(--accent-soft); border-radius: 999px;
  border: 3px solid var(--bg);          /* deja aire alrededor del pulgar */
}
html::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.nav-links {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-soft) transparent;
}
.nav-links::-webkit-scrollbar { width: 6px; height: 6px; }
.nav-links::-webkit-scrollbar-track { background: transparent; }
.nav-links::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 999px; }

/* Contenedor de página: ocupa como mínimo lo que queda entre nav y pie */
.pagina {
  min-height: calc(100dvh - var(--nav-h) - var(--footer-h));
  display: flex; flex-direction: column;
  padding: 4rem 3rem;
}


/* ═══ NAV ═══ */

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 2.2rem; height: var(--nav-h);
  background: var(--bg);            /* blanco sólido: no deja ver lo que pasa por debajo */
  border-bottom: 1px solid rgba(var(--ink-rgb),0.06);
}
.nav-brand {
  justify-self: start;
  transform: translateX(-57px); /* 1,5cm a la izquierda */
  display: flex; align-items: center; gap: calc(2.5rem + 0.2cm); /* +0,2cm de separación entre logo y texto */
  cursor: pointer; flex-shrink: 0;
  text-decoration: none;          /* ahora es un enlace a la portada */
}
.nav-brand-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 300; letter-spacing: 0.18em;
  color: var(--accent-text); text-transform: uppercase;
  transform: translateX(19px); /* 0,5cm a la derecha */
}
/* LOGO NAV */
.nav-logo-icon {
  display: block; flex-shrink: 0;
  width: 36.6px; height: 36.6px; /* 48px - 18% - 7% */
  background: url('../logo-icon.png') no-repeat center center;
  background-size: contain;
  transform: translate(57px, calc(4px - 0.1cm)); /* 1,5cm a la derecha, 0,1cm arriba respecto a la posición anterior */
}
/* Menú en píldora, centrado sobre la barra */
.nav-links {
  justify-self: center;
  display: flex; align-items: center; gap: 0.1rem; list-style: none;
  background: rgba(var(--ink-rgb),0.035);
  border: 1px solid rgba(var(--ink-rgb),0.08);
  border-radius: 999px;
  padding: 0.3rem;
}
.nav-links a {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--heading);
  text-decoration: none; cursor: pointer;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  transition: background 0.3s var(--ease-premium), color 0.3s;
}
.nav-links a:hover { background: rgba(var(--ink-rgb),0.06); color: var(--ink); }
.nav-links a.active { background: var(--beige); color: var(--ink); }
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%; transform: translateX(-50%);
  min-width: 220px;
  background: rgba(var(--white-rgb),0.98);
  box-shadow: 0 18px 45px rgba(var(--ink-rgb),0.12);
  border-radius: 0.7rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 300;
}
/* Botón Contacto: CTA destacado fuera de la píldora */
.nav-right { justify-self: end; display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.nav-contact-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink); text-decoration: none;
  background: var(--beige);
  padding: 0.65rem 1.5rem;
  border-radius: 999px; white-space: nowrap;
  transition: background 0.3s var(--ease-premium), transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}
.nav-contact-btn:hover { background: rgba(var(--beige-rgb),0.7); box-shadow: 0 10px 24px rgba(var(--ink-rgb),0.2); transform: translateY(-1px); }
.nav-contact-btn:active { transform: translateY(0) scale(0.97); }
.nav-item.dropdown-open .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 0.85rem 1.2rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}
.nav-dropdown a:hover { background: rgba(var(--ink-rgb),0.08); }


/* ═══ PIE ═══ */

/* ── FOOTER (barra fina fija, ya que el layout no tiene scroll de documento) ── */
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0 1.5rem;
  background: rgba(var(--white-rgb),0.7);
  backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid rgba(var(--ink-rgb),0.06);
  font-family: 'Raleway', sans-serif;
  font-size: 0.6875rem; letter-spacing: 0.024em;
  color: var(--accent-text);
  text-align: center;
  flex-wrap: wrap; row-gap: 0.1rem;
}
.site-footer a { color: var(--accent-text); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.site-footer .footer-sep { color: var(--accent-soft); }
@media (max-width: 640px) {
  /* En móvil el pie se parte en dos líneas, pero su alto estaba clavado a 34 px y
     el body reserva justo ese hueco: la segunda línea quedaba encima del contenido.
     Se le deja crecer y se agranda el hueco reservado en la misma medida. */
  :root { --footer-h: 56px; }
  .site-footer {
    font-size: 0.6875rem; padding: 0.4rem 0.8rem; gap: 0.4rem;
    height: auto; min-height: var(--footer-h);
  }
}

/* ═══ BOTONES ═══ */

/* ── Sistema de botones ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.206em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
              border-color 0.3s var(--ease-premium), transform 0.3s var(--ease-premium),
              box-shadow 0.3s var(--ease-premium);
}
.btn { text-decoration: none; }    /* el de Catálogo es un enlace, no un <button> */
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
/* Relleno oscuro, para botones sobre fondo claro (formularios, tarjetas claras) */
.btn-primary { background: var(--ink); color: #fff; border: none; }
.btn-primary:hover:not(:disabled) {
  background: var(--accent-text); box-shadow: 0 10px 24px rgba(var(--ink-rgb),0.2); transform: translateY(-1px);
}
/* Relleno claro, para botones sobre fondo oscuro (paneles, catálogo) */
.btn-light { background: var(--beige); color: var(--ink); border: none; }
.btn-light:hover:not(:disabled) {
  background: rgba(var(--beige-rgb),0.85); box-shadow: 0 10px 24px rgba(0,0,0,0.25); transform: translateY(-1px);
}
/* Contorno, para botones sobre una fotografía */
.btn-outline { background: none; color: #fff; border: 1px solid rgba(var(--white-rgb),0.3); }
.btn-outline:hover:not(:disabled) { border-color: var(--accent); background: rgba(var(--accent-rgb),0.12); }


/* ═══ UTILIDADES ═══ */

/* ── FILTRADO: cards ocultas por categoría ── */
.project-card[hidden], .product-card[hidden] { display: none !important; }

/* ── CARDS "PRÓXIMAMENTE" ── */
.is-soon .project-card-img, .is-soon .product-card-img { filter: grayscale(0.65) opacity(0.8); }
/* Tarjeta anunciada sin fotografía todavía: fondo de marca en vez de una imagen
   de relleno de un servicio externo. */
.project-card-img.sin-foto, .product-card-img.sin-foto {
  background: linear-gradient(145deg, var(--beige) 0%, var(--accent-soft) 100%);
  filter: none;
}
.is-soon .product-card-img-wrap::before, .is-soon .project-card-img-wrap::before {
  content: 'Próximamente'; position: absolute; top: 0.8rem; left: 0.8rem; z-index: 3;
  font-family: 'Raleway', sans-serif; font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); background: rgba(var(--bg-rgb),0.92); padding: 0.35rem 0.7rem;
}

/* ── ACCESIBILIDAD: foco visible por teclado ── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--heading); outline-offset: 3px;
}
.nav-item:focus-within .nav-dropdown { display: block; }

/* ── MENÚ MÓVIL (hamburguesa) ── */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 100%; height: 1.5px; background: var(--ink);
  margin: 5px 0; transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ═══ RESPONSIVE (común) ═══ */

@media (max-width: 900px) {
  nav { padding: 0 1.5rem; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0; width: min(320px, 85vw);
    background: rgba(var(--white-rgb),0.98); backdrop-filter: blur(12px);
    border: none; border-radius: 0;
    padding: 1.5rem 0; box-shadow: -18px 0 45px rgba(var(--ink-rgb),0.12);
    transform: translateX(100%); transition: transform 0.35s var(--ease-premium);
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { display: block; padding: 1rem 2rem; font-size: 0.8rem; border-radius: 0; }
  .nav-links a.active { background: none; color: var(--ink); }
  .nav-dropdown {
    position: static; display: block; min-width: 0; transform: none;
    box-shadow: none; border-radius: 0; padding: 0 0 0.5rem;
    background: transparent;
  }
  .nav-dropdown a { padding: 0.6rem 3rem; color: var(--heading); }
  .nav-right { gap: 0.6rem; }
  .nav-contact-btn { padding: 0.55rem 1.15rem; font-size: 0.6875rem; }
  .pagina { padding: 1.5rem; }
}
@media (max-width: 640px) {
  .nav-brand-text { font-size: 1.05rem; }
}