/* ==========================================================================
   QuickTab - Hoja de estilos principal
   ========================================================================== */

:root {
    --azul:           #2563EB;
    --azul-claro:     #3B82F6;
    --azul-suave:     #EAF1FE;
    --carbon:         #1C1614;
    --carbon-medio:   #3A312D;
    --gris:           #6B615C;
    --gris-claro:     #E7E0DA;
    --crema:          #FDF8F4;
    --gris-panel:     #F1F1F2;
    --blanco:         #FFFFFF;
    --verde:          #128F63;
    --rojo:           #DC2626;
    --rojo-suave:     #FEE2E2;

    /* Landing */
    --tinta:          #100E0D;
    --tinta-suave:    #1B1817;
    --ambar:          #F5A524;
    --ambar-suave:    #FFF3DD;

    --radio:          14px;
    --radio-sm:       9px;
    --sombra:         0 1px 2px rgba(28, 22, 20, .05), 0 8px 24px rgba(28, 22, 20, .07);
    --sombra-fuerte:  0 18px 50px rgba(28, 22, 20, .16);
    --transicion:     .18s ease;
    --ancho:          1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: light; }

main [id], section[id] { scroll-margin-top: 96px; }

body {
    margin: 0;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--carbon-medio);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--carbon);
    line-height: 1.2;
    margin: 0 0 .5em;
    letter-spacing: -.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--azul); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--azul-claro); }

img, svg { max-width: 100%; }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 24px;
}

.seccion { padding: 88px 0; }
.seccion--crema { background: var(--crema); }

.seccion__encabezado {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}
.seccion__encabezado p {
    font-size: 1.075rem;
    color: var(--gris);
    margin: 0;
}

.etiqueta {
    display: inline-block;
    background: var(--azul-suave);
    color: var(--azul);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* --------------------------------------------------------- Botones ------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    font-size: .97rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background var(--transicion), border-color var(--transicion),
                color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primario {
    background: var(--ambar);
    color: var(--carbon);
    box-shadow: 0 4px 14px rgba(245, 165, 36, .32);
}
.btn--primario:hover {
    background: #FF8A3D;
    color: var(--carbon);
    box-shadow: 0 8px 22px rgba(255, 138, 61, .38);
}

.cabecera__barra .btn--primario {
    background: var(--ambar);
    color: var(--carbon);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(245, 165, 36, .32);
}
.cabecera__barra .btn--primario:hover {
    background: #FF8A3D;
    color: var(--carbon);
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(255, 138, 61, .38);
}
.cabecera--fija .btn--primario {
    background: var(--ambar);
    color: var(--carbon);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(245, 165, 36, .32);
}
.cabecera--fija .btn--primario:hover {
    background: #FF8A3D;
    color: var(--carbon);
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(255, 138, 61, .38);
}

.btn--azul {
    background: var(--azul);
    color: var(--blanco);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .28);
}
.btn--azul:hover {
    background: var(--azul-claro);
    color: var(--blanco);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .34);
}

.btn--contorno {
    background: transparent;
    border-color: var(--gris-claro);
    color: var(--carbon);
}
.btn--contorno:hover { border-color: var(--carbon); color: var(--carbon); }

.btn--contorno-oscuro {
    background: var(--blanco);
    border-color: var(--carbon);
    color: var(--carbon);
    box-shadow: none;
}
.btn--contorno-oscuro:hover {
    background: var(--crema);
    border-color: var(--carbon);
    color: var(--carbon);
    box-shadow: none;
}

.btn--fantasma { background: transparent; color: var(--carbon); padding: 13px 16px; }
.btn--fantasma:hover { color: var(--azul); }

.btn--contorno-claro {
    background: transparent;
    border-color: var(--gris-claro);
    color: var(--carbon);
}
.btn--contorno-claro:hover {
    background: var(--gris-panel);
    border-color: var(--carbon);
    color: var(--carbon);
}

.btn--claro { background: var(--blanco); color: var(--carbon); }
.btn--claro:hover { background: var(--crema); color: var(--carbon); }

.btn--bloque { width: 100%; }

/* -------------------------------------------------------- Cabecera ------ */

.salto-contenido {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 70;
    padding: 12px 20px;
    border-radius: var(--radio-sm);
    background: var(--blanco);
    color: var(--carbon);
    font-weight: 600;
    box-shadow: var(--sombra-fuerte);
    transition: top .2s ease;
}
.salto-contenido:focus { top: 16px; color: var(--carbon); }

.cabecera {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-claro);
    transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.cabecera__barra {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 78px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--carbon);
    letter-spacing: -.02em;
}
.logo:hover { color: var(--carbon); }
.logo__pila {
    position: relative;
    display: inline-block;
    height: 40px;
    aspect-ratio: 2983 / 775;
    transition: height .28s ease;
}
.logo__imagen {
    display: block;
    height: 30px;
    width: auto;
}
.logo__pila .logo__imagen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: opacity .28s ease;
}
.logo__pila .logo__imagen--oscura { opacity: 1; }
.logo__pila .logo__imagen--clara { opacity: 0; }
.cabecera--fija .logo__pila { height: 30px; }

.navegacion { display: flex; align-items: center; gap: 34px; }

.navegacion__enlaces {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navegacion__enlaces a {
    position: relative;
    color: var(--carbon-medio);
    font-size: .95rem;
    font-weight: 500;
}
.navegacion__enlaces a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: var(--ambar);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
.navegacion__enlaces a:hover { color: var(--azul); }
.navegacion__enlaces a:hover::after { transform: scaleX(1); }

.navegacion__acciones { display: flex; align-items: center; gap: 10px; }

.cabecera .btn--fantasma { color: var(--carbon); }
.cabecera .btn--fantasma:hover { color: var(--azul); }

.menu-boton {
    display: none;
    background: transparent;
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    padding: 9px;
    cursor: pointer;
    color: var(--carbon);
}

/* Cabecera solida despues de bajar */

.cabecera--fija {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--gris-claro);
    box-shadow: 0 8px 30px rgba(16, 14, 13, .07);
}
.cabecera--fija .navegacion__enlaces a { color: var(--carbon-medio); }
.cabecera--fija .navegacion__enlaces a:hover { color: var(--azul); }
.cabecera--fija .btn--fantasma { color: var(--carbon); }
.cabecera--fija .btn--fantasma:hover { color: var(--azul); }
.cabecera--fija .menu-boton {
    background: transparent;
    border-color: var(--gris-claro);
    color: var(--carbon);
}

/* ------------------------------------------------------------ Hero ------ */

.hero {
    position: relative;
    isolation: isolate;
    padding: 128px 0 96px;
    background: var(--blanco);
    color: var(--gris);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(760px 540px at 10% -6%,  rgba(37, 99, 235, .12), transparent 62%),
        radial-gradient(660px 480px at 92% 10%,  rgba(245, 165, 36, .14), transparent 60%),
        radial-gradient(900px 620px at 55% 112%, rgba(37, 99, 235, .08), transparent 66%);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .55;
    background-image:
        linear-gradient(rgba(16, 14, 13, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 14, 13, .05) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent 76%);
            mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent 76%);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 72px;
    align-items: center;
}

.hero__texto h1 {
    color: var(--carbon);
    font-size: clamp(2.25rem, 4.7vw, 3.7rem);
    letter-spacing: -.032em;
    margin-bottom: 20px;
}

.hero__texto p {
    margin: 0;
    font-size: 1.13rem;
    color: var(--gris);
    max-width: 50ch;
}

.resalte {
    background: linear-gradient(100deg, #FFD98A, var(--ambar) 52%, #FF8A3D);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.etiqueta--oscura {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ambar-suave);
    border: 1px solid var(--gris-claro);
    color: var(--carbon-medio);
    backdrop-filter: blur(6px);
}
.etiqueta__punto {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ambar);
    animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
    0%   { box-shadow: 0 0 0 0 rgba(245, 165, 36, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 165, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 34px 0 22px;
}

.hero__nota {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    font-size: .89rem;
    color: var(--gris);
}
.hero__nota span { display: inline-flex; align-items: center; gap: 7px; }
.hero__nota svg { flex: none; color: var(--ambar); }

/* Visual del hero */

.hero__visual { position: relative; }

.hero__marco {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    aspect-ratio: 9 / 11;
    border: 1px solid var(--gris-claro);
    box-shadow: 0 44px 96px rgba(16, 14, 13, .18);
}
.hero__marco::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 14, 13, .04) 35%, rgba(16, 14, 13, .58));
}
.hero__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flotante {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    border-radius: 16px;
    background: var(--blanco);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gris-claro);
    box-shadow: 0 20px 44px rgba(16, 14, 13, .16);
    animation: flotar 6.5s ease-in-out infinite;
}
.flotante__icono {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
}
.flotante__icono--verde { background: #DCF5EA; color: var(--verde); }
.flotante__icono--azul  { background: var(--azul-suave); color: var(--azul); }
.flotante__icono--ambar { background: var(--ambar-suave); color: #B87400; }
.flotante__texto strong {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--carbon);
    line-height: 1.25;
}
.flotante__texto span { font-size: .78rem; color: var(--gris); }

.flotante--comanda { top: 6%;     left: -9%;   animation-delay: -.5s; }
.flotante--venta   { bottom: 15%; right: -10%; animation-delay: -2.6s; }
.flotante--mesa    { bottom: -3%; left: 6%;    animation-delay: -4.4s; }

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

/* Metricas bajo el hero */

.hero__metricas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 88px;
    padding-top: 40px;
    border-top: 1px solid var(--gris-claro);
}
.metrica strong {
    display: block;
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: var(--carbon);
    letter-spacing: -.025em;
    line-height: 1.1;
}
.metrica span { font-size: .88rem; color: var(--gris); }

/* ----------------------------------------------------------- Cinta ------ */

.cinta {
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-claro);
    padding: 30px 0;
    overflow: hidden;
}
.cinta__titulo {
    margin: 0 0 20px;
    text-align: center;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gris);
}
.cinta__pista {
    display: flex;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    width: max-content;
    animation: desplazar 34s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__grupo {
    display: flex;
    align-items: center;
    gap: 46px;
    padding-right: 46px;
}
.cinta__grupo span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--carbon);
    opacity: .5;
}
.cinta__grupo svg { flex: none; color: var(--azul); }
@keyframes desplazar { to { transform: translateX(-50%); } }

/* -------------------------------------------------- Caracteristicas ----- */

.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bento__celda {
    position: relative;
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: 20px;
    padding: 30px 28px;
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.bento__celda:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra);
    border-color: #D8CEC6;
}
.bento__celda h3 { margin-bottom: 8px; }
.bento__celda p { margin: 0; color: var(--gris); font-size: .95rem; }

.bento__icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--azul-suave);
    color: var(--azul);
    margin-bottom: 18px;
}

.bento__celda--mesas { display: flex; flex-direction: column; }

.mapa-mesas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
}
.mapa-mesas__mesa {
    display: grid;
    place-items: center;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--gris-claro);
    background: var(--gris-panel);
    color: var(--gris);
    font-size: .78rem;
    font-weight: 700;
}
.mapa-mesas__mesa--libre   { background: #E8F7F0; border-color: #BCE7D5; color: var(--verde); }
.mapa-mesas__mesa--ocupada { background: var(--azul-suave); border-color: #C7D9FB; color: var(--azul); }
.mapa-mesas__mesa--cobrar  { background: var(--ambar-suave); border-color: #F5DDAE; color: #B07200; }

.mapa-mesas__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 14px 0 0;
    font-size: .75rem;
    color: var(--gris);
}
.mapa-mesas__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.mapa-mesas__leyenda i { display: block; width: 8px; height: 8px; border-radius: 50%; }

.bento__celda--ancha { grid-column: span 2; }
.bento__celda--total { grid-column: span 3; }

.bento__celda--foto {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 330px;
    padding: 32px;
    border-color: transparent;
}
.bento__foto {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.bento__celda--foto::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 14, 13, .12) 18%, rgba(16, 14, 13, .9));
}
.bento__celda--foto > * { position: relative; z-index: 2; }
.bento__celda--foto > .bento__foto { position: absolute; z-index: 0; }
.bento__celda--foto:hover .bento__foto { transform: scale(1.06); }
.bento__celda--foto h3 { color: var(--blanco); font-size: 1.4rem; }
.bento__celda--foto p  { color: rgba(255, 255, 255, .76); max-width: 46ch; }
.bento__celda--foto .bento__icono {
    background: rgba(255, 255, 255, .14);
    color: var(--blanco);
    backdrop-filter: blur(6px);
}

.bento__celda--total {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: center;
    gap: 34px;
    padding: 0;
}
.bento__lado {
    position: relative;
    min-height: 230px;
    height: 100%;
}
.bento__lado img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bento__cuerpo { padding: 30px 34px 30px 0; }
.bento__cuerpo p { max-width: 62ch; }

/* ---------------------------------------------------------- Muestra ----- */

.muestra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 68px;
    align-items: center;
}
.muestra + .muestra { margin-top: 104px; }
.muestra--invertida .muestra__visual { order: -1; }

.muestra__visual { position: relative; isolation: isolate; }
.muestra__imagen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px;
    box-shadow: var(--sombra-fuerte);
}
.muestra__visual::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: -18px;
    bottom: -18px;
    width: 62%;
    height: 62%;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--azul-suave), var(--ambar-suave));
}

.muestra__insignia {
    position: absolute;
    left: -22px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 19px;
    border-radius: 16px;
    background: var(--blanco);
    box-shadow: var(--sombra-fuerte);
}
.muestra__insignia .flotante__texto strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--carbon);
}
.muestra__insignia .flotante__texto span { font-size: .8rem; color: var(--gris); }

.lista-comprobada {
    list-style: none;
    margin: 26px 0 34px;
    padding: 0;
    display: grid;
    gap: 15px;
}
.lista-comprobada li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: .99rem;
    color: var(--carbon-medio);
}
.lista-comprobada svg {
    flex: none;
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 50%;
    background: var(--azul-suave);
    color: var(--azul);
}

/* ----------------------------------------------------- Como funciona ---- */

.pasos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    counter-reset: paso;
}
.pasos::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--gris-claro) 0 9px, transparent 9px 18px);
}
.paso {
    position: relative;
    counter-increment: paso;
    text-align: center;
}
.paso::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--carbon);
    color: var(--blanco);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 0 0 8px var(--blanco);
}
.paso p { margin: 0; color: var(--gris); font-size: .95rem; }

/* ----------------------------------------------------- Testimonios ------ */

.testimonios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.testimonio {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: 20px;
    padding: 32px 28px;
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.testimonio:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.estrellas { display: flex; gap: 3px; color: var(--ambar); margin-bottom: 18px; }

.testimonio blockquote {
    margin: 0 0 24px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--carbon);
}
.testimonio__persona {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--gris-claro);
}
.testimonio__foto {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}
.testimonio__persona strong { display: block; font-size: .93rem; color: var(--carbon); }
.testimonio__persona span { font-size: .82rem; color: var(--gris); }

/* ------------------------------------------------------- Preguntas ------ */

.preguntas {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}
.pregunta {
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: 14px;
    padding: 0 24px;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.pregunta[open] { border-color: #D8CEC6; box-shadow: var(--sombra); }
.pregunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--carbon);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
    content: '+';
    flex: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--azul);
}
.pregunta[open] summary::after { content: '\2212'; }
.pregunta p { margin: 0 0 20px; color: var(--gris); font-size: .96rem; }

/* ------------------------------------------------------------- CTA ------ */

.cta { padding: 96px 0; }

.cta__caja {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 26px;
    padding: 92px 40px;
    text-align: center;
    color: rgba(255, 255, 255, .88);
}
.cta__fondo {
    position: absolute;
    filter: saturate(1.12) contrast(1.04);
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta__caja::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(16, 14, 13, .86) 0%, rgba(16, 14, 13, .76) 48%, rgba(16, 14, 13, .9) 100%),
        radial-gradient(680px 340px at 76% 10%, rgba(37, 99, 235, .34), transparent 62%);
}
.cta__caja .etiqueta { margin-bottom: 18px; }
.cta__caja h2 { color: var(--blanco); }
.cta__caja p { max-width: 54ch; margin: 0 auto 34px; }
.cta__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta__nota { margin: 26px 0 0; font-size: .87rem; color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------- Pie ------ */

.pie {
    background: var(--tinta);
    color: rgba(255, 255, 255, .6);
    padding: 76px 0 32px;
}
.pie .logo__imagen { height: 28px; }

.pie__contenido {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 46px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pie__marca p {
    margin: 20px 0 22px;
    max-width: 36ch;
    font-size: .94rem;
    color: rgba(255, 255, 255, .55);
}
.pie h4 {
    margin: 0 0 18px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blanco);
}
.pie__enlaces {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    font-size: .93rem;
}
.pie__enlaces a { color: rgba(255, 255, 255, .6); }
.pie__enlaces a:hover { color: var(--ambar); }

.pie__redes { display: flex; gap: 10px; }
.pie__redes a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .72);
    transition: background var(--transicion), color var(--transicion);
}
.pie__redes a:hover { background: var(--azul); color: var(--blanco); }

.pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 26px 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .42);
    text-align: left;
}
.pie__legal a { color: rgba(255, 255, 255, .42); }
.pie__legal a:hover { color: var(--ambar); }

/* -------------------------------------------------- Aparicion suave ----- */

.aparece {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
}
.aparece--visible { opacity: 1; transform: none; }

/* ---------------------------------------------- Paginas de acceso ------- */

.acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 24px;
    background:
        radial-gradient(800px 380px at 50% -10%, var(--azul-suave), transparent 60%),
        var(--crema);
}

.acceso__caja { width: 100%; max-width: 452px; }

.acceso__marca {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}
.acceso__marca-imagen {
    display: block;
    height: 44px;
    width: auto;
}

.acceso__tarjeta {
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: 18px;
    box-shadow: var(--sombra);
    padding: 38px 34px;
}
.acceso__tarjeta h1 { font-size: 1.6rem; margin-bottom: 6px; }
.acceso__intro { color: var(--gris); font-size: .95rem; margin-bottom: 28px; }

.acceso__pie {
    text-align: center;
    font-size: .93rem;
    color: var(--gris);
    margin: 24px 0 0;
}

.acceso__volver {
    display: block;
    text-align: center;
    font-size: .9rem;
    color: var(--gris);
    margin-top: 20px;
}
.acceso__volver:hover { color: var(--azul); }

/* ------------------------------------------------------ Formularios ----- */

.campo { margin-bottom: 18px; }

.campo label {
    display: block;
    font-size: .89rem;
    font-weight: 600;
    color: var(--carbon);
    margin-bottom: 7px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo input[type="date"] {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: .97rem;
    color: var(--carbon);
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input::placeholder { color: #A79E98; }
.campo input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.campo__contrasena { position: relative; }
.campo__contrasena input[type="password"],
.campo__contrasena input[type="text"] { padding-right: 44px; }

.campo__alternar-contrasena {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radio-sm);
    color: var(--gris);
    cursor: pointer;
}
.campo__alternar-contrasena:hover { color: var(--carbon); }
.campo__alternar-contrasena:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.campo__alternar-contrasena svg { width: 20px; height: 20px; }

.campo__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.campo__ayuda { display: block; font-size: .82rem; color: var(--gris); margin-top: 6px; }

.campo--casilla {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
}
.campo--casilla input { margin-top: 3px; accent-color: var(--azul); flex-shrink: 0; }
.campo--casilla label { font-weight: 400; color: var(--gris); font-size: .89rem; margin: 0; }

.formulario__opciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    font-size: .89rem;
}

.aviso {
    padding: 13px 16px;
    border-radius: var(--radio-sm);
    font-size: .9rem;
    margin-bottom: 22px;
    border: 1px solid;
}
.aviso--info {
    background: var(--azul-suave);
    border-color: #BFDBFE;
    color: #1E40AF;
}
.aviso--error {
    background: var(--rojo-suave);
    border-color: #FECACA;
    color: #991B1B;
}

/* -------------------------------------------------------------- Panel --- */

.panel__lista {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    border-top: 1px solid var(--gris-claro);
}
.panel__lista li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gris-claro);
    font-size: .93rem;
}
.panel__lista span:first-child { color: var(--gris); }
.panel__lista strong { color: var(--carbon); text-align: right; }

.btn--peligro { color: var(--rojo); }
.btn--peligro:hover { color: #991B1B; }

.tabla-envoltura { overflow-x: auto; }

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tabla th {
    text-align: left;
    padding: 10px 12px;
    color: var(--gris);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--gris-claro);
    white-space: nowrap;
}

.tabla td {
    padding: 12px;
    border-bottom: 1px solid var(--gris-claro);
    color: var(--carbon-medio);
    vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: none; }

.tabla__acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.tabla__acciones form { display: inline-flex; }
.tabla__acciones .btn { padding: 8px 12px; font-size: .85rem; }

.estado-pill {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}
.estado-pill--activo { background: #DCFCE7; color: var(--verde); }
.estado-pill--inactivo { background: var(--gris-claro); color: var(--gris); }

/* ------------------------------------------------------------ Tablero --- */

.tablero {
    /* Paleta neutra (sin tinte calido) para el panel autenticado */
    --carbon:       #18181B;
    --carbon-medio: #27272A;
    --gris:         #71717A;
    --gris-claro:   #E4E4E7;
    --crema:        #F4F4F5;

    display: flex;
    min-height: 100vh;
    background: var(--gris-panel);
}

.tablero__superposicion { display: none; }

.tablero__lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border-right: 1px solid var(--gris-claro);
    padding: 22px 16px;
    z-index: 60;
    overflow-y: auto;
    transition: transform var(--transicion);
}

.tablero__marca { padding: 0 8px; margin-bottom: 26px; }
.tablero__logo { display: inline-flex; align-items: center; }
.tablero__logo-img { max-width: 120px; max-height: 42px; width: auto; height: auto; object-fit: contain; }

.tablero__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.tablero__enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radio-sm);
    color: var(--carbon-medio);
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background var(--transicion), color var(--transicion);
}
.tablero__enlace svg { width: 19px; height: 19px; flex-shrink: 0; }
a.tablero__enlace:hover { background: var(--crema); color: var(--carbon); }

.tablero__enlace--activo,
a.tablero__enlace--activo:hover {
    background: var(--gris-claro);
    color: var(--carbon);
    font-weight: 700;
}

.tablero__enlace--proximo {
    cursor: default;
    color: #A1A1AA;
}
.tablero__enlace--proximo .tablero__insignia { margin-left: auto; }

.tablero__insignia {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--gris-claro);
    color: var(--gris);
    padding: 3px 8px;
    border-radius: 999px;
}

.tablero__salir {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--gris-claro);
}

.tablero__principal {
    flex: 1;
    min-width: 0;
    margin-left: 264px;
}

.tablero__superior {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 72px;
    padding: 0 32px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gris-claro);
}

.tablero__superior-izquierda {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.tablero__menu-boton {
    display: none;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    padding: 9px;
    cursor: pointer;
    color: var(--carbon);
}

.tablero__titulo { display: flex; flex-direction: column; min-width: 0; }
.tablero__titulo strong {
    font-size: 1rem;
    color: var(--carbon);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tablero__titulo span { font-size: .82rem; color: var(--gris); }

.tablero__usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.tablero__usuario-texto { text-align: right; }
.tablero__usuario-nombre { font-size: .89rem; font-weight: 600; color: var(--carbon); line-height: 1.25; }
.tablero__usuario-correo { font-size: .78rem; color: var(--gris); line-height: 1.25; }

.tablero__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--azul);
    color: var(--blanco);
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.tablero__contenido {
    padding: 16px 32px 32px;
    max-width: 1180px;
}

.tablero__bienvenida h1 { font-size: 1.7rem; margin-bottom: 4px; }
.tablero__bienvenida p { color: var(--gris); margin-bottom: 14px; }

.estadisticas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.estadistica {
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    padding: 22px;
    transition: box-shadow var(--transicion), border-color var(--transicion);
}
.estadistica:hover { box-shadow: var(--sombra); border-color: #D8CEC6; }

.estadistica__cabecera { margin-bottom: 16px; }

.estadistica__icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--azul-suave);
    color: var(--azul);
}
.estadistica__icono svg { width: 20px; height: 20px; }

.estadistica__valor {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--carbon);
    letter-spacing: -.02em;
}
.estadistica__etiqueta { font-size: .88rem; color: var(--gris); margin-top: 2px; }

.tablero__rejilla {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    align-items: start;
}

.panel-tarjeta {
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    padding: 20px 22px;
    margin: 0;
}
.panel-tarjeta + .panel-tarjeta { margin-top: 16px; }
.panel-tarjeta h2 { font-size: 1.15rem; margin-bottom: 4px; }
.panel-tarjeta > p { color: var(--gris); font-size: .9rem; margin-bottom: 14px; }

.modulos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
    gap: 18px;
}

.modulo-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    padding: 22px;
    color: inherit;
    transition: box-shadow var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.modulo-tarjeta:hover { box-shadow: var(--sombra); border-color: #D8CEC6; color: inherit; transform: translateY(-1px); }

.modulo-tarjeta__icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 11px;
    background: var(--azul-suave);
    color: var(--azul);
}
.modulo-tarjeta__icono svg { width: 22px; height: 22px; }

.modulo-tarjeta__texto h2 { font-size: 1.05rem; margin-bottom: 4px; }
.modulo-tarjeta__texto p { color: var(--gris); font-size: .88rem; margin: 0; }

.migas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--gris);
    margin-bottom: 10px;
}
.migas a { color: var(--gris); }
.migas a:hover { color: var(--azul); }

.boton-regresar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gris);
    margin-bottom: 10px;
}
.boton-regresar svg { width: 16px; height: 16px; }
.boton-regresar:hover { color: var(--azul); }

button.boton-regresar {
    background: var(--blanco);
    border: 1.5px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    padding: 9px 16px;
    cursor: pointer;
    font-family: inherit;
    color: var(--carbon-medio);
    transition: border-color var(--transicion), color var(--transicion);
}
button.boton-regresar:hover { border-color: var(--azul); color: var(--azul); }

.lista-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.lista-pasos li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--gris-claro);
}
.lista-pasos li:last-child { border-bottom: none; padding-bottom: 2px; }

.lista-pasos__marca {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gris-claro);
    color: var(--blanco);
}
.lista-pasos__marca svg { width: 13px; height: 13px; }
.lista-pasos li.completo .lista-pasos__marca { background: var(--verde); }

.lista-pasos__texto { display: flex; flex-direction: column; min-width: 0; }
.lista-pasos__texto strong { font-size: .92rem; color: var(--carbon); font-weight: 600; }
.lista-pasos__texto span { font-size: .8rem; color: var(--gris); }
.lista-pasos li.completo .lista-pasos__texto strong {
    color: var(--gris);
    text-decoration: line-through;
    text-decoration-color: var(--gris-claro);
}

/* -------------------------------------------------- Barra de herramientas */

.herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pastilla {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--gris-claro);
    background: var(--blanco);
    color: var(--carbon-medio);
    font-size: .86rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.pastilla:hover { border-color: #D8CEC6; }
.pastilla--activa,
.pastilla--activa:hover {
    background: var(--carbon);
    border-color: var(--carbon);
    color: var(--blanco);
}

.buscador {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}
.buscador svg {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--gris);
    pointer-events: none;
}
.buscador input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    font-family: inherit;
    font-size: .92rem;
    color: var(--carbon);
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: 999px;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.buscador input::placeholder { color: #A79E98; }
.buscador input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.herramientas__accion { margin-left: auto; }

/* ------------------------------------------------------------ Paginacion */

.paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--gris-claro);
}

.paginacion__tam {
    display: flex;
    align-items: center;
    gap: 6px;
}
.paginacion__tam .pastilla {
    padding: 6px 13px;
    font-size: .82rem;
}

.paginacion__info {
    font-size: .85rem;
    color: var(--gris);
}

.paginacion__paginas {
    display: flex;
    align-items: center;
    gap: 2px;
}

.paginacion__pagina {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--carbon-medio);
    font-size: .84rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.paginacion__pagina:hover { background: var(--crema); }
.paginacion__pagina--activa,
.paginacion__pagina--activa:hover {
    background: var(--azul);
    color: var(--blanco);
}
.paginacion__puntos {
    display: grid;
    place-items: center;
    min-width: 24px;
    color: var(--gris);
    font-size: .84rem;
}

.paginacion__flecha {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--carbon-medio);
    cursor: pointer;
}
.paginacion__flecha:hover { background: var(--crema); }
.paginacion__flecha:disabled { color: var(--gris-claro); cursor: default; }
.paginacion__flecha:disabled:hover { background: transparent; }
.paginacion__flecha svg { width: 16px; height: 16px; }

.tabla__fila-oculta { display: none !important; }

.vacio { color: var(--gris); font-size: .9rem; }

/* ----------------------------------------------------------------- Modal */

.modal-superposicion {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 22, 20, .45);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-superposicion--activa { display: flex; }

.modal {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--blanco);
    border-radius: 0;
    box-shadow: var(--sombra-fuerte);
}

.modal__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--gris-claro);
}
.modal__cabecera h2 { margin: 0; font-size: 1.2rem; }

.modal__cerrar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--gris);
    cursor: pointer;
}
.modal__cerrar:hover { background: var(--crema); color: var(--carbon); }
.modal__cerrar svg { width: 18px; height: 18px; }

.modal__cuerpo { padding: 24px 26px; }
.modal__pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 26px;
    border-top: 1px solid var(--gris-claro);
}

body.modal-abierto { overflow: hidden; }

.tabla tbody tr:hover { background: var(--crema); }

.tabla input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.tabla input[type="text"] {
    width: 100%;
    min-width: 90px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: .92rem;
    color: var(--carbon);
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.tabla input[type="text"]:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.tabla input[type="text"]:disabled {
    background: var(--crema);
    color: var(--gris-claro);
    cursor: not-allowed;
}

.campo-horas-envoltura { position: relative; display: flex; align-items: center; }
.campo-horas-envoltura input[type="text"] { padding-right: 32px; }
.campo-horas-boton {
    position: absolute;
    right: 4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: var(--crema);
    border: none;
    border-radius: 50%;
    color: var(--carbon-medio);
    cursor: pointer;
}
.campo-horas-boton:hover { background: var(--azul); color: var(--blanco); }
.campo-horas-boton:disabled { cursor: not-allowed; opacity: .5; }
.campo-horas-boton:disabled:hover { background: var(--crema); color: var(--carbon-medio); }

.desglose-horas__ayuda { color: var(--gris); font-size: .89rem; margin: 0 0 18px; }
.desglose-horas__filas { display: flex; flex-direction: column; gap: 14px; }
.desglose-horas__fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.desglose-horas__fila label { font-weight: 600; font-size: .92rem; color: var(--carbon); }
.desglose-horas__fila input {
    width: 120px;
    text-align: right;
    padding: 10px 12px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--carbon);
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.desglose-horas__fila input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.desglose-horas__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gris-claro);
    font-size: 1rem;
}

/* ---------------------------------------------------- Campos select --- */

.campo select {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: .97rem;
    color: var(--carbon);
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo select:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* --------------------------------------------------- Periodo de pago --- */

.opciones-periodo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.opciones-periodo input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.opciones-periodo label {
    display: block;
    padding: 16px;
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: border-color var(--transicion), background var(--transicion);
}
.opciones-periodo label strong { display: block; font-size: .96rem; color: var(--carbon); margin-bottom: 4px; }
.opciones-periodo label span { display: block; font-size: .84rem; color: var(--gris); }
.opciones-periodo input:checked + label {
    border-color: var(--azul);
    background: var(--azul-suave);
}
.opciones-periodo input:focus-visible + label {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.periodo-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.periodo-nav__flecha {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--gris-claro);
    background: var(--blanco);
    border-radius: 50%;
    color: var(--carbon-medio);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}
.periodo-nav__flecha:hover { border-color: #D8CEC6; background: var(--crema); }
.periodo-nav__flecha svg { width: 16px; height: 16px; }
.periodo-nav__texto { min-width: 0; }
.periodo-nav__rango { display: block; font-weight: 600; color: var(--carbon); font-size: .96rem; }
.periodo-nav__tipo { display: block; color: var(--gris); font-size: .82rem; }
.periodo-nav__hoy { flex-shrink: 0; margin-left: auto; }

.tabla__pie td {
    font-weight: 700;
    color: var(--carbon);
    border-top: 2px solid var(--gris-claro);
    border-bottom: none;
}

/* -------------------------------------------------------------- Nomina --- */

.nomina-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    align-items: start;
}

.nomina-calendario {
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    padding: 16px 17px;
    position: sticky;
    top: 88px;
}
.nomina-calendario__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.nomina-calendario__titulo { font-size: .86rem; font-weight: 700; color: var(--carbon); }
.nomina-calendario__flecha {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gris-claro);
    border-radius: 6px;
    color: var(--gris);
    background: var(--blanco);
}
.nomina-calendario__flecha:hover { border-color: #D8CEC6; color: var(--carbon); }
.nomina-calendario__dias-semana,
.nomina-calendario__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.nomina-calendario__dias-semana span {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--gris);
    padding: 4px 0;
}
.nomina-calendario__dia {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 500;
    color: var(--carbon);
    text-decoration: none;
    border-radius: 8px;
    box-sizing: border-box;
}
.nomina-calendario__dia--fuera { color: #C4C4C8; }
.nomina-calendario__dia--periodo { background: var(--azul); color: var(--blanco); font-weight: 700; border-radius: 0; }
.nomina-calendario__dia--inicio { border-radius: 8px 0 0 8px; }
.nomina-calendario__dia--fin { border-radius: 0 8px 8px 0; }
.nomina-calendario__dia--inicio.nomina-calendario__dia--fin { border-radius: 8px; }
.nomina-calendario__dia--hoy { box-shadow: inset 0 0 0 1.5px var(--azul); font-weight: 700; }
.nomina-calendario__dia:not(.nomina-calendario__dia--periodo):hover { background: var(--azul-suave); }

.nomina-contenido { min-width: 0; }

.nomina-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--crema);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.nomina-banner__texto { display: flex; flex-direction: column; gap: 2px; }
.nomina-banner__titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--carbon); }
.nomina-banner__sub { font-size: .78rem; color: var(--gris); }
.nomina-banner__montos { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.nomina-banner__monto-item { text-align: right; }
.nomina-banner__monto-item span { display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); }
.nomina-banner__monto-item strong { display: block; font-size: 1.2rem; font-weight: 800; color: var(--carbon); letter-spacing: -.02em; }

.nomina-lista { display: flex; flex-direction: column; gap: 10px; }

.nomina-tarjeta {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio-sm);
    padding: 13px 16px;
}
.nomina-tarjeta__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gris-claro);
    color: var(--carbon-medio);
    font-weight: 700;
    font-size: .82rem;
    flex-shrink: 0;
    text-transform: uppercase;
}
.nomina-tarjeta__info { flex: 1; min-width: 0; }
.nomina-tarjeta__nombre { font-weight: 700; font-size: .88rem; color: var(--carbon); text-transform: uppercase; letter-spacing: .01em; }
.nomina-tarjeta__sub { font-size: .82rem; color: var(--gris); margin-top: 2px; }
.nomina-tarjeta__sub strong { color: var(--carbon); }
.nomina-tarjeta__sub--vacio { color: #B4B4B8; }
.nomina-tarjeta__total { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nomina-tarjeta__total-item { text-align: right; }
.nomina-tarjeta__total-item span { display: block; font-size: .68rem; color: var(--gris); }
.nomina-tarjeta__total-item strong { display: block; font-size: .98rem; font-weight: 800; color: var(--carbon); }

.nomina-cuadricula__cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.nomina-cuadricula__periodo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--carbon);
}
.nomina-cuadricula__periodo svg { color: var(--azul); flex-shrink: 0; }

.nomina-tabla-envoltura {
    background: var(--blanco);
    border: 1px solid var(--gris-claro);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.nomina-tabla { background: var(--blanco); }
.nomina-tabla thead tr { background: var(--blanco); }
.nomina-tabla th {
    text-align: center;
    color: var(--gris);
    padding: 16px 12px;
    border-bottom: 1.5px solid var(--gris-claro);
}
.nomina-tabla th:first-child { text-align: left; padding-left: 20px; }

/* Cada empleado ocupa 2 filas (Horas/Propinas); la fila "Horas" abre el grupo */
.nomina-tabla tbody td { background: var(--blanco); }
.nomina-tabla tbody tr:nth-child(odd) td { border-top: 1px solid var(--gris-claro); }
.nomina-tabla tbody tr:first-child td { border-top: none; }
.nomina-tabla tbody tr td { border-bottom: none; }

.nomina-tabla__dia-cabecera span { font-weight: 500; color: var(--gris); font-size: .72rem; }
.nomina-tabla__empleado { white-space: nowrap; vertical-align: middle; padding: 14px 12px 14px 20px; font-weight: 700; color: var(--carbon); }
.nomina-tabla__tarifa { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 500; }
.nomina-tabla__tarifa span:first-child { color: var(--gris); font-size: .68rem; }
.nomina-tabla__tarifa-valor {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #DCFCE7;
    color: var(--carbon);
    font-size: .74rem;
    font-weight: 700;
}
.nomina-tabla__etiqueta {
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gris);
    white-space: nowrap;
    vertical-align: middle;
    border-left: 1px solid var(--gris-claro);
}
.nomina-tabla tbody tr:nth-child(odd) .nomina-tabla__etiqueta { color: var(--carbon-medio); }
.nomina-tabla__fila-propinas td { border-top: none !important; padding-top: 0; padding-bottom: 14px; }
.nomina-tabla tfoot td { background: var(--blanco); border-top: 1.5px solid var(--gris-claro); padding: 16px 12px; }
.nomina-tabla tfoot td:first-child { text-align: right; color: var(--gris); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.nomina-tabla tfoot td:not(:first-child) { text-align: right; font-weight: 800; color: var(--carbon); font-size: 1.05rem; border-left: 1px solid var(--gris-claro); }
.nomina-tabla tfoot td:last-child { padding-right: 20px; }
.nomina-tabla__celda { padding: 6px 4px !important; text-align: center; border-left: 1px solid var(--gris-claro); }
.nomina-tabla__dia-cabecera { border-left: 1px solid var(--gris-claro); }
.nomina-tabla__celda input[type="text"] {
    width: 56px;
    min-width: 0;
    text-align: center;
    padding: 6px 4px;
    border: 1.5px solid var(--gris-claro);
    border-radius: 6px;
    font-size: .8rem;
    font-family: inherit;
}
.nomina-tabla__celda input[type="text"]:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
.nomina-tabla__total-hrs { text-align: right; font-weight: 700; color: var(--carbon); vertical-align: middle; border-left: 1px solid var(--gris-claro); }
.nomina-tabla__total { text-align: right; vertical-align: middle; padding-right: 12px; border-left: 1px solid var(--gris-claro); }
.nomina-tabla__total:last-child { padding-right: 20px; }
.nomina-tabla__total > div:first-child { font-weight: 800; color: var(--carbon); font-size: .95rem; }
.nomina-status { font-size: .68rem; min-height: 1.2em; margin-top: 2px; color: var(--gris); }
.nomina-status--ok { color: var(--verde); }
.nomina-status--error { color: var(--rojo); }

@media (max-width: 860px) {
    .nomina-layout { grid-template-columns: 1fr; }
    .nomina-calendario { position: static; }
}

/* --------------------------------------------------------- Utilidades --- */

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------- Responsivo ----- */

@media (max-width: 1120px) {
    .hero__grid { gap: 48px; }
    .muestra { gap: 48px; }
    .flotante--comanda { left: -4%; }
    .flotante--venta   { right: -4%; }
}

@media (max-width: 960px) {
    .hero { padding: 110px 0 80px; }
    .hero__grid { grid-template-columns: 1fr; gap: 56px; }
    .hero__texto p { max-width: none; }
    .hero__visual { width: 100%; max-width: 520px; margin: 0 auto; }
    .hero__metricas { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; margin-top: 64px; }

    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento__celda--ancha,
    .bento__celda--total { grid-column: span 2; }

    .muestra { grid-template-columns: 1fr; gap: 40px; }
    .muestra + .muestra { margin-top: 72px; }
    .muestra--invertida .muestra__visual { order: 0; }
    .muestra__insignia { left: 16px; }

    .pasos { grid-template-columns: 1fr; gap: 30px; }
    .pasos::before { display: none; }
    .paso { text-align: left; }
    .paso::before { margin: 0 0 16px; box-shadow: none; }

    .testimonios { grid-template-columns: 1fr; }

    .pie__contenido { grid-template-columns: 1fr 1fr; gap: 36px; }
    .pie__marca { grid-column: span 2; }
}

@media (max-width: 820px) {
    .navegacion__enlaces,
    .navegacion__acciones { display: none; }

    .menu-boton { display: inline-flex; }

    .navegacion--abierta {
        position: absolute;
        top: 78px;
        left: -24px;
        right: -24px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--blanco);
        border-bottom: 1px solid var(--gris-claro);
        box-shadow: var(--sombra-fuerte);
        padding: 12px 24px 22px;
    }
    .navegacion--abierta .navegacion__enlaces {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .navegacion--abierta .navegacion__enlaces a {
        display: block;
        padding: 14px 0;
        color: var(--carbon-medio);
        border-bottom: 1px solid var(--gris-claro);
    }
    .navegacion--abierta .navegacion__enlaces a::after { display: none; }
    .navegacion--abierta .navegacion__acciones {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 16px;
    }
    .navegacion--abierta .btn--fantasma {
        color: var(--carbon);
        border: 1px solid var(--gris-claro);
    }
}

@media (max-width: 640px) {
    .seccion { padding: 64px 0; }
    .seccion__encabezado { margin-bottom: 40px; }

    .hero { padding: 100px 0 68px; }
    .hero__acciones { gap: 10px; }
    .hero__acciones .btn { width: 100%; }
    .hero__metricas { margin-top: 52px; padding-top: 32px; gap: 24px 16px; }

    .flotante { padding: 10px 13px; gap: 10px; animation: none; }
    .flotante__icono { width: 32px; height: 32px; border-radius: 9px; }
    .flotante strong { font-size: .82rem; }
    .flotante span { font-size: .72rem; }
    .flotante--comanda { top: 4%;  left: auto; right: 3%; }
    .flotante--venta   { bottom: 6%; right: auto; left: 3%; }
    .flotante--mesa    { display: none; }

    .bento { grid-template-columns: 1fr; }
    .bento__celda--ancha,
    .bento__celda--total { grid-column: span 1; }
    .bento__celda--total { grid-template-columns: 1fr; gap: 0; }
    .bento__lado { min-height: 190px; }
    .bento__cuerpo { padding: 26px 26px 30px; }
    .bento__celda--foto { min-height: 280px; padding: 26px; }

    .muestra__insignia { left: 12px; bottom: 14px; padding: 12px 15px; }
    .muestra__visual::before { display: none; }

    .cta { padding: 72px 0; }
    .cta__caja { padding: 60px 22px; border-radius: 20px; }
    .cta__acciones .btn { width: 100%; }

    .pie { padding: 56px 0 28px; }
    .pie__contenido { grid-template-columns: 1fr; gap: 30px; }
    .pie__marca { grid-column: span 1; }
    .pie__legal { flex-direction: column; gap: 8px; }

    .acceso__tarjeta { padding: 30px 22px; }
    .campo__fila { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .tablero__lateral { transform: translateX(-100%); box-shadow: var(--sombra-fuerte); }
    .tablero__lateral--abierta { transform: translateX(0); }
    .tablero__principal { margin-left: 0; }
    .tablero__menu-boton { display: inline-flex; }

    .tablero__superposicion--activa {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(28, 22, 20, .4);
        z-index: 55;
    }

    .tablero__rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .tablero__superior { padding: 0 18px; gap: 10px; }
    .tablero__contenido { padding: 22px 18px; }
    .tablero__usuario-texto { display: none; }
    .tablero__titulo span { display: none; }
    .estadisticas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .estadistica { padding: 16px; }
    .estadistica__valor { font-size: 1.5rem; }
}

@media (max-width: 640px) {
    .herramientas { flex-direction: column; align-items: stretch; }
    .buscador { max-width: none; }
    .herramientas__accion { margin-left: 0; }
    .herramientas__accion .btn { width: 100%; }
    .paginacion { flex-direction: column; align-items: flex-start; }
    .opciones-periodo { grid-template-columns: 1fr; }
    .periodo-nav { flex-wrap: wrap; }
    .periodo-nav__hoy { width: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    .btn:hover,
    .bento__celda:hover,
    .testimonio:hover { transform: none; }
    .aparece { opacity: 1; transform: none; }
}