body{
    background-color:#fff;

    overflow-x:hidden;

    position:relative;
}

/* GRID */
body::before{
    content:"";

    position:fixed;

    inset:0;

    z-index:-2;

    background-image:
    linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);

    background-size:42px 42px;
}

/* GLOW */
body::after{
    content:"";

    position:fixed;

    top:-15%;

    left:50%;

    transform:translateX(-50%);

    width:900px;
    height:900px;

    background:
    radial-gradient(
        circle,
        rgba(201,168,87,0.07),
        transparent 70%
    );

    z-index:-1;

    pointer-events:none;
}

/* VARIABLES */
:root {
    --bg: #ffffff;
    --text: #111;
    --accent: #C9A857;
    --secondary: #666;
    --border: #eee;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    background: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar {

    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 82px;

    padding: 0 70px;

    background: rgba(255,255,255,0.72);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 🔒 NO TOCAR (tu logo igual) */
.logo {
    font-weight: 600;
    letter-spacing: 4px;
    font-size: 1.1rem;

    text-decoration: none;
    color: var(--text);

    transition: color 0.25s ease, transform 0.2s ease;
}

/* HOVER ELEGANTE */
.logo:hover {
    color: var(--accent);
    transform: translateY(-1px);
}

/* LINKS */
nav a {

    margin-left: 30px;

    text-decoration: none;

    color: var(--text);

    position: relative;

    font-size: 0.88rem;

    font-weight: 500;

    transition: all 0.25s ease;
}

/* SUBRAYADO MÁS FINO */
nav a::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: -5px;
    left: 0;
    background: var(--accent);
    transition: 0.25s ease;
}

nav a:hover::after {
    width: 100%;
}

nav a:hover {
    color: var(--accent);
}

/* ========================= */
/* HERO */
/* ========================= */

.hero{

    position:relative;

    max-width:900px;

    margin:0 auto;

    padding:90px 25px 110px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}

/* TAG */

.hero-tag{

    display:inline-block;

    margin-bottom:20px;

    color:#C9A857;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:6px;

    text-transform:uppercase;
}

/* TITULO */

.hero h1{

    font-size:clamp(3rem,6vw,5rem);

    font-weight:700;

    letter-spacing:-2px;

    line-height:1.05;

    color:#111;

    max-width:800px;

    margin-bottom:22px;
}

/* TEXTO */

.hero p{

    max-width:560px;

    color:#666;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:38px;
}

/* BOTÓN */

.btn{

    padding:15px 42px;

    border:none;

    border-radius:999px;

    background:#111;

    color:white;

    font-size:.88rem;

    font-weight:600;

    letter-spacing:2px;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);
}

/* HOVER */

.btn:hover{

    background:#222;

    transform:translateY(-3px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.18);
}

/* ========================= */
/* ANIMACIONES */
/* ========================= */

.reveal{

    opacity:0;

    transform:translateY(30px);
}

.reveal.show{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

/* RESPONSIVE */

@media(max-width:768px){

    .hero{

        padding:70px 20px 80px;
    }

    .hero h1{

        font-size:2.4rem;
    }

    .hero p{

        font-size:.96rem;
    }

}



/* FOOTER */


/* FOOTER BASE */
.footer {

    background: #fafafa;

    padding: 100px 60px 40px;

    margin-top: 120px;

    border-top: 1px solid rgba(0,0,0,0.05);
}

/* CONTENEDOR */
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 50px;
}

/* TITULOS */
.footer h3 {
    margin-bottom: 15px;
    letter-spacing: 2px;
    font-size: 0.95rem;
    font-weight: 600;
}

/* TEXTO */
.footer p {
    color: var(--secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* LINKS */
.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: var(--text);
    font-size: 0.9rem;
    transition: 0.25s;
}

.footer-links a:hover {
    color: var(--accent);
}

/* ============================= */
/* SOCIAL ICONS (FIX REAL) */
/* ============================= */

.social-icons {
    margin-top: 15px;
    display: flex;
    gap: 14px;
}

/* CAJA ICONO */
.social-icons a {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%; /* 🔥 mejor que cuadrado */
    border: 1px solid #e5e5e5;

    background: #fff;
    color: #333;

    font-size: 15px;
    text-decoration: none;

    transition: all 0.25s ease;
}

/* HOVER GENERAL SUAVE */
.social-icons a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

/* COLORES REALES (más elegantes) */

/* Facebook */
.social-icons a:nth-child(1):hover {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

/* Instagram */
.social-icons a:nth-child(2):hover {
    background: linear-gradient(45deg,#ff0050,#ff8a00,#ffd500);
    color: #fff;
    border: none;
}

/* TikTok */
.social-icons a:nth-child(3):hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* FOOTER BOTTOM */
.footer-bottom {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;

    border-top: 1px solid #eee;
    color: var(--secondary);
    font-size: 13px;
}

/* ========================= */
/* TYPEWRITER PRO */
/* ========================= */

.hidden {
    opacity: 0;
}

.fade-in {
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 🔥 TEXTO PRINCIPAL (CLAVE PARA QUE SE VEA BIEN) */
#typeText {
    text-align: center;
    line-height: 1.2;
    max-width: 700px;
    margin: 0 auto;
    word-break: normal;
}

/* 🔥 LETRAS */
.letter {
    opacity: 0;
    display: inline; /* 🔥 FIX IMPORTANTE */
    animation: letterFade 0.4s ease forwards;
}

@keyframes letterFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    letter-spacing: 1px;
    font-weight: 600;
}

/* ========================= */
/* CART NAVBAR */
/* ========================= */

.cart-link {
    position: relative;
    margin-left: 25px;
    font-size: 1rem;
}

/* CONTADOR */
#cartCount {
    position: absolute;
    top: -6px;
    right: -10px;

    background: var(--accent);
    color: #000;

    font-size: 10px;
    padding: 3px 6px;
    border-radius: 50%;

    transition: transform 0.2s ease;
}

/* ANIMACIÓN */
.cart-bounce {
    animation: cartBounce 0.4s ease;
}

@keyframes cartBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.logo img {
    height: 50px;
    width: auto;

    display: block;

    object-fit: contain;
}

/* ADMIN PANEL LINK */

.admin-panel-footer-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #C9A857 !important;

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.4px;

    transition:
    0.3s ease;
}

/* DOT */

.admin-panel-footer-link::before {

    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
    #C9A857;

    box-shadow:
    0 0 12px rgba(201,168,87,0.6);
}

/* HOVER */

.admin-panel-footer-link:hover {

    color: white !important;

    transform:
    translateX(4px);

    text-shadow:
    0 0 14px rgba(201,168,87,0.35);
}

/* ========================================= */
/* North Legacy PHILOSOPHY */
/* ========================================= */

.products{

    position:relative;

    padding:140px 25px;

    overflow:hidden;
}

/* GRID DE FONDO */

.products::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.02) 1px, transparent 1px);

    background-size:42px 42px;

    mask-image:
    radial-gradient(circle at center,
    black 45%,
    transparent 100%);

    pointer-events:none;
}

/* GLOW */

.products::after{

    content:"";

    position:absolute;

    left:50%;
    top:45%;

    transform:translate(-50%,-50%);

    width:650px;
    height:650px;

    background:
    radial-gradient(circle,
    rgba(201,168,87,.07),
    transparent 70%);

    filter:blur(45px);

    pointer-events:none;
}

.products-content{

    position:relative;

    max-width:1200px;

    margin:auto;

    z-index:2;
}

/* ========================================= */
/* HEADER */
/* ========================================= */

.section-tag{

    display:block;

    text-align:center;

    color:#C9A857;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:6px;

    text-transform:uppercase;

    margin-bottom:18px;
}

.section-title{

    text-align:center;

    font-size:clamp(2.2rem,4vw,3.6rem);

    line-height:1.15;

    letter-spacing:-1px;

    color:#111;

    margin-bottom:22px;
}

.section-description{

    max-width:620px;

    margin:0 auto 85px;

    text-align:center;

    color:#666;

    line-height:1.8;

    font-size:.97rem;
}

/* ========================================= */
/* GRID */
/* ========================================= */

.philosophy-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;
}

/* ========================================= */
/* CARD */
/* ========================================= */

.philosophy-card{

    position:relative;

    padding:42px 34px;

    border-radius:26px;

    background:
    rgba(255,255,255,.65);

    backdrop-filter:blur(14px);

    border:
    1px solid rgba(0,0,0,.05);

    overflow:hidden;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

/* GLOW */

.philosophy-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(201,168,87,.08),
        transparent 45%
    );

    opacity:0;

    transition:.35s;
}

/* HOVER */

.philosophy-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,168,87,.25);

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);
}

.philosophy-card:hover::before{

    opacity:1;
}

/* NUMERO */

.philosophy-number{

    font-size:4rem;

    font-weight:800;

    color:rgba(201,168,87,.12);

    line-height:1;

    margin-bottom:18px;

    user-select:none;
}

/* TITULO */

.philosophy-card h3{

    font-size:1.15rem;

    letter-spacing:4px;

    margin-bottom:18px;

    color:#111;
}

/* TEXTO */

.philosophy-card p{

    color:#666;

    font-size:.95rem;

    line-height:1.9;
}

/* ========================================= */
/* FRASE FINAL */
/* ========================================= */

.brand-quote{

    margin-top:110px;

    text-align:center;
}

.brand-quote h2{

    font-size:clamp(2rem,4vw,3.2rem);

    line-height:1.15;

    letter-spacing:-1px;

    color:#111;

    max-width:760px;

    margin:0 auto 24px;
}

.brand-quote p{

    max-width:600px;

    margin:auto;

    color:#666;

    line-height:1.8;

    font-size:.96rem;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media(max-width:992px){

    .philosophy-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .products{

        padding:100px 20px;
    }

    .section-title{

        font-size:2rem;
    }

    .section-description{

        margin-bottom:60px;
    }

    .philosophy-card{

        padding:36px 28px;
    }

    .philosophy-number{

        font-size:3.3rem;
    }

    .brand-quote{

        margin-top:80px;
    }

}

/* ========================= */
/* UPDATES SECTION */
/* ========================= */

.updates-section{
    position:relative;

    padding:30px 25px 100px;

    overflow:hidden;
}

/* HEADER */
.updates-header{
    text-align:center;

    margin-bottom:70px;
}

/* TAG */
.updates-tag{
    display:inline-block;

    margin-bottom:18px;

    color:#C9A857;

    letter-spacing:4px;

    font-size:0.8rem;

    font-weight:700;
}

/* TITULO */
.updates-header h2{
    font-size:
    clamp(2.8rem,7vw,6rem);

    letter-spacing:8px;

    color:#111;

    margin-bottom:24px;

    line-height:1;
}

/* TEXTO */
.updates-header p{
    max-width:650px;

    margin:0 auto;

    color:#666;

    line-height:2;

    font-size:1rem;
}

/* ========================= */
/* North Legacy HERO SLIDER */
/* ========================= */

.updates-slider{

    position:relative;

    width:100%;

    max-width:1400px;

    height:650px;

    margin:0 auto;

    border-radius:24px;

    overflow:hidden;

    background:#111;
}

/* ========================= */
/* SLIDES */
/* ========================= */

.update-card{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;

    z-index:1;
}

/* SLIDE ACTIVO */

.update-card.active{

    opacity:1;

    visibility:visible;

    z-index:2;
}

/* ========================= */
/* IMAGEN */
/* ========================= */

.update-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* ========================= */
/* OVERLAY */
/* ========================= */

.update-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:70px;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,0) 15%,
        rgba(0,0,0,.20) 45%,
        rgba(0,0,0,.92) 100%
    );
}

/* ========================= */
/* TAG */
/* ========================= */

.update-overlay span{

    color:#d6b36a;

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:18px;
}

/* ========================= */
/* TITULO */
/* ========================= */

.update-overlay h3{

    color:#fff;

    font-size:clamp(2.5rem,5vw,4.5rem);

    font-weight:700;

    line-height:1.05;

    letter-spacing:2px;

    margin-bottom:22px;
}

/* ========================= */
/* TEXTO */
/* ========================= */

.update-overlay p{

    color:rgba(255,255,255,.82);

    max-width:600px;

    font-size:1rem;

    line-height:1.8;
}

/* ========================= */
/* CONTROLES */
/* ========================= */

.slider-controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-top:28px;
}

/* ========================= */
/* BOTONES */
/* ========================= */

.slider-btn{

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

    background:#111;

    color:white;

    cursor:pointer;

    font-size:1rem;

    transition:
        background .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

.slider-btn:hover{

    background:#2b2b2b;

    transform:scale(1.05);
}

.slider-btn:active{

    transform:scale(.95);
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:992px){

    .updates-slider{

        height:520px;
    }

    .update-overlay{

        padding:45px;
    }

}

@media(max-width:768px){

    .updates-slider{

        height:420px;

        border-radius:18px;
    }

    .update-overlay{

        padding:28px;
    }

    .update-overlay h3{

        font-size:2rem;
    }

    .update-overlay p{

        font-size:.95rem;
    }

    .slider-btn{

        width:48px;
        height:48px;
    }

}

/* ========================= */
/* INDICADORES */
/* ========================= */

.slider-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;
}

.dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.35);

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        width .3s ease;
}

.dot:hover{

    background:rgba(255,255,255,.7);
}

.dot.active{

    width:32px;

    border-radius:999px;

    background:#d6b36a;
}

.updates-header{
    display:none;
}


/* ========================================================= */
/* NAVBAR RESPONSIVE - NORTH LEGACY */
/* ========================================================= */

@media (max-width: 768px) {

    .navbar {

        height: auto;

        min-height: 68px;

        padding:
            10px 18px;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        gap: 8px;

    }


    /* ========================= */
    /* LOGO */
    /* ========================= */

    .navbar .logo {

        display: flex;

        align-items: center;

        flex-shrink: 0;

    }


    .navbar .logo img {

        height: 42px;

        width: auto;

    }


    /* ========================= */
    /* NAV */
    /* ========================= */

    .navbar nav {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 8px;

        padding-top: 8px;

        padding-bottom: 3px;

        border-top:
            1px solid rgba(0,0,0,0.05);

    }


    /* ========================= */
    /* LINKS */
    /* ========================= */

    .navbar nav a {

        margin-left: 0;

        font-size: 0.76rem;

        white-space: nowrap;

    }


    /* ========================= */
    /* CARRITO */
    /* ========================= */

    .navbar .cart-link {

        margin-left: 0;

        font-size: 0.95rem;

        padding-right: 4px;

    }


    .navbar #cartCount {

        top: -7px;

        right: -7px;

        font-size: 9px;

        min-width: 17px;

        height: 17px;

        padding: 2px 5px;

        display: flex;

        align-items: center;

        justify-content: center;

    }

}



/* ========================================================= */
/* CELULARES PEQUEÑOS */
/* ========================================================= */

@media (max-width: 480px) {

    .navbar {

        padding:
            9px 14px;

    }


    .navbar .logo img {

        height: 38px;

    }


    .navbar nav {

        gap: 5px;

    }


    .navbar nav a {

        font-size: 0.69rem;

    }


    .navbar .cart-link {

        font-size: 0.9rem;

    }

}



/* ========================================================= */
/* CELULARES MUY PEQUEÑOS */
/* ========================================================= */

@media (max-width: 360px) {

    .navbar {

        padding:
            8px 10px;

    }


    .navbar nav {

        overflow-x: auto;

        justify-content: flex-start;

        gap: 18px;

        scrollbar-width: none;

    }


    .navbar nav::-webkit-scrollbar {

        display: none;

    }


    .navbar nav a {

        flex-shrink: 0;

    }

}

/* ========================================================= */
/* CARRUSEL RESPONSIVE - NORTH LEGACY */
/* ========================================================= */

@media (max-width: 768px) {

    .updates-section {
        padding:
            20px 14px
            70px;
    }

    .updates-slider {
        width: 100%;

        height: 390px;

        border-radius: 16px;
    }

    .update-card img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;
    }

    .update-overlay {
        padding:
            24px 20px;

        justify-content:
            flex-end;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,0.05) 5%,
                rgba(0,0,0,0.28) 45%,
                rgba(0,0,0,0.94) 100%
            );
    }

    .update-overlay span {
        margin-bottom:
            10px;

        font-size:
            0.68rem;

        letter-spacing:
            3px;
    }

    .update-overlay h3 {
        margin-bottom:
            12px;

        font-size:
            1.75rem;

        line-height:
            1.08;

        letter-spacing:
            0.5px;
    }

    .update-overlay p {
        max-width:
            100%;

        font-size:
            0.84rem;

        line-height:
            1.55;
    }

    .slider-controls {
        margin-top:
            18px;

        gap:
            10px;
    }

    .slider-btn {
        width:
            42px;

        height:
            42px;

        font-size:
            0.85rem;
    }

    .slider-dots {
        gap:
            8px;
    }

    .dot {
        width:
            9px;

        height:
            9px;
    }

    .dot.active {
        width:
            25px;
    }

}


/* ========================================================= */
/* CELULARES PEQUEÑOS */
/* ========================================================= */

@media (max-width: 480px) {

    .updates-section {
        padding:
            14px 10px
            55px;
    }

    .updates-slider {
        height:
            350px;

        border-radius:
            14px;
    }

    .update-overlay {
        padding:
            20px 16px;
    }

    .update-overlay span {
        font-size:
            0.62rem;

        letter-spacing:
            2.5px;

        margin-bottom:
            8px;
    }

    .update-overlay h3 {
        font-size:
            1.45rem;

        margin-bottom:
            10px;
    }

    .update-overlay p {
        font-size:
            0.78rem;

        line-height:
            1.5;

        display:
            -webkit-box;

        -webkit-line-clamp:
            3;

        -webkit-box-orient:
            vertical;

        overflow:
            hidden;
    }

    .slider-controls {
        margin-top:
            14px;
    }

    .slider-btn {
        width:
            38px;

        height:
            38px;
    }

}


/* ========================================================= */
/* CELULARES MUY PEQUEÑOS */
/* ========================================================= */

@media (max-width: 360px) {

    .updates-slider {
        height:
            320px;
    }

    .update-overlay {
        padding:
            18px 14px;
    }

    .update-overlay h3 {
        font-size:
            1.3rem;
    }

    .update-overlay p {
        font-size:
            0.74rem;

        -webkit-line-clamp:
            2;
    }

}

/* ========================================================= */
/* TUTORIAL RESPONSIVE - NORTH LEGACY */
/* ========================================================= */

@media (max-width: 768px) {

    .tutorial-overlay {
        padding: 20px;
    }

    .tutorial-box {
        width: 100%;
        max-width: 520px;

        padding: 30px 24px;

        border-radius: 18px;
    }

    .tutorial-step {
        font-size: 0.7rem;
        letter-spacing: 2.5px;
    }

    .tutorial-box h2 {
        font-size: 1.7rem;
        line-height: 1.15;

        margin-top: 10px;
        margin-bottom: 14px;
    }

    .tutorial-box p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .tutorial-actions {
        margin-top: 26px;

        display: flex;
        gap: 10px;
    }

    .tutorial-skip,
    .tutorial-next {
        flex: 1;

        min-height: 46px;

        padding: 12px 16px;

        font-size: 0.82rem;
    }

}


/* ========================================================= */
/* CELULARES PEQUEÑOS */
/* ========================================================= */

@media (max-width: 480px) {

    .tutorial-overlay {
        padding: 14px;
    }

    .tutorial-box {
        max-width: 100%;

        padding: 26px 18px;

        border-radius: 16px;
    }

    .tutorial-step {
        font-size: 0.64rem;
        letter-spacing: 2px;
    }

    .tutorial-box h2 {
        font-size: 1.45rem;

        margin-bottom: 12px;
    }

    .tutorial-box p {
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .tutorial-actions {
        margin-top: 22px;

        gap: 8px;
    }

    .tutorial-skip,
    .tutorial-next {
        min-height: 44px;

        padding: 11px 12px;

        font-size: 0.76rem;
    }

}


/* ========================================================= */
/* CELULARES MUY PEQUEÑOS */
/* ========================================================= */

@media (max-width: 360px) {

    .tutorial-overlay {
        padding: 10px;
    }

    .tutorial-box {
        padding: 22px 15px;
    }

    .tutorial-box h2 {
        font-size: 1.3rem;
    }

    .tutorial-box p {
        font-size: 0.78rem;
    }

    .tutorial-actions {
        flex-direction: column-reverse;
    }

    .tutorial-skip,
    .tutorial-next {
        width: 100%;
    }

}