/* =====================================================
   contact-form.css  ·  Formulario de contacto
   (template-parts/contact-form.php)
   Funciona en los dos lugares donde aparece:
   - Dentro de la página Contáctanos
   - Dentro del modal "Consulte ahora" (#tb-contact-modal)
   ===================================================== */

.Contacto {
  --grafito:        #34383D;
  --grafito-suave:  #5E636A;
  --naranja:        #F26B1D;
  --naranja-hover:  #FF8238;
  --fondo-claro:    #F5F4F2;
  --borde:          #E4E2DF;
  --blanco:         #FFFFFF;
  --alto-campo:     50px;
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23F26B1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  color: var(--grafito);
}
.Contacto *,
.Contacto *::before,
.Contacto *::after { box-sizing: border-box; }

/* =====================================================
   IMAGEN Y CAJA DEL FORMULARIO
   ===================================================== */
.Contacto > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
}

.Contacto .formulario {
  min-width: 0;
  padding: 44px 44px 40px;
  background: var(--blanco);
}

/* Título con rayita naranja */
.Contacto h2 {
  margin: 0 0 28px;
  font-size: 44px;
  font-weight: 400;            /* Bebas Neue solo tiene 400 */
  line-height: 1.05;
  letter-spacing: .5px;
  color: var(--grafito);
}
.Contacto h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--naranja);
}

/* ----- En la página Contáctanos: franja gris clara,
         imagen redondeada y formulario en caja blanca con sombra ----- */
#page-ejemplo .Contacto {
  gap: 32px;
  background: var(--fondo-claro);
}
#page-ejemplo .Contacto > img {
  height: 100%;
  border-radius: 24px;
}
#page-ejemplo .Contacto .formulario {
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(38, 41, 45, .06),
    0 12px 32px -12px rgba(38, 41, 45, .18);
}

/* ----- Dentro del modal: imagen y formulario pegados, sin sombra ----- */
#tb-contact-modal .Contacto {
  gap: 0;
  padding: 0;
  background: var(--blanco);
}
#tb-contact-modal .Contacto > img { border-radius: 0; }
#tb-contact-modal .Contacto h2 { font-size: 40px; }

/* =====================================================
   CAMPOS
   ===================================================== */
.Contacto form { margin: 0; }

.Contacto .tb-contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.Contacto .tb-contact-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0 0 18px;
}

.Contacto label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--grafito);
}

.Contacto input:not([type="hidden"]),
.Contacto select,
.Contacto textarea {
  width: 100%;
  height: var(--alto-campo);
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  outline: none;
  background: var(--fondo-claro);
  box-shadow: none;
  color: var(--grafito);
  font-family: inherit;
  font-size: 16px;               /* 16px evita el zoom automático en iPhone */
  font-weight: 500;
  line-height: 1.4;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.Contacto textarea {
  height: auto;
  min-height: 130px;
  padding: 14px 16px;
  resize: vertical;
}
.Contacto input::placeholder,
.Contacto textarea::placeholder {
  color: var(--grafito-suave);
  font-weight: 400;
  opacity: .7;
}
.Contacto input:hover,
.Contacto select:hover,
.Contacto textarea:hover { border-color: #CFCCC8; }
.Contacto input:focus,
.Contacto select:focus,
.Contacto textarea:focus {
  border-color: var(--naranja);
  background: var(--blanco);
  box-shadow: 0 0 0 4px rgba(242, 107, 29, .15);
}

/* Select con flechita naranja */
.Contacto select {
  padding-right: 40px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Calendario del campo fecha en naranja */
.Contacto input[type="date"] { color-scheme: light; }
.Contacto input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(43%) sepia(95%) saturate(1296%) hue-rotate(350deg) brightness(99%) contrast(93%);
}

/* País + código + número */
.Contacto .tb-contact-field-country .tb-contact-row {
  grid-template-columns: minmax(120px, 36%) minmax(0, 1fr);
  margin-top: 10px;
}
.Contacto .tb-contact-field-country .tb-contact-row .tb-contact-field { margin-bottom: 0; }

/* Sugerencias de país */
.Contacto #tb-contact-country-suggestions {
  position: absolute;
  top: calc(20px + 8px + var(--alto-campo) + 6px);   /* justo debajo del campo País */
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--blanco);
  box-shadow: 0 20px 40px -20px rgba(38, 41, 45, .35);
}
.Contacto #tb-contact-country-suggestions[hidden] { display: none; }
.Contacto #tb-contact-country-suggestions li {
  margin: 3px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--grafito);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.Contacto #tb-contact-country-suggestions li + li { position: relative; }
.Contacto #tb-contact-country-suggestions li + li::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--borde);
}
.Contacto #tb-contact-country-suggestions li:hover {
  background: var(--fondo-claro);
  color: var(--naranja);
}

/* =====================================================
   BOTÓN ENVIAR
   (con :is(#page-ejemplo, body) le gana al estilo general de botones)
   ===================================================== */
:is(#page-ejemplo, #tb-contact-modal, body) .Contacto .tb-contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: auto;
  margin: 8px 0 0;
  padding: 8px 8px 8px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--naranja);
  box-shadow: none;
  color: var(--blanco);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .25s, color .25s;
}
/* Circulito con flecha (mismo de los demás botones) */
:is(#page-ejemplo, #tb-contact-modal, body) .Contacto .tb-contact-submit::after {
  content: "";
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--grafito) var(--flecha) center / 16px no-repeat;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
:is(#page-ejemplo, #tb-contact-modal, body) .Contacto .tb-contact-submit:hover {
  background: var(--grafito);
  color: var(--blanco);
}
:is(#page-ejemplo, #tb-contact-modal, body) .Contacto .tb-contact-submit:hover::after {
  background-color: var(--naranja);
  transform: rotate(-45deg);
}
:is(#page-ejemplo, #tb-contact-modal, body) .Contacto .tb-contact-submit:focus-visible {
  outline: 3px solid var(--naranja-hover);
  outline-offset: 3px;
}
:is(#page-ejemplo, #tb-contact-modal, body) .Contacto .tb-contact-submit:disabled {
  opacity: .6;
  cursor: wait;
}

/* Mensaje de estado (Enviando..., enviado, error) */
.Contacto .tb-contact-form-status {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--fondo-claro);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--grafito);
}
.Contacto .tb-contact-form-status:empty { display: none; }

/* =====================================================
   MODAL "CONSULTE AHORA"
   Estructura del plugin:
   #tb-contact-modal.tb-contact-modal [hidden]
     .tb-contact-modal-overlay  (fondo, cierra al hacer clic)
     .tb-contact-modal-box      (la caja)
       .tb-contact-modal-close  (botón ×)
       section.Contacto         (tu formulario)
   ===================================================== */

/* Contenedor: pantalla completa, por encima de todo */
#tb-contact-modal.tb-contact-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 32px 24px;
  overflow-y: auto;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent;
}
#tb-contact-modal.tb-contact-modal[hidden] { display: none !important; }

/* Fondo oscuro */
#tb-contact-modal .tb-contact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(38, 41, 45, .85);
  cursor: pointer;
  animation: tbModalFondo .25s ease both;
}

/* Caja */
#tb-contact-modal .tb-contact-modal-box {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%) !important;
  max-width: none;
  max-height: calc(100vh - 64px);
  margin: auto;
  padding: 0 !important;
  overflow-y: auto;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
  opacity: 1;
  transform: none;
  animation: tbModalCaja .35s cubic-bezier(.2, .8, .2, 1) both;
}
#tb-contact-modal .Contacto { border-radius: 0; }

/* Botón cerrar */
#tb-contact-modal .tb-contact-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #34383D;
  box-shadow: none;
  color: #FFFFFF;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, transform .3s;
}
#tb-contact-modal .tb-contact-modal-close:hover {
  background: #F26B1D;
  color: #FFFFFF;
  transform: rotate(90deg);
}
#tb-contact-modal .tb-contact-modal-close:focus-visible {
  outline: 3px solid #FF8238;
  outline-offset: 3px;
}

/* El plugin imprime el modal junto al botón (por ejemplo dentro de la
   tarjeta de precio o de un bloque con fondo). Esos contenedores lo
   encerraban y lo tapaban. Mientras el modal está abierto, se liberan. */
body *:has(#tb-contact-modal:not([hidden])) {
  z-index: 100000 !important;
  isolation: auto !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  contain: none !important;
  container-type: normal !important;
}

@keyframes tbModalFondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tbModalCaja {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================
   RESPONSIVE: TABLET (hasta 1024px)
   ===================================================== */
@media (max-width: 1024px) {
  /* Página: imagen arriba, formulario abajo */
  #page-ejemplo .Contacto { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #page-ejemplo .Contacto > img { height: auto; aspect-ratio: 16 / 7; }

  /* Modal: sin imagen, todo el espacio para el formulario */
  #tb-contact-modal .Contacto { grid-template-columns: minmax(0, 1fr); }
  #tb-contact-modal .Contacto > img { display: none; }
}

/* =====================================================
   RESPONSIVE: MÓVIL (hasta 767px)
   ===================================================== */
@media (max-width: 767px) {
  .Contacto { --alto-campo: 48px; }
  .Contacto .formulario { padding: 30px 20px 26px; }
  .Contacto h2,
  #tb-contact-modal .Contacto h2 { font-size: 34px; margin-bottom: 22px; }

  #page-ejemplo .Contacto > img { aspect-ratio: 16 / 9; border-radius: 20px; }
  #page-ejemplo .Contacto .formulario { border-radius: 20px; }

  .Contacto .tb-contact-field { margin-bottom: 16px; }
  .Contacto .tb-contact-row { gap: 0 12px; }
  .Contacto .tb-contact-field-country .tb-contact-row { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); }
}

/* Pantallas muy chicas: nombre y apellido uno debajo del otro */
@media (max-width: 400px) {
  .Contacto form > .tb-contact-row:first-child { grid-template-columns: minmax(0, 1fr); }
}

/* Modal en móvil: casi pantalla completa */
@media (max-width: 767px) {
  #tb-contact-modal.tb-contact-modal { padding: 12px; align-items: flex-start; }
  #tb-contact-modal .tb-contact-modal-box {
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }
  #tb-contact-modal .tb-contact-modal-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  #tb-contact-modal .Contacto .formulario { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .Contacto * { transition: none !important; }
  #tb-contact-modal .tb-contact-modal-overlay,
  #tb-contact-modal .tb-contact-modal-box { animation: none !important; }
}