/* =============================================
   LisaKey - Sección de Contacto (rediseño)
   Tarjetas de contacto + tarjeta de cotización rápida,
   siguiendo la referencia visual proporcionada.
   Reutiliza las variables de diseño de style.css.
   ============================================= */

.contact2__grid{
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  gap:var(--space-lg);
  margin-top:var(--space-xl);
}

/* ---------- Columna de tarjetas ---------- */
.contact2__cards{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}

.contact2__card{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:var(--space-lg);
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:border-color var(--transition-base);
}
.contact2__card:hover{border-color:var(--color-border-hover)}

.contact2__card-icon{
  flex-shrink:0;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
  background:rgba(10,107,255,0.12);
  color:var(--color-primary-light);
}
.contact2__card-icon--whatsapp{
  background:rgba(37,211,102,0.12);
  color:#25D366;
}

.contact2__card-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.contact2__card-label{
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  color:var(--color-primary-light);
}
.contact2__card-label--whatsapp{color:#25D366}
.contact2__card-value{
  font-size:var(--font-size-xl);
  font-weight:var(--font-weight-bold);
  color:var(--color-text);
  line-height:1.25;
}
.contact2__card--static .contact2__card-value{font-size:var(--font-size-lg)}
.contact2__card-hint{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
}

.contact2__card-btn{
  flex-shrink:0;
  white-space:nowrap;
}

.contact2__card-btn.btn-whatsapp{
  color:#FFFFFF;
  background:rgba(37,211,102,0.16);
  border-color:rgba(37,211,102,0.58);
}

.contact2__card-btn.btn-whatsapp:hover{
  color:#FFFFFF;
  background:rgba(37,211,102,0.28);
  border-color:rgba(37,211,102,0.8);
}

/* ---------- Tarjeta CTA de cotización ---------- */
.contact2__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-sm);
  padding:var(--space-md);
  background:linear-gradient(180deg, rgba(10,107,255,0.10), var(--color-bg-card) 40%);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
}

.contact2__cta-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(10,107,255,0.15);
  border:1px solid var(--color-border);
  color:var(--color-primary-light);
  margin-bottom:var(--space-xs);
}

.contact2__cta-title{
  font-size:var(--font-size-2xl);
  font-weight:var(--font-weight-bold);
  line-height:1.25;
  color:var(--color-text);
}

.contact2__cta-subtitle{
  font-size:var(--font-size-base);
  color:var(--color-text-secondary);
  max-width:32ch;
}

.contact2__cta-van{
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--color-border);
  background:var(--color-bg-secondary);
}
.contact2__cta-van img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.contact2__cta-btn{
  width:100%;
  justify-content:center;
}

.contact2__cta-caption{
  font-size:var(--font-size-xs);
  color:var(--color-text-secondary);
}

/* ---------- Franja de garantías ---------- */
.contact2__badges{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-md);
  margin-top:var(--space-xl);
  padding:var(--space-lg);
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
}

.contact2__badge{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.contact2__badge-icon{
  flex-shrink:0;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(10,107,255,0.12);
  color:var(--color-primary-light);
}
.contact2__badge strong{
  display:block;
  font-size:var(--font-size-base);
  color:var(--color-text);
}
.contact2__badge span{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .contact2__badges{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1024px){
  .contact2__grid{grid-template-columns:1.15fr 0.85fr;align-items:stretch}
  .contact2__cta{justify-content:center;height:100%}
  .contact2__cta-van{aspect-ratio:auto;flex:1;min-height:0}
}

/* ---------- Formulario de comentarios / incidencias ---------- */
.contact2__feedback{
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
  padding:clamp(22px,3vw,32px);
  background:var(--color-bg-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  min-width:0;
}

.contact2__feedback-head{
  display:flex;
  align-items:flex-start;
  gap:var(--space-md);
  padding-bottom:var(--space-lg);
  border-bottom:1px solid var(--color-border);
}

.contact2__feedback-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:rgba(19,108,244,.12);
  border:1px solid rgba(19,108,244,.35);
  color:#136CF4;
}

.contact2__feedback-kicker{
  display:block;
  margin-bottom:4px;
  color:#136CF4;
  font-size:var(--font-size-sm);
  font-weight:700;
  letter-spacing:.02em;
}

.contact2__feedback-title{
  margin:0;
  color:var(--color-text);
  font-size:clamp(1.2rem,2vw,1.55rem);
  line-height:1.25;
}

.contact2__feedback-subtitle{
  margin:8px 0 0;
  color:var(--color-text-secondary);
  font-size:var(--font-size-sm);
  line-height:1.6;
}

.contact2__feedback-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact2__feedback-row{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.contact2__feedback-field{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  color:var(--color-text);
  font-size:var(--font-size-sm);
  font-weight:600;
}

.contact2__feedback-field > span:first-child small{
  color:var(--color-text-secondary);
  font-weight:400;
}

.contact2__feedback .form__input,
.contact2__feedback .form__select{
  width:100%;
  min-height:50px;
  border-color:var(--color-border);
  background:var(--color-bg-secondary);
}

.contact2__feedback .form__input:focus,
.contact2__feedback .form__select:focus{
  border-color:#136CF4;
  box-shadow:0 0 0 3px rgba(19,108,244,.12);
  outline:none;
}

/* El menú desplegable de incidencias conserva el mismo tema oscuro
   que los selectores de marca/modelo del cotizador. */
.contact2__feedback .form__select{
  color:var(--color-text);
  color-scheme:dark;
}
.contact2__feedback .form__select option{
  color:var(--color-text);
  background-color:var(--color-bg-secondary);
}
.contact2__feedback .form__select option:disabled{
  color:var(--color-text-secondary);
}

.contact2__feedback-textarea{
  min-height:132px;
  resize:vertical;
  line-height:1.55;
  padding-bottom:30px;
}

.contact2__feedback-counter{
  position:absolute;
  right:12px;
  bottom:10px;
  color:var(--color-text-secondary);
  font-size:11px;
  font-weight:500;
  pointer-events:none;
}

.contact2__feedback-status{
  display:none;
  padding:12px 14px;
  border-radius:var(--radius-md);
  font-size:var(--font-size-sm);
  line-height:1.45;
}

.contact2__feedback-status.is-visible{display:block}
.contact2__feedback-status.is-success{
  color:#9ff0ba;
  background:rgba(37,211,102,.10);
  border:1px solid rgba(37,211,102,.30);
}
.contact2__feedback-status.is-error{
  color:#ffb3b3;
  background:rgba(255,107,107,.10);
  border:1px solid rgba(255,107,107,.30);
}

.contact2__feedback-submit{
  width:100%;
  justify-content:center;
  min-height:50px;
  color:#FFFFFF;
  background:rgba(10,107,255,0.16);
  border-color:rgba(54,163,255,0.58);
}

.contact2__feedback-submit:hover{
  color:#FFFFFF;
  background:rgba(10,107,255,0.28);
  border-color:rgba(54,163,255,0.8);
}

.contact2__feedback-submit:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.contact2__feedback-note{
  margin:0;
  text-align:center;
  color:var(--color-text-secondary);
  font-size:11px;
  line-height:1.45;
}
.contact2__feedback-note a{color:var(--color-primary-light);text-decoration:underline;text-underline-offset:2px}

@media (min-width:640px){
  .contact2__feedback-row{grid-template-columns:1fr 1fr}
}

@media (max-width:639px){
  .contact2__feedback{padding:20px 16px}
  .contact2__feedback-head{gap:12px}
  .contact2__feedback-icon{flex-basis:44px;width:44px;height:44px}
}