.elementor-3847 .elementor-element.elementor-element-6f3c7da{--display:flex;--min-height:737px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-218px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:113px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3847 .elementor-element.elementor-element-6f3c7da:not(.elementor-motion-effects-element-type-background), .elementor-3847 .elementor-element.elementor-element-6f3c7da > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://aliauto.com/wp-content/uploads/2025/10/528A7027-scaled.jpg");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-3847 .elementor-element.elementor-element-f354a16{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3847 .elementor-element.elementor-element-0e26105{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3847 .elementor-element.elementor-element-04025bb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );}.elementor-3847 .elementor-element.elementor-element-c676bc8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-3847 .elementor-element.elementor-element-6f3c7da:not(.elementor-motion-effects-element-type-background), .elementor-3847 .elementor-element.elementor-element-6f3c7da > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://aliauto.com/wp-content/uploads/2025/10/528A7027-scaled.jpg");}.elementor-3847 .elementor-element.elementor-element-6f3c7da{--margin-top:-140px;--margin-bottom:0px;--margin-left:00px;--margin-right:00px;--padding-top:69px;--padding-bottom:49px;--padding-left:-1px;--padding-right:-1px;}.elementor-3847 .elementor-element.elementor-element-c676bc8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-0e26105 *//* BOTONES – forzar rojo #ff0000 sin fondo */
button,
button[type="submit"],
input[type="submit"],
.wp-element-button,
.elementor-button,
.e-btn,
.wpcf7-submit,
.frm_button_submit {
  background: transparent !important;          /* sin fondo */
  border: 2px solid #ff0000 !important;        /* borde rojo */
  color: #ff0000 !important;                   /* texto rojo */
  -webkit-text-fill-color: #ff0000 !important; /* Safari */
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Estados hover/focus/active también en rojo */
button:hover,
button:focus,
button:active,
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="submit"]:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-element-button:active,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active,
.e-btn:hover,
.e-btn:focus,
.e-btn:active,
.wpcf7-submit:hover,
.wpcf7-submit:focus,
.wpcf7-submit:active,
.frm_button_submit:hover,
.frm_button_submit:focus,
.frm_button_submit:active {
  background: transparent !important;          /* sigue sin fondo */
  border-color: #ff0000 !important;
  color: #ff0000 !important;
  -webkit-text-fill-color: #ff0000 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Si tu tema fuerza gradientes/colores por variables */
:root {
  --e-global-color-primary: #ff0000 !important;
  --e-global-color-accent:  #ff0000 !important;
}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Aliauto · Contacto</title>
  <style>
    @font-face {
      font-family: "HK Grotesk";
      src: url("/fonts/HKGrotesk-Regular.woff2") format("woff2"),
           url("/fonts/HKGrotesk-Regular.woff") format("woff");
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "HK Grotesk";
      src: url("/fonts/HKGrotesk-Bold.woff2") format("woff2"),
           url("/fonts/HKGrotesk-Bold.woff") format("woff");
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "HK Grotesk";
      src: url("/fonts/HKGrotesk-LightItalic.woff2") format("woff2"),
           url("/fonts/HKGrotesk-LightItalic.woff") format("woff");
      font-weight: 300; font-style: italic; font-display: swap;
    }

    /* Colores: fondo blanco total */
    :root {
      --bg: #ffffff;
      --red: #ff0000;
      --shadow: rgba(0, 0, 0, 0.05); /* texto fondo muy claro */
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      background: var(--bg);
      color: var(--red);
      font-family: "HK Grotesk", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }

    section.contacto {
      position: relative;
      width: 100%;
      min-height: 100vh;
      padding: clamp(24px,5vw,80px) clamp(16px,5vw,100px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff; /* fondo fijo blanco */
      isolation: isolate;
      overflow: hidden;
    }

    /* Carrusel de fondo en gris claro */
    .carrusel {
      position: absolute;
      top: 10%;
      left: 0;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }
    .carrusel span {
      display: inline-block;
      font-size: clamp(80px,14vw,200px);
      letter-spacing: -0.02em;
      color: var(--shadow);
      animation: mover 30s linear infinite;
      margin-right: 2vw;
    }
    .carrusel .normal { font-weight: 700; }
    .carrusel .fina { font-weight: 300; font-style: italic; }
    @keyframes mover { from { transform: translateX(0) } to { transform: translateX(-50%) } }

    /* Contenido */
    .contenido {
      position: relative;
      z-index: 2;
      max-width: 115ch;
      margin-top: 10vh;
      animation: aparecerIzq 1.2s ease forwards;
      opacity: 0;
    }
    h1 {
      font-weight: 700;
      font-size: clamp(72px,10vw,160px);
      line-height: .95;
      margin-bottom: .3em;
      color: var(--red);
      animation: aparecerArriba 1.2s ease forwards;
      opacity: 0;
    }
    h2 {
      font-weight: 400;
      font-size: clamp(22px,2vw,32px);
      margin-bottom: 1.5em;
      color: var(--red);
      animation: aparecerIzq 1.2s ease forwards;
      opacity: 0;
    }
    p {
      font-size: clamp(16px,1.2vw + 12px,20px);
      margin-bottom: 2em;
      color: var(--red);
      max-width: 80ch;
    }

    /* Formulario */
    form {
      display: grid;
      gap: 1em;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      animation: aparecerIzq 1.2s ease forwards;
      opacity: 0;
    }

    input, select, textarea {
      font-family: "HK Grotesk", sans-serif;
      font-size: 1rem;
      padding: .9em;
      border: 2px solid var(--red);
      background: #fff; /* fondo blanco en inputs */
      color: var(--red);
      outline: none;
      border-radius: 4px;
      transition: all .3s ease;
      appearance: none;
      -webkit-appearance: none;
      accent-color: var(--red);
    }
    ::placeholder { color: rgba(255,0,0,.7); opacity: 1; }
    input:focus, select:focus, textarea:focus {
      border-color: var(--red);
      background: rgba(255,0,0,.05);
      color: var(--red);
    }
    textarea { grid-column: 1 / -1; min-height: 120px; resize: vertical; }

    /* Botón */
    button, input[type="submit"] {
      grid-column: 1 / -1;
      padding: 1em;
      font-family: "HK Grotesk", sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: #fff;
      background: #ff0000;
      border: 2px solid #ff0000;
      border-radius: 4px;
      cursor: pointer;
      transition: filter .25s ease, transform .2s ease;
      appearance: none;
      -webkit-appearance: none;
      accent-color: #ff0000;
    }
    button:hover, input[type="submit"]:hover {
      filter: brightness(1.1);
      transform: scale(1.02);
    }

    /* Animaciones */
    @keyframes aparecerArriba {
      from { transform: translateY(-40px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    @keyframes aparecerIzq {
      from { transform: translateX(-40px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @media (max-width:900px) {
      h1 { font-size: clamp(50px,12vw,88px); }
      h2 { font-size: clamp(18px,5vw,24px); }
      .carrusel span { font-size: clamp(60px,20vw,140px); }
    }
  </style>
</head>
<body>
  <section class="contacto" aria-label="Formulario de contacto Aliauto">
    <div class="carrusel">
      <span class="normal">¡Envíanos tu mensaje!</span>
      <span class="fina">¡Envíanos tu mensaje!</span>
      <span class="normal">¡Envíanos tu mensaje!</span>
      <span class="fina">¡Envíanos tu mensaje!</span>
      <span class="normal">¡Envíanos tu mensaje!</span>
      <span class="fina">¡Envíanos tu mensaje!</span>
    </div>

    <h1>Contacto</h1>
    <div class="contenido">
      <h2>¡Envíanos tu mensaje!</h2>
      <p>Envíanos un mensaje completando el siguiente formulario.<br>
      Uno de nuestros asesores estará encantado de ponerse en contacto contigo.</p>

      <form action="https://formsubmit.co/aliauto@aliauto.com" method="POST" target="_blank">
        <input type="text" name="_honey" style="display:none">
        <input type="hidden" name="_captcha" value="false">
        <input type="hidden" name="_subject" value="Nuevo mensaje desde el formulario de Aliauto">
        <input type="hidden" name="_template" value="table">

        <input type="text" name="nombre" placeholder="Nombre" required>
        <input type="text" name="apellidos" placeholder="Apellidos" required>
        <input type="text" name="empresa" placeholder="Empresa">
        <input type="text" name="funcion" placeholder="Función">
        <input type="email" name="email" placeholder="Email" required>
        <input type="tel" name="telefono" placeholder="Teléfono">
        <input type="text" name="pais" placeholder="País">
        <input type="text" name="cp" placeholder="Código postal">
        <input type="text" name="area" placeholder="Área de interés">
        <textarea name="mensaje" placeholder="Mensaje"></textarea>

        <button type="submit">Enviar</button>
      </form>

      <noscript>
        <p style="margin-top:12px;color:#ff0000">
          Activa JavaScript para enviar el formulario o
          <a href="mailto:aliauto@aliauto.com" style="color:#ff0000">escríbenos por email</a>.
        </p>
      </noscript>
    </div>
  </section>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      document.querySelector('h1').style.opacity = 1;
      document.querySelector('.contenido').style.opacity = 1;
      document.querySelector('h2').style.opacity = 1;
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Aliauto · Contacto</title>
  <style>
    @font-face {
      font-family: "HK Grotesk";
      src: url("/fonts/HKGrotesk-Regular.woff2") format("woff2"),
           url("/fonts/HKGrotesk-Regular.woff") format("woff");
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "HK Grotesk";
      src: url("/fonts/HKGrotesk-Bold.woff2") format("woff2"),
           url("/fonts/HKGrotesk-Bold.woff") format("woff");
      font-weight: 700; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "HK Grotesk";
      src: url("/fonts/HKGrotesk-LightItalic.woff2") format("woff2"),
           url("/fonts/HKGrotesk-LightItalic.woff") format("woff");
      font-weight: 300; font-style: italic; font-display: swap;
    }

    /* Colores: fondo blanco total */
    :root {
      --bg: #ffffff;
      --red: #ff0000;
      --shadow: rgba(0, 0, 0, 0.05); /* texto fondo muy claro */
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      background: var(--bg);
      color: var(--red);
      font-family: "HK Grotesk", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
      overflow-x: hidden;
    }

    section.contacto {
      position: relative;
      width: 100%;
      min-height: 100vh;
      padding: clamp(24px,5vw,80px) clamp(16px,5vw,100px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff; /* fondo fijo blanco */
      isolation: isolate;
      overflow: hidden;
    }

    /* Carrusel de fondo en gris claro */
    .carrusel {
      position: absolute;
      top: 10%;
      left: 0;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }
    .carrusel span {
      display: inline-block;
      font-size: clamp(80px,14vw,200px);
      letter-spacing: -0.02em;
      color: var(--shadow);
      animation: mover 30s linear infinite;
      margin-right: 2vw;
    }
    .carrusel .normal { font-weight: 700; }
    .carrusel .fina { font-weight: 300; font-style: italic; }
    @keyframes mover { from { transform: translateX(0) } to { transform: translateX(-50%) } }

    /* Contenido */
    .contenido {
      position: relative;
      z-index: 2;
      max-width: 115ch;
      margin-top: 10vh;
      animation: aparecerIzq 1.2s ease forwards;
      opacity: 0;
    }
    h1 {
      font-weight: 700;
      font-size: clamp(72px,10vw,160px);
      line-height: .95;
      margin-bottom: .3em;
      color: var(--red);
      animation: aparecerArriba 1.2s ease forwards;
      opacity: 0;
    }
    h2 {
      font-weight: 400;
      font-size: clamp(22px,2vw,32px);
      margin-bottom: 1.5em;
      color: var(--red);
      animation: aparecerIzq 1.2s ease forwards;
      opacity: 0;
    }
    p {
      font-size: clamp(16px,1.2vw + 12px,20px);
      margin-bottom: 2em;
      color: var(--red);
      max-width: 80ch;
    }

    /* Formulario */
    form {
      display: grid;
      gap: 1em;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      animation: aparecerIzq 1.2s ease forwards;
      opacity: 0;
    }

    input, select, textarea {
      font-family: "HK Grotesk", sans-serif;
      font-size: 1rem;
      padding: .9em;
      border: 2px solid var(--red);
      background: #fff; /* fondo blanco en inputs */
      color: var(--red);
      outline: none;
      border-radius: 4px;
      transition: all .3s ease;
      appearance: none;
      -webkit-appearance: none;
      accent-color: var(--red);
    }
    ::placeholder { color: rgba(255,0,0,.7); opacity: 1; }
    input:focus, select:focus, textarea:focus {
      border-color: var(--red);
      background: rgba(255,0,0,.05);
      color: var(--red);
    }
    textarea { grid-column: 1 / -1; min-height: 120px; resize: vertical; }

    /* Botón */
    button, input[type="submit"] {
      grid-column: 1 / -1;
      padding: 1em;
      font-family: "HK Grotesk", sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: #fff;
      background: #ff0000;
      border: 2px solid #ff0000;
      border-radius: 4px;
      cursor: pointer;
      transition: filter .25s ease, transform .2s ease;
      appearance: none;
      -webkit-appearance: none;
      accent-color: #ff0000;
    }
    button:hover, input[type="submit"]:hover {
      filter: brightness(1.1);
      transform: scale(1.02);
    }

    /* Animaciones */
    @keyframes aparecerArriba {
      from { transform: translateY(-40px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    @keyframes aparecerIzq {
      from { transform: translateX(-40px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    @media (max-width:900px) {
      h1 { font-size: clamp(50px,12vw,88px); }
      h2 { font-size: clamp(18px,5vw,24px); }
      .carrusel span { font-size: clamp(60px,20vw,140px); }
    }
  </style>
</head>
<body>
  <section class="contacto" aria-label="Formulario de contacto Aliauto">
    <div class="carrusel">
      <span class="normal">¡Envíanos tu mensaje!</span>
      <span class="fina">¡Envíanos tu mensaje!</span>
      <span class="normal">¡Envíanos tu mensaje!</span>
      <span class="fina">¡Envíanos tu mensaje!</span>
      <span class="normal">¡Envíanos tu mensaje!</span>
      <span class="fina">¡Envíanos tu mensaje!</span>
    </div>

    <h1>Contacto</h1>
    <div class="contenido">
      <h2>¡Envíanos tu mensaje!</h2>
      <p>Envíanos un mensaje completando el siguiente formulario.<br>
      Uno de nuestros asesores estará encantado de ponerse en contacto contigo.</p>

      <form action="https://formsubmit.co/aliauto@aliauto.com" method="POST" target="_blank">
        <input type="text" name="_honey" style="display:none">
        <input type="hidden" name="_captcha" value="false">
        <input type="hidden" name="_subject" value="Nuevo mensaje desde el formulario de Aliauto">
        <input type="hidden" name="_template" value="table">

        <input type="text" name="nombre" placeholder="Nombre" required>
        <input type="text" name="apellidos" placeholder="Apellidos" required>
        <input type="text" name="empresa" placeholder="Empresa">
        <input type="text" name="funcion" placeholder="Función">
        <input type="email" name="email" placeholder="Email" required>
        <input type="tel" name="telefono" placeholder="Teléfono">
        <input type="text" name="pais" placeholder="País">
        <input type="text" name="cp" placeholder="Código postal">
        <input type="text" name="area" placeholder="Área de interés">
        <textarea name="mensaje" placeholder="Mensaje"></textarea>

        <button type="submit">Enviar</button>
      </form>

      <noscript>
        <p style="margin-top:12px;color:#ff0000">
          Activa JavaScript para enviar el formulario o
          <a href="mailto:aliauto@aliauto.com" style="color:#ff0000">escríbenos por email</a>.
        </p>
      </noscript>
    </div>
  </section>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      document.querySelector('h1').style.opacity = 1;
      document.querySelector('.contenido').style.opacity = 1;
      document.querySelector('h2').style.opacity = 1;
    });
  </script>
</body>
</html>/* End custom CSS */