/* ==========================================================
   SAULEDA · CONTACT GARAGE
   Prototipo aislado y reversible
   ========================================================== */

:root {
  --sauleda-contact-garage-top: 84px;
}


/* ----------------------------------------------------------
   CONTENEDOR GENERAL
   ---------------------------------------------------------- */

.sauleda-contact-garage {
  position: fixed;
  inset: 0;

  z-index: 990;

  visibility: hidden;
  pointer-events: none;
}


.sauleda-contact-garage.is-open {
  visibility: visible;
  pointer-events: auto;
}


/* ----------------------------------------------------------
   FONDO
   ---------------------------------------------------------- */

.sauleda-contact-garage__backdrop {
  position: absolute;

  top: var(--sauleda-contact-garage-top);
  right: 0;
  bottom: 0;
  left: 0;

  background:
    rgba(26,26,24,.34);

  opacity: 0;

  transition:
    opacity .42s ease;
}


.sauleda-contact-garage.is-open
.sauleda-contact-garage__backdrop {
  opacity: 1;
}


/* ----------------------------------------------------------
   PUERTA RÍGIDA
   ---------------------------------------------------------- */

.sauleda-contact-garage__door {
  position: absolute;

  top: var(--sauleda-contact-garage-top);
  right: 0;
  left: 0;

  max-height:
    calc(
      100dvh -
      var(--sauleda-contact-garage-top)
    );

  overflow-y: auto;
  overscroll-behavior: contain;

  background:
    #fff;

  border-top:
    1px solid rgba(26,26,24,.07);

  box-shadow:
    0 26px 70px rgba(26,26,24,.26);

  /*
   * La pieza completa vive inicialmente
   * escondida DETRÁS del header.
   *
   * No cambia de altura.
   * No es un acordeón.
   */
  transform:
    translateY(
      calc(-100% - 24px)
    );

  transition:
    transform
    .68s
    cubic-bezier(.22,.61,.36,1);

  will-change:
    transform;
}


.sauleda-contact-garage.is-open
.sauleda-contact-garage__door {
  transform:
    translateY(0);
}


/* pequeño borde inferior que refuerza
   la sensación de panel rígido */
.sauleda-contact-garage__door::after {
  content: '';

  position: sticky;

  display: block;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(184,40,40,.38),
      transparent
    );

  pointer-events: none;
}


/* ----------------------------------------------------------
   INTERIOR
   ---------------------------------------------------------- */

.sauleda-contact-garage__inner {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(250px,330px)
    minmax(0,1fr);

  gap:
    clamp(40px,5vw,82px);

  width: 100%;
  max-width: 1500px;

  margin:
    0 auto;

  padding:
    clamp(34px,4vw,58px)
    clamp(28px,5vw,76px)
    clamp(44px,5vw,70px);
}


/* ----------------------------------------------------------
   CERRAR
   ---------------------------------------------------------- */

.sauleda-contact-garage__close {
  position: absolute;

  top: 20px;
  right: 24px;

  z-index: 4;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  padding: 0;

  border:
    1px solid rgba(26,26,24,.14);

  border-radius:
    50%;

  background:
    #fff;

  color:
    #1a1a18;

  font-size:
    25px;

  font-weight:
    300;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}


.sauleda-contact-garage__close:hover {
  color:
    #b82828;

  border-color:
    #b82828;

  transform:
    rotate(4deg);
}


/* ----------------------------------------------------------
   INFORMACIÓN DE TIENDA
   ---------------------------------------------------------- */

.sauleda-contact-garage__info {
  padding-top:
    6px;
}


.sauleda-contact-garage__info h2,
.sauleda-contact-garage__form-title {
  margin:
    0 0 26px;

  color:
    #34332f;

  font-size:
    clamp(1.65rem,2.2vw,2.25rem);

  font-weight:
    700;

  line-height:
    1.12;

  letter-spacing:
    -.025em;
}


.sauleda-contact-garage__info-block {
  display:
    grid;

  grid-template-columns:
    28px minmax(0,1fr);

  gap:
    16px;

  padding:
    17px 0;

  border-bottom:
    1px solid #e2dfda;

  color:
    #3f3d38;

  font-size:
    1rem;

  line-height:
    1.55;
}


.sauleda-contact-garage__info-block:first-of-type {
  padding-top:
    0;
}


.sauleda-contact-garage__info-block svg {
  width:
    20px;

  height:
    20px;

  margin-top:
    3px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.sauleda-contact-garage__info-block a {
  color:
    #1a1a18 !important;

  text-decoration:
    none !important;
}


.sauleda-contact-garage__info-block a:hover {
  color:
    #b82828 !important;
}


/* ----------------------------------------------------------
   FORMULARIO NATIVO
   ---------------------------------------------------------- */

.sauleda-contact-garage__form-column {
  min-width:
    0;

  padding-right:
    42px;
}


.sauleda-contact-garage__form {
  min-height:
    320px;
}


.sauleda-contact-garage__form
form {
  width:
    100%;

  margin:
    0;
}


.sauleda-contact-garage__form
.form-fields {
  width:
    100%;
}


.sauleda-contact-garage__form
.mb-3 {
  margin-bottom:
    20px !important;
}


.sauleda-contact-garage__form
.form-label {
  margin-bottom:
    8px;

  color:
    #373530;

  font-weight:
    600;
}


.sauleda-contact-garage__form
.form-control,

.sauleda-contact-garage__form
.form-select {
  width:
    100%;

  min-height:
    50px;

  border-color:
    #dedede;

  border-radius:
    7px;

  background:
    #fff;
}


.sauleda-contact-garage__form
textarea.form-control {
  min-height:
    116px;

  resize:
    vertical;
}


.sauleda-contact-garage__form
.form-control:focus,

.sauleda-contact-garage__form
.form-select:focus {
  border-color:
    #b82828;

  box-shadow:
    0 0 0 3px
    rgba(184,40,40,.10);
}


.sauleda-contact-garage__form
.buttons-wrapper {
  margin-top:
    20px;
}


.sauleda-contact-garage__form
.btn-primary {
  min-height:
    48px;

  padding:
    10px 22px;

  border-color:
    #b82828 !important;

  background:
    #b82828 !important;

  color:
    #fff !important;

  transition:
    background .22s ease,
    transform .22s ease;
}


.sauleda-contact-garage__form
.btn-primary:hover {
  background:
    #972020 !important;

  transform:
    translateY(-1px);
}


/* ----------------------------------------------------------
   CARGA
   ---------------------------------------------------------- */

.sauleda-contact-garage__loading {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-height:
    120px;

  color:
    #797973;

  font-size:
    .9rem;
}


.sauleda-contact-garage__spinner {
  width:
    22px;

  height:
    22px;

  border:
    2px solid #ddd8cf;

  border-top-color:
    #b82828;

  border-radius:
    50%;

  animation:
    sauleda-contact-garage-spin
    .75s linear infinite;
}


@keyframes sauleda-contact-garage-spin {
  to {
    transform:
      rotate(360deg);
  }
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 960px) {

  .sauleda-contact-garage__inner {
    grid-template-columns:
      minmax(210px,280px)
      minmax(0,1fr);

    gap:
      32px;

    padding:
      32px 26px 46px;
  }


  .sauleda-contact-garage__form-column {
    padding-right:
      28px;
  }

}


/* ----------------------------------------------------------
   MÓVIL
   ---------------------------------------------------------- */

@media (max-width: 700px) {

  .sauleda-contact-garage__door {
    max-height:
      calc(
        100dvh -
        var(--sauleda-contact-garage-top)
      );
  }


  .sauleda-contact-garage__inner {
    grid-template-columns:
      minmax(0,1fr);

    gap:
      38px;

    padding:
      30px 20px 50px;
  }


  .sauleda-contact-garage__form-column {
    padding-right:
      0;
  }


  .sauleda-contact-garage__close {
    top:
      12px;

    right:
      14px;
  }


  .sauleda-contact-garage__info {
    padding-top:
      20px;
  }


  .sauleda-contact-garage__info h2,
  .sauleda-contact-garage__form-title {
    padding-right:
      44px;
  }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .sauleda-contact-garage__door,
  .sauleda-contact-garage__backdrop {
    transition:
      none !important;
  }

}

/* ===== SAULEDA CONTACT GARAGE HEADER ACCESS START ===== */

/*
 * El header debe seguir siendo pulsable con la puerta abierta.
 * Así Contact puede actuar como botón de cierre.
 */
.sauleda-contact-garage {
  z-index:
    990
    !important;
}

/* ===== SAULEDA CONTACT GARAGE HEADER ACCESS END ===== */

/* ===== SAULEDA CONTACT GARAGE CLOSING START ===== */

/*
 * Mientras la puerta vuelve hacia arriba:
 *
 * - NO ocultar todavía el contenedor;
 * - NO dejarlo clicable;
 * - dejar que la transformación inversa termine.
 */

.sauleda-contact-garage.is-closing {
  visibility:
    visible
    !important;

  pointer-events:
    none
    !important;
}


/*
 * Compatible tanto con la primera versión
 * "__door" como con el prototipo 3D "__panel".
 */
.sauleda-contact-garage.is-closing
.sauleda-contact-garage__door,

.sauleda-contact-garage.is-closing
.sauleda-contact-garage__panel {

  visibility:
    visible
    !important;

  pointer-events:
    none
    !important;
}


/*
 * El backdrop sí desaparece progresivamente
 * mientras la puerta se recoge.
 */
.sauleda-contact-garage.is-closing
.sauleda-contact-garage__backdrop {
  opacity:
    0
    !important;
}

/* ===== SAULEDA CONTACT GARAGE CLOSING END ===== */