/* ==========================================================================
   Portada — ajustes de calidad. Solo la carga index.html, así que nada de
   esto afecta al resto de páginas (el chatbot también usa .cards).
   ========================================================================== */

/* ---- 1 · El trabajo entra en la primera pantalla ------------------------
   En un portátil (1440×900) la primera pantalla era solo texto: las webs de
   ejemplo empezaban justo bajo el pliegue. Para un estudio de diseño lo primero
   que tiene que verse es trabajo. Titular algo más contenido y menos aire
   arriba, y el escaparate de dispositivos asoma sin hacer scroll. */
@media (min-width: 1024px) {
  .hero { padding-top: 112px; }
  .hero h1 { font-size: clamp(44px, 5.4vw, 74px); }
  .hero__lede { margin-top: 20px; }
  .hero__actions { margin-top: 30px; }
  .hero__showcase { margin-top: 40px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { padding-top: 100px; }
  .hero h1 { font-size: clamp(44px, 4.8vw, 64px); }
}

/* ---- 2 · "Lo que consigues": mosaico con ilustraciones (ver al final) ---- */

/* El titular reparte sus líneas: en móvil dejaba "verse" solo en una. */
.hero h1 { text-wrap: balance; }
/* En móvil la frase en cursiva puede ocupar dos líneas (solo entre palabras). */
@media (max-width: 600px) { .hero h1 .grad { white-space: normal; } }

/* ---- 3 · Collage de proyectos ------------------------------------------
   Las tres capturas estaban pensadas superpuestas, pero sin fila asignada la
   segunda caía debajo de la primera y dejaba media pantalla vacía. */
@media (min-width: 880px) {
  .mbp-1, .mbp-2 { grid-row: 1; }
  .mbp-3 { grid-row: 2; margin-top: -38px; }
}

/* ---- 4 · "¿Hablamos?" en móvil ------------------------------------------
   En pantalla estrecha el aviso tapaba texto del hero; el botón ya se ve. */
@media (max-width: 600px) { .fmenu__hint { display: none; } }

/* ==========================================================================
   Portada más visual (octubre 2026)
   ========================================================================== */

/* ---- Titular y cifras: sin serif cursiva de acento -----------------------
   La palabra destacada va en la misma serif, recta, con marcador debajo. */
.hero h1 .grad {
  font-style: normal; font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
  background-image: linear-gradient(120deg, var(--terra-soft), var(--terra-soft));
  background-repeat: no-repeat; background-position: 0 90%; background-size: 100% 38%;
  animation: marcaH1 .9s cubic-bezier(.6, 0, .2, 1) .7s both;
}
@keyframes marcaH1 { from { background-size: 0% 38%; } to { background-size: 100% 38%; } }
.stat b em { font-style: normal; font-family: inherit; font-weight: 650; color: var(--terra-link); }

/* ---- Escaparate del hero: etiquetas flotantes y brillo del sector -------- */
.hero__mockup::before {
  content: ""; position: absolute; inset: 4% 2% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--tinte, #b07d4f), transparent 72%);
  opacity: .22; filter: blur(30px);
}
.hchip {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: 999px; background: rgba(255,253,249,.94);
  border: 1px solid var(--border); box-shadow: 0 12px 28px -12px rgba(60,40,15,.32);
  font-size: 13px; font-weight: 550; color: var(--ink); white-space: nowrap;
  animation: hflota 6s ease-in-out infinite;
}
.hchip svg { width: 16px; height: 16px; color: var(--terra-link); flex: none; }
.hchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(35,193,122,.18); }
.hchip--1 { top: -4%; left: 9%; }
.hchip--2 { top: 18%; right: -2%; animation-delay: -2s; }
.hchip--3 { bottom: 20%; left: 3%; animation-delay: -4s; }
@keyframes hflota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* En el móvil solo queda «Abierto ahora», a caballo del borde inferior del portátil: las otras taparían la web del móvil */
@media (max-width: 760px) { .hchip--2, .hchip--3 { display: none; } .hchip--1 { top: auto; bottom: 78px; left: 3%; } .hchip { font-size: 12px; padding: 7px 12px 7px 9px; } }

/* ---- Lo que consigues: mosaico ------------------------------------------ */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 0; }
.bn {
  position: relative; display: flex; flex-direction: column; gap: 22px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 18px 18px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
@media (hover: hover) and (pointer: fine) { .bn:hover, .js .bn.is-visible:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } }
.js .bn { transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.bn__ill {
  position: relative; min-height: 210px; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 20% 0%, #fbfbfa, #f1f1ee); padding: 18px;
}
.bn__txt { padding: 0 8px; }
.bn h3 { font-size: 21px; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.2; }
.bn p { margin: 0; font-size: 15px; color: var(--text-muted); max-width: 46ch; }
@media (min-width: 640px) and (max-width: 959px) { .bento { grid-template-columns: repeat(2, 1fr); } .bn--google { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bn--google { grid-column: 1 / 3; grid-row: 1; }
  .bn--movil { grid-column: 3; grid-row: 1 / 3; }
  .bn--rapida { grid-column: 1; grid-row: 2; }
  .bn--confianza { grid-column: 2; grid-row: 2; }
  .bn--cambios { grid-column: 1 / 3; grid-row: 3; }
  .bn--wa { grid-column: 3; grid-row: 3; }
  .bn--movil .bn__ill { flex: 1; min-height: 330px; }
  .bn--google .bn__ill { min-height: 250px; }
}

/* Google: el resultado del negocio sube al primer puesto */
.serp { width: min(100%, 460px); display: grid; gap: 12px; }
.serp__bar { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px -8px rgba(60,40,15,.25); font-size: 14px; color: var(--text-muted); }
.serp__bar svg { width: 16px; height: 16px; flex: none; color: var(--text-faint); }
.serp__lista { position: relative; display: grid; gap: 10px; }
.serp__res { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.7); }
.serp__ico { width: 34px; height: 34px; border-radius: 10px; background: #e9e9e6; flex: none; }
.serp__cuerpo { display: grid; gap: 5px; min-width: 0; flex: 1; }
.serp__cuerpo b { font-size: 14.5px; font-weight: 650; color: var(--ink); min-height: 9px; }
.serp__sub { font-size: 12.5px; color: var(--ok-text); min-height: 7px; }
.serp__res--g .serp__cuerpo b { height: 9px; width: 55%; border-radius: 5px; background: #e3e3df; }
.serp__res--g .serp__sub { height: 7px; width: 80%; border-radius: 5px; background: #eeeeea; }
.serp__res--g { opacity: .75; }
.serp__res--top { position: relative; z-index: 2; background: #fff; border: 1px solid #ecdcc6; box-shadow: 0 16px 34px -14px rgba(120,80,30,.45); }
.serp__res--top .serp__ico { background: linear-gradient(135deg, var(--terra), #e0a766); }
.serp__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.serp__pills em { font-style: normal; font-size: 11.5px; font-weight: 550; padding: 3px 10px; border-radius: 999px; background: var(--terra-soft); color: var(--terra-link); }
.serp__rank { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 650; }
.serp__res--top { transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
.serp__res--g { transition: opacity .6s ease .9s; }
.js .bn:not(.is-visible) .serp__res--top { transform: translateY(78px); }
.js .bn:not(.is-visible) .serp__res--g { opacity: 0; }

/* Móvil */
.tel { position: relative; width: 150px; padding: 8px; border-radius: 30px; background: #1b1812; box-shadow: 0 28px 44px -20px rgba(40,25,5,.55); }
.tel__notch { position: absolute; top: 14px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 9px; background: rgba(255,255,255,.28); z-index: 2; }
.tel__web { display: grid; gap: 9px; align-content: start; height: 262px; padding: 26px 12px 12px; border-radius: 23px; background: #ffffff; overflow: hidden; }
.tel__nav { display: flex; justify-content: space-between; align-items: center; }
.tel__nav i { height: 7px; border-radius: 4px; background: #e3e3df; }
.tel__nav i:first-child { width: 36px; background: var(--ink); }
.tel__nav i:last-child { width: 18px; }
.tel__hero { height: 74px; border-radius: 12px; background: linear-gradient(135deg, #d9a56a, #b07d4f); }
.tel__l { height: 8px; width: 90%; border-radius: 5px; background: #ebebe7; }
.tel__l--c { width: 62%; }
.tel__btn { position: relative; height: 26px; width: 100%; border-radius: 999px; background: var(--ink); }
.tel__toque { position: absolute; right: 22px; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 0; border-radius: 50%; background: rgba(255,255,255,.9); }
.tel__toque::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: toque 2.2s ease-out infinite; }
@keyframes toque { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.tel__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tel__fotos i { height: 46px; border-radius: 10px; background: #e9e9e6; }
.tel__fotos i:last-child { background: #e1e8dc; }

/* Velocidad */
.anillo { position: relative; width: 150px; height: 150px; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 9; }
.anillo__bg { stroke: #e8e8e4; }
.anillo__fg { stroke: var(--terra); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 18; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .25s; }
.js .bn:not(.is-visible) .anillo__fg { stroke-dashoffset: 100; }
.anillo__n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.anillo__n b { font-family: var(--font-serif); font-weight: 500; font-size: 38px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.anillo__n small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* Confianza */
.url { display: grid; gap: 14px; justify-items: center; }
.url__bar { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px 0 15px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 20px -10px rgba(60,40,15,.3); font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.url__bar svg { width: 15px; height: 15px; color: var(--ok-text); }
.url__ok { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 9px; border-radius: 999px; background: #e3f3e9; color: var(--ok-text); font-size: 12.5px; font-weight: 600; transition: opacity .5s ease .6s, transform .6s var(--ease) .6s; }
.url__ok svg { width: 14px; height: 14px; }
.js .bn:not(.is-visible) .url__ok { opacity: 0; transform: translateY(8px); }

/* Cambios rápidos */
.cam { display: grid; gap: 12px; justify-items: start; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 24px -12px rgba(60,40,15,.28); min-width: 270px; }
.cam__t { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.cam__fila { display: flex; align-items: center; gap: 12px; font-size: 18px; font-variant-numeric: tabular-nums; }
.cam__fila s { color: var(--text-faint); text-decoration-thickness: 2px; text-decoration-color: #c9a37a; }
.cam__fila svg { width: 16px; height: 16px; color: var(--text-faint); }
.cam__fila b { color: var(--ink); font-weight: 650; transition: opacity .5s ease .5s, transform .6s var(--ease) .5s; }
.cam__hecho { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; background: #e3f3e9; color: var(--ok-text); font-size: 12.5px; font-weight: 600; transition: opacity .5s ease .9s, transform .6s var(--ease) .9s; }
.cam__hecho svg { width: 13px; height: 13px; }
.js .bn:not(.is-visible) .cam__fila b, .js .bn:not(.is-visible) .cam__hecho { opacity: 0; transform: translateX(-8px); }

/* WhatsApp */
.wa { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 12px 26px -12px rgba(30,100,60,.4); font-size: 14px; font-weight: 650; color: var(--ink); }
.wa__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #25a85f; color: #fff; }
.wa__ico svg { width: 17px; height: 17px; }
.wa__onda { position: absolute; left: 10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 2px solid #25a85f; animation: toque 2.4s ease-out infinite; pointer-events: none; }

/* ---- Objeciones: icono ------------------------------------------------- */
.sw-o__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--terra-soft); color: var(--terra-link); margin-bottom: 16px; }
.sw-o__ico svg { width: 20px; height: 20px; }

/* ---- Precios: una línea de qué es cada uno ------------------------------ */
.pm__desc { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); max-width: 26ch; }

/* ---- Zonas: mapa de Gipuzkoa ------------------------------------------- */
.zmap__grid { display: grid; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; }
@media (min-width: 900px) { .zmap__grid { grid-template-columns: 5fr 6fr; gap: 56px; } }
.zmap__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zmap__chips .btn { padding: 8px 15px; font-size: 14px; min-height: 0; }
.zmap__chips .btn.is-hot { background: var(--ink); color: #fff; border-color: var(--ink); }
.zmap__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.zmap__leg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.zmap__leg i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(25,23,18,.12); }
.zmap__fig { margin: 0; }
.zmap__svg { display: block; width: 100%; height: auto; overflow: visible; }
.zm-prov { stroke: var(--border-strong); stroke-width: 1.4; stroke-linejoin: round; }
.zm-ln { stroke: var(--terra); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .32; fill: none; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 45ms + .3s); }
.js .zmap__fig:not(.is-visible) .zm-ln { stroke-dashoffset: 1; }
.zm-p { cursor: pointer; outline: none; }
.zm-h { fill: transparent; }
.zm-d { fill: var(--terra); stroke: #ffffff; stroke-width: 2.5; transition: r .25s var(--ease), fill .2s; }
.zm-p--g .zm-d { r: 6.5; }
.zm-l { font-family: Geist, system-ui, sans-serif; font-size: 13.5px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .2s; pointer-events: none; }
.zm-p--g .zm-l { opacity: .9; }
.zm-p:hover .zm-l, .zm-p:focus-visible .zm-l, .zm-p.is-hot .zm-l { opacity: 1; }
.zm-p:hover .zm-d, .zm-p:focus-visible .zm-d, .zm-p.is-hot .zm-d { r: 9; fill: var(--ink); }
.zm-hq__dot { fill: var(--ink); stroke: #ffffff; stroke-width: 3; }
.zm-hq__pulso { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: zmPulso 2.8s ease-out infinite; }
.zm-hq__pulso--2 { animation-delay: 1.4s; }
@keyframes zmPulso { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }
.zm-hq__t { font-family: Geist, system-ui, sans-serif; font-size: 15px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #ffffff; stroke-width: 4.5px; stroke-linejoin: round; }
@media (max-width: 600px) { .zm-l { font-size: 19px; } .zm-hq__t { font-size: 21px; } .zm-p--g .zm-l { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .grad { animation: none; }
  .hchip, .tel__toque::after, .wa__onda, .zm-hq__pulso { animation: none; }
  .anillo__fg, .url__ok, .cam__fila b, .cam__hecho, .zm-ln, .serp__res--top, .serp__res--g { transition: none; }
  .bn { transition: none; }
}

.bn--movil .tel { width: 184px; border-radius: 34px; }
.bn--movil .tel__web { height: 330px; gap: 11px; padding-top: 30px; border-radius: 27px; }
.bn--movil .tel__hero { height: 96px; }
.bn--movil .tel__fotos i { height: 62px; }
@media (max-width: 959px) { .bn--movil .tel { width: 160px; } .bn--movil .tel__web { height: 280px; } .bn--movil .tel__hero { height: 80px; } .bn--movil .tel__fotos i { height: 50px; } }

/* ---- Preguntas frecuentes: ahora en styles.css (.hfaq), compartidas con precios y contacto ---- */

.zmap__fuera { margin: 18px 0 0; font-size: 14.5px; color: var(--text-muted); }

/* ---- Escaparate: enlace claro y móvil más fácil (octubre 2026) ------------ */
.hero__ver {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 6px auto 0;
  padding: 11px 22px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: transform .2s var(--ease), background .2s;
}
.hero__mockup { display: flex; flex-direction: column; align-items: stretch; }
.hero__ver { align-self: center; position: relative; z-index: 6; }
@media (hover: hover) and (pointer: fine) { .hero__ver:hover { transform: translateY(-2px); background: #000; } }
@media (max-width: 760px) {
  .hero__showcase { gap: 18px; margin-top: 32px; }
  .hero__sectors .marquee-label { margin-bottom: 10px; }
  .hsx-row { flex-wrap: wrap; overflow: visible; gap: 8px; margin-top: 12px; padding-bottom: 0; }
  .hsx { width: auto; flex: 1 1 auto; justify-content: center; padding: 10px 14px; }
  .dv-laptop { width: 100%; }
  .dv-phone { width: 30%; right: 3%; bottom: -10px; }
  .hero__ver { width: 100%; margin-top: 14px; padding: 15px 22px; font-size: 15px; }
}
/* Destacados: una columna limpia en el móvil */
@media (max-width: 879px) {
  .mini-board { gap: 30px; }
  .mbp { margin: 0 !important; }
}

/* ---- «Escribe tu negocio y mira tu web» (17/10/2026, assets/prueba.js) -----
   Va dentro de la oferta «Una muestra de tu web antes de decidir»: el texto y
   el formulario a la izquierda, el boceto en portátil y móvil a la derecha, y
   los tres pasos debajo. */
.sw-oferta.prueba { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "form" "escena" "acciones"; align-items: start; row-gap: 24px; scroll-margin-top: 90px; }
@media (min-width: 980px) {
  .sw-oferta.prueba { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "txt escena" "form escena" "acciones escena"; column-gap: clamp(36px, 4vw, 60px); row-gap: 22px; }
}
.prueba__txt { grid-area: txt; }
.prueba__txt p + p { margin-top: 12px; }
.prueba .prueba__intro { color: var(--ink); }
.prueba__form { grid-area: form; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prueba__campo { display: grid; gap: 6px; min-width: 0; }
.prueba__campo--nombre { grid-column: 1 / -1; }
.prueba__campo > span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.prueba__campo input, .prueba__campo select { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.prueba__campo select { appearance: none; padding-right: 38px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191712' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; cursor: pointer; }
.prueba__campo input:focus, .prueba__campo select:focus { outline: 2px solid var(--terra); outline-offset: 1px; border-color: var(--ink); }
.prueba__escena { grid-area: escena; min-width: 0; }
.prueba__marcos { position: relative; padding: 0 0 46% 0; }
@media (min-width: 600px) { .prueba__marcos { padding-bottom: 12%; } }
@media (min-width: 980px) { .prueba__escena { align-self: center; } }
.prueba__marcos .marco-portatil { width: 100%; }
@media (min-width: 600px) { .prueba__marcos .marco-portatil { width: 88%; } }
.prueba__marcos .marco-movil { position: absolute; right: 2%; bottom: 0; width: 38%; padding: 14px 5px 9px; border-radius: 22px; }
.prueba__marcos .marco-movil::before { top: 5px; height: 4px; }
.prueba__marcos .marco-movil__pantalla { border-radius: 15px; }
@media (min-width: 600px) { .prueba__marcos .marco-movil { right: 0; width: 25%; } }
.prueba__acciones { grid-area: acciones; }
.prueba__acciones .sw-oferta__btns { margin-top: 0; }
.prueba .prueba__credito { margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint); }
.prueba .prueba__nota { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.prueba__copiar { display: inline; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--terra-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prueba__aviso { display: block; font-size: 13.5px; color: var(--ok-text); overflow-wrap: anywhere; }
.prueba__aviso:empty { display: none; }
.prueba .sw-pasos { grid-area: pasos; }
@media (min-width: 760px) { .prueba .sw-pasos { grid-template-columns: repeat(3, 1fr); gap: 10px; } .prueba .sw-pasos li + li { margin-top: 0; } }

/* El boceto: una portada de verdad en miniatura, con la letra y el color del sector */
.maq { --acento: #9b2a1b; --sobre: #fff; --fuente: var(--font-sans); --peso: 600; --n: 10; --w: 8; position: absolute; inset: 0; overflow: hidden; container-type: inline-size; background: #2b2722; color: #fff; text-align: left; }
.maq__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.maq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 8, .55) 0%, rgba(12, 10, 8, .12) 30%, rgba(12, 10, 8, .2) 50%, rgba(12, 10, 8, .78) 100%); }
.maq__barra { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 3cqi; padding: 3cqi 4cqi; font-size: max(6px, 1.9cqi); letter-spacing: .06em; text-transform: uppercase; }
.maq__marca { min-width: 0; max-width: 42%; overflow: hidden; font-family: var(--fuente); font-weight: var(--peso); font-size: max(8px, 2.7cqi); letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.maq__menu { min-width: 0; margin-left: auto; overflow: hidden; opacity: .92; text-overflow: ellipsis; white-space: nowrap; }
.maq__tel { flex: none; padding: 1.2cqi 2.4cqi; border-radius: 3px; background: var(--acento); color: var(--sobre); font-weight: 600; }
.maq__hamb { display: grid; gap: 3px; margin-left: auto; }
.maq__hamb i { display: block; width: 14px; height: 2px; border-radius: 2px; background: #fff; }
.maq__texto { position: absolute; z-index: 2; left: 5.5cqi; right: 5.5cqi; bottom: 6.5cqi; display: grid; justify-items: start; gap: 2.2cqi; }
.maq__lugar { font-size: max(7px, 2.1cqi); opacity: .9; }
.maq__nombre { max-width: 100%; font-family: var(--fuente); font-weight: var(--peso); font-size: clamp(12px, min(calc(150cqi / var(--n)), calc(135cqi / var(--w))), 12.5cqi); line-height: .98; letter-spacing: -.005em; text-transform: uppercase; overflow-wrap: break-word; text-wrap: balance; }
.maq__linea { max-width: 46ch; font-size: max(7.5px, 2.3cqi); line-height: 1.35; opacity: .95; }
.maq__boton { margin-top: 1cqi; padding: 1.8cqi 3.2cqi; border-radius: 4px; background: var(--acento); color: var(--sobre); font-size: max(7.5px, 2.2cqi); font-weight: 600; }
/* en el móvil la pantalla es estrecha: todo un poco más grande en proporción */
.marco-movil .maq__barra { padding: 7cqi 7cqi; }
.marco-movil .maq__marca { max-width: 75%; font-size: max(8px, 7cqi); }
.marco-movil .maq__texto { left: 8cqi; right: 8cqi; bottom: 10cqi; gap: 4cqi; }
.marco-movil .maq__lugar { font-size: max(7px, 5.4cqi); }
.marco-movil .maq__nombre { font-size: clamp(11px, min(calc(260cqi / var(--n)), calc(122cqi / var(--w))), 20cqi); }
.marco-movil .maq__linea { font-size: max(7.5px, 5.8cqi); }
.marco-movil .maq__boton { padding: 3.6cqi 6cqi; font-size: max(7.5px, 5.6cqi); }
.marco-movil .maq__foto { object-position: 40% center; }
.prueba--cambia .maq__nombre { animation: prb-nombre .5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes prb-nombre { from { opacity: .2; transform: translateY(8%); filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) { .prueba--cambia .maq__nombre { animation: none; } }

/* Accesos nuevos de la portada: «¿Y la tuya? Mide cuánto tarda» y las webs vivas */
.bn__link { display: inline-block; margin-top: 10px; padding: 8px 0; font-size: 14.5px; font-weight: 600; color: var(--terra-link); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.bn__link:hover { text-decoration-color: currentColor; }
.vivas-link { max-width: 1080px; margin: -6px auto 26px; text-align: center; font-size: 15.5px; font-weight: 600; }
.vivas-link a { display: inline-block; padding: 8px 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 5px; }
.vivas-link a:hover { text-decoration-color: var(--terra-link); }

/* ==========================================================================
   Portada más visual (17/10/2026): accesos bajo el héroe e imágenes reales
   en «Una web que trabaja por tu negocio»
   ========================================================================== */
.atajos { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.atajos__in { display: flex; justify-content: center; gap: 4px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.atajos__in::-webkit-scrollbar { display: none; }
.atajos a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 15px 22px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.atajos a + a { border-left: 1px solid var(--border); }
.atajos a::after { content: "↓"; font-size: 13px; color: var(--text-faint); transition: transform .2s var(--ease); }
.atajos a:hover { color: var(--ink); }
.atajos a:hover span { background-image: linear-gradient(var(--terra-soft), var(--terra-soft)); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 85%; }
.atajos a:hover::after { transform: translateY(2px); color: var(--ink); }
@media (max-width: 760px) { .atajos__in { justify-content: flex-start; padding: 0 8px; } .atajos a { padding: 14px 16px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .atajos a::after { transition: none; } }

/* Google: la ficha del negocio con sus fotos */
.serp__res--top { display: grid; gap: 10px; }
.serp__fila { display: flex; align-items: center; gap: 12px; }
.serp__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.serp__fotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.serp__res--g .serp__ico { background: #ecebe7; }
.js .bn:not(.is-visible) .serp__res--top { transform: translateY(40px); }

/* Móvil: la web de Errotatxo dentro de un teléfono */
.bn__ill--tel { background: linear-gradient(160deg, #f3ece2, #e9dfd2); }
.bn-tel { width: 168px; padding: 16px 6px 10px; border-radius: 28px; }
.bn-tel .marco-movil__pantalla { border-radius: 20px; }
.bn-tel .marco-movil__pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.bn--movil .bn-tel { width: 186px; }
@media (max-width: 959px) { .bn--movil .bn-tel { width: 150px; } }
.bn-cap { position: absolute; left: 14px; bottom: 14px; padding: 6px 11px; border-radius: 8px; background: rgba(20,17,12,.84); color: #fff; font-size: 12.5px; font-weight: 600; }

/* Confianza: la web de A.Berri en el navegador, con su candado */
.bn__ill--web { padding: 18px 18px 0; place-items: end center; background: linear-gradient(160deg, #eef1ef, #e2e7e4); }
.bn-nav { width: 100%; max-width: 420px; border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 18px 34px -18px rgba(25,23,18,.5); }
.bn-nav__bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #f1f0ec; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.bn-nav__bar svg { width: 12px; height: 12px; color: var(--ok-text); flex: none; }
.bn-nav img { width: 100%; height: auto; display: block; }
.bn__ill--web .url__ok { position: absolute; right: 16px; top: 16px; box-shadow: 0 8px 18px -10px rgba(20,90,50,.5); }

/* Cambios: el horario sobre la web de las tiendas de Errotatxo */
.bn__ill--fondo { padding: 18px; place-items: end start; }
.bn-fondo, .bn-recorte { position: absolute; inset: 0; }
.bn-fondo img, .bn-recorte img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.bn__ill--fondo .cam { position: relative; min-width: 0; box-shadow: 0 18px 34px -14px rgba(25,23,18,.5); }

/* WhatsApp: la barra de contacto real de la web de A.Berri */
.bn__ill--recorte { padding: 18px; place-items: start center; }
.bn-recorte img { object-position: bottom; }
.bn__ill--recorte .wa { position: relative; z-index: 2; margin-top: 6px; }

/* Móvil más corto: casos con foto más baja, zonas en una fila que se desliza */
@media (max-width: 759px) {
  .caso-dest__foto { min-height: 190px; }
  .caso-dest__txt { padding: 24px 22px 26px; gap: 10px; }
  .caso-dest__h { font-size: 26px; }
  .caso-dest__p { font-size: 15.5px; }
  .zmap__grid { gap: 22px; }
  .zmap__grid > * { min-width: 0; }
  .zmap__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 2px 24px 6px; }
  .zmap__chips::-webkit-scrollbar { display: none; }
  .zmap__chips .btn { flex: none; }
  .prueba .sw-pasos li { padding: 14px 16px 14px 56px; }
  .prueba .sw-pasos li::before { top: 13px; left: 14px; }
  .sw-sectores { margin-top: 18px; font-size: 14.5px; }
  .hero__showcase { margin-top: 26px; }
}