:root{--coffee:#41271f;--brown:#6b4030;--caramel:#b57a58;--cream:#fff9f4;--paper:#f6ede6;--ink:#2d211d;--muted:#79665d;--line:#e5d4c9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif}button,a{font:inherit}.landing-page svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.landing-nav{position:absolute;z-index:5;top:0;left:50%;width:min(1240px,calc(100% - 40px));min-height:92px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff40;color:#fff}.landing-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.landing-brand img{width:58px;height:58px;border-radius:50%;background:#fff;object-fit:contain}.landing-brand span{display:grid;gap:3px}.landing-brand b{font:700 19px Georgia,serif;letter-spacing:2px}.landing-brand small{font-size:9px;letter-spacing:2.2px}.landing-nav nav{display:flex;align-items:center;gap:28px}.landing-nav nav>a{color:#fff;font-size:14px;font-weight:700;text-decoration:none}.landing-nav button,.hero-actions button{border:1px solid #ffffff70;border-radius:999px;padding:13px 19px;background:#ffffff18;color:#fff;font-weight:800;cursor:pointer;backdrop-filter:blur(8px)}.landing-nav button{display:flex;align-items:center;gap:8px}.landing-main{display:block;width:100%}.landing-hero{position:relative;min-height:720px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.55fr);align-items:center;gap:70px;padding:150px max(40px,calc((100% - 1240px)/2)) 80px;overflow:hidden;background:linear-gradient(105deg,#27150fea 10%,#4e2b20d9 55%,#6b403094),var(--hero-photo) center/cover;color:#fff}.landing-hero:after{content:"";position:absolute;inset:0;background:url("../../backgrounds/porfirio-character-pattern.webp") center/900px auto repeat;opacity:.12;pointer-events:none}.hero-copy,.hero-card{position:relative;z-index:1}.hero-copy>p,.landing-intro p,.menus-section header p,.staff-banner p{margin:0 0 12px;color:#eecfbe;font-size:11px;font-weight:900;letter-spacing:3px}.hero-copy h1{max-width:800px;margin:0;font:700 clamp(48px,6vw,82px)/.98 Georgia,serif}.hero-copy h1 em{color:#f1c7ae;font-weight:400}.hero-copy>span{display:block;max-width:650px;margin-top:25px;color:#f0ddd3;font-size:17px;line-height:1.7}.hero-actions{display:flex;gap:12px;margin-top:32px}.hero-actions a,.staff-banner>button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:15px 22px;background:#fff;color:var(--coffee);font-weight:900;text-decoration:none;cursor:pointer}.hero-features{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;color:#ead7cd;font-size:13px}.hero-card{align-self:end;margin-bottom:30px;padding:34px;border:1px solid #ffffff50;border-radius:30px;background:#fffdfa;color:var(--ink);box-shadow:0 30px 80px #160a064f}.hero-card>span{color:var(--caramel);font-size:10px;font-weight:900;letter-spacing:2.5px}.hero-card>strong{display:block;margin:15px 0;font:700 38px/1.06 Georgia,serif}.hero-card>small{display:block;color:var(--muted);font-size:14px;line-height:1.6}.hero-card>a{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);color:var(--brown);font-weight:900;text-decoration:none}.landing-intro{width:min(1160px,calc(100% - 40px));margin:0 auto;padding:100px 0 45px;display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end}.landing-intro p,.menus-section header p,.staff-banner p{color:var(--caramel)}.landing-intro h2,.menus-section h2,.staff-banner h2{margin:0;font:700 clamp(34px,4vw,55px)/1.05 Georgia,serif}.landing-intro>span{color:var(--muted);font-size:17px;line-height:1.8}.system-grid{width:min(1160px,calc(100% - 40px));margin:0 auto 100px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.system-grid article{padding:25px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 32px #41271f0b}.system-grid i,.staff-banner i{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#f1e2d8;color:var(--brown)}.system-grid h3{margin:20px 0 8px;font:700 22px Georgia,serif}.system-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.menus-section{padding:90px max(40px,calc((100% - 1160px)/2));background:var(--paper)}.menus-section>header{display:grid;grid-template-columns:1fr .7fr;align-items:end;gap:60px;margin-bottom:35px}.menus-section>header>span{color:var(--muted);line-height:1.7}.landing-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.landing-branches>a{position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:24px;border-radius:26px;background:linear-gradient(180deg,#2f18122b,#2f1812e8),var(--branch-photo) center/cover;color:#fff;text-decoration:none;box-shadow:0 16px 35px #3d241a20}.branch-kind{align-self:flex-start;border:1px solid #ffffff70;border-radius:999px;padding:8px 11px;background:#27140f50;font-size:9px;font-weight:900;letter-spacing:1.5px}.landing-branches>a>div{display:flex;align-items:center;gap:12px;margin-top:auto}.landing-branches>a>div>i{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#fff;color:var(--brown)}.landing-branches>a>div span{display:grid;gap:4px}.landing-branches b{font:700 25px Georgia,serif}.landing-branches small{color:#ead9cf}.landing-branches>a>strong{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid #ffffff48}.staff-banner{width:min(1160px,calc(100% - 40px));margin:90px auto;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:36px;border-radius:28px;background:linear-gradient(#41271fe8,#41271fe8),url("../../backgrounds/porfirio-character-pattern.webp") center/880px auto repeat;color:#fff}.staff-banner>div{display:flex;align-items:center;gap:20px}.staff-banner i{flex:0 0 52px;background:#fff;color:var(--brown)}.staff-banner h2{font-size:34px}.staff-banner small{display:block;margin-top:8px;color:#dcc7bd}.landing-footer{min-height:130px;display:flex;align-items:center;gap:30px;padding:25px max(40px,calc((100% - 1160px)/2));background:#281813;color:#fff}.landing-footer p{margin-left:auto;color:#cdbbb2}.landing-footer>a:last-child{color:#fff;font-weight:800}.modal-open{overflow:hidden}@media(max-width:850px){.landing-nav{width:calc(100% - 28px)}.landing-nav nav>a{display:none}.landing-nav nav{gap:0}.landing-nav button{padding:11px 14px}.landing-brand b{font-size:16px}.landing-brand small{font-size:7px}.landing-brand img{width:48px;height:48px}.landing-hero{min-height:760px;grid-template-columns:1fr;padding:130px 20px 55px;gap:35px}.hero-copy h1{font-size:47px}.hero-copy>span{font-size:15px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions a,.hero-actions button{width:100%}.hero-features{gap:9px 16px}.hero-card{margin:0;padding:25px}.hero-card>strong{font-size:31px}.landing-intro{grid-template-columns:1fr;gap:20px;padding-top:70px}.system-grid{grid-template-columns:1fr 1fr;margin-bottom:70px}.menus-section{padding:65px 20px}.menus-section>header{grid-template-columns:1fr;gap:15px}.landing-branches{grid-template-columns:1fr}.landing-branches>a{min-height:280px}.staff-banner{align-items:stretch;flex-direction:column;padding:25px}.staff-banner>button{width:100%}.landing-footer{align-items:flex-start;flex-direction:column;gap:15px}.landing-footer p{margin:0}}@media(max-width:480px){.landing-nav{min-height:78px}.landing-nav nav button svg{display:none}.landing-brand span small{display:none}.landing-hero{padding-top:110px}.hero-copy h1{font-size:40px}.system-grid{grid-template-columns:1fr}.landing-intro h2,.menus-section h2{font-size:37px}.staff-banner>div{align-items:flex-start}.staff-banner h2{font-size:29px}}

/* Entrada exclusiva cuando el sitio se abre como aplicación instalada */
.app-login-entry{min-height:100dvh}
.app-login-entry>.public-site-nav,.app-login-entry>.landing-main,.app-login-entry>.public-site-footer{display:none!important}
@media (display-mode: standalone){body.landing-page{min-height:100dvh}body.landing-page>.public-site-nav,body.landing-page>.landing-main,body.landing-page>.public-site-footer{display:none!important}}

/* Pedido desde WhatsApp */
.whatsapp-order-section{width:min(1160px,calc(100% - 40px));margin:0 auto 100px}.whatsapp-order-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.whatsapp-order-flow article{position:relative;min-height:300px;overflow:hidden;padding:27px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 14px 38px #41271f0d;transition:transform .22s ease,box-shadow .22s ease}.whatsapp-order-flow article:hover{transform:translateY(-5px);box-shadow:0 22px 46px #41271f18}.whatsapp-order-flow article>span{position:absolute;top:24px;right:24px;color:#cbb2a5;font-size:11px;font-weight:900;letter-spacing:.12em}.whatsapp-order-flow i{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#e6f5ec;color:#23825a}.whatsapp-order-flow i svg{width:26px}.whatsapp-order-flow h3{margin:35px 0 10px;font:700 25px/1.08 Georgia,serif}.whatsapp-order-flow p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.whatsapp-order-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:20px;padding:28px 32px;border-radius:25px;background:linear-gradient(115deg,#173f31,#25865c);color:#fff;box-shadow:0 20px 50px #17442f2b}.whatsapp-order-cta:after{content:"";position:absolute;width:190px;height:190px;right:28%;top:-110px;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 0 0 40px #ffffff08}.whatsapp-order-cta>div{position:relative;z-index:1;display:flex;align-items:center;gap:17px}.whatsapp-order-cta img{width:62px;height:62px;padding:11px;border-radius:19px;background:#fff;object-fit:contain}.whatsapp-order-cta span{display:grid;gap:5px}.whatsapp-order-cta small{color:#bee2ce;font-size:9px;font-weight:900;letter-spacing:2px}.whatsapp-order-cta b{font:700 clamp(20px,2.4vw,29px) Georgia,serif}.whatsapp-order-cta>a{position:relative;z-index:1;display:flex;align-items:center;gap:10px;white-space:nowrap;border-radius:999px;padding:15px 20px;background:#fff;color:#1f6848;font-size:13px;font-weight:900;text-decoration:none;transition:transform .2s}.whatsapp-order-cta>a:hover{transform:translateY(-2px)}.whatsapp-order-cta>a svg{width:18px}.whatsapp-order-pending{position:relative;z-index:1;border:1px solid #ffffff45;border-radius:999px;padding:13px 17px;color:#d9eee2;font-size:12px;font-weight:800}@media(max-width:900px){.whatsapp-order-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.whatsapp-order-flow article{min-height:270px}.whatsapp-order-cta{align-items:flex-start;flex-direction:column}.whatsapp-order-cta>a{width:100%;justify-content:center}}@media(max-width:520px){.whatsapp-order-section{width:calc(100% - 24px);margin-bottom:70px}.whatsapp-order-flow{grid-template-columns:1fr}.whatsapp-order-flow article{min-height:auto;padding:23px}.whatsapp-order-flow h3{margin-top:28px}.whatsapp-order-cta{padding:23px}.whatsapp-order-cta img{width:52px;height:52px}.whatsapp-order-cta>div{align-items:flex-start}}

/* Acceso recuperable, visible exclusivamente desde la entrada privada del personal. */
.employee-login-fab {
    position: fixed;
    z-index: 80;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    min-height: 52px;
    padding: 0 19px;
    border: 1px solid #ffffff5c;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #342019ef;
    color: #fff;
    box-shadow: 0 16px 38px #1c0c0752;
    backdrop-filter: blur(14px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    transition: opacity .2s ease, transform .2s ease;
    animation: employeeAccessIn .28s ease-out;
}
.employee-login-fab svg { width: 19px; }
.modal-open .employee-login-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}
@keyframes employeeAccessIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
    .employee-login-fab {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 48px;
        padding-inline: 15px;
    }
}

.home-title-mobile,.home-mobile-visual{display:none}
@media(max-width:700px){
.landing-page .landing-hero{position:relative;min-height:350px!important;height:auto;display:block!important;padding:82px 18px 24px!important;overflow:hidden;background:radial-gradient(circle at 88% 74%,#c98d6f42 0 16%,transparent 39%),linear-gradient(145deg,#2d1b17 0%,#573629 100%)!important}
.landing-page .landing-hero:after{background-size:auto 145%!important;background-position:70% center!important;opacity:.13!important}.landing-page .landing-hero:before{width:210px;right:-125px;bottom:-105px;box-shadow:0 0 0 45px #ffffff08,0 0 0 90px #ffffff05}
.landing-page .hero-copy{width:min(68%,260px);display:block}.landing-page .hero-copy>p{margin-bottom:10px;font-size:7px!important;letter-spacing:1.7px!important}
.landing-page .hero-copy h1{max-width:245px;margin:0;font-family:"DM Sans",Arial,sans-serif!important;font-size:clamp(27px,8vw,34px)!important;font-weight:800;line-height:.98!important;letter-spacing:-.045em}.home-title-desktop{display:none}.home-title-mobile{display:block}.landing-page .home-title-mobile em{display:block;margin-top:3px;color:#f0bea4;font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:-.02em}
.landing-page .hero-copy>span,.landing-page .hero-features{display:none}.landing-page .hero-actions{width:max-content;margin-top:20px}.landing-page .hero-actions a{width:auto!important;min-width:0!important;padding:9px 11px;border-radius:12px;font-size:8px}.landing-page .hero-actions svg{width:13px}
.landing-page .hero-card{display:none!important}.landing-page .home-mobile-visual{position:absolute;z-index:2;top:108px;right:14px;width:120px;display:grid;justify-items:center;gap:9px;color:#fff;text-align:center}.landing-page .home-mobile-visual>i{width:64px;height:64px;display:grid;place-items:center;border:1px solid #ffffff45;border-radius:21px;background:#ffffffed;color:#23825a;box-shadow:0 15px 30px #1a0b0740;animation:homeMobileFloat 3.6s ease-in-out infinite}.landing-page .home-mobile-visual svg{width:30px}.landing-page .home-mobile-visual span{display:grid;gap:3px}.landing-page .home-mobile-visual b{font-size:9px}.landing-page .home-mobile-visual small{color:#dbcac2;font-size:6px;line-height:1.3}
.landing-page .landing-intro{padding-top:38px;padding-bottom:22px}.landing-page .landing-intro h2{font-size:27px!important}.landing-page .landing-intro>span{font-size:11px!important}
@keyframes homeMobileFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
}

@media(max-width:700px){
.landing-page .landing-hero:after{background-image:url("../../backgrounds/porfirio-character-pattern.webp")!important;background-size:auto 145%!important;background-position:64% center!important;mix-blend-mode:multiply!important;opacity:.48!important;filter:none!important}
.landing-page .home-mobile-visual>i{border-radius:50%!important;background:#fff!important;color:#231c19!important;box-shadow:0 15px 32px #170b074a,0 0 0 5px #ffffff14!important}
.landing-page .home-mobile-visual>i img{display:block;width:38px!important;height:38px!important;object-fit:contain}
}
/* App instalada en iPhone (iOS 26): si la página es más corta que la pantalla, iOS acorta la pantalla de la app
   justo la altura de la barra de la hora (WebKit bug 301108) y la barra inferior fija queda flotando sobre una franja
   con el fondo. Con la raíz al menos del alto completo, iOS le da toda la pantalla. El tope en 100lvh evita que la
   página se desplace esa misma altura cuando iOS sí da la pantalla completa. */
@media (display-mode: standalone) {
    html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px))); }
}


/* =========================================================
   Acceso de personal · "Iniciar sesión"
   Formal y sobrio: página neutra, logo centrado, campos con borde y etiqueta flotante,
   un botón ancho y textos cortos. En escritorio es una tarjeta centrada sobre el sitio
   difuminado; en celular y como app ocupa la pantalla. Los selectores llevan
   body.landing-page para ganar a las reglas heredadas de public-site.css.
   ========================================================= */
body.landing-page {
    --lg-page: #f4f3f1;
    --lg-card: #ffffff;
    --lg-input: #fafaf9;
    --lg-border: #d9d5d0;
    --lg-border-strong: #b9b3ac;
    --lg-line: #e6e3df;
    --lg-ink: #1c1a18;
    --lg-ink-2: #55504b;
    --lg-ink-3: #6e6862;
    --lg-solid: #1c1a18;
    --lg-solid-hover: #34302c;
    --lg-on-solid: #ffffff;
    --lg-focus: #1c1a18;
    --lg-error: #a32a22;
    --lg-error-bg: #fcefed;
    --lg-veil: rgb(244 243 241 / .9);
    --lg-shadow: 0 1px 2px rgb(28 26 24 / .04), 0 18px 48px -24px rgb(28 26 24 / .22);
}
@media (prefers-color-scheme: dark) {
    body.landing-page {
        --lg-page: #121110;
        --lg-card: #1c1b19;
        --lg-input: #222120;
        --lg-border: #3a3734;
        --lg-border-strong: #57524d;
        --lg-line: #2e2c29;
        --lg-ink: #f3f1ee;
        --lg-ink-2: #c4beb7;
        --lg-ink-3: #a59e96;
        --lg-solid: #f3f1ee;
        --lg-solid-hover: #ffffff;
        --lg-on-solid: #151413;
        --lg-focus: #f3f1ee;
        --lg-error: #f4aaa3;
        --lg-error-bg: #3a2220;
        --lg-veil: rgb(18 17 16 / .9);
        --lg-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 48px -24px rgb(0 0 0 / .6);
    }
}

/* El diálogo es transparente: la tarjeta del formulario, la nota legal y el aviso de instalación
   se acomodan como bloques independientes, uno debajo de otro. */
body.landing-page .login-dialog {
    color-scheme: light;
    width: min(400px, calc(100% - 32px));
    max-width: none;
    max-height: 100dvh;
    margin: auto;
    padding: 16px 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 0;
    background: transparent;
    color: var(--lg-ink);
    font-family: var(--pp-body, "Onest", ui-sans-serif, system-ui, sans-serif);
    overscroll-behavior: contain;
}
body.landing-page .login-dialog:not([open]) { display: none; }
@media (prefers-color-scheme: dark) { body.landing-page .login-dialog { color-scheme: dark; } }
body.landing-page .login-dialog[open] { animation: lgIn .35s cubic-bezier(.2, .8, .2, 1) backwards; }
body.landing-page .login-dialog::backdrop {
    background: var(--lg-veil);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    animation: lgFade .25s ease-out backwards;
}
@keyframes lgIn { from { opacity: 0; transform: scale(.985); } }
@keyframes lgFade { from { opacity: 0; } }

body.landing-page .login-dialog ::selection { background: var(--lg-ink); color: var(--lg-card); }
body.landing-page .login-dialog :focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 3px; }

.login-form {
    order: 1;
    display: flex;
    flex-direction: column;
    padding: 40px 40px 32px;
    border: 1px solid var(--lg-line);
    border-radius: 16px;
    background: var(--lg-card);
    box-shadow: var(--lg-shadow);
}

body.landing-page .login-close {
    position: fixed;
    z-index: 2;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lg-line);
    border-radius: 50%;
    background: var(--lg-card);
    color: var(--lg-ink-2);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.landing-page .login-close:hover { color: var(--lg-ink); border-color: var(--lg-border); }
body.landing-page .login-close svg { width: 18px; height: 18px; }
body.landing-page .login-close:focus-visible { border-radius: 50%; }

.login-brand { display: grid; justify-items: center; text-align: center; }
.login-brand img { width: 84px; height: 84px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--lg-line); object-fit: contain; }
body.landing-page .login-brand h2 {
    margin: 22px 0 0;
    font: 600 24px/1.2 var(--pp-body, "Onest", system-ui, sans-serif);
    letter-spacing: -.02em;
    color: var(--lg-ink);
}
.login-brand p { margin: 6px 0 0; color: var(--lg-ink-3); font-size: 14px; line-height: 1.4; }

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--lg-error-bg);
    color: var(--lg-error);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
body.landing-page .login-error svg { width: 18px; height: 18px; margin-top: 1px; stroke-width: 2; }

/* Campos con etiqueta flotante: la etiqueta vive dentro del campo y sube al escribir. */
.login-field { position: relative; margin-top: 12px; }
.login-brand + .login-field, .login-error + .login-field { margin-top: 28px; }
body.landing-page .login-field input {
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 22px 15px 8px;
    border: 1px solid var(--lg-border);
    border-radius: 10px;
    background: var(--lg-input);
    color: var(--lg-ink);
    caret-color: var(--lg-ink);
    font: 400 16px/1.2 var(--pp-body, "Onest", system-ui, sans-serif);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.landing-page .login-field--secret input { padding-right: 88px; }
body.landing-page .login-field input:hover { border-color: var(--lg-border-strong); }
body.landing-page .login-field input:focus,
body.landing-page .login-field input:focus-visible {
    border-color: var(--lg-focus);
    background: var(--lg-card);
    box-shadow: 0 0 0 1px var(--lg-focus);
    outline: none;
}
.login-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lg-ink-3);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
    transform-origin: left center;
    transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
}
.login-field input:focus + label,
.login-field input:not(:placeholder-shown) + label { top: 11px; transform: none; font-size: 12px; }
.login-field input:focus + label { color: var(--lg-ink-2); }
.login-field input:-webkit-autofill + label { top: 11px; transform: none; font-size: 12px; }
body.landing-page .login-field input:-webkit-autofill {
    -webkit-text-fill-color: var(--lg-ink);
    box-shadow: 0 0 0 100px var(--lg-input) inset;
    caret-color: var(--lg-ink);
}
body.landing-page .login-field input:-webkit-autofill:focus { box-shadow: 0 0 0 100px var(--lg-card) inset, 0 0 0 1px var(--lg-focus); }

body.landing-page .login-reveal {
    position: absolute;
    top: 6px;
    right: 6px;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lg-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
body.landing-page .login-reveal:hover { background: var(--lg-line); }
.login-field input:placeholder-shown:not(:focus) ~ .login-reveal { visibility: hidden; }

body.landing-page .login-submit {
    height: 52px;
    margin-top: 20px;
    border: 0;
    border-radius: 10px;
    background: var(--lg-solid);
    color: var(--lg-on-solid);
    font: 600 16px/1 var(--pp-body, "Onest", system-ui, sans-serif);
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
body.landing-page .login-submit:hover { background: var(--lg-solid-hover); }
body.landing-page .login-submit:active { transform: scale(.99); }

.login-help {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--lg-line);
    color: var(--lg-ink-3);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
}

.login-legal { order: 3; margin: 4px 0 0; color: var(--lg-ink-3); font-size: 12px; text-align: center; }

/* Aviso "Instalar Porfirio" (lo agrega pwa.js dentro del diálogo) como segundo bloque */
body.landing-page .login-dialog .install-app.inside-login {
    order: 2;
    width: auto;
    margin: 0;
    padding: 14px 14px 14px 16px;
    gap: 12px;
    border: 1px solid var(--lg-line);
    border-radius: 16px;
    background: var(--lg-card);
    color: var(--lg-ink);
    box-shadow: none;
}
body.landing-page .login-dialog .install-app.inside-login > span {
    width: 38px; height: 38px; flex-basis: 38px;
    border-radius: 10px;
    background: var(--lg-solid);
    color: var(--lg-on-solid);
    font: 600 18px/1 var(--pp-body, "Onest", system-ui, sans-serif);
}
body.landing-page .login-dialog .install-app b { font-size: 14px; font-weight: 600; line-height: 1.25; }
body.landing-page .login-dialog .install-app small { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--lg-ink-3); }
body.landing-page .login-dialog .install-app .install-action {
    flex: none;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    background: transparent;
    color: var(--lg-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
body.landing-page .login-dialog .install-app.is-ready .install-action { border-color: var(--lg-solid); background: var(--lg-solid); color: var(--lg-on-solid); }
body.landing-page .login-dialog .install-app .install-action:disabled { opacity: .5; }
body.landing-page .login-dialog .install-app .dismiss-install {
    width: 32px; height: 32px; flex: none; padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lg-ink-3);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* Celular: pantalla completa, como la pantalla de acceso de una app */
@media (max-width: 560px) {
    body.landing-page .login-dialog {
        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: max(64px, calc(env(safe-area-inset-top) + 56px)) 0 max(16px, env(safe-area-inset-bottom));
        gap: 8px;
        background: var(--lg-page);
    }
    body.landing-page .login-dialog[open] { animation: lgFade .25s ease-out backwards; }
    .login-form { margin-block: auto; padding: 8px 24px 8px; border: 0; background: transparent; box-shadow: none; }
    .login-legal { order: 3; }
    body.landing-page .login-dialog .install-app.inside-login { margin: 0 16px; }
}

/* Entrada como aplicación: la pantalla de acceso es toda la app */
html body.landing-page.app-login-entry { background: var(--lg-page); }
body.landing-page.app-login-entry .login-close { display: none; }
body.landing-page.app-login-entry .login-dialog::backdrop { background: var(--lg-page); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (display-mode: standalone) {
    html body.landing-page { background: var(--lg-page); }
    body.landing-page .login-close { display: none; }
    body.landing-page .login-dialog::backdrop { background: var(--lg-page); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.landing-page .login-dialog[open] { animation: lgFade .2s ease-out backwards; }
    .login-field label { transition: none; }
}
@media (prefers-contrast: more) {
    body.landing-page { --lg-border: var(--lg-ink-2); --lg-line: var(--lg-border-strong); --lg-ink-3: var(--lg-ink-2); }
}