/* =========================================================

   FLOTTA AZIENDALE

   ========================================================= */



.fleet-section {

  position: relative;



  width: 100%;

  min-height: 100vh;

  height: 100vh;



  overflow: hidden;



  background: #fff;

  color: #111;

}





/* =========================================================

   CONTENIDO

   ========================================================= */



.fleet-content {

  position: relative;



  width: 100%;

  height: 100%;



  display: flex;

  flex-direction: column;



  box-sizing: border-box;



  padding-top: 75px;

}





/* =========================================================

   HEADER

   ========================================================= */



.fleet-header {

  width: min(1100px, 90%);

  margin: 0 auto;

  text-align: center;

  flex-shrink: 0;

  margin-top: 20px;

}





.fleet-label {

  display: block;



  margin-top: 25px;

  margin-bottom: 18px;



  font-size: clamp(1rem, 1.5vw, 1.35rem);



  font-weight: 400;



  letter-spacing: 0.01em;

}





.fleet-header h2 {

  margin: 0;



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



  line-height: 1.1;



  font-weight: 400;



  letter-spacing: -0.025em;

}





.fleet-header p {

  max-width: 1000px;



  margin: 18px auto 0;



  font-size: clamp(0.85rem, 1.1vw, 1rem);



  line-height: 1.45;



  font-weight: 400;

}





/* =========================================================

   SLIDER

   ========================================================= */



.fleet-slider {

  position: relative;

  width: 100%;

  height: 400px;

  flex: 1;

  margin-top: 15px;

  overflow-x: auto;

  overflow-y: hidden;

  scrollbar-width: none;

  cursor: grab;

  user-select: none;

  overscroll-behavior-x: contain;

  scroll-behavior: smooth;

  touch-action: pan-x;

}





.fleet-slider::-webkit-scrollbar {

  display: none;

}





.fleet-slider.is-dragging {

  cursor: grabbing;

}





/* =========================================================

   TRACK

   ========================================================= */



.fleet-track {

  margin-top: 15px;

  display: flex;



  align-items: center;



  width: max-content;



  height: 70%;



  min-height: 300px;



  padding: 0 25px;



  gap: 20px;



  box-sizing: border-box;

}





/* =========================================================

   VEHÍCULO

   ========================================================= */



.fleet-item {

  position: relative;



  /*

   * Cada vehículo ocupa aproximadamente 1/3

   * de la pantalla.

   */

  flex: 0 0 clamp(280px, 30vw, 430px);



  height: min(340px, 48vh);



  display: flex;



  align-items: center;



  justify-content: center;



  overflow: hidden;

}





/* =========================================================

   IMAGEN

   ========================================================= */



.fleet-item img {

  display: block;



  width: 100%;

  height: 100%;



  object-fit: contain;



  pointer-events: none;



  user-select: none;



  -webkit-user-drag: none;



  transform: scale(1);



  transition:

    transform 0.5s ease;

}





.fleet-item:hover img {

  transform: scale(1.035);

}



/* ============================================================

   FLOTTA - ANIMACIÓN DE ENTRADA

   ============================================================ */



/* Elementos inicialmente ocultos */

.fleet-section .fleet-header,

.fleet-section .fleet-slider {

  opacity: 0;

  transform: translateY(35px);

}



/* Fondo cambia de negro a claro */

/* .fleet-section.is-visible {

  background-color: #fff;

  transition: background-color 1.5s ease;

} */



/* Contenido visible */

.fleet-section.is-visible .fleet-header,

.fleet-section.is-visible .fleet-slider {

  opacity: 1;

  transform: translateY(0);



  transition:

    opacity 1.5s ease,

    transform 1.5s ease;

}



/* Encabezado primero */

.fleet-section.is-visible .fleet-header {

  transition-delay: 0.15s;

}



/* Slider después */

.fleet-section.is-visible .fleet-slider {

  transition-delay: 0.4s;

}



/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 900px) {



  .fleet-content {

    padding-top: 65px;

  }



  .fleet-header {

    width: 90%;

  }



  .fleet-label {

    margin-top: 20px;

  }



  .fleet-header h2 {

    font-size: clamp(2rem, 5vw, 3rem);

  }



  .fleet-header p {

    font-size: 0.9rem;

  }



  .fleet-slider {

    margin-top: 10px;

    flex: none;

    height: 400px;

  }



  .fleet-track {

    min-height: 280px;



    padding: 0 20px;



    gap: 15px;

  }



  .fleet-item {

    flex-basis: 34vw;



    height: 280px;

  }

}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 600px) {



  .fleet-section {

    min-height: 100vh;

    height: auto;

  }



  .fleet-content {

    height: auto;

    min-height: 100vh;



    padding-top: 70px;

    padding-bottom: 20px;

  }



  .fleet-header {

    width: calc(100% - 30px);

  }



  .fleet-label {

    margin-top: 15px;

    margin-bottom: 12px;



    font-size: 1rem;

  }



  .fleet-header h2 {

    font-size: 2.15rem;

  }



  .fleet-header p {

    margin-top: 15px;



    font-size: 0.85rem;



    line-height: 1.4;

  }



  .fleet-slider {

    margin-top: 10px;

    flex: none;

    height: 300px;

  }



  .fleet-track {

    height: 100%;



    min-height: 0;



    padding: 0 15px;



    gap: 10px;

  }



  .fleet-item {

    flex-basis: 78vw;



    height: 270px;

  }

}











/* ============================================================

   SECCIÓN - PREMIUM SERVICES

============================================================ */



.premium-section {

  position: relative;

  min-height: 100vh;

  width: 100%;

  overflow: hidden;

  background: #080808;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

}



.premium-background {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(

      rgba(0, 0, 0, 0.18),

      rgba(0, 0, 0, 0.45)

    ),

    url("assets/premium-background.jpg");



  background-size: cover;

  background-position: center;

  filter: grayscale(100%);

  transform: scale(1.02);

  z-index: 0;

}



.premium-content {

  position: relative;

  z-index: 2; 

  width: min(1400px, 100%);

  min-height: 100vh;

  margin: 0 auto;

   padding: 110px 40px 70px;

  display: flex;

  flex-direction: column;

  box-sizing: border-box; 

}





/* =========================================================

   GRID

   ========================================================= */



.premium-grid {

  width: 100%;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 72px 42px;

}



/* =========================================================

   CARD

   ========================================================= */



.premium-card {

  position: relative;

  min-width: 0;

  min-height: 0;

  overflow: hidden;

  width: 100%;

  height: 385px;

  border-radius: 12px;

  background-image: var(--card-image);

  background-size: cover;

  background-position: center;

  isolation: isolate;

  cursor: pointer;

  transition:

    transform 0.45s ease,

    border-color 0.45s ease;

}



/* =========================================================

   OVERLAY

   ========================================================= */



.premium-card-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(

      to bottom,

      rgba(0, 0, 0, 0.05) 0%,

      rgba(0, 0, 0, 0.08) 35%,

      rgba(0, 0, 0, 0.38) 60%,

      rgba(0, 0, 0, 0.88) 100%

    );



  pointer-events: none;

  transition:

    background 0.45s ease;

}



/* ============================================================

   PREMIUM SERVICES

   SOLO ANIMACIÓN DEL CONTENIDO

   EL FONDO NO CAMBIA

   ============================================================ */



/* Cards inicialmente ocultas */

.premium-section .premium-card {

  opacity: 0;

  transform: translateY(35px);

}



/* Cards visibles */

.premium-section.is-visible .premium-card {

  opacity: 1;

  transform: translateY(0);



  transition:

    opacity 1.5s ease,

    transform 1.5s ease;

}



/* Entrada escalonada */

.premium-section.is-visible .premium-card:nth-child(1) {

  transition-delay: 0.15s;

}



.premium-section.is-visible .premium-card:nth-child(2) {

  transition-delay: 0.35s;

}



.premium-section.is-visible .premium-card:nth-child(3) {

  transition-delay: 0.55s;

}



.premium-section.is-visible .premium-card:nth-child(4) {

  transition-delay: 0.75s;

}





/* =========================================================

   CARD CONTENT

   ========================================================= */



.premium-card-content {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 2;

  padding: 0 14px 14px;

  color: #fff;

}





/* =========================================================

   TITLE

   ========================================================= */



.premium-card h3 {

  margin: 0 0 10px;

  font-size: 1.15rem;

  line-height: 1.25;

  font-weight: 400;

  letter-spacing: -0.01em;

  color: #fff;

}





/* =========================================================

   DESCRIPTION

   ========================================================= */



.premium-card p {

  margin: 0;



  max-width: 330px;



  font-size: 0.78rem;



  line-height: 1.25;



  font-weight: 400;



  color: rgba(255, 255, 255, 0.95);

}





/* =========================================================

   HOVER

   ========================================================= */



.premium-card:hover {

  transform: translateY(-2px);



  border-color: rgba(255, 255, 255, 0.35);

}





.premium-card:hover .premium-card-overlay {

  background:

    linear-gradient(

      to bottom,

      rgba(0, 0, 0, 0.03) 0%,

      rgba(0, 0, 0, 0.06) 35%,

      rgba(0, 0, 0, 0.34) 60%,

      rgba(0, 0, 0, 0.82) 100%

    );

}





/* =========================================================

   RESPONSIVE - TABLET

   ========================================================= */



@media (max-width: 900px) {



  .premium-content {

    width: calc(100vw - 30px);



    padding-top: 70px;

    padding-bottom: 25px;

  }



  .premium-grid {

    gap: 16px;



    height: min(600px, calc(100vh - 100px));

  }



  .premium-card-content {

    padding: 0 14px 14px;

  }



  .premium-card h3 {

    font-size: 1rem;

  }



  .premium-card p {

    font-size: 0.72rem;

  }

}





/* =========================================================

   RESPONSIVE - MOBILE

   ========================================================= */



@media (max-width: 650px) {



  .premium-section {

    min-height: auto;

    height: auto;



    padding: 80px 0 30px;

  }



  .premium-content {

    width: calc(100vw - 24px);



    height: auto;



    padding: 0;

  }



  .premium-grid {

    grid-template-columns: 1fr;

    grid-template-rows: none;



    gap: 14px;



    height: auto;

  }



  .premium-card {

    min-height: 260px;

  }



  .premium-card h3 {

    font-size: 1.1rem;

  }



  .premium-card p {

    max-width: 90%;



    font-size: 0.78rem;

  }

}









/* ============================================================

   SECCIÓN - PARTNER Y COLABORACIONES

   ============================================================ */



.partner-section {

  position: relative;



  width: 100%;

  min-height: 100vh;

  height: 100vh;



  overflow: hidden;



  background: #050505;

  color: #fff;

}





/* ============================================================

   BACKGROUND

   ============================================================ */



.partner-background {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(

      rgba(0, 0, 0, 0.92),

      rgba(0, 0, 0, 0.96)

    ),

    url("assets/partner-background.jpg");



  background-size: cover;

  background-position: center;

  filter: grayscale(100%);

  transform: scale(1.02);

  z-index: 0;

}





.partner-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    radial-gradient(

      circle at center,

      rgba(255, 255, 255, 0.03),

      transparent 60%

    );



  pointer-events: none;

}





/* ============================================================

   CONTENT

   ============================================================ */



.partner-content {

  position: relative;

  z-index: 2;

  width: min(1200px, 88vw);

  height: 100%;

  margin: 0 auto;

  padding:

    calc(var(--header-height) + 40px)

    0

    40px;



  box-sizing: border-box;



  display: flex;



  flex-direction: column;



  justify-content: center;

}





/* ============================================================

   HEADER

   ============================================================ */



.partner-header {

  width: 100%;

  margin-bottom: 45px;

  text-align: center;

}





.partner-label {

  display: block;

  margin-bottom: 14px;

  font-size: 0.7rem;

  letter-spacing: 0.35em;

  color: rgba(255, 255, 255, 0.55);

  text-align: center;

}





.partner-header h2 {

  margin: 0;

  font-size: clamp(2.4rem, 4vw, 3.8rem);

  font-weight: 300;

  letter-spacing: -0.03em;

  line-height: 1.1;

  text-align: center;

}





/* ============================================================

   GRID

   ============================================================ */



.partner-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  width: 100%;

}



/* ============================================================

   PARTNER - ANIMACIÓN DE ENTRADA

   EL FONDO NO CAMBIA

   ============================================================ */



/* Estado inicial */

.partner-section .partner-header,

.partner-section .partner-card {

  opacity: 0;

  transform: translateY(35px);

}



/* Estado visible */

.partner-section.is-visible .partner-header,

.partner-section.is-visible .partner-card {

  opacity: 1;

  transform: translateY(0);



  transition:

    opacity 1.5s ease,

    transform 1.5s ease;

}



/* Header */

.partner-section.is-visible .partner-header {

  transition-delay: 0.15s;

}



/* Card 1 */

.partner-section.is-visible .partner-card:nth-child(1) {

  transition-delay: 0.35s;

}



/* Card 2 */

.partner-section.is-visible .partner-card:nth-child(2) {

  transition-delay: 0.55s;

}





/* ============================================================

   CARD

   ============================================================ */



.partner-card {

  position: relative;

  min-height: 420px;

  padding: 30px;

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(8px);

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  transition:

    transform 0.4s ease,

    border-color 0.4s ease,

    background 0.4s ease;

}





.partner-card:hover {

  transform: translateY(-4px);



  border-color: rgba(255, 255, 255, 0.65);



  background: rgba(15, 15, 15, 0.8);

}



/* ============================================================

   CARD HEADER

   ============================================================ */



.partner-card-header {

  position: relative;



  min-height: 75px;



  display: flex;



  align-items: flex-start;



  justify-content: space-between;



  padding-bottom: 20px;



  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}





.partner-card-number {

  font-size: 0.6rem;



  letter-spacing: 0.15em;



  color: rgba(255, 255, 255, 0.35);

}





/* ============================================================

   LOGO PARTNER

   ============================================================ */



.partner-card-logo {

  position: absolute;



  top: -5px;

  right: 0;



  width: 115px;

  height: 65px;



  display: flex;



  align-items: center;



  justify-content: flex-end;

}





.partner-card-logo img {

  display: block;



  max-width: 100%;

  max-height: 100%;



  width: auto;

  height: auto;



  object-fit: contain;

}





/* ============================================================

   CARD CONTENT

   ============================================================ */



.partner-card-content {

  flex: 1;



  padding-top: 35px;

}





.partner-card-content h3 {

  margin: 0 0 22px;



  font-size: clamp(1.8rem, 2.8vw, 2.6rem);



  line-height: 1.1;



  font-weight: 400;



  letter-spacing: -0.025em;



  color: #fff;

}





.partner-card-content p {

  max-width: 600px;



  margin: 0;



  font-size: 0.95rem;



  line-height: 1.65;



  color: rgba(255, 255, 255, 0.75);

}





/* ============================================================

   PENDING

   ============================================================ */



.partner-pending {

  display: block;



  margin-top: 25px;



  font-size: 0.65rem;



  letter-spacing: 0.15em;



  text-transform: uppercase;



  color: rgba(255, 255, 255, 0.45);

}





/* ============================================================

   CARD FOOTER

   ============================================================ */



.partner-card-footer {

  margin-top: auto;



  padding-top: 25px;



  /* border-top: 1px solid rgba(255, 255, 255, 0.2); */

}





/* ============================================================

   LINK

   ============================================================ */



.partner-link {

  display: inline-block;

  margin-top: 10px;

  margin-bottom: 18px;

  padding: 10px;

  color: rgba(255, 255, 255, 0.75);

  border: 1px solid rgba(255, 255, 255, 0.75);

  border-radius: 5px;

  width: 185px;

  text-decoration: none;

  font-size: 0.8rem;

  letter-spacing: 0.05em;

  transition: color 0.3s ease;

}





.partner-link:hover {

  color: #fff;

  border-color: #fff;

}





/* ============================================================

   BADGE

   ============================================================ */



.partner-badge {

  display: inline-block;

  padding: 4px 14px;

  margin-bottom: 18px;

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 20px;

  font-size: 0.6rem;

  letter-spacing: 0.15em;

  color: rgba(255, 255, 255, 0.5);

}





/* ============================================================

   CONTACT

   ============================================================ */



.partner-contact {

  display: flex;

  flex-direction: column;

  gap: 4px;

  font-size: 0.8rem;

  line-height: 1.4;

  color: rgba(255, 255, 255, 0.5);

}





.partner-contact a {

  color: rgba(255, 255, 255, 0.5);

  text-decoration: none;

  transition: color 0.3s ease;

}





.partner-contact a:hover {

  color: #fff;

}





/* ============================================================

   RESPONSIVE - TABLET

   ============================================================ */



@media (max-width: 1024px) {



  .partner-section {

    height: auto;



    min-height: 100vh;

  }



  .partner-content {

    height: auto;



    padding-top: calc(var(--header-height) + 30px);



    padding-bottom: 50px;



    justify-content: flex-start;

  }



  .partner-grid {

    grid-template-columns: 1fr;

  }



}





/* ============================================================

   RESPONSIVE - MOBILE

   ============================================================ */



@media (max-width: 768px) {



  .partner-header {

    margin-bottom: 35px;

  }



  .partner-header h2 {

    font-size: clamp(2rem, 6vw, 2.6rem);

  }



  .partner-card {

    min-height: 400px;



    padding: 22px 20px;

  }



  .partner-card-content {

    padding-top: 28px;

  }



  .partner-card-content h3 {

    font-size: 1.8rem;

  }



  .partner-card-content p {

    font-size: 0.85rem;

  }



  .partner-contact {

    font-size: 0.75rem;

  }



}





/* ============================================================

   RESPONSIVE - SMALL MOBILE

   ============================================================ */



@media (max-width: 480px) {



  .partner-content {

    width: calc(100% - 30px);

  }



  .partner-card {

    padding: 18px 16px;

  }



  .partner-card-content h3 {

    font-size: 1.6rem;

  }



  .partner-card-content p {

    font-size: 0.82rem;

  }



  .partner-contact {

    font-size: 0.7rem;

  }



  .partner-link {

    font-size: 0.75rem;

  }



}





/* ============================================================

   REDUCED MOTION

   ============================================================ */



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



  .partner-card {

    transition: none;

  }



  .partner-card:hover {

    transform: none;

  }



}























/* ============================================================

   RESPONSIVE - PREMIUM, PARTNER Y CONTACT

   ============================================================ */



@media (max-width: 1024px) {

  .premium-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .partner-grid {

    grid-template-columns: 1fr;

  }



  .contact-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .premium-section,

  .partner-section,

  .contact-section {

    height: auto;

    min-height: 100vh;

  }



  .premium-content,

  .partner-content,

  .contact-content {

    padding-top: calc(var(--header-height) + 30px);

    padding-bottom: 30px;

    justify-content: flex-start;

  }

}



@media (max-width: 768px) {

  .premium-header h2,

  .partner-header h2,

  .contact-header h2 {

    font-size: clamp(2rem, 6vw, 2.6rem);

  }



  .premium-grid {

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }



  .premium-card {

    padding: 20px 18px;

  }



  .premium-card h3 {

    font-size: 0.95rem;

  }



  .premium-card p {

    font-size: 0.78rem;

  }



  .partner-card {

    padding: 22px 20px;

  }



  .partner-card-header h3 {

    font-size: 1.1rem;

  }



  .contact-grid {

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }



  .contact-card {

    padding: 18px 16px;

    min-height: 100px;

  }



  .contact-card h3 {

    font-size: 0.8rem;

  }



  .contact-footer {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    color: #fff;

  }



  .contact-footer-info {

    font-size: 0.55rem;

    gap: 8px 16px;

  }



  .contact-footer-buttons {

    width: 100%;

  }



  .btn-whatsapp,

  .btn-call {

    flex: 1;

    justify-content: center;

    padding: 8px 14px;

    font-size: 0.6rem;

  }

}



@media (max-width: 480px) {

  .premium-grid {

    grid-template-columns: 1fr;

  }



  .contact-grid {

    grid-template-columns: 1fr;

  }



  .premium-card {

    padding: 18px 16px;

  }



  .contact-card {

    min-height: 80px;

  }



  .partner-card-header h3 {

    font-size: 1rem;

  }



  .partner-card p {

    font-size: 0.82rem;

  }



  .partner-contact {

    font-size: 0.7rem;

  }



  .contact-footer-buttons {

    flex-direction: column;

  }



  .btn-whatsapp,

  .btn-call {

    width: 100%;

    justify-content: center;

  }

}



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

  .premium-card,

  .partner-card,

  .contact-card {

    transition: none;

  }



  .premium-card:hover,

  .partner-card:hover,

  .contact-card:hover {

    transform: none;

  }

}





/* ============================================================

   SECCIÓN - CONTATTI

   ============================================================ */



.contact-section {

  position: relative;

  width: 100%;

  min-height: 100vh;

  height: auto;

  overflow: hidden;

  background: #050505;

  color: #fff;

  z-index: 1;

}





/* ============================================================

   BACKGROUND

   ============================================================ */



.contact-background {

  position: absolute;

  inset: 0;



  background-image:

    linear-gradient(

      rgba(0, 0, 0, 0.93),

      rgba(0, 0, 0, 0.98)

    ),

    url("assets/contact-backgrou.jpg");



  background-size: cover;

  background-position: center;



  filter: grayscale(100%);



  transform: scale(1.02);



  z-index: 0;

}





.contact-overlay {

  position: absolute;

  inset: 0;



  background:

    radial-gradient(

      circle at 25% 50%,

      rgba(255, 255, 255, 0.045),

      transparent 45%

    );



  z-index: 1;



  pointer-events: none;

}





/* ============================================================

   CONTENT

   ============================================================ */



.contact-content {

  position: relative;

  z-index: 2;



  width: min(1250px, 90vw);



  min-height: 100vh;

  height: auto;



  margin: 0 auto;



  padding:

    calc(var(--header-height) + 35px)

    0

    30px;



  box-sizing: border-box;



  display: flex;

  flex-direction: column;

  justify-content: center;

}



/* ============================================================

   HEADER

   ============================================================ */



.contact-header {

  position: relative;

  z-index: 3;

  margin-bottom: 20px;

}



.contact-label {

  display: block;

  font-size: 0.68rem;

  letter-spacing: 0.35em;

  color: rgba(255, 255, 255, 0.65);

  margin-bottom: 10px;

  text-transform: uppercase;

}



.contact-header h2 {

  display: block;

  margin: 0;

  max-width: 800px;



  font-size: clamp(

    2.3rem,

    4vw,

    3.7rem

  );



  line-height: 1.05;

  font-weight: 300;

  letter-spacing: -0.035em;



  color: #fff;

}



/* ============================================================

   MAIN GRID

   ============================================================ */



.contact-main {

  display: grid;  

  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);

  gap: 1px;

  width: 100%;

}



/* ============================================================

   LEFT PANEL

   ============================================================ */



.contact-form-panel {

  position: relative;

  padding: 40px 28px;

  border: 1px solid rgba(255, 255, 255, 0.22);

  /* border-radius: 16px 0 0 16px 0; */

  background-image:

    linear-gradient(

      rgba(31, 30, 30, 0.93),

      rgba(7, 7, 7, 0.98)

    ),

    url("assets/contact-background.jpg");



  background-size: cover;

  background-position: center;

  /* background:

    rgba(0, 0, 0, 0.52); */

  backdrop-filter: blur(12px);

  display: flex;

  flex-direction: column;

  justify-content: center;

}



/* ============================================================

   FORM HEADER

   ============================================================ */



.contact-form-header {

  margin-bottom: 20px;

}





.contact-form-label {

  display: block;

  margin-bottom: 7px;

  font-size: 0.58rem;

  letter-spacing: 0.25em;

  color: rgba(255, 255, 255, 0.4);

  text-transform: uppercase;

}





.contact-form-header h3 {

  margin: 0;

  font-size: clamp(

    1.5rem,

    2.2vw,

    2rem

  );



  line-height: 1.1;

  font-weight: 300;

  letter-spacing: -0.025em;

}



/* ============================================================

   FORM ROW

   ============================================================ */



.contact-form-row {

  position: relative;

  display: flex;

  align-items: center;

  gap: 20px;

  min-height: 78px;

  padding: 16px 48px 16px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.15);

  color: #fff;

  text-decoration: none;

  transition:

    padding-left 0.35s ease,

    border-color 0.35s ease,

    background 0.35s ease;

}





.contact-form-row:last-child {

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}





.contact-form-row:hover {

  padding-left: 8px;

  border-color: rgba(255, 255, 255, 0.45);

  background:

    linear-gradient(

      90deg,

      rgba(255, 255, 255, 0.045),

      transparent

    );

}





/* ============================================================

   NUMBER

   ============================================================ */



.contact-form-number {

  flex: 0 0 32px;

  font-size: 0.58rem;

  letter-spacing: 0.15em;

  color: rgba(255, 255, 255, 0.28);

}



/* ============================================================

   FIELD

   ============================================================ */



.contact-form-field {

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 5px;

}





.contact-form-field-label {

  font-size: 0.6rem;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.42);

  text-transform: uppercase;

}





.contact-form-value {

  font-size: clamp(

    0.85rem,

    1.3vw,

    1rem

  );



  font-weight: 400;



  color: #fff;



  word-break: break-word;

}





/* ============================================================

   ARROW

   ============================================================ */



.contact-form-arrow {

  position: absolute;



  right: 4px;



  top: 50%;



  transform: translateY(-50%);



  font-size: 1.1rem;



  color: rgba(255, 255, 255, 0.35);



  transition:

    color 0.3s ease,

    transform 0.3s ease;

}





.contact-form-row:hover .contact-form-arrow {

  color: #fff;



  transform:

    translate(3px, -50%);

}





/* ============================================================

   RIGHT - INFORMATION PANEL

   ============================================================ */



.contact-info-panel {

  position: relative;

  padding: 32px;

  background: #fff;

  color: #050505;

  border-radius: 0 16px 16px 0;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 390px;

  box-shadow:

    0 20px 70px rgba(0, 0, 0, 0.35);

}





/* ============================================================

   LOGO

   ============================================================ */



.contact-logo {

  display: flex;



  align-items: center;



  justify-content: flex-start;



  margin-bottom: 28px;

}





.contact-logo img {

  display: block;



  width: 80%;

  /* width: min(230px, 75%); */

  margin: 0 auto;



  height: auto;



  /*

    Si tu LogoOficial.png es blanco,

    este filtro lo convierte a oscuro

    sobre el fondo blanco.

  */



  filter: brightness(0);

}





/* ============================================================

   COMPANY INFO

   ============================================================ */



.contact-company-info {

  display: flex;



  flex-direction: column;



  flex: 1;

}





.contact-info-label {

  font-size: 0.58rem;



  letter-spacing: 0.25em;



  color: rgba(0, 0, 0, 0.42);



  margin-bottom: 12px;

}





.contact-address {

  display: flex;



  flex-direction: column;



  gap: 2px;



  margin-bottom: 20px;

}





.contact-address strong {

  font-size: clamp(

    1.25rem,

    2vw,

    1.65rem

  );



  line-height: 1.05;



  font-weight: 500;



  letter-spacing: -0.02em;

}





.contact-address span {

  font-size: 0.8rem;



  color: rgba(0, 0, 0, 0.55);



  margin-top: 4px;

}





/* ============================================================

   COMPANY DETAILS

   ============================================================ */



.contact-company-details {

  display: flex;



  flex-direction: column;



  gap: 3px;



  padding-top: 16px;



  border-top: 1px solid rgba(0, 0, 0, 0.12);



  font-size: 0.67rem;



  letter-spacing: 0.08em;



  color: rgba(0, 0, 0, 0.5);

}





/* ============================================================

   PHONE

   ============================================================ */



.contact-phone {

  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  gap: 20px;



  margin-top: 24px;



  padding-top: 18px;



  border-top: 1px solid rgba(0, 0, 0, 0.12);



  color: #050505;



  text-decoration: none;

}





.contact-phone-label {

  font-size: 0.58rem;



  letter-spacing: 0.2em;



  color: rgba(0, 0, 0, 0.45);

}





.contact-phone strong {

  font-size: clamp(

    1.35rem,

    2vw,

    1.8rem

  );



  line-height: 0.95;



  font-weight: 500;



  letter-spacing: -0.03em;



  text-align: right;

}





/* ============================================================

   BUTTONS

   ============================================================ */



.contact-info-buttons {

  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 8px;



  margin-top: 28px;

}





.contact-button {

  display: flex;



  align-items: center;



  gap: 8px;



  min-height: 42px;



  padding: 10px 13px;



  border-radius: 6px;



  text-decoration: none;



  font-size: 0.62rem;



  font-weight: 600;



  letter-spacing: 0.08em;



  transition:

    transform 0.3s ease,

    background 0.3s ease;

}





.contact-button i {

  font-size: 0.9rem;

}





.contact-button-arrow {

  margin-left: auto;



  font-size: 0.9rem;

}





/* ============================================================

   WHATSAPP

   ============================================================ */



.contact-whatsapp {

  background: #050505;



  color: #fff;

}





.contact-whatsapp:hover {

  transform: translateY(-2px);



  background: #222;

}





/* ============================================================

   CALL

   ============================================================ */



.contact-call {

  border: 1px solid #050505;



  background: transparent;



  color: #050505;

}





.contact-call:hover {

  transform: translateY(-2px);



  background: #050505;



  color: #fff;

}





/* ============================================================

   FOOTER

   ============================================================ */



.contact-footer {

  position: relative;

  z-index: 3;



  display: flex;

  align-items: center;

  justify-content: space-between;



  gap: 20px;



  width: 100%;



  margin-top: 22px;

  padding-top: 15px;



  border-top: 1px solid rgba(255, 255, 255, 0.18);



  font-size: 0.62rem;

  letter-spacing: 0.08em;



  color: rgba(255, 255, 255, 0.55);

}





/* ============================================================

   RESPONSIVE - 1024px

   ============================================================ */



@media (max-width: 1024px) {



  .contact-section {

    height: auto;



    min-height: 100vh;



    overflow: visible;

  }



  .contact-content {

    height: auto;



    padding-top:

      calc(var(--header-height) + 35px);



    padding-bottom: 35px;



    justify-content: flex-start;

  }



  .contact-main {

    grid-template-columns: 1fr;

  }



  .contact-info-panel {

    min-height: 380px;

  }



}





/* ============================================================

   RESPONSIVE - 768px

   ============================================================ */



@media (max-width: 768px) {



  .contact-content {

    width: min(92vw, 600px);

  }



  .contact-header {

    margin-bottom: 24px;

  }



  .contact-header h2 {

    font-size: clamp(

      2rem,

      8vw,

      2.8rem

    );

  }



  .contact-form-panel {

    padding: 22px 20px;

  }



  .contact-form-row {

    gap: 12px;



    min-height: 72px;



    padding-right: 35px;

  }



  .contact-info-panel {

    padding: 26px 22px;

  }



  .contact-logo img {

    width: 190px;

  }



  .contact-footer {

    flex-direction: column;



    align-items: flex-start;



    gap: 7px;

  }



}





/* ============================================================

   RESPONSIVE - 520px

   ============================================================ */



@media (max-width: 520px) {



  .contact-content {

    width: 92vw;

  }



  .contact-main {

    gap: 14px;

  }



  .contact-form-panel {

    padding: 20px 16px;

  }



  .contact-form-header h3 {

    font-size: 1.4rem;

  }



  .contact-form-number {

    flex-basis: 24px;

  }



  .contact-form-field-label {

    font-size: 0.52rem;

  }



  .contact-form-value {

    font-size: 0.78rem;

  }



  .contact-info-panel {

    padding: 24px 18px;

  }



  .contact-logo {

    margin-bottom: 22px;

  }



  .contact-logo img {

    width: 170px;

  }



  .contact-phone strong {

    font-size: 1.45rem;

  }



  .contact-info-buttons {

    grid-template-columns: 1fr;



    gap: 8px;

  }



}





/* ============================================================

   REDUCED MOTION

   ============================================================ */



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



  .contact-form-row,

  .contact-form-arrow,

  .contact-button {

    transition: none;

  }



  .contact-form-row:hover {

    padding-left: 0;

  }



  .contact-form-row:hover .contact-form-arrow {

    transform: translateY(-50%);

  }



  .contact-button:hover {

    transform: none;

  }



}