/* ===============================
   RESET PROFESIONAL
   =============================== */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
   }
   
   body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   
   /* ===============================
      TIPOGRAFÍA DE ESTUDIO
      =============================== */
   
   /* Import elegante tipo arquitectura */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@500;600&display=swap');
   
   body {
     font-family: "Inter", system-ui, sans-serif;
     letter-spacing: 0.01em;
   }
   
   /* Títulos principales */
   h1, h2, h3, h4 {
     font-family: "Playfair Display", serif;
     letter-spacing: -0.01em;
   }
   
   
   /* ===============================
      SELECCIÓN DE TEXTO
      =============================== */
   
   ::selection {
     background: #C2A36B;
     color: white;
   }
   
   
   /* ===============================
      SCROLLBAR (detalle premium)
      =============================== */
   
   ::-webkit-scrollbar {
     width: 10px;
   }
   
   ::-webkit-scrollbar-track {
     background: #f2f2f2;
   }
   
   ::-webkit-scrollbar-thumb {
     background: #cfc7bb;
     border-radius: 20px;
   }
   
   ::-webkit-scrollbar-thumb:hover {
     background: #b6ad9f;
   }
   
   
   /* ===============================
      ANIMACIONES BASE
      =============================== */
   
   .fade-up {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.7s cubic-bezier(.19,1,.22,1);
   }
   
   .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   .fade {
     opacity: 0;
     transition: opacity .6s ease;
   }
   
   .fade.visible {
     opacity: 1;
   }
   
   
   /* ===============================
      BOTONES PROFESIONALES
      =============================== */
   
   button,
   a {
     transition:
       transform .25s cubic-bezier(.19,1,.22,1),
       box-shadow .25s cubic-bezier(.19,1,.22,1),
       background .25s,
       color .25s;
   }
   
   button:hover,
   a:hover {
     transform: translateY(-2px);
   }
   
   button:active,
   a:active {
     transform: translateY(0);
   }
   
   
   /* ===============================
      SOMBRAS ARQUITECTÓNICAS
      =============================== */
   
   .shadow-soft {
     box-shadow:
       0 1px 1px rgba(0,0,0,0.02),
       0 4px 10px rgba(0,0,0,0.04),
       0 12px 30px rgba(0,0,0,0.06);
   }
   
   .shadow-hover:hover {
     box-shadow:
       0 2px 2px rgba(0,0,0,0.03),
       0 10px 20px rgba(0,0,0,0.08),
       0 25px 60px rgba(0,0,0,0.12);
   }
   /* ===============================
   NAVBAR (sticky + blur premium)
   =============================== */

header {
  transition: background .35s ease, border-color .35s ease;
}

/* Cuando hagamos JS después, podemos agregar una clase .scrolled */
header.scrolled {
  background: rgba(247, 245, 241, 0.92) !important;
  border-color: rgba(0,0,0,0.14) !important;
}

/* Links del navbar */
header nav a {
  position: relative;
}

/* Subrayado elegante al hover */
header nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0%;
  height: 2px;
  background: rgba(194, 163, 107, 0.9);
  transition: width .35s cubic-bezier(.19,1,.22,1);
}

header nav ul a:hover::after {
  width: 100%;
}

/* Botón menú mobile */
#btnMenu {
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

#btnMenu:hover {
  box-shadow: 0 14px 35px rgba(0,0,0,0.10);
}


/* ===============================
   HERO (sensación editorial)
   =============================== */

/* Le damos “grano” sutil al hero, se ve más premium */
#inicio section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.22;
}

/* Ajuste de texto para que no “brille” raro sobre imagen */
#inicio h1,
#inicio p {
  text-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

/* Pills del hero */
#inicio .rounded-full {
  backdrop-filter: blur(8px);
}


/* ===============================
   CARDS (servicios/proyectos/artículos)
   =============================== */

/* Border suave + animación al hover (más “arquitectura”) */
article {
  transition:
    transform .35s cubic-bezier(.19,1,.22,1),
    box-shadow .35s cubic-bezier(.19,1,.22,1),
    border-color .35s ease;
}

article:hover {
  transform: translateY(-4px);
  border-color: rgba(0,0,0,0.16);
  box-shadow:
    0 2px 2px rgba(0,0,0,0.03),
    0 16px 30px rgba(0,0,0,0.08),
    0 40px 80px rgba(0,0,0,0.12);
}

/* Títulos de cards un toque más finos */
article h3 {
  letter-spacing: -0.01em;
}

/* Texto más legible en cards */
article p {
  line-height: 1.65;
}


/* ===============================
   IMÁGENES (sin recorte feo + consistencia)
   =============================== */

/* Evita que en algunos navegadores se deformen */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* En cards: suaviza el borde de la imagen */
article img {
  filter: contrast(1.02) saturate(1.02);
}

/* Un mini brillo al hover (sutil) */
article:hover img {
  filter: contrast(1.05) saturate(1.06);
}


/* ===============================
   LINKS FINOS (estilo editorial)
   =============================== */

a.underline {
  text-decoration-thickness: 2px;
}

a.underline:hover {
  text-decoration-color: rgba(0,0,0,0.55);
}/* ===============================
   NAVBAR (sticky + blur premium)
   =============================== */

header {
  transition: background .35s ease, border-color .35s ease;
}

/* Cuando hagamos JS después, podemos agregar una clase .scrolled */
header.scrolled {
  background: rgba(247, 245, 241, 0.92) !important;
  border-color: rgba(0,0,0,0.14) !important;
}

/* Links del navbar */
header nav a {
  position: relative;
}

/* Subrayado elegante al hover */
header nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0%;
  height: 2px;
  background: rgba(194, 163, 107, 0.9);
  transition: width .35s cubic-bezier(.19,1,.22,1);
}

header nav ul a:hover::after {
  width: 100%;
}

/* Botón menú mobile */
#btnMenu {
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

#btnMenu:hover {
  box-shadow: 0 14px 35px rgba(0,0,0,0.10);
}


/* ===============================
   HERO (sensación editorial)
   =============================== */

/* Le damos “grano” sutil al hero, se ve más premium */
#inicio section:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.22;
}

/* Ajuste de texto para que no “brille” raro sobre imagen */
#inicio h1,
#inicio p {
  text-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

/* Pills del hero */
#inicio .rounded-full {
  backdrop-filter: blur(8px);
}


/* ===============================
   CARDS (servicios/proyectos/artículos)
   =============================== */

/* Border suave + animación al hover (más “arquitectura”) */
article {
  transition:
    transform .35s cubic-bezier(.19,1,.22,1),
    box-shadow .35s cubic-bezier(.19,1,.22,1),
    border-color .35s ease;
}

article:hover {
  transform: translateY(-4px);
  border-color: rgba(0,0,0,0.16);
  box-shadow:
    0 2px 2px rgba(0,0,0,0.03),
    0 16px 30px rgba(0,0,0,0.08),
    0 40px 80px rgba(0,0,0,0.12);
}

/* Títulos de cards un toque más finos */
article h3 {
  letter-spacing: -0.01em;
}

/* Texto más legible en cards */
article p {
  line-height: 1.65;
}


/* ===============================
   IMÁGENES (sin recorte feo + consistencia)
   =============================== */

/* Evita que en algunos navegadores se deformen */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* En cards: suaviza el borde de la imagen */
article img {
  filter: contrast(1.02) saturate(1.02);
}

/* Un mini brillo al hover (sutil) */
article:hover img {
  filter: contrast(1.05) saturate(1.06);
}


/* ===============================
   LINKS FINOS (estilo editorial)
   =============================== */

a.underline {
  text-decoration-thickness: 2px;
}

a.underline:hover {
  text-decoration-color: rgba(0,0,0,0.55);
}
/* ===============================
   MODAL (premium + animación)
   =============================== */

   #modal {
    animation: modalFadeIn .25s ease both;
  }
  
  #modal.hidden {
    display: none;
  }
  
  @keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Contenedor del modal (la tarjeta) */
  #modal > div.relative {
    animation: modalPop .35s cubic-bezier(.19,1,.22,1) both;
  }
  
  @keyframes modalPop {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* Imagen dentro del modal */
  #modalImage {
    box-shadow:
      0 1px 1px rgba(0,0,0,0.03),
      0 10px 30px rgba(0,0,0,0.10);
  }
  
  /* Botón cerrar: más “táctil” */
  #modal [data-close-modal] {
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  
  #modal [data-close-modal]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
  }
  
  
  /* ===============================
     FORMULARIO (pro feel)
     =============================== */
  
  #contactForm input,
  #contactForm select,
  #contactForm textarea {
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  
  #contactForm input:focus,
  #contactForm select:focus,
  #contactForm textarea:focus {
    border-color: rgba(194, 163, 107, 0.55);
    box-shadow: 0 0 0 4px rgba(194, 163, 107, 0.18);
    transform: translateY(-1px);
  }
  
  /* Placeholder sobrio */
  #contactForm input::placeholder,
  #contactForm textarea::placeholder {
    color: rgba(0,0,0,0.40);
  }
  
  /* Mensaje de estado del form */
  #formMsg {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 14px;
  }
  
  #formMsg.ok {
    display: block !important;
    background: rgba(16, 185, 129, 0.10);
    color: rgb(16, 185, 129);
    border: 1px solid rgba(16, 185, 129, 0.25);
  }
  
  #formMsg.err {
    display: block !important;
    background: rgba(239, 68, 68, 0.10);
    color: rgb(239, 68, 68);
    border: 1px solid rgba(239, 68, 68, 0.25);
  }
  
  /* Botón enviar: más “arquitectura” */
  #contactForm button[type="submit"] {
    box-shadow:
      0 2px 2px rgba(0,0,0,0.05),
      0 12px 25px rgba(0,0,0,0.14);
  }
  
  #contactForm button[type="submit"]:hover {
    box-shadow:
      0 2px 2px rgba(0,0,0,0.06),
      0 16px 35px rgba(0,0,0,0.18);
  }
  
  
  /* ===============================
     SECCIÓN CONTACTO (fondo oscuro)
     =============================== */
  
  /* Imagen del mapa: se ve más “render” */
  #contacto img {
    filter: contrast(1.03) saturate(1.02);
  }
  
  /* Tarjetas dentro del contacto */
  #contacto .rounded-2xl {
    transition: transform .25s ease, background .25s ease;
  }
  
  #contacto .rounded-2xl:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.12);
  }
  
  /* Footer más sobrio */
  footer {
    font-size: 0.95rem;
  }
  /* ===============================
   RESPONSIVE (ajustes finos)
   =============================== */

@media (max-width: 1024px) {
  /* Reduce un poco la agresividad del hover en pantallas más chicas */
  article:hover {
    transform: translateY(-2px);
  }

  /* Modal más pegado arriba */
  #modal > div.relative {
    margin-top: 24px !important;
  }
}

@media (max-width: 640px) {
  /* Hero: título más compacto para que no se parta feo */
  #inicio h1 {
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  /* Botones del hero: sin salto raro */
  #inicio a,
  #inicio button {
    width: 100%;
  }

  /* Footer: mejor spacing */
  footer .gap-6 {
    gap: 14px !important;
  }
}


/* ===============================
   UTILIDADES PREMIUM (reusables)
   =============================== */

/* Línea fina decorativa (podés usarla si después querés) */
.hr-soft {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,0.12),
    transparent
  );
}

/* Sombra suave para secciones claras */
.section-soft {
  background:
    radial-gradient(1000px 500px at 10% 0%, rgba(194,163,107,0.12), transparent 45%),
    radial-gradient(1000px 500px at 90% 10%, rgba(0,0,0,0.04), transparent 45%);
}

/* Brillo sutil en botones oscuros */
.btn-glow:hover {
  box-shadow:
    0 2px 2px rgba(0,0,0,0.05),
    0 18px 45px rgba(194,163,107,0.25);
}


/* ===============================
   ACCESIBILIDAD (detalles pro)
   =============================== */

:focus-visible {
  outline: 3px solid rgba(194,163,107,0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ===============================
   FIXES (evitar bugs visuales)
   =============================== */

/* Evita que el modal “mueva” el body raro en algunos navegadores */
body.modal-open {
  overflow: hidden;
}

/* Evita saltos por imágenes grandes antes de cargar */
img {
  background: rgba(0,0,0,0.03);
}

/* Botones no se deforman */
button {
  -webkit-tap-highlight-color: transparent;
}