/* Vistas de cuenta. Colores, fuentes y medidas en variables: para migrar se cambia este bloque.
   Valores del CSS publicado de somoseito.io. Las fuentes dependen de font-src en web/_headers. */
@font-face{font-family:"HB Hue";src:url("https://cdn.prod.website-files.com/66a7fade2aaa92a9b30b0d25/6995cef00e568ab0e1ee1323_HBHueWebv1.38-Light.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Suisse;src:url("https://cdn.prod.website-files.com/66a7fade2aaa92a9b30b0d25/6995ce9e9fdcfed3cc54eed6_SuisseBPIntl-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Suisse;src:url("https://cdn.prod.website-files.com/66a7fade2aaa92a9b30b0d25/6995ce801567eb004437ceb0_SuisseBPIntl-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:Greed;src:url("https://cdn.prod.website-files.com/66a7fade2aaa92a9b30b0d25/6995ceb6e4e670c1a64ee3d2_Greed-Regular.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  --fondo:#f9f9f9;--blanco:#fff;--tinta:#000;--tinta-suave:#5c5c5c;--pie:#737373;--amarillo:#ffe576;
  --t-hue:"HB Hue",Georgia,serif;
  --t-suisse:Suisse,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --t-greed:Greed,"Helvetica Neue",Arial,sans-serif;
  --radio:16px;--pastilla:100px;--muesca:11px;
  --sal:cubic-bezier(.23,1,.32,1);--cajon:cubic-bezier(.32,.72,0,1);--vaiven:cubic-bezier(.77,0,.175,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
::selection{background:var(--amarillo);color:#000}
html{-webkit-text-size-adjust:100%}
body{margin:0 3%;overflow-x:clip;background:var(--fondo);color:var(--tinta);caret-color:#000;font:400 16px/1.4 var(--t-suisse)}
a{color:inherit;text-underline-offset:3px}
:is(a,button,summary,select):focus-visible{outline:2px solid #000;outline-offset:3px}

/* Barra de la web */
.barra{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 10px 10px}
.barra-logo{display:block;flex:none}.barra-logo img{display:block;width:110px;height:auto}
.barra-menu{display:flex;align-items:center;gap:40px;position:static;inset:auto;width:auto;height:auto;margin:0;padding:0;border:0;overflow:visible;background:none;color:#222;font:400 15px/20px var(--t-greed);letter-spacing:1px}
.barra-menu a{text-decoration:none}
.barra-menu a:hover,.barra-menu summary:hover{text-decoration:underline}
.barra-reservas{position:relative}
.barra-reservas summary{cursor:pointer;list-style:none}.barra-reservas summary::-webkit-details-marker{display:none}
.barra-reservas div{position:absolute;z-index:5;left:-14px;top:calc(100% + 8px);display:grid;gap:10px;width:max-content;padding:14px;border-radius:12px;background:var(--blanco);box-shadow:0 10px 24px rgba(40,40,40,.12)}
.barra-idioma .activo{font-weight:700}
.barra-boton{display:none;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.barra-boton span{display:block;width:20px;height:2px;margin:5px auto;background:#000}

/* Composición: hoja a la izquierda, formulario a la derecha */
.escena{display:grid;grid-template-columns:372px minmax(0,1fr);column-gap:clamp(40px,7vw,104px);align-items:start;width:min(1120px,100%);margin:28px auto 72px}
.paso{display:grid;gap:18px;max-width:560px;min-width:0;margin:0}
.cab{padding-top:8px;min-width:0}
.titulo{margin:0;font:400 88px/84px var(--t-hue);letter-spacing:-3px;text-wrap:balance;outline:0}
.nota{margin:22px 0 0;max-width:34ch;font:400 18px/25px var(--t-suisse)}

.imprime>*{animation:imprime .4s var(--sal) backwards}
.imprime>:nth-child(2){animation-delay:40ms}.imprime>:nth-child(3){animation-delay:80ms}.imprime>:nth-child(4){animation-delay:120ms}.imprime>:nth-child(5){animation-delay:160ms}.imprime>:nth-child(n+6){animation-delay:200ms}
.cab>*{animation:entra .28s var(--sal) backwards}.cab>:nth-child(2){animation-delay:40ms}
@keyframes imprime{from{clip-path:inset(0 0 100% 0);translate:0 10px}}
@keyframes entra{from{opacity:0;translate:0 10px}}

.campo{position:relative;padding:12px 0 10px;border-bottom:1px dotted #000}
.campo:first-child{border-top:1px solid #000}
.campo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#000;transform:scaleX(0);transform-origin:0 50%;transition:transform .28s var(--sal);pointer-events:none}
.campo:focus-within::after{transform:none}
.campo:has([aria-invalid="true"]){border-bottom:2px solid #000}
.etq{display:block;font:400 15px/18px var(--t-greed);text-transform:uppercase;letter-spacing:.04em}
.etq-fila{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.entrada{display:block;width:100%;height:40px;margin:4px 0 0;padding:0;border:0;border-radius:0;background:transparent;color:#000;font:400 20px/26px var(--t-suisse);outline:0}
.ver{min-height:44px;margin:-13px -8px -13px 0;padding:0 8px;border:0;background:none;color:#000;cursor:pointer;font:400 15px/18px var(--t-greed);text-transform:uppercase;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px}
.fallo{margin:4px 0 0;font:500 14px/19px var(--t-suisse)}
.aviso{margin:14px 0 0;font:500 15px/21px var(--t-suisse)}
.fallo:not([hidden]),.aviso:not([hidden]){animation:aviso .18s var(--sal)}
@keyframes aviso{from{opacity:0;translate:0 -4px}}
.verificacion{margin-top:14px}.verificacion:empty{margin:0}

.botones{margin-top:20px}
.seguir{display:block;width:100%;min-height:50px;padding:14px 20px;border:0;border-radius:var(--pastilla);background:#000;color:#fff;cursor:pointer;font:500 16px/20px var(--t-suisse);text-transform:uppercase;letter-spacing:.02em;transition:transform .14s var(--sal),background-color .2s ease}
.seguir:active:not(:disabled){transform:scale(.97)}.seguir:disabled{background:#333;cursor:default}
.seguir.cargando::after{content:"";display:inline-block;width:1.1em;height:1.1em;margin-left:.5em;vertical-align:-.2em;filter:invert(1);background:url("/mi-eito/cuenta/simbolo.svg") center/contain no-repeat;animation:gira 1.2s linear infinite,tarde .15s linear .3s both}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes tarde{from{opacity:0}to{opacity:1}}
.proveedores{margin-top:16px}
.proveedor{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 16px;border:1px solid #000;border-radius:var(--pastilla);font-size:15px;line-height:1.2;text-decoration:none;transition:background-color .16s ease}
.proveedor::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:#fff center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5a5.5 5.5 0 0 1-2.4 3.6v3h3.9c2.3-2.1 3.5-5.2 3.5-8.8z'/%3E%3Cpath fill='%2334A853' d='M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.3v3.1A12 12 0 0 0 12 24z'/%3E%3Cpath fill='%23FBBC05' d='M5.3 14.3a7.2 7.2 0 0 1 0-4.6V6.6h-4a12 12 0 0 0 0 10.8z'/%3E%3Cpath fill='%23EA4335' d='M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4A12 12 0 0 0 1.3 6.6l4 3.1c.9-2.8 3.6-4.9 6.7-4.9z'/%3E%3C/svg%3E")}
.enlaces{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:12px;font-size:15px;line-height:20px}
.enlaces a{display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.seguir:hover:not(:disabled){background:#222}.proveedor:hover{background:rgba(0,0,0,.06)}.enlaces a:hover,.ver:hover{text-decoration-thickness:2px}}

/* La comanda: hoja blanca con talón perforado */
.lado-viva{position:sticky;top:20px;z-index:3;perspective:1200px;animation:cae .62s var(--cajon) backwards}
@keyframes cae{from{translate:0 -36px;rotate:-7deg;opacity:0}}
.viva{--rx:0deg;--ry:0deg;transform:rotate(-3.5deg) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .45s var(--cajon);filter:drop-shadow(0 22px 30px rgba(40,40,40,.16)) drop-shadow(0 2px 3px rgba(40,40,40,.08))}
.viva.siguiendo{transition:transform .12s linear}
.comanda{position:relative;padding:16px 20px 18px;background:var(--blanco);border-radius:var(--radio) var(--radio) 0 0;
  -webkit-mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat}
.talon{position:relative;padding:12px 20px 14px;background:var(--blanco);border-radius:0 0 var(--radio) var(--radio);font:400 13px/18px var(--t-suisse);
  -webkit-mask:radial-gradient(circle var(--muesca) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--muesca) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat}
.talon::before{content:"";position:absolute;left:calc(var(--muesca) + 6px);right:calc(var(--muesca) + 6px);top:-1px;height:2px;background:radial-gradient(circle,rgba(0,0,0,.42) 1px,transparent 1.4px) 0 50%/8px 2px repeat-x}
.talon p{margin:0}
.membrete{display:flex;justify-content:flex-end;min-height:48px;margin:0 0 6px}
.hormigas{display:block;flex:none;width:48px;height:48px}
.hormigas svg{display:block;width:100%;height:100%;overflow:visible}
.antena{transform-box:fill-box}.antena.izq{transform-origin:100% 100%}.antena.der{transform-origin:0 100%}
.alerta .antena.izq{animation:antena-i .42s var(--sal)}.alerta .antena.der{animation:antena-d .42s var(--sal)}
@keyframes antena-i{35%{transform:rotate(26deg)}70%{transform:rotate(-10deg)}}
@keyframes antena-d{35%{transform:rotate(-26deg)}70%{transform:rotate(10deg)}}
.viva.cargando .hormiga{animation:paso-hormiga .36s var(--vaiven) .3s infinite alternate}
.viva.cargando .hormiga+.hormiga{animation-delay:.48s}
@keyframes paso-hormiga{to{transform:translateY(-70px)}}
.viva-nombre{margin:0 0 12px;color:var(--tinta-suave);font:400 68px/1 var(--t-hue);letter-spacing:-.03em}
.viva-foto{display:grid;place-items:center;width:100%;height:min(300px,36vh);border:1.5px dashed #000;border-radius:10px}
.foto-vacia{font:400 15px/18px var(--t-greed);text-transform:uppercase;letter-spacing:.04em}
.viva-lineas{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid #000}
.viva-lineas li{min-height:30px;padding:6px 0 4px;border-bottom:1px dotted #000}
.viva-lineas li::before{content:attr(data-etq);font:400 14px/19px var(--t-greed);text-transform:uppercase;letter-spacing:.04em}

/* Pie de la web */
.pie-marca{display:flex;justify-content:space-between;gap:32px;padding:20px 0 20px 20px;border-block:1px solid #000}
.pie-marca>img{display:block;width:min(633px,47%);height:auto}
.pie-datos{display:flex;gap:32px;color:var(--pie);font:400 16px/22px var(--t-greed);text-transform:uppercase}
.pie-datos p{margin:0}
.pie-redes{display:grid;align-content:start;gap:6px}.pie-redes a{text-decoration:none}.pie-redes a:hover{text-decoration:underline}
.pie-legal{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:30px;margin-bottom:20px;border-bottom:1px solid #000;font:400 16px/22px var(--t-greed);text-transform:uppercase}

@media (max-width:991px){
  .barra-boton{display:block}
  .barra-menu{position:fixed;inset:72px 3% auto auto;display:none;width:min(320px,94%);height:auto;padding:18px;border-radius:var(--radio);background:var(--blanco);box-shadow:0 18px 40px rgba(40,40,40,.18)}
  .barra-menu:popover-open{display:grid;gap:14px}
  .barra-reservas div{position:static;padding:10px 0 0;box-shadow:none}
  .escena{grid-template-columns:minmax(0,1fr);margin-top:8px}
  .lado-viva{position:static;margin-bottom:14px} /* fija, tapaba el formulario al desplazar */
  .viva{transform:rotate(-1.2deg)}
  .viva .comanda{display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-areas:"memb foto" "nombre foto";column-gap:12px;padding:10px 12px 12px;border-radius:var(--radio);-webkit-mask:none;mask:none}
  .viva .talon,.viva-lineas{display:none}
  .membrete{grid-area:memb;justify-content:flex-start;min-height:28px;margin:0 0 2px}
  .hormigas{width:28px;height:28px}
  .viva-nombre{grid-area:nombre;margin:0;font-size:32px}
  .viva-foto{grid-area:foto;height:124px}.foto-vacia{font-size:13px}
  .paso{max-width:none}
  .titulo{font-size:clamp(44px,12vw,72px);line-height:1;letter-spacing:-.03em}
  .nota{margin-top:14px;font-size:16px;line-height:22px}
  .entrada{font-size:17px}
  .pie-marca{flex-direction:column;padding-left:0}.pie-marca>img{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cab>*,.imprime>*,.fallo:not([hidden]),.aviso:not([hidden]),.lado-viva{animation:aparece .2s ease;animation-delay:0s!important}
  .viva,.campo::after{transition:none}
  .viva.cargando .hormiga,.alerta .antena{animation:none}
  .seguir{transition:background-color .2s ease}.seguir:active:not(:disabled){transform:none}
  .seguir.cargando::after{animation:tarde .15s linear .3s both}
}
@keyframes aparece{from{opacity:0}}