:root{
  --jmc-navy:#081226;
  --jmc-navy2:#0d2142;
  --jmc-cyan:#2fd6f7;
  --jmc-cyan-deep:#0b8fab;
  --jmc-ink:#15222e;
  --jmc-line:#d8e4ee;
  --jmc-soft:#eef6fb;
}
body{ color:var(--jmc-ink); }
header.wp-block-template-part{ background:var(--jmc-navy); color:#ffffff; }
header.wp-block-template-part a{ color:#ffffff !important; }
header.wp-block-template-part a:hover{ color:var(--jmc-cyan) !important; }
footer.wp-block-template-part{ background:var(--jmc-navy); color:#dbe9f4; }
footer.wp-block-template-part a{ color:#ffffff !important; }

.jmc-hero{
  background:linear-gradient(135deg, var(--jmc-navy) 0%, var(--jmc-navy2) 70%);
  color:#ffffff; border-radius:20px; padding:44px 36px; margin:10px 0 28px;
}
.jmc-hero h1{ color:#ffffff; font-size:40px; line-height:1.12; margin:0 0 14px; }
.jmc-hero .jmc-sub{ font-size:19px; color:#cfe6f5; max-width:640px; }
.jmc-hero .jmc-trust{ color:var(--jmc-cyan); font-weight:700; margin-top:14px; }

.jmc-cta{
  display:inline-block; background:var(--jmc-cyan); color:var(--jmc-navy) !important;
  font-weight:800; padding:14px 28px; border-radius:999px; text-decoration:none !important;
  font-size:17px;
}
.jmc-cta:hover{ background:#7ce8fb; }

.jmc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin:18px 0 30px; }
.jmc-card{
  border:1px solid var(--jmc-line); border-radius:16px; padding:22px; background:#ffffff;
}
.jmc-card h3, .jmc-card h2{ margin-top:0; color:var(--jmc-navy); }
.jmc-price{ font-size:30px; font-weight:800; color:var(--jmc-cyan-deep); margin:4px 0 8px; }

.jmc-steps{ background:var(--jmc-soft); border-radius:16px; padding:24px 28px; margin:0 0 28px; }
.jmc-steps li{ margin:10px 0; }
.jmc-faq h3{ color:var(--jmc-navy); margin-bottom:2px; }
.jmc-final-cta{ text-align:center; padding:26px 0 10px; }

/* Contact Form 7 */
.wpcf7 label{ font-weight:600; display:block; margin:14px 0 4px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea{
  width:100%; padding:12px; border:1px solid var(--jmc-line); border-radius:10px; font-size:16px;
  box-sizing:border-box;
}
.wpcf7 input[type="submit"]{
  background:var(--jmc-cyan); color:var(--jmc-navy); font-weight:800; font-size:17px;
  border:none; border-radius:999px; padding:14px 30px; cursor:pointer; margin-top:16px;
}
.wpcf7 input[type="submit"]:hover{ background:#7ce8fb; }

@media (max-width:700px){
  .jmc-grid{ grid-template-columns:1fr; }
  .jmc-hero{ padding:30px 22px; }
  .jmc-hero h1{ font-size:30px; }
}

/* Menú móvil abierto (overlay): el panel es claro (color base); los enlaces van oscuros.
   La regla blanca del header es solo para el fondo navy del encabezado. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open a{
  color:var(--jmc-ink) !important;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open a:hover{
  color:var(--jmc-cyan-deep) !important;
}


/* ============================================================
   Fondos futuristas con foto (2026-10-21)
   - Home: hero a todo ancho (full-bleed) con la foto del carro
   - Services / Start Your Case: banda superior con la foto de la ciudad
   Overlay navy sobre la foto para que el texto se lea perfecto.
   ============================================================ */
body{ overflow-x:clip; }

.jmc-hero{
  background:
    linear-gradient(100deg, rgba(8,18,38,.94) 0%, rgba(8,18,38,.83) 46%, rgba(8,18,38,.55) 78%, rgba(8,18,38,.66) 100%),
    url("/wp-content/uploads/2026/10/futuristic-car-hero.webp") center / cover no-repeat,
    linear-gradient(135deg, var(--jmc-navy) 0%, var(--jmc-navy2) 70%);
  width:100vw; max-width:100vw;
  margin-top:0; margin-bottom:34px;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  border-radius:0;
  min-height:470px;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:76px; padding-bottom:76px;
  padding-left:max(36px, calc(50vw - 670px));
  padding-right:max(36px, calc(50vw - 670px));
}

.jmc-page-hero{
  background:
    linear-gradient(100deg, rgba(8,18,38,.93) 0%, rgba(8,18,38,.80) 55%, rgba(8,18,38,.58) 100%),
    url("/wp-content/uploads/2026/10/futuristic-city-hero.webp") center / cover no-repeat,
    linear-gradient(135deg, var(--jmc-navy) 0%, var(--jmc-navy2) 70%);
  color:#ffffff; border-radius:20px; padding:42px 36px; margin:10px 0 26px;
}
.jmc-page-hero h1{ color:#ffffff; margin:0 0 12px; }
.jmc-page-hero p{ color:#d7ecf7; margin:0 0 10px; }
.jmc-page-hero p:last-child{ margin-bottom:0; }
.jmc-page-hero strong{ color:#ffffff; }

@media (max-width:700px){
  .jmc-hero{ min-height:380px; padding:52px 22px; }
  .jmc-page-hero{ padding:30px 22px; }
}

/* ============================================================
   v1.3 — Paisaje futurista a página completa (2026-10-21)
   Dirección del dueño: la foto de la ciudad va FIJA detrás de
   TODO el contenido (nada de fondo blanco); textos y tarjetas
   van adelante, legibles, sobre velo navy.
   - Home (6): el hero del carro queda igual; el resto de la
     página también respira sobre el paisaje de la ciudad.
   - Services (7) y Start Your Case (8): paisaje completo.
   ============================================================ */
body.page-id-6::before,
body.page-id-7::before,
body.page-id-8::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,18,38,.56) 0%, rgba(8,18,38,.63) 55%, rgba(8,18,38,.71) 100%),
    url("/wp-content/uploads/2026/10/futuristic-city-hero.webp") center center / cover no-repeat,
    var(--jmc-navy);
}

/* Título de plantilla de cada página: blanco sobre el paisaje */
body.page-id-6 .wp-block-post-title,
body.page-id-7 .wp-block-post-title,
body.page-id-8 .wp-block-post-title{
  color:#ffffff; text-shadow:0 2px 14px rgba(8,18,38,.55);
}

/* La banda superior de Services/Start se funde con el paisaje:
   sin foto propia ni esquinas — el mismo fondo continúa detrás. */
.jmc-page-hero{
  background:transparent; border-radius:0; box-shadow:none;
  padding:28px 10px 6px; margin-top:0;
}
.jmc-page-hero h1, .jmc-page-hero p{ text-shadow:0 2px 12px rgba(8,18,38,.55); }

/* Services: texto suelto (Turnaround) en claro sobre el paisaje */
.page-id-7 .jmc-services-page > h2{
  color:#ffffff; text-shadow:0 2px 12px rgba(8,18,38,.55);
}
.page-id-7 .jmc-services-page > p{
  color:#e9f4fb; text-shadow:0 1px 8px rgba(8,18,38,.5);
}

/* Tarjetas y paneles con leve elevación sobre el paisaje */
.page-id-6 .jmc-card, .page-id-7 .jmc-card,
.page-id-6 .jmc-steps{
  box-shadow:0 14px 34px rgba(2,8,20,.28);
}

/* Start Your Case: el formulario va en un panel blanco semitransparente
   (v1.4 — pedido del dueño: que se aprecie más la ciudad detrás) con
   efecto cristal esmerilado, flotando sobre el paisaje; los campos
   quedan casi sólidos y totalmente legibles. */
.page-id-8 .wpcf7{
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-radius:18px;
  padding:28px 30px 30px;
  box-shadow:0 22px 55px rgba(2,8,20,.45);
  margin:8px 0 12px;
}
.page-id-8 .wpcf7 input[type="text"], .page-id-8 .wpcf7 input[type="email"], .page-id-8 .wpcf7 input[type="tel"],
.page-id-8 .wpcf7 select, .page-id-8 .wpcf7 textarea{
  background:rgba(255,255,255,.95);
  color:var(--jmc-ink);
}
@media (max-width:700px){
  .page-id-8 .wpcf7{ padding:22px 18px 24px; }
}

/* Home bajo el hero: encabezados y FAQ en claro sobre el paisaje */
.page-id-6 .jmc-services > h2,
.page-id-6 .jmc-faq h2,
.page-id-6 .jmc-final-cta h2{
  color:#ffffff; text-shadow:0 2px 12px rgba(8,18,38,.55);
}
.page-id-6 .jmc-faq h3{
  color:#8fe9fb; text-shadow:0 1px 8px rgba(8,18,38,.5);
}
.page-id-6 .jmc-faq p,
.page-id-6 .jmc-final-cta p{
  color:#e9f4fb; text-shadow:0 1px 8px rgba(8,18,38,.45);
}