/* Estilo general de la página. */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #0f0f0f;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

/* Nombre de la marca y navegación superior. */
.cabecera {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.marca .nombre-marca {
    color: #ffffff;
}

.marca .nombre-marca span {
    color: #f5c518;
}

.cabecera nav a {
    display: inline-block;
    padding: 12px 0;
    color: #ffffff;
    text-underline-offset: 5px;
}

.cabecera nav a:hover {
    color: #f5c518;
}

/* Portada con texto e imagen: dos columnas si hay espacio. */
.hero {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 75svh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 36px;
    padding: 64px 24px;
}

img {
    max-width: 100%;
    height: auto;
}

.marca img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

.hero-visual {
    margin: 0;
    min-width: 0;
}

.hero-visual img {
    display: block;
    width: 100%;
    border-radius: 16px;
}

.hero-visual figcaption {
    margin-top: 16px;
    color: #aaaaaa;
    line-height: 1.5;
    text-align: center;
    font-size: 14px;
}

.etiqueta {
    max-width: 650px;
    color: #f5c518;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    margin: 20px 0;
}

.descripcion {
    max-width: 650px;
    color: #aaaaaa;
    font-size: 20px;
    line-height: 1.5;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
    margin-top: 30px;
}

.boton-principal,
.boton-secundario {
    padding: 16px 28px;
    border: 1px solid #f5c518;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
}

.boton-principal {
    background: #f5c518;
    color: #0f0f0f;
}

.boton-secundario {
    background: transparent;
    color: #f5c518;
}

.aviso {
    margin-top: 20px;
    color: #aaaaaa;
    font-size: 14px;
    line-height: 1.5;
}

/* Los enlaces también pueden tener apariencia de botón. */
a.boton-principal {
    display: inline-block;
    text-decoration: none;
}

a.boton-principal:hover {
    background: #ffda47;
}

a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 5px;
}

.boton-secundario:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Sección de herramientas: tres columnas que se adaptan al espacio. */
.herramientas {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px;
    scroll-margin-top: 24px;
}

h2 {
    font-size: 36px;
    line-height: 1.15;
    margin: 16px 0;
}

.introduccion {
    max-width: 650px;
    color: #aaaaaa;
    font-size: 18px;
    line-height: 1.6;
}

.tarjetas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 36px 0;
}

.tarjeta {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #191919;
    border: 1px solid #333333;
    border-radius: 12px;
}

.estado {
    color: #f5c518;
    font-size: 13px;
    font-weight: bold;
}

h3 {
    font-size: 22px;
    line-height: 1.3;
    margin: 20px 0 12px;
}

.tarjeta p {
    color: #aaaaaa;
    line-height: 1.6;
    margin: 0;
}

.volver {
    color: #f5c518;
    text-underline-offset: 4px;
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .tarjetas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ajustes para pantallas pequeñas, como celulares. */
@media (max-width: 600px) {
    .tarjetas {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 32px;
    }

    .marca {
        font-size: 19px;
    }

    .acciones a {
        text-align: center;
    }

    h1 {
        font-size: 42px;
    }

    .descripcion {
        font-size: 18px;
    }

    .acciones {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}

/* Enlace al sitio actual, al pie de cada tarjeta. */
.enlace-herramienta {
    margin-top: auto;
    padding-top: 24px;
    color: #f5c518;
    font-weight: bold;
    text-underline-offset: 4px;
}

.enlace-herramienta:hover {
    color: #ffffff;
}

/* Mostrar las imágenes completas evita recortar sus textos. */
.imagen-herramienta,
.imagen-pendiente {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    object-fit: contain;
    background: #101010;
    border-radius: 8px;
    margin-bottom: 24px;
}

.imagen-pendiente {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 20px;
    background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
    background-size: 24px 24px;
}

.imagen-pendiente strong {
    color: #f5c518;
    font-size: 56px;
}

.imagen-pendiente span {
    color: #aaaaaa;
    line-height: 1.5;
}

/* El producto principal tiene su lugar antes del catálogo de aplicaciones. */
.acento { color: #f5c518; }
.cabecera nav { display: flex; flex-wrap: wrap; gap: 20px; }
a.boton-secundario { display: inline-block; text-decoration: none; text-align: center; }
a.boton-secundario:hover { background: #f5c518; color: #0f0f0f; }
.seccion-producto, .seccion-ejemplos, .sobre-autor {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px;
    scroll-margin-top: 24px;
}
.seccion-producto {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
    border-top: 1px solid #333333;
}
.pasos { padding-left: 24px; margin: 28px 0; color: #aaaaaa; line-height: 1.7; }
.pasos li { margin-bottom: 16px; padding-left: 8px; }
.pasos strong { display: block; color: #ffffff; }
.muestra-producto { margin: 0; text-align: center; }
.muestra-producto img { max-height: 440px; width: 100%; object-fit: contain; }
figcaption { color: #aaaaaa; font-size: 14px; line-height: 1.5; margin-top: 16px; }
.galeria-ejemplos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 36px; }
.galeria-ejemplos figure { margin: 0; padding: 20px; background: #191919; border: 1px solid #333333; border-radius: 12px; }
.galeria-ejemplos img { width: 100%; height: 280px; object-fit: contain; }
.imagen-pendiente strong { font-size: clamp(26px,3vw,42px); overflow-wrap: anywhere; }
.placa-juego { background-color: #242018; }
.tarjeta .acceso-pendiente { margin-top: auto; padding-top: 24px; font-size: 14px; }
.sobre-autor { display: flex; align-items: center; gap: 32px; border-top: 1px solid #333333; }
.sobre-autor > img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }
.sobre-autor h2 { font-size: 28px; }
.pie { padding: 32px 24px; text-align: center; color: #aaaaaa; border-top: 1px solid #333333; line-height: 1.6; }
@media (max-width: 800px) {
    .seccion-producto { grid-template-columns: 1fr; gap: 32px; }
    .galeria-ejemplos { grid-template-columns: 1fr; }
    .sobre-autor { flex-direction: column; align-items: flex-start; }
}

/* Presentación comercial: demostración, beneficios y oferta principal. */
.hero { padding-top: 48px; gap: 40px; }
h1 { font-size: clamp(38px, 4.5vw, 60px); }
.descripcion strong { color: #eeeeee; font-weight: 500; }
.cabecera .nav-compra { color: #f5c518; }
video { display: block; width: 100%; max-width: 100%; background: #000000; border-radius: 12px; }
.video-portada { padding: 20px; border: 1px solid #45402d; border-radius: 16px; background: #191813; }
.video-portada video, .video-demo { aspect-ratio: 16 / 9; object-fit: contain; }
.banda-beneficios { max-width: 1100px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.banda-beneficios strong { display: block; color: #f5c518; font-size: 27px; margin-bottom: 8px; }
.banda-beneficios span { color: #bbb; line-height: 1.5; }
.seccion-venta { max-width: 1100px; margin: 0 auto; padding: 80px 24px; scroll-margin-top: 24px; }
.video-demo { margin: 32px 0; border: 1px solid #333; }
.beneficios-venta { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.beneficios-venta p { color: #bbb; line-height: 1.7; }
.demo-animada { border: 1px solid #45402d; border-radius: 12px; padding: 16px; }
summary { cursor: pointer; line-height: 1.5; font-weight: bold; padding: 16px 0; }
summary:focus-visible { outline: 3px solid #f5c518; outline-offset: 4px; }
.demo-animada img { display: block; width: 100%; margin-top: 16px; }
.oferta { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.incluye { color: #ddd; line-height: 1.8; padding-left: 20px; }
.incluye li { margin: 10px 0; }
.incluye li::marker { color: #f5c518; }
.precio-tarjeta { padding: 32px; border: 2px solid #f5c518; border-radius: 16px; background: #201e15; }
.precio { font-size: clamp(38px,5vw,56px); font-weight: bold; margin: 20px 0 8px; }
.precio span { font-size: 18px; color: #bbb; }
.precio-exterior { font-size: 18px; line-height: 1.5; }
.precio-tarjeta > a { display: block; text-align: center; margin-top: 16px; line-height: 1.4; }
.enlace-simple { color: #f5c518; text-underline-offset: 4px; }
.preguntas { max-width: 900px; }
.preguntas details { border-bottom: 1px solid #333; padding: 8px 0; }
.preguntas details p { color: #bbb; line-height: 1.7; padding-bottom: 16px; }
.catalogo-desplegable { margin-top: 32px; border-top: 1px solid #333; }
.placa-juego strong { font-size: 32px; }
@media (max-width: 800px) {
    .oferta { grid-template-columns: 1fr; }
    .beneficios-venta { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 600px) {
    .banda-beneficios { grid-template-columns: 1fr; gap: 28px; }
    .precio-tarjeta { padding: 24px 20px; }
    .hero { padding-top: 28px; }
    .seccion-venta { padding-top: 56px; padding-bottom: 56px; }
}

/* Original brand artwork, with its original proportions. */
.brand-logo-image{display:block;width:140px;height:auto;max-width:100%;object-fit:contain}
footer .brand-logo-image{margin:0 auto 16px}
.nav-inner{padding-top:4px;padding-bottom:4px}