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

[class*="em-"][hidden]{display:none!important}

/* botón pequeño de las demos (pausa, antes/ahora, «¿y si compra?») */
.em-b{min-height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .2s ease,color .2s ease}
.em-b:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.em-ej{color:var(--muted)}

/* el dibujo del hero: cada bola aparece cuando empieza a moverse (si no, se queda en la esquina del dibujo) */
[data-pagina="correos"] .hero .dg.viva .dg-bola:nth-child(1){transition-delay:2s}
[data-pagina="correos"] .hero .dg.viva .dg-bola:nth-child(2){transition-delay:2.65s}
[data-pagina="correos"] .hero .dg.viva .dg-bola:nth-child(3){transition-delay:3.3s}
[data-pagina="correos"] .hero .dg.viva .dg-bola:nth-child(4){transition-delay:3.95s}

/* ---------- cinta de mensajes ---------- */
.em-cinta{background:var(--ink);color:#fff;border-bottom:1.5px solid var(--ink);overflow:hidden}
.em-cinta-v{display:flex}
.em-cinta ul{list-style:none;padding:13px 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;flex:1 1 auto}
.em-cinta li{display:flex;align-items:center;white-space:nowrap}
.em-cinta li::after{content:"+";color:var(--yellow);margin:0 18px;font-size:16px}
html:not(.js) .em-cinta li:last-child::after{content:none}
.js .em-cinta-v{width:max-content}
.js .em-cinta ul{flex-wrap:nowrap;justify-content:flex-start;padding:13px 0;flex:0 0 auto}
.js .em-cinta.em-corre .em-cinta-v{animation:em-cinta 44s linear infinite}
.js .em-cinta.em-corre:hover .em-cinta-v{animation-play-state:paused}
@keyframes em-cinta{to{transform:translateX(-50%)}}

/* ---------- pieza estrella: la vida de un cliente ---------- */
.em-cabeza{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:38px}
.em-cabeza h2{margin-bottom:0}
.em-cabeza .intro{margin-bottom:4px}

.em-vida{background:#fff;border:1.5px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.em-vida-cab{display:flex;align-items:center;gap:8px 14px;padding:8px 10px 8px 18px;border-bottom:1.5px solid var(--ink);min-height:64px}
.em-vida-tit::before{content:"";display:inline-block;width:10px;height:10px;background:var(--yellow);border:1.5px solid var(--ink);margin-right:10px;vertical-align:-1px}
.em-ctl{display:flex;gap:8px;margin-left:auto}
.em-play{min-width:112px}
.em-play-i{width:10px;height:12px;border-left:3.5px solid var(--ink);border-right:3.5px solid var(--ink)}
.em-vida:not(.em-rueda) .em-play-i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--ink)}
.em-vida.em-rueda .em-play{background:var(--yellow)}

.em-via-caja{--rt:29px;position:relative;background:var(--cream);border-bottom:1.5px solid var(--ink)}
.em-via{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;z-index:1}
.em-par{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 6px 20px;text-decoration:none;color:var(--muted);text-align:center;min-height:44px;cursor:pointer}
.em-nodo{width:16px;height:16px;border:1.5px solid var(--ink);background:var(--paper);margin-bottom:12px;transition:background .3s ease}
.em-par-n{font-size:11px}
.em-par-t{color:var(--ink);padding:2px 7px;transition:background .25s ease}
.em-par-h{font-size:11px;text-transform:none}
.em-par:hover .em-par-t{background:var(--paper)}
.em-riel{position:absolute;left:10%;right:10%;top:var(--rt);height:0;border-top:1.5px dashed var(--ink)}
.em-riel i{position:absolute;left:0;top:-3px;width:100%;height:4.5px;background:var(--ink);transform-origin:0 50%;transform:scaleX(calc(var(--k,0)/4))}
.em-riel-p{border-top:0;top:calc(var(--rt) - 22px);height:46px;left:calc(10% - 22px);right:calc(10% - 22px);overflow:hidden;z-index:2;pointer-events:none}
.em-carro{position:absolute;left:22px;top:22.75px;width:calc(100% - 44px);transform:translateX(calc(var(--k,0)*25%))}
.em-carro b{position:absolute;left:-13px;top:-14px;width:26px;height:26px;border-radius:50%;background:var(--ink);border:5px solid var(--yellow);box-shadow:0 0 0 1.5px var(--ink)}
.js .em-riel i,.js .em-carro{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.js .em-rueda .em-carro b::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--ink);animation:em-pulso 1.8s ease-out infinite}
@keyframes em-pulso{from{opacity:.8;transform:scale(.62)}to{opacity:0;transform:scale(1.04)}}
.em-dur{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--yellow);box-shadow:0 -1px 0 var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:2}
.em-dur.em-corre{animation:em-dur 6.2s linear forwards}
.em-vida.em-lejos .em-dur{animation-play-state:paused}
@media (hover:hover){.em-vida:has(.em-buzon:hover) .em-dur{animation-play-state:paused}}
@keyframes em-dur{to{transform:scaleX(1)}}
.em-vida:not(.em-tab) .em-riel i,.em-vida:not(.em-tab) .em-carro,.em-vida:not(.em-tab) .em-dur{display:none}
.em-tab .em-par[aria-selected="true"] .em-par-t{background:var(--yellow)}
.em-tab .em-par[aria-selected="true"]{color:var(--ink)}
.em-tab .em-par.em-pasado .em-nodo{background:var(--ink)}

.em-pasos{display:grid}
.em-momento{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);min-width:0}
.em-momento + .em-momento{border-top:1.5px solid var(--ink)}
.em-tab .em-momento{grid-area:1/1;border-top:0}
.em-tab .em-momento:not(.em-act){visibility:hidden}
.em-hace{padding:34px 34px 38px 30px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.em-num{font-family:var(--display);font-size:92px;line-height:1}
.em-num small{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted);margin-left:10px;vertical-align:middle}
.em-hace h3{text-wrap:balance;font-size:clamp(28px,2.8vw,38px);font-weight:var(--tit-peso);font-stretch:var(--tit-ancho);letter-spacing:-.02em;line-height:1.1;margin:14px 0 10px}
.em-hace p{color:var(--muted);max-width:22em}
.em-sale{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.em-sale li{border:1.5px solid var(--ink);padding:6px 10px;background:var(--yellow)}
.em-sale li.em-stop{background:var(--paper);border-style:dashed}
.em-sig{margin-top:auto;padding-top:28px;color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:flex-end}
.em-sig:hover{color:var(--ink)}
.em-hace .em-regla{margin-top:20px;padding-left:12px;border-left:3px solid var(--yellow);font-size:16px;color:var(--ink)}

.em-buzon{background:var(--suave);border-left:1.5px solid var(--ink);padding:16px 34px 38px;display:flex;flex-direction:column;gap:20px;min-width:0;min-height:430px}
.em-buzon-cab{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--ink);font-size:12px}
.em-msj{width:100%;max-width:560px}
.em-buzon-cab + .em-msj{margin-top:auto}
.em-msj:last-child{margin-bottom:auto}
.em-ico{fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.em-hora{margin-left:auto;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);padding:3px 8px;font-weight:500;transform:rotate(-2deg);white-space:nowrap}
.em-correo{background:#fff;border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.em-correo > header{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 12px;border-bottom:1.5px solid var(--ink);font-size:12px}
.em-correo-c{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;padding:16px;align-items:center}
.em-correo-c img{width:112px;height:auto;aspect-ratio:4/5;object-fit:cover;border:1.5px solid var(--ink)}
.em-correo-c strong{display:block;font-size:22px;font-weight:600;line-height:1.22;letter-spacing:-.01em;margin-bottom:6px}
.em-correo-c p{font-size:16px;color:var(--muted);line-height:1.4;margin-bottom:12px}
.em-boton{display:inline-block;border:1.5px solid var(--ink);background:var(--yellow);padding:5px 9px;font-size:11px}
.em-sms{position:relative;align-self:flex-end;max-width:430px;background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--yellow);margin-bottom:8px}
.em-sms > header{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 12px;border-bottom:1px solid rgba(255,255,255,.28);color:var(--yellow);font-size:12px}
.em-sms .em-hora{border-color:var(--yellow)}
.em-sms p{padding:12px 14px 14px;font-size:17px;line-height:1.4}
.em-sms::after{content:"";position:absolute;right:26px;bottom:-13px;width:18px;height:14px;background:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%)}
.em-paro{border:1.5px dashed var(--ink);background:var(--paper);padding:12px 14px}
.em-paro .mono{display:block;margin-bottom:4px}
.em-paro .mono::before{content:"✓";display:inline-block;background:var(--yellow);border:1.5px solid var(--ink);padding:0 5px;margin-right:8px}
.em-paro p{font-size:16px;color:var(--muted);line-height:1.4}
.em-vida-pie{margin-top:24px;color:var(--muted);font-size:12px}

/* entrada de cada momento (solo con movimiento) */
.js .em-tab .em-act .em-hace > *{animation:em-sube .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--j,0)*70ms)}
.js .em-tab .em-act .em-buzon-cab{animation:em-sube .5s cubic-bezier(.16,1,.3,1) both}
.js .em-tab .em-act .em-msj{animation:em-llega .65s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*420ms + 380ms)}
.js .em-tab .em-act .em-hora{animation:em-sello .45s cubic-bezier(.2,1.8,.4,1) both;animation-delay:calc(var(--i,0)*420ms + 760ms)}
@keyframes em-sube{from{opacity:0;transform:translateY(14px)}}
@keyframes em-llega{from{opacity:0;transform:translateY(26px) rotate(-1.5deg)}}
@keyframes em-sello{from{opacity:0;transform:rotate(-2deg) scale(1.8)}}
@keyframes em-pop{from{opacity:0;scale:.6}}

/* ---------- correo y SMS coordinados ---------- */
.em-pill{align-self:flex-start}
.paso .em-pill + h2{margin-top:22px}
.em-peq{font-size:16px;margin-top:22px}
.em-dos{display:grid;grid-template-columns:auto auto;justify-content:start;gap:0 34px;margin-top:30px}
.em-dos > div + div{border-left:1px solid rgba(255,255,255,.3);padding-left:34px}
.em-dos .mono{display:block;color:var(--soft);margin-bottom:6px}
.em-dos b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(54px,5.6vw,76px);line-height:1;text-transform:uppercase;color:var(--yellow)}
.em-coord .lam{min-height:560px}
.em-reloj{width:100%;max-width:590px;border:1.5px solid #fff;box-shadow:6px 6px 0 var(--yellow);background:var(--ink);color:#fff}
.em-reloj > header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1.5px solid #fff}
.em-crono{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:.03em;color:var(--yellow);min-width:2.3em;text-align:right;font-variant-numeric:tabular-nums}
.em-reloj-c{padding:20px 52px 14px 34px}
.em-ticks{position:relative;height:20px;color:var(--soft);font-size:11px}
.em-ticks span{position:absolute;top:0;transform:translateX(-50%)}
.em-ticks span:nth-child(2){left:25%}.em-ticks span:nth-child(3){left:50%}.em-ticks span:nth-child(4){left:75%}.em-ticks span:nth-child(5){left:100%}
.em-pistas{position:relative;border-left:1.5px solid #fff;background-image:linear-gradient(to right,rgba(255,255,255,.2) 1px,transparent 1px);background-size:25% 100%;background-position:-1px 0}
.em-pista{position:relative;height:66px}
.em-pista::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed rgba(255,255,255,.45)}
.em-p-sms::before{right:75%}
.em-tramo{position:absolute;left:0;top:calc(50% - 2px);height:5px;background:#fff;transform-origin:0 50%}
.em-p-sms .em-tramo{width:25%;transform:scaleX(min(1,calc(var(--t,1)/.25)))}
.em-p-correo .em-tramo{width:100%;transform:scaleX(var(--t,1))}
.em-reloj.em-compra .em-p-correo .em-tramo{transform:scaleX(min(.5,var(--t,1)))}
.em-hito{position:absolute;top:50%;transform:translate(-50%,-50%);padding:6px 10px;border:1.5px dashed rgba(255,255,255,.6);background:var(--ink);color:var(--soft);font-weight:500;white-space:nowrap;z-index:2}
.em-p-sms .em-hito{left:25%}
.em-p-correo .em-hito{left:100%}
.em-hito.em-on{background:var(--yellow);color:var(--ink);border:1.5px solid var(--yellow);box-shadow:3px 3px 0 #fff}
.js .em-hito.em-on{animation:em-pop .45s cubic-bezier(.2,1.6,.4,1)}
.em-h-no{display:none}
.em-reloj.em-compra .em-h-si{display:none}
.em-reloj.em-compra .em-h-no{display:inline}
.em-reloj.em-compra .em-p-correo .em-hito.em-on{background:var(--ink);color:#fff;border:1.5px dashed #fff;box-shadow:none}
.em-compra-m{display:none;position:absolute;left:50%;top:-6px;bottom:-6px;border-left:2px solid var(--yellow);z-index:1}
.em-compra-m span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);background:var(--ink);border:1.5px solid var(--yellow);color:var(--yellow);padding:4px 8px}
.em-reloj.em-compra .em-compra-m.em-on{display:block}
.js .em-reloj.em-compra .em-compra-m.em-on span{animation:em-pop .45s cubic-bezier(.2,1.6,.4,1)}
.em-cursor{display:none;position:absolute;left:0;right:-3px;top:-10px;bottom:-6px;overflow:hidden;pointer-events:none;z-index:3}
.js .em-cursor{display:block}
.em-cursor i{position:absolute;left:0;top:0;bottom:0;width:calc(100% - 3px);transform:translateX(calc(var(--t,1)*100%))}
.em-cursor i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--yellow)}
.em-cursor i::after{content:"";position:absolute;left:-4px;top:0;width:10px;height:8px;background:var(--yellow);clip-path:polygon(0 0,100% 0,50% 100%)}
.em-feed{list-style:none;padding:0;margin-top:6px;border-top:1.5px solid #fff}
.em-feed li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 16px;border-bottom:1px dashed rgba(255,255,255,.3);font-size:16px;line-height:1.4;color:#fff}
.em-feed li b{color:var(--yellow);font-weight:500}
.em-feed s{color:var(--soft)}
.em-f-compra{display:none!important}
.em-reloj.em-compra .em-f-compra{display:grid!important}
.js .em-feed li{transition:opacity .35s ease}
.js .em-feed li:not(.em-on){opacity:.42}
.em-reloj-pie{padding:14px 16px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.em-coord .em-b{background:var(--ink);color:#fff;border-color:#fff;box-shadow:3px 3px 0 #fff}
.em-coord .em-b:hover{box-shadow:1px 1px 0 #fff}
.em-coord .em-b[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* ---------- «para mañana»: el borrador que espera ---------- */
.em-manana-sec .lam{overflow:hidden;min-height:620px}
.em-prueba{margin-top:24px;align-self:flex-start;background:var(--yellow);color:var(--ink);padding:5px 9px;border:1.5px solid var(--ink)}
.em-manana{width:100%;max-width:480px;display:grid;gap:22px}
.em-mazo{display:grid;position:relative;margin:0 26px 22px 0}
.em-mazo > *{grid-area:1/1;min-width:0}
.em-bor{position:relative;background:#fff;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column}
.em-bor[data-pos="0"]{z-index:3}
.em-bor[data-pos="1"]{z-index:2;transform:translate(13px,12px) rotate(1.6deg);box-shadow:none}
.em-bor[data-pos="2"]{z-index:1;transform:translate(26px,22px) rotate(3.2deg);box-shadow:none}
.js .em-bor{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.em-bor.em-ok,.em-bor.em-no{visibility:hidden;opacity:0;pointer-events:none}
.js .em-bor.em-ok{transform:translate(70%,-40px) rotate(14deg);transition:transform .6s cubic-bezier(.5,0,.8,.4),opacity .5s ease .1s,visibility 0s linear .6s}
.js .em-bor.em-no{transform:translate(-30px,120px) rotate(-10deg);transition:transform .6s cubic-bezier(.5,0,.8,.4),opacity .5s ease .1s,visibility 0s linear .6s}
.em-bor > header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-bottom:1.5px solid var(--ink)}
.em-estado{border:1.5px dashed var(--ink);padding:2px 8px;white-space:nowrap;flex:none}
.em-bor[data-pos="0"]:not(.em-sellada) .em-estado::before{content:"";display:inline-block;width:7px;height:7px;background:var(--ink);border-radius:50%;margin-right:7px;vertical-align:1px}
.js .em-bor[data-pos="0"]:not(.em-sellada) .em-estado::before{animation:em-late 1.6s ease-in-out infinite}
@keyframes em-late{50%{opacity:.15}}
.em-motivo{padding:11px 14px 12px;background:var(--yellow);border-bottom:1.5px solid var(--ink);font-size:16px;line-height:1.35}
.em-motivo .mono{display:block;font-size:11px;margin-bottom:2px}
.em-vista{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;padding:16px 14px 18px}
.em-vista img,.em-dib{width:108px;height:auto;aspect-ratio:4/5;object-fit:cover;border:1.5px solid var(--ink)}
.em-dib{background:var(--suave);fill:none;stroke:var(--ink);stroke-width:1.2}
.em-vista .mono{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.em-vista strong{display:block;font-size:20px;font-weight:600;line-height:1.22;letter-spacing:-.01em;margin-bottom:12px}
.em-vista p{font-size:16px;line-height:1.35}
.em-acc{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--ink);margin-top:auto}
.em-acc button{font:inherit;text-transform:inherit;letter-spacing:inherit;min-height:54px;border:0;background:#fff;color:var(--ink);cursor:pointer;transition:background .2s ease,color .2s ease}
.em-acc .em-si{background:var(--yellow);border-right:1.5px solid var(--ink)}
.em-acc .em-si:hover,.em-bor.em-si-ok .em-si{background:var(--ink);color:var(--yellow)}
.em-acc .em-nop:hover,.em-bor.em-si-no .em-nop{background:var(--ink);color:#fff}
.em-acc button:focus-visible{outline-offset:-5px}
.em-sellazo{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-6deg);padding:10px 16px;border:2px solid var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-size:14px;white-space:nowrap;pointer-events:none;visibility:hidden}
.em-bor.em-si-no .em-sellazo{background:#fff}
.em-bor.em-sellada .em-sellazo{visibility:visible}
.js .em-bor.em-sellada .em-sellazo{animation:em-pega .4s cubic-bezier(.2,1.8,.4,1) both}
@keyframes em-pega{from{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(1.8)}}
.em-bor.em-si-no .em-vista{opacity:.4}
.em-fin{align-self:center;justify-self:center;text-align:center;border:1.5px dashed var(--ink);background:var(--paper);padding:26px 22px;max-width:340px;display:grid;gap:16px;justify-items:center}
.em-fin p{font-size:17px;line-height:1.4}
.em-dec{border-top:1.5px dashed var(--ink);padding-top:14px}
.em-dec ul{list-style:none;padding:0;display:grid;gap:7px;margin-top:10px;font-size:12px}
.em-dec li{display:flex;gap:10px;align-items:baseline}
.em-dec li b{flex:none;font-weight:500;border:1.5px solid var(--ink);padding:0 5px;background:#fff}
.em-dec li b.em-y{background:var(--yellow)}
.js .em-dec li{animation:em-sube .45s cubic-bezier(.16,1,.3,1) both}

/* ---------- caso real: la bifurcación y la lista ---------- */
.em-caso{display:grid;gap:40px 56px;align-items:start;margin-top:40px}
.em-caso-a{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center}
.em-caso-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;margin-top:72px;padding-top:64px;border-top:1.5px dashed var(--ink)}
.em-n{display:block;font-family:var(--display);font-size:clamp(84px,11vw,150px);line-height:1.05}
.em-que{font-size:22px;line-height:1.3;max-width:20em}
.em-por{margin-top:16px;color:var(--muted);max-width:30em}
.em-doce{display:grid;grid-template-columns:repeat(6,36px);gap:8px;margin-top:28px}
.em-doce i{width:36px;height:36px;border:1.5px solid var(--ink);background:var(--paper);display:grid;place-items:center;font-style:normal}
.em-doce i::after{content:"✓";font-family:var(--mono);font-size:15px;line-height:1}
.em-doce .em-fallo{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.js .em-doce .em-fallo{transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.5,.4,1),background .4s ease;transition-delay:calc(var(--i,0)*80ms),calc(var(--i,0)*80ms),0s}
[data-estado="antes"] .em-doce .em-fallo{background:var(--aviso)}
[data-estado="antes"] .em-doce .em-fallo::after{content:"!"}
.em-doce-pie{margin-top:14px;color:var(--muted)}
[data-estado="antes"] .em-arreglado{visibility:hidden}

.em-rama{margin:0;background:#fff;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.em-rama-cab{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 10px 8px 16px;border-bottom:1.5px solid var(--ink);min-height:64px}
.em-conm{display:flex}
.em-conm .em-b{box-shadow:none;transform:none}
.em-conm .em-b + .em-b{border-left:0}
.em-conm .em-b[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.em-rama-svg{padding:22px 20px 14px;display:flex;justify-content:center;background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px);background-size:36px 36px}
.em-rama-svg svg{display:block;width:100%;max-width:520px;height:auto}
.em-r-mal{stroke-dasharray:2 7;stroke-linecap:round}
.em-r-fin{transform-box:fill-box;transform-origin:center}
.js .em-r-mal,.js .em-r-bien,.js .em-r-fin,.js .em-r-x,.js .em-rama-pie p{transition:opacity .45s ease}
[data-estado="antes"] .em-r-mal{stroke-dasharray:none}
[data-estado="antes"] .em-r-bien,[data-estado="antes"] .em-r-x{opacity:0}
[data-estado="antes"] .em-r-fin{opacity:.16}
[data-estado="antes"] .em-l-ahora{opacity:.3}
.js [data-estado="despues"] .em-r-fin{animation:em-caja .55s cubic-bezier(.2,1.5,.4,1)}
.js [data-estado="despues"] .em-r-x{animation:em-caja .4s cubic-bezier(.2,1.8,.4,1);transform-box:fill-box;transform-origin:center}
@keyframes em-caja{from{transform:scale(.6)}}
.em-bola-mal{display:none}
[data-estado="antes"] .em-bola-mal{display:inline}
[data-estado="antes"] .em-bola-bien{display:none}
.em-rama-pie{border-top:1.5px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}
.em-rama-pie p{padding:13px 16px 15px;font-size:16px;line-height:1.38;display:grid;gap:7px;align-content:start}
.em-rama-pie p + p{border-left:1.5px solid var(--ink)}
.em-rama-pie b{justify-self:start;padding:2px 8px;border:1.5px solid var(--ink);font-weight:500}
.em-l-antes b{background:var(--aviso)}
.em-l-antes span{color:var(--muted)}
.em-l-ahora b{background:var(--yellow)}

.em-lista{background:#fff;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);width:100%;max-width:470px;justify-self:center}
.em-lista > header{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1.5px solid var(--ink)}
.em-lista ul{list-style:none;padding:0}
.em-lista li{display:grid;grid-template-rows:1fr}
.em-fila{overflow:hidden;min-height:0}
.em-fila-in{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px dashed var(--dash);font-size:16px;line-height:1.3}
.em-fila-in span{margin-right:auto}
.em-fila-in b{font-size:11px;padding:3px 7px;border:1px solid var(--ink);white-space:nowrap;font-weight:500}
.em-av{width:26px;height:26px;border:1.5px solid var(--ink);background:var(--yellow);flex:none;display:grid;place-items:center;font-style:normal}
.em-av::after{content:"✓";font-family:var(--mono);font-size:12px;line-height:1}
.em-fuera .em-av,.em-resumen .em-av{background:var(--paper);border-style:dashed}
.em-fuera .em-av::after,.em-resumen .em-av::after{content:"–"}
.em-fuera span{color:var(--muted);text-decoration:line-through}
.em-fuera b,.em-resumen b{background:var(--aviso)}
.em-resumen{display:none!important}
.em-resumen span{color:var(--muted)}
.em-lista-nota{padding:12px 14px;background:var(--yellow);font-size:17px;font-weight:500}
/* con movimiento: primero se señalan, luego se van y la lista adelgaza */
.em-viva .em-fuera{transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.em-viva .em-fuera span,.em-viva .em-fuera b{transition:opacity .3s ease,color .3s ease}
.em-viva .em-fuera:not(.em-tacha) span{text-decoration:none;color:var(--ink)}
.em-viva .em-fuera:not(.em-tacha) b{opacity:0}
.em-viva .em-fuera.em-ida{grid-template-rows:0fr;opacity:0}
.em-viva .em-resumen{display:grid!important;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.em-viva.em-limpia .em-resumen{grid-template-rows:1fr}

/* ---------- hero: sellos de hora que salen de «correo» y «SMS» (los añade el guion, solo con movimiento) ---------- */
.em-chip{opacity:0;transform-box:fill-box;transform-origin:center}
.js .dg.viva .em-chip{animation:em-chip 9s cubic-bezier(.16,1,.3,1) infinite}
@keyframes em-chip{0%{opacity:0;transform:translateY(10px) rotate(-2deg) scale(1.25)}4%,27%{opacity:1;transform:rotate(-2deg)}32%,100%{opacity:0;transform:translateY(-10px) rotate(-2deg)}}

/* ---------- «cómo se contrata»: mini recorrido de cada modo ---------- */
.modo .em-mini{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:-4px 0 20px}
.modo .em-mini li{position:relative;z-index:0;padding:5px 9px;border:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--paper);font-size:12px}
.modo .em-mini li.em-fl{border:0;background:none;padding:0 8px;font-size:14px}
.modo .em-mini li.em-y{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.em-rueda-mes li:not(.em-fl)::before{content:"";position:absolute;inset:0;background:var(--yellow);opacity:0;z-index:-1}
.js .obs.in .em-rueda-mes li:not(.em-fl)::before{animation:em-turno 6.4s linear infinite}
.js .obs.in .em-rueda-mes li:nth-child(3)::before{animation-delay:1.6s}
.js .obs.in .em-rueda-mes li:nth-child(5)::before{animation-delay:3.2s}
.js .obs.in .em-rueda-mes li:nth-child(7)::before{animation-delay:4.8s}
html:not(.js) .em-rueda-mes li:nth-child(1)::before{opacity:1}
@keyframes em-turno{0%,3%{opacity:0}6%,22%{opacity:1}26%,100%{opacity:0}}

/* ---------- preguntas frecuentes: al lado, lo mismo en corto ---------- */
.em-faq-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,350px);gap:40px 64px;align-items:start}
.em-corto{margin-top:34px;position:sticky;top:28px;transform:rotate(1.2deg)}
.em-corto .fila{grid-template-columns:44px minmax(0,1fr);padding:14px 16px}
.em-corto .firma{padding:18px 16px 24px}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .em-cabeza{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:28px}
  .em-vida{box-shadow:5px 5px 0 var(--ink)}
  .em-vida-cab{flex-wrap:wrap;padding:12px 12px 12px 14px}
  .em-vida-tit{margin-right:auto}
  .em-ctl{flex:1 0 100%;margin-left:0}
  .em-ctl .em-b{flex:1 1 0}
  .em-par{padding:18px 2px 14px;gap:2px;min-height:64px}
  .em-par-t,.em-par-h{display:none}
  .em-par-n{font-size:13px;color:var(--ink)}
  .em-nodo{margin-bottom:10px}
  .em-via-caja{--rt:25px}
  .em-tab .em-par[aria-selected="true"] .em-par-n{background:var(--yellow);padding:0 5px}
  .em-momento{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .em-hace{padding:22px 16px 24px}
  .em-num{font-size:68px}
  .em-buzon{border-left:0;border-top:1.5px solid var(--ink);padding:14px 14px 28px;min-height:0;gap:18px}
  .em-correo-c{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}
  .em-correo-c img{width:72px}
  .em-correo-c strong{font-size:18px}
  .em-correo > header,.em-sms > header{flex-wrap:wrap}
  .em-sms{max-width:94%}
  .em-coord .lam,.em-manana-sec .lam{min-height:0}
  .em-sig{padding-top:18px}
  .em-tab .em-momento:not(.em-act){display:none}
  .em-reloj-c{padding:18px 46px 12px 28px}
  .em-feed li{grid-template-columns:minmax(0,1fr);gap:2px}
  .em-mazo{margin:0 22px 20px 0}
  .em-bor[data-pos="1"]{transform:translate(10px,10px) rotate(1.4deg)}
  .em-bor[data-pos="2"]{transform:translate(20px,18px) rotate(2.8deg)}
  .em-vista{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .em-vista img,.em-dib{width:84px}
  .em-vista strong{font-size:18px}
  .em-caso{margin-top:30px}
  .em-caso-a,.em-caso-b{grid-template-columns:minmax(0,1fr)}
  .em-caso-b{margin-top:48px;padding-top:44px}
  .em-caso-b .em-caso-txt{order:-1}
  .em-rama-pie{grid-template-columns:minmax(0,1fr)}
  .em-rama-pie p + p{border-left:0;border-top:1.5px solid var(--ink)}
  .em-rama-svg{padding:18px 12px 10px}
  .em-que{font-size:20px}
  .em-prueba{font-size:12px}
  .em-faq-dos{grid-template-columns:minmax(0,1fr)}
  .em-corto{position:static;margin-top:0;max-width:420px;transform:none}
  .em-corto .firma{padding-right:56px}
}