/* =========================================================
   HX · 15-10-2026 · «La web se construye delante de ti»
   Cada apartado entra como PLANO DE OBRA (cajas discontinuas donde irán
   titular, texto, fotos y botones) y se construye al verse, en menos de un
   segundo. Después es una web normal: negra, naranja y letras blancas.
   Sin JS o con movimiento reducido se ve terminada directamente.
   ========================================================= */

/* ---------- 0. el plano de obra ---------- */
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque) { position: relative; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(h1, h2, h3, p, .hz-case-client, .hz-review-author, .hz-reviews-title, .hz-reviews-count, .hz-reviews-stars, li) {
  color: transparent !important; text-shadow: none !important;
  background: repeating-linear-gradient(90deg, #232323 0 100%) !important; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(h1, h2, h3) span { background: none !important; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(h1, h2, h3, p) :is(strong, b, a, span, br) { color: transparent !important; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(img, video, svg, .hz-service-icon, .hx-movil, .hx-sello, .hx-cifras, .hx-plazas, .hz-check-icon, .hx-paso-ico) { opacity: 0 !important; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(.hz-case-top, .hz-testi video, .hx-movil) { outline: 2px dashed #3A3A3A; outline-offset: -2px; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(.hz-step, .hz-case, .hz-testi, .hz-review-card, .hz-service, .hz-check, .hzl-card, .hz-highlight, .hw-faq) {
  border-style: dashed !important; border-color: #3A3A3A !important; background: transparent !important; transform: none !important;
}
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(.hzl-btn, .hz-btn, .hw-boton) { background: transparent !important; color: transparent !important; box-shadow: inset 0 0 0 2px #3A3A3A !important; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(.hzl-in) { border-style: dashed; color: transparent; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) .hzl-in::placeholder { color: transparent; }

/* el paso de plano a terminado */
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque) :is(h1, h2, h3, p, li, img, video, svg, .hz-case-client, .hz-step, .hz-case, .hz-testi, .hz-review-card, .hz-service, .hz-check, .hzl-card, .hz-highlight, .hzl-btn, .hz-btn, .hw-boton, .hz-service-icon, .hx-movil, .hx-sello, .hx-cifras, .hx-plazas, .hz-check-icon, .hx-paso-ico) {
  transition: color .35s ease, background-color .35s ease, opacity .45s ease, border-color .35s ease, box-shadow .35s ease, transform .2s;
}

/* la marca de obra: arriba a la derecha de cada apartado */
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque)::after {
  content: 'construyendo…'; position: absolute; top: 14px; right: 16px; z-index: 2;
  font: 600 .78rem/1 var(--letra); color: #6B6B6B; letter-spacing: .02em; pointer-events: none;
  padding: 6px 9px; border: 1px dashed #3A3A3A; border-radius: 6px; transition: opacity .4s ease .9s, color .2s;
}
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque).hx-lista::after { content: '✓ publicado'; color: var(--naranja); border-color: transparent; opacity: 0; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque).hx-lista.hx-recien::after { opacity: 1; transition: none; }
@media (max-width: 720px) { html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque)::after { top: 8px; right: 10px; } }

/* ---------- iconos de línea ---------- */
.hw-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ---------- 1. portada ---------- */
.hz-hero { padding-bottom: 64px; }
.hz-hero-sub { color: var(--tinta-suave); }
/* el formulario es un chat de WhatsApp */
.hx-chat { padding: 0 !important; overflow: hidden; background: #111 !important; }
.hx-chat-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #1A1A1A; border-bottom: 1px solid var(--linea-osc); }
.hx-chat-av { width: 40px; height: 40px; border-radius: 50%; background: var(--naranja); color: #111; display: grid; place-items: center; font: 900 1.1rem var(--letra-tit); }
.hx-chat-quien b { display: block; color: var(--blanco); font-size: 1rem; line-height: 1.2; }
.hx-chat-quien i { font-style: normal; font-size: .85rem; color: #4CD07D; }
.hx-chat .hzl-title { margin: 18px 18px 16px; padding: 12px 14px; max-width: 88%; background: #222; border-radius: 4px 14px 14px 14px; font-size: 1.02rem; color: var(--blanco); position: relative; }
.hx-chat .hzl-form, .hx-chat .hzl-note, .hx-chat .hzl-ok, .hx-chat .hzl-err { margin-left: 18px; margin-right: 18px; }
.hx-chat .hzl-note { margin-bottom: 18px; }
.hx-chat .hzl-ok { margin-bottom: 18px; }
/* la garantía es un sello */
.hz-guarantee { position: relative; padding-left: 86px; min-height: 66px; display: block; }
.hx-sello { position: absolute; left: 0; top: 50%; margin-top: -33px; width: 66px; height: 66px; border-radius: 50%; border: 2px dashed var(--naranja); display: grid; place-content: center; text-align: center; transform: rotate(-10deg); color: var(--naranja); }
.hx-sello b { font: 900 1.45rem/1 var(--letra-tit); }
.hx-sello i { font: 700 .62rem/1 var(--letra); font-style: normal; letter-spacing: .04em; }
/* las cinco promesas */
.hz-check { align-items: center; }
.hz-check-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 107, 0, .12); color: var(--naranja); }
.hz-check:hover .hz-check-icon { background: var(--naranja); color: #111; }

/* ---------- 2. el problema: el móvil que no suena ---------- */
.hx-problema-in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hx-problema-in { grid-template-columns: 300px 1fr; gap: 64px; } }
.hx-movil { width: 220px; aspect-ratio: 9 / 18; margin: 0 auto; border-radius: 36px; border: 2px solid #3A3A3A; padding: 10px; background: #0A0A0A; }
.hx-movil-pant { height: 100%; border-radius: 26px; background: #151515; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.hx-movil-hora { position: absolute; top: 16px; font-weight: 700; font-size: .85rem; color: var(--tinta-suave); }
.hx-movil-cero { font: 900 6rem/1 var(--letra-tit); color: var(--blanco); }
.hx-movil-txt { color: var(--tinta-suave); font-weight: 600; }
.hx-movil-zz { position: absolute; bottom: 26px; color: var(--naranja); font-weight: 800; letter-spacing: .3em; animation: hx-zz 2.6s ease-in-out infinite; }
@keyframes hx-zz { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }
.hx-problema-txt .hz-p { max-width: 56ch; }
/* la cita, en grande y sin caja */
.hx-cita { background: none !important; border: 0 !important; padding: 26px 0 0 !important; margin: 26px 0 0 !important; border-top: 1px solid var(--linea-osc) !important; border-radius: 0 !important; }
.hx-cita p { font: 600 clamp(1.2rem, 1.05rem + .6vw, 1.45rem)/1.45 var(--letra); color: var(--blanco); }
.hx-cita strong { color: var(--naranja); }

/* ---------- 3. cómo empezar: línea de tiempo ---------- */
.hx-pasos { position: relative; }
.hx-pasos-linea { display: none; }
@media (min-width: 800px) {
  .hx-pasos { padding-top: 34px; }
  .hx-pasos-linea { display: block; position: absolute; top: 0; left: 16.6%; right: 16.6%; height: 2px; background: var(--linea-osc); }
  .hx-pasos-linea i { position: absolute; inset: 0; background: var(--naranja); transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); transition: transform .2s linear; }
  .hx-pasos .hz-step::after { content: ''; position: absolute; top: -41px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--negro); border: 2px solid var(--naranja); }
}
.hx-paso-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--naranja); color: #111; margin-bottom: 14px; }
.hx-pasos .hz-step::before { position: absolute; top: 20px; right: 22px; font-size: 1.1rem; color: #555; margin: 0; }

/* ---------- 4. casos: ventana de navegador con su dirección ---------- */
.hz-case-top::after { content: attr(data-dom); position: absolute; top: 5px; left: 56px; right: 12px; height: 15px; border-radius: 4px; background: #1C1C1C; color: #8A8A8A; font: 500 .7rem/15px var(--letra); padding: 0 8px; white-space: nowrap; overflow: hidden; }

/* ---------- 5. opiniones en vídeo: formato reel ---------- */
.hx-reels .hz-testi { border-radius: 22px; }
.hx-reels .hz-testi video { aspect-ratio: 9 / 14; }
.hx-reels .hz-testi-quote { font-size: 1.08rem; color: var(--blanco); }

/* ---------- 6. google ---------- */
.hz-reviews-stars { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hz-reviews-stars strong { font: 900 4.2rem/1 var(--letra-tit); color: var(--blanco); letter-spacing: -.03em; }
.hx-estrellas { color: var(--naranja); font-size: 1.7rem; letter-spacing: 3px; }
.hz-review-card { position: relative; padding-top: 26px; }
.hx-rev-g { position: absolute; top: 18px; right: 20px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #4285F4; display: grid; place-items: center; font: 800 .95rem var(--letra); }

/* ---------- 7. servicios: mosaico ---------- */
@media (min-width: 1000px) {
  .hx-mosaico { grid-template-columns: repeat(4, 1fr); }
  .hx-mosaico .hz-service:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
  .hx-mosaico .hz-service:first-child h3 { font-size: 1.9rem; }
  .hx-mosaico .hz-service:first-child .hz-service-icon { width: 64px; height: 64px; margin-bottom: auto; }
  .hx-mosaico .hz-service:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
  .hx-mosaico .hz-service:last-child .hz-service-icon { grid-row: span 2; margin: 0; }
}
.hz-service-icon { color: var(--naranja); }
.hz-service:hover .hz-service-icon { background: var(--naranja); color: #111; }

/* ---------- 8. por qué somos diferentes: las cifras ---------- */
.hx-dif { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hx-dif { grid-template-columns: 360px 1fr; gap: 64px; } }
.hx-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hx-cifras > div { border: 1px solid var(--linea-osc); border-radius: var(--radio); padding: 20px 18px; background: var(--negro-2); }
.hx-cifras b { font: 900 4rem/1 var(--letra-tit); color: var(--naranja); letter-spacing: -.03em; }
.hx-cifras i { font: 900 2.2rem/1 var(--letra-tit); color: var(--naranja); font-style: normal; }
.hx-cifras small { display: block; margin-top: 8px; color: var(--tinta-suave); font-size: .95rem; line-height: 1.3; }

/* ---------- 9. local y preguntas ---------- */
.hz-local h2 + p::first-letter { font: 900 3.4rem/.9 var(--letra-tit); color: var(--naranja); float: left; margin: 4px 10px 0 0; }

/* ---------- 10. final: las 4 plazas ---------- */
.hx-plazas { display: flex; justify-content: center; gap: 12px; margin: 26px 0 22px; }
.hx-plazas span { width: 54px; height: 54px; border-radius: 12px; border: 2px dashed var(--naranja); animation: hx-plaza 2.4s ease-in-out infinite; }
.hx-plazas span:nth-child(2) { animation-delay: .3s; } .hx-plazas span:nth-child(3) { animation-delay: .6s; } .hx-plazas span:nth-child(4) { animation-delay: .9s; }
@keyframes hx-plaza { 0%, 70%, 100% { background: transparent; } 35% { background: rgba(255, 107, 0, .22); } }

@media (prefers-reduced-motion: reduce) { .hx-movil-zz, .hx-plazas span { animation: none; } }

/* móvil: la bandera de idiomas vive en la cabecera, entre el logo y el menú (no tapa texto ni el botón fijo) */
@media (max-width: 899px) {
  #gt_float_wrapper, body.hay-fijo #gt_float_wrapper { top: 8px !important; bottom: auto !important; left: auto !important; right: 72px !important; z-index: 60 !important; transform: scale(.82); transform-origin: right top; }
}

/* =========================================================
   PÁGINAS DE SERVICIO Y ARTÍCULOS: un apartado por h2, cada tipo con su diseño
   ========================================================= */
.hw-papel { padding: 24px 0 72px; }
.hx-texto { max-width: 1160px; }
.hx-bloque { padding: 56px 0; border-top: 1px solid var(--linea-osc); }
.hx-bloque:first-child { border-top: 0; }
html.hx-on .hx-bloque::after { display: none; }            /* sin la etiqueta «construyendo» en cada apartado */
.hx-bloque h2 { margin: 0 0 .6em; }
.hw-texto .hx-bloque > :last-child, .hx-b-cuerpo > :last-child { margin-bottom: 0; }

/* intro: el primer párrafo en grande, ancho de lectura */
.hx-b-intro { max-width: 760px; padding-top: 32px; }
.hx-b-intro p:first-child { font-size: 1.3rem; line-height: 1.55; color: var(--blanco); }

/* texto: el titular se queda fijo a la izquierda mientras se lee */
@media (min-width: 960px) {
  .hx-b-texto, .hx-b-lista, .hx-b-pasos { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
  .hx-b-texto .hx-b-cab, .hx-b-lista .hx-b-cab, .hx-b-pasos .hx-b-cab { position: sticky; top: calc(var(--cab-alto) + 28px); }
}
.hx-b-cuerpo { max-width: 720px; }

/* subapartados: tarjetas en mosaico */
.hx-b-tarjetas .hx-b-cuerpo { max-width: none; }
.hx-b-tarjetas .hx-b-cuerpo > p { max-width: 720px; }
.hx-tarjetas { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 720px) { .hx-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hx-tarjetas:has(> .hx-tarjeta:nth-child(6)) { grid-template-columns: repeat(3, 1fr); } }
.hx-tarjeta { background: var(--negro-2); border: 1px solid var(--linea-osc); border-radius: var(--radio); padding: 22px 22px 18px; transition: border-color .2s; }
.hx-tarjeta:hover { border-color: #4A4A4A; }
.hw-texto .hx-tarjeta h3 { margin: 0 0 .45em; }
.hx-tarjeta p:last-child { margin-bottom: 0; }

/* lista: casillas con su check */
.hw-texto .hx-b-lista ul { display: grid; gap: 10px; }
@media (min-width: 720px) { .hw-texto .hx-b-lista ul { grid-template-columns: repeat(2, 1fr); } }
.hw-texto .hx-b-lista ul li { background: var(--negro-2); border: 1px solid var(--linea-osc); border-radius: 12px; padding: 14px 16px 14px 52px; color: var(--tinta); }
.hw-texto .hx-b-lista ul li::before { left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 6px; background: var(--naranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* pasos: línea de tiempo vertical */
.hw-texto .hx-b-pasos ol { gap: 0; }
.hw-texto .hx-b-pasos ol li { padding: 0 0 22px 52px; }
.hw-texto .hx-b-pasos ol li::after { content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--linea-osc); }
.hw-texto .hx-b-pasos ol li:last-child::after { display: none; }
.hw-texto .hx-b-pasos ol li::before { width: 32px; height: 32px; line-height: 32px; border-radius: 50%; }

/* preguntas: centradas y desplegables */
.hx-b-faq { max-width: 820px; margin: 0 auto; }
.hx-b-faq h2 { text-align: center; margin-bottom: 1em; }

/* titulares de la columna fija: tamaño contenido y sin partir palabras */
@media (min-width: 960px) {
  .hx-b-texto, .hx-b-lista, .hx-b-pasos { grid-template-columns: 380px 1fr; }
  .hx-b-texto .hx-b-cab h2, .hx-b-lista .hx-b-cab h2, .hx-b-pasos .hx-b-cab h2 { font-size: clamp(1.5rem, 1.1rem + .9vw, 2rem); line-height: 1.2; }
}
.hw-texto h2, .hw-texto h3 { overflow-wrap: normal; word-break: normal; hyphens: none; }
/* texto de lectura más legible */
.hw-texto p, .hw-texto li { color: #D0D0D0; font-size: 1.08rem; line-height: 1.7; }
.hx-tarjeta p { color: #C2C2C2; }

/* =========================================================
   CASOS: la tarjeta enseña la web en movimiento y se gira para contar su historia
   ========================================================= */
.hz-case.hx-flip { background: none !important; border: 0 !important; overflow: visible; perspective: 1400px; }
.hz-case.hx-flip:hover { transform: none; }
.hx-flip-in { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, .1, .2, 1); }
.hx-flip.girada .hx-flip-in { transform: rotateY(180deg); }
.hx-cara, .hx-dorso { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--linea-osc); border-radius: var(--radio); overflow: hidden; background: var(--negro-2); display: flex; flex-direction: column; transition: border-color .2s; }
.hx-cara:hover { border-color: var(--naranja); }
.hx-dorso { transform: rotateY(180deg); padding: 26px 24px 22px; border-color: var(--naranja); }

/* la web en movimiento, encima de la captura */
.hz-case-top { overflow: hidden; }
.hx-case-vid { position: absolute; left: 0; right: 0; top: 24px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #000; }
.hz-case-top img { opacity: 1; }
.hx-cara .hz-case-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; }
.hx-cara .hz-case-client { margin: 0; }

/* botón de girar */
.hx-girar { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #444; background: transparent; color: var(--blanco); font: 700 .92rem var(--letra); cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.hx-girar::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.5 6.2L3 16M3 21v-5h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.5 6.2L3 16M3 21v-5h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hx-girar:hover, .hx-girar:focus-visible { border-color: var(--naranja); background: var(--naranja); color: #111; }

/* el dorso: su historia */
.hx-dorso-sector { color: var(--naranja); font-weight: 700; font-size: .95rem; }
.hx-dorso-nombre { display: block; font: 800 1.7rem/1.15 var(--letra-tit); color: var(--blanco); margin: 4px 0 14px; }
.hx-dorso p { color: #D0D0D0 !important; font-size: 1.08rem; line-height: 1.6; margin: 0 0 18px; }
.hx-dorso p strong { color: var(--blanco); }
.hx-dorso-tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hx-dorso-tags li { font-size: .9rem; font-weight: 600; color: var(--blanco); padding: 6px 12px; border-radius: 999px; background: var(--negro-3); border: 1px solid #3A3A3A; }
.hx-volver { margin-top: auto; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) { .hx-flip-in { transition: none; } }

/* =========================================================
   PORTADA ordenada: cada pieza en su sitio, sin huecos
   izq: aviso · titular · texto · garantía · valoración   |   der: chat (junto al titular) · alternativa (junto a la garantía)
   ========================================================= */
.hz-hero .hz-hero-title { font-size: clamp(2.5rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.04; max-width: 15ch; margin-bottom: 20px; }
.hz-hero .hz-hero-sub { max-width: 52ch; margin-bottom: 0; }
@media (min-width: 900px) {
  .hz-hero .hz-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 64px; row-gap: 0; align-items: start; }
  .hz-hero .hz-wrap > .hz-kicker { grid-column: 1; grid-row: 1; }
  .hz-hero .hz-wrap > .hz-hero-title { grid-column: 1; grid-row: 2; }
  .hz-hero .hz-wrap > .hz-hero-sub { grid-column: 1; grid-row: 3; }
  .hz-hero .hz-wrap > .hz-guarantee { grid-column: 1; grid-row: 4; margin-top: 32px; }
  .hz-hero .hz-wrap > .hz-rating { grid-column: 1; grid-row: 5; }
  .hz-hero .hz-wrap > .hzl-card { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .hz-hero .hz-wrap > p.centro { grid-column: 2; grid-row: 4; align-self: start; margin: 16px 0 0; }
  .hz-hero .hz-wrap > .hz-checks { grid-column: 1 / -1; grid-row: 6; margin-top: 48px; }
}
/* la alternativa al chat: un enlace claro, no un botón suelto */
.hz-hero p.centro { text-align: center; margin: 14px 0 0; }
.hz-hero p.centro .hz-btn--ghost { min-height: 0; padding: 6px 0; border: 0; box-shadow: none !important; background: none; color: var(--tinta-suave); font-weight: 600; font-size: 1rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #555; }
.hz-hero p.centro .hz-btn--ghost:hover { background: none; color: var(--blanco); text-decoration-color: var(--naranja); transform: none; }
.hz-hero .hz-wrap > p.centro { text-align: center !important; }
.hx-cara .hz-case-body { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 20px; }
.hx-cara .hz-case-client { font-size: 1.2rem; line-height: 1.3; }
#casos .hz-cases + p.centro { margin-top: 40px; }

/* =========================================================
   DOS FORMAS DE EXPLICARLO: «fácil» (frases cortas) / «detalle» (texto completo)
   Sin JS se ve el detalle. La elección se guarda en el navegador.
   ========================================================= */
html:not([data-modo]) .hx-facil, html[data-modo="pro"] .hx-facil { display: none !important; }
html[data-modo="facil"] .hx-pro { display: none !important; }
html:not([data-modo]) .hx-facil-s, html[data-modo="pro"] .hx-facil-s { display: none !important; }
/* el selector */
.hx-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0 0; padding: 6px; border: 1px solid var(--linea-osc); border-radius: 14px; background: var(--negro-2); width: fit-content; max-width: 100%; }
.hx-modo-preg { width: 100%; padding: 4px 8px 6px; font-size: .95rem; font-weight: 600; color: var(--tinta-suave); }
.hx-modo button { flex: 1 1 auto; min-height: 46px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-suave); font: 700 1rem var(--letra); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.hx-modo button:hover { color: var(--blanco); }
.hx-modo button[aria-pressed="true"] { background: var(--naranja); color: #111; }
@media (min-width: 900px) { .hz-hero .hz-wrap > .hz-hero-sub { grid-column: 1; grid-row: 3; } .hz-hero .hz-wrap > .hx-modo { grid-column: 1; grid-row: 4; align-self: start; } .hz-hero .hz-wrap > .hz-guarantee { grid-row: 5; } .hz-hero .hz-wrap > .hz-rating { grid-row: 6; } .hz-hero .hz-wrap > .hz-checks { grid-row: 7; } .hz-hero .hz-wrap > p.centro { grid-row: 4; } }
html:not(.js) .hx-modo { display: none; }

/* CASOS (Pedro): delante solo la web en movimiento; clic en la tarjeta = se gira. Sin nombre ni botón a la vista */
.hx-flip { cursor: pointer; }
.hx-cara .hz-case-body { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.hx-cara .hz-case-top { border-bottom: 0; }
.hx-girar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; }
.hx-flip:focus-within .hx-cara, .hx-flip:focus-within .hx-dorso { outline: 3px solid var(--naranja); outline-offset: 3px; }
.hx-dorso { justify-content: center; }

/* =========================================================
   SERVICIOS = «¿Qué te pasa?»: cada fila es un problema del cliente y su solución
   ========================================================= */
.hx-dolores { display: block !important; margin-top: 30px; border-top: 1px solid var(--linea-osc); }
.hx-dolores .hz-service { display: grid !important; grid-template-columns: 1fr; gap: 6px; align-items: center; min-height: 0 !important;
  padding: 24px 4px !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--linea-osc) !important; border-radius: 0 !important;
  transform: none !important; position: relative; }
.hx-dolores .hz-service-icon { display: none !important; }
.hx-dolor { font: 800 clamp(1.3rem, 1rem + 1.1vw, 1.9rem)/1.2 var(--letra-tit); color: var(--blanco); letter-spacing: -.01em; transition: color .2s; }
.hx-dolores .hz-service h3 { font-size: 1.05rem !important; color: var(--naranja); margin: 0 !important; }
.hx-dolores .hz-service h3::after { content: none !important; }
.hx-dolores .hz-service p { margin: 0; font-size: 1rem; }
.hx-dolores .hz-service::after { content: ''; position: absolute; right: 8px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 1px solid #3A3A3A;
  background: currentColor; color: var(--blanco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M17 23h12M24 17l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 46px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M17 23h12M24 17l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 46px no-repeat;
  transition: transform .2s, color .2s; }
.hx-dolores .hz-service:hover .hx-dolor { color: var(--naranja); }
.hx-dolores .hz-service:hover::after { color: var(--naranja); transform: translateX(4px); }
.hx-dolores .hz-service { padding-right: 70px !important; }
@media (min-width: 900px) {
  .hx-dolores .hz-service { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; grid-template-rows: auto auto; padding: 30px 90px 30px 4px !important; }
  .hx-dolor { grid-row: 1 / span 2; }
  .hx-dolores .hz-service h3 { grid-column: 2; align-self: end; }
  .hx-dolores .hz-service p { grid-column: 2; align-self: start; }
}

/* =========================================================
   ANDORRA: dos razones claras · PREGUNTAS: como un chat de WhatsApp
   ========================================================= */
.hx-local-in { max-width: 1160px !important; display: grid; gap: 56px; }
.hx-andorra { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .hx-andorra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } .hx-andorra h2 { grid-row: span 2; } }
.hz-local .hx-andorra h2 + p::first-letter { all: unset; }
.hx-razon { display: flex; align-items: center; gap: 18px; margin: 0 !important; padding: 20px 22px; border: 1px solid var(--linea-osc); border-radius: var(--radio); background: var(--negro-2); font-size: 1.15rem !important; color: var(--blanco) !important; }
.hx-razon-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--naranja); color: #111; display: grid; place-items: center; }

.hx-faq-chat { max-width: 760px; width: 100%; margin: 0 auto; padding: 26px 22px; border: 1px solid var(--linea-osc); border-radius: 22px; background: #111; }
.hx-faq-chat h2 { text-align: center; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin: 0 0 22px; }
.hx-faq-chat .hw-faq { background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 0 14px; overflow: visible; transform: none !important; }
/* la pregunta: burbuja del cliente, a la derecha */
.hx-faq-chat .hw-faq__pregunta { display: flex; justify-content: flex-end; }
.hx-faq-chat .hw-faq__boton { width: auto; max-width: 85%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: #262626; color: var(--blanco); font-weight: 700; font-size: 1.02rem; gap: 12px; }
.hx-faq-chat .hw-faq__boton:hover { background: #303030; }
.hx-faq-chat .hw-faq.esta-abierto .hw-faq__boton { background: #2E2E2E; }
.hx-faq-chat .hw-faq__mas { width: 22px; height: 22px; background: transparent; border: 0; }
.hx-faq-chat .hw-faq__mas::before, .hx-faq-chat .hw-faq__mas::after { width: 10px; background: var(--tinta-suave); }
.hx-faq-chat .hw-faq.esta-abierto .hw-faq__mas { background: transparent; }
.hx-faq-chat .hw-faq.esta-abierto .hw-faq__mas::before, .hx-faq-chat .hw-faq.esta-abierto .hw-faq__mas::after { background: var(--tinta-suave); }
/* la respuesta: burbuja de HAZSEO, a la izquierda, con su avatar */
.hx-faq-chat .hw-faq__resp > div { position: relative; padding-left: 46px; }
.hx-faq-chat .hw-faq__resp > div::before { content: 'H'; position: absolute; left: 0; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--naranja); color: #111; font: 900 .95rem/34px var(--letra-tit); text-align: center; }
.hx-faq-chat .hw-faq__resp p { margin: 10px 0 0 !important; padding: 12px 16px !important; max-width: 88%; border-radius: 16px 16px 16px 4px; background: #1C1C1C; border: 1px solid var(--linea-osc); color: #D9D9D9 !important; font-size: 1rem; }
@media (min-width: 900px) { .hx-andorra { grid-template-rows: auto 1fr; row-gap: 14px; } .hx-andorra .hx-razon { grid-column: 2; align-self: start; } .hx-andorra h2 { grid-column: 1; grid-row: 1 / span 2; } }
.hx-faq-chat h2 { margin-left: auto !important; margin-right: auto !important; max-width: 24ch !important; }

/* CASOS: la tarjeta mide lo que mide la web (16:10 + barra); el dorso se ajusta a esa altura */
.hx-flip-in { display: block; position: relative; min-height: 0; }
.hx-cara { position: relative; }
.hx-cara .hz-case-top { flex: none; display: block; }
.hx-cara .hz-case-top img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; }
.hx-cara .hx-case-vid { top: 24px; left: 0; right: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.hx-dorso { position: absolute; inset: 0; padding: 18px 20px; overflow: hidden; justify-content: center; }
.hx-dorso-sector { font-size: .85rem; }
.hx-dorso-nombre { font-size: 1.3rem; margin: 2px 0 8px; }
.hx-dorso p { font-size: .98rem !important; line-height: 1.5; margin: 0 0 12px; }
.hx-dorso-tags { margin: 0; gap: 6px; }
.hx-dorso-tags li { font-size: .8rem; padding: 4px 10px; }

/* =========================================================
   OPINIONES EN VÍDEO: un reproductor con forma de móvil + la lista de opiniones al lado
   ========================================================= */
.hx-reels.hx-reels-on { display: grid !important; gap: 22px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .hx-reels.hx-reels-on { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; } }
.hx-escenario { width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 36px; border: 2px solid #3A3A3A; padding: 8px; background: #0A0A0A; position: relative; }
.hx-escenario video { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 28px; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; aspect-ratio: auto !important; }
.hx-escenario video.activo { opacity: 1; pointer-events: auto; }
.hx-lista-op { display: grid; gap: 12px; }
.hx-reels-on .hz-testi { cursor: pointer; border-radius: var(--radio) !important; transform: none !important; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 18px 20px; }
.hx-reels-on .hz-testi::before { content: ''; grid-row: span 3; width: 52px; height: 52px; border-radius: 50%; background: var(--negro-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") center / 22px no-repeat; transition: background-color .2s; }
.hx-reels-on .hz-testi.activo { border-color: var(--naranja) !important; }
.hx-reels-on .hz-testi.sonando::before { background-color: var(--naranja); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h3v12H8zM13 6h3v12h-3z' fill='%23111'/%3E%3C/svg%3E"); }
.hx-reels-on .hz-testi-info { padding: 0; display: contents; }
.hx-reels-on .hz-testi-name { grid-column: 2; margin: 0; font-size: 1.15rem; }
.hx-reels-on .hz-testi-role { grid-column: 2; margin: 2px 0 6px; }
.hx-reels-on .hz-testi-quote { grid-column: 2; margin: 0; font-size: 1.05rem; color: #D9D9D9; }

/* =========================================================
   EL PROBLEMA, contado: las frases salen una a una; con «Con nosotros, no.» el móvil se despierta
   ========================================================= */
.hx-problema .hx-movil { transition: border-color .4s, box-shadow .4s; }
.hx-movil-pant { overflow: hidden; transition: background .5s; }
.hx-movil-cero, .hx-movil-txt, .hx-movil-zz { transition: opacity .4s, transform .4s; }
.hx-avisos { position: absolute; left: 10px; right: 10px; top: 46px; display: grid; gap: 8px; }
.hx-aviso { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #262626; color: var(--blanco); font-size: .78rem; line-height: 1.25; text-align: left;
  opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.hx-aviso b { display: block; font-size: .82rem; }
.hx-aviso span { color: #CFCFCF; }
.hx-aviso i { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hx-aviso i.wa { background-color: #25D366; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4z' fill='%23fff'/%3E%3C/svg%3E"); }
.hx-aviso i.cal { background-color: var(--naranja); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 6h14v14H5zM5 10h14M9 4v4M15 4v4M9 15l2 2 4-4'/%3E%3C/svg%3E"); }

/* despierto */
.hx-problema.hx-despierto .hx-movil { border-color: var(--naranja); box-shadow: 0 0 0 6px rgba(255, 107, 0, .12); animation: hx-vibra .5s 2; }
.hx-problema.hx-despierto .hx-movil-pant { background: #121212; }
.hx-problema.hx-despierto .hx-movil-cero, .hx-problema.hx-despierto .hx-movil-txt, .hx-problema.hx-despierto .hx-movil-zz { opacity: 0; transform: scale(.9); }
.hx-problema.hx-despierto .hx-aviso { opacity: 1; transform: none; }
.hx-problema.hx-despierto .hx-aviso:nth-child(2) { transition-delay: .7s; }
.hx-problema.hx-despierto .hx-aviso:nth-child(3) { transition-delay: 1.4s; }
.hx-aviso-llamada i { animation: hx-timbre 1s ease-in-out infinite; }
@keyframes hx-vibra { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-1.5deg); } 40% { transform: translateX(4px) rotate(1.5deg); } 60% { transform: translateX(-3px) rotate(-1deg); } 80% { transform: translateX(3px) rotate(1deg); } }
@keyframes hx-timbre { 0%, 100% { transform: none; } 15% { transform: rotate(-14deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(0); } }

/* las frases, una a una */
html.hx-on .hx-problema-txt > :is(p, .hz-highlight) { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; }
html.hx-on .hx-problema-txt > .hx-visto { opacity: 1 !important; transform: none !important; }
.hx-problema .hx-cita strong, .hx-problema .hx-cita p { transition: background-size .9s; }
@media (prefers-reduced-motion: reduce) { .hx-problema .hx-movil, .hx-aviso-llamada i { animation: none !important; } }
.hx-problema.hx-despierto .hx-movil-zz { animation: none; opacity: 0; }

/* idioma: desplegable sencillo de GTranslate fijo en el pie (ya no flota) */
#gt_float_wrapper { display: none !important; }
.hw-idioma { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta-suave); font-size: .95rem; }
.hw-idioma select.gt_selector { min-height: 40px; padding: 0 34px 0 12px; border-radius: 8px; border: 1px solid #3A3A3A; background: #1A1A1A; color: var(--blanco); font: 600 .95rem var(--letra); cursor: pointer; appearance: auto; }
.hw-idioma select.gt_selector:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
@media (min-width: 720px) { .hw-pie__dentro { grid-template-columns: auto 1fr auto auto !important; } }

/* móvil de madrugada: hora grande, «Tú duermes. Tu web, no.» */
.hx-movil-cero { font-size: 3.4rem !important; letter-spacing: -.02em; }
.hx-movil-txt { text-align: center; padding: 0 14px; line-height: 1.3; margin-top: 6px; }
.hx-aviso i.ojo { background-color: #3A3A3A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); animation: none; }