:root {
            --luva-primary: #EF6024;
            /* naranja */
            --luva-dark: #969696;
            /* gris oscuro */
            --ink: #1A1A1A;
            --soft: #F6F6F6;
            --radius-xl: 1.25rem;
            --shadow-soft: 0 12px 32px rgba(0, 0, 0, .08);
            --font-display: 'verdana', serif;
            --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            /* UI */

            /* Navegación y botones con un pelín más de presencia */
            .navbar .nav-link,
            .btn,
            .badge,
            small,
            .text-uppercase {
                letter-spacing: .02em;
                /* tracking suave */
            }

            .navbar .nav-link {
                font-weight: 600;
            }

            .btn {
                font-weight: 600;
            }

        }

        html,
        body {
            height: 100%
        }

        body {
            font-family: var(--font-sans);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--font-display);
        }

        /* Utilities */
        .text-orange {
            color: var(--luva-primary) !important
        }

        .bg-orange {
            background: var(--luva-primary) !important
        }

        .btn-primary {
            background: var(--luva-primary);
            border-color: var(--luva-primary)
        }

        .btn-primary:hover {
            background: #d9531d;
            border-color: #d9531d
        }

        .rounded-2xl {
            border-radius: 1rem
        }

        .rounded-3xl {
            border-radius: 1.5rem
        }

        /* Top bar */
        .topbar {
            background: var(--luva-dark);
            color: #fff;
            font-size: .9rem
        }

        .topbar a {
            color: #fff;
            opacity: .95
        }

        .lang-link {
            text-underline-offset: .25rem;
            text-decoration: underline;
        }

        .lang-link.fw-bold {
            text-decoration-thickness: 2px;
        }


        /* Header (sticky, frosted) */
        .header {
            position: sticky;
            top: 0;
            z-index: 1040;
            background: rgba(255, 255, 255, .9);
            backdrop-filter: saturate(150%) blur(6px);
            border-bottom: 1px solid rgba(0, 0, 0, .06)
        }

        /* SE APAGO EL FONDO PORQUE NO ES NECESARIO PARA ESTE CASO */
        /* .brand-box{width:40px; height:40px; border-radius:12px; background:#e9e9e9; display:grid; place-items:center; color:var(--luva-primary); font-weight:700} */
        .navbar-logo {
            height: 60px;
            width: auto;
            display: block;
        }


        /* Hero */
        .hero {
            position: relative;
            overflow: hidden
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--luva-dark), #7a7a7a)
        }
        .media-box{
  width: 100%;
  max-width: 720px;              /* opcional, para que no crezca infinito */
  aspect-ratio: 16 / 9;         /* ajusta el “cuadro” (ej: 1/1, 4/3, 16/9) */
  border-radius: 1rem;
  overflow: hidden;              /* CLAVE: recorta lo que se salga */
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
}

.media-img{
  width: 100%;
  height: 100%;
  display: block;                /* evita espacios raros debajo */
  object-fit: cover;             /* llena el cuadro recortando */
  object-position: center;       /* centra el recorte */
}


        .hero .content {
            position: relative;
            color: #fff
        }

        .hero .visual {
            position: relative;
            height: 16rem
        }

        @media(min-width:576px) {
            .hero .visual {
                height: 20rem
            }
        }

        @media(min-width:992px) {
            .hero .visual {
                height: 26rem
            }
        }

        .hero .visual .frame {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255, 255, 255, 0);
            background: rgba(255, 255, 255, 0);
            backdrop-filter: blur(8px);
            border-radius: 1rem
        }

        /* Pill band */
        .band {
            background: #f5f4f3
        }

        .band .bullet {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--luva-primary);
            display: inline-block;
            margin-right: .5rem
        }

        /* Cards */
        .tile {
            border: 1px solid rgba(0, 0, 0, .12);
            border-radius: 1rem;
            transition: all .2s ease;
            overflow: hidden
        }

        .tile:hover {
            border-color: var(--luva-primary)
        }

        .tile .thumb {
            aspect-ratio: 16/9;
            background: #eee;
            display: grid;
            place-items: center;
            color: #777
        }

        /* CTA slim */
        .cta-slim {
            background: #fff;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-soft)
        }

        /* Pricing */
        .plan {
            border: 1px solid rgba(0, 0, 0, .12);
            border-radius: 1rem
        }

        /* Dark section */
        .dark-section {
            background: var(--luva-dark);
            color: #fff
        }



        /* Footer */
        footer a {
            text-decoration: none
        }

                .media-box2{
  width: 100%;
  max-width: 720px;              /* opcional, para que no crezca infinito */
  aspect-ratio: 16 / 9;         /* ajusta el “cuadro” (ej: 1/1, 4/3, 16/9) */
  border-radius: 1rem;
  overflow: hidden ;              /* CLAVE: recorta lo que se salga */
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
}