/* =========================================================================
   Monica Gorrini — Design system portado desde el sitio Astro (styles.css)
   Tokens + tipografía base + componentes. Las utilidades tipo Tailwind
   (flex, grid, text-white, etc.) las provee Tailwind (ver enqueue.php).
   ========================================================================= */

:root {
  /* Brand */
  --color-primary: #ad9e97;
  --color-primary-light: #c4b5ae;
  --color-primary-dark: #8f7f78;

  --color-secondary: #282623;
  --color-secondary-light: #3a3734;
  --color-secondary-dark: #1a1815;

  --color-accent: #644434;
  --color-accent-light: #7d5a47;
  --color-accent-dark: #4b3227;

  /* Neutrals */
  --color-cream: #faf8f5;
  --color-sand: #f5f0ea;
  --color-stone: #e8e2db;

  /* Gold */
  --color-gold: #d4af37;
  --color-gold-light: #e6c757;
  --color-gold-dark: #b8941f;

  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;

  --container-max-width: 1280px;
  --container-padding: 1rem;
  --container-padding-lg: 2rem;

  --spacing-section: 8rem;

  --header-height: 5rem;
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* Evita el scroll/gap horizontal que provocan elementos a 100vw (menú móvil). */
html, body { overflow-x: hidden; max-width: 100%; }

html { scroll-behavior: smooth; }

/* Estilos base en @layer base para que las utilidades de Tailwind
   (text-xl, text-white, font-normal…) puedan sobreescribirlos. */
@layer base {
  body {
    margin: 0;
    padding: 0;
    color: var(--color-secondary);
    background-color: var(--color-cream);
    font-weight: 200;
    letter-spacing: 0.01em;
    line-height: 1.6;
    font-size: 0.875rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
    letter-spacing: -0.02em;
    color: var(--color-secondary);
    margin: 0;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
  }

  h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; }
  h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
  h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.3; }
  h4 { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.4; }
  h5 { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.5; }
  h6 { font-size: clamp(0.875rem, 1.25vw, 1rem); line-height: 1.5; }

  a { transition: all 0.3s var(--transition-smooth); text-decoration: none; color: inherit; }

  ::selection { background-color: var(--color-primary); color: #fff; }

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

/* Forzar Poppins en todo (fuera de capa, con !important, para que nunca falle). */
* { font-family: var(--font-sans) !important; }

/* --------------------------------------------------------------------- */
/* Layout                                                                 */
/* --------------------------------------------------------------------- */
/* En @layer components, como en el sitio Astro: así la utilidad .container de
   Tailwind (max-width 96rem a partir de 1536px) gana a este valor base de 1280px. */
@layer components {
  .container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  @media (min-width: 640px) {
    .container {
      padding-left: var(--container-padding-lg);
      padding-right: var(--container-padding-lg);
    }
  }
}

.section-padding { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); }
@media (max-width: 768px) {
  .section-padding { padding-top: 4rem; padding-bottom: 4rem; }
}

.main-content { min-height: 50vh; }

/* --------------------------------------------------------------------- */
/* Botones                                                                */
/* --------------------------------------------------------------------- */
/* Botones — portados 1:1 desde el styles.css del Astro. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-secondary);
  color: #fff;
  font-weight: 200;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--transition-smooth);
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background-color: var(--color-primary);
  transition: left 0.3s var(--transition-smooth);
}
.btn-primary:hover::before { left: 0; }
.btn-primary span,
.btn-primary svg { position: relative; z-index: 1; }
.btn-primary svg { width: 1.25rem; height: 1.25rem; transition: transform 0.3s ease; }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  color: var(--color-secondary);
  font-weight: 200;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-secondary);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s var(--transition-smooth);
}
.btn-outline:hover { background-color: var(--color-secondary); color: #fff; }
.btn-outline svg { width: 1.25rem; height: 1.25rem; }

.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Botón dorado (páginas de servicios / Nuevo Lujo). Sin el relleno beige del
   btn-primary; se oscurece a dorado en hover como en el Astro. */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background-color: #9e7800;
  color: #fff;
  font-weight: 200;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s var(--transition-smooth);
}
.btn-gold:hover { background-color: #8b6a00; color: #fff; }
.btn-gold svg { width: 1.25rem; height: 1.25rem; }
.btn-gold:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* Subrayado dorado bajo títulos de sección. Margen inferior propio para que la
   línea no se solape con el subtítulo aunque la utilidad mb-* de Tailwind falle. */
.line-decoration { position: relative; display: inline-block; margin-bottom: 2rem; }
.line-decoration::after {
  content: "";
  position: absolute; bottom: -10px; left: 0;
  width: 60px; height: 2px;
  background-color: var(--color-gold);
  transform-origin: left;
  animation: mg-reveal-line 0.8s ease-out 0.3s forwards;
  transform: scaleX(0);
}
@keyframes mg-reveal-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Animaciones de entrada. */
.fade-in { animation: mg-fade-in 0.8s ease-out forwards; }
.slide-up { animation: mg-slide-up 0.6s ease-out forwards; }
@keyframes mg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Scrollbar (como el Astro). */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-cream); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

/* --------------------------------------------------------------------- */
/* Reveal on scroll                                                       */
/* --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s var(--transition-smooth);
  will-change: transform, opacity;
}
.reveal.active { opacity: 1; transform: translateY(0); will-change: auto; }

/* --------------------------------------------------------------------- */
/* WYSIWYG / contenido editorial (blog + proyecto)                        */
/* --------------------------------------------------------------------- */
.entry-content { line-height: 1.8; color: var(--color-secondary); }
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content p { font-weight: 300; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 2.5rem; margin-bottom: 1rem; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; }
.entry-content li { margin-top: 0.5rem; }
.entry-content img { border-radius: 4px; margin: 2rem 0; }
.entry-content blockquote {
  border-left: 2px solid var(--color-gold);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--color-secondary-light);
}
.entry-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------- */
/* Accesibilidad                                                          */
/* --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-secondary);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}

@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;
  }
  .reveal { opacity: 1; transform: none; }
}