/*se aplica la tecnica mobile first*/
@font-face {
    font-family: "parrafos";
    src: url("../font/questrial_regular.ttf");
}

@font-face {
    font-family: "titulosh1";
    src: url("../font/monotype_corsiva.ttf");
}

@font-face {
    font-family: "titulosh2,h3";
    src: url("../font/cocon_regular_font.otf");
}

:root {
    --cabecera-alto: 3.5rem;
    /* ========= COLORES QUE SE USARAN EN LA PÁGINA =========== */
    --color-principal: #6e9500;
    --color-alternativo: #a0b566;
    --color-tarjetas: #c0dbc3;
    --color-titulo: rgb(31, 82, 24);
    --color-texto: #5c5c5b;

    /* ========= FUENTE Y TIPOGRAFIAS QUE SE USARAN EN LA PÁGINA =========== */
    /*.5rem = 8px |  1rem = 16px */
    --fuente-cuerpo: "parrafos";
    --fuente-titulos: "titulosh1";
    --fuente-titulos-h2-h3: "titulosh2,h3";
    --tamaño-grandote: 2.25rem;
    --tamaño-h1: 1.75rem;
    --tamaño-h2: 1.6rem;
    --tamaño-h3: 1.2rem;
    --tamaño-parrafo: 1rem;
    --fuente-chica: .80rem;
    --fuente-pequeña: .75rem;

    /* ========= Z-INDEX =========== */
    --z-tooltips: 10;
    --z-fixed: 100;
}

/* ===== QUIERE DECIR QUE LO QUE VAYA ADENTRO DE ESTA MEDIAQUERIE SE APLICARA A PARTIR DE LA MEDIDA DE LA PANTALLA 968PX EN ADELANTE */
@media screen and (min-width: 968px) {
    :root {
        --tamaño-grandote: 3.5rem;
        --tamaño-h1: 2.25rem;
        --tamaño-h2: 1.5rem;
        --tamaño-h3: 1.25rem;
        --tamaño-parrafo: 1rem;
        --fuente-chica: .92rem;
        --fuente-pequeña: .75rem;
    }
}

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

html {
    scroll-behavior: smooth;
    font-family: var(--fuente-cuerpo);
    font-size: var(--tamaño-parrafo);
    color: var(--color-texto);
}

h1 {
    color: var(--color-titulo);
    font-weight: 800;
    font-family: var(--fuente-titulos);
}

h2,
h3 {
    font-family: var(--fuente-titulos-h2-h3);
}

h1,
h2,
h3,
p {
    line-height: 140%;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--color-texto);
    font-family: var(--fuente-cuerpo);
}

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

.Enstock {
    color: var(--color-principal);
    font-weight: 900;
    font-size: var(--tamaño-h3);
}

.SinStock {
    color: #cc0000;
    font-weight: 900;
    font-size: var(--tamaño-h3);
}

/*================== CLASES REUSABLES ========================*/
.contenedor {
    max-width: 1024px;
    margin: 0 1rem 0 1rem;
}

.grilla {
    display: grid;
    gap: 1.5rem;
}

.seccion {
    padding: 4.5rem 0 2rem 0;
}

.boton {
    display: inline-block;
    background-color: var(--color-alternativo);
    color: white;
    padding: 1rem 1.75rem;
    border-radius: .25rem;
    font-size: var(--tamaño-parrafo);
    font-family: var(--fuente-cuerpo);
    text-transform: uppercase;
    border: none;
    outline: none;
    cursor: pointer;
}

.titulo-seccion {
    position: relative;
    font-size: var(--tamaño-h1);
    font-family: var(--fuente-titulos);
    padding-left: 1.25rem;
    margin-bottom: 2.5rem;
}

.titulo-seccion::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 3px;
    height: 20px;
    background-color: var(--color-principal);
}

/***************** CARGA ******************/
.carga {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: grid;
    place-items: center;
    z-index: 2000;
    transition: opacity .4s ease;
}

.carga.ocultar {
    opacity: 0;
    pointer-events: none;
}

.carga_contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    /* Sube un poco el bloque (logo más arriba) */
    margin-top: -12vh;
}

.carga_logo {
    width: 160px;
    height: auto;
}

.carga_gif {
    width: 120px;
    height: auto;
}

@media screen and (min-width: 768px) {
    .carga_logo {
        width: 200px;
    }

    .carga_contenido {
        margin-top: -15vh;
    }
}

.carga_texto {
    font-family: var(--fuente-cuerpo);
    color: var(--color-titulo);
    font-size: 1rem;
    font-weight: 700;
}

body.carga_activa {
    overflow: hidden;
}

/*===================== CABECERA ========================*/
.cabecera {
    width: 100%;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
}

.nav {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav_toggle {
    color: var(--color-principal);
}

.nav_logo {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: 0;
}

.nav_logo-img {
    width: 3.75rem;
}

.nav_toggle {
    display: inline-flex;
    font-size: 1.6rem;
    cursor: pointer;
    margin-right: .5rem;
}
.scroll_cabecera {
    background-color: white;
    box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
}

.bx-cart{
    color: var(--color-principal);
    font-size: 1.6rem;
    cursor: pointer;
}

/* ===== MENÚ MÓVIL (hasta 767px) ===== */
@media screen and (max-width: 767px) {
    .nav_menu {
        position: fixed;
        background-color: black;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        transition: .3s;
        z-index: 300; /* por encima del hamburguesa y el carrito */
    }

    /* Clase que agrega JS al abrir el menú */
    .nav_menu.mostrar_menu {
        right: 0;
    }

    /* Con el menú abierto, se ocultan hamburguesa y carrito (no se superponen a la X) */
    .nav_menu.mostrar_menu ~ .nav_toggle,
    .nav_menu.mostrar_menu ~ .nav_carrito {
        visibility: hidden;
        pointer-events: none;
    }

    .nav_toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        cursor: pointer;
        margin-right: .5rem;
        color: var(--color-principal);
        z-index: 210;
        position: relative;
        padding: .35rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .cerra_nav {
        font-size: 2.25rem;
        color: white;
        position: absolute;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
        z-index: 310;
        padding: .25rem;
    }

    /* Hola / Admin|Mis pedidos / Salir: más chicos y centrados en celular */
    .nav_social {
        justify-content: center;
        align-items: center;
        column-gap: .85rem;
        margin-top: 1.75rem;
        width: 100%;
    }

    .nav_social .nav_vinculo {
        font-size: .78rem;
        text-transform: none;
    }
}

.nav_lista {
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: 2rem;
    padding-top: 6rem;
}

.nav_vinculo {
    text-transform: uppercase;
    color: var(--color-alternativo);
    font-size: var(--tamaño-h2);
    transition: .3s;
}

.nav_vinculo:hover {
    color: var(--color-principal);
}

.cerra_nav {
    font-size: 2rem;
    color: white;
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
}

.nav_social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
    row-gap: .4rem;
    margin-top: 1.5rem;
    padding: 0 1rem;
    list-style: none;
}

.nav_social .nav_item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav_social .nav_vinculo {
    font-size: 1.2rem;
    text-transform: none;
    line-height: 1.2;
    text-align: center;
}

.nav_social li a i {
    font-size: var(--tamaño-h2);
    color: var(--color-alternativo);
}

.nav_toggle {
    display: inline-flex;
    font-size: 1.6rem;
    cursor: pointer;
    margin-right: .5rem;
}

/* Ícono carrito (siempre visible, sin login) */
.nav_carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-principal);
    padding: .25rem;
}

.nav_carrito_cantidad {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background-color: #e74c3c;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

/* Cambio de background */
.scroll_cabecera {
    background-color: white;
    box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
}

/*===================== BIENVENIDA ========================*/
.bienvenida {
    gap: 0;
}

.bienvenida_contenedor {
    padding: 7rem 0 2.5rem;
}

.bienvenida_contenido {
    position: relative;
}

.bienvenida_titulo {
    color: var(--color-principal);
    font-size: 3rem;
    font-family: var(--fuente-titulos);
    line-height: 80%;
}

.bienvenida_slogan {
    margin-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: solid thin #5c5c5b;
}


/*===================== SERVICIOS ========================*/
.servicio_titulo {
    font-size: var(--tamaño-h2);
}

.servicios_categoria {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 200px;
    justify-content: center;
    row-gap: 2.5rem;
}

.servicios_img {
    width: 40%;
    margin-bottom: 1rem;
    transition: .4s;
}

.servicios_grupo {
    text-align: center;
}

.titulo_servicios {
    font-size: var(--tamaño-h3);
    margin-bottom: .25rem;
}

.servicios_grupo:hover .servicios_img {
    transform: translateY(-.25rem);
}

.servicios_descripcion {
    font-size: var(--fuente-chica);
    color: var(--color-texto);
}

/*===================== PRODUCTOS HOME ========================*/
.productos_titulo {
    margin: 1rem 0;
    font-size: var(--tamaño-h2);
}

/* Filtro categorías: rectángulos compactos (no barra a todo el ancho) */
.productos_filtro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: .75rem;
    margin: 0 auto 2.5rem;
    padding: 0;
    list-style: none;
    width: max-content;
    max-width: 100%;
    background: none;
    border: none;
    box-shadow: none;
}

.producto_item {
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    border: 1px solid rgba(160, 181, 102, 0.45);
    border-radius: .75rem;
    padding: .7rem 1.1rem;
    min-width: 7.5rem;
    max-width: 11rem;
    flex: 0 0 auto;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.producto_item a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.producto_item:hover,
.producto_item.filtro_activo {
    background-color: var(--color-tarjetas);
    box-shadow: 0 4px 12px rgba(110, 149, 0, 0.18);
    transform: translateY(-2px);
}

.producto_item.filtro_activo .producto_titulo {
    color: var(--color-principal);
    font-weight: 700;
}

/* Separadores viejos desactivados */
.producto_linea::before,
.producto_linea2::before,
.producto_item:not(:last-child)::after {
    display: none;
    content: none;
}

.producto_titulo {
    font-size: 1rem;
    color: var(--color-texto);
    margin-bottom: .3rem;
    font-family: "parrafos";
}

.producto_stock {
    font-size: var(--fuente-pequeña);
    color: #666;
}

@media screen and (min-width: 768px) {
    .productos_filtro {
        flex-wrap: nowrap;
        gap: .85rem;
        margin-bottom: 3rem;
    }

    .producto_item {
        padding: .75rem 1.25rem;
    }
}

.productos_contenidos {
    grid-template-columns: 250px;
    justify-content: center;
}

.productos_tarjeta {
    border: solid thin var(--color-tarjetas);
    border-radius: .5rem;
    box-shadow: 4px 3px 10px rgba(0, 0, 0, 0.1);
    margin: 0 0 2rem 0;
    position: relative;
}

.etiqueta-oferta {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #e74c3c;
    /* Rojo */
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
}

.producto_forma {
    background-color: var(--color-tarjetas);
    border-radius: .5rem .5rem 0 0;
    text-align: center;
    padding: .25rem;
}

.producto_forma picture img {
    width: 200px;
    transition: .4s;
}

.producto_dato {
    padding: 1rem 0 1.25rem 1rem;
    position: relative;
}

.producto_precio {
    font-size: var(--tamaño-parrafo);
    font-weight: 900;
}

.producto_nombre {
    font-size: 1rem;
    padding: 0 0 .5rem;
    font-family: "parrafos";
}

.producto_boton {
    border-radius: 50%;
    padding: .6rem;
    display: inline-flex;
    font-size: 1.25rem;
    position: absolute;
    right: 1rem;
    top: -1.25rem;
    background-color: var(--color-tarjetas);
    box-shadow: 4px 3px 10px rgb(192, 190, 190);
}

.productos_tarjeta:hover .producto_forma picture img {
    transform: translateY(-.25rem);
}

.VerProductos {
    text-align: center;
    color: white;
    width: 80%;
    margin: 0 auto;
}


/*===================== PRODUCTOS HTML ========================*/
.producto_contenido{
    grid-template-columns: 250px;
    justify-content: center;
}
.productos_tarjeta{
    border: solid thin var(--color-tarjetas);
    border-radius: .5rem;
    box-shadow: 4px 3px 10px rgb(192, 190, 190);
    margin: 0 0 2rem 0;
    position: relative;
}
.producto_forma {
    background-color: var(--color-tarjetas);
    border-radius: .5rem .5rem 0 0;
    text-align: center;
    padding: .25rem;
}

.producto_img{
    width: 200px;
    transition: .4s;
}
.producto_forma{
    background-color:var(--color-tarjetas) ;
    border-radius: .5rem .5rem 0 0;
    text-align: center;
    padding: .25rem 0;
}
.producto_dato{
    padding: 1rem 0 1.25rem 1rem;
    position: relative;
}
.producto_precio{
    font-size: var(--tamaño-parrafo);
    font-weight: 900;
    color: #2e79fa;
}
.producto_nombre{
    font-size: var(--tamaño-h3);
    padding: 0 0.5rem;
}
.producto_boton{
    border-radius: 50%;
    padding: .6rem;
    display: inline-flex;
    font-size: 1.25rem;
    position: absolute;
    right: 1rem;
    top: -1.25rem;
    background-color: var(--color-tarjetas);
    box-shadow: 4px 3px 10px rgb(192, 190, 190);
}
.productos_tarjeta:hover .producto_img{
    transform:translateY(-.25rem) ;
}

/*===================== OFERTAS ========================*/
.oferta {
    padding-top: 1rem;
    background-color: var(--color-tarjetas);
}

.titulo_oferta {
    font-size: var(--tamaño-h2);
    margin-bottom: 1.5rem;
}

.oferta_contenido {
    row-gap: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-texto);
}

.segundo {
    padding-top: 2rem;
    border-bottom: none;
}

.oferta_imagenes {
    position: relative;
    display: flex;
    justify-content: center;
}

.oferta_img-grande,
.oferta_img-chico {
    border-radius: .5rem;
}

.oferta_img-grande {
    width: 250px;
}

.oferta_img-chico {
    width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: translateX(-3rem);
}

.oferta_titulo,
.oferta_precio {
    font-size: var(--tamaño-h2);
}

.oferta_titulo {
    margin-bottom: .75rem;
    font-family: "parrafos";
    font-size: var(--tamaño-h3);
}

.oferta_precio {
    margin-bottom: .25rem;
    font-size: var(--tamaño-parrafo);
    color: var(--color-principal);
    font-weight: 800;
}

.oferta_especial {
    display: block;
    font-size: var(--fuente-pequeña);
    margin-bottom: .75rem;
    color: rgb(246, 103, 103);
    font-weight: 700;
}

.oferta_descripcion {
    margin-bottom: 2.5rem;
}

.oferta_botones {
    display: flex;
    align-items: center;
    column-gap: 2rem;
}

.oferta_boton {
    font-size: var(--fuente-cuerpo);
    text-transform: uppercase;
    color: var(--color-titulo);
    display: inline-flex;
    align-items: center;
    column-gap: .75rem;
}

.oferta_boton i {
    font-size: 1.25rem;
    transition: .4s;
}

.oferta_boton:hover i {
    transform: translateX(.25rem);
}


/*===================== LOGOS ========================*/
.logos_contenedor {
    display: flex;
    flex-direction: column;
}

.logo_titulo {
    font-family: var(--fuente-titulos-h2-h3);
    font-size: var(--tamaño-h2);
}

.grilla_logo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    border-top: 1 px solid var(--color-tarjetas);
    padding-top: 2.5rem;
}

.logo-img {
    width: 100px;
    mix-blend-mode: luminosity;
    opacity: .4;
    transition: .4s;
}

.logo-img:hover {
    opacity: .8;
}

/*===================== BLOG ========================*/
.blog_contenedor {
    padding-bottom: 2rem;
}

.blog_titulo {
    font-size: var(--tamaño-h2);
    margin-bottom: 1.5rem;
}

.blog_contenido {
    row-gap: 3rem;
}

.blog_imagen {
    position: relative;
    margin-bottom: 1.5rem;
}

.blog_img {
    border-radius: .5rem;
}

.blog_boton {
    display: inline-flex;
    background-color: white;
    padding: 1rem;
    border-radius: .5rem 0 .5rem 0;
    font-size: 2rem;
    color: var(--color-titulo);
    position: absolute;
    right: 0;
    bottom: 0;
}

.blog_boton i {
    transform: rotate(-30deg);
    transition: .4s;
}

.blog_boton:hover i {
    transform: rotate(-30deg) translateX(.25rem);
}

.blog_titulo {
    font-size: var(--tamaño-h3);
    font-family: var(--fuente-titulos-h2-h3);
    margin-bottom: 1.5rem;
}

.blog_descripcion {
    margin-bottom: 2rem;
}

.blog_botones {
    display: flex;
    align-items: center;
    column-gap: 2rem;
}

.blog_boton {
    font-size: var(--fuente-cuerpo);
    text-transform: uppercase;
    color: var(--color-titulo);
    display: inline-flex;
    align-items: center;
    column-gap: .75rem;
}

.blog_boton i {
    transform: rotate(-30deg);
    transition: .4s;
}

.blog_titulo {
    font-size: var(--tamaño-h3);
    margin-bottom: .75rem;
}

.blog_descripcion {
    margin-bottom: 1.5rem;
}

.blog_pie,
.blog_reaccion {
    display: flex;
    align-items: center;
}

.blog_pie {
    column-gap: 1.5rem;
}

.blog_reaccion {
    column-gap: .25rem;
}

.blog_reaccion i {
    font-size: 1.25rem;
}

.blog_reaccion span {
    font-size: var(--fuente-pequeña);
    font-weight: 800;
}

/*===================== FOOTER ========================*/
.pie {
    background-color: black;
    padding: 0.5rem 0 0.5rem;
}

.pie_titulo {
    font-size: 2rem;
    color: white;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.pie_logo {
    display: none;
}

.pie_contenido {
    row-gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-texto);
}

.pie_descripcion {
    margin-bottom: .75rem;
}

.pie_noticias {
    display: flex;
    column-gap: .5rem;
}

.pie_input {
    border: none;
    background-color: white;
    padding: 1.25rem 1.25rem;
    border-radius: .25rem;
    width: 70%;
    color: var(--color-texto);
}

.pie_boton {
    padding: .75rem;
    font-size: 2rem;
    border-radius: .25rem;
    display: inline-flex;
    background-color: var(--color-principal);
}

.pie_boton i {
    transform: rotate(-30deg);
    transition: .4s;
}

.pie_boton:hover i {
    transform: rotate(-30deg) translate(.25rem);
}

.pie_subtitulo {
    color: white;
    font-size: var(--tamaño-h3);
    margin-bottom: .75rem;
}

.pie_bandera {
    width: 1.3rem;
}

.pie_grupo {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 1.5rem;
}

.pie_social {
    display: flex;
    justify-content: center;
    column-gap: 1.5rem;
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.pie_social li {
    width: 6%;
}

.pie_social-link {
    transition: .4s;
}

.pie_copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: var(--fuente-pequeña);
    margin-bottom: 1rem;
    line-height: 1.35;
}

.pie_copy_logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

/* desplazar arriba */
.desplazarArriba:hover {
    transform: translateY(-.25rem);
    opacity: 1;
}
.desplazar{
    position: fixed;
    right: 1rem;
    bottom: 3%;
    background-color: white;
    box-shadow: 0 4px 12px rgba(49, 51, 53, 0.1);
    display: inline-flex;
    padding: .35rem;
    border-radius: .15rem;
    font-size: 1.25rem;
    color: var(--color-titulo);
    z-index: var(--z-tooltips);
    opacity: .9;
    transition: .4s;
}

.desplazarArriba {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px); /* ACA */
    transition: 0.3s;
}

.mostrar-scroll {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0); /* ACA */
}



/*===================== CONTACTO.HTML ========================*/
.contacto_contenido{
    display: flex;
    flex-direction: column;
}
.contacto_formulario{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contacto_formulario form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.contacto_formulario form label {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    border-radius: 20px;
    width: 70%;
    padding: 0 10px;
    box-shadow: 0 4px 12px var(--color-alternativo);
}
.contacto_formulario form label input,
.contacto_formulario form label textarea,
.contacto_formulario form label select{
    width: 100%;
    padding: 10px;
    font-family: var(--fuente-cuerpo);
    background-color: white;
    border: none;
    outline: none;
    border-radius: 20px;
    color: #333;
}
.contacto_formulario form label textarea {
    min-height: 110px;
    resize: vertical;
}
.contacto_formulario form label i{
    font-size: 1.2rem;
    color: var(--color-principal);
    flex-shrink: 0;
    margin-top: 0;
    align-self: center;
}
.botones_form{
    width: 65%;
    display: flex;
    justify-content: space-evenly;
}
botones_form input {
    background-color: var(--color-alternativo);
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 4px 12px var(--color-alternativo);
}
button[type="reset"]{
    background-color: rgb(187, 183, 183);
}


/* ===================== AUTOR.HTML ======================== */
.autor_contenedor{
    display: flex;
    flex-direction: column;
}
.autor_contenido{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: url(../img/mate.png) center center no-repeat;
    
    background-size: cover;
}
.autor_datos{
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    padding: 2rem;
}
.autor_datos ul li{
    margin: 1rem 0;
}
.autor_datos ul li span{
    color: var(--color-principal);
    font-weight: 800;
}
.autor_datos ul li img{
    width: 70%;
    display: block;
    margin: 0 auto;
}
.autor_foto{
    display: flex;
    align-items: center;
    justify-content: center;
}
.autor_foto img{
    width: 60%;
    box-shadow: 0 8px 16px var(--color-alternativo);
}


/* ===================== ERROR.HTML ======================== */
.error{
    margin: 4rem 2rem;
}
.boton_error{
    margin: 2rem auto;
    display: block;
    width: fit-content;
}















/*===================== PUNTOS DE QUIEBRE ========================*/
@media screen and (max-width: 320px) {
    .nav_toggle {
        display: inline-flex;
        font-size: 1.6rem;
        cursor: pointer;
        margin-right: .5rem;
    }
    .nav_vinculo{
        font-size: var(--tamaño-h3);
    }

    .titulo_seccion {
        font-size: var(--tamaño-h2);
    }

    .contenedor {
        margin: 0 1rem 0 1rem;
    }

    .oferta_img-grande {
        width: 180px;
    }

    .oferta_img-chico {
        transform: translate(-2rem);
        width: 65px;
    }

    .oferta_titulo {
        font-size: var(--tamaño-h3);
    }

    .oferta_precio {
        font-size: var(--tamaño-parrafo);
        font-weight: 900;
    }

    .oferta_botones {
        flex-direction: column;
        row-gap: 1rem;
    }

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

    .producto_nombre {
        font-size: var(--tamaño-h3);
        padding: 0.5rem 1rem;
    }

    .productos_contenidos ul {
        padding: 0 0 .5rem 0;
    }

    .VerProductos {
        width: 60%;
        margin: 0 auto;
    }

    /* contacto */
    .boton {
        padding: 0.4rem 1rem;
        font-size: 13px;
    }
    .contacto_formulario form label input, 
    .contacto_formulario form label textarea, 
    .contacto_formulario form label select {
        padding: 8px;
        font-size: 10px;
    }
    .contacto_formulario form label i {
        font-size: 1rem
    }
    .cta{
        padding: 0.3rem 1rem;
        font-size: 14px;
    }

    /* autor */
    .autor_titulo{
        font-size: var(--tamaño-h2);
    }
    .autor_datos{
        margin-bottom: 1rem;
        padding: 1.5rem;
    }
    .autor_datos ul li{
        font-size: var(--tamaño-parrafo);
        font-size: 12px;
    }
    /* error.html */
    error_titulo{
        font-size: 17px;
    }
}

@media screen and (min-width: 576px) {

    /* menu */
    .nav_vinculo{
        font-size: var(--tamaño-h2);
    }

    /* servicios */
    .servicios_categoria {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3rem;
    }

    /* productos */
    .productos_titulo {
        margin: 0 0 4rem 0;
    }

    .producto_nombre {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--color-principal);
    }

    .productos_contenidos {
        grid-template-columns: none;
        padding-bottom: 3rem;
    }

    .productos_contenidos ul {
        display: grid;
        grid-template-columns: repeat(2, 250px);
        column-gap: 2rem;
    }

    .producto_precio {
        font-size: 20px;
    }

    .VerProductos {
        width: 38%;
    }

    /* Productos html */
    .titulo-seccion{
        margin-left: 35px;
    }
    .producto_contenido {
        grid-template-columns: none;
        padding-bottom: 3rem;
    }
    .producto_contenido ul{
        display: grid;
        grid-template-columns: repeat(2, 250px);
        column-gap: 2rem;
    }

    /* ofertas */
    .oferta_img-grande {
        width: 300px;
    }

    .oferta_img-chico {
        transform: translateX(-4rem);
        width: 25%;
    }

    /* blog */
    .blog_contenido {
        grid-template-columns: 450px;
        justify-content: center;
    }

    /* logos */
    .logo-img:hover {
        opacity: .8;
    }


    /* pie */
    .pie_noticias {
        width: 350px;
    }


    /* contacto */
    .contacto_formulario form label input, 
    .contacto_formulario form label textarea, 
    .contacto_formulario form label select {
        padding: 18px;
    }

     /* autor */
    .autor_datos{
        width: 75%;
        margin: auto;
    }
    .autor_foto img {
        margin-top: 2rem;
    }
}

@media screen and (min-width: 767px) {

    /* cabecera */
    .seccion {
        padding: 7rem 0 2rem;
    }

    .nav {
        height: calc(var(--cabecera-alto) + 1.5rem);
        justify-content: flex-start;
        gap: .5rem;
    }

    /* Logo a la izquierda; menú + carrito pegados a la derecha */
    .nav_logo {
        margin-right: auto;
    }

    .nav_registro{
        position: relative;
        font-size: var(--tamaño-parrafo);
        text-transform: initial;
        color: var(--color-alternativo);
    }

    .nav_toggle,
    .cerra_nav {
        display: none;
    }

    .nav_menu {
        display: flex;
        align-items: center;
        margin-right: .35rem; /* casi al lado del carrito */
    }

    .nav_lista {
        padding-top: 0;
        flex-direction: row;
        column-gap: 1.35rem;
        font-size: 2rem;
        margin-right: 1rem;
    }

    .nav_vinculo {
        position: relative;
        font-size: var(--tamaño-parrafo);
        text-transform: initial;
    }

    .nav_vinculo::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 12px;
        background-color: var(--color-alternativo);
        transform: translateX(.7rem);
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

    .nav_social {
        flex-wrap: nowrap;
        column-gap: .75rem;
        row-gap: 0;
        margin-top: 0;
        padding: 0.8rem 0 0 0;
        align-items: center;
    }

    .nav_social .nav_vinculo {
        font-size: var(--fuente-chica);
        text-transform: none;
    }

    /* En tablet, el bloque Hola / Admin / Salir más compacto */
    .nav_social .nav_vinculo::after {
        height: 10px;
        transform: translateX(.45rem);
    }

    .nav_carrito {
        margin-left: 0;
        margin-top: 0.8rem;
    }

    /* bienvenida */
    .bienvenida {
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        background: linear-gradient(160deg, rgb(83, 84, 85)-4%, rgb(25, 31, 35) 46%);
        position: relative;
    }

    .bienveida_contenido {
        position: initial;
    }

    /* servicios */
    .servicios_categoria {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 3rem;
    }

    /* productos */
    .producto_contenido ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 2rem;
    }

    /* oferta */
    .oferta_contenido {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }

    .oferta {
        padding-top: 4rem;
    }

    .oferta_dato {
        padding-left: 1rem;
    }

    .oferta_contenido {
        padding-bottom: 2rem;
    }

    /* logos */
    .grilla_logo picture {
        display: flex;
        justify-content: center;
    }

    .logo-img {
        opacity: .8;
        margin: auto;
    }

    /* pie */
    .direcciones {
        display: flex;
        justify-content: space-between;
    }

    .pie_titulo {
        display: inline-block;
    }

    .pie_logo {
        display: inline-flex;
        width: 8%;
        padding: 1rem 0 0 1rem;
    }

    /* autor */
    .autor_titulo {
        font-size: 1.9rem;
    }

    /* productos html */
    .titulo-seccion {
        margin-left: 0;
    }
}

@media screen and (min-width: 1040px) {
    .contenedor {
        margin: 0 auto;
    }
    .error_titulo{
        display: block;
        text-align: center;
        margin-top: 3rem;
    }

    /* bienvenida */
    .bienvenida_contenedor {
        display: flex;
        align-items: center;
    }

    .bienveida_contenido {
        max-width: 400px;
        margin: 0 7rem 0;
    }

    /* serevicios  */
    .titulo-seccion {
        padding-right: 15rem;
        padding-left: 1.75rem;
        font-size: var(--tamaño-h1);
    }

    .titulo-seccion::before {
        height: 28px;
        width: 4px;
        top: 12px;
        left: 10px;
    }
    .servicios_caja{
        display: grid;
        grid-template-columns: repeat(1, 3fr);
    }
    .servicios_categoria{
        grid-template-columns: repeat(3, 300px);
        column-gap: 4rem;
    }
    .servicios_grupo{
        text-align: center;
    }
    .servicios_img{
        width: 80px;
        margin: 0 22% 1.5rem;
    }

    /* productos */
    .productos_contenidos ul{
        grid-template-columns: repeat(3, 250px);
        justify-content: initial;
        column-gap: 5rem;
    }
    .producto_nombre {
        font-size: 1.2rem;
    }


    .productos_tarjeta{
        border-radius: 1rem;
    }
    .producto_img{
        width: 200px;
        border-radius: 1rem 1rem 0 0;
    }
    .producto_dato{
        padding: 1rem 0 1.5rem 1.5rem;
    }
    .producto_nombre{
        font-size: var(--tamaño-h3);
        padding-right: 0.5rem;
    }
    .producto_boton{
        font-size: 1.5rem;
        padding: .75rem;
        right: 1.5rem;
        top: -1.5rem;
    }

    /* OFERTA */
    .oferta_contenido{
        justify-content: space-evenly;
    }
    .oferta_imagenes{
        margin-top: 2rem;
    }
    .oferta_img-grande{
        width: 430px;
    }
    .oferta_img-chico{
        width: 170px;
        transform: translateX(-7rem);
    }
    .oferta_titulo{
        margin-bottom: 1.5rem;
        font-size: var(--tamaño-h3);
        font-weight: 900;
    }
    .oferta_precio{
        font-size: 1.3rem;
        font-weight: 900;
    }
    .oferta_especial{
        margin-bottom: 1rem;
        font-size: var(--tamaño-parrafo);
    }

    /* LOGOS */
    .grilla_logo{
        grid-template-columns: repeat(5, 1fr);
        padding: 3.5rem 0;
    }
    .logo-img{
        width: 110px;
    }
    .logo-img:hover {
        opacity: .4;
    }

    /* BLOG */
    .blog_contenedor{
        padding-bottom: 5rem;
    }
    .blog_contenido{
        grid-template-columns: repeat(2, 450px);
        column-gap: 5rem;
        padding-top: 2rem;
    }
    
    /* PIE */
    .pie_contenido{
        grid-template-columns: repeat(2, max-content);
        column-gap: 2rem;
        padding-bottom: 5.5rem;
    }
    .direcciones{
        display: grid;
        grid-template-columns: repeat(3, max-content);
        column-gap: 4rem;
    }
    .pie_social{
        justify-content: flex-start;
    }
    .pie_social li{
        width: 3%;
        column-gap: 2rem;
    }
    .pie_grupo{
        flex-direction: row;
        margin-top: 3rem;
    }
    .pie_copy{
        width: 100%;
        justify-content: flex-end;
        text-align: end;
    }

    .pie_copy_logo {
        width: 2.25rem;
        height: 2.25rem;
    }
    .pie_titulo{
        font-size: var(--tamaño-h2);
    }
    .pie_logo{
        width: 5%;
        padding: 0;
    }
    .direcciones {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        column-gap: 3rem;
    }
    /* desplazar */
    .desplazarArriba{
        right: 3rem;
    }

    /* autor */
    .autor_foto img {
        width: 250px;
    }
    /* error.html */
    .texto{
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
        margin-top: -118px;
    }
    .img_error{
        display: block;
        margin: 0 auto;
    }

    /*Form*/
    .contacto_formulario form label {
        max-width: 500px;
    }
}

@media screen and (min-width: 1200px) {
    /* HEADER */
    .nav_logo-img{
        width: 5rem;
        margin-top: 0.5rem;
    }

    /* BIENVENIDA */
    .bienvenida_contenedor{
        padding-top: 0;
    }
    .bienvenida_titulo{
        font-size: 5rem;
    }

    /* PRODUCTOS */
    .productos_contenidos{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .producto_contenido ul {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 2rem;
    }

    /* autor */
    .autor_contenedor{
        border-radius: 20px;
        box-shadow: 0 4px 12px var(--color-alternativo);
        padding: 2rem;
    }
    .autor_datos{
        border-radius: none;
        box-shadow: none;
    }
    .autor_datos ul{
        text-align: center;
    }
    .autor_datos ul li img {
        width: 30%;
    }
    .autor_foto img{
        width: 250px;
    }

    /* contacto */
    .mensaje{
        height: 150px!important;
    }
    /* El ícono del textarea queda centrado (sin margin negativo) */
    .contacto_formulario form label:has(textarea) {
        align-items: center;
    }
    .contacto_formulario form label:has(textarea) i {
        margin-top: 0;
        align-self: center;
    }

    /* detalle producto */
    .vistaproducto.seccion,
    .vistaproducto {
        padding-top: calc(var(--cabecera-alto) + 4.5rem);
        padding-bottom: 4rem;
    }

    .vistaproducto_imagen{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .vistaproducto_contenido {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 2.5rem;
    }

    .vistaproducto_img-grande {
        max-width: 420px;
    }
}

/*===================== TARJETA CLICKEABLE ========================*/
.producto_enlace {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.productos_tarjeta {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.productos_tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.15);
}

.producto_enlace .producto_boton {
    pointer-events: none;
}

/*===================== VISTA DETALLE PRODUCTO ========================*/
.vistaproducto.seccion,
.vistaproducto {
    /* Baja el contenido para que no choque con el header fijo */
    padding-top: calc(var(--cabecera-alto) + 3.5rem);
    padding-bottom: 3rem;
}

.vistaproducto_contenido {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    background-color: var(--color-tarjetas);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 4px 3px 12px rgba(0, 0, 0, 0.1);
}

.vistaproducto_imagen {
    position: relative;
    text-align: center;
    background-color: #fff;
    border-radius: .75rem;
    padding: 1rem;
}

.vistaproducto_img-grande {
    width: 100%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
}

.vistaproducto_categoria {
    display: inline-block;
    font-size: var(--fuente-pequeña);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-alternativo);
    margin-bottom: .5rem;
    font-weight: 700;
}

.vistaproducto_nombre {
    font-size: var(--tamaño-h2);
    font-family: var(--fuente-titulos);
    margin-bottom: 1rem;
}

.vistaproducto_precio {
    font-size: 1.75rem;
    font-weight: 900;
    color: #2e79fa;
    margin-bottom: 1rem;
}

.vistaproducto_descripcion {
    font-family: "parrafos";
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.vistaproducto_stock {
    margin-bottom: 1.5rem;
}

.stock_ok {
    color: #1e8449;
    font-weight: 700;
}

.stock_no {
    color: #c0392b;
    font-weight: 700;
}

/* Pie del bloque producto: botón carrito centrado */
.vistaproducto_carrito {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1.25rem;
    margin-top: .5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.boton_carrito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
}

.boton_carrito i {
    font-size: 1.25rem;
}

/* Navegación fuera de la grilla del producto */
.vistaproducto_acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.75rem;
    padding-top: .5rem;
}

.boton_secundario {
    background-color: transparent;
    color: var(--color-alternativo);
    border: 2px solid var(--color-alternativo);
}

.vistaproducto_vacio {
    text-align: center;
    padding: 2rem 1rem;
}

.vistaproducto_vacio p {
    margin-bottom: 1.5rem;
}

/*===================== PAGINA CARRITO ========================*/
.pagina_carrito {
    min-height: 100vh;
    background-color: #f4f6f2;
}

.carrito_top {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 50;
}

.carrito_volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.75rem;
    color: var(--color-principal);
    border-radius: 50%;
    cursor: pointer;
}

.carrito_volver:hover {
    background-color: var(--color-tarjetas);
}

.carrito_marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
}

.carrito_logo {
    width: 3.5rem;
    height: auto;
}

.carrito_titulo {
    font-size: var(--tamaño-h3);
    font-family: var(--fuente-titulos-h2-h3);
    color: var(--color-titulo);
    font-weight: 700;
    line-height: 1.2;
}

.carrito_top_espacio {
    width: 2.5rem;
    height: 2.5rem;
}

.carrito_main {
    padding: 1.5rem 1rem 3rem;
}

.carrito_lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.carrito_item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: .75rem;
    align-items: center;
    background-color: #fff;
    border-radius: .75rem;
    padding: .85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.carrito_item_img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background-color: var(--color-tarjetas);
    border-radius: .5rem;
}

.carrito_item_nombre {
    font-size: 1rem;
    margin-bottom: .25rem;
    color: var(--color-titulo);
}

.carrito_item_precio {
    font-weight: 700;
    color: #2e79fa;
    margin-bottom: .5rem;
}

.carrito_cantidad {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.carrito_btn_menos,
.carrito_btn_mas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid var(--color-alternativo);
    background-color: #fff;
    border-radius: .35rem;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    color: var(--color-principal);
    box-sizing: border-box;
}

.carrito_input_cant {
    width: 2.25rem;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: .35rem;
    padding: .2rem;
    font-size: .95rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

.carrito_input_cant::-webkit-outer-spin-button,
.carrito_input_cant::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.carrito_btn_quitar {
    border: none;
    background: transparent;
    color: #c0392b;
    font-size: 1.35rem;
    cursor: pointer;
    padding: .35rem;
}

.carrito_vacio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-texto);
    background-color: #fff;
    border-radius: .75rem;
}

.carrito_resumen {
    background-color: #fff;
    border-radius: .75rem;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.carrito_total_texto {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.carrito_btn_pagar {
    width: 100%;
    max-width: 280px;
    margin-bottom: 1.75rem;
    margin-right: 1rem;
}

.carrito_seguir {
    display: inline-block;
    color: var(--color-principal);
    text-decoration: underline;
    font-size: .95rem;
    margin-top: .5rem;
}

@media screen and (min-width: 768px) {
    .carrito_titulo {
        font-size: var(--tamaño-h2);
    }

    .carrito_logo {
        width: 4.25rem;
    }

    .carrito_main {
        max-width: 720px;
        margin: 0 auto;
    }

    .carrito_item {
        grid-template-columns: 96px 1fr auto;
        padding: 1rem 1.25rem;
    }

    .carrito_item_img {
        width: 96px;
        height: 96px;
    }
}

/*===================== LOGIN / REGISTRO (AUTH) ========================*/
.auth {
    background-color: #f4f6f2;
    padding-bottom: 3rem;
}

/* Páginas sin hero: quedan debajo del header fijo */
.auth.auth_sola,
.productos.productos_sola,
.contacto.contacto_sola {
    padding-top: calc(var(--cabecera-alto) + 3.5rem);
    padding-bottom: 3.5rem;
}

.auth.auth_sola {
    min-height: calc(100vh - var(--cabecera-alto));
}

@media screen and (min-width: 767px) {
    .auth.auth_sola,
    .productos.productos_sola,
    .contacto.contacto_sola {
        padding-top: calc(var(--cabecera-alto) + 4.5rem);
    }
}

.auth_contenedor {
    max-width: 640px;
}

.auth_tarjeta {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1.75rem 1.25rem 2rem;
    box-shadow: 0 8px 24px rgba(110, 149, 0, 0.12);
    border: 1px solid rgba(160, 181, 102, 0.35);
}

.auth_subtitulo {
    font-size: var(--tamaño-h2);
    color: var(--color-titulo);
    margin-bottom: .5rem;
    text-align: center;
}

.auth_texto {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--color-texto);
}

.auth_error {
    background-color: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6cb;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Campos con error en login/registro */
.auth_formulario form label.auth_campo_error,
.auth_formulario form .auth_campo_password.auth_campo_error {
    box-shadow: 0 0 0 2px #e74c3c, 0 4px 12px rgba(231, 76, 60, 0.28);
}

.auth_formulario form label.auth_campo_error i,
.auth_formulario form .auth_campo_password.auth_campo_error i {
    color: #c0392b;
}

#form-registro,
#form-login {
    scroll-margin-top: 5.5rem;
}

.auth_ok {
    background-color: #e8f8ef;
    color: #1e8449;
    border: 1px solid #a9dfbf;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.auth_formulario {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth_formulario form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.auth_formulario form label {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    max-width: 420px;
    margin-bottom: .85rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(160, 181, 102, 0.45);
}

.auth_formulario form label i {
    font-size: 1.25rem;
    color: var(--color-principal);
    flex-shrink: 0;
}

.auth_formulario form label input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: .7rem .25rem;
    font-family: var(--fuente-cuerpo);
    color: #333;
    font-size: 1rem;
}

/* Misma cápsula que los label, pero sin <button> dentro de <label> (rompe en Firefox) */
.auth_formulario form .auth_campo_password {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    max-width: 420px;
    margin-bottom: .85rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(160, 181, 102, 0.45);
}

.auth_campo_password > i {
    font-size: 1.25rem;
    color: var(--color-principal);
    flex-shrink: 0;
}

.auth_campo_password input[type="password"],
.auth_campo_password input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: .7rem .25rem;
    font-family: var(--fuente-cuerpo);
    color: #333;
    font-size: 1rem;
}

/* Oculta el ojito nativo de algunos navegadores (incluye Firefox experimental) */
.auth_campo_password input[type="password"]::-ms-reveal,
.auth_campo_password input[type="password"]::-ms-clear,
.auth_campo_password input[type="password"]::-moz-reveal {
    display: none;
}

.auth_toggle_password {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--color-principal);
    cursor: pointer;
    padding: .35rem;
    margin: 0;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.35rem;
    line-height: 1;
    border-radius: 50%;
    user-select: none;
    -moz-user-select: none;
    position: relative;
    z-index: 2;
}

.auth_toggle_password:hover,
.auth_toggle_password:focus {
    color: var(--color-titulo);
    outline: none;
}

.auth_toggle_password i {
    font-size: 1.35rem;
    color: inherit;
    pointer-events: none;
}

.auth_formulario .botones_form {
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.auth_formulario .botones_form .boton {
    min-width: 130px;
}

.auth_pie {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--color-texto);
}

.auth_pie a {
    color: var(--color-principal);
    font-weight: 700;
    text-decoration: underline;
}

@media screen and (min-width: 768px) {
    .auth_tarjeta {
        padding: 2.25rem 2.5rem 2.5rem;
    }

    .auth_formulario form label,
    .auth_formulario form .auth_campo_password {
        max-width: 460px;
    }

    .auth_formulario form #bloque_domicilio,
    .auth_formulario form #bloque_punto,
    .auth_formulario form .envio_opciones {
        max-width: 460px;
    }
}

/* Botones del panel admin */
.admin_panel_botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

/* Celular y tablet: más chicos y apilados en vertical */
@media screen and (max-width: 1024px) {
    .admin_panel_botones {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
        max-width: 16rem;
        margin-left: auto;
        margin-right: auto;
    }

    .admin_panel_botones .boton {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: .55rem 1rem;
        font-size: .75rem;
        line-height: 1.2;
    }
}

/* Tabla admin */
.admin_tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.admin_tabla th,
.admin_tabla td {
    border: 1px solid #ddd;
    padding: 0.6rem 0.5rem;
    text-align: left;
    vertical-align: middle;
}

.admin_tabla th {
    background-color: var(--color-tarjetas);
    color: var(--color-titulo);
}

.admin_tabla tr:nth-child(even) {
    background-color: #fafafa;
}

.auth_formulario form label select,
.auth_formulario form label textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: .7rem .25rem;
    font-family: var(--fuente-cuerpo);
    color: #333;
    font-size: 1rem;
    resize: vertical;
}

.auth_label_textarea {
    border-radius: 1rem !important;
    align-items: flex-start !important;
}

.auth_label_textarea i {
    margin-top: .7rem;
}

/* Acciones admin: Ver | Editar | Eliminar (mismo estilo) */
.admin_acciones_celda {
    min-width: 9.5rem;
}

.admin_acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
}

.admin_accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: underline;
    cursor: pointer;
    color: var(--color-principal);
}

.admin_accion_ver,
.admin_accion_editar {
    color: var(--color-principal);
}

.admin_accion_eliminar,
.admin_btn_eliminar {
    color: #c0392b;
}

.admin_accion:hover {
    opacity: .85;
}

@media screen and (max-width: 767px) {
    .admin_tabla {
        font-size: .7rem;
    }

    .admin_tabla th,
    .admin_tabla td {
        padding: .45rem .35rem;
    }

    .admin_acciones_celda {
        min-width: 7rem;
    }

    .admin_acciones {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }

    .admin_accion {
        font-size: .85rem;
    }
}

.admin_modal[hidden] {
    display: none !important;
}

.admin_modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.admin_modal_fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.admin_modal_caja {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.admin_modal_caja h3 {
    margin-bottom: .75rem;
    color: var(--color-titulo);
}

.admin_modal_ayuda {
    font-size: .9rem;
    color: #666;
    margin: .75rem 0 1.25rem;
}

.admin_modal_acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

body.admin_modal_abierto {
    overflow: hidden;
}


.filtro_categorias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .75rem;
    margin: 0 auto 1.5rem;
    max-width: 900px;
}

.filtro_cat {
    display: inline-block;
    padding: .4rem .9rem;
    border-radius: 999px;
    background-color: #fff;
    color: var(--color-principal);
    border: 1px solid var(--color-alternativo);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}

.filtro_cat:hover,
.filtro_cat_activa {
    background-color: var(--color-principal);
    color: #fff;
    border-color: var(--color-principal);
}

/* ===== Flujo demo Mercado Pago ===== */
.mp_demo {
    padding: 2rem 1rem 3rem;
}

.mp_demo_caja {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem 2rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.mp_demo_marca {
    font-weight: 700;
    color: #009ee3;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

.mp_demo_marca span {
    color: #888;
    font-weight: 500;
    font-size: 0.85rem;
}

.mp_demo_pasos {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.mp_demo_paso {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: #e8e8e8;
    color: #666;
}

.mp_demo_paso_activo {
    background: #009ee3;
    color: #fff;
}

.mp_demo_paso_hecho {
    background: #00a650;
    color: #fff;
}

.mp_demo_titulo {
    margin: 0 0 0.75rem;
    color: var(--color-titulo);
    font-size: 1.45rem;
}

.mp_demo_texto {
    color: var(--color-texto);
    margin: 0 0 1.25rem;
    line-height: 1.45;
}

.mp_demo_resumen {
    background: #f4fafd;
    border: 1px solid #cce8f5;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
}

.mp_demo_resumen p {
    margin: 0.25rem 0;
}

.mp_demo_resumen_ok {
    background: #f0faf3;
    border-color: #b7e0c4;
}

.mp_demo_falso_form {
    text-align: left;
    margin: 0 auto 1.25rem;
    max-width: 320px;
}

.mp_demo_falso_campo {
    background: #f7f7f7;
    border-radius: 999px;
    padding: 0.65rem 1rem;
    margin: 0 0 0.55rem;
    color: #555;
}

.mp_demo_metodos {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.mp_demo_metodo {
    display: block;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #d0e8f5;
    background: #f8fcff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mp_demo_metodo:hover {
    border-color: #009ee3;
    box-shadow: 0 4px 14px rgba(0, 158, 227, 0.15);
}

.mp_demo_metodo strong {
    display: block;
    color: #009ee3;
    margin-bottom: 0.2rem;
}

.mp_demo_metodo span {
    font-size: 0.9rem;
    color: #666;
}

.mp_demo_btn {
    display: inline-block;
    margin-bottom: 0.85rem;
    background: #009ee3;
    border-color: #009ee3;
}

.mp_demo_btn:hover {
    background: #0088c6;
    border-color: #0088c6;
}

.mp_demo_volver {
    display: block;
    color: var(--color-principal);
    font-size: 0.95rem;
}

.mp_exito_banner {
    background: linear-gradient(135deg, #e8f8ee, #f0faf3);
    border: 1px solid #b7e0c4;
    border-radius: 0.85rem;
    padding: 1.25rem 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.mp_exito_titulo {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    color: #1f7a3f;
    font-weight: 700;
}

.mp_exito_mensaje {
    margin: 0;
    color: #2d5a3d;
    line-height: 1.4;
}

@media screen and (max-width: 600px) {
    .mp_demo_caja {
        padding: 1.35rem 1rem 1.75rem;
    }

    .mp_demo_titulo {
        font-size: 1.25rem;
    }
}

/* ===== Opciones de envío (checkout) ===== */
/* Mismo ancho que nombre/email/teléfono, sin tocar display (respeta [hidden]) */
.auth_formulario form #bloque_domicilio,
.auth_formulario form #bloque_punto,
.auth_formulario form .envio_opciones {
    width: 100%;
    max-width: 420px;
}

.envio_opciones,
.envio_puntos {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin: 0 0 1rem;
    width: 100%;
    max-width: 420px;
}

.auth_formulario form .envio_opcion,
.auth_formulario form .envio_punto,
.envio_opcion,
.envio_punto {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem;
    border: 1px solid #d7e3c8;
    border-radius: .85rem;
    background: #fff;
    cursor: pointer;
    box-shadow: none;
    max-width: none;
    width: 100%;
    margin-bottom: 0;
}

.envio_opcion:hover,
.envio_punto:hover {
    border-color: var(--color-principal);
}

/* Radios chicos: anulan el width:100% de .auth_formulario form label input */
.auth_formulario form .envio_opcion > input[type="radio"],
.auth_formulario form .envio_punto > input[type="radio"],
.envio_opcion > input[type="radio"],
.envio_punto > input[type="radio"] {
    -webkit-appearance: radio;
    appearance: radio;
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    max-width: 1rem;
    margin: 0;
    padding: 0;
    flex: 0 0 1rem;
    align-self: center;
    accent-color: var(--color-principal);
    cursor: pointer;
    box-shadow: none;
    background: transparent;
}

.envio_opcion span,
.envio_punto span {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}

.envio_opcion strong,
.envio_punto strong {
    color: var(--color-titulo);
    font-size: .95rem;
}

.envio_opcion small,
.envio_punto small {
    color: #666;
    font-size: .8rem;
    line-height: 1.3;
}

/* Si un bloque está oculto con hidden, que no lo pisen otros display */
#bloque_domicilio[hidden],
#bloque_punto[hidden] {
    display: none !important;
}

/* ===== Comprobante de compra ===== */
.factura_seccion {
    /* Deja aire bajo el header fijo para que no tape los botones */
    padding: calc(var(--cabecera-alto) + 4rem) 1rem 3rem;
    background: #f3f3f3;
}

.factura_acciones_top {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.factura_papel {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.factura_cabecera {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #2f6b3a;
    color: #fff;
    padding: 1.25rem 1.5rem;
}

.factura_empresa_nombre {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .4rem;
}

.factura_empresa p {
    margin: 0.15rem 0;
    font-size: .9rem;
}

.factura_tipo {
    text-align: right;
    min-width: 160px;
}

.factura_tipo_titulo {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.factura_tipo_sub {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
}

.factura_num,
.factura_fecha {
    margin: 0.2rem 0;
    font-size: .95rem;
}

.factura_cliente {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.factura_cliente p {
    margin: 0.3rem 0;
    color: #333;
}

.factura_tabla_wrap {
    padding: 0 1rem 1rem;
    overflow-x: auto;
}

.factura_tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: .95rem;
}

.factura_tabla th,
.factura_tabla td {
    border: 1px solid #ccc;
    padding: .55rem .6rem;
    text-align: left;
}

.factura_tabla th {
    background: #eef5ee;
    color: #2f6b3a;
}

.factura_tabla td:first-child,
.factura_tabla th:first-child {
    text-align: center;
    width: 4rem;
}

.factura_tabla td:nth-child(3),
.factura_tabla td:nth-child(4),
.factura_tabla th:nth-child(3),
.factura_tabla th:nth-child(4) {
    text-align: right;
    white-space: nowrap;
}

.factura_totales {
    padding: 0 1.5rem 1rem;
    text-align: right;
}

.factura_totales p {
    margin: 0.25rem 0;
}

.factura_total_final {
    font-size: 1.15rem;
    margin-top: .5rem !important;
}

.factura_pie {
    border-top: 1px dashed #bbb;
    padding: 1rem 1.5rem 1.25rem;
    text-align: center;
    color: #666;
    font-size: .9rem;
}

.factura_pie p {
    margin: 0.2rem 0;
}

@media screen and (max-width: 600px) {
    .factura_cabecera {
        flex-direction: column;
    }

    .factura_tipo {
        text-align: left;
    }

    .factura_tabla {
        font-size: .85rem;
    }
}

@media print {
    .header,
    .nav,
    .pie,
    .factura_acciones_top,
    .mostrar_menu {
        display: none !important;
    }

    .factura_seccion {
        background: #fff;
        padding: 0;
    }

    .factura_papel {
        box-shadow: none;
        border: none;
        max-width: none;
    }
}