/* ===========================================================
   CONTACTO – Matanga 3D (Cuadrillé + paleta tienda)
   Drop-in CSS (respeta --primario / --secundario / --secundario-rgb)
   =========================================================== */

/* Página completa + CUADRILLÉ global */
.contact-page{
  min-height: 100vh;
  background-color: var(--primario);
  color: #000000;

  /* para dibujar la malla en el fondo */
  position: relative;
  isolation: isolate;

  /* Preset de cuadrícula “bien marcada” */
  --grid-size: 64px;
  --grid-size-mobile: 48px;
  --grid-color-rgb: var(--cuaternario-rgb, 61,43,31);
  --grid-alpha: .16;

  /* Cuadrícula sólida aplicada directo al fondo */
  background-image:
    linear-gradient(rgba(var(--grid-color-rgb), var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-color-rgb), var(--grid-alpha)) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  background-position: center top;

  /* (compat: se mantienen las variables originales aunque ya no se usen) */
  --cpg-grid-size: 64px;
  --cpg-grid-size-md: 56px;
  --cpg-grid-size-sm: 44px;
  --cpg-line-rgb: var(--secundario-rgb, 138,64,32);
  --cpg-line-alpha: .14;
}
@media (min-width:1024px){
  /* cambiamos sólo el color base para no borrar la malla */
  .contact-page{ background-color: var(--primario) !important; }
}

/* anular la malla previa por pseudo-elemento para evitar doble patrón */
.contact-page::before,
.contact-page::after{ content:none !important; }

/* asegurar que el contenido quede sobre la malla */
.contact-page > *{ position: relative; z-index: 1; }

/* responsive del patrón global (preset) */
@media (max-width:1200px){
  .contact-page{
    background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  }
}
@media (max-width:768px){
  .contact-page{
    background-size: var(--grid-size-mobile) var(--grid-size-mobile),
                     var(--grid-size-mobile) var(--grid-size-mobile);
  }
}

/* Hero / cintillo superior */
.contact-hero{
  padding: 2.5rem 1rem 5.5rem;
  text-align: center;
  background:
    radial-gradient(600px 240px at 10% 0%, color-mix(in oklab, var(--primario) 22%, transparent), transparent 70%),
    radial-gradient(420px 200px at 90% -10%, color-mix(in oklab, var(--secundario) 22%, transparent), transparent 70%);
}
.contact-title{
  font: 800 clamp(1.6rem, 3.2vw, 2.2rem) "tipografia3", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.5px;
  color:#000000;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

/* ===========================================================
   CONTENEDOR CENTRAL con CUADRILLÉ
   =========================================================== */
.contact-wrap{
  max-width: 1100px;
  margin: -3.5rem auto 3rem; /* solapa con el hero */
  padding: 1.1rem;
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  border: 1px solid #1f2630;
  background: var(--cuaternario);          /* ✅ color de los “cuadros” */
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  overflow: clip;

  /* Variables del grid (independientes) */
  --ct-grid-size: 64px;
  --ct-grid-size-md: 56px;
  --ct-grid-size-sm: 44px;
  --ct-line-rgb: var(--secundario-rgb, 138,64,32); /* líneas del cuadrillé */
  --ct-line-alpha: .18;
  --ct-vignette: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.25) 100%);
}

/* Líneas del cuadrillé */
.contact-wrap::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--ct-line-rgb), var(--ct-line-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ct-line-rgb), var(--ct-line-alpha)) 1px, transparent 1px);
  background-size: var(--ct-grid-size) var(--ct-grid-size),
                   var(--ct-grid-size) var(--ct-grid-size);
  background-position: 0 0, 0 0;
}

/* Vignette para profundidad */
.contact-wrap::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background: var(--ct-vignette);
}

/* Ajuste de tamaño del cuadrillé en responsive */
@media (max-width:1200px){
  .contact-wrap::before{
    background-size: var(--ct-grid-size-md) var(--ct-grid-size-md),
                     var(--ct-grid-size-md) var(--ct-grid-size-md);
  }
}
@media (max-width:768px){
  .contact-wrap{ margin:-2.5rem auto 2rem; padding: .9rem; }
  .contact-wrap::before{
    background-size: var(--ct-grid-size-sm) var(--ct-grid-size-sm),
                     var(--ct-grid-size-sm) var(--ct-grid-size-sm);
  }
}

/* ===========================================================
   CARD en dos columnas (contenido sobre el cuadrillé)
   =========================================================== */
.contact-card{
  position: relative;
  z-index: 1; /* sobre el ::before/::after del cuadrillé */
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%),
    color-mix(in oklab, var(--cuaternario) 88%, black 12%);
  border: 1px solid #1f2630;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: clamp(1rem, 1.6vw, 1.6rem);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 2.2vw, 28px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contact-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--secundario) 40%, #1f2630);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--secundario) 22%, transparent),
    0 28px 60px color-mix(in oklab, var(--secundario) 16%, transparent),
    0 18px 40px rgba(0,0,0,.35);
}
@media (max-width:900px){
  .contact-card{ grid-template-columns: 1fr; }
}

/* Columna izquierda: info */
.contact-aside{ display:grid; gap:1rem; }
.contact-text{ color:#d6dde7; line-height:1.6; }

/* Chips / etiquetas */
.contact-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem; border-radius:999px;
  background:#121212; border:1px solid #272727; color:#eaeaea;
  font-weight:600; font-size:.9rem;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.contact-chip i{ color: var(--secundario); }

/* Redes */
.contact-social{ display:flex; gap:.6rem; flex-wrap:wrap; }
.contact-social a{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; border-radius:50%;
  background: rgba(255,255,255,.06);
  border:1px solid #2a2a2a;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.contact-social a:hover{
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--secundario) 22%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
}

/* Columna derecha: formulario */
.contact-form{ display:grid; gap:.9rem; }
.contact-field{ display:grid; gap:.35rem; }
.contact-label{ font-weight:700; color:#eaeaea; letter-spacing:.2px; }

.contact-input,
.contact-textarea{
  width:100%;
  background:#121212;
  color:#fff;
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:.75rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-input::placeholder,
.contact-textarea::placeholder{ color:#a1a1aa; }
.contact-input:focus,
.contact-textarea:focus{
  outline:none;
  border-color: var(--secundario);
  box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--secundario) 22%, transparent);
  background:#161616;
}
.contact-textarea{ min-height:140px; resize:vertical; }

/* Botones */
.contact-actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.25rem; }

.contact-submit,
.btn-secundario{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: var(--secundario);
  color:#0b0b0b;
  border:0; border-radius:999px;
  padding:.65rem 1.1rem;
  font-weight:800; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-submit:hover,
.btn-secundario:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(34,211,238,.28); }

.btn-outline{
  background: transparent;
  color: var(--secundario);
  border: 1px solid var(--secundario);
}
.btn-outline:hover{
  background: color-mix(in oklab, var(--secundario) 18%, transparent);
  color:#fff;
}

/* Mensajes */
.contact-alert{
  background:#101010;
  border:1px solid #2c2c2c;
  color:#eaeaea;
  border-radius:12px;
  padding:.75rem .9rem;
}

/* Inputs pequeños en dos columnas cuando hay ancho */
.contact-grid-2{
  display:grid; gap:.9rem;
  grid-template-columns:1fr 1fr;
}
@media (max-width:520px){
  .contact-grid-2{ grid-template-columns:1fr; }
}

/* Accesibilidad */
a:focus-visible, button:focus-visible{
  outline:2px dashed var(--secundario);
  outline-offset:2px;
  border-radius:10px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .contact-card,
  .contact-submit,
  .btn-secundario,
  .btn-outline{ transition:none; }
}