/* Estilos propios de la página «inicio». Prefijo de clases reservado para esta página: ho- */

/* =====================================================================
   1. HERO — pila de tarjetas que entran y salen detrás de la demostración
   ===================================================================== */
.ho-vivo{min-height:748px}
.ho-vivo .hq,.ho-vivo .ha,.ho-vivo .src,.ho-vivo .tag-ej{z-index:3}
.ho-pila{position:absolute;left:7%;right:4%;bottom:90px;height:160px;z-index:1}
.ho-tj{position:absolute;left:0;bottom:0;width:33.5%;height:152px;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.ho-tj[data-pos="0"]{transform:rotate(-2.5deg);z-index:3}
.ho-tj[data-pos="1"]{transform:translate(102%,-7px) scale(.94) rotate(1.5deg);z-index:2}
.ho-tj[data-pos="2"]{transform:translate(199%,-13px) scale(.88) rotate(4deg);z-index:1}
.ho-tj[data-pos="sale"]{transform:translate(-38%,30px) rotate(-13deg);opacity:0;z-index:4;transition-duration:.45s,.35s;transition-timing-function:cubic-bezier(.5,0,.8,.4),ease}
.ho-tj[data-pos="entra"]{transform:translate(256%,-20px) scale(.78) rotate(9deg);opacity:0;z-index:0}
.ho-tj.ho-salto{transition:none}
.ho-tj header{display:flex;justify-content:space-between;gap:8px;padding:6px 9px;border-bottom:1.5px solid var(--ink);font-size:10.5px;white-space:nowrap;overflow:hidden}
.ho-tj header span:last-child{color:var(--muted)}
.ho-tj footer{padding:6px 9px;border-top:1.5px solid var(--ink);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-tj img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:50% 16%}
.ho-tj-c{flex:1;min-height:0;padding:9px 10px 8px;display:flex;flex-direction:column;justify-content:space-between;font-size:14px;line-height:1.25}
.ho-cero{display:flex;align-items:baseline;gap:8px}
.ho-cero b{font-family:var(--display);font-weight:400;font-size:42px;line-height:.95}
.ho-cero span{font-size:11px}
.ho-mal{background:var(--aviso)}
.ho-bien{background:var(--yellow)}
.ho-asunto{font-weight:600;font-size:15px;line-height:1.2}
.ho-asunto span{display:block;font-size:10.5px;font-weight:500;color:var(--muted);margin-bottom:3px}
.ho-lineas{display:grid;gap:6px}
.ho-lineas i{display:block;height:6px;background:var(--suave)}
.ho-lineas i:nth-child(2){width:84%}
.ho-lineas i:nth-child(3){width:56%}
/* entrada: las tres salen de debajo de la respuesta */
.js .obs:not(.in) .ho-tj{opacity:0;transform:translate(46%,-96px) scale(.72)}
.js .ho-pila:not(.ho-lista) .ho-tj{transition-delay:calc(.75s + var(--i,0)*.13s)}
/* mientras se escribe la pregunta, la respuesta no se queda en blanco: se ve que la tienda «está mirando» */
.js .ho-vivo.escribe .ha .row{opacity:1;transform:none;position:relative}
.js .ho-vivo.escribe .ha .row > *{transition:opacity .3s ease}
.js .ho-vivo.escribe .ha .row:not(.ya) > *{opacity:0}
.js .ho-vivo.escribe .ha .row::before,.js .ho-vivo.escribe .ha .row::after{content:"";position:absolute;top:50%;height:10px;margin-top:-5px;background:var(--suave);opacity:0;transition:opacity .25s ease;pointer-events:none}
.js .ho-vivo.escribe .ha .row::before{left:14px;width:38%}
.js .ho-vivo.escribe .ha .row::after{right:14px;width:17%;height:20px;margin-top:-10px}
.js .ho-vivo.escribe .ha .row:nth-of-type(2)::before{width:30%}
.js .ho-vivo.escribe .ha .row:nth-of-type(3)::before{width:52%}
.js .ho-vivo.escribe .ha .row:nth-of-type(3)::after{width:9%}
.js .ho-vivo.escribe .ha .row:not(.ya)::before,.js .ho-vivo.escribe .ha .row:not(.ya)::after{opacity:1;animation:ho-piensa .9s ease-in-out infinite alternate}
@keyframes ho-piensa{from{opacity:.4}to{opacity:1}}
/* las fuentes, «conectadas»: un punto que late en cada una */
.ho-vivo .src span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);border:1px solid var(--ink);margin-right:7px;vertical-align:1px}
.js .ho-vivo .src span::before{animation:ho-late 2.6s ease-in-out infinite}
.js .ho-vivo .src span:nth-child(2)::before{animation-delay:.5s}
.js .ho-vivo .src span:nth-child(3)::before{animation-delay:1s}
.js .ho-vivo .src span:nth-child(4)::before{animation-delay:1.5s}
@keyframes ho-late{0%,60%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(10,27,46,.35)}30%{transform:scale(1.25);box-shadow:0 0 0 5px rgba(10,27,46,0)}}

/* =====================================================================
   2. ESLOGAN — dibujos de línea alrededor de las letras, ligados al scroll
   ===================================================================== */
.ho-slogan{position:relative}
.ho-slogan .wrap{position:relative;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:48px}
.ho-slogan .big{grid-column:1/-1;position:relative;z-index:1}
.ho-slo-txt{grid-column:1;position:relative;z-index:1}
.ho-dib{--sp:1;pointer-events:none}
.ho-dib svg{display:block;width:100%;height:auto;overflow:visible}
.ho-habla{position:absolute;z-index:0;font-size:clamp(64px,11.4vw,168px);top:calc(96px + 1.17em);right:32px;width:2.1em}
.ho-sem{grid-column:2;align-self:end;justify-self:end;width:100%;max-width:500px;margin-bottom:6px}
.ho-sello{position:absolute;top:26px;right:28px;width:132px;height:132px;z-index:0}
/* lo que se va dibujando según --sp (0 → 1); sin JS vale 1 y se ve todo */
.ho-rev{fill:none;stroke-dasharray:1px;stroke-dashoffset:calc(1px - 1px * clamp(0, (var(--sp) - var(--a)) * var(--k), 1));transition:stroke-dashoffset .25s linear}
.ho-brota{--v:clamp(0, (var(--sp) - var(--a)) * var(--k), 1);transform-box:fill-box;transform-origin:50% 50%;transform:scale(calc(.55 + .45 * var(--v)));opacity:var(--v);transition:transform .25s ease-out,opacity .25s linear}
.ho-ya{opacity:clamp(0, (var(--sp) - var(--a)) * 18, 1);transition:opacity .2s linear}
.js .ho-sello{transform:rotate(calc(var(--sx,0) * -150deg))}
.js .ho-habla{transform:translateY(calc(var(--sx,0) * 24px))}

/* =====================================================================
   3. CINTA — lo que deja de hacerse a mano
   ===================================================================== */
.ho-cinta{display:grid;grid-template-columns:auto minmax(0,1fr);background:var(--yellow);border-bottom:1.5px solid var(--ink);overflow:hidden}
.ho-cinta-et{background:var(--ink);color:var(--yellow);display:flex;align-items:center;padding:0 24px 0 max(32px,calc((100vw - 1240px)/2 + 32px));position:relative;z-index:1;white-space:nowrap}
.ho-cinta-et::after{content:"→";margin-left:12px}
.ho-cinta-via{display:flex;overflow:hidden;min-width:0}
.ho-cinta-fila{list-style:none;margin:0;padding:15px 0 13px;display:flex;flex-wrap:wrap;row-gap:6px}
.ho-cinta-fila li{position:relative;padding:0 30px;font-family:var(--display);font-size:32px;line-height:1.15;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.ho-cinta-fila li::before{content:"+";position:absolute;left:-6px;top:50%;transform:translateY(-54%);font-family:var(--mono);font-size:20px}
.ho-cinta-fila s{position:relative;text-decoration:none;display:inline-block}
.ho-cinta-fila s::after{content:"";position:absolute;left:-5px;right:-5px;top:49%;height:3px;background:var(--ink);transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(.3s + var(--i,0)*.12s)}
html:not(.js) .ho-cinta-fila{padding-left:10px;padding-right:10px}
/* sin movimiento la cinta es una lista quieta: las frases pueden partirse y el tachado es el del propio texto */
html:not(.js) .ho-cinta-fila li{white-space:normal}
html:not(.js) .ho-cinta-fila s{display:inline;text-decoration:line-through;text-decoration-thickness:3px}
html:not(.js) .ho-cinta-fila s::after{display:none}
.js .ho-cinta.obs:not(.in) s::after{transform:scaleX(0)}
.js .ho-cinta-fila{flex:0 0 auto;flex-wrap:nowrap;animation:ho-corre 44s linear infinite}
.js .ho-cinta:hover .ho-cinta-fila{animation-play-state:paused}
@keyframes ho-corre{to{transform:translateX(-100%)}}

/* =====================================================================
   4. PARA QUIÉN — viñetas que se resuelven al pasar
   ===================================================================== */
.ho-vin{margin:16px 0 18px;border:1.5px solid var(--ink);background:var(--paper)}
.q-card .ho-vin svg{display:block;width:100%;height:auto;margin:0}
.ho-vin .ho-antes > *,.ho-vin .ho-luego,.ho-vin .ho-baja{transform-box:fill-box;transform-origin:50% 50%}
.ho-vin .ho-baja{transform-origin:50% 100%;vector-effect:non-scaling-stroke}
.ho-vin .ho-luego{opacity:0;transform:scale(.72)}
.ho-vin .ho-falta{fill:none;stroke:var(--aviso);stroke-width:2;stroke-dasharray:4 4}
.ho-vin .ho-coral{stroke:var(--aviso)}
.js .ho-vin .ho-antes,.js .ho-vin .ho-antes > *,.js .ho-vin .ho-luego,.js .ho-vin .ho-baja,.js .ho-vin .ho-falta{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .35s ease,fill .3s ease,stroke .3s ease}
.js .ho-vin .ho-luego{transition-delay:.12s}
.q-card:hover .ho-antes,.q-card:focus-within .ho-antes,.q-card.ho-on .ho-antes{opacity:0}
.q-card:hover .ho-luego,.q-card:focus-within .ho-luego,.q-card.ho-on .ho-luego{opacity:1;transform:none}
.q-card:hover .ho-f1,.q-card:focus-within .ho-f1,.q-card.ho-on .ho-f1{transform:translate(42px,22px) scale(.4)}
.q-card:hover .ho-f2,.q-card:focus-within .ho-f2,.q-card.ho-on .ho-f2{transform:translate(-26px,26px) scale(.4)}
.q-card:hover .ho-f3,.q-card:focus-within .ho-f3,.q-card.ho-on .ho-f3{transform:translate(30px,-20px) scale(.4)}
.q-card:hover .ho-f4,.q-card:focus-within .ho-f4,.q-card.ho-on .ho-f4{transform:translate(-40px,-18px) scale(.4)}
.q-card:hover .ho-f5,.q-card:focus-within .ho-f5,.q-card.ho-on .ho-f5{transform:translateY(2px) scale(.5)}
.q-card:hover .ho-f6,.q-card:focus-within .ho-f6,.q-card.ho-on .ho-f6{transform:translate(-64px,0) scale(.4)}
.q-card:hover .ho-falta,.q-card:focus-within .ho-falta,.q-card.ho-on .ho-falta{fill:var(--yellow);stroke:var(--ink);stroke-dasharray:none;stroke-width:1.5}
.q-card:hover .ho-baja,.q-card:focus-within .ho-baja,.q-card.ho-on .ho-baja{transform:scaleY(.564)}
/* mientras nadie toca, lo de «antes» flota un poco */
.js .ho-vin .ho-f1,.js .ho-vin .ho-f3{animation:ho-flota 3.4s ease-in-out infinite alternate}
.js .ho-vin .ho-f2,.js .ho-vin .ho-f4{animation:ho-flota 3.4s ease-in-out -1.7s infinite alternate}
.js .q-card:hover .ho-antes > *,.js .q-card:focus-within .ho-antes > *,.js .q-card.ho-on .ho-antes > *{animation:none}
@keyframes ho-flota{from{transform:translateY(-2.5px)}to{transform:translateY(2.5px)}}

/* =====================================================================
   5. CÓMO FUNCIONA EN MINIATURA — la semana en marcha (bloque de tinta)
   ===================================================================== */
.ho-como{background:var(--ink);color:#fff;border-bottom:1.5px solid var(--ink);overflow:hidden}
.ho-como .wrap{padding-top:88px;padding-bottom:92px}
.ho-como-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 56px;margin-bottom:44px}
.ho-como h2{text-wrap:balance;font-size:clamp(36px,3.9vw,54px);font-weight:var(--tit-peso);font-stretch:var(--tit-ancho);line-height:1.08;letter-spacing:-.02em;margin:22px 0 0;max-width:13.5em}
.ho-como-intro{color:var(--soft);max-width:21em;flex:0 1 auto}
.ho-tira{--p:0;list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1.5px solid #fff}
.ho-tira::before{content:"";position:absolute;left:0;right:0;top:-1.5px;height:6px;background:var(--yellow);transform-origin:0 50%;transform:scaleX(var(--p));transition:transform var(--dur,.6s) linear;z-index:2;pointer-events:none}
.ho-paso{position:relative;border-left:1.5px solid rgba(255,255,255,.4)}
.ho-paso:first-child{border-left:0}
.ho-paso a{--ac:var(--yellow);--ac2:var(--ink);display:flex;flex-direction:column;height:100%;padding:20px 14px 14px;color:#fff;text-decoration:none;transition:background .3s ease,color .3s ease}
.ho-num{font-family:var(--display);font-size:56px;line-height:1}
.ho-nom{margin-top:6px}
.ho-paso svg{display:block;width:100%;max-width:120px;height:auto;margin:22px 0 18px;overflow:visible}
.ho-paso .ho-ac{fill:var(--ac);stroke:var(--ac)}
.ho-paso .ho-ac2{stroke:var(--ac2)}
.ho-paso .ho-ll{fill:currentColor}
.ho-paso .ho-fo{fill:var(--ink)}
.ho-paso.ho-activo .ho-fo{fill:var(--yellow)}
.ho-est{margin-top:auto;font-size:11px;color:var(--soft);white-space:nowrap}
.ho-paso a:hover,.ho-paso a:focus-visible{background:rgba(255,255,255,.1)}
/* en marcha: lo pendiente se apaga, el paso activo es un bloque amarillo y lo hecho queda marcado */
.ho-tira.ho-corre .ho-paso:not(.ho-activo):not(.ho-hecho) a{color:rgba(255,255,255,.55);--ac:rgba(255,225,77,.55)}
.ho-tira.ho-corre .ho-paso:not(.ho-activo):not(.ho-hecho) .ho-est{color:rgba(201,209,218,.7)}
.ho-paso.ho-hecho .ho-est{color:var(--yellow)}
.ho-paso.ho-activo a,.ho-paso.ho-activo a:hover{background:var(--yellow);color:var(--ink);--ac:var(--ink);--ac2:var(--yellow)}
.ho-paso.ho-activo .ho-est{color:var(--ink)}
.ho-paso.ho-activo svg{animation:ho-toca .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes ho-toca{from{transform:scale(.86)}}
.ho-vuelta{display:flex;align-items:center;gap:14px;margin-top:16px;color:var(--soft)}
.ho-vuelta i{position:relative;flex:1;height:0;border-top:1.5px dashed rgba(255,255,255,.5)}
.ho-vuelta i::before{content:"";position:absolute;left:0;top:-7.5px;width:10px;height:10px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);transform-origin:50% 50%}
.ho-vuelta i::after{content:"";position:absolute;right:0;top:-6.5px;width:11px;height:11px;border-radius:50%;background:var(--yellow);opacity:0}
.ho-vuelta.ho-vuelve i::after{animation:ho-vuelve 1.5s cubic-bezier(.5,0,.3,1) both}
@keyframes ho-vuelve{0%{opacity:0;right:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;right:calc(100% - 11px)}}
.ho-como-pie{display:flex;justify-content:space-between;align-items:center;gap:24px 40px;margin-top:38px}
.ho-ahora{display:grid;gap:8px;font-size:clamp(22px,2.3vw,30px);font-weight:var(--tit-peso);font-stretch:var(--tit-ancho);line-height:1.15;letter-spacing:-.01em;min-height:2.9em;align-content:start}
.ho-ahora .mono{color:var(--yellow)}
.ho-como .btn{box-shadow:3px 3px 0 var(--yellow);flex:0 0 auto}
.ho-como .btn:hover{box-shadow:1px 1px 0 var(--yellow)}
.ho-como :focus-visible{outline-color:var(--yellow)}

/* =====================================================================
   6. CASOS — algo que ver en cada tarjeta
   ===================================================================== */
.ho-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ho-vis{position:relative;flex:0 0 auto;width:138px;height:88px;margin-top:6px}
/* Disclosure: piezas reales en abanico */
.ho-fan img{position:absolute;top:2px;width:62px;height:78px;object-fit:cover;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--ink);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.ho-fan img:nth-child(1){left:4px;transform:rotate(-8deg)}
.ho-fan img:nth-child(2){left:38px;transform:translateY(-3px) rotate(2deg);z-index:1}
.ho-fan img:nth-child(3){left:72px;transform:rotate(9deg)}
.caso:hover .ho-fan img:nth-child(1){transform:translate(-7px,-2px) rotate(-14deg)}
.caso:hover .ho-fan img:nth-child(2){transform:translateY(-9px) rotate(1deg)}
.caso:hover .ho-fan img:nth-child(3){transform:translate(7px,-2px) rotate(15deg)}
.js .obs:not(.in) .ho-fan img{opacity:0;transform:translateY(28px)}
.js .obs:not(.hecho) .ho-fan img:nth-child(1){transition-delay:.55s}
.js .obs:not(.hecho) .ho-fan img:nth-child(2){transition-delay:.67s}
.js .obs:not(.hecho) .ho-fan img:nth-child(3){transition-delay:.79s}
/* Hera Jewelry: un cajón de sastre que se ordena en ocho familias */
.ho-fam{display:grid;grid-template-columns:repeat(8,11px);gap:4px;justify-content:end;align-content:start}
.ho-fam i{display:block;width:11px;height:11px;border:1.5px solid var(--ink);background:#fff;transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(.5s + var(--j,0)*16ms)}
.ho-fam i:nth-child(-n+8){background:var(--yellow)}
.ho-fam span{grid-column:1/-1;text-align:right;font-size:10.5px;margin-top:3px}
.js .obs:not(.in) .ho-fam i{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--r,0deg))}
/* Vie Riche: dos tiendas, fila a fila, hasta que cuadran */
.ho-cuadra{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.ho-cuadra div{display:grid;gap:5px;align-content:start}
.ho-cuadra span{font-size:10.5px;white-space:nowrap;margin-bottom:1px}
.ho-cuadra i{display:block;height:10px;width:var(--w);background:var(--ink);border:1.5px solid var(--ink);transition:width .8s cubic-bezier(.16,1,.3,1) 1.1s,background .4s ease 1.5s}
.ho-cuadra .ho-no{background:var(--yellow)}
.js .obs:not(.in) .ho-cuadra .ho-no{width:var(--w0);background:var(--aviso)}

/* =====================================================================
   7. PLANES — escalera «de menos a más»   ·   8. CIERRE — la tienda contesta
   ===================================================================== */
.planes .plan .cuerpo{position:relative}
.ho-nivel{position:absolute;top:26px;right:18px;display:flex;align-items:flex-end;gap:4px;height:36px}
.ho-nivel i{display:block;width:12px;border:1.5px dashed var(--ink);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,1.4,.4,1);transition-delay:calc(.5s + var(--i,0)*.1s)}
.ho-nivel i:nth-child(1){height:14px}
.ho-nivel i:nth-child(2){height:25px}
.ho-nivel i:nth-child(3){height:36px}
.ho-nivel .ho-si{background:var(--yellow);border-style:solid}
.js .obs:not(.in) .ho-nivel i{transform:scaleY(0)}

.ho-cierre .wrap{position:relative}
.ho-cuenta{position:absolute;right:32px;top:calc(100px + clamp(52px,8.4vw,124px) * 1.32);width:356px;background:#fff;color:var(--ink);border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--yellow);transform:rotate(1.5deg)}
.ho-cuenta header,.ho-cuenta footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px}
.ho-cuenta header{border-bottom:1.5px solid var(--ink)}
.ho-cuenta header span:last-child,.ho-cuenta footer{color:var(--muted)}
.ho-cuenta footer{border-top:1px dashed var(--dash)}
.cierre .ho-cuenta p{max-width:none;margin:0;padding:18px 14px 20px;color:var(--ink);font-size:25px;font-weight:500;line-height:1.18;letter-spacing:-.01em;min-height:5.1em}
.ho-cuenta-n{display:flex;gap:5px}
.ho-cuenta-n i{display:block;width:9px;height:9px;border:1.5px solid var(--ink)}
.ho-cuenta-n .ho-si{background:var(--yellow)}
@media (max-width:1080px){
  .ho-cuenta{position:static;width:auto;max-width:400px;margin-top:44px}
}

/* =====================================================================
   móvil
   ===================================================================== */
@media (max-width:1100px){
  /* con menos ancho la pila deja de ser una fila y pasa a ser un fichero: de las de detrás asoma la cabecera */
  .ho-vivo{min-height:840px}
  .ho-pila{bottom:138px}
  .ho-tj{width:64%}
  .ho-tj[data-pos="0"]{transform:rotate(-1.5deg)}
  .ho-tj[data-pos="1"]{transform:translate(11%,-31px) rotate(.6deg)}
  .ho-tj[data-pos="2"]{transform:translate(22%,-62px) rotate(2.4deg)}
  .ho-tj[data-pos="sale"]{transform:translate(-26%,34px) rotate(-11deg)}
  .ho-tj[data-pos="entra"]{transform:translate(32%,-100px) scale(.92) rotate(5deg)}
  .ho-num{font-size:46px}
  .ho-paso a{padding:18px 10px 12px}
}
@media (max-width:900px){
  .ho-vivo{min-height:0}
  .ho-pila{position:relative;left:auto;right:auto;bottom:auto;height:238px;margin:6px 0 2px}
  .ho-tj{width:80%;max-width:330px;height:160px}
  .ho-tj[data-pos="1"]{transform:translate(8%,-36px) rotate(.6deg)}
  .ho-tj[data-pos="2"]{transform:translate(16%,-72px) rotate(2.4deg)}
  .ho-tj[data-pos="entra"]{transform:translate(24%,-112px) scale(.92) rotate(5deg)}
  .js .obs:not(.in) .ho-tj{transform:translate(8%,-70px) scale(.8)}
  .ho-tj header,.ho-tj footer{font-size:11px}
  .ho-tj-c{font-size:15px}

  .ho-slogan .wrap{grid-template-columns:minmax(0,1fr)}
  .ho-slo-txt,.ho-sem{grid-column:1}
  .ho-sem{justify-self:start;margin-top:30px;max-width:460px}
  .ho-habla{top:calc(64px + 1.17em);right:20px}
  .ho-sello{width:84px;height:84px;top:16px;right:16px}

  .ho-cinta{grid-template-columns:minmax(0,1fr)}
  .ho-cinta-et{padding:8px 20px}
  .ho-cinta-fila{padding:12px 0 10px}
  .ho-cinta-fila li{font-size:25px;padding:0 22px}
  .ho-cinta-fila li::before{font-size:16px;left:-5px}
  html:not(.js) .ho-cinta-fila li{font-size:22px;padding:0 14px 0 22px}
  html:not(.js) .ho-cinta-fila li::before{left:0;top:.6em}

  .ho-como .wrap{padding-top:56px;padding-bottom:60px}
  .ho-como-cab{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .ho-tira{grid-template-columns:minmax(0,1fr)}
  .ho-tira::before{display:none}
  .ho-paso{border-left:0;border-top:1.5px solid rgba(255,255,255,.4)}
  .ho-paso:first-child{border-top:0}
  .ho-paso a{display:grid;grid-template-columns:54px minmax(0,1fr) 72px;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;min-height:68px}
  .ho-num{grid-row:1/3;font-size:40px}
  .ho-nom{margin:0;align-self:end}
  .ho-est{margin:2px 0 0;align-self:start;grid-column:2}
  .ho-paso svg{grid-column:3;grid-row:1/3;margin:0}
  .ho-vuelta{margin-top:14px}
  .ho-como-pie{flex-direction:column;align-items:flex-start;margin-top:26px}
  .ho-ahora{min-height:3.6em}

  .ho-vis{width:112px;height:74px}
  .ho-fan img{width:52px;height:66px}
  .ho-fan img:nth-child(1){left:2px}
  .ho-fan img:nth-child(2){left:30px}
  .ho-fan img:nth-child(3){left:58px}
  .ho-fam{grid-template-columns:repeat(8,9px);gap:4px}
  .ho-fam i{width:9px;height:9px}
  .ho-cuadra{gap:8px}
  .ho-cuadra span{font-size:10px}
}
@media (max-width:520px){
  .ho-habla{display:none}
  .ho-sello{width:70px;height:70px;top:10px;right:12px}
  .ho-sem text{font-size:16px}
  /* en móvil las letras gigantes ocupan todo el ancho: se mueven menos para que el borde no se coma ninguna */
  .js .ho-slogan .big{transform:translateX(calc(var(--sx,0)*-16px))}
  .js .ho-slogan .big.right{transform:translateX(calc(var(--sx,0)*16px))}
}