/* ==========================================================================
   Rocket Ad — hoja de estilos única
   Medidas tomadas del sitio Wix original (lienzo de 980px sobre página 1280px).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #333333;   /* texto principal (Wix color_15) */
  --red:        #ff4040;   /* botones */
  --red-dark:   #e93030;   /* botones :hover */
  --brand-red:  #ed1c24;   /* rojo del logo (Wix color_3) */
  --blue:       #0057e1;   /* separadores de la página Clientes */
  --rule:       #595959;   /* separador gris */
  --field:      #777777;   /* subrayado de los campos del formulario */
  --shell:      #e8e6e6;   /* color de respaldo tras las fotos de fondo */

  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Wix usaba fuentes con licencia (helvetica-w01, avenir-lt-w01-light) que no
     podemos redistribuir. Estas son sus equivalentes del sistema: idénticas en
     macOS/iOS y muy cercanas en Windows/Android vía Arial.
     Ojo: "Avenir Next" NO trae corte Light, así que "Avenir" va primero —
     de lo contrario el peso 300 cae en UltraLight y el texto se ve lavado. */
  --light: Avenir, "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --canvas: 980px;         /* ancho del contenido en el diseño original */
  --gutter: 20px;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: inherit; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }

ul.plain { list-style: none; padding: 0; }

.wrap {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Enlace de salto — visible sólo al navegar con teclado */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--ink);
  padding: 12px 18px;
  font-size: 14px;
}
.skip:focus { left: 8px; top: 8px; outline: 2px solid var(--brand-red); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

/* --- Botón -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  min-height: 40px;
  padding: 0 18px;
  background: var(--red);
  color: #fff;
  font: 700 14px/1 var(--sans);
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--red-dark); }
.btn[disabled] { opacity: .6; cursor: default; }

/* ==========================================================================
   HERO (portada)
   Original: 755px de alto, foto de escritorio en `cover`, contenido a 444px
   del borde izquierdo del lienzo de 980px.
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--shell);
  background-image: url("../img/bg-escritorio.jpg");
  background-image: image-set(
    url("../img/bg-escritorio.webp") type("image/webp"),
    url("../img/bg-escritorio.jpg")  type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Velo blanco: sólo se activa cuando el texto deja de tener la zona lisa
   de la foto para apoyarse (pantallas angostas). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background-color .2s ease;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  /* El lienzo original mide 980px limpios: sumamos las canaletas para que el
     padding no se los coma y el texto rompa en las mismas líneas. */
  max-width: calc(var(--canvas) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 28px var(--gutter) 261px;
  min-height: 755px;
}

.hero__col {
  margin-left: 444px;
  width: 536px;
  max-width: 100%;
}

.hero__logo { display: block; width: 529px; max-width: 100%; height: auto; }

.hero__title {
  margin-top: 12px;
  max-width: 320px;
  font: 700 36px/1.15 var(--sans);
  color: var(--ink);
  letter-spacing: .01em;
}

/* El original mide 493px con la Helvetica licenciada de Wix. Helvetica Neue es
   algo más ancha, así que damos unos píxeles extra para conservar los mismos
   tres renglones. Sigue cabiendo en el lienzo de 980px (444 + 528 = 972). */
.hero__lead {
  margin-top: 38px;
  max-width: 528px;
  font: 400 20px/26px var(--sans);
}
.hero__lead strong { font-weight: 700; }

.hero__cta { margin-top: 38px; }

/* ==========================================================================
   SERVICIOS
   Rejilla de 3 columnas de 298px con 27px de canaleta (948px en total).
   ========================================================================== */
.servicios { padding: 14px var(--gutter) 71px; }

.eyebrow {
  font: 400 18px/25.2px var(--sans);
  text-align: center;
}

.section-title {
  font: 700 30px/42px var(--sans);
  text-align: center;
}

.servicios__grid {
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
  max-width: 948px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 27px;
  row-gap: 115px;
}

.servicio__foto {
  display: block;
  width: 100%;
  aspect-ratio: 298 / 378;
  object-fit: cover;
}

.servicio__nombre {
  margin-top: 13px;
  font: 700 16px/30.4px var(--sans);
  text-align: center;
}

/* El original usa Avenir en su corte Light; sin el peso 300 el texto engorda
   y rompe en más líneas de las que debería. */
.servicio__desc {
  font: 300 16px/20.8px var(--light);
  text-align: center;
}

/* ==========================================================================
   CONTACTO
   Tarjeta blanca de 809px centrada sobre la misma foto del hero.
   ========================================================================== */
.contacto {
  background-color: var(--shell);
  background-image: url("../img/bg-escritorio.jpg");
  background-image: image-set(
    url("../img/bg-escritorio.webp") type("image/webp"),
    url("../img/bg-escritorio.jpg")  type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 66px var(--gutter) 67px;
}

.form-card {
  max-width: 809px;
  margin-inline: auto;
  background: #fff;
  padding: 62px 110px 84px;
}

.form-card__title {
  font: 400 38px/1.15 var(--sans);
  font-weight: 700;
  text-align: center;
}

.form-card__sub {
  margin-top: 25px;
  font: 400 18px/32.4px var(--sans);
  text-align: center;
  max-width: 420px;
  margin-inline: auto;
}

.form {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 49px;
  row-gap: 54px;
  align-items: end;
}

.field { display: block; min-width: 0; }

.field > span {
  display: block;
  margin-bottom: 9px;
  font: 300 14px/1 var(--light);
}

.field input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 0 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field);
  border-radius: 0;
  color: var(--ink);
  font: 300 14px/19.6px var(--light);
  transition: border-color .15s ease;
}
.field input:hover { border-bottom-color: var(--ink); }
.field input:focus { outline: 0; border-bottom-color: var(--brand-red); border-bottom-width: 2px; padding-bottom: 5px; }
.field input:user-invalid { border-bottom-color: var(--brand-red); }

/* Trampa antispam: invisible para personas, tentadora para bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { width: 100%; min-height: 50px; }

/* Mensaje de estado del envío */
.form__status {
  grid-column: 1 / -1;
  margin: 0;
  font: 400 16px/1.5 var(--sans);
  text-align: center;
  min-height: 24px;
}
.form__status:empty { display: none; }
.form__status[data-state="ok"]    { color: #1b7f3b; }
.form__status[data-state="error"] { color: var(--brand-red); }

/* ==========================================================================
   PÁGINAS INTERIORES (Clientes / Privacidad)
   ========================================================================== */
.page-hero {
  background-color: var(--shell);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 150px;
}
.page-hero--clientes {
  background-image: url("../img/clientes-hero.jpg");
  background-image: image-set(
    url("../img/clientes-hero.webp") type("image/webp"),
    url("../img/clientes-hero.jpg")  type("image/jpeg")
  );
}

.page-hero__card {
  max-width: var(--canvas);
  margin-inline: auto;
  background: #fff;
  padding: 80px 128px;
  min-height: 320px;
}

.page-hero__title {
  font: 700 56px/1.2 var(--sans);
  letter-spacing: .01em;
}

.page-hero__sub {
  margin-top: 44px;
  max-width: 660px;
  font: 400 16px/28.8px var(--sans);
}

.rule {
  max-width: var(--canvas);
  margin: 0 auto;
  border: 0;
  border-top: 1px solid var(--rule);
}
.rule--blue { border-top-color: var(--blue); }

/* --- Fichas de clientes ------------------------------------------------- */
.clientes { padding: 0 var(--gutter); }

.cliente {
  max-width: var(--canvas);
  margin-inline: auto;
  padding: 81px 0 68px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  align-items: center;
}

.cliente__media { display: flex; align-items: center; justify-content: center; }

.cliente__media img { display: block; max-width: 100%; height: auto; }

/* El logo de CHC es una pieza cuadrada con fondo propio: se recorta igual
   que en el original para conservar su banda oscura. */
.cliente__media--chc img {
  width: 378px;
  aspect-ratio: 378 / 283;
  object-fit: cover;
}

.cliente__nombre { font: 700 30px/1.2 var(--sans); }

.cliente__desc { margin-top: 22px; font: 400 16px/28.8px var(--sans); }

.cliente__link {
  display: inline-block;
  margin-top: 22px;
  font: 400 16px/28.8px var(--sans);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cliente__link:hover { color: var(--blue); }

/* Filas impares: el logo va a la derecha (como en el original). */
.cliente--invertido .cliente__media { order: 2; }

/* --- Documento legal ---------------------------------------------------- */
.legal {
  max-width: 820px;
  margin-inline: auto;
  padding: 64px var(--gutter) 80px;
  font: 400 16px/28.8px var(--sans);
}
.legal h2 {
  margin-top: 40px;
  font: 700 22px/1.4 var(--sans);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 22px; }
.legal li { margin-top: 8px; }
.legal a { color: var(--blue); }
.legal .legal__updated { color: #6b6b6b; font-size: 15px; }

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */
.footer {
  padding: 40px var(--gutter);
  border-top: 1px solid #e6e6e6;
  font: 400 14px/1.6 var(--sans);
  text-align: center;
}
.footer__nav {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
}
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; }
.footer__legal { color: #6b6b6b; }

/* ==========================================================================
   ADAPTACIÓN A PANTALLAS MENORES
   ========================================================================== */

/* Por debajo del lienzo original el texto del hero pierde la zona lisa de la
   foto, así que se centra y se enciende el velo blanco. */
@media (max-width: 1023px) {
  .hero::before { background: rgba(255, 255, 255, .62); }

  .hero__inner {
    min-height: 0;
    padding: 48px var(--gutter) 56px;
  }

  .hero__col {
    margin-left: 0;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  .hero__logo { margin-inline: auto; }
  .hero__title { max-width: none; margin-inline: auto; }
  .hero__lead  { max-width: none; margin-inline: auto; }

  .servicios__grid { row-gap: 64px; }

  .page-hero { padding-top: 64px; }
  .page-hero__card { padding: 56px 48px; min-height: 0; }

  .cliente { column-gap: 40px; padding: 56px 0; }

  .form-card { padding: 48px 56px 56px; }
}

@media (max-width: 767px) {
  :root { --gutter: 18px; }

  .hero__logo { width: 320px; }
  .hero__title { font-size: 30px; }
  .hero__lead  { margin-top: 24px; font-size: 17px; line-height: 24px; }
  .hero__cta   { margin-top: 28px; }

  .servicios { padding-bottom: 48px; }
  .section-title { font-size: 26px; line-height: 34px; }
  .eyebrow { font-size: 16px; }

  .servicios__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
    max-width: 340px;
  }

  .contacto { padding: 40px var(--gutter); }
  .form-card { padding: 36px 24px 40px; }
  .form-card__title { font-size: 30px; }
  .form-card__sub { margin-top: 16px; font-size: 16px; line-height: 26px; }

  .form {
    margin-top: 36px;
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .page-hero__card { padding: 40px 24px; }
  .page-hero__title { font-size: 38px; }
  .page-hero__sub { margin-top: 24px; font-size: 16px; line-height: 26px; }

  .cliente {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 40px 0;
  }
  /* En una sola columna el logo siempre va primero. */
  .cliente--invertido .cliente__media { order: 0; }
  .cliente__nombre { font-size: 26px; }
  .cliente__desc { margin-top: 16px; line-height: 26px; }
  .cliente__media--chc img { width: 100%; max-width: 340px; }

  .legal { padding: 40px var(--gutter) 56px; line-height: 26px; }
  .legal h2 { font-size: 20px; margin-top: 32px; }
}

/* --- Preferencias del sistema ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .hero, .contacto { background: none; }
  .hero::before { display: none; }
}