/* Portada 3D — se carga solo en la Home, después de main.css y motor3d.css.
   Mismos tokens de marca que el resto de la web (azul del logo, naranja de llamada, verde WhatsApp). */

.home3d {
  --m3d-fondo: #06142E;
  --m3d-texto: #F3F6FB;
  --m3d-acento: #5B9BFF;          /* azul del logo aclarado para fondo oscuro (contraste 6,4:1) */
  --m3d-sobre-acento: #06142E;
  --m3d-fuente: var(--font);
  --m3d-split-base: .1s;          /* el H1 aparece al momento: sin cortina ni espera */
  --m3d-ancho: 1240px;
  --vidrio: color-mix(in srgb, #fff 6%, transparent);
  --vidrio-borde: color-mix(in srgb, #fff 12%, transparent);
  --suave: #C4D0E4;
}
.home3d { font-size: 1.0625rem; }
.home3d h1, .home3d h2, .home3d h3 { color: #fff; letter-spacing: -.015em; text-wrap: balance; }
.home3d h1 { font-size: clamp(2.2rem, 5vw, 4.1rem); line-height: 1.04; font-weight: 800; margin: .5rem 0 1rem; }
.home3d .m3d-seccion h2 { font-size: clamp(1.85rem, 3.3vw, 2.9rem); line-height: 1.08; font-weight: 800; margin: 0 0 .9rem; }
.home3d .m3d-seccion h3 { font-size: 1.08rem; line-height: 1.3; font-weight: 700; margin: 0 0 .3rem; }
.home3d .m3d-texto { color: var(--suave); }
.home3d .m3d-etiqueta { font-weight: 700; letter-spacing: .14em; }
.home3d a { color: inherit; }
.home3d .btn--call, .home3d .btn--wa { color: #fff; }
.home3d .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.home3d .btn-row .btn { flex: 0 0 auto; }
.home3d .btn--ghost { background: transparent; color: #fff; border-color: var(--vidrio-borde); }
.home3d .btn--ghost:hover { border-color: var(--m3d-acento); color: #fff; }
.home3d .m3d-seccion { padding-top: clamp(6rem, 12vh, 8.5rem); }
.home3d [data-motor3d] { position: relative; z-index: 1; }

/* Cabecera de la web, versión noche (en móvil el menú desplegable sigue en blanco) */
.home3d .hdr { background: color-mix(in srgb, #06142E 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: color-mix(in srgb, #fff 8%, transparent); }
.home3d .brand, .home3d .brand__txt b { color: #fff; }
.home3d .nav-toggle { background: transparent; color: #fff; border-color: var(--vidrio-borde); }
.home3d .hdr img { display: inline-block; }
.home3d .nav a, .home3d .nav a:hover { color: var(--dark); }
@media (min-width: 1100px) {
  .home3d .nav a { color: #E3EBF8; }
  .home3d .nav a:hover { background: color-mix(in srgb, #fff 10%, transparent); color: #fff; }
}
@media (min-width: 1100px) {
  .home3d .langs-dd summary { color: #E3EBF8; border-color: var(--vidrio-borde); }
}
.home3d .ico { display: inline-block; }

/* Apertura: texto y foto del camión visibles desde el primer momento; el 3D la sustituye al cargar */
.home3d .m3d-seccion--centro > .hero3d__txt { max-width: 58rem; }
.hero3d__img {
  position: absolute; z-index: 0; left: 50%; top: calc(66px + 1vh);
  width: min(26vw, 40vh, 380px); height: auto; max-width: none;
  transform: translateX(-50%); pointer-events: none;
  transition: opacity .9s ease;
}
.hero3d__txt { position: relative; z-index: 1; }
.m3d-listo .hero3d__img { opacity: 0; }
@media (max-width: 819px) {
  .hero3d__img { top: calc(66px + 8vh); width: min(62vw, 30vh); }
}
/* Apertura */
.home3d .hero3d .eyebrow { background: color-mix(in srgb, #fff 10%, transparent); }
.home3d .hero3d .eyebrow .punto { width: .55em; height: .55em; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 #3DDC84; animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 .6em transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.home3d .hero3d .lead { color: var(--suave); font-size: clamp(1.08rem, 1.5vw, 1.3rem); max-width: 58ch; margin: 0 auto; }
.home3d .hero3d .btn-row { justify-content: center; }
.home3d .hero3d .trust { justify-content: center; margin-top: 1.2rem; color: var(--suave); }
.home3d .hero3d .trust .ico { color: var(--m3d-acento); }

/* Tarjetas de servicio */
.srv3d { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.srv3d li { padding: 1.15rem 1.2rem; border-radius: 14px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; flex-direction: column; transition: border-color .3s, transform .3s; }
.srv3d li:hover { border-color: color-mix(in srgb, var(--m3d-acento) 55%, transparent); transform: translateY(-2px); }
.srv3d .card__ico { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--m3d-acento) 16%, transparent); color: var(--m3d-acento); margin-bottom: .7rem; }
.srv3d p { color: var(--suave); font-size: .95rem; margin: 0 0 .8rem; }
.srv3d a { margin-top: auto; font-weight: 700; font-size: .93rem; color: var(--m3d-acento); text-decoration: none; display: inline-flex; align-items: center; gap: .35em; }
.srv3d a:hover { color: #fff; }
.srv3d .srv3d--pilar { border-color: color-mix(in srgb, var(--m3d-acento) 35%, transparent); }

/* Lista con marcas */
.home3d .checks li::before { border-color: var(--m3d-acento); }
.home3d .checks li { color: var(--suave); }

/* Por qué elegirnos */
.valores3d { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1.1rem; }
.valores3d li { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: start; }
.valores3d .card__ico { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--m3d-acento) 16%, transparent); color: var(--m3d-acento); }
.valores3d p { margin: 0; color: var(--suave); font-size: .97rem; }

/* Cómo trabajamos */
.pasos3d { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0; counter-reset: paso; }
.pasos3d li { position: relative; padding: 0 0 1.4rem 3.4rem; }
.pasos3d li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: -.15rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #06142E; background: var(--m3d-acento); }
.pasos3d li:not(:last-child)::after { content: ""; position: absolute; left: 1.13rem; top: 2.3rem; bottom: .2rem; width: 2px; background: linear-gradient(var(--m3d-acento), transparent); opacity: .5; }
.pasos3d p { margin: 0; color: var(--suave); font-size: .97rem; }

/* Zonas */
.zonas3d { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.zonas3d a { display: inline-flex; align-items: center; gap: .35em; padding: .5em .95em; border-radius: 99px; border: 1px solid var(--vidrio-borde); background: var(--vidrio); text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color .2s, background .2s; }
.zonas3d a:hover { border-color: var(--m3d-acento); background: color-mix(in srgb, var(--m3d-acento) 14%, transparent); }
.zonas3d .ico { color: var(--m3d-acento); }

/* Reseñas */
.resenas3d { display: grid; gap: 12px; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.resenas3d li { padding: 1.1rem 1.25rem; border-radius: 14px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); }
.resenas3d .resena__stars { display: flex; gap: 2px; margin: 0 0 .5rem; color: var(--star); }
.resenas3d blockquote { margin: 0 0 .6rem; font-size: 1.02rem; }
.resenas3d blockquote p { margin: 0; }
.resenas3d .resena__autor { margin: 0; font-size: .9rem; color: var(--suave); }
.resenas3d .resena__autor strong { color: #fff; }

/* Preguntas frecuentes en oscuro */
.home3d .faq3d { width: 100%; }
.home3d .faq details { border-bottom: 1px solid var(--vidrio-borde); }
.home3d .faq summary { color: #fff; }
.home3d .faq summary h3 { color: #fff; font-size: 1.05rem; margin: 0; }
.home3d .faq summary::after { background: color-mix(in srgb, #fff 10%, transparent); color: #fff; }
.home3d .faq details p { color: var(--suave); }
.home3d .faq details a { color: var(--m3d-acento); }
.home3d .m3d-seccion--ancha > * { grid-column: 1 / -1; max-width: 860px; justify-self: center; width: 100%; }

/* Cierre */
.home3d .cierre3d .tel-grande { display: inline-block; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: .01em; color: #fff; text-decoration: none; margin: .2rem 0 .6rem; font-variant-numeric: tabular-nums; }
.home3d .cierre3d .tel-grande:hover { color: var(--m3d-acento); }

/* Pie por encima del lienzo 3D */
.home3d .ftr { position: relative; z-index: 2; }
.home3d .callbar, .home3d .wa-float { z-index: 70; }

@media (max-width: 819px) {
  .home3d .m3d-seccion { padding-top: 46vh; }
  .home3d .m3d-seccion--hero { padding-top: 40vh; }
  .home3d .hero3d .btn-row, .home3d .hero3d .trust { justify-content: flex-start; }
  .home3d .hero3d .lead { margin: 0; }
  .home3d .m3d-seccion--ancha { padding-top: 6rem; }
}