/* ===== APIBOT · Robótica educativa ===== */
:root { --bot-cian: #00d4ff; --bot-azul: #004aad; }

.bot-hero {
    position: relative; overflow: hidden;
    background: radial-gradient(circle at 15% 20%, #123a6b 0%, #0b1c2d 55%, #07111f 100%);
    color: #fff;
    padding: calc(var(--api-menu) + 70px) 0 80px;
}
.bot-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(0, 212, 255, .07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 212, 255, .07) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
    mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.bot-hero .container { position: relative; }
.bot-hero h1 { font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; }
.bot-hero h1 span { color: var(--api-amarillo); }
.bot-hero .lead { color: rgba(255, 255, 255, .86); max-width: 620px; }
.bot-sello {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid rgba(0, 212, 255, .45); color: var(--bot-cian);
    border-radius: 999px; padding: .35rem 1rem; font-weight: 700; letter-spacing: .12em; font-size: .8rem;
}
.bot-logo {
    width: min(360px, 80%); filter: drop-shadow(0 20px 40px rgba(0, 212, 255, .25));
    animation: bot-flotar 6s ease-in-out infinite;
}
@keyframes bot-flotar { 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .bot-logo { animation: none; } }

.bot-pilar {
    background: #fff; border: 1px solid var(--api-borde); border-radius: var(--api-radio);
    padding: 1.6rem; height: 100%; box-shadow: var(--api-sombra);
}
.bot-pilar i {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--bot-azul), #0b1c2d); color: var(--bot-cian);
    font-size: 1.35rem; margin-bottom: 1rem;
}
.bot-pilar h3 { font-size: 1.1rem; font-weight: 700; color: var(--api-azul); }
.bot-pilar p { color: var(--api-suave); margin: 0; }

/* Tarjetas de proyecto */
.bot-proyecto {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border-radius: var(--api-radio); overflow: hidden;
    box-shadow: var(--api-sombra); text-decoration: none; color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}
a.bot-proyecto:hover { transform: translateY(-6px); box-shadow: var(--api-sombra-fuerte); color: inherit; }
.bot-proyecto-img {
    aspect-ratio: 16 / 10; background: linear-gradient(135deg, #eaf6ff, #f4f6fa);
    display: grid; place-items: center; overflow: hidden;
}
.bot-proyecto-img img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; transition: transform .4s ease; }
a.bot-proyecto:hover .bot-proyecto-img img { transform: scale(1.05); }
.bot-proyecto-cuerpo { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.bot-proyecto h3 { font-size: 1.2rem; font-weight: 700; color: var(--api-azul); }
.bot-proyecto p { color: var(--api-suave); flex: 1; }
.bot-proyecto.proximo { background: #f9fbfd; border: 2px dashed #cfd8e3; box-shadow: none; }
.bot-proyecto.proximo .bot-proyecto-img i { font-size: 3rem; color: #9fb3c8; }
.bot-ir { font-weight: 700; color: var(--bot-azul); }

/* Página del proyecto: submenú pegado al menú */
.bot-subnav {
    position: sticky; top: var(--api-menu); z-index: 1020;
    background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--api-borde);
}
.bot-subnav .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.bot-subnav .nav::-webkit-scrollbar { display: none; }
.bot-subnav .nav-link {
    white-space: nowrap; color: var(--api-suave); font-weight: 600; padding: .9rem 1rem; border-bottom: 3px solid transparent;
}
.bot-subnav .nav-link:hover, .bot-subnav .nav-link.active { color: var(--api-azul); border-bottom-color: var(--api-amarillo); }
.bot-seccion { scroll-margin-top: calc(var(--api-menu) + 56px); }

.bot-portada {
    background: #fff; border-radius: 24px; padding: 1.5rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.bot-portada img { width: 100%; height: auto; }

.bot-componente {
    background: #fff; border: 1px solid var(--api-borde); border-radius: var(--api-radio);
    padding: 1rem; height: 100%; text-align: center; transition: transform .2s ease, box-shadow .2s ease;
}
.bot-componente:hover { transform: translateY(-4px); box-shadow: var(--api-sombra); }
.bot-componente button { border: 0; background: none; padding: 0; width: 100%; cursor: zoom-in; }
.bot-componente img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.bot-componente h3 { font-size: .98rem; font-weight: 700; color: var(--api-azul); margin: .6rem 0 .25rem; }
.bot-componente p { font-size: .85rem; color: var(--api-suave); margin: 0; }

.bot-paso { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; margin-bottom: 1.6rem; }
.bot-paso-num {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--api-amarillo); color: var(--api-azul); font-weight: 800; font-family: "Poppins", sans-serif;
}
.bot-paso h3 { font-size: 1.05rem; font-weight: 700; color: var(--api-azul); margin: .65rem 0 .75rem; }
.bot-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.bot-fotos button {
    border: 1px solid var(--api-borde); background: #fff; border-radius: 12px; padding: .35rem; cursor: zoom-in;
    transition: transform .2s ease, box-shadow .2s ease;
}
.bot-fotos button:hover { transform: translateY(-3px); box-shadow: var(--api-sombra); }
.bot-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* Visor del aplicativo / manual */
.bot-visor {
    border-radius: 20px; overflow: hidden; background: #07111f;
    box-shadow: var(--api-sombra-fuerte); border: 1px solid #1d3557;
}
.bot-visor-barra {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
    padding: .75rem 1rem; background: #0b1c2d; color: #fff;
}
.bot-visor-barra .btn-group .btn { border-radius: 10px !important; }
.bot-visor iframe { display: block; width: 100%; height: min(80vh, 860px); border: 0; background: #fff; }

.bot-recurso {
    display: flex; gap: 1rem; align-items: flex-start; height: 100%;
    background: #fff; border: 1px solid var(--api-borde); border-radius: var(--api-radio); padding: 1.25rem;
}
.bot-recurso > i {
    flex: 0 0 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    background: #eaf3ff; color: var(--bot-azul); font-size: 1.3rem;
}
.bot-recurso h3 { font-size: 1.05rem; font-weight: 700; color: var(--api-azul); margin-bottom: .25rem; }
.bot-recurso p { color: var(--api-suave); font-size: .92rem; margin-bottom: .75rem; }

.bot-cta {
    background: linear-gradient(135deg, #0b1c2d, #16365a); color: #fff;
    border-radius: 24px; padding: clamp(1.75rem, 4vw, 3rem);
}
.bot-cta h2 { font-weight: 800; }

/* Visor de imágenes ampliadas */
#botVisorImagen .modal-content { background: transparent; border: 0; }
#botVisorImagen img { background: #fff; border-radius: 16px; max-height: 82vh; object-fit: contain; }

@media (max-width: 767.98px) {
    .bot-hero { padding: calc(var(--api-menu) + 40px) 0 56px; text-align: center; }
    .bot-hero .d-flex { justify-content: center; }
    .bot-paso { grid-template-columns: 1fr; }
    .bot-paso-num { margin-bottom: -.25rem; }
    .bot-fotos { grid-template-columns: repeat(2, 1fr); }
    .bot-visor iframe { height: 75vh; }
}

/* Logo APIBOT: el archivo trae fondo blanco, se presenta como tarjeta redondeada */
.bot-logo { border-radius: 28px; background: #fff; padding: 1rem; }
@media (max-width: 767.98px) { .bot-logo { width: min(240px, 70%); } }

/* Ficha técnica */
.bot-tabla { background: #fff; border-radius: var(--api-radio); overflow: hidden; box-shadow: var(--api-sombra); }
.bot-tabla table { margin: 0; }
.bot-tabla thead th { background: #0b1c2d; color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; border: 0; padding: .9rem 1rem; }
.bot-tabla tbody th { color: var(--api-azul); font-weight: 700; white-space: nowrap; }
.bot-tabla td, .bot-tabla tbody th { padding: .85rem 1rem; vertical-align: top; }
@media (max-width: 575.98px) { .bot-tabla tbody th { white-space: normal; } .bot-tabla td.text-muted { display: none; } .bot-tabla thead th:last-child { display: none; } }

/* Materiales */
.bot-componente { position: relative; }
.bot-cantidad {
    position: absolute; top: .6rem; left: .6rem; z-index: 1;
    background: var(--api-azul); color: var(--api-amarillo); font-weight: 800; font-size: .8rem;
    border-radius: 999px; padding: .15rem .55rem;
}
.bot-sin-foto { aspect-ratio: 1; display: grid; place-items: center; background: #f4f6fa; border-radius: 12px; color: #9fb3c8; font-size: 2.2rem; }
.bot-espec { font-size: .78rem !important; color: var(--bot-azul) !important; font-weight: 600; margin-bottom: .25rem !important; }

/* Reglamento */
.bot-reglas { background: #fff; border: 1px solid var(--api-borde); border-left: 5px solid var(--api-amarillo); border-radius: var(--api-radio); padding: 1.4rem 1.6rem; }
.bot-reglas h3 { color: var(--api-azul); }
.bot-reglas li { color: var(--api-suave); margin-bottom: .35rem; }

/* Kit */
.bot-kit {
    background: linear-gradient(135deg, var(--api-amarillo), #ffd34f); color: var(--api-azul);
    border-radius: 24px; padding: clamp(1.75rem, 4vw, 3rem); box-shadow: 0 18px 40px rgba(245, 196, 0, .3);
}
.bot-kit h2 { font-weight: 800; }

/* Solo lectura (disuasivo): sin imprimir ni arrastrar imágenes */
.bot-hero img, .bot-componente img, .bot-fotos img, .bot-proyecto img, #botVisorImagen img { -webkit-user-drag: none; user-select: none; }
@media print {
    body * { display: none !important; }
    body::after { content: "Contenido de solo lectura. Para más información escríbenos: APIBOT 098 728 1506."; display: block; padding: 40px; font: 16px Arial, sans-serif; color: #111; }
}