/*
 * Viviaza © 2026 — Todos los derechos reservados.
 *
 * Tipo de archivo:        CSS
 * Ruta del archivo:       css/contacto.css
 * Versión nueva:          1.1.0
 * Fecha de creación:      05/06/2026
 * Fecha de modificación:  05/06/2026
 *
 * Descripción:
 *   Estilos de la página de contacto: fondo con destellos, tarjeta de
 *   formulario, campos, alertas y botones de acción.
 *
 * Descripción del cambio:
 *   Adopta la paleta oficial. Las variables locales (--azul, --dorado, etc.)
 *   derivan de los tokens var(--c-*) de _tokens.css y se migran los colores
 *   fijos del cuerpo. El texto oscuro de las alertas se conserva por
 *   contraste (sin equivalente de estado oscuro en la paleta).
 *
 * Estado: listo para producción
 */
:root{
  --azul:        var(--c-primary);
  --azul-2:      var(--c-primary-soft);
  --dorado:      var(--c-accent);
  --dorado-2:    var(--c-accent-dark);
  --bg-page:     var(--c-bg);
  --bg-card:     var(--c-bg-alt);
  --text-main:   var(--c-text);
  --text-sec:    var(--c-text-dim);
  --borde:       var(--c-border);
  --borde-strong:var(--c-border-strong);
  --shadow-card: var(--shadow-md);
  --radius-xl:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --font-main:'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
}

*{ box-sizing:border-box }
body{
  background:
    radial-gradient(80rem 80rem at -20% -10%, var(--c-action-soft) 0%, transparent 40%),
    radial-gradient(60rem 60rem at 120% 20%, var(--c-accent-soft) 0%, transparent 45%),
    var(--bg-page);
  color:var(--text-main);
  font-family:var(--font-main);
}

/* Wrapper */
.wrap-contacto{ max-width:1100px; margin:32px auto 72px; padding:0 16px }

/* Titulares */
.ttl{
  font-size:clamp(1.35rem,2.2vw,1.85rem); font-weight:800; margin:0 0 6px;
  background:linear-gradient(90deg,var(--azul),var(--azul-2)); -webkit-background-clip:text;
  background-clip:text; color:transparent; display:inline-flex; gap:10px; align-items:center;
}
.ttl::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--dorado), var(--dorado-2));
  box-shadow:0 0 0 8px var(--c-accent-soft);
}
.subttl{ color:var(--text-sec); margin:0 0 18px; font-size:.95rem }

/* Card formulario */
.card-form{
  background:var(--bg-card); border:1.5px solid var(--borde); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card); padding:16px; position:relative; overflow:hidden; isolation:isolate;
}
.card-form::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg,var(--dorado),var(--dorado-2),var(--dorado));
}
.card-form::after{
  content:""; position:absolute; right:-60px; bottom:-60px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(closest-side, var(--c-accent-soft), transparent);
}

/* Grid */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.fld-100{ grid-column:1/-1 }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .grid{ grid-template-columns:1fr } }

/* Campos */
.fld{ display:flex; flex-direction:column; gap:4px; padding-bottom:6px; border-bottom:1px solid var(--c-border) }
.fld-100{ border-bottom:1px solid var(--c-border) }
.fld > span{ font-size:.88rem; line-height:1.15; font-weight:700; color:var(--azul); margin-bottom:2px }

.fld input, .fld select{
  height:40px; padding:8px 10px; font-size:.92rem; color:var(--text-main);
  background:var(--c-bg-alt); border:1.5px solid var(--borde-strong); border-radius:10px; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.fld textarea{
  min-height:110px; padding:8px 10px; font-size:.92rem; line-height:1.35;
  border:1.5px solid var(--borde-strong); border-radius:12px; resize:vertical;
}
.fld input::placeholder, .fld textarea::placeholder{ color:var(--c-text-muted) }

.fld input:hover, .fld select:hover, .fld textarea:hover{ border-color:var(--c-text-muted) }
.fld input:focus, .fld select:focus, .fld textarea:focus{
  border-color:var(--dorado); box-shadow:0 0 0 3px var(--c-accent-soft); background:var(--c-bg-alt)
}
input[type="tel"]{ letter-spacing:.4px; font-variant-numeric:tabular-nums }

/* Alertas */
.alert{
  margin-top:12px; padding:10px 12px; border-radius:12px; font-size:.92rem;
  border:1px solid transparent; display:inline-grid; grid-auto-flow:column; gap:8px; align-items:center
}
.alert[hidden]{ display:none }
.alert.success{ background:var(--c-success-soft); border-color:var(--c-success); color:#065f46 }
.alert.error{ background:var(--c-danger-soft); border-color:var(--c-danger); color:#7f1d1d }
.alert.info{ background:var(--c-info-soft); border-color:var(--c-info); color:#1e3a8a }

/* Acciones */
.actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap }
.btn{
  appearance:none; border:none; cursor:pointer; font-weight:800; border-radius:999px;
  padding:9px 14px; font-size:.93rem; display:inline-flex; align-items:center; gap:8px;
  transition:transform .06s ease, filter .15s ease, box-shadow .2s ease
}
.btn.primary{ color:var(--c-text-on-dark); background:linear-gradient(135deg,var(--azul),var(--azul-2)); box-shadow:var(--shadow-md) }
.btn.primary:hover{ transform:translateY(-1px); filter:saturate(1.08) }
.btn.ghost{ background:var(--c-bg-alt); color:var(--azul); border:1px solid var(--azul) }
.btn.ghost:hover{ background:rgba(27,44,79,.07) }