:root {
    color-scheme: light;
    --naranja: #f97316;
    --naranja-oscuro: #c2410c;
    --tinta: #211b18;
    --texto: #746b66;
    --borde: #eee8e3;
    --fondo: #fffaf6;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.contenedor {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

.barra-superior {
    display: flex;
    height: 88px;
    align-items: center;
    justify-content: space-between;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--tinta);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.marca strong {
    color: var(--naranja-oscuro);
}

.marca-icono {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 11px;
    background: var(--naranja);
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}

.etiqueta-entorno {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: #746b66;
    font-size: 12px;
}

.punto,
.indicador {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 3px #fff3df;
}

.hero {
    position: relative;
    display: flex;
    min-height: 440px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 55px 8.5%;
    border: 1px solid #f5e1d1;
    border-radius: 25px;
    background:
        radial-gradient(ellipse at 82% 18%, rgba(255, 255, 255, .76), transparent 34%),
        linear-gradient(118deg, #fff1e5 0%, #ffdfc5 54%, #ffd1ac 100%);
}

.hero-texto {
    position: relative;
    z-index: 1;
    max-width: 510px;
}

.sobrelinea {
    margin: 0 0 19px;
    color: var(--naranja-oscuro);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.65px;
}

h1 {
    margin: 0;
    font-size: clamp(42px, 5.2vw, 64px);
    font-weight: 750;
    letter-spacing: -3.1px;
    line-height: 1.04;
}

h1 span {
    color: var(--naranja-oscuro);
}

.descripcion {
    max-width: 430px;
    margin: 21px 0 25px;
    color: #65564c;
    font-size: 15px;
    line-height: 1.75;
}

.boton {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    gap: 18px;
    padding: 0 17px;
    border-radius: 10px;
    background: #29211c;
    color: white;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.boton:hover {
    transform: translateY(-1px);
    background: var(--naranja-oscuro);
}

.boton-secundario {
    background: transparent;
    color: var(--naranja-oscuro);
    border: 1px solid rgba(194, 65, 12, 0.35);
}

.boton-secundario:hover {
    background: rgba(249, 115, 22, 0.12);
}

.boton:focus-visible,
.marca:focus-visible {
    outline: 3px solid #7c2d12;
    outline-offset: 4px;
}

.tarjeta-estado {
    position: relative;
    z-index: 1;
    width: 260px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 17px;
    background: rgba(255, 255, 255, .77);
    box-shadow: 0 18px 50px rgba(139, 66, 22, .1);
    backdrop-filter: blur(10px);
}

.estado-cabecera,
.estado-pie {
    display: flex;
    align-items: center;
    gap: 9px;
}

.estado-cabecera {
    color: #9a5c35;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.orbita {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: #fff0e4;
    color: var(--naranja);
    font-size: 15px;
}

.estado-titulo {
    margin-top: 21px;
    font-size: 19px;
    font-weight: 720;
}

.tarjeta-estado p {
    margin: 8px 0 18px;
    color: var(--texto);
    font-size: 12px;
    line-height: 1.7;
}

.separador {
    height: 1px;
    background: #eee5df;
}

.estado-pie {
    margin-top: 15px;
    color: #635951;
    font-size: 11px;
}

.indicador {
    background: #22a06b;
    box-shadow: 0 0 0 3px #e1f4eb;
}

.decoracion {
    position: absolute;
    border: 1px solid rgba(194, 65, 12, .12);
    border-radius: 50%;
}

.decoracion-uno {
    top: -150px;
    right: 12%;
    width: 420px;
    height: 420px;
}

.decoracion-dos {
    right: 6%;
    bottom: -240px;
    width: 480px;
    height: 480px;
}

.caracteristicas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    padding: 54px 15px 48px;
}

.caracteristica {
    padding-left: 17px;
    border-left: 2px solid #fed7aa;
}

.numero {
    color: var(--naranja-oscuro);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.caracteristica h2 {
    margin: 10px 0 7px;
    font-size: 15px;
    font-weight: 700;
}

.caracteristica p {
    max-width: 260px;
    margin: 0;
    color: var(--texto);
    font-size: 12px;
    line-height: 1.7;
}

.pie {
    display: flex;
    justify-content: space-between;
    padding: 18px 0 25px;
    border-top: 1px solid var(--borde);
    color: #928780;
    font-size: 11px;
}

@media (max-width: 760px) {
    .contenedor {
        width: min(100% - 32px, 560px);
    }

    .barra-superior {
        height: 72px;
    }

    .hero {
        min-height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 34px;
        padding: 43px 28px;
    }

    .tarjeta-estado {
        width: min(100%, 340px);
    }

    .caracteristicas {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 8px;
    }

    .pie {
        gap: 12px;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}