/* ============================================================
   /cmd — SECTION WIDGETS
   Mini-versions of the editorial classic sections, rendered
   inline inside the chat transcript by command handlers.
   Goal: deliver the full classic experience without redirects.
   ============================================================ */

/* Container — every widget lives inside .msg.pet -> .pet-body */
.pet-body .widget {
    --w-bg:        rgba(255, 252, 246, 0.65);
    --w-bg-alt:    rgba(246, 241, 232, 0.75);
    --w-border:    rgba(31, 26, 20, 0.10);
    --w-strong:    rgba(31, 26, 20, 0.20);
    --w-text:      var(--ink);
    --w-mute:      var(--ink-mid);
    --w-faint:     var(--ink-dim);
    --w-accent:    var(--accent);
    --w-accent-dk: var(--accent-dk);
    --w-accent-lt: var(--accent-lt);

    margin: 0.8rem 0;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    animation: w-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes w-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── WIDGET HEADER — editorial section header ─────── */
.widget-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 0.9rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--w-strong);
}
.widget-marker {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--w-accent-dk);
    white-space: nowrap;
}
.widget-title {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--w-text);
    margin: 0;
}
.widget-title em {
    font-style: italic;
    color: var(--w-accent-dk);
    font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}
.widget-action {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--w-mute);
}

/* ── HERO-MINI — for /start, /whoami, /about ─────── */
.w-hero {
    background: linear-gradient(135deg, rgba(184, 110, 60, 0.10), rgba(91, 138, 106, 0.06));
    border: 1px solid var(--w-border);
    padding: 1.4rem 1.5rem 1.2rem;
    position: relative;
}
.w-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 0%, rgba(232, 196, 154, 0.18), transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}
.w-hero-index {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--w-accent-dk);
    margin-bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.w-hero-index::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--w-accent);
}
.w-hero-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: var(--w-text);
    margin: 0 0 0.7rem;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
    text-wrap: balance;
}
.w-hero-title em {
    font-style: italic;
    color: var(--w-accent-dk);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.w-hero-sub {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--w-mute);
    margin: 0 0 1rem;
    max-width: 56ch;
    text-wrap: pretty;
}
.w-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--w-border);
}
.w-hero-meta dt {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--w-mute);
    margin: 0;
}
.w-hero-meta dd {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--w-text);
    margin: 0;
    letter-spacing: -0.015em;
}

/* ── PERFIL editorial (Sobre mí) — recrea el hero clásico, compacto ── */
.w-hero--profile { padding-bottom: 1.5rem; }
.w-hero-role {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--w-accent-dk);
    margin: 0 0 1rem;
}
.w-hero-about {
    max-width: 60ch;
    margin-bottom: 1.2rem;
}
.w-hero-about p {
    font-family: var(--sans);
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--w-mute);
    margin: 0 0 0.85rem;
    text-wrap: pretty;
}
.w-hero-about p:last-child { margin-bottom: 0; }
.w-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    padding-top: 1rem;
    margin-bottom: 1.2rem;
    border-top: 1px dashed var(--w-border);
}
.w-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sans);
    font-size: 0.84rem;
    color: var(--w-mute);
    text-decoration: none;
    transition: color 0.2s ease;
}
.w-hero-link i { color: var(--w-accent); font-size: 0.85rem; }
a.w-hero-link:hover { color: var(--w-accent-dk); }
.w-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.w-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--w-border);
    background: transparent;
    color: var(--w-text);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.w-cta-btn i { font-size: 0.8rem; opacity: 0.85; }
.w-cta-btn:hover {
    border-color: var(--w-accent);
    background: rgba(184, 110, 60, 0.08);
    transform: translateY(-1px);
}
.w-cta-btn--primary {
    background: var(--w-accent-dk);
    border-color: var(--w-accent-dk);
    color: #fff;
}
.w-cta-btn--primary i { opacity: 1; }
.w-cta-btn--primary:hover {
    background: var(--w-accent);
    border-color: var(--w-accent);
    color: #fff;
}

/* ── TEASER de sección (chat → abre la ventana clásica) ── */
.w-teaser {
    background: linear-gradient(135deg, rgba(184, 110, 60, 0.10), rgba(91, 138, 106, 0.06));
    border: 1px solid var(--w-border);
    border-radius: 14px;
    padding: 1.3rem 1.5rem 1.4rem;
    position: relative;
    overflow: hidden;
}
.w-teaser::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 88% 0%, rgba(232, 196, 154, 0.16), transparent 52%);
    pointer-events: none;
}
.w-teaser-marker {
    font-family: var(--mono);
    font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--w-accent-dk);
    display: inline-flex; align-items: center; gap: 0.55rem;
}
.w-teaser-marker::before { content: ''; width: 26px; height: 1px; background: var(--w-accent); }
.w-teaser-title {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 500; line-height: 1.02; letter-spacing: -0.03em;
    color: var(--w-text);
    margin: 0.5rem 0 0.55rem;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.w-teaser-title em { font-style: italic; color: var(--w-accent-dk); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.w-teaser-sub {
    font-family: var(--sans);
    font-size: 0.92rem; line-height: 1.6; color: var(--w-mute);
    margin: 0 0 1.1rem; max-width: 54ch; text-wrap: pretty;
}
.w-teaser-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ── STATS-STRIP — for /stats, intro of /about ─────── */
.w-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: 14px;
    overflow: hidden;
}
@media (min-width: 640px) {
    .w-stats { grid-template-columns: repeat(4, 1fr); }
}
.w-stat {
    padding: 1.1rem 1rem;
    border-right: 1px solid var(--w-border);
    border-bottom: 1px solid var(--w-border);
}
.w-stat:nth-child(2n) { border-right: none; }
.w-stat:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 640px) {
    .w-stat { border-right: 1px solid var(--w-border); border-bottom: none; }
    .w-stat:last-child { border-right: none; }
    .w-stat:nth-child(2n) { border-right: 1px solid var(--w-border); }
    .w-stat:nth-child(4n) { border-right: none; }
}
.w-stat-num {
    font-family: var(--serif);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--w-text);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3rem;
    display: block;
}
.w-stat-num em {
    font-style: italic;
    color: var(--w-accent-dk);
    font-size: 0.6em;
    margin-left: 0.05em;
    font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
}
.w-stat-lab {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--w-mute);
    line-height: 1.3;
}

/* ── FEATURE ROW — for /rpa, /powerbi, /arch ─────── */
.w-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: 16px;
    padding: 1.4rem;
    align-items: center;
}
@media (min-width: 580px) {
    .w-feature { grid-template-columns: 1.4fr 1fr; }
    .w-feature.reverse > :first-child { order: 2; }
}
.w-feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.w-feature-num {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w-accent-dk);
}
.w-feature-h {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--w-text);
    margin: 0;
    text-wrap: balance;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.w-feature-h em {
    font-style: italic;
    color: var(--w-accent-dk);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.w-feature-p {
    font-family: var(--sans);
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--w-mute);
    margin: 0;
    text-wrap: pretty;
}
.w-feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.w-feature-tag {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.22rem 0.6rem;
    background: transparent;
    border: 1px solid var(--w-strong);
    border-radius: 100px;
    color: var(--w-mute);
}
.w-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--w-accent);
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--w-accent-dk);
    cursor: pointer;
    align-self: flex-start;
    padding-bottom: 0.3rem;
    transition: gap 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}
.w-feature-link:hover { gap: 0.9rem; color: var(--w-accent); }
.w-feature-visual {
    background: linear-gradient(135deg, rgba(184, 110, 60, 0.10), rgba(91, 138, 106, 0.05));
    border: 1px solid var(--w-border);
    border-radius: 14px;
    padding: 1.6rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-height: 160px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.w-feature-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(184, 110, 60, 0.14), transparent 60%);
    pointer-events: none;
}
.w-feature-icon {
    font-size: 2.4rem;
    color: var(--w-accent);
    filter: drop-shadow(0 4px 12px rgba(184, 110, 60, 0.3));
    position: relative;
    z-index: 1;
}

/* ── ATLAS GRID — for /proyectos ─────── */
.w-atlas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 580px) {
    .w-atlas { grid-template-columns: repeat(12, 1fr); }
}
.w-atlas-card {
    position: relative;
    grid-column: 1 / -1;
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s,
                box-shadow 0.4s;
    overflow: hidden;
}
@media (min-width: 580px) {
    .w-atlas-card.hero { grid-column: span 7; grid-row: span 2; }
    .w-atlas-card.side { grid-column: span 5; }
}
.w-atlas-card:hover {
    transform: translateY(-3px);
    border-color: var(--w-accent);
    box-shadow: 0 16px 36px -14px rgba(30, 20, 10, 0.30);
    color: inherit;
    text-decoration: none;
}
.w-atlas-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(184, 110, 60, 0.10), transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.w-atlas-card:hover::before { opacity: 1; }
.w-atlas-card .meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--w-mute);
}
.w-atlas-card .meta .idx { color: var(--w-accent-dk); font-weight: 500; }
.w-atlas-card .title {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--w-text);
    margin: 0;
    font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
}
.w-atlas-card.hero .title { font-size: 1.45rem; }
.w-atlas-card .tagline {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--w-mute);
    margin: 0;
}
.w-atlas-card .techs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}
.w-atlas-card .tech {
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--w-border);
    border-radius: 100px;
    color: var(--w-mute);
}
.w-atlas-card .foot {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--w-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.w-atlas-card .foot .read {
    color: var(--w-accent-dk);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.w-atlas-card:hover .foot .read { gap: 0.8rem; color: var(--w-accent); }
.w-atlas-card .foot .stats {
    color: var(--w-mute);
    font-variant-numeric: tabular-nums;
}

/* ── STACK-CREDITS — for /stack ─────── */
.w-stack {
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: 14px;
    overflow: hidden;
}
.w-stack-cat {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--w-border);
}
@media (min-width: 560px) {
    .w-stack-cat { grid-template-columns: 130px 1fr; gap: 1rem; align-items: baseline; }
}
.w-stack-cat:last-child { border-bottom: none; }
.w-stack-cat-name {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--w-accent-dk);
}
.w-stack-cat-name .num {
    color: var(--w-faint);
    margin-right: 0.55rem;
    font-variant-numeric: tabular-nums;
}
.w-stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    align-items: baseline;
}
.w-stack-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--sans);
    font-size: 0.92rem;
    color: var(--w-text);
}
.w-stack-item .stack-icon {
    font-size: 0.88rem;
    transform: translateY(2px);
}
.w-stack-item .prof {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--w-faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

/* ── PULL QUOTE — decorative break ─────── */
.w-quote {
    background: var(--w-bg-alt);
    border: 1px solid var(--w-border);
    border-radius: 14px;
    padding: 2rem 1.4rem;
    text-align: center;
}
.w-quote q {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--w-text);
    quotes: '“' '”';
    font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}
.w-quote q::before { content: open-quote; color: var(--w-accent); }
.w-quote q::after  { content: close-quote; color: var(--w-accent); }
.w-quote cite {
    display: block;
    margin-top: 0.85rem;
    font-family: var(--mono);
    font-style: normal;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--w-mute);
}

/* ── FAQ-INLINE — for /faq ─────── */
.w-faq {
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: 14px;
    overflow: hidden;
}
.w-faq-item { border-bottom: 1px solid var(--w-border); }
.w-faq-item:last-child { border-bottom: none; }
.w-faq-q {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 0.95rem 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--w-text);
    letter-spacing: -0.005em;
    transition: color 0.2s;
}
.w-faq-q:hover { color: var(--w-accent-dk); }
.w-faq-icon {
    width: 22px; height: 22px;
    border: 1px solid var(--w-border);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--w-accent);
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s, color 0.25s;
}
.w-faq-item.open .w-faq-icon { transform: rotate(45deg); background: var(--w-accent); color: #fff; border-color: var(--w-accent); }
.w-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.w-faq-item.open .w-faq-a { max-height: 320px; }
.w-faq-a-inner {
    padding: 0 1.15rem 1rem 1.15rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--w-mute);
}

/* ── CTA INLINE — for /contacto ─────── */
.w-cta {
    background: linear-gradient(135deg, #1F1A14, #2A2520);
    color: #FAF7F2;
    border-radius: 16px;
    padding: 1.8rem 1.4rem;
    position: relative;
    overflow: hidden;
    text-align: left;
}
.w-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 100%, rgba(232, 196, 154, 0.25), transparent 50%),
        radial-gradient(circle at 80% 0%, rgba(62, 127, 173, 0.15), transparent 50%);
    pointer-events: none;
}
.w-cta-marker {
    position: relative;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #E8C49A;
    margin-bottom: 0.8rem;
}
.w-cta-title {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #FAF7F2;
    margin: 0 0 0.8rem;
    text-wrap: balance;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.w-cta-title em {
    font-style: italic;
    color: #E8C49A;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.w-cta-body {
    position: relative;
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(250, 247, 242, 0.75);
    margin: 0 0 1.2rem;
    max-width: 52ch;
}
.w-cta-actions {
    position: relative;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.w-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s;
    text-decoration: none;
}
.w-cta-btn.primary { background: #C8965C; color: #FAF7F2; }
.w-cta-btn.primary:hover { background: #A47340; transform: translateY(-2px); }
.w-cta-btn.ghost {
    background: transparent;
    color: #FAF7F2;
    border: 1.5px solid rgba(250, 247, 242, 0.35);
}
.w-cta-btn.ghost:hover { background: rgba(250, 247, 242, 0.10); border-color: #FAF7F2; }
.w-cta-btn:active { transform: translateY(0) scale(0.97); }

/* ── CERTS GRID — for /certs ─────── */
.w-certs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.6rem;
}
.w-cert {
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: 12px;
    padding: 0.9rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s, box-shadow 0.3s;
}
.w-cert:hover {
    transform: translateY(-3px);
    border-color: var(--w-accent);
    box-shadow: 0 10px 24px -10px rgba(184, 110, 60, 0.4);
}
.w-cert-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(184, 110, 60, 0.18), rgba(184, 110, 60, 0.06));
    color: var(--w-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.w-cert-title {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--w-text);
    line-height: 1.25;
}
.w-cert-meta {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--w-mute);
}

/* ── MARQUEE — for /stack intro ─────── */
.w-marquee {
    overflow: hidden;
    background: var(--w-bg-alt);
    border-top: 1px solid var(--w-border);
    border-bottom: 1px solid var(--w-border);
    padding: 0.7rem 0;
    margin: 0.6rem -1px;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.w-marquee-track {
    display: flex;
    gap: 0.5rem;
    width: max-content;
    animation: w-marquee 30s linear infinite;
}
.w-marquee:hover .w-marquee-track { animation-play-state: paused; }
@keyframes w-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.w-marquee-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.85rem;
    background: var(--paper);
    border: 1px solid var(--w-border);
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--w-mute);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── COMMAND CHIPS — inline "more" hint after a widget ─── */
.w-next {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--w-border);
}
.w-next-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w-mute);
    align-self: center;
    margin-right: 0.4rem;
}
.w-next-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 1px solid var(--w-strong);
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--w-text);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s, border-color 0.2s;
}
.w-next-chip:hover {
    background: var(--w-bg-alt);
    border-color: var(--w-accent);
    transform: translateY(-2px);
}

/* ============================================================
   WELCOME COVER — big editorial homepage shown at chat boot.
   Replaces the old QuickBar. Uses full transcript width.
   ============================================================ */
.welcome-cover {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.4vw, 1.6rem);
    animation: w-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* el ritmo lo da el gap del contenedor: limpiamos márgenes sueltos */
.welcome-cover > .welcome-greeting,
.welcome-cover > .welcome-stats,
.welcome-cover > .welcome-bento { margin: 0; }

/* ============================================================
   PERSISTENT TOP NAV — familiar website-style navigation
   ============================================================ */
.cmd-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem clamp(0.8rem, 3vw, 1.6rem);
    background: rgba(251, 247, 238, 0.82);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border-bottom: 1px solid var(--line);
}
.cmd-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    flex-shrink: 0;
}
.cmd-nav-paw {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cmd-nav-brand:hover .cmd-nav-paw { transform: rotate(-12deg) scale(1.08); }
.cmd-nav-name {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.cmd-nav-links {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.cmd-nav-links::-webkit-scrollbar { display: none; }
.cmd-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: none;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-mid);
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.cmd-nav-link i { font-size: 0.8rem; opacity: 0.8; }
.cmd-nav-link:hover { background: rgba(184,110,60,0.10); color: var(--ink); }
.cmd-nav-link.active { background: var(--accent-soft); color: var(--accent-dk); }
.cmd-nav-cta {
    background: var(--accent);
    color: #fff;
}
.cmd-nav-cta i { opacity: 1; }
.cmd-nav-cta:hover { background: var(--accent-dk); color: #fff; transform: translateY(-1px); }
.cmd-nav-classic {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mid);
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
}
.cmd-nav-classic:hover { border-color: var(--accent); color: var(--accent-dk); }

/* El asistente es un panel centrado (ver dongo-os.css); ya NO necesita el
   padding para una nav fija. El layout/scroll del panel los maneja dongo-os.css. */
.bk-exit { display: none !important; }
/* la etiqueta del paisaje queda POR ENCIMA de las mascotas (pasan por detrás)
   y con fondo opaco para que el texto sea siempre legible (no se superpone ilegible) */
.bk-label {
    top: auto !important;
    bottom: clamp(1rem, 4vh, 1.6rem) !important;
    z-index: 1260 !important;
    background: rgba(251, 247, 238, 0.94) !important;
    box-shadow: 0 6px 18px -8px rgba(20,14,8,0.4);
}

@media (max-width: 680px) {
    .cmd-nav-name { display: none; }
    .cmd-nav-link span { display: none; }
    .cmd-nav-link { padding: 0.5rem 0.6rem; }
    .cmd-nav-link i { font-size: 0.9rem; }
    .cmd-nav-cta span { display: inline; }
    .cmd-nav-classic span { display: none; }
}

/* ============================================================
   BACK BUTTON — every section can return home
   ============================================================ */
.cmd-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
    padding: 0.4rem 0.85rem 0.4rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 99px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--ink-mid);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, color 0.2s, gap 0.25s;
}
.cmd-back i { font-size: 0.72rem; }
.cmd-back:hover {
    border-color: var(--accent);
    color: var(--accent-dk);
    transform: translateX(-2px);
    gap: 0.65rem;
}

/* ── 3-PUP GREETING SCENE ───────────────────────────────── */
.welcome-greeting {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 0.7rem;
    padding: 1.4rem 1rem 1rem;
    margin-bottom: 0.9rem;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(200,150,92,0.16), transparent 60%),
        linear-gradient(180deg, rgba(251,247,238,0.7), rgba(246,241,232,0.5));
    border: 1px solid var(--line);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.welcome-greeting::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--venus), var(--toby), var(--gladys), var(--lucy));
    opacity: 0.5;
}
.greet-pup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    /* entra rebotando y LUEGO se queda jugando (rebote infinito) */
    animation: greet-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.greet-venus  { animation-delay: 0.10s; }
.greet-toby   { animation-delay: 0.30s; }
.greet-gladys { animation-delay: 0.50s; }
.greet-lucy   { animation-delay: 0.70s; }
@keyframes greet-in {
    0%   { opacity: 0; transform: translateY(26px) scale(0.7); }
    60%  { opacity: 1; transform: translateY(-6px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* el SVG juega: rebote tipo "play-bow" continuo, desfasado por perro */
.greet-svg {
    width: 92px;
    height: 100px;
    animation: greet-play 1.1s ease-in-out infinite;
    transform-origin: center bottom;
}
.greet-venus  .greet-svg { animation-delay: 0s;    }
.greet-toby   .greet-svg { animation-delay: 0.22s; }
.greet-gladys .greet-svg { animation-delay: 0.44s; }
.greet-lucy   .greet-svg { animation-delay: 0.66s; }
@keyframes greet-play {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    25%      { transform: translateY(-9px)  rotate(-3deg); }
    55%      { transform: translateY(0)     rotate(0deg); }
    72%      { transform: translateY(-4px)  rotate(2.5deg); }
}
.greet-bubble {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    text-align: center;
    box-shadow: 0 6px 16px -10px rgba(31,26,20,0.4);
}
.greet-bubble::after {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    width: 11px; height: 11px;
    background: var(--paper);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: translateX(-50%) rotate(45deg);
}
.greet-bubble b { color: var(--accent-dk); }
.greet-toby   .greet-bubble b { color: var(--toby); }
.greet-venus  .greet-bubble b { color: var(--venus); }
.greet-gladys .greet-bubble b { color: var(--gladys); }
.greet-lucy   .greet-bubble b { color: var(--lucy); }
@media (max-width: 600px) {
    .welcome-greeting { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .greet-svg { width: 78px; height: 86px; }
    .greet-bubble { font-size: 0.74rem; padding: 0.42rem 0.5rem; }
}

/* ── FULL-BODY DOG ANIMATIONS ───────────────────────────── */
.pet-full-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* la pata ya no SALUDA: manotea jugando (más rápida y con rebote) */
.pf-wave   { animation: pf-wave 0.42s ease-in-out infinite; }
.pf-tail   { animation: pf-tail 0.32s ease-in-out infinite; }
.pf-ear    { animation: pa-ear-flop 0.9s ease-in-out infinite; }
.pf-head   { animation: pf-nod 1.6s ease-in-out infinite; }
.pf-tongue { transform-box: fill-box; transform-origin: center top; animation: pa-pant 0.4s ease-in-out infinite; }
@keyframes pf-wave {
    0%, 100% { transform: rotate(-4deg)  translateY(0); }
    50%      { transform: rotate(-40deg) translateY(-2px); }
}
@keyframes pf-tail {
    0%, 100% { transform: rotate(-24deg); }
    50%      { transform: rotate(30deg); }
}
@keyframes pf-nod {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-4deg); }
}

/* Masthead */
/* HERO CINEMATOGRÁFICO OSCURO — mismo lenguaje que el masthead del sitio clásico.
   Foco visual fuerte y alto contraste (legible), contrasta con stats/bento claros. */
.welcome-masthead {
    background:
        radial-gradient(120% 95% at 88% -10%, rgba(184,110,60,0.30), transparent 55%),
        linear-gradient(158deg, #251C12 0%, #1A140D 55%, #120D08 100%);
    color: #F4E9D7;
    border: 1px solid rgba(184,110,60,0.32);
    border-radius: 20px;
    padding: clamp(1.7rem, 3.6vw, 2.7rem);
    position: relative;
    overflow: hidden;
}
.welcome-masthead::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(91,138,106,0.14), transparent 60%);
    pointer-events: none;
}
/* eyebrow: línea + punto que late + texto mono dorado (firma del proyecto) */
.welcome-eyebrow {
    position: relative;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-lt, #D89A6B);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.3rem;
}
.welcome-eyebrow::before {
    content: '';
    width: 42px; height: 1px;
    background: var(--accent-lt, #D89A6B);
}
.welcome-eyebrow .we-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-lt, #D89A6B);
    animation: we-pulse 2.2s ease-in-out infinite;
}
@keyframes we-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }
/* IMPORTANTE: el welcome se inserta dentro de .bub-body.rsp, cuyas reglas
   `.rsp p` / `.rsp h1` pintan texto OSCURO. Acá ganamos esa cascada (.rsp .X)
   para que el texto del hero oscuro sea claro y legible. */
.rsp .welcome-name,
.welcome-name {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(2.8rem, 6.5vw, 5rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.045em;
    color: #FBF3E6;
    margin: 0 0 1rem;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.rsp .welcome-name em { color: var(--accent-lt, #E8C49A); }
.rsp .welcome-role  { color: var(--accent-lt, #D89A6B); }
.rsp .welcome-bio   { color: rgba(244,233,215,0.85); }
.welcome-name .nl { display: block; }
.welcome-name em {
    font-style: italic;
    color: var(--accent-lt, #E8C49A);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.welcome-role {
    position: relative;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-lt, #D89A6B);
    margin: 0 0 1.1rem;
}
.welcome-bio {
    position: relative;
    font-family: var(--sans);
    font-size: clamp(0.98rem, 1.5vw, 1.12rem);
    line-height: 1.62;
    font-weight: 300;
    color: rgba(244,233,215,0.82);
    margin: 0 0 1.5rem;
    max-width: 56ch;
    text-wrap: pretty;
}
.welcome-meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 2.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(232,196,154,0.24);
    margin: 0;
}
.welcome-meta dt {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-lt, #D89A6B);
    margin-bottom: 0.2rem;
}
.welcome-meta dd {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: #F4E9D7;
    margin: 0;
    letter-spacing: -0.015em;
}

/* Stats strip */
.welcome-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 0.7rem 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
@media (min-width: 620px) {
    .welcome-stats { grid-template-columns: repeat(4, 1fr); }
}
.ws-item {
    padding: 1.1rem 1.2rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.ws-item:nth-child(2n) { border-right: none; }
.ws-item:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 620px) {
    .ws-item { border-right: 1px solid var(--line); border-bottom: none; }
    .ws-item:last-child { border-right: none; }
    .ws-item:nth-child(2n) { border-right: 1px solid var(--line); }
    .ws-item:nth-child(4n) { border-right: none; }
}
.ws-num {
    font-family: var(--serif);
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: block;
    margin-bottom: 0.35rem;
}
.ws-num em {
    font-style: italic;
    color: var(--accent-dk);
    font-size: 0.55em;
    margin-left: 0.04em;
}
.ws-lab {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid);
    line-height: 1.3;
}

/* Bento grid */
.welcome-bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin-top: 0.7rem;
}
@media (min-width: 720px) {
    .welcome-bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); }
    .bento-projects { grid-column: span 4; grid-row: span 2; }
    .bento-services { grid-column: span 2; grid-row: span 2; }
    .bento-rpa      { grid-column: span 3; }
    .bento-powerbi  { grid-column: span 3; }
    .bento-stack    { grid-column: span 2; }
    .bento-about    { grid-column: span 2; }
    .bento-contact  { grid-column: span 2; }
}
@media (max-width: 719.98px) {
    .bento-projects, .bento-contact { grid-column: span 2; }
}

.bento-tile {
    position: relative;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem 1.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s, box-shadow 0.4s, background 0.3s;
    min-height: 130px;
}
.bento-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.bento-tile:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 20px 44px -18px rgba(30, 20, 10, 0.4);
}
.bento-tile:hover::before { opacity: 1; }
.bento-tile:active { transform: translateY(-1px) scale(0.99); }

.bento-projects { background: linear-gradient(150deg, rgba(184,110,60,0.14), rgba(184,110,60,0.03)); }
.bento-projects::before { background: radial-gradient(circle at 100% 0%, rgba(184,110,60,0.18), transparent 55%); }
.bento-services { background: linear-gradient(150deg, rgba(91,138,106,0.14), rgba(91,138,106,0.03)); }
.bento-services::before { background: radial-gradient(circle at 100% 0%, rgba(91,138,106,0.18), transparent 55%); }
.bento-rpa, .bento-powerbi { background: linear-gradient(150deg, rgba(62,127,173,0.10), rgba(62,127,173,0.02)); }
.bento-contact { background: linear-gradient(135deg, #1F1A14, #2A2520); border-color: rgba(200,150,92,0.3); }

.bento-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.bento-num {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: var(--accent-dk);
}
.bento-cat {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.bento-title {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0;
    font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
}
.bento-projects .bento-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.bento-title em {
    font-style: italic;
    color: var(--accent-dk);
    font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
}
.bento-desc {
    font-family: var(--sans);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-mid);
    margin: 0;
    flex: 1;
}
.bento-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-dk);
    transition: gap 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bento-tile:hover .bento-cta { gap: 0.85rem; color: var(--accent); }

/* Bento preview chips */
.bento-preview {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
    background: rgba(255, 252, 246, 0.6);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.bento-preview .prev-label {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.bento-preview .prev-name {
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.bento-preview .prev-meta {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--accent-dk);
    font-variant-numeric: tabular-nums;
}
.bento-preview .prev-svc {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-mid);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bento-preview .prev-svc i { color: var(--gladys); width: 14px; }
.bento-preview .prev-svc b { color: var(--ink); font-weight: 600; }

/* Icon background for visual tiles */
.bento-icon-bg {
    position: absolute;
    right: -8px;
    bottom: -12px;
    font-size: 5rem;
    color: rgba(62, 127, 173, 0.10);
    pointer-events: none;
    line-height: 1;
}
.bento-rpa .bento-icon-bg { color: rgba(184, 110, 60, 0.12); }

/* Contact tile — dark */
.bento-contact .bento-num { color: #E8C49A; }
.bento-contact .bento-cat { color: rgba(250, 247, 242, 0.5); }
.bento-contact .bento-title { color: #FAF7F2; }
.bento-contact .bento-title em { color: #E8C49A; }
.bento-contact .bento-desc { color: rgba(250, 247, 242, 0.7); }
.bento-contact .bento-cta { color: #E8C49A; }
.bento-contact:hover { border-color: rgba(232, 196, 154, 0.6); }

.welcome-tip {
    font-family: var(--sans);
    font-size: 0.84rem;
    color: var(--ink-mid);
    text-align: center;
    margin: 1.1rem 0 0;
    padding: 0.9rem;
    background: var(--paper);
    border: 1px dashed var(--line);
    border-radius: 12px;
}

/* ============================================================
   ANIMATED PET AVATARS — SVG dog faces (replace flat emoji)
   ============================================================ */
.avatar.avatar-svg {
    padding: 0;
    overflow: visible;
}
.pet-avatar-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
/* Idle bob + a happy hop when the message enters */
.msg.pet-stage .avatar.avatar-svg { animation: pa-bob 3.4s ease-in-out infinite; }
.msg.pet-stage.entering .avatar.avatar-svg { animation: pa-hop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pa-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@keyframes pa-hop {
    0%   { transform: translateY(8px) scale(0.6) rotate(-8deg); opacity: 0; }
    55%  { transform: translateY(-5px) scale(1.08) rotate(5deg); opacity: 1; }
    100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
/* Ears flop, alternating */
.pa-ear { animation: pa-ear-flop 1.6s ease-in-out infinite; }
.pa-ear-r { animation-delay: 0.2s; }
@keyframes pa-ear-flop {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-8deg); }
}
.pa-ear-r { transform-box: fill-box; }
/* Gladys' signature perked-up ear — mostly still, occasional flick */
.pa-ear-up { animation: pa-ear-perk 3.2s ease-in-out infinite; }
@keyframes pa-ear-perk {
    0%, 84%, 100% { transform: rotate(0deg); }
    89%           { transform: rotate(-8deg); }
    94%           { transform: rotate(4deg); }
}
/* Eyes blink — lid drops from the top of each eye, periodically */
.pa-blink {
    transform-box: fill-box;
    transform-origin: center top;
    transform: scaleY(0);
    animation: pa-blink 4.6s ease-in-out infinite;
}
@keyframes pa-blink {
    0%, 93%, 100% { transform: scaleY(0); }
    96%           { transform: scaleY(1); }
}
/* Fur sway — soft drift for Toby's scruffy coat / feathered ears.
   Cheap on purpose: a few grouped tufts, transform-only (no filters). */
.pa-fur { animation: pa-fur-sway 3.4s ease-in-out infinite; will-change: transform; }
@keyframes pa-fur-sway {
    0%, 100% { transform: rotate(-1.6deg); }
    50%      { transform: rotate(2.2deg); }
}
/* Tongue pant — only while "thinking" (typing indicator) */
.pa-tongue { transform-box: fill-box; transform-origin: center top; }
.msg.pet-stage._indicator .pa-tongue { animation: pa-pant 0.5s ease-in-out infinite; }
@keyframes pa-pant {
    0%, 100% { transform: scaleY(0.7); }
    50%      { transform: scaleY(1.15); }
}
/* Glow ring in the pet's color on hover/active stage */
.avatar.avatar-svg[data-pet="venus"]  { box-shadow: 0 2px 10px rgba(184,110,60,0.25); }
.avatar.avatar-svg[data-pet="toby"]   { box-shadow: 0 2px 10px rgba(62,127,173,0.25); }
.avatar.avatar-svg[data-pet="gladys"] { box-shadow: 0 2px 10px rgba(91,138,106,0.25); }
.avatar.avatar-svg[data-pet="lucy"]   { box-shadow: 0 2px 10px rgba(194,145,46,0.25); }

/* ============================================================
   AREA INTRO BANNER — the guardian "presents" a section
   Shown at the top of a command's widget output.
   ============================================================ */
.area-intro {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    background:
        radial-gradient(ellipse at 0% 100%, rgba(184,110,60,0.12), transparent 55%),
        linear-gradient(135deg, var(--paper), rgba(246,241,232,0.4));
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    animation: w-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    position: relative;
    overflow: hidden;
}
.area-intro[data-pet="venus"]  { border-left-color: var(--venus); }
.area-intro[data-pet="toby"]   { border-left-color: var(--toby); }
.area-intro[data-pet="gladys"] { border-left-color: var(--gladys); }
.area-intro[data-pet="lucy"]   { border-left-color: var(--lucy); }
.area-intro-avatar {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    overflow: visible;
    animation: pa-hop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.area-intro-avatar .pet-avatar-svg { width: 100%; height: 100%; }
/* Full-body variant — bigger, no circle clip */
.area-intro-avatar--full {
    width: 68px; height: 72px;
    border-radius: 0;
    background: none;
    border: 0;
    animation: greet-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.area-intro-avatar--full .pet-full-svg { width: 100%; height: 100%; }
.area-intro-text { min-width: 0; }
.area-intro-who {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-dk);
    display: block;
    margin-bottom: 0.1rem;
}
.area-intro[data-pet="venus"]  .area-intro-who { color: var(--venus); }
.area-intro[data-pet="toby"]   .area-intro-who { color: var(--toby); }
.area-intro[data-pet="gladys"] .area-intro-who { color: var(--gladys); }
.area-intro[data-pet="lucy"]   .area-intro-who { color: var(--lucy); }
.area-intro-say {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* ── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
    .widget,
    .welcome-cover,
    .bento-tile,
    .w-atlas-card,
    .w-cert,
    .w-cta-btn,
    .w-next-chip,
    .w-marquee-track,
    .w-faq-icon,
    .avatar.avatar-svg,
    .pa-ear,
    .pa-ear-up,
    .pa-blink,
    .pa-fur,
    .pa-tongue,
    .area-intro,
    .area-intro-avatar,
    .greet-pup,
    .greet-svg,
    .pf-wave, .pf-tail, .pf-ear, .pf-head, .pf-tongue,
    .cmd-back {
        animation: none !important;
        transition: none !important;
    }
    .greet-pup { opacity: 1 !important; }
    .pa-blink { transform: scaleY(0) !important; }
}

/* ============================================================
   DETALLE DE PROYECTO — nativo en DongoOS (migra /projects/<slug>/)
   ============================================================ */
.pd-head { margin-bottom: 1rem; }
.pd .pd-tag {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1rem, 2vw, 1.3rem); color: var(--ink-mid);
    margin: 0.45rem 0 0; line-height: 1.3; letter-spacing: -0.01em;
}
.pd-techs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.9rem 0 0.2rem; }
.pd-block { margin: 1.4rem 0; }
.pd-block h3 {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent-dk); margin: 0 0 0.55rem;
}
.pd-block p { color: var(--ink-mid); font-size: 0.96rem; line-height: 1.62; margin: 0.45rem 0; }
.pd-block p strong { color: var(--ink); font-weight: 650; }
.pd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.pd-shot, .pd-diagram {
    margin: 0; border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; background: var(--paper);
}
.pd-shot img, .pd-diagram img { width: 100%; height: auto; display: block; }
.pd-diagram { background: #fff; }
.pd-diagram img { padding: 0.6rem; }
.pd-shot figcaption, .pd-diagram figcaption {
    font-family: var(--mono); font-size: 0.66rem; color: var(--ink-mid);
    padding: 0.45rem 0.6rem; border-top: 1px solid var(--line);
}
.pd-video {
    position: relative; border-radius: 14px; overflow: hidden;
    margin: 1.1rem 0; background: #000; aspect-ratio: 16 / 9; border: 1px solid var(--line);
}
.pd-video iframe, .pd-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pd-actions { margin-top: 1.3rem; }

/* ── DETALLE DE SERVICIO (nativo) ── */
.sd-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.sd-icon {
    width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px;
    display: grid; place-items: center; font-size: 1.2rem;
    background: linear-gradient(135deg, rgba(91,138,106,0.20), rgba(91,138,106,0.07));
    color: var(--gladys);
}
.sd-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 0 1.2rem;
}
.sd-fact { padding: 0.8rem 1rem; border-right: 1px solid var(--line); }
.sd-fact:last-child { border-right: 0; }
.sd-fact .l { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.2rem; }
.sd-fact .v { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sd-block { margin: 1.2rem 0; }
.sd-block h3 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gladys); margin: 0 0 0.6rem; }
.sd-block p { color: var(--ink-mid); font-size: 0.96rem; line-height: 1.62; margin: 0.45rem 0; }
.sd-deliver { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.sd-deliver li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--ink-mid); }
.sd-deliver li i { color: var(--gladys); font-size: 0.78rem; margin-top: 0.28rem; flex: 0 0 auto; }

/* ============================================================
   FORMULARIO DE CONTACTO NATIVO (con puzzle anti-bot, sin iframe)
   ============================================================ */
.cf {
    display: flex; flex-direction: column; gap: 0.9rem;
    margin: 1.2rem 0 0.4rem;
    padding: 1.3rem clamp(1rem, 2.5vw, 1.5rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 520px) { .cf-grid { grid-template-columns: 1fr; } }
.cf-field { display: flex; flex-direction: column; gap: 0.3rem; }
.cf-field > span {
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-mid);
}
.cf-field input, .cf-field textarea {
    font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
    background: #FCFAF4; border: 1px solid var(--line-strong);
    border-radius: 10px; padding: 0.6rem 0.75rem; width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s; resize: vertical;
}
.cf-field input:focus, .cf-field textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* puzzle */
.cf-puzzle {
    border: 1px dashed rgba(184,110,60,0.4); border-radius: 12px;
    padding: 0.8rem 0.9rem; background: var(--accent-soft);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.cf-puzzle.shake { animation: cf-shake 0.4s cubic-bezier(.36,.07,.19,.97); }
@keyframes cf-shake { 10%,90%{transform:translateX(-2px);} 30%,70%{transform:translateX(-6px);} 50%{transform:translateX(6px);} }
.cf-puzzle-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dk); }
.cf-prompt { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.cf-prompt li {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    padding: 0.25rem 0.55rem; font-size: 0.78rem; color: var(--ink);
}
.cf-prompt li b { color: var(--accent-dk); font-family: var(--mono); font-size: 0.64rem; }
.cf-prompt li i { color: var(--accent-dk); }
.cf-pieces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
@media (max-width: 420px) { .cf-pieces { grid-template-columns: repeat(3, 1fr); } }
.cf-piece {
    aspect-ratio: 1; border: 2px solid var(--line); border-radius: 10px;
    background: linear-gradient(145deg, #fff, #F0E9DA); color: var(--ink);
    font-size: 1.25rem; cursor: pointer; position: relative;
    display: grid; place-items: center; transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.cf-piece:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent-dk); }
.cf-piece.picked { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }
.cf-piece.picked::after {
    content: attr(data-order); position: absolute; top: -7px; left: -7px;
    width: 19px; height: 19px; border-radius: 50%; background: #fff;
    color: var(--accent-dk); border: 2px solid var(--accent-dk);
    font-family: var(--mono); font-size: 0.66rem; font-weight: 800;
    display: grid; place-items: center;
}
.cf-puzzle-status { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mid); }
.cf-puzzle-status.ok  { color: var(--go); }
.cf-puzzle-status.err { color: #c0392b; }
.cf-submit {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--accent); color: #fff; border: 0; border-radius: 10px;
    font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
    padding: 0.7rem 1.3rem; cursor: pointer; transition: background 0.15s, transform 0.12s;
}
.cf-submit:hover:not(:disabled) { background: var(--accent-dk); transform: translateY(-1px); }
.cf-submit:disabled { opacity: 0.6; cursor: progress; }
.cf-result { margin: 0; font-size: 0.86rem; min-height: 1em; }
.cf-result.err { color: #c0392b; }
.cf-done { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.4rem; text-align: center; }
.cf-done i { font-size: 2.4rem; color: var(--go); }
.cf-done p { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin: 0; }

/* ============================================================
   ZONA DE JUEGO — colapsable que manifiesta a los perros (cazar/jugar)
   ============================================================ */
.play-zone {
    margin-top: 1rem;
    border: 1px solid rgba(184,110,60,0.3);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(184,110,60,0.08), rgba(91,138,106,0.04));
    overflow: hidden;
}
.play-zone > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.9rem 1.05rem;
    font-family: var(--sans); font-weight: 600; color: var(--ink);
}
.play-zone > summary::-webkit-details-marker { display: none; }
.play-zone > summary:hover { background: rgba(184,110,60,0.07); }
.pz-ico {
    width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-dk));
    animation: pz-paw 2.6s ease-in-out infinite;
}
@keyframes pz-paw { 0%,100%{ transform: rotate(-7deg); } 50%{ transform: rotate(7deg); } }
.pz-sum { flex: 1; }
.pz-sum em { font-family: var(--serif); font-style: italic; color: var(--accent-dk); }
.pz-chev { color: var(--ink-mid); transition: transform 0.3s var(--ease-cinema, ease); }
.play-zone[open] .pz-chev { transform: rotate(180deg); }
.pz-body { padding: 0 1.05rem 1.05rem; }
.pz-hint { font-size: 0.84rem; color: var(--ink-mid); margin: 0 0 0.7rem; }
.pz-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pz-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.9rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--paper);
    font-family: var(--sans); font-size: 0.84rem; font-weight: 500; color: var(--ink);
    cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.2s;
}
.pz-btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 20px -10px rgba(184,110,60,0.5); }
.pz-btn:active { transform: translateY(0) scale(0.97); }
.pz-emoji { font-size: 1.05rem; }
.pz-btn--party {
    background: linear-gradient(135deg, var(--accent), var(--accent-dk));
    color: #fff; border-color: transparent;
}
.pz-btn--party:hover { color: #fff; }
/* AL ABRIR el colapsable: los botones se manifiestan escalonados */
.play-zone[open] .pz-hint { animation: pz-fade 0.4s ease both; }
.play-zone[open] .pz-btn { animation: pz-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.play-zone[open] .pz-btn:nth-child(1) { animation-delay: 0.04s; }
.play-zone[open] .pz-btn:nth-child(2) { animation-delay: 0.10s; }
.play-zone[open] .pz-btn:nth-child(3) { animation-delay: 0.16s; }
.play-zone[open] .pz-btn:nth-child(4) { animation-delay: 0.22s; }
.play-zone[open] .pz-btn:nth-child(5) { animation-delay: 0.28s; }
.play-zone[open] .pz-btn:nth-child(6) { animation-delay: 0.34s; }
@keyframes pz-pop { 0% { opacity: 0; transform: translateY(10px) scale(0.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pz-fade { from { opacity: 0; } to { opacity: 1; } }
/* Vista dedicada /jugar: botones en grilla que entran escalonados */
.pz-actions--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.55rem; margin-top: 0.4rem; }
.pz-actions--grid .pz-btn { justify-content: center; padding: 0.7rem 0.9rem; }
.pz-widget .pz-btn { animation: pz-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.pz-widget .pz-btn:nth-child(1){ animation-delay: 0.04s; }
.pz-widget .pz-btn:nth-child(2){ animation-delay: 0.10s; }
.pz-widget .pz-btn:nth-child(3){ animation-delay: 0.16s; }
.pz-widget .pz-btn:nth-child(4){ animation-delay: 0.22s; }
.pz-widget .pz-btn:nth-child(5){ animation-delay: 0.28s; }
.pz-widget .pz-btn:nth-child(6){ animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
    .pz-ico, .play-zone[open] .pz-btn, .play-zone[open] .pz-hint, .pz-widget .pz-btn { animation: none !important; }
}