/* =========================================================
   MARCA 2026 · 22-10-2026 · rework de HAZSEO (Pedro).
   Logo nuevo: HAZSEO en tinta con la A-flecha en verde lima.
   Fondo de papel blanco roto ARRUGADO (/marca/papel.jpg, mosaico sin costura).
   Tinta casi negra para texto; el lima #9BDF2B solo como relleno (botones,
   iconos, marcador bajo palabras), nunca como letra sobre papel.
   Se carga DESPUÉS de web.css, v2.css y hx.css: solo redefine, no borra nada.
   ========================================================= */
:root {
  --papel-base: #EFEAE0;
  --carta: #FBF8F1;            /* tarjetas */
  --carta-2: #F4EFE5;          /* tarjetas al pasar / campos */
  --tinta-m: #151515;
  --lima: #9BDF2B;
  --lima-vivo: #AEEB45;
  --verde-txt: #2E6A00;        /* verde para texto pequeño sobre papel: 5,6:1 */

  /* las variables viejas, reasignadas */
  --negro: #151515;            /* se usaba como texto sobre botones y como fondo: los fondos se corrigen abajo */
  --negro-2: var(--carta);
  --negro-3: var(--carta-2);
  --linea-osc: #D8D0BF;
  --papel: var(--papel-base); --papel-2: var(--papel-base);
  --blanco: #151515;           /* en la web oscura era el color de los titulares */
  --tinta: #1C1B19;
  --tinta-suave: #57524A;
  --claro: #1C1B19;
  --claro-suave: #57524A;
  --naranja: var(--lima);
  --naranja-vivo: var(--lima-vivo);
  --naranja-txt: var(--verde-txt);
  --naranja-tit: var(--tinta-m);
  --letra-tit: 'Montserrat', 'Figtree', system-ui, sans-serif;
  color-scheme: light;
}

/* ---------- fondo de papel arrugado ---------- */
html { background: var(--papel-base); }
body {
  background: var(--papel-base) url('/marca/papel.jpg') repeat;
  background-size: 1024px 1024px;
  color: var(--tinta);
}
@media (min-width: 900px) { body { background-attachment: fixed; } }
::selection { background: var(--lima); color: var(--tinta-m); }

/* las secciones dejan ver el papel */
.hz-hero, .hp-hero, .hz-final, .hp-final, .hw-landing > section, .hw-cabeza, .hz-local,
.hw-landing, main, .hx-bloque { background-color: transparent !important; }

/* ---------- titulares ---------- */
h1, h2, h3 { color: var(--tinta-m); font-family: var(--letra-tit); font-stretch: normal; letter-spacing: -.025em; font-weight: 800; }
/* la palabra destacada: tinta con marcador lima debajo (el gesto de la marca) */
h1 span, h2 span, .hp-hero h1 .o, .hz-hero h2 span, .hz-final h2 span, .hw-cabeza h1 span {
  color: var(--tinta-m) !important;
  background: linear-gradient(transparent 58%, var(--lima) 58%, var(--lima) 92%, transparent 92%) !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em;
}
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(h1, h2) span { background: none !important; }

/* textos que eran naranjas -> verde oscuro legible */
.hz-kicker, .hz-testi-role, .hx-dorso-sector, .hz-highlight strong, .hx-cita strong, .hz-price .hz-note a, .hp-offer a.hp-tlink,
.hz-hero a:not(.hz-btn):not(.hzl-btn), .hz-final a:not(.hzl-btn), .hp-hero a:not(.hzl-btn), .hp-final a:not(.hzl-btn), .hw-cabeza a,
.hw-nav__enlace:hover, .hw-pie__legal a:hover, .hz-service h3::after, .hx-dolores .hz-service h3,
.hx-dolores .hz-service:hover .hx-dolor, .hx-dolores .hz-service:hover::after, .hx-movil-zz,
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque).hx-lista::after { color: var(--verde-txt) !important; }
.hz-step::before, .hp-step::before, .hx-cifras b, .hx-cifras i, .hz-local h2 + p::first-letter { color: var(--tinta-m); }
.hz-rating-stars, .hz-reviews-stars, .hz-review-stars, .hp-stars, .hx-estrellas { color: #E7A400; }
.hz-kicker::before { background: var(--lima); }
.hz-service-icon, .hz-check-icon { color: var(--tinta-m); background: var(--lima) !important; }
.hz-inc li::before { background: var(--lima); color: var(--tinta-m); }
.hx-sello { border-color: var(--tinta-m); }
a { color: var(--verde-txt); }
:focus-visible { outline-color: var(--tinta-m); }

/* ---------- botones: lima con letra tinta ---------- */
.hw-boton, .hzl-btn, .hz-btn { background: var(--lima); color: var(--tinta-m) !important; box-shadow: inset 0 0 0 2px var(--tinta-m), 3px 3px 0 var(--tinta-m); }
.hw-boton:hover, .hzl-btn:hover, .hz-btn:hover { background: var(--lima-vivo); box-shadow: inset 0 0 0 2px var(--tinta-m), 5px 5px 0 var(--tinta-m); }
.hz-btn--ghost { background: transparent; color: var(--tinta-m) !important; box-shadow: inset 0 0 0 2px var(--tinta-m); }
.hz-hero p.centro .hz-btn--ghost { box-shadow: none !important; background: none; }

/* ---------- cabecera y pie ---------- */
.hw-cab { background: rgba(239, 234, 224, .9) !important; border-bottom: 1px solid var(--linea-osc); color: var(--tinta-m); }
.hw-cab.hw-cab--sombra, .hw-cab[data-sombra] { box-shadow: 0 10px 30px -22px rgba(0,0,0,.35); }
.hw-logo { display: inline-flex; align-items: center; }
.hw-logo img { height: 28px; width: auto; display: block; }
.hw-logo--pie img { height: 24px; }
.hw-burger { background: var(--carta); color: var(--tinta-m); box-shadow: inset 0 0 0 1.5px var(--linea-osc); }
.hw-sub { background: var(--carta); box-shadow: 0 24px 50px -24px rgba(0,0,0,.3); }
.hw-pie { background: transparent; border-top: 1px solid var(--linea-osc); color: var(--tinta); }
.hw-idioma select.gt_selector { background: var(--carta); color: var(--tinta-m); border-color: var(--linea-osc); }

/* ---------- tarjetas y cajas que eran negras ---------- */
.hz-step, .hp-step, .hz-case, .hp-case, .hz-slots, .hw-faq, .hp-vc, .hp-risk span, .hp-qa, .hw-texto .hw-faq,
.hzl-card, .hz-highlight, .hz-testi, .hp-tcard, .hz-service, .hz-price, .hp-offer, .hz-check, .hz-review-card,
.hx-razon, .hx-faq-chat, .hx-chat, .hw-texto th {
  background: var(--carta) !important; color: var(--tinta);
  border-color: var(--linea-osc);
}
.hz-review-card, .hz-service, .hz-check, .hz-step, .hz-case, .hzl-card, .hx-faq-chat, .hx-chat, .hx-razon, .hz-testi { border: 1.5px solid var(--linea-osc); }
.hz-price, .hp-offer { border: 2px solid var(--tinta-m); box-shadow: 6px 6px 0 var(--tinta-m); }
.hzl-in { background: #fff !important; border: 1.5px solid #CFC6B3 !important; color: var(--tinta-m); }
.hzl-in::placeholder { color: #8b857a; }
.hzl-ok { background: rgba(155, 223, 43, .25); }
.hx-chat-cab { background: var(--carta-2); }
.hx-chat .hzl-title { background: var(--carta-2); color: var(--tinta-m); }
.hx-chat-av, .hx-faq-chat .hw-faq__resp > div::before, .hx-paso-ico, .hx-razon-ico, .hx-modo button[aria-pressed="true"],
.hz-check:hover .hz-check-icon, .hz-service:hover .hz-service-icon, .hx-girar:hover, .hx-girar:focus-visible,
.hw-faq.esta-abierto .hw-faq__mas, .hz-badge, .hw-saltar { background: var(--lima) !important; color: var(--tinta-m) !important; }
.hx-chat-quien i { color: var(--verde-txt); }
.hx-faq-chat .hw-faq__boton { background: var(--tinta-m); color: #F4F1EA; }
.hx-faq-chat .hw-faq__resp p { background: var(--carta-2) !important; color: var(--tinta) !important; }
.hx-aviso { background: var(--tinta-m); color: #F4F1EA; }
.hx-dorso-tags li { background: var(--carta-2); border-color: var(--linea-osc); }
.hx-girar { border-color: var(--tinta-m); }
.hx-pasos .hz-step::before { color: #B8B0A0; }
.hw-faq__mas::before, .hw-faq__mas::after { background: var(--tinta-m); }
.hz-case-top, .hp-case-top { background: #E9E3D6; border-bottom-color: var(--linea-osc); }
.hz-case-top::before, .hp-case-top::before { background: #C9C0AE; box-shadow: 12px 0 0 #C9C0AE, 24px 0 0 #C9C0AE; }
.hz-case-top::after { background: #F6F2EA; color: #6b665d; }
.hx-movil, .hx-escenario { background: var(--tinta-m); border-color: var(--tinta-m); }
.hx-movil-pant { background: #222; }
.hx-movil-cero { color: #F4F1EA; }
.hp-trust span { background: var(--carta); }
.hw-progreso span, .hx-pasos-linea i { background: var(--lima); }

/* el «plano de obra» de la animación, en tonos papel */
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) {
  background: repeating-linear-gradient(90deg, #E2DACA 0 100%) !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-color: #C9C0AE; }
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-color: #C9C0AE !important; }
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(.hzl-btn, .hz-btn, .hw-boton) { box-shadow: inset 0 0 0 2px #C9C0AE !important; }

/* el marcador solo en titulares: ni estrellas ni iconos de Google */
.hz-reviews-stars span, .hz-review-card span, .hz-reviews-stars, .hz-review-card h2 span, .hz-review-card h3 span { background: none !important; }

/* páginas interiores: el contenedor de texto y la banda del formulario también son papel */
.hw-papel, .hw-banda-lead, .hz-section, .hz-section:nth-of-type(odd), .hz-local, .hp-sec, .hp-alt, .hz-reviews, .hz-final, .hp-final { background: transparent !important; color: var(--tinta); }
.hw-texto, .hw-texto p, .hw-texto li { color: var(--tinta); }
.hw-texto h2, .hw-texto h3 { color: var(--tinta-m); }

/* =========================================================
   ESTILO «TRABAJA CON NOSOTROS» PARA TODA LA WEB (Pedro 22-10-2026: «sencillo, simple, fresco»).
   Tarjetas con borde de tinta y sombra dura; la palabra destacada de cada titular en etiqueta lima
   (como «agencia de marketing»), nada de subrayado de rotulador.
   ========================================================= */
h1 span, h2 span, .hp-hero h1 .o, .hz-hero h2 span, .hz-final h2 span, .hw-cabeza h1 span {
  background: var(--lima) !important; color: var(--tinta-m) !important;
  border: 3px solid var(--tinta-m); border-radius: 12px; box-shadow: 4px 4px 0 var(--tinta-m);
  padding: 0 .22em .06em; display: inline-block; transform: rotate(-1.5deg); margin: .08em 0;
  line-height: 1.1;
}
html.hx-on :is(.hw-landing > section, .hw-cabeza, .hx-bloque):not(.hx-lista) :is(h1, h2) span { border-color: transparent; box-shadow: none; }
.hz-step, .hp-step, .hz-case, .hp-case, .hz-service, .hz-check, .hz-review-card, .hzl-card, .hx-faq-chat, .hx-chat, .hx-razon,
.hz-testi, .hp-vc, .hp-qa, .hw-faq, .hz-highlight, .hx-tarjeta, .hz-slots, .hz-price, .hp-offer {
  border: 2px solid var(--tinta-m) !important; border-radius: 18px; box-shadow: 5px 5px 0 var(--tinta-m) !important;
}
.hz-service:hover, .hz-step:hover, .hz-case:hover, .hz-check:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta-m) !important; }
.hx-dolores .hz-service { box-shadow: none !important; border-width: 0 0 2px !important; border-radius: 0; }
.hx-tarjeta { background: var(--carta); padding: 20px 18px; }
.hzl-in, .hzl-card input { border: 1.5px solid #CFC6B3 !important; border-radius: 12px !important; }
/* textos claros que no se leían sobre papel */
.hz-testi-quote, .hx-reels .hz-testi-quote, .hz-hero-sub, .hzl-note, .hz-note, .hw-meta { color: var(--tinta-suave) !important; }
.hz-testi:not(.sonando) .hz-testi-quote { opacity: 1 !important; }
.hz-reviews .hx-estrellas, .hz-reviews-stars, .hz-reviews-stars *, .hx-estrellas { color: #E7A400 !important; }
.hx-cifras > * { border: 2px solid var(--tinta-m); box-shadow: 4px 4px 0 var(--tinta-m); }
/* contraste (barrido 22-10-2026, 2ª pasada) */
.hx-movil-hora, .hx-movil-txt { color: #D9D4CA !important; }
.hx-movil-zz { color: var(--lima) !important; }
.hz-reviews-stars, .hz-reviews-stars *, .hx-estrellas, .hz-review-stars, .hp-stars, .hz-rating-stars { color: #A8740A !important; }
.hz-reviews-stars strong { color: var(--tinta-m) !important; }
.hx-rev-g { color: var(--tinta-m) !important; }

/* =========================================================
   CASOS DE ÉXITO EN MÓVIL (22-10-2026): captura vertical de cada web dentro de un teléfono,
   que baja sola con CSS. Sin vídeos (pesaban ~5 MB y hacían lenta la portada).
   ========================================================= */
#casos .hz-cases, .hz-cases { gap: 20px; }
@media (min-width: 1000px) { .hz-cases { grid-template-columns: repeat(5, 1fr) !important; } .hz-cases .hz-case, .hz-cases .hz-case:nth-child(4) { grid-column: auto !important; } }
@media (max-width: 999px) {
  .hz-cases { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: minmax(200px, 58%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; -webkit-overflow-scrolling: touch; }
  .hz-cases .hz-case { scroll-snap-align: center; grid-column: auto !important; }
}
.hz-case.hx-flip { border: 0 !important; box-shadow: none !important; background: none !important; }
.hz-case-top.hx-caso-movil {
  position: relative; aspect-ratio: 9 / 19 !important; padding: 0 !important; overflow: hidden; container-type: size;
  border: 7px solid var(--tinta-m) !important; border-radius: 32px; background: var(--tinta-m) !important; box-shadow: 6px 6px 0 rgba(21,21,21,.25);
}
.hz-case-top.hx-caso-movil::before { content: ''; position: absolute; z-index: 2; top: 6px; left: 50%; width: 34%; height: 14px; margin-left: -17%; border-radius: 999px; background: var(--tinta-m); box-shadow: none; }
.hz-case-top.hx-caso-movil::after { content: attr(data-dom); position: absolute; z-index: 2; left: 50%; right: auto; top: auto; bottom: 10px; transform: translateX(-50%);
  height: auto; padding: 4px 10px; border-radius: 999px; background: var(--lima); color: var(--tinta-m); font: 700 .72rem/1.2 var(--letra); white-space: nowrap; border: 2px solid var(--tinta-m); }
.hx-cara .hz-case-top.hx-caso-movil img, .hz-case-top.hx-caso-movil img {
  position: absolute; top: 0; left: 0; width: 100% !important; height: auto !important; aspect-ratio: 360 / 2215 !important; object-fit: fill !important;
  transform: none; animation: hx-sube 16s ease-in-out infinite alternate; will-change: transform;
}
@keyframes hx-sube { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
@media (prefers-reduced-motion: reduce) { .hz-case-top.hx-caso-movil img { animation: none; } }
.hx-flip .hx-dorso { border: 2px solid var(--tinta-m); border-radius: 32px; box-shadow: 5px 5px 0 var(--tinta-m); background: var(--carta); }
.hz-cases .hx-cara { background: transparent !important; border: 0 !important; box-shadow: none !important; }