/* ====== Contacto (T2P, horizontal) ====== */
#main .page-content{
  --accent:#c3a461;
  --line:#e5e7eb;
  --text:#1a1a1a;
  color:var(--text);
  font-size:1rem;
}

/* Título de página con subrayado dorado */
#main .page-header .page-title span{ position:relative; display:inline-block; }
#main .page-header .page-title span::after{
  content:""; display:block; width:48px; height:2px; background:var(--accent); margin-top:.45rem;
}

/* === Mantener HORIZONTALIDAD (usando Bootstrap) === */
@media (min-width:992px){
  #main .page-content > .row{
    display:flex;               /* usa flex del tema */
    flex-wrap:nowrap;           /* que no se baje ninguna */
    align-items:flex-start;
    column-gap:24px;            /* separación entre columnas */
  }
}

/* Tarjetas */
#main .contact-page-info,
#main .contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  padding:1.25rem 1.5rem;
}

/* ——— Columna izquierda ——— */
#main .contact-page-info p{ margin:0 0 .6rem; }
#main .contact-page-info a{ color:inherit; text-decoration:none; border-bottom:1px dotted transparent; }
#main .contact-page-info a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* Subrayado dorado en los <strong> del contenido (Consultas / Tienda Física / Connect) */
#main .contact-page-info p > strong{
  display:inline-block; position:relative; margin:.25rem 0 .35rem;
}
#main .contact-page-info p > strong::after{
  content:""; display:block; width:38px; height:2px; background:var(--accent); margin-top:.3rem;
}

/* Social/payment: que no rompan la tarjeta */
#main .contact-page-info img{ vertical-align:middle; }
#main .contact-page-info img + img{ margin-left:.35rem; }
#main .contact-page-info .part > div,
#main .contact-page-info .part > p:last-child{ display:flex; flex-wrap:wrap; gap:.35rem .35rem; }

/* ——— Formulario ——— */
#main .contact-form h4{
  margin:0 0 .8rem; font-weight:700; position:relative; padding-bottom:.45rem;
}
#main .contact-form h4::after{
  content:""; position:absolute; left:0; bottom:0; width:48px; height:2px; background:var(--accent);
}

#main .contact-form .form-group{ margin-bottom:.9rem; }
#main .contact-form .form-control-label{ font-weight:600; color:#4a4a4a; }
#main .contact-form .form-control,
#main .contact-form .form-control-select{
  border:1px solid var(--line);
  border-radius:8px;
  padding:.55rem .75rem;
  background:#fff;
  box-shadow:none;
}
#main .contact-form textarea.form-control{ min-height:140px; resize:vertical; }

/* Foco accesible */
#main .contact-form .form-control:focus,
#main .contact-form .form-control-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(195,164,97,.18);
  outline:0;
}

/* File input (bootstrap-filestyle) */
#main .contact-form .bootstrap-filestyle .form-control{ background:#f7f7f7; }
#main .contact-form .bootstrap-filestyle .btn{
  background:#fff; border:1px solid var(--line); border-radius:8px;
}
#main .contact-form .bootstrap-filestyle .btn:hover{ border-color:var(--accent); color:var(--accent); }

/* Checkbox GDPR */
#main .contact-form .custom-checkbox .psgdpr_consent_message{ display:flex; align-items:center; gap:.5rem; }
#main .contact-form input[type="checkbox"]{
  appearance:none; width:18px; height:18px; border:1px solid var(--line); border-radius:4px; position:relative; cursor:pointer;
}
#main .contact-form input[type="checkbox"]:focus{ outline:2px solid rgba(195,164,97,.35); outline-offset:2px; }
#main .contact-form input[type="checkbox"]:checked{ border-color:var(--accent); background:var(--accent); }
#main .contact-form input[type="checkbox"]:checked::after{
  content:""; position:absolute; width:6px; height:10px; left:4px; top:1px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* Footer del formulario + botón */
#main .contact-form .form-footer{ margin-top:.25rem; padding-top:.9rem; border-top:1px solid var(--line); text-align:right; }
#main .contact-form .btn.btn-primary{
  background:var(--accent); border-color:var(--accent); color:#fff;
  border-radius:8px; padding:.55rem 1.1rem; transition:filter .15s ease;
}
#main .contact-form .btn.btn-primary:hover{ filter:brightness(.92); }
#main .contact-form .btn.btn-primary[disabled]{ background:#d9d9d9; border-color:#d9d9d9; color:#808080; }

/* En móvil sí apilamos */
@media (max-width:991px){
  #main .page-content > .row{ flex-wrap:wrap; }
}

.psgdpr_consent_message span{color:black}

/* ===== Fix responsive Contacto ===== */

/* Desktop: dos columnas sin que se bajen */
@media (min-width: 992px){
  #main .page-content > .row{
    display:flex;
    flex-wrap:nowrap;           /* se mantiene horizontal */
    align-items:flex-start;
    column-gap:24px;
  }
}

/* Tablet/Móvil: apilar tarjetas y ensanchar a 100% */
@media (max-width: 991px){
  #main .page-content > .row{
    display:flex;
    flex-wrap:wrap !important;
    row-gap:16px;
  }
  /* Fuerza a que cada columna ocupe todo el ancho */
  #main .page-content > .row > .col-sm-4,
  #main .page-content > .row > .col-sm-8{
    flex:1 1 100% !important;
    max-width:100% !important;
  }
  /* Tarjetas a 100% y con respiro */
  #main .contact-page-info,
  #main .contact-form{
    width:100%;
    padding:1rem 1rem;
  }
}

/* Móvil: formulario en una sola columna (labels arriba) */
@media (max-width: 768px){
  #main .contact-form .form-fields{ padding-top:0; }

  /* Cada fila del form pasa a bloque */
  #main .contact-form .form-group.row{
    display:block;
    margin-bottom:.85rem;
  }

  /* Label arriba y con espacio */
  #main .contact-form .form-control-label{
    display:block;
    margin:0 0 .35rem;
  }

  /* Cols internas a 100% */
  #main .contact-form .form-group [class^="col-"],
  #main .contact-form .form-group [class*=" col-"]{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Comentarios “opcional” debajo del campo */
  #main .contact-form .form-control-comment{
    display:block;
    margin:.25rem 0 0;
    text-align:left;
  }

  /* File input: que no desborde y ocupe ancho completo */
  #main .contact-form .bootstrap-filestyle,
  #main .contact-form .bootstrap-filestyle .form-control{
    width:100%;
    min-width:0;
  }

  /* Footer: botón alineado a la izquierda en móvil */
  #main .contact-form .form-footer{ text-align:left; }
}

/* Detalle estético: línea dorada bajo los h4 del form (por si se perdió) */
#main .contact-form h4{
  position:relative; padding-bottom:.45rem; margin:0 0 .8rem; font-weight:700;
}
#main .contact-form h4::after{
  content:""; position:absolute; left:0; bottom:0; width:48px; height:2px; background:#c3a461;
}