/* =====================================================
   EL RINCÓN BAR
   ESTILOS DE LAS PÁGINAS INTERNAS
===================================================== */


/* =====================================================
   1. CONFIGURACIÓN GENERAL
===================================================== */

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

html{
    width:100%;
    min-height:100%;
}

body{
    width:100%;
    min-height:100vh;

    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:#eeeeee;

    color:#222222;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}


/* =====================================================
   2. BANNER SUPERIOR
===================================================== */

.banner-principal{
    width:100%;

    /* ALTURA DEL BANNER EN PC */
    height:550px;

    overflow:hidden;

    position:relative;

    background:#111111;
}


/* IMAGEN DEL BANNER */

.banner-principal img{
    width:100%;
    height:100%;

    display:block;

    /*
    Mantiene todo el ancho
    y recorta arriba/abajo
    si es necesario
    */

    object-fit:cover;

    /*
    Posición vertical de la imagen:

    0%   = más arriba
    50%  = centrada
    100% = más abajo
    */

    object-position:center 50%;
}


/* =====================================================
   MENU PRINCIPAL
===================================================== */

.menu-principal{

    width:100%;
    min-height:58px;

    background:#292929;

    display:flex;

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

    position:relative;

    z-index:9999;

}


/* CONTENEDOR */

.menu-links{

    min-height:58px;

    display:flex;

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

}


/* ENLACES */

.menu-links a{

    min-height:58px;

    display:flex;

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

    padding:0 17px;

    color:#eeeeee;

    font-size:13px;

    font-weight:500;

    text-transform:uppercase;

    white-space:nowrap;

    text-decoration:none;

    transition:.2s;

}


/* HOVER */

.menu-links a:hover{

    background:#3d3d3d;

    color:#ffffff;

}


/* ACTIVO */

.menu-links a.activo{

    background:#3d3d3d;

    color:#ffffff;

}


/* =========================
   CUENTANOS TU HISTORIA
========================= */

.menu-links .menu-destacado{

    color:#e2b45f;

    font-weight:600;

}


/* =========================
   INVITAME UN TRAGO
========================= */

.menu-links .menu-trago{

    color:#e2b45f;

}


/* =========================
   BUSCADOR
========================= */

.menu-links .buscar{

    font-size:18px;

    padding:0 17px;

}


/* =========================
   HAMBURGUESA
========================= */

.menu-toggle{

    display:none;

    background:none;

    border:0;

    color:#ffffff;

    font-size:29px;

    cursor:pointer;

}


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

@media(max-width:900px){

    .menu-principal{

        height:55px;

        min-height:55px;

        justify-content:flex-end;

        padding:0 18px;

    }


    .menu-toggle{

        display:block;

    }


    .menu-links{

        display:none;

        position:absolute;

        top:55px;
        left:0;

        width:100%;

        height:auto;

        background:#292929;

        flex-direction:column;

        box-shadow:
        0 8px 18px
        rgba(0,0,0,.30);

    }


    .menu-links.abierto{

        display:flex;

    }


    .menu-links a{

        width:100%;

        min-height:auto;

        display:block;

        padding:16px 20px;

        text-align:center;

        font-size:14px;

        border-top:
        1px solid #414141;

    }


    .menu-links .menu-destacado{

        color:#e2b45f;

    }


    .menu-links .menu-trago{

        color:#e2b45f;

    }


    .menu-links .buscar{

        padding:16px;

    }

}

/* =====================================================
   6. ZONA EXTERIOR DEL CONTENIDO
===================================================== */

.zona-contenido{
    width:100%;

    /*
    ESTE ES EL COLOR QUE APARECE
    EN LOS COSTADOS
    */

    background:#eeeeee;

    padding:
        0
        55px
        60px;
}


/* =====================================================
   7. CONTENIDO BLANCO CENTRAL
===================================================== */

.contenido{
    width:100%;

    /*
    ANCHO MÁXIMO DEL CENTRO BLANCO
    */

    max-width:1100px;

    min-height:450px;

    margin:0 auto;

    background:#ffffff;

    padding:
        35px
        40px
        70px;
}


/* =====================================================
   8. TITULO PRINCIPAL
===================================================== */

.contenido h1{
    margin:0 0 25px;

    text-align:center;

    color:#222222;

    font-size:31px;

    font-weight:400;

    line-height:1.3;
}


/* =====================================================
   9. SUBTITULOS
===================================================== */

.contenido h2{
    margin:35px 0 18px;

    color:#222222;

    font-size:25px;

    font-weight:500;

    line-height:1.3;
}


.contenido h3{
    margin:25px 0 15px;

    color:#333333;

    font-size:20px;

    font-weight:600;
}


/* =====================================================
   10. PARRAFOS
===================================================== */

.contenido p{
    margin:0 0 20px;

    color:#555555;

    font-size:16px;

    line-height:1.8;

    text-align:justify;
}


/* =====================================================
   11. LISTAS
===================================================== */

.contenido ul,
.contenido ol{
    margin:15px 0 25px 25px;

    color:#555555;
}


.contenido li{
    margin-bottom:10px;

    font-size:16px;

    line-height:1.7;
}


/* =====================================================
   12. ENLACES DEL CONTENIDO
===================================================== */

.contenido a{
    color:#9a6b1f;

    text-decoration:none;
}


.contenido a:hover{
    text-decoration:underline;
}


/* =====================================================
   13. IMAGENES DEL CONTENIDO
===================================================== */

.contenido img{
    max-width:100%;

    height:auto;

    display:block;

    margin:25px auto;
}


/* =====================================================
   14. TABLET
===================================================== */

@media(max-width:1000px){

    /* BANNER */

    .banner-principal{
        height:220px;
    }


    /* COSTADOS */

    .zona-contenido{
        padding:
            0
            30px
            50px;
    }


    /* CENTRO */

    .contenido{
        padding:
            35px
            30px
            60px;
    }

}


/* =====================================================
   15. CELULAR
===================================================== */

@media(max-width:700px){

    /* =================================================
       BANNER
    ================================================= */

    .banner-principal{
        height:160px;
    }

    .banner-principal img{
        object-position:center 50%;
    }


    /* =================================================
       MENU
    ================================================= */

    .menu-principal{
        height:55px;

        justify-content:flex-end;

        padding:0 15px;
    }


    /* BOTON ☰ */

    .menu-toggle{
        display:block;
    }


    /* MENU CERRADO */

    .menu-links{
        display:none;

        position:absolute;

        top:55px;
        left:0;

        width:100%;
        height:auto;

        background:#292929;

        flex-direction:column;

        box-shadow:
            0 8px 15px
            rgba(0,0,0,.25);
    }


    /* MENU ABIERTO */

    .menu-links.abierto{
        display:flex;
    }


    /* ENLACES */

    .menu-links a{
        width:100%;
        height:auto;

        display:block;

        padding:16px 20px;

        text-align:center;

        border-top:
            1px solid
            #414141;
    }


    /* BUSCADOR */

    .menu-links .buscar{
        padding:16px;
    }


    /* =================================================
       COSTADOS
    ================================================= */

    .zona-contenido{
        padding:
            0
            10px
            35px;
    }


    /* =================================================
       CONTENIDO BLANCO
    ================================================= */

    .contenido{
        min-height:350px;

        padding:
            30px
            20px
            50px;
    }


    /* TITULO */

    .contenido h1{
        font-size:25px;

        margin-bottom:20px;
    }


    /* SUBTITULOS */

    .contenido h2{
        font-size:22px;

        margin-top:30px;
    }


    .contenido h3{
        font-size:19px;
    }


    /* TEXTO */

    .contenido p{
        font-size:15px;

        line-height:1.7;
    }


    .contenido li{
        font-size:15px;
    }

}


/* =====================================================
   16. CELULARES PEQUEÑOS
===================================================== */

@media(max-width:400px){

    /* BANNER */

    .banner-principal{
        height:130px;
    }


    /* COSTADOS */

    .zona-contenido{
        padding:
            0
            6px
            30px;
    }


    /* CONTENIDO */

    .contenido{
        padding:
            25px
            16px
            40px;
    }


    .contenido h1{
        font-size:23px;
    }

}


/* =====================================================
   FOOTER
===================================================== */

.footer{
    width:100%;
    background:#242424;
    color:#cccccc;
    border-top:3px solid #b47a27;
}


/* CONTENEDOR PRINCIPAL */

.footer-contenedor{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:
        45px
        30px;

    display:grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr
        1.3fr;

    gap:60px;

}


/* COLUMNAS */

.footer-columna{
    min-width:0;
}


/* TITULOS */

.footer-columna h3{
    color:#ffffff;

    font-size:18px;
    font-weight:600;

    margin:0 0 20px;

    padding-bottom:10px;

    position:relative;
}


/* LINEA DORADA */

.footer-columna h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:40px;
    height:2px;

    background:#b47a27;
}


/* TEXTO */

.footer-columna p{
    color:#bdbdbd;

    font-size:14px;

    line-height:1.8;

    margin:0 0 15px;

    text-align:left;
}


/* ENLACES */

.footer-columna a{
    display:block;

    width:max-content;
    max-width:100%;

    color:#bdbdbd;

    font-size:14px;

    line-height:1.5;

    margin-bottom:12px;

    text-decoration:none;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.footer-columna a:hover{
    color:#d5a34d;

    padding-left:4px;
}


/* CONSUMO RESPONSABLE */

.footer-responsable{
    padding:12px;

    border-left:3px solid #b47a27;

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


/* =====================================================
   PARTE INFERIOR
===================================================== */

.footer-inferior{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:
        20px
        30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

}


.footer-inferior p{
    margin:0;

    color:#888888;

    font-size:13px;
}


/* ENLACES LEGALES */

.footer-legal{
    display:flex;

    align-items:center;

    gap:10px;
}


.footer-legal a{
    color:#999999;

    font-size:13px;

    text-decoration:none;
}


.footer-legal a:hover{
    color:#d5a34d;
}


.footer-legal span{
    color:#555555;
}

@media(max-width:800px){

    .footer-contenedor{

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

        gap:
            40px
            30px;

    }

}


@media(max-width:550px){

    .footer-contenedor{

        grid-template-columns:1fr;

        padding:
            40px
            25px;

        gap:35px;

    }


    .footer-inferior{

        padding:
            20px
            25px;

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}
/* =====================================================
   FOOTER TABLET
===================================================== */

@media(max-width:900px){

    .footer-contenedor{
        grid-template-columns:
            repeat(2, 1fr);

        gap:35px;

        padding:
            40px
            30px;
    }

}


/* =====================================================
   FOOTER CELULAR
===================================================== */

@media(max-width:600px){

    .footer-contenedor{
        grid-template-columns:1fr;

        gap:30px;

        padding:
            40px
            25px
            30px;
    }


    .footer-columna{
        text-align:left;
    }


    .footer-inferior{
        padding:
            20px
            20px;

        flex-direction:column;

        text-align:center;
    }


    .footer-legal{
        justify-content:center;

        flex-wrap:wrap;
    }

}


/* =====================================================
   REGISTRO - EL RINCÓN
===================================================== */

.registro-contenedor{

    width:100%;

    max-width:620px;

    margin:0 auto;

    padding:

        35px

        20px

        50px;

}


/* CABECERA */

.registro-cabecera{

    margin-bottom:35px;

    text-align:center;

}


.registro-cabecera h1{

    margin:

        0

        0

        15px;

    color:#292929;

    font-size:34px;

    font-weight:500;

}


.registro-cabecera p{

    max-width:520px;

    margin:auto;

    color:#666;

    font-size:15px;

    line-height:1.7;

    text-align:center;

}


/* =====================================================
   FORMULARIO
===================================================== */

.form-registro{

    padding:

        35px

        35px;

    background:#ffffff;

    border:

        1px solid

        #e2ddd5;

    border-radius:8px;

    box-shadow:

        0

        5px

        20px

        rgba(0,0,0,.07);

}


/* CAMPOS */

.campo-formulario{

    margin-bottom:22px;

}


.campo-formulario label{

    display:block;

    margin-bottom:8px;

    color:#333;

    font-size:14px;

    font-weight:600;

}


.campo-formulario input{

    width:100%;

    height:48px;

    padding:

        0

        14px;

    border:

        1px solid

        #d7d2cb;

    border-radius:5px;

    outline:none;

    background:#fff;

    color:#333;

    font-size:15px;

    transition:.2s;

}


.campo-formulario input:focus{

    border-color:#b47a27;

    box-shadow:

        0

        0

        0

        3px

        rgba(180,122,39,.10);

}


.campo-formulario small{

    display:block;

    margin-top:7px;

    color:#999;

    font-size:12px;

}


/* =====================================================
   TÉRMINOS
===================================================== */

.aceptar-terminos{

    margin:

        5px

        0

        25px;

    display:flex;

    align-items:flex-start;

    gap:10px;

    color:#666;

    font-size:13px;

    line-height:1.6;

}


.aceptar-terminos input{

    margin-top:4px;

    flex-shrink:0;

}


.aceptar-terminos a{

    color:#95621e;

    font-weight:600;

}


/* =====================================================
   BOTÓN
===================================================== */

.btn-crear-cuenta{

    width:100%;

    min-height:50px;

    border:none;

    border-radius:5px;

    background:#b47a27;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}


.btn-crear-cuenta:hover{

    background:#95621e;

    transform:translateY(-1px);

}


/* =====================================================
   ERROR
===================================================== */

.mensaje-error{

    margin-bottom:20px;

    padding:

        14px

        16px;

    background:#fff1f1;

    border:

        1px solid

        #e5b7b7;

    border-radius:5px;

    color:#9d3333;

    font-size:14px;

    line-height:1.5;

}


/* =====================================================
   LOGIN
===================================================== */

.registro-login{

    margin-top:25px;

    text-align:center;

    color:#777;

    font-size:14px;

}


.registro-login a{

    color:#95621e;

    font-weight:700;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:600px){

    .registro-contenedor{

        padding:

            25px

            0

            40px;

    }


    .registro-cabecera h1{

        font-size:28px;

    }


    .form-registro{

        padding:

            27px

            20px;

    }

}

/* =====================================================
   LOGIN - EL RINCÓN
===================================================== */

.login-seccion{

    width:100%;

    max-width:600px;

    margin:0 auto;

    padding:

        55px

        20px

        65px;

}


/* =====================================================
   CABECERA
===================================================== */

.login-cabecera{

    margin-bottom:32px;

    text-align:center;

}


.login-cabecera h1{

    margin:

        0

        0

        15px;

    color:#292929;

    font-size:34px;

    font-weight:500;

}


.login-cabecera p{

    max-width:500px;

    margin:0 auto;

    color:#666;

    font-size:15px;

    line-height:1.7;

    text-align:center;

}


/* =====================================================
   FORMULARIO
===================================================== */

.form-login{

    padding:

        35px

        35px;

    background:#ffffff;

    border:

        1px solid

        #e2ddd5;

    border-radius:8px;

    box-shadow:

        0

        5px

        20px

        rgba(0,0,0,.07);

}


/* =====================================================
   LABEL CONTRASEÑA
===================================================== */

.label-password{

    margin-bottom:8px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

}


.label-password label{

    margin:0;

}


.label-password a{

    color:#95621e;

    font-size:12px;

    font-weight:600;

    text-decoration:none;

}


.label-password a:hover{

    text-decoration:underline;

}


/* =====================================================
   CAMPO CONTRASEÑA
===================================================== */

.password-contenedor{

    position:relative;

}


.password-contenedor input{

    padding-right:50px;

}


/* OJO */

.mostrar-password{

    position:absolute;

    top:50%;
    right:8px;

    transform:
        translateY(-50%);

    width:38px;
    height:38px;

    border:0;

    background:transparent;

    cursor:pointer;

    font-size:17px;

}


/* =====================================================
   BOTÓN LOGIN
===================================================== */

.btn-login{

    width:100%;

    min-height:50px;

    margin-top:5px;

    border:none;

    border-radius:5px;

    background:#b47a27;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}


.btn-login:hover{

    background:#95621e;

    transform:
        translateY(-1px);

}


/* =====================================================
   MENSAJE ÉXITO
===================================================== */

.mensaje-exito{

    margin-bottom:20px;

    padding:

        14px

        16px;

    background:#f0f8f1;

    border:

        1px solid

        #b9d9bd;

    border-radius:5px;

    color:#397143;

    font-size:14px;

    line-height:1.5;

}


/* =====================================================
   REGISTRO
===================================================== */

.login-registro{

    margin-top:30px;

    padding-top:25px;

    border-top:

        1px solid

        #eeeeee;

    text-align:center;

}


.login-registro span{

    display:block;

    margin-bottom:7px;

    color:#777;

    font-size:14px;

}


.login-registro > a{

    display:inline-block;

    color:#95621e;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

}


.login-registro > a:hover{

    text-decoration:underline;

}


.login-registro p{

    max-width:440px;

    margin:

        15px

        auto

        0;

    color:#999;

    font-size:12px;

    line-height:1.6;

    text-align:center;

}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width:600px){

    .login-seccion{

        padding:

            40px

            0

            50px;

    }


    .login-cabecera h1{

        font-size:28px;

    }


    .form-login{

        padding:

            27px

            20px;

    }


    .label-password{

        align-items:flex-start;

    }

}

/* =====================================================
   USUARIO / LOGIN DEL MENÚ
===================================================== */


/* =====================================================
   INICIAR SESIÓN
===================================================== */

.menu-links .menu-login{

    border-left:
        1px solid
        #444;

    color:#eeeeee;

}


/* =====================================================
   REGISTRARSE
===================================================== */

.menu-links .menu-registro{

    min-height:38px;

    height:38px;

    margin:

        0

        10px;

    padding:

        0

        16px;

    border-radius:4px;

    background:#b47a27;

    color:#ffffff;

}


.menu-links .menu-registro:hover{

    background:#95621e;

    color:#ffffff;

}


/* =====================================================
   CONTENEDOR USUARIO
===================================================== */

.menu-usuario{

    height:58px;

    position:relative;

    display:flex;

    align-items:center;

}


/* =====================================================
   BOTÓN USUARIO
===================================================== */

.menu-usuario-boton{

    height:100%;

    padding:

        0

        17px;

    border:0;

    border-left:

        1px solid

        #444;

    background:transparent;

    display:flex;

    align-items:center;

    gap:7px;

    color:#eeeeee;

    cursor:pointer;

    font-family:inherit;

}


/* HOVER */

.menu-usuario-boton:hover{

    background:#3d3d3d;

}


/* ICONO */

.usuario-icono{

    font-size:17px;

}


/* NOMBRE */

.usuario-nombre{

    max-width:120px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:13px;

    font-weight:600;

}


/* FLECHA */

.usuario-flecha{

    color:#aaa;

    font-size:11px;

}


/* =====================================================
   DROPDOWN
===================================================== */

.menu-usuario-dropdown{

    display:none;

    position:absolute;

    top:58px;
    right:0;

    width:245px;

    background:#ffffff;

    border:

        1px solid

        #dedede;

    border-radius:

        0

        0

        7px

        7px;

    box-shadow:

        0

        10px

        25px

        rgba(0,0,0,.18);

    overflow:hidden;

    z-index:10000;

}


/* ABIERTO */

.menu-usuario-dropdown.abierto{

    display:block;

}


/* =====================================================
   CABECERA DROPDOWN
===================================================== */

.usuario-dropdown-cabecera{

    padding:

        17px

        18px;

    background:#f7f5f1;

    border-bottom:

        1px solid

        #e7e3dd;

}


.usuario-dropdown-cabecera strong{

    display:block;

    margin-bottom:3px;

    color:#333;

    font-size:14px;

}


.usuario-dropdown-cabecera small{

    display:block;

    color:#999;

    font-size:12px;

}


/* =====================================================
   ENLACES DROPDOWN
===================================================== */

.menu-links
.menu-usuario-dropdown a{

    width:100%;

    min-height:auto;

    height:auto;

    padding:

        13px

        18px;

    display:block;

    color:#444;

    background:#ffffff;

    font-size:13px;

    font-weight:500;

    text-align:left;

    text-transform:none;

    border:0;

}


.menu-links
.menu-usuario-dropdown a:hover{

    background:#f5f2ed;

    color:#95621e;

}


/* ADMIN */

.menu-links
.menu-usuario-dropdown
.opcion-admin{

    color:#95621e;

}


/* SEPARADOR */

.dropdown-separador{

    height:1px;

    background:#eeeeee;

}


/* CERRAR SESIÓN */

.menu-links
.menu-usuario-dropdown
.cerrar-sesion{

    color:#9b3d3d;

}


.menu-links
.menu-usuario-dropdown
.cerrar-sesion:hover{

    background:#fff4f4;

    color:#8a2929;

}


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

@media(max-width:900px){


    /* LOGIN */

    .menu-links .menu-login{

        border-left:0;

    }


    /* REGISTRO */

    .menu-links .menu-registro{

        width:calc(100% - 30px);

        min-height:auto;

        height:auto;

        margin:

            8px

            15px

            15px;

        padding:

            15px

            20px;

    }


    /* USUARIO */

    .menu-usuario{

        width:100%;

        height:auto;

        display:block;

    }


    .menu-usuario-boton{

        width:100%;

        height:auto;

        min-height:54px;

        padding:

            15px

            20px;

        justify-content:center;

        border:0;

        border-top:

            1px solid

            #414141;

    }


    .usuario-nombre{

        max-width:200px;

    }


    /* DROPDOWN */

    .menu-usuario-dropdown{

        position:relative;

        top:auto;
        right:auto;

        width:100%;

        border:0;

        border-radius:0;

        box-shadow:none;

    }


    .usuario-dropdown-cabecera{

        text-align:center;

    }


    .menu-links
    .menu-usuario-dropdown a{

        padding:

            14px

            20px;

        text-align:center;

        border-top:

            1px solid

            #eeeeee;

    }

}

/* =====================================================
   PUBLICAR HISTORIA
===================================================== */

.publicar-seccion{

    width:100%;

    max-width:780px;

    margin:0 auto;

    padding:
        55px
        20px
        65px;

}


/* CABECERA */

.publicar-cabecera{

    max-width:650px;

    margin:
        0
        auto
        35px;

    text-align:center;

}


.publicar-cabecera h1{

    margin:
        0
        0
        15px;

    font-size:34px;

    font-weight:500;

}


.publicar-cabecera p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.8;

    text-align:center;

}


/* =====================================================
   FORMULARIO
===================================================== */

.form-publicar{

    padding:38px;

    background:#fff;

    border:1px solid #e2ddd5;

    border-radius:8px;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.07);

}


/* SELECT Y TEXTAREA */

.campo-formulario select,
.campo-formulario textarea{

    width:100%;

    padding:13px 14px;

    border:1px solid #d7d2cb;

    border-radius:5px;

    outline:none;

    background:#fff;

    color:#333;

    font-family:inherit;

    font-size:15px;

    transition:.2s;

}


.campo-formulario select{

    height:48px;

}


.campo-formulario textarea{

    min-height:300px;

    resize:vertical;

    line-height:1.7;

}


.campo-formulario select:focus,
.campo-formulario textarea:focus{

    border-color:#b47a27;

    box-shadow:
        0 0 0 3px
        rgba(180,122,39,.10);

}


/* CONTADORES */

.contador-caracteres{

    margin-top:6px;

    color:#999;

    font-size:11px;

    text-align:right;

}


.ayuda-campo{

    margin-top:7px;

    display:flex;

    justify-content:space-between;

    gap:15px;

    color:#999;

    font-size:11px;

}


/* OPCIONAL */

.opcional{

    color:#999;

    font-weight:400;

}


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

.subir-imagen input[type="file"]{

    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

    opacity:0;

}


.subir-imagen-boton{

    min-height:150px;

    padding:25px;

    border:
        2px dashed
        #d6cec3;

    border-radius:7px;

    background:#faf9f7;

    display:flex;

    flex-direction:column;

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

    text-align:center;

    cursor:pointer;

    transition:.2s;

}


.subir-imagen-boton:hover{

    border-color:#b47a27;

    background:#fcf8f1;

}


.subir-icono{

    margin-bottom:8px;

    font-size:30px;

}


.subir-imagen-boton strong{

    color:#555;

    font-size:14px;

}


.subir-imagen-boton small{

    margin-top:5px;

    color:#999;

    font-size:11px;

}


/* PREVIEW */

.preview-imagen{

    display:none;

    margin-top:15px;

    position:relative;

}


.preview-imagen.visible{

    display:block;

}


.preview-imagen img{

    width:100%;

    max-height:350px;

    margin:0;

    border-radius:6px;

    object-fit:cover;

}


.eliminar-imagen{

    position:absolute;

    top:10px;
    right:10px;

    width:36px;
    height:36px;

    border:0;

    border-radius:50%;

    background:
        rgba(0,0,0,.75);

    color:#fff;

    font-size:23px;

    cursor:pointer;

}


.nota-imagen{

    margin-top:9px !important;

    color:#999 !important;

    font-size:12px !important;

    line-height:1.5 !important;

    text-align:left !important;

}


/* =====================================================
   ANÓNIMO
===================================================== */

.opcion-anonimo{

    margin:
        10px
        0
        25px;

    padding:17px;

    border:1px solid #e5dfd6;

    border-radius:6px;

    background:#faf9f7;

}


.opcion-anonimo label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    cursor:pointer;

}


.opcion-anonimo input{

    margin-top:4px;

}


.opcion-anonimo strong{

    display:block;

    margin-bottom:4px;

    color:#444;

    font-size:14px;

}


.opcion-anonimo small{

    display:block;

    color:#888;

    font-size:12px;

    line-height:1.5;

}


/* =====================================================
   AVISO MODERACIÓN
===================================================== */

.aviso-moderacion{

    margin-bottom:28px;

    padding:15px;

    display:flex;

    align-items:flex-start;

    gap:10px;

    background:#f7f3ec;

    border-left:3px solid #b47a27;

}


.aviso-moderacion p{

    margin:0 !important;

    color:#666 !important;

    font-size:12px !important;

    line-height:1.6 !important;

    text-align:left !important;

}


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

.publicar-botones{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

}


.btn-cancelar,
.btn-publicar-historia{

    min-height:48px;

    padding:
        0
        23px;

    border-radius:5px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

    text-decoration:none !important;

}


.btn-cancelar{

    border:1px solid #ccc;

    background:#fff;

    color:#666 !important;

}


.btn-publicar-historia{

    border:1px solid #b47a27;

    background:#b47a27;

    color:#fff;

    cursor:pointer;

}


.btn-publicar-historia:hover{

    background:#95621e;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:600px){

    .publicar-seccion{

        padding:
            40px
            0
            50px;

    }


    .publicar-cabecera h1{

        font-size:28px;

    }


    .form-publicar{

        padding:
            27px
            20px;

    }


    .campo-formulario textarea{

        min-height:250px;

    }


    .ayuda-campo{

        flex-direction:column;

        gap:3px;

    }


    .publicar-botones{

        flex-direction:column-reverse;

    }


    .btn-cancelar,
    .btn-publicar-historia{

        width:100%;

    }

}

/* =====================================================
   MIS HISTORIAS
===================================================== */

.mis-historias-seccion{

    width:100%;
    max-width:900px;

    margin:0 auto;

    padding:
        50px
        20px
        70px;

}


/* =====================================================
   CABECERA
===================================================== */

.mis-historias-cabecera{

    margin-bottom:30px;

    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    gap:30px;

}


.mis-historias-cabecera h1{

    margin:
        5px
        0
        10px;

    text-align:left;

    font-size:34px;

    font-weight:500;

}


.mis-historias-cabecera p{

    margin:0;

    max-width:520px;

    color:#777;

    font-size:14px;

    line-height:1.7;

    text-align:left;

}


/* =====================================================
   BOTÓN NUEVA HISTORIA
===================================================== */

.btn-nueva-historia{

    min-height:45px;

    padding:
        0
        20px;

    display:inline-flex;

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

    flex-shrink:0;

    border-radius:5px;

    background:#b47a27;

    color:#fff !important;

    font-size:13px;

    font-weight:700;

    text-decoration:none !important;

    transition:.2s;

}


.btn-nueva-historia:hover{

    background:#95621e;

    transform:translateY(-1px);

}


/* =====================================================
   RESUMEN
===================================================== */

.mis-historias-resumen{

    margin-bottom:20px;

    padding:
        13px
        16px;

    border:
        1px solid
        #e5e1da;

    border-radius:5px;

    background:#faf9f7;

    display:flex;

    align-items:center;

    gap:6px;

    color:#777;

    font-size:13px;

}


.mis-historias-resumen strong{

    color:#b47a27;

    font-size:17px;

}


/* =====================================================
   LISTA
===================================================== */

.lista-mis-historias{

    display:flex;

    flex-direction:column;

    gap:22px;

}


/* =====================================================
   TARJETA
===================================================== */

.mi-historia-card{

    width:100%;

    display:grid;

    grid-template-columns:
        260px
        1fr;

    overflow:hidden;

    border:
        1px solid
        #e4e0da;

    border-radius:8px;

    background:#fff;

    box-shadow:
        0
        4px
        15px
        rgba(0,0,0,.05);

}


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

.mi-historia-imagen{

    min-height:250px;

    position:relative;

    overflow:hidden;

    background:#eee;

}


.mi-historia-imagen img{

    width:100%;
    height:100%;

    margin:0;

    position:absolute;

    inset:0;

    object-fit:cover;

}


/* =====================================================
   ESTADO
===================================================== */

.estado-historia{

    position:absolute;

    top:12px;
    left:12px;

    padding:
        7px
        11px;

    border-radius:20px;

    font-size:11px;

    font-weight:700;

    box-shadow:
        0
        2px
        8px
        rgba(0,0,0,.15);

}


.estado-pendiente{

    background:#fff3cd;

    color:#806000;

}


.estado-publicada{

    background:#e5f5e8;

    color:#28723a;

}


.estado-rechazada{

    background:#fde8e8;

    color:#9b3434;

}


/* =====================================================
   CONTENIDO
===================================================== */

.mi-historia-contenido{

    padding:
        25px
        27px;

    display:flex;

    flex-direction:column;

}


/* PARTE SUPERIOR */

.mi-historia-superior{

    margin-bottom:10px;

    display:flex;

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

    gap:15px;

}


.mi-historia-categoria{

    color:#a46d21;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}


.mi-historia-fecha{

    color:#aaa;

    font-size:11px;

}


/* TÍTULO */

.mi-historia-contenido h2{

    margin:
        0
        0
        10px;

    color:#292929;

    font-size:23px;

    font-weight:600;

    line-height:1.3;

}


/* TEXTO */

.mi-historia-contenido > p{

    margin:
        5px
        0
        20px;

    color:#666;

    font-size:14px;

    line-height:1.7;

    text-align:left;

}


/* =====================================================
   ANÓNIMO
===================================================== */

.publicacion-anonima{

    margin-bottom:7px;

    color:#999;

    font-size:11px;

}


/* =====================================================
   RECHAZO
===================================================== */

.motivo-rechazo{

    margin-bottom:18px;

    padding:
        12px
        14px;

    border-left:
        3px solid
        #c95b5b;

    background:#fff5f5;

    color:#7d4444;

    font-size:12px;

    line-height:1.6;

}


.motivo-rechazo strong{

    display:block;

    margin-bottom:3px;

}


/* =====================================================
   FOOTER DE TARJETA
===================================================== */

.mi-historia-footer{

    margin-top:auto;

    padding-top:15px;

    border-top:
        1px solid
        #eee;

    display:flex;

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

    gap:15px;

}


/* ESTADÍSTICAS */

.mi-historia-estadisticas{

    display:flex;

    align-items:center;

    gap:15px;

    color:#888;

    font-size:12px;

}


/* =====================================================
   ACCIONES
===================================================== */

.btn-ver-historia{

    color:#95621e !important;

    font-size:12px;

    font-weight:700;

    text-decoration:none !important;

}


.esperando-revision{

    color:#987411;

    font-size:11px;

    font-weight:600;

}


.no-publicada{

    color:#a24c4c;

    font-size:11px;

    font-weight:600;

}


/* =====================================================
   SIN HISTORIAS
===================================================== */

.sin-historias{

    padding:
        65px
        30px;

    border:
        1px dashed
        #d8d1c7;

    border-radius:8px;

    background:#faf9f7;

    text-align:center;

}


.sin-historias-icono{

    margin-bottom:15px;

    color:#b47a27;

    font-size:42px;

}


.sin-historias h2{

    margin:
        0
        0
        15px;

    font-size:24px;

    font-weight:500;

}


.sin-historias p{

    max-width:520px;

    margin:
        0
        auto
        25px;

    color:#777;

    font-size:14px;

    line-height:1.8;

    text-align:center;

}


/* =====================================================
   PAGINACIÓN
===================================================== */

.paginacion{

    margin-top:45px;

    display:flex;

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

    gap:7px;

    flex-wrap:wrap;

}


.pagina-numero,
.pagina-control{

    min-width:40px;
    height:40px;

    padding:
        0
        12px;

    display:flex;

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

    border:
        1px solid
        #ddd;

    border-radius:5px;

    background:#fff;

    color:#555 !important;

    font-size:13px;

    text-decoration:none !important;

}


.pagina-numero:hover,
.pagina-control:hover{

    border-color:#b47a27;

    color:#b47a27 !important;

}


.pagina-activa{

    border-color:#b47a27;

    background:#b47a27;

    color:#fff !important;

}


.pagina-activa:hover{

    color:#fff !important;

}


.pagina-puntos{

    padding:
        0
        4px;

    color:#999;

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:800px){

    .mi-historia-card{

        grid-template-columns:
            210px
            1fr;

    }

}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width:650px){

    .mis-historias-seccion{

        padding:
            35px
            0
            50px;

    }


    .mis-historias-cabecera{

        align-items:stretch;

        flex-direction:column;

        gap:20px;

    }


    .mis-historias-cabecera h1{

        font-size:28px;

    }


    .btn-nueva-historia{

        width:100%;

    }


    .mi-historia-card{

        display:block;

    }


    .mi-historia-imagen{

        min-height:210px;

        aspect-ratio:16 / 9;

    }


    .mi-historia-contenido{

        padding:
            22px
            20px;

    }


    .mi-historia-contenido h2{

        font-size:21px;

    }


    .mi-historia-footer{

        align-items:flex-start;

        flex-direction:column;

    }


    .mi-historia-superior{

        align-items:flex-start;

        flex-direction:column;

        gap:5px;

    }


    .paginacion{

        gap:5px;

    }


    .pagina-numero{

        min-width:37px;
        height:37px;

    }

}



/* =====================================================
   PANEL ADMINISTRADOR
===================================================== */

.admin-header{

    width:100%;

    min-height:65px;

    background:#292929;

    color:#fff;

}


.admin-header-interior{

    width:100%;
    max-width:1200px;

    min-height:65px;

    margin:auto;

    padding:0 25px;

    display:flex;

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

    gap:20px;

}


.admin-header-interior > div:first-child{

    display:flex;

    align-items:center;

    gap:12px;

}


.admin-header strong{

    color:#d5a04a;

    font-size:15px;

}


.admin-header span{

    color:#aaa;

    font-size:12px;

}


.admin-header-usuario{

    display:flex;

    align-items:center;

    gap:18px;

}


.admin-header-usuario a{

    color:#eee;

    font-size:12px;

    text-decoration:none;

}


.admin-header-usuario a:hover{

    color:#d5a04a;

}


/* CONTENEDOR */

.admin-contenedor{

    width:100%;
    max-width:1200px;

    min-height:calc(100vh - 65px);

    margin:auto;

    padding:
        45px
        25px
        70px;

}


/* TÍTULO */

.admin-titulo{

    margin-bottom:30px;

    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    gap:25px;

}


.admin-titulo h1{

    margin:
        5px
        0
        8px;

    font-size:32px;

    font-weight:500;

}


.admin-titulo p{

    margin:0;

    color:#777;

    font-size:14px;

}


.admin-btn-principal{

    padding:
        13px
        20px;

    border-radius:5px;

    background:#b47a27;

    color:#fff;

    font-size:13px;

    font-weight:bold;

}


/* =====================================================
   ESTADÍSTICAS
===================================================== */

.admin-estadisticas{

    margin-bottom:35px;

    display:grid;

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

    gap:15px;

}


.admin-estadistica{

    min-height:140px;

    padding:22px;

    border:1px solid #e2ded8;

    border-radius:7px;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    color:#333;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.04);

}


.admin-estadistica:hover{

    border-color:#c9a66d;

}


.admin-estadistica-icono{

    margin-bottom:10px;

    font-size:20px !important;

}


.admin-estadistica strong{

    color:#333;

    font-size:30px;

}


.admin-estadistica small{

    margin-top:3px;

    color:#888;

}


/* =====================================================
   PANEL
===================================================== */

.admin-panel{

    overflow:hidden;

    border:1px solid #e2ded8;

    border-radius:7px;

    background:#fff;

}


.admin-panel-cabecera{

    padding:
        20px
        23px;

    border-bottom:1px solid #eee;

    display:flex;

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

    gap:20px;

}


.admin-panel-cabecera h2{

    margin:
        0
        0
        4px;

    font-size:19px;

}


.admin-panel-cabecera p{

    margin:0;

    color:#999;

    font-size:12px;

}


.admin-panel-cabecera a{

    color:#95621e;

    font-size:12px;

    font-weight:bold;

}


/* =====================================================
   FILAS
===================================================== */

.admin-fila{

    padding:
        19px
        23px;

    border-bottom:1px solid #eee;

    display:flex;

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

    gap:25px;

}


.admin-fila:last-child{

    border-bottom:0;

}


.admin-fila h3{

    margin:
        4px
        0
        6px;

    font-size:16px;

}


.admin-fila p{

    max-width:700px;

    margin:
        5px
        0
        8px;

    color:#777;

    font-size:13px;

    line-height:1.6;

}


.admin-categoria{

    color:#a46d21;

    font-size:10px;

    font-weight:bold;

    text-transform:uppercase;

}


.admin-meta{

    color:#999;

    font-size:11px;

}


.admin-btn-revisar{

    padding:
        10px
        16px;

    border:1px solid #b47a27;

    border-radius:4px;

    color:#95621e;

    font-size:12px;

    font-weight:bold;

    white-space:nowrap;

}


/* =====================================================
   FILTROS
===================================================== */

.admin-filtros{

    margin-bottom:20px;

    display:flex;

    gap:7px;

    flex-wrap:wrap;

}


.admin-filtros a{

    padding:
        10px
        17px;

    border:1px solid #ddd;

    border-radius:4px;

    background:#fff;

    color:#666;

    font-size:12px;

}


.admin-filtros a.activo{

    border-color:#b47a27;

    background:#b47a27;

    color:#fff;

}


/* =====================================================
   VACÍO
===================================================== */

.admin-vacio{

    padding:
        60px
        25px;

    text-align:center;

}


.admin-vacio > span{

    display:block;

    margin-bottom:12px;

    color:#4f8a5b;

    font-size:35px;

}


.admin-vacio h3{

    margin-bottom:8px;

}


.admin-vacio p{

    color:#888;

    font-size:13px;

}


/* =====================================================
   REVISAR HISTORIA
===================================================== */

.admin-revision{

    width:100%;
    max-width:850px;

    margin:auto;

    padding:
        30px;

    border:1px solid #e2ded8;

    border-radius:8px;

    background:#fff;

}


.admin-revision-imagen{

    width:100%;

    max-height:430px;

    margin-bottom:25px;

    overflow:hidden;

    border-radius:6px;

}


.admin-revision-imagen img{

    width:100%;

    max-height:430px;

    display:block;

    object-fit:cover;

}


.admin-revision-meta{

    margin-bottom:12px;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    color:#999;

    font-size:11px;

}


.admin-revision h1{

    margin:
        0
        0
        15px;

    font-size:32px;

    line-height:1.3;

}


.admin-autor{

    padding-bottom:20px;

    border-bottom:1px solid #eee;

    color:#777;

    font-size:12px;

}


.admin-texto-historia{

    padding:
        30px
        0;

    color:#444;

    font-size:16px;

    line-height:1.9;

}


/* =====================================================
   DECISIÓN
===================================================== */

.admin-decision{

    padding-top:25px;

    border-top:1px solid #ddd;

}


.admin-btn-aprobar{

    width:100%;

    min-height:50px;

    margin-bottom:25px;

    border:0;

    border-radius:5px;

    background:#438454;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}


.admin-form-rechazo{

    padding:20px;

    border:1px solid #ead3d3;

    border-radius:6px;

    background:#fff8f8;

}


.admin-form-rechazo label{

    display:block;

    margin-bottom:8px;

    color:#744;

    font-size:13px;

    font-weight:bold;

}


.admin-form-rechazo textarea{

    width:100%;
    min-height:100px;

    margin-bottom:12px;

    padding:12px;

    border:1px solid #d8baba;

    border-radius:4px;

    resize:vertical;

}


.admin-btn-rechazar{

    min-height:44px;

    padding:
        0
        20px;

    border:0;

    border-radius:4px;

    background:#a84949;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}


.admin-ya-revisada{

    margin-top:25px;

    padding:17px;

    background:#f5f3ef;

    color:#666;

    font-size:13px;

}


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

@media(max-width:800px){

    .admin-estadisticas{

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

    }

}


@media(max-width:600px){

    .admin-header-interior{

        padding:
            12px
            15px;

    }


    .admin-header-interior > div:first-child span{

        display:none;

    }


    .admin-contenedor{

        padding:
            30px
            15px
            50px;

    }


    .admin-titulo{

        align-items:stretch;

        flex-direction:column;

    }


    .admin-btn-principal{

        text-align:center;

    }


    .admin-estadisticas{

        grid-template-columns:
            1fr
            1fr;

    }


    .admin-estadistica{

        min-height:115px;

        padding:17px;

    }


    .admin-fila{

        align-items:flex-start;

        flex-direction:column;

    }


    .admin-btn-revisar{

        width:100%;

        text-align:center;

    }


    .admin-revision{

        padding:20px;

    }


    .admin-revision h1{

        font-size:26px;

    }

}


/* =====================================================
   DATOS DINÁMICOS DE LAS HISTORIAS
===================================================== */

.tarjeta-historia h3 a{

    color:inherit;

    text-decoration:none;

}

.tarjeta-historia h3 a:hover{

    color:#a46d21;

}


/* ESTADÍSTICAS */

.historia-estadisticas{

    margin:
        12px
        0
        15px;

    padding-top:12px;

    border-top:
        1px solid
        #eeeeee;

    display:flex;

    align-items:center;

    gap:18px;

    color:#888888;

    font-size:12px;

}

.historia-estadisticas span{

    display:flex;

    align-items:center;

    gap:4px;

}


/* CUANDO NO HAY HISTORIAS */

.sin-historias-publicadas{

    width:100%;

    padding:
        55px
        25px;

    border:
        1px dashed
        #d8d1c7;

    border-radius:6px;

    background:#faf9f7;

    text-align:center;

}

.sin-historias-icono{

    margin-bottom:15px;

    font-size:40px;

}

.sin-historias-publicadas h3{

    margin-bottom:12px;

    color:#333;

    font-size:22px;

}

.sin-historias-publicadas p{

    max-width:520px;

    margin:
        0
        auto
        25px;

    color:#777;

    line-height:1.7;

    text-align:center;

}


/* =====================================================
   NUEVA PORTADA
===================================================== */

.portada-historias{

    width:100%;
    max-width:1050px;

    margin:auto;

    padding:45px 20px 55px;

}


/* TÍTULO */

.portada-titulo{

    margin-bottom:32px;

    text-align:center;

}

.portada-titulo > span{

    display:block;

    margin-bottom:7px;

    color:#a46d21;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

}

.portada-titulo h1,
.portada-titulo h2{

    margin:0 0 9px;

    color:#292929;

    font-size:30px;

    font-weight:500;

}

.portada-titulo p{

    max-width:600px;

    margin:auto;

    color:#777;

    font-size:14px;

    line-height:1.7;

    text-align:center;

}


/* =====================================================
   TARJETAS
===================================================== */

.portada-grid{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:28px;

}


.portada-card{

    min-width:0;

    overflow:hidden;

    border:1px solid #e3ded6;

    border-radius:8px;

    background:#fff;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.07);

    transition:.25s;

}


.portada-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.11);

}


/* IMAGEN */

.portada-card-imagen{

    width:100%;

    aspect-ratio:16 / 9;

    display:block;

    overflow:hidden;

    background:#eee;

}


.portada-card-imagen img{

    width:100%;
    height:100%;

    margin:0;

    display:block;

    object-fit:cover;

    transition:.35s;

}


.portada-card:hover
.portada-card-imagen img{

    transform:scale(1.035);

}


/* CONTENIDO */

.portada-card-contenido{

    padding:22px;

}


.portada-categoria{

    display:block;

    margin-bottom:8px;

    color:#a46d21;

    font-size:10px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}


.portada-card h2{

    margin:0 0 11px;

    font-size:21px;

    line-height:1.35;

}


.portada-card h2 a{

    color:#292929;

    text-decoration:none;

}


.portada-card h2 a:hover{

    color:#95621e;

}


.portada-card-contenido > p{

    margin:0 0 16px;

    color:#666;

    font-size:13px;

    line-height:1.7;

    text-align:left;

}


/* META */

.portada-meta{

    margin-bottom:15px;

    display:flex;

    justify-content:space-between;

    gap:10px;

    color:#999;

    font-size:11px;

}


/* FOOTER */

.portada-card-footer{

    padding-top:14px;

    border-top:1px solid #eee;

    display:flex;

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

    gap:12px;

}


.portada-stats{

    display:flex;

    gap:12px;

    color:#888;

    font-size:11px;

}


.portada-leer{

    color:#95621e !important;

    font-size:12px;

    font-weight:700;

    text-decoration:none !important;

}


/* =====================================================
   CATEGORÍAS SIMPLES
===================================================== */

.portada-categorias{

    padding:50px 20px;

    border-top:1px solid #eee;

}


.categorias-simples{

    max-width:850px;

    margin:auto;

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

}


.categorias-simples a{

    padding:12px 18px;

    border:1px solid #ded8cf;

    border-radius:25px;

    background:#fff;

    color:#555;

    font-size:13px;

    text-decoration:none;

    transition:.2s;

}


.categorias-simples a:hover{

    border-color:#b47a27;

    color:#95621e;

}


/* =====================================================
   CTA
===================================================== */

.portada-cta{

    max-width:950px;

    margin:10px auto 50px;

    padding:28px 32px;

    border-radius:8px;

    background:#292929;

    display:flex;

    align-items:center;

    gap:22px;

    color:#fff;

}


.portada-cta > span{

    color:#d5a04a;

    font-size:32px;

}


.portada-cta > div{

    flex:1;

}


.portada-cta h2{

    margin:0 0 5px;

    color:#fff;

    font-size:21px;

}


.portada-cta p{

    margin:0;

    color:#bbb;

    font-size:13px;

    text-align:left;

}


.boton-principal{

    padding:13px 21px;

    border-radius:5px;

    background:#b47a27;

    color:#fff !important;

    font-size:13px;

    font-weight:700;

    text-decoration:none !important;

    white-space:nowrap;

}


/* =====================================================
   VACÍO
===================================================== */

.portada-vacia{

    padding:55px 25px;

    border:1px dashed #d7cfc4;

    border-radius:7px;

    background:#faf9f7;

    text-align:center;

}


.portada-vacia-icono{

    display:block;

    margin-bottom:12px;

    color:#b47a27;

    font-size:32px;

}


.portada-vacia h2{

    margin:0 0 8px;

    font-size:21px;

}


.portada-vacia p{

    margin:0 0 22px;

    color:#888;

    font-size:13px;

    text-align:center;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:650px){

    .portada-historias{

        padding:
            35px
            5px
            45px;

    }


    .portada-titulo h1,
    .portada-titulo h2{

        font-size:25px;

    }


    .portada-grid{

        grid-template-columns:1fr;

        gap:22px;

    }


    .portada-meta{

        flex-direction:column;

        gap:4px;

    }


    .portada-card-footer{

        align-items:flex-start;

        flex-direction:column;

    }


    .portada-cta{

        margin:
            10px
            5px
            35px;

        padding:25px;

        flex-direction:column;

        align-items:flex-start;

    }


    .portada-cta .boton-principal{

        width:100%;

        text-align:center;

    }

}

/* =====================================================
   PÁGINA INDIVIDUAL DE HISTORIA
===================================================== */

.pagina-historia{

    width:100%;
    max-width:850px;

    margin:0 auto;

    padding:
        45px
        20px
        70px;

}


/* MIGAS */

.historia-migas{

    margin-bottom:35px;

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    color:#999;

    font-size:11px;

}


.historia-migas a{

    color:#8f6425;

    text-decoration:none;

}


.historia-migas a:hover{

    text-decoration:underline;

}


/* =====================================================
   CABECERA
===================================================== */

.historia-cabecera{

    margin-bottom:30px;

    text-align:center;

}


.historia-etiqueta{

    display:inline-block;

    margin-bottom:14px;

    color:#a46d21;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

}


.historia-cabecera h1{

    max-width:760px;

    margin:
        0
        auto
        18px;

    color:#292929;

    font-size:38px;

    font-weight:500;

    line-height:1.25;

}


.historia-datos{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    color:#888;

    font-size:12px;

}


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

.historia-portada{

    width:100%;

    margin:
        0
        0
        35px;

    overflow:hidden;

    border-radius:7px;

    background:#eee;

}


.historia-portada img{

    width:100%;

    max-height:500px;

    margin:0;

    display:block;

    object-fit:cover;

}


/* =====================================================
   TEXTO DE LA HISTORIA
===================================================== */

.historia-texto{

    max-width:740px;

    margin:0 auto;

    color:#3f3f3f;

    font-size:17px;

    line-height:1.95;

    text-align:justify;

}


/* =====================================================
   ESTADÍSTICAS
===================================================== */

.historia-barra{

    max-width:740px;

    margin:
        45px
        auto
        0;

    padding:
        18px
        0;

    border-top:1px solid #e5e0d9;

    border-bottom:1px solid #e5e0d9;

}


.historia-barra-stats{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    color:#777;

    font-size:12px;

}


/* =====================================================
   VOLVER
===================================================== */

.historia-volver{

    max-width:740px;

    margin:
        30px
        auto
        0;

}


.historia-volver a{

    color:#95621e;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:650px){

    .pagina-historia{

        padding:
            30px
            5px
            50px;

    }


    .historia-migas{

        margin-bottom:25px;

    }


    .historia-cabecera h1{

        font-size:29px;

    }


    .historia-datos{

        gap:
            8px
            15px;

    }


    .historia-portada{

        margin-bottom:25px;

        border-radius:4px;

    }


    .historia-portada img{

        max-height:350px;

    }


    .historia-texto{

        font-size:16px;

        line-height:1.85;

        text-align:left;

    }


    .historia-barra-stats{

        justify-content:flex-start;

        gap:
            12px
            20px;

    }

}

/* =====================================================
   LIKE E INTERACCIONES
===================================================== */

.historia-barra-stats{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}


/* FORMULARIO LIKE */

.form-like{

    margin:0;

    padding:0;

}


/* BOTÓN LIKE */

.btn-like{

    margin:0;

    padding:
        8px
        12px;

    border:0;

    border-radius:5px;

    background:transparent;

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#777;

    font-family:inherit;

    font-size:12px;

    text-decoration:none;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;

}


.btn-like:hover{

    background:#f5f1eb;

    color:#9a6620;

}


/* CORAZÓN */

.like-corazon{

    font-size:22px;

    line-height:1;

}


/* LIKE ACTIVO */

.btn-like.like-activo{

    color:#a86d25;

}


.btn-like.like-activo
.like-corazon{

    color:#b87927;

}


/* LOGIN COMO LIKE */

.btn-like-login{

    text-decoration:none !important;

}


/* ESTADÍSTICAS */

.historia-stat{

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#777;

    font-size:12px;

}


/* =====================================================
   MENSAJE PARA VISITANTES
===================================================== */

.interaccion-login{

    margin-top:18px;

    padding-top:15px;

    border-top:
        1px solid
        #eeeeee;

    color:#888;

    font-size:12px;

    line-height:1.7;

    text-align:center;

}


.interaccion-login a{

    color:#95621e;

    font-weight:600;

    text-decoration:none;

}


.interaccion-login a:hover{

    text-decoration:underline;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:650px){

    .historia-barra-stats{

        justify-content:flex-start;

        gap:
            12px
            18px;

    }


    .btn-like{

        padding:
            7px
            5px;

    }


    .interaccion-login{

        text-align:left;

    }

}

/* =====================================================
   COMENTARIOS
===================================================== */

.seccion-comentarios{

    max-width:740px;

    margin:
        50px
        auto
        0;

}


/* TÍTULO */

.comentarios-titulo{

    margin-bottom:25px;

    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    gap:20px;

}


.comentarios-titulo h2{

    margin:3px 0 0;

    color:#292929;

    font-size:25px;

    font-weight:500;

}


.contador-comentarios{

    color:#999;

    font-size:12px;

}


/* =====================================================
   FORMULARIO
===================================================== */

.form-comentario{

    margin-bottom:35px;

    padding:22px;

    border:1px solid #e3ded6;

    border-radius:7px;

    background:#faf9f7;

}


.form-comentario label{

    display:block;

    margin-bottom:10px;

    color:#444;

    font-size:13px;

    font-weight:700;

}


.form-comentario textarea{

    width:100%;
    min-height:120px;

    padding:14px;

    border:1px solid #d9d3ca;

    border-radius:5px;

    outline:none;

    background:#fff;

    color:#444;

    font-family:inherit;

    font-size:14px;

    line-height:1.6;

    resize:vertical;

}


.form-comentario textarea:focus{

    border-color:#b47a27;

}


.comentario-form-footer{

    margin-top:12px;

    display:flex;

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

    gap:20px;

}


.comentario-form-footer small{

    color:#999;

    font-size:11px;

}


.btn-enviar-comentario{

    min-height:42px;

    padding:0 18px;

    border:0;

    border-radius:5px;

    background:#b47a27;

    color:#fff;

    font-family:inherit;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

}


.btn-enviar-comentario:hover{

    background:#95621e;

}


/* =====================================================
   VISITANTE SIN SESIÓN
===================================================== */

.comentario-login{

    margin-bottom:35px;

    padding:22px;

    border:1px solid #e3ded6;

    border-radius:7px;

    background:#faf9f7;

    display:flex;

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

    gap:25px;

}


.comentario-login strong{

    color:#333;

    font-size:14px;

}


.comentario-login p{

    margin:5px 0 0;

    color:#888;

    font-size:12px;

    text-align:left;

}


.comentario-login-botones{

    display:flex;

    gap:8px;

}


.btn-login-comentario,
.btn-registro-comentario{

    padding:10px 14px;

    border-radius:4px;

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

    text-decoration:none !important;

}


.btn-login-comentario{

    background:#b47a27;

    color:#fff !important;

}


.btn-registro-comentario{

    border:1px solid #b47a27;

    color:#95621e !important;

}


/* =====================================================
   LISTA
===================================================== */

.lista-comentarios{

    border-top:1px solid #eee;

}


.comentario-item{

    padding:
        22px
        0;

    border-bottom:1px solid #eee;

    display:flex;

    align-items:flex-start;

    gap:15px;

}


/* AVATAR */

.comentario-avatar{

    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:50%;

    background:#eee7dd;

    display:flex;

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

    color:#95621e;

    font-size:16px;

    font-weight:700;

}


/* CONTENIDO */

.comentario-contenido{

    min-width:0;

    flex:1;

}


.comentario-cabecera{

    margin-bottom:7px;

    display:flex;

    justify-content:space-between;

    gap:15px;

}


.comentario-cabecera strong{

    color:#333;

    font-size:13px;

}


.comentario-cabecera time{

    color:#aaa;

    font-size:10px;

}


.comentario-contenido p{

    margin:0;

    color:#555;

    font-size:14px;

    line-height:1.7;

    text-align:left;

    overflow-wrap:anywhere;

}


/* =====================================================
   SIN COMENTARIOS
===================================================== */

.sin-comentarios{

    padding:
        45px
        20px;

    text-align:center;

}


.sin-comentarios > span{

    display:block;

    margin-bottom:10px;

    font-size:28px;

}


.sin-comentarios h3{

    margin:
        0
        0
        7px;

    color:#444;

    font-size:17px;

}


.sin-comentarios p{

    margin:0;

    color:#999;

    font-size:12px;

    text-align:center;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:650px){

    .comentarios-titulo{

        align-items:flex-start;

        flex-direction:column;

        gap:5px;

    }


    .comentario-form-footer{

        align-items:stretch;

        flex-direction:column;

    }


    .btn-enviar-comentario{

        width:100%;

    }


    .comentario-login{

        align-items:stretch;

        flex-direction:column;

    }


    .comentario-login-botones{

        width:100%;

    }


    .btn-login-comentario,
    .btn-registro-comentario{

        flex:1;

        text-align:center;

    }


    .comentario-cabecera{

        flex-direction:column;

        gap:3px;

    }

}

/* =====================================================
   ORDEN: COMENTARIOS PRIMERO / FORMULARIO DESPUÉS
===================================================== */

.lista-comentarios{

    margin-bottom:35px;

}


.zona-nuevo-comentario{

    margin-top:30px;

}


.titulo-nuevo-comentario{

    margin-bottom:15px;

    display:flex;

    align-items:center;

    gap:12px;

}


.titulo-nuevo-comentario > span{

    color:#b47a27;

    font-size:22px;

}


.titulo-nuevo-comentario strong{

    display:block;

    color:#333;

    font-size:14px;

}


.titulo-nuevo-comentario small{

    display:block;

    margin-top:3px;

    color:#999;

    font-size:11px;

}


/* QUITAMOS EL MARGEN ANTIGUO DEL FORMULARIO */

.zona-nuevo-comentario .form-comentario{

    margin-bottom:0;

}


/* =====================================================
   FILTROS - MIS HISTORIAS
===================================================== */

.filtros-mis-historias{

    width:100%;

    margin:
        25px
        0
        35px;

    padding-bottom:1px;

    border-bottom:
        1px solid
        #e3ded6;

    display:flex;

    align-items:center;

    gap:5px;

    overflow-x:auto;

}


.filtros-mis-historias a{

    min-height:45px;

    padding:
        0
        16px;

    display:flex;

    align-items:center;

    gap:7px;

    border-bottom:
        2px solid
        transparent;

    color:#777;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    transition:.2s;

}


.filtros-mis-historias a:hover{

    color:#95621e;

}


.filtros-mis-historias a span{

    min-width:21px;
    height:21px;

    padding:
        0
        6px;

    border-radius:11px;

    background:#eeeae4;

    display:flex;

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

    color:#777;

    font-size:10px;

}


.filtros-mis-historias
a.filtro-activo{

    border-bottom-color:#b47a27;

    color:#95621e;

}


.filtros-mis-historias
a.filtro-activo span{

    background:#b47a27;

    color:#fff;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:650px){

    .filtros-mis-historias{

        margin:
            20px
            0
            28px;

        justify-content:flex-start;

    }


    .filtros-mis-historias a{

        padding:
            0
            12px;

        font-size:12px;

    }

}

/* =====================================================
   EDITAR HISTORIA
===================================================== */

.editar-historia-seccion{

    width:100%;

    max-width:850px;

    margin:auto;

    padding:
        45px
        20px
        70px;

}


.editar-historia-cabecera{

    margin-bottom:30px;

}


.editar-historia-cabecera h1{

    margin:
        5px
        0
        10px;

    font-size:30px;

    font-weight:500;

}


.editar-historia-cabecera p{

    max-width:650px;

    margin:0;

    color:#777;

    font-size:14px;

    line-height:1.7;

    text-align:left;

}


/* ESTADO */

.aviso-estado-edicion{

    margin-bottom:25px;

    padding:15px 18px;

    border:1px solid #e5dfd7;

    border-radius:6px;

    background:#faf9f7;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:13px;

}


.edicion-publicada{

    color:#398052;

}


.edicion-pendiente{

    color:#a36d20;

}


.edicion-rechazada{

    color:#a64545;

}


/* RECHAZO */

.aviso-rechazo-edicion{

    margin-bottom:25px;

    padding:18px;

    border-left:4px solid #a64545;

    background:#fff5f5;

}


.aviso-rechazo-edicion strong{

    display:block;

    margin-bottom:5px;

}


.aviso-rechazo-edicion p{

    margin:0;

    font-size:13px;

    text-align:left;

}


/* FORMULARIO */

.form-editar-historia{

    padding:30px;

    border:1px solid #e3ded6;

    border-radius:8px;

    background:#fff;

}


.campo-editar{

    margin-bottom:25px;

}


.campo-editar label{

    display:block;

    margin-bottom:8px;

    color:#333;

    font-size:13px;

    font-weight:700;

}


.campo-editar label span{

    color:#999;

    font-weight:400;

}


.campo-editar input[type="text"],
.campo-editar select,
.campo-editar textarea{

    width:100%;

    padding:13px 14px;

    border:1px solid #d9d3ca;

    border-radius:5px;

    outline:none;

    background:#fff;

    color:#333;

    font-family:inherit;

    font-size:14px;

}


.campo-editar textarea{

    min-height:300px;

    line-height:1.7;

    resize:vertical;

}


.campo-editar input:focus,
.campo-editar select:focus,
.campo-editar textarea:focus{

    border-color:#b47a27;

}


.campo-editar small{

    display:block;

    margin-top:7px;

    color:#999;

    font-size:11px;

}


/* IMAGEN */

.imagen-actual-edicion{

    padding:12px;

    border:1px solid #e3ded6;

    border-radius:6px;

    display:flex;

    align-items:center;

    gap:18px;

}


.imagen-actual-edicion img{

    width:150px;
    height:90px;

    margin:0;

    border-radius:5px;

    object-fit:cover;

}


.imagen-actual-edicion strong{

    display:block;

    margin-bottom:5px;

}


.imagen-actual-edicion p{

    margin:0;

    color:#888;

    font-size:12px;

    text-align:left;

}


/* ANÓNIMO */

.opcion-anonimo-edicion{

    margin-bottom:25px;

    padding:18px;

    border:1px solid #e3ded6;

    border-radius:6px;

    display:flex;

    align-items:flex-start;

    gap:12px;

    cursor:pointer;

}


.opcion-anonimo-edicion input{

    margin-top:4px;

}


.opcion-anonimo-edicion strong,
.opcion-anonimo-edicion small{

    display:block;

}


.opcion-anonimo-edicion small{

    margin-top:4px;

    color:#888;

}


/* AVISO */

.aviso-revision-edicion{

    margin-bottom:25px;

    padding:18px;

    border-left:4px solid #b47a27;

    background:#faf6ef;

}


.aviso-revision-edicion p{

    margin:
        5px
        0
        0;

    font-size:12px;

    line-height:1.6;

    text-align:left;

}


/* BOTONES */

.acciones-editar-historia{

    display:flex;

    justify-content:flex-end;

    gap:10px;

}


.btn-cancelar-edicion,
.btn-guardar-edicion{

    padding:
        12px
        18px;

    border-radius:5px;

    font-family:inherit;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

}


.btn-cancelar-edicion{

    border:1px solid #ccc;

    color:#666 !important;

    text-decoration:none !important;

}


.btn-guardar-edicion{

    border:0;

    background:#b47a27;

    color:#fff;

}


/* BOTÓN EN MIS HISTORIAS */

.btn-editar-historia{

    padding:
        8px
        12px;

    border:1px solid #d7c8b3;

    border-radius:4px;

    color:#95621e !important;

    font-size:11px;

    font-weight:700;

    text-decoration:none !important;

}


/* MÓVIL */

@media(max-width:650px){

    .editar-historia-seccion{

        padding:
            30px
            5px
            50px;

    }


    .form-editar-historia{

        padding:
            22px
            16px;

    }


    .imagen-actual-edicion{

        align-items:flex-start;

        flex-direction:column;

    }


    .imagen-actual-edicion img{

        width:100%;
        height:auto;

        max-height:220px;

    }


    .acciones-editar-historia{

        flex-direction:column-reverse;

    }


    .btn-cancelar-edicion,
    .btn-guardar-edicion{

        width:100%;

        text-align:center;

    }

}

/* =====================================================
   ADMIN - LISTADO MEJORADO DE HISTORIAS
===================================================== */

.admin-filtros{

    display:flex;

    align-items:center;

    gap:5px;

    margin:
        25px
        0;

    border-bottom:
        1px solid #ddd;

    overflow-x:auto;

}


.admin-filtros a{

    min-height:48px;

    padding:
        0
        16px;

    display:flex;

    align-items:center;

    gap:8px;

    color:#777;

    text-decoration:none;

    white-space:nowrap;

    border-bottom:
        2px solid
        transparent;

}


.admin-filtros a.activo{

    color:#9a681f;

    border-bottom-color:#b47a27;

}


.admin-filtro-contador{

    min-width:22px;

    height:22px;

    padding:
        0
        6px;

    border-radius:20px;

    background:#ece8e2;

    display:inline-flex;

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

    font-size:10px;

}


.admin-filtros a.activo
.admin-filtro-contador{

    background:#b47a27;

    color:#fff;

}


/* FILA */

.admin-fila-historia{

    display:grid;

    grid-template-columns:
        160px
        minmax(0, 1fr)
        auto;

    gap:22px;

    align-items:center;

    padding:20px;

}


/* IMAGEN */

.admin-historia-imagen{

    width:160px;
    height:115px;

    overflow:hidden;

    border-radius:6px;

    background:#eee;

}


.admin-historia-imagen img{

    width:100%;
    height:100%;

    margin:0;

    display:block;

    object-fit:cover;

}


/* PARTE SUPERIOR */

.admin-historia-superior{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:7px;

}


.admin-estado-historia{

    padding:
        4px
        8px;

    border-radius:20px;

    font-size:9px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}


.admin-estado-pendiente{

    background:#fff1d7;

    color:#9b681d;

}


.admin-estado-publicada{

    background:#e6f4ea;

    color:#347648;

}


.admin-estado-rechazada{

    background:#fbe8e8;

    color:#a33f3f;

}


/* RESUMEN */

.admin-historia-resumen{

    margin:
        8px
        0
        12px !important;

}


/* META */

.admin-meta{

    display:flex;

    flex-wrap:wrap;

    gap:
        5px
        15px;

}


/* ESTADÍSTICAS */

.admin-historia-estadisticas{

    margin-top:12px;

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    color:#888;

    font-size:11px;

}


/* RECHAZO */

.admin-motivo-rechazo{

    margin-top:12px;

    padding:10px 12px;

    border-left:
        3px solid
        #a33f3f;

    background:#fff5f5;

    color:#775555;

    font-size:11px;

    line-height:1.5;

}


/* ACCIONES */

.admin-historia-acciones{

    min-width:135px;

    display:flex;

    flex-direction:column;

    gap:8px;

}


.admin-btn-revisar,
.admin-btn-ver-publica{

    padding:
        10px
        14px;

    border-radius:4px;

    text-align:center;

    font-size:11px;

    font-weight:700;

    text-decoration:none !important;

}


.admin-btn-revisar{

    background:#b47a27;

    color:#fff !important;

}


.admin-btn-ver-publica{

    border:
        1px solid
        #d5c5ae;

    color:#8d6021 !important;

    background:#fff;

}


/* =====================================================
   ADMIN MÓVIL
===================================================== */

@media(max-width:750px){

    .admin-fila-historia{

        grid-template-columns:1fr;

        gap:15px;

    }


    .admin-historia-imagen{

        width:100%;
        height:190px;

    }


    .admin-historia-acciones{

        width:100%;

        flex-direction:row;

    }


    .admin-historia-acciones a{

        flex:1;

    }

}


@media(max-width:450px){

    .admin-historia-acciones{

        flex-direction:column;

    }

}

/* =====================================================
   MENSAJES ADMINISTRACIÓN
===================================================== */

.admin-mensaje{

    width:100%;

    margin:
        0
        0
        25px;

    padding:
        15px
        18px;

    border-radius:5px;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:13px;

}


.admin-mensaje span{

    width:25px;
    height:25px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

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

    font-weight:bold;

}


.admin-mensaje p{

    margin:0;

}


/* APROBADA */

.admin-mensaje-exito{

    border:
        1px solid
        #cce3d3;

    background:#edf8f0;

    color:#346344;

}


.admin-mensaje-exito span{

    background:#438458;

    color:#fff;

}


/* RECHAZADA */

.admin-mensaje-rechazo{

    border:
        1px solid
        #ead0d0;

    background:#fff3f3;

    color:#884747;

}


.admin-mensaje-rechazo span{

    background:#a84c4c;

    color:#fff;

}


/* ERROR */

.admin-mensaje-error{

    border:
        1px solid
        #ead7b7;

    background:#fff8e9;

    color:#805d25;

}


.admin-mensaje-error span{

    background:#b47a27;

    color:#fff;

}

/* =====================================================
   ADMIN - COMENTARIOS
===================================================== */

.admin-lista-comentarios{

    display:flex;

    flex-direction:column;

}


.admin-comentario-card{

    padding:
        22px
        20px;

    border-bottom:
        1px solid
        #e8e4de;

    background:#fff;

}


.admin-comentario-card:last-child{

    border-bottom:0;

}


/* CABECERA */

.admin-comentario-cabecera{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:15px;

}


.admin-comentario-cabecera strong{

    color:#333;

    font-size:14px;

}


.admin-comentario-cabecera span{

    margin-left:5px;

    color:#999;

    font-size:11px;

}


/* ESTADO */

.admin-estado-comentario{

    padding:
        5px
        9px;

    border-radius:20px;

    font-size:9px !important;

    font-weight:700;

    text-transform:uppercase;

}


.admin-estado-comentario.comentario-visible{

    background:#e6f4ea;

    color:#347648;

}


.admin-estado-comentario.comentario-oculto{

    background:#f3e8e8;

    color:#9a4545;

}


/* TEXTO */

.admin-comentario-texto{

    padding:
        15px
        17px;

    border-left:
        3px solid
        #d7c4a7;

    background:#faf9f7;

    color:#555;

    font-size:14px;

    line-height:1.7;

}


/* META */

.admin-comentario-meta{

    margin-top:13px;

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    gap:10px;

    color:#999;

    font-size:10px;

}


.admin-comentario-meta strong{

    color:#777;

}


/* ACCIONES */

.admin-comentario-acciones{

    margin-top:18px;

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


.admin-comentario-acciones form{

    margin:0;

}


.admin-btn-ver-comentario,
.admin-btn-ocultar,
.admin-btn-mostrar{

    min-height:38px;

    padding:
        0
        14px;

    border-radius:4px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-family:inherit;

    font-size:11px;

    font-weight:700;

    cursor:pointer;

    text-decoration:none !important;

}


.admin-btn-ver-comentario{

    border:
        1px solid
        #d5c5ae;

    background:#fff;

    color:#8d6021 !important;

}


.admin-btn-ocultar{

    border:
        1px solid
        #dfc4c4;

    background:#fff5f5;

    color:#9a4545;

}


.admin-btn-mostrar{

    border:0;

    background:#4e7f5c;

    color:#fff;

}


/* MÓVIL */

@media(max-width:650px){

    .admin-comentario-cabecera{

        align-items:flex-start;

        flex-direction:column;

        gap:8px;

    }


    .admin-comentario-meta{

        flex-direction:column;

    }


    .admin-comentario-acciones{

        align-items:stretch;

        flex-direction:column;

    }


    .admin-comentario-acciones form{

        width:100%;

    }


    .admin-btn-ver-comentario,
    .admin-btn-ocultar,
    .admin-btn-mostrar{

        width:100%;

    }

}

/* =====================================================
   DETALLE ESTADÍSTICAS ADMIN
===================================================== */

.admin-estadistica-detalle{

    margin-top:5px;

    padding:3px 7px;

    border-radius:20px;

    background:#f4e7e7;

    color:#9b4b4b;

    font-size:9px;

    font-weight:700;

}

/* =====================================================
   ADMIN - USUARIOS
===================================================== */

.admin-total-usuarios{

    padding:
        12px
        20px;

    border:
        1px solid
        #e2ddd5;

    border-radius:6px;

    background:#fff;

    text-align:center;

}


.admin-total-usuarios strong{

    display:block;

    color:#a46d20;

    font-size:24px;

}


.admin-total-usuarios span{

    color:#888;

    font-size:10px;

}


/* BUSCADOR */

.admin-buscador-usuarios{

    margin:
        20px
        0
        25px;

    display:flex;

    gap:8px;

}


.admin-buscador-usuarios input{

    min-width:0;

    flex:1;

    padding:
        12px
        14px;

    border:
        1px solid
        #ddd7cf;

    border-radius:5px;

    outline:none;

    font-family:inherit;

}


.admin-buscador-usuarios input:focus{

    border-color:#b47a27;

}


.admin-buscador-usuarios button,
.admin-buscador-usuarios a{

    padding:
        0
        18px;

    border-radius:5px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:inherit;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.admin-buscador-usuarios button{

    border:0;

    background:#b47a27;

    color:#fff;

    cursor:pointer;

}


.admin-buscador-usuarios a{

    border:
        1px solid
        #ddd7cf;

    color:#777;

    background:#fff;

}


/* LISTADO */

.admin-lista-usuarios{

    display:flex;

    flex-direction:column;

}


.admin-usuario-card{

    padding:20px;

    border-bottom:
        1px solid
        #e8e4de;

    display:grid;

    grid-template-columns:
        55px
        minmax(0,1fr)
        auto;

    gap:18px;

    align-items:center;

}


.admin-usuario-card:last-child{

    border-bottom:0;

}


/* AVATAR */

.admin-usuario-avatar{

    width:52px;
    height:52px;

    border-radius:50%;

    background:#eee7dc;

    color:#9b681f;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

}


/* INFORMACIÓN */

.admin-usuario-nombre{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

}


.admin-usuario-nombre h3{

    margin:0;

    color:#333;

    font-size:15px;

}


.admin-usuario-nombre span{

    color:#999;

    font-size:11px;

}


.admin-usuario-email{

    margin-top:4px;

    color:#888;

    font-size:11px;

}


/* ESTADÍSTICAS */

.admin-usuario-estadisticas{

    margin-top:13px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.admin-usuario-estadisticas span{

    padding:
        5px
        9px;

    border-radius:4px;

    background:#f7f5f2;

    color:#888;

    font-size:10px;

}


.admin-usuario-estadisticas strong{

    margin-right:3px;

    color:#555;

}


/* MÓVIL */

@media(max-width:700px){

    .admin-total-usuarios{

        margin-top:15px;

    }


    .admin-buscador-usuarios{

        flex-wrap:wrap;

    }


    .admin-buscador-usuarios input{

        width:100%;

        flex-basis:100%;

    }


    .admin-buscador-usuarios button,
    .admin-buscador-usuarios a{

        min-height:40px;

        flex:1;

    }


    .admin-usuario-card{

        grid-template-columns:
            50px
            minmax(0,1fr);

    }


    .admin-usuario-acciones{

        grid-column:
            1 / -1;

    }


    .admin-usuario-acciones a{

        width:100%;

        display:flex;

        justify-content:center;

    }

}


/* =====================================================
   ADMIN - PERFIL / ACTIVIDAD DE USUARIO
===================================================== */

.admin-perfil-usuario{

    margin-bottom:25px;

    padding:28px;

    border:1px solid #e2ddd5;

    border-radius:7px;

    background:#fff;

    display:flex;

    align-items:center;

    gap:22px;

}


.admin-perfil-avatar{

    width:75px;
    height:75px;

    flex-shrink:0;

    border-radius:50%;

    background:#eee7dc;

    color:#9b681f;

    display:flex;

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

    font-size:28px;

    font-weight:700;

}


.admin-perfil-datos h1{

    margin:
        4px
        0
        8px;

    color:#333;

    font-size:27px;

}


.admin-perfil-detalles{

    display:flex;

    flex-wrap:wrap;

    gap:
        6px
        18px;

    color:#888;

    font-size:11px;

}


/* =====================================================
   RESUMEN
===================================================== */

.admin-usuario-resumen{

    margin-bottom:25px;

    display:grid;

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

    gap:10px;

}


.admin-usuario-resumen div{

    padding:
        18px
        10px;

    border:1px solid #e2ddd5;

    border-radius:6px;

    background:#fff;

    text-align:center;

}


.admin-usuario-resumen strong{

    display:block;

    margin-bottom:4px;

    color:#a46d20;

    font-size:24px;

}


.admin-usuario-resumen span{

    color:#888;

    font-size:10px;

}


/* =====================================================
   SECCIONES ACTIVIDAD
===================================================== */

.admin-actividad-seccion{

    margin-bottom:25px;

}


.admin-actividad-lista{

    display:flex;

    flex-direction:column;

}


.admin-actividad-historia{

    padding:20px;

    border-bottom:
        1px solid
        #e8e4de;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

}


.admin-actividad-historia:last-child{

    border-bottom:0;

}


.admin-actividad-principal{

    min-width:0;

    flex:1;

}


.admin-actividad-superior{

    margin-bottom:7px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

}


.admin-actividad-historia h3{

    margin:
        0
        0
        9px;

    color:#333;

    font-size:15px;

}


.admin-actividad-meta{

    display:flex;

    flex-wrap:wrap;

    gap:
        5px
        15px;

    color:#999;

    font-size:10px;

}


.admin-actividad-acciones{

    min-width:125px;

    display:flex;

    flex-direction:column;

    gap:7px;

}


/* =====================================================
   COMENTARIOS DEL USUARIO
===================================================== */

.admin-actividad-comentarios{

    display:flex;

    flex-direction:column;

}


.admin-actividad-comentario{

    padding:20px;

    border-bottom:
        1px solid
        #e8e4de;

}


.admin-actividad-comentario:last-child{

    border-bottom:0;

}


.admin-actividad-comentario-superior{

    margin-bottom:12px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.admin-actividad-comentario-superior > span:last-child{

    color:#999;

    font-size:10px;

}


.admin-actividad-comentario p{

    margin:0;

    padding:
        13px
        15px;

    border-left:
        3px solid
        #d7c4a7;

    background:#faf9f7;

    color:#555;

    font-size:13px;

    line-height:1.7;

    text-align:left;

}


.admin-actividad-comentario-pie{

    margin-top:11px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    color:#999;

    font-size:10px;

}


.admin-actividad-comentario-pie strong{

    color:#666;

}


.admin-actividad-comentario-pie a{

    color:#98651e;

    font-weight:700;

    text-decoration:none;

}


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

@media(max-width:800px){

    .admin-usuario-resumen{

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

    }

}


@media(max-width:650px){

    .admin-perfil-usuario{

        padding:20px;

        align-items:flex-start;

    }


    .admin-perfil-avatar{

        width:58px;
        height:58px;

        font-size:22px;

    }


    .admin-perfil-datos h1{

        font-size:22px;

    }


    .admin-usuario-resumen{

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

    }


    .admin-actividad-historia{

        align-items:stretch;

        flex-direction:column;

    }


    .admin-actividad-acciones{

        width:100%;

        flex-direction:row;

    }


    .admin-actividad-acciones a{

        flex:1;

        text-align:center;

    }


    .admin-actividad-comentario-pie{

        align-items:flex-start;

        flex-direction:column;

    }

}


@media(max-width:420px){

    .admin-perfil-usuario{

        flex-direction:column;

    }


    .admin-usuario-resumen{

        grid-template-columns:
            1fr
            1fr;

    }


    .admin-actividad-acciones{

        flex-direction:column;

    }

}

/* =====================================================
   PÁGINA CATEGORÍAS
===================================================== */

.categorias-pagina{

    padding-top:45px;
    padding-bottom:70px;

}


/* =====================================================
   CABECERA GENERAL
===================================================== */

.categorias-cabecera{

    max-width:700px;

    margin:
        0 auto
        45px;

    text-align:center;

}


.categorias-cabecera h1{

    margin:
        8px
        0
        14px;

    font-size:34px;

    font-weight:500;

}


.categorias-cabecera p{

    max-width:620px;

    margin:auto;

    color:#777;

    line-height:1.7;

}


/* =====================================================
   GRID CATEGORÍAS
===================================================== */

.grid-categorias-pagina{

    display:grid;

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

    gap:18px;

}


.categoria-pagina-card{

    min-height:230px;

    padding:30px 25px;

    border:
        1px solid
        #e2ddd5;

    border-radius:8px;

    background:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    text-decoration:none !important;

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

}


.categoria-pagina-card:hover{

    transform:
        translateY(-4px);

    border-color:#d0b68e;

    box-shadow:
        0
        10px
        28px
        rgba(0,0,0,.07);

}


.categoria-pagina-icono{

    width:55px;
    height:55px;

    margin-bottom:15px;

    border-radius:50%;

    background:#f5efe6;

    display:flex;

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

    font-size:24px;

}


.categoria-pagina-card h2{

    margin:
        0
        0
        8px;

    color:#333;

    font-size:19px;

    font-weight:600;

}


.categoria-total{

    color:#999;

    font-size:11px;

}


.categoria-explorar{

    margin-top:18px;

    color:#a56e22;

    font-size:11px;

    font-weight:700;

}


/* =====================================================
   CABECERA DE UNA CATEGORÍA
===================================================== */

.categoria-cabecera{

    margin-bottom:35px;

    padding-bottom:25px;

    border-bottom:
        1px solid
        #e4dfd8;

}


.volver-categorias{

    margin-bottom:25px;

    display:inline-block;

    color:#96703a;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.categoria-cabecera h1{

    margin:
        7px
        0
        8px;

    font-size:34px;

    font-weight:500;

}


.categoria-cabecera p{

    margin:0;

    color:#888;

    font-size:13px;

    text-align:left;

}


/* =====================================================
   HISTORIAS POR CATEGORÍA
===================================================== */

.grid-historias-categoria{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:22px;

}


.historia-categoria-card{

    overflow:hidden;

    border:
        1px solid
        #e2ddd5;

    border-radius:8px;

    background:#fff;

    display:flex;

    flex-direction:column;

}


.historia-categoria-imagen{

    width:100%;
    height:220px;

    display:block;

    overflow:hidden;

    background:#eee;

}


.historia-categoria-imagen img{

    width:100%;
    height:100%;

    margin:0;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}


.historia-categoria-card:hover
.historia-categoria-imagen img{

    transform:
        scale(1.03);

}


/* CONTENIDO */

.historia-categoria-contenido{

    padding:
        22px
        22px
        18px;

    flex:1;

    display:flex;

    flex-direction:column;

}


.historia-categoria-etiqueta{

    margin-bottom:8px;

    color:#a36d20;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.historia-categoria-contenido h2{

    margin:
        0
        0
        10px;

    font-size:19px;

    line-height:1.35;

}


.historia-categoria-contenido h2 a{

    color:#333;

    text-decoration:none;

}


.historia-categoria-contenido > p{

    margin:
        0
        0
        16px;

    color:#777;

    font-size:13px;

    line-height:1.65;

    text-align:left;

}


/* META */

.historia-categoria-meta{

    margin-top:auto;

    padding-top:12px;

    border-top:
        1px solid
        #eeeae5;

    display:flex;

    justify-content:space-between;

    gap:10px;

    color:#999;

    font-size:10px;

}


/* PIE */

.historia-categoria-pie{

    margin-top:13px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.historia-categoria-pie > div{

    display:flex;

    gap:12px;

    color:#999;

    font-size:10px;

}


.historia-categoria-pie > a{

    color:#9d681e;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


/* =====================================================
   SIN HISTORIAS
===================================================== */

.categoria-sin-historias,
.categoria-no-encontrada{

    max-width:650px;

    margin:
        40px auto;

    padding:
        55px
        30px;

    border:
        1px solid
        #e2ddd5;

    border-radius:8px;

    background:#fff;

    text-align:center;

}


.categoria-sin-historias > span{

    display:block;

    margin-bottom:15px;

    color:#b47a27;

    font-size:30px;

}


.categoria-sin-historias h2,
.categoria-no-encontrada h1{

    margin:
        0
        0
        12px;

}


.categoria-sin-historias p,
.categoria-no-encontrada p{

    max-width:500px;

    margin:
        0 auto
        25px;

    color:#888;

    line-height:1.7;

}


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

@media(max-width:850px){

    .grid-categorias-pagina{

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

    }

}


@media(max-width:700px){

    .grid-historias-categoria{

        grid-template-columns:1fr;

    }


    .historia-categoria-imagen{

        height:230px;

    }

}


@media(max-width:520px){

    .categorias-pagina{

        padding-top:30px;

    }


    .categorias-cabecera h1,
    .categoria-cabecera h1{

        font-size:28px;

    }


    .grid-categorias-pagina{

        grid-template-columns:1fr;

    }


    .categoria-pagina-card{

        min-height:190px;

    }


    .historia-categoria-meta,
    .historia-categoria-pie{

        align-items:flex-start;

        flex-direction:column;

    }

}

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

.icono-buscar{
    width:19px;
    height:19px;
    display:block;
    transition:transform .2s ease;
}

.buscar:hover .icono-buscar{
    transform:scale(1.08);
}

/* =====================================================
   LUPA DEL MENÚ
===================================================== */

.menu-buscador{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-width:42px;

}


.menu-buscador .menu-icono-lupa{

    display:block !important;

    width:21px !important;

    height:21px !important;

    min-width:21px;

    fill:none !important;

    stroke:#4f463d !important;

    stroke-width:1.8 !important;

    stroke-linecap:round;

    stroke-linejoin:round;

}


.menu-buscador:hover .menu-icono-lupa,
.menu-buscador.activo .menu-icono-lupa{

    stroke:#a46d20 !important;

}

/* =====================================================
   PÁGINA BUSCAR
===================================================== */

.buscar-pagina{

    padding-top:45px;
    padding-bottom:70px;

}


/* CABECERA */

.buscar-cabecera{

    max-width:780px;

    margin:
        0 auto
        45px;

    text-align:center;

}


.buscar-cabecera h1{

    margin:
        8px
        0
        12px;

    font-size:34px;

    font-weight:500;

}


.buscar-cabecera > p{

    margin:
        0 auto
        28px;

    max-width:600px;

    color:#777;

    line-height:1.7;

}


/* =====================================================
   FORMULARIO
===================================================== */

.formulario-busqueda{

    width:100%;

    display:flex;

    gap:9px;

}


.campo-busqueda{

    min-width:0;

    flex:1;

    position:relative;

}


.campo-busqueda input{

    width:100%;
    height:52px;

    padding:
        0
        45px
        0
        48px;

    border:
        1px solid
        #dcd5cb;

    border-radius:6px;

    background:#fff;

    color:#444;

    font-family:inherit;

    font-size:14px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.campo-busqueda input:focus{

    border-color:#b48646;

    box-shadow:
        0
        0
        0
        3px
        rgba(180,134,70,.10);

}


.campo-busqueda-icono{

    width:20px;
    height:20px;

    position:absolute;

    left:17px;
    top:50%;

    transform:
        translateY(-50%);

    fill:none;

    stroke:#82786d;

    stroke-width:1.7;

    stroke-linecap:round;

    pointer-events:none;

}


.limpiar-busqueda{

    width:32px;
    height:32px;

    position:absolute;

    right:10px;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    display:flex;

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

    color:#999;

    font-size:21px;

    text-decoration:none;

}


.limpiar-busqueda:hover{

    background:#f1eee9;

    color:#555;

}


.btn-buscar-historias{

    min-width:115px;
    height:52px;

    padding:
        0
        22px;

    border:0;

    border-radius:6px;

    background:#a86f20;

    color:#fff;

    font-family:inherit;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease;

}


.btn-buscar-historias:hover{

    background:#8e5c18;

}


/* =====================================================
   ESTADO INICIAL / SIN RESULTADOS
===================================================== */

.buscar-inicial,
.buscar-sin-resultados{

    max-width:650px;

    margin:
        20px auto;

    padding:
        50px
        30px;

    border:
        1px solid
        #e2ddd5;

    border-radius:8px;

    background:#fff;

    text-align:center;

}


.buscar-inicial-icono{

    width:55px;
    height:55px;

    margin:
        0 auto
        17px;

    border-radius:50%;

    background:#f5efe6;

    color:#a46d20;

    display:flex;

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

    font-size:22px;

}


.buscar-inicial h2,
.buscar-sin-resultados h2{

    margin:
        0
        0
        12px;

    color:#333;

    font-size:23px;

}


.buscar-inicial p,
.buscar-sin-resultados p{

    max-width:500px;

    margin:
        0 auto
        25px;

    color:#777;

    font-size:13px;

    line-height:1.8;

}


.buscar-sin-botones{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

}


/* =====================================================
   RESULTADOS
===================================================== */

.resultados-busqueda{

    margin-top:20px;

}


.resultados-cabecera{

    margin-bottom:25px;

    padding-bottom:18px;

    border-bottom:
        1px solid
        #e3ddd5;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

}


.resultados-cabecera h2{

    margin:
        6px
        0
        0;

    color:#333;

    font-size:24px;

    font-weight:500;

}


.resultados-total{

    color:#999;

    font-size:11px;

    white-space:nowrap;

}


/* =====================================================
   TARJETA RESULTADO
===================================================== */

.lista-resultados-busqueda{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.resultado-historia{

    min-height:230px;

    overflow:hidden;

    border:
        1px solid
        #e2ddd5;

    border-radius:8px;

    background:#fff;

    display:grid;

    grid-template-columns:
        290px
        minmax(0,1fr);

}


.resultado-historia-imagen{

    min-height:230px;

    overflow:hidden;

    display:block;

    background:#eee;

}


.resultado-historia-imagen img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}


.resultado-historia:hover
.resultado-historia-imagen img{

    transform:
        scale(1.03);

}


.resultado-historia-contenido{

    padding:
        24px
        26px;

    display:flex;

    flex-direction:column;

}


.resultado-superior{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.resultado-categoria{

    color:#a36d20;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.resultado-fecha{

    color:#aaa;

    font-size:10px;

}


.resultado-historia-contenido h3{

    margin:
        9px
        0
        10px;

    font-size:21px;

    line-height:1.35;

}


.resultado-historia-contenido h3 a{

    color:#333;

    text-decoration:none;

}


.resultado-historia-contenido h3 a:hover{

    color:#9b671e;

}


.resultado-historia-contenido > p{

    margin:
        0
        0
        15px;

    color:#777;

    font-size:13px;

    line-height:1.7;

    text-align:left;

}


.resultado-meta{

    margin-top:auto;

    padding-top:12px;

    border-top:
        1px solid
        #eeeae5;

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

    color:#999;

    font-size:10px;

}


.resultado-meta strong{

    color:#666;

}


.resultado-meta > div{

    display:flex;

    gap:13px;

}


.resultado-leer{

    margin-top:13px;

    align-self:flex-start;

    color:#99651e;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


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

@media(max-width:800px){

    .resultado-historia{

        grid-template-columns:
            230px
            minmax(0,1fr);

    }

}


@media(max-width:650px){

    .buscar-pagina{

        padding-top:30px;

    }


    .buscar-cabecera h1{

        font-size:28px;

    }


    .formulario-busqueda{

        flex-direction:column;

    }


    .btn-buscar-historias{

        width:100%;

    }


    .resultados-cabecera{

        align-items:flex-start;

        flex-direction:column;

    }


    .resultado-historia{

        grid-template-columns:1fr;

    }


    .resultado-historia-imagen{

        height:220px;
        min-height:0;

    }

}


@media(max-width:420px){

    .buscar-inicial,
    .buscar-sin-resultados{

        padding:
            38px
            20px;

    }


    .resultado-historia-contenido{

        padding:
            20px
            18px;

    }


    .resultado-historia-contenido h3{

        font-size:18px;

    }


    .resultado-meta{

        align-items:flex-start;

        flex-direction:column;

    }

}

/* =====================================================
   TODAS LAS HISTORIAS - PÁGINA PÚBLICA
===================================================== */

.historias-publicas{

    padding-top:45px;
    padding-bottom:70px;

}


/* =====================================================
   CABECERA
===================================================== */

.historias-publicas-cabecera{

    max-width:720px;

    margin:
        0 auto
        35px;

    text-align:center;

}


.historias-publicas-cabecera h1{

    margin:
        8px
        0
        12px;

    color:#333;

    font-size:34px;

    font-weight:500;

}


.historias-publicas-cabecera p{

    max-width:600px;

    margin:auto;

    color:#777;

    font-size:14px;

    line-height:1.8;

}


/* =====================================================
   FILTROS
===================================================== */

.historias-filtros{

    margin:
        0 auto
        15px;

    padding-bottom:15px;

    border-bottom:
        1px solid
        #e1dbd3;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

}


.historias-filtros a{

    padding:
        10px
        18px;

    border:
        1px solid
        #ddd6cc;

    border-radius:30px;

    background:#fff;

    color:#70685f;

    font-size:11px;

    font-weight:600;

    text-decoration:none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;

}


.historias-filtros a:hover{

    border-color:#ae7a32;

    color:#98631d;

}


.historias-filtros a.activo{

    border-color:#a86f20;

    background:#a86f20;

    color:#fff;

}


/* =====================================================
   TOTAL
===================================================== */

.historias-publicas-total{

    margin-bottom:22px;

    text-align:right;

}


.historias-publicas-total span{

    color:#999;

    font-size:11px;

}


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

.grid-historias-publicas{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:24px;

}


/* =====================================================
   TARJETA
===================================================== */

.historia-publica-card{

    min-width:0;

    overflow:hidden;

    border:
        1px solid
        #e1dbd3;

    border-radius:8px;

    background:#fff;

    display:flex;

    flex-direction:column;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.historia-publica-card:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0
        10px
        28px
        rgba(60,45,30,.07);

}


/* IMAGEN */

.historia-publica-imagen{

    width:100%;
    height:260px;

    overflow:hidden;

    display:block;

    background:#eee;

}


.historia-publica-imagen img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}


.historia-publica-card:hover
.historia-publica-imagen img{

    transform:
        scale(1.025);

}


/* =====================================================
   CONTENIDO
===================================================== */

.historia-publica-contenido{

    flex:1;

    padding:
        22px
        24px;

    display:flex;

    flex-direction:column;

}


.historia-publica-superior{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.historia-publica-categoria{

    color:#a26b1f;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.1px;

    text-transform:uppercase;

}


.historia-publica-fecha{

    color:#aaa;

    font-size:10px;

}


.historia-publica-contenido h2{

    margin:
        10px
        0
        11px;

    font-size:21px;

    font-weight:500;

    line-height:1.4;

}


.historia-publica-contenido h2 a{

    color:#333;

    text-decoration:none;

}


.historia-publica-contenido h2 a:hover{

    color:#98631d;

}


.historia-publica-resumen{

    margin:
        0
        0
        17px;

    color:#777;

    font-size:13px;

    line-height:1.75;

    text-align:left;

}


/* =====================================================
   AUTOR
===================================================== */

.historia-publica-autor{

    margin-top:auto;

    padding-top:13px;

    border-top:
        1px solid
        #eee9e3;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    color:#999;

    font-size:10px;

}


.historia-publica-autor strong{

    color:#625b54;

}


/* =====================================================
   FOOTER TARJETA
===================================================== */

.historia-publica-footer{

    margin-top:14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.historia-publica-stats{

    display:flex;

    align-items:center;

    gap:13px;

    color:#999;

    font-size:10px;

}


.historia-publica-leer{

    color:#99651e;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.historia-publica-leer:hover{

    text-decoration:underline;

}


/* =====================================================
   SIN HISTORIAS
===================================================== */

.historias-vacio{

    max-width:620px;

    margin:
        30px auto;

    padding:
        50px
        30px;

    border:
        1px solid
        #e1dbd3;

    border-radius:8px;

    background:#fff;

    text-align:center;

}


.historias-vacio-icono{

    width:55px;
    height:55px;

    margin:
        0 auto
        18px;

    border-radius:50%;

    background:#f5efe6;

    color:#a46d20;

    display:flex;

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

    font-size:22px;

}


.historias-vacio h2{

    margin:
        0
        0
        12px;

    color:#333;

    font-size:23px;

}


.historias-vacio p{

    max-width:480px;

    margin:
        0 auto
        25px;

    color:#777;

    font-size:13px;

    line-height:1.8;

}


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

@media(max-width:800px){

    .grid-historias-publicas{

        gap:18px;

    }


    .historia-publica-imagen{

        height:220px;

    }

}


@media(max-width:650px){

    .historias-publicas{

        padding-top:30px;

    }


    .historias-publicas-cabecera h1{

        font-size:28px;

    }


    .grid-historias-publicas{

        grid-template-columns:1fr;

    }


    .historia-publica-imagen{

        height:230px;

    }


    .historias-publicas-total{

        text-align:center;

    }

}


@media(max-width:420px){

    .historias-filtros{

        align-items:stretch;

        flex-direction:column;

    }


    .historias-filtros a{

        text-align:center;

    }


    .historia-publica-imagen{

        height:200px;

    }


    .historia-publica-contenido{

        padding:
            19px
            18px;

    }


    .historia-publica-contenido h2{

        font-size:19px;

    }


    .historia-publica-autor,
    .historia-publica-footer{

        align-items:flex-start;

        flex-direction:column;

    }

}

/* =====================================================
   HISTORIAS RELACIONADAS - COMPACTAS
===================================================== */

.historias-relacionadas{
    margin-top:40px;
    margin-bottom:40px;
    padding-top:30px;
    border-top:1px solid #e7e1d8;
}


/* CABECERA */

.relacionadas-cabecera{
    margin-bottom:18px;
}

.relacionadas-cabecera .mini-titulo{
    display:block;
    margin-bottom:5px;
}

.relacionadas-cabecera h2{
    margin:0 0 5px;
    font-size:23px;
    line-height:1.2;
    color:#2b2926;
}

.relacionadas-cabecera p{
    margin:0;
    color:#77716a;
    font-size:13px;
}


/* =====================================================
   LAS 3 EN UNA SOLA FILA
===================================================== */

.relacionadas-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
}


/* TARJETA */

.relacionada-card{
    min-width:0;
    background:#fff;
    border:1px solid #e8e2da;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(0,0,0,.04);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.relacionada-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}


/* IMAGEN MÁS PEQUEÑA */

.relacionada-imagen{
    display:block;
    width:100%;
    height:115px;
    overflow:hidden;
    background:#eee;
}

.relacionada-imagen img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}

.relacionada-card:hover .relacionada-imagen img{
    transform:scale(1.04);
}


/* CONTENIDO COMPACTO */

.relacionada-contenido{
    padding:12px 13px 13px;
}


/* CATEGORÍA Y FECHA */

.relacionada-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin-bottom:7px;
    font-size:10px;
}

.relacionada-meta span{
    color:#a56f22;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.relacionada-meta time{
    color:#99938b;
    white-space:nowrap;
}


/* TÍTULO */

.relacionada-contenido h3{
    margin:0 0 7px;
    font-size:15px;
    line-height:1.3;
}

.relacionada-contenido h3 a{
    color:#292724;
    text-decoration:none;
}

.relacionada-contenido h3 a:hover{
    color:#a56f22;
}


/* RESUMEN */

.relacionada-contenido p{
    margin:0 0 9px;
    color:#706b65;
    font-size:12px;
    line-height:1.45;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


/* LEER */

.relacionada-leer{
    display:inline-block;
    color:#9a681f;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.relacionada-leer:hover{
    text-decoration:underline;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:800px){

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

}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width:550px){

    .historias-relacionadas{
        margin-top:30px;
        margin-bottom:30px;
        padding-top:25px;
    }

    .relacionadas-cabecera h2{
        font-size:21px;
    }

    .relacionadas-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    /*
       En celular hacemos la tarjeta horizontal
       para que tampoco ocupe demasiado espacio.
    */

    .relacionada-card{
        display:grid;
        grid-template-columns:120px 1fr;
    }

    .relacionada-imagen{
        width:120px;
        height:100%;
        min-height:125px;
    }

    .relacionada-contenido{
        padding:11px;
    }

    .relacionada-meta time{
        display:none;
    }

    .relacionada-contenido h3{
        font-size:14px;
    }

    .relacionada-contenido p{
        font-size:11px;
        -webkit-line-clamp:2;
    }

}

/* =====================================================
   PERFIL PÚBLICO DE USUARIO
===================================================== */

.perfil-publico{
    padding:45px 35px 60px;
}


/* =====================================================
   CABECERA
===================================================== */

.perfil-publico-cabecera{
    display:flex;
    align-items:center;
    gap:28px;

    padding:30px;

    background:#faf8f4;

    border:1px solid #e5ded3;
    border-radius:12px;
}


/* =====================================================
   AVATAR
===================================================== */

.perfil-publico-avatar{
    width:115px;
    height:115px;

    flex-shrink:0;

    border-radius:50%;
    overflow:hidden;

    border:3px solid #b9781d;

    background:#eee5d8;
}


.perfil-publico-avatar img{
    width:100%;
    height:100%;

    object-fit:cover;
}


.perfil-avatar-inicial{
    width:100%;
    height:100%;

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

    font-size:42px;
    font-weight:600;

    color:#7b4c16;

    background:#f1e4d1;
}


/* =====================================================
   INFORMACIÓN
===================================================== */

.perfil-publico-info{
    flex:1;
}


.perfil-publico-info .mini-titulo{
    display:block;

    margin-bottom:6px;

    font-size:11px;
    letter-spacing:1.5px;

    color:#b9781d;
}


.perfil-publico-info h1{
    margin:0 0 3px;

    font-size:30px;
    font-weight:500;

    color:#24211e;
}


.perfil-publico-usuario{
    display:block;

    margin-bottom:14px;

    font-size:13px;

    color:#8a837a;
}


.perfil-publico-biografia{
    max-width:650px;

    margin:0 0 12px;

    font-size:14px;
    line-height:1.7;

    color:#5c5751;
}


.perfil-sin-biografia{
    font-style:italic;
    color:#999188;
}


.perfil-miembro-desde{
    font-size:11px;

    color:#999188;
}


/* =====================================================
   ESTADÍSTICAS
===================================================== */

.perfil-publico-estadisticas{
    display:grid;
    grid-template-columns:repeat(5,1fr);

    margin:22px 0 45px;

    border:1px solid #e6dfd5;
    border-radius:10px;

    overflow:hidden;

    background:#fff;
}


.perfil-publico-estadisticas > div{
    text-align:center;

    padding:20px 10px;

    border-right:1px solid #e6dfd5;
}


.perfil-publico-estadisticas > div:last-child{
    border-right:none;
}


.perfil-publico-estadisticas strong{
    display:block;

    margin-bottom:4px;

    font-size:25px;
    font-weight:500;

    color:#a96c18;
}


.perfil-publico-estadisticas span{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.8px;

    color:#817a72;
}


/* =====================================================
   CABECERA HISTORIAS
===================================================== */

.perfil-historias-cabecera{
    margin-bottom:22px;

    padding-bottom:15px;

    border-bottom:1px solid #e4ddd4;
}


.perfil-historias-cabecera .mini-titulo{
    display:block;

    margin-bottom:5px;

    font-size:10px;
    letter-spacing:1.4px;

    color:#b9781d;
}


.perfil-historias-cabecera h2{
    margin:0;

    font-size:24px;
    font-weight:500;

    color:#292622;
}


/* =====================================================
   GRID DE HISTORIAS
===================================================== */

.perfil-historias-grid{
    display:grid;

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

    gap:20px;
}


/* =====================================================
   TARJETA
===================================================== */

.perfil-historia-card{
    overflow:hidden;

    border:1px solid #e4ddd4;
    border-radius:9px;

    background:#fff;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.perfil-historia-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.07);
}


/* IMAGEN */

.perfil-historia-imagen{
    display:block;

    width:100%;
    height:145px;

    overflow:hidden;
}


.perfil-historia-imagen img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .3s ease;
}


.perfil-historia-card:hover
.perfil-historia-imagen img{

    transform:scale(1.03);
}


/* CONTENIDO */

.perfil-historia-contenido{
    padding:15px;
}


.perfil-historia-superior{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:8px;
}


.perfil-historia-superior span{
    font-size:9px;

    text-transform:uppercase;
    letter-spacing:.8px;

    color:#b9781d;
}


.perfil-historia-superior time{
    font-size:9px;

    color:#9a938b;
}


.perfil-historia-contenido h3{
    margin:0 0 8px;

    font-size:16px;
    line-height:1.35;

    font-weight:500;
}


.perfil-historia-contenido h3 a{
    color:#292622;

    text-decoration:none;
}


.perfil-historia-contenido h3 a:hover{
    color:#a96c18;
}


.perfil-historia-contenido > p{
    margin:0 0 15px;

    font-size:12px;
    line-height:1.65;

    color:#68615a;
}


/* FOOTER TARJETA */

.perfil-historia-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    padding-top:11px;

    border-top:1px solid #eee8e0;
}


.perfil-historia-footer > div{
    display:flex;

    gap:10px;
}


.perfil-historia-footer span{
    font-size:10px;

    color:#888078;
}


.perfil-historia-footer > a{
    font-size:11px;

    color:#a96c18;

    text-decoration:none;
}


.perfil-historia-footer > a:hover{
    text-decoration:underline;
}


/* =====================================================
   SIN HISTORIAS
===================================================== */

.perfil-sin-historias{
    padding:45px 20px;

    text-align:center;

    border:1px solid #e5ded5;
    border-radius:10px;

    background:#faf8f5;
}


.perfil-sin-historias > span{
    display:block;

    margin-bottom:10px;

    font-size:25px;

    color:#b9781d;
}


.perfil-sin-historias h3{
    margin:0 0 8px;

    font-size:19px;

    font-weight:500;
}


.perfil-sin-historias p{
    margin:0;

    font-size:13px;

    color:#777069;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .perfil-publico{
        padding:30px 22px 50px;
    }

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

}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width:600px){

    .perfil-publico{
        padding:22px 14px 40px;
    }


    .perfil-publico-cabecera{
        flex-direction:column;

        text-align:center;

        padding:25px 18px;
    }


    .perfil-publico-avatar{
        width:95px;
        height:95px;
    }


    .perfil-publico-info h1{
        font-size:25px;
    }


    .perfil-publico-biografia{
        font-size:13px;
    }


    .perfil-publico-estadisticas{
        margin-bottom:35px;
    }


    .perfil-publico-estadisticas > div{
        padding:15px 5px;
    }


    .perfil-publico-estadisticas strong{
        font-size:20px;
    }


    .perfil-publico-estadisticas span{
        font-size:9px;
    }


    .perfil-historias-grid{
        grid-template-columns:1fr;
    }


    /* HISTORIA HORIZONTAL COMPACTA */

    .perfil-historia-card{
        display:grid;

        grid-template-columns:115px 1fr;
    }


    .perfil-historia-imagen{
        width:115px;
        height:100%;
        min-height:145px;
    }


    .perfil-historia-contenido{
        padding:12px;
    }


    .perfil-historia-contenido h3{
        font-size:14px;
    }


    .perfil-historia-contenido > p{
        display:none;
    }


    .perfil-historia-footer{
        margin-top:12px;
    }

}

/* =====================================================
   ENLACE AL PERFIL DEL AUTOR
===================================================== */

.historia-autor a{
    color:inherit;
    text-decoration:none;

    border-bottom:1px solid transparent;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.historia-autor a:hover{
    color:#b9781d;
    border-bottom-color:#b9781d;
}

/* =====================================================
   MI PERFIL - ÁREA PRIVADA
===================================================== */

.mi-perfil-pagina{
    padding:40px 38px 60px;
}


/* =====================================================
   CABECERA
===================================================== */

.mi-perfil-titulo{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;

    padding-bottom:25px;
    margin-bottom:30px;

    border-bottom:1px solid #e6ded4;
}

.mi-perfil-titulo .mini-titulo{
    display:block;

    margin-bottom:7px;

    font-size:10px;
    letter-spacing:1.5px;

    color:#b9781d;
}

.mi-perfil-titulo h1{
    margin:0 0 8px;

    font-size:30px;
    font-weight:500;

    color:#292522;
}

.mi-perfil-titulo p{
    margin:0;

    font-size:14px;
    line-height:1.6;

    color:#777069;
}


/* VER PERFIL PÚBLICO */

.btn-ver-perfil-publico{
    flex-shrink:0;

    padding:10px 16px;

    border:1px solid #c8a879;
    border-radius:6px;

    color:#9d6418;
    background:#fff;

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

    transition:.2s ease;
}

.btn-ver-perfil-publico:hover{
    background:#b9781d;
    border-color:#b9781d;
    color:#fff;
}


/* =====================================================
   MENSAJES
===================================================== */

.perfil-mensaje{
    margin-bottom:22px;
    padding:13px 16px;

    border-radius:6px;

    font-size:13px;
}

.perfil-mensaje-exito{
    background:#f0f7ef;
    border:1px solid #c9dfc6;
    color:#477043;
}

.perfil-mensaje-error{
    background:#fff1f0;
    border:1px solid #e8c4c0;
    color:#a14c44;
}


/* =====================================================
   PANEL
===================================================== */

.mi-perfil-panel{
    overflow:hidden;

    border:1px solid #e4ddd3;
    border-radius:10px;

    background:#fff;
}


/* =====================================================
   ZONA DEL AVATAR
===================================================== */

.mi-perfil-avatar-zona{
    display:flex;
    align-items:center;
    gap:20px;

    padding:25px 28px;

    background:#faf8f4;

    border-bottom:1px solid #e7dfd5;
}

.mi-perfil-avatar{
    width:82px;
    height:82px;

    flex:0 0 82px;

    overflow:hidden;

    border-radius:50%;
    border:2px solid #b9781d;

    background:#efe4d5;
}

.mi-perfil-avatar img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.mi-perfil-inicial{
    width:100%;
    height:100%;

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

    font-size:30px;
    font-weight:600;

    color:#8d5817;
}

.mi-perfil-avatar-zona > div:last-child{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.mi-perfil-avatar-zona strong{
    display:block;

    margin-bottom:3px;

    font-size:18px;
    font-weight:500;

    color:#292522;
}

.mi-perfil-avatar-zona span{
    display:block;

    margin-bottom:7px;

    font-size:12px;

    color:#8a8279;
}

.mi-perfil-avatar-zona small{
    display:block;

    font-size:11px;

    color:#a09991;
}


/* =====================================================
   FORMULARIO
===================================================== */

.form-mi-perfil{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:22px 25px;

    padding:30px 28px;
}

.perfil-campo{
    display:flex;
    flex-direction:column;

    min-width:0;
}

.perfil-campo-completo{
    grid-column:1 / -1;
}

.perfil-campo label{
    display:block;

    margin-bottom:7px;

    font-size:12px;
    font-weight:500;

    color:#403b36;
}

.perfil-campo input,
.perfil-campo textarea{
    width:100%;
    box-sizing:border-box;

    padding:11px 12px;

    border:1px solid #dcd4ca;
    border-radius:5px;

    background:#fff;

    color:#37322e;

    font-family:inherit;
    font-size:13px;

    outline:none;
}

.perfil-campo input:focus,
.perfil-campo textarea:focus{
    border-color:#b9781d;

    box-shadow:
        0 0 0 2px
        rgba(185,120,29,.08);
}

.perfil-campo input:disabled{
    background:#f5f3f0;

    color:#777069;

    cursor:not-allowed;
}

.perfil-campo textarea{
    min-height:125px;

    resize:vertical;

    line-height:1.6;
}

.perfil-campo > small{
    display:block;

    margin-top:6px;

    font-size:10px;
    line-height:1.5;

    color:#999188;
}


/* =====================================================
   BIOGRAFÍA
===================================================== */

.perfil-biografia-ayuda{
    display:flex;
    justify-content:space-between;
    gap:15px;

    margin-top:7px;
}

.perfil-biografia-ayuda small{
    font-size:10px;

    color:#999188;
}


/* =====================================================
   BOTÓN GUARDAR
===================================================== */

.perfil-form-acciones{
    grid-column:1 / -1;

    display:flex;
    justify-content:flex-end;

    padding-top:5px;
}

.form-mi-perfil .boton-principal{
    border:0;

    padding:11px 22px;

    cursor:pointer;

    font-family:inherit;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:800px){

    .mi-perfil-pagina{
        padding:30px 22px 50px;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width:600px){

    .mi-perfil-pagina{
        padding:22px 14px 40px;
    }


    .mi-perfil-titulo{
        flex-direction:column;
        align-items:flex-start;

        gap:18px;
    }


    .mi-perfil-titulo h1{
        font-size:25px;
    }


    .mi-perfil-avatar-zona{
        padding:20px;

        align-items:center;
    }


    .mi-perfil-avatar{
        width:68px;
        height:68px;

        flex-basis:68px;
    }


    .mi-perfil-inicial{
        font-size:25px;
    }


    .form-mi-perfil{
        grid-template-columns:1fr;

        padding:22px 18px;

        gap:18px;
    }


    .perfil-campo-completo,
    .perfil-form-acciones{
        grid-column:auto;
    }


    .perfil-form-acciones{
        justify-content:stretch;
    }


    .form-mi-perfil .boton-principal{
        width:100%;
        text-align:center;
    }

}

/* =====================================================
   SUBIR FOTO DE PERFIL
===================================================== */

.perfil-subir-foto{
    display:flex;
    align-items:center;
    gap:20px;

    padding:18px;

    border:1px solid #e3dcd2;
    border-radius:8px;

    background:#faf8f5;
}


.perfil-preview-foto{
    width:80px;
    height:80px;

    flex:0 0 80px;

    overflow:hidden;

    border-radius:50%;
    border:2px solid #b9781d;

    background:#efe4d5;
}


.perfil-preview-foto img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


.perfil-preview-foto span{
    width:100%;
    height:100%;

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

    font-size:28px;
    font-weight:600;

    color:#8d5817;
}


.perfil-subir-foto-opciones{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:7px;
}


.perfil-subir-foto-opciones input[type="file"]{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;

    pointer-events:none;
}


.btn-seleccionar-foto{
    display:inline-block;

    padding:9px 16px;

    border:1px solid #b9781d;
    border-radius:5px;

    background:#fff;

    color:#9b6117;

    font-size:12px;

    cursor:pointer;

    transition:.2s ease;
}


.btn-seleccionar-foto:hover{
    background:#b9781d;
    color:#fff;
}


.perfil-subir-foto-opciones small{
    font-size:10px;

    color:#928a81;
}


@media(max-width:600px){

    .perfil-subir-foto{
        align-items:flex-start;
    }

    .perfil-preview-foto{
        width:65px;
        height:65px;

        flex-basis:65px;
    }

}

/* =====================================================
   BOTÓN CAMBIAR FOTO
===================================================== */

.perfil-cambiar-foto{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:10px;
}

.perfil-cambiar-foto input[type="file"]{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    overflow:hidden;
}

.btn-cambiar-foto{
    display:inline-block;

    padding:8px 14px;

    border:1px solid #b9781d;
    border-radius:5px;

    background:#fff;

    color:#a66b1b;

    font-size:11px;

    cursor:pointer;

    transition:.2s;
}

.btn-cambiar-foto:hover{
    background:#b9781d;
    color:#fff;
}

.perfil-cambiar-foto small{
    font-size:10px;
    color:#999188;
}

@media(max-width:600px){

    .perfil-cambiar-foto{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

}

/* =====================================================
   CORREGIR FOTO DENTRO DEL AVATAR
===================================================== */

.mi-perfil-avatar{
    width:82px;
    height:82px;
    min-width:82px;

    position:relative;

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

    padding:0;
    margin:0;

    overflow:hidden;

    border:2px solid #b9781d;
    border-radius:50%;

    box-sizing:border-box;
    background:#efe4d5;
}


.mi-perfil-avatar img,
.mi-perfil-avatar #previewFoto{
    position:absolute;

    top:0;
    left:0;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:block;

    object-fit:cover;
    object-position:center center;

    border:0;
    border-radius:50%;
}


/* INICIAL CUANDO NO HAY FOTO */

.mi-perfil-avatar .mi-perfil-inicial{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

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

    margin:0;
    padding:0;

    font-size:30px;
    line-height:1;

    border-radius:50%;
}


/* MÓVIL */

@media(max-width:600px){

    .mi-perfil-avatar{
        width:68px;
        height:68px;
        min-width:68px;
    }

}

/* =====================================================
   PERFIL PÚBLICO - CABECERA CORREGIDA
===================================================== */

.perfil-publico-cabecera{
    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:38px;

    padding:45px 55px;

    background:#faf8f5;

    border:1px solid #e3d6c5;
    border-radius:14px;

    box-sizing:border-box;
}


/* =====================================================
   AVATAR
===================================================== */

.perfil-publico-avatar{
    width:150px;
    height:150px;

    min-width:150px;
    flex:0 0 150px;

    position:relative;

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

    padding:0;
    margin:0;

    overflow:hidden;

    border:3px solid #b9781d;
    border-radius:50%;

    background:#efe4d5;

    box-sizing:border-box;
}


/* FOTO */

.perfil-publico-avatar img{
    position:absolute;

    top:0;
    left:0;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    display:block;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover;
    object-position:center center;

    border:0;
    border-radius:50%;

    transform:none !important;
}


/* =====================================================
   INICIAL SI NO HAY FOTO
===================================================== */

.perfil-publico-avatar .perfil-avatar-inicial{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

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

    margin:0;
    padding:0;

    font-size:46px;
    font-weight:600;

    line-height:1;

    color:#3b2b1d;

    box-sizing:border-box;
}


/* =====================================================
   INFORMACIÓN DEL AUTOR
===================================================== */

.perfil-publico-info{
    flex:1;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    min-width:0;

    text-align:left;
}


.perfil-publico-info .mini-titulo{
    display:block;

    margin:0 0 12px;

    color:#b9781d;

    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
}


.perfil-publico-info h1{
    margin:0 0 5px;

    padding:0;

    font-size:32px;
    line-height:1.15;

    font-weight:600;

    color:#292522;

    text-align:left;
}


.perfil-publico-usuario{
    display:block;

    margin-bottom:18px;

    font-size:15px;

    color:#77716c;
}


.perfil-publico-biografia{
    margin:0 0 22px;

    max-width:650px;

    font-size:16px;
    line-height:1.6;

    color:#4e4945;

    text-align:left;
}


.perfil-sin-biografia{
    color:#99928c;
    font-style:italic;
}


.perfil-miembro-desde{
    display:flex;
    align-items:center;
    gap:7px;

    font-size:12px;

    color:#827b75;
}


/* ICONO DE CALENDARIO */

.perfil-miembro-desde::before{
    content:"▣";

    font-size:14px;

    color:#77716c;
}


/* =====================================================
   ESTADÍSTICAS
===================================================== */

.perfil-publico-estadisticas{
    display:grid;
    grid-template-columns:repeat(3, 1fr);

    margin-top:20px;

    border:1px solid #e3d6c5;
    border-radius:12px;

    overflow:hidden;

    background:#fff;
}


.perfil-publico-estadisticas > div{
    min-height:90px;

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

    padding:15px;

    box-sizing:border-box;
}


.perfil-publico-estadisticas > div:not(:last-child){
    border-right:1px solid #e3d6c5;
}


.perfil-publico-estadisticas strong{
    display:block;

    margin-bottom:7px;

    font-size:27px;
    font-weight:400;

    color:#b9781d;
}


.perfil-publico-estadisticas span{
    font-size:11px;

    letter-spacing:1px;
    text-transform:uppercase;

    color:#66615d;
}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:700px){

    .perfil-publico-cabecera{
        flex-direction:column;

        align-items:center;

        gap:20px;

        padding:30px 20px;

        text-align:center;
    }


    .perfil-publico-avatar{
        width:120px;
        height:120px;

        min-width:120px;
        flex-basis:120px;
    }


    .perfil-publico-info{
        width:100%;

        align-items:center;

        text-align:center;
    }


    .perfil-publico-info h1,
    .perfil-publico-biografia{
        text-align:center;
    }


    .perfil-publico-info h1{
        font-size:27px;
    }


    .perfil-publico-biografia{
        font-size:14px;
    }


    .perfil-publico-estadisticas{
        grid-template-columns:repeat(3, 1fr);
    }


    .perfil-publico-estadisticas > div{
        min-height:75px;

        padding:10px 5px;
    }


    .perfil-publico-estadisticas strong{
        font-size:23px;
    }


    .perfil-publico-estadisticas span{
        font-size:9px;
    }

}

/* =====================================================
   AVATAR DEL AUTOR EN HISTORIA
===================================================== */

.historia-autor{
    display:inline-flex;
    align-items:center;
    gap:8px;
}


.historia-autor-avatar{
    width:32px;
    height:32px;

    min-width:32px;

    position:relative;

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

    overflow:hidden;

    border:1px solid #c99a5c;
    border-radius:50%;

    background:#efe4d5;

    text-decoration:none;

    box-sizing:border-box;
}


.historia-autor-avatar img{
    position:absolute;

    inset:0;

    width:100% !important;
    height:100% !important;

    display:block;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover;
    object-position:center center;

    border-radius:50%;
}


.historia-autor-avatar span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    font-size:13px;
    font-weight:600;

    color:#8d5817;
}


.historia-autor-nombre{
    color:inherit;
    text-decoration:none;
}


a.historia-autor-nombre:hover{
    color:#b9781d;
    text-decoration:underline;
}


/* =====================================================
   AVATAR EN COMENTARIOS
===================================================== */

.comentario-avatar{
    width:44px;
    height:44px;

    min-width:44px;
    flex:0 0 44px;

    position:relative;

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

    overflow:hidden;

    border:1px solid #c99a5c;
    border-radius:50%;

    background:#efe4d5;

    color:#8d5817;
    text-decoration:none;

    box-sizing:border-box;
}


.comentario-avatar img{
    position:absolute;

    inset:0;

    width:100% !important;
    height:100% !important;

    display:block;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover;
    object-position:center center;

    border-radius:50%;
}


.comentario-avatar span{
    width:100%;
    height:100%;

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

    font-size:16px;
    font-weight:600;
}


.comentario-autor-link{
    color:inherit;
    text-decoration:none;
}


.comentario-autor-link:hover{
    color:#b9781d;
    text-decoration:underline;
}

/* =====================================================
   NOTIFICACIONES
===================================================== */

.pagina-notificaciones{
    padding-top:45px;
    padding-bottom:70px;
}


.notificaciones-cabecera{
    padding-bottom:25px;
    margin-bottom:30px;

    border-bottom:1px solid #e1d4c3;
}


.notificaciones-cabecera .mini-titulo{
    display:block;

    margin-bottom:10px;

    font-size:10px;
    letter-spacing:2px;

    color:#b9781d;
}


.notificaciones-cabecera h1{
    margin:0 0 10px;

    font-size:30px;
    font-weight:500;

    color:#2c2926;
}


.notificaciones-cabecera p{
    margin:0;

    color:#77706a;

    font-size:14px;
}


/* =====================================================
   LISTA
===================================================== */

.notificaciones-lista{

    border:1px solid #e2d5c5;

    border-radius:12px;

    overflow:hidden;

    background:#fff;

}


.notificacion-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px 22px;

    border-bottom:1px solid #eee5da;

    color:inherit;

    text-decoration:none;

    transition:
        background .2s ease;

}


.notificacion-item:last-child{

    border-bottom:0;

}


.notificacion-item:hover{

    background:#faf7f2;

}


/* ICONO */

.notificacion-icono{

    width:42px;
    height:42px;

    min-width:42px;

    display:flex;

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

    border:1px solid #c88a36;

    border-radius:50%;

    background:#faf4eb;

    color:#b9781d;

    font-size:18px;

}


/* CONTENIDO */

.notificacion-contenido{

    flex:1;

    min-width:0;

}


.notificacion-contenido p{

    margin:0 0 6px;

    font-size:14px;

    line-height:1.5;

    color:#37322e;

}


.notificacion-contenido span{

    font-size:10px;

    color:#938b84;

}


.notificacion-flecha{

    color:#b9781d;

    font-size:18px;

}


/* =====================================================
   VACÍO
===================================================== */

.notificaciones-vacio{

    padding:70px 25px;

    text-align:center;

    border:1px solid #e2d5c5;

    border-radius:12px;

    background:#faf8f5;

}


.notificaciones-vacio-icono{

    display:block;

    margin-bottom:15px;

    font-size:28px;

    color:#b9781d;

}


.notificaciones-vacio h2{

    margin:0 0 10px;

    font-size:20px;

    font-weight:500;

}


.notificaciones-vacio p{

    margin:0;

    font-size:13px;

    color:#817a74;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:600px){

    .pagina-notificaciones{

        padding-top:30px;

    }


    .notificacion-item{

        padding:16px 14px;

        gap:12px;

    }


    .notificacion-icono{

        width:36px;
        height:36px;

        min-width:36px;

        font-size:15px;

    }


    .notificacion-contenido p{

        font-size:13px;

    }


    .notificacion-flecha{

        font-size:15px;

    }

}

/* =====================================================
   NOTIFICACIONES EN MENÚ DE USUARIO
===================================================== */

.menu-opcion-notificaciones{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}


.notificaciones-contador{
    min-width:20px;
    height:20px;

    padding:0 6px;

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

    box-sizing:border-box;

    border-radius:20px;

    background:#b9781d;

    color:#fff;

    font-size:10px;
    font-weight:600;
    line-height:1;
}

/* =====================================================
   ACCIONES DE NOTIFICACIONES
===================================================== */

.notificaciones-cabecera-superior{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:25px;

}


.notificaciones-cabecera-superior > div{

    flex:1;

}


/* LIMPIAR TODAS */

.notificaciones-limpiar{

    padding:9px 15px;

    border:1px solid #d8c7b2;

    border-radius:6px;

    background:#fff;

    color:#7a6d61;

    font-family:inherit;

    font-size:11px;

    cursor:pointer;

    white-space:nowrap;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;

}


.notificaciones-limpiar:hover{

    border-color:#b9781d;

    color:#b9781d;

    background:#faf7f2;

}


/* =====================================================
   NOTIFICACIÓN
===================================================== */

.notificacion-item{

    display:flex;

    align-items:stretch;

    padding:0;

    border-bottom:1px solid #eee5da;

    background:#fff;

}


.notificacion-item:last-child{

    border-bottom:0;

}


/* ZONA CLICABLE */

.notificacion-enlace{

    flex:1;

    min-width:0;

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px 22px;

    color:inherit;

    text-decoration:none;

    transition:background .2s ease;

}


.notificacion-enlace:hover{

    background:#faf7f2;

}


/* FORMULARIO ELIMINAR */

.notificacion-eliminar-form{

    display:flex;

    align-items:center;

    padding-right:16px;

}


/* BOTÓN X */

.notificacion-eliminar{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:0;

    border-radius:50%;

    background:transparent;

    color:#aaa19a;

    font-size:20px;

    line-height:1;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease;

}


.notificacion-eliminar:hover{

    color:#9e493e;

    background:#f7ecea;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:600px){

    .notificaciones-cabecera-superior{

        display:block;

    }


    .notificaciones-cabecera-superior form{

        margin-top:18px;

    }


    .notificaciones-limpiar{

        width:100%;

    }


    .notificacion-enlace{

        gap:10px;

        padding:16px 10px 16px 14px;

    }


    .notificacion-eliminar-form{

        padding-right:8px;

    }


    .notificacion-eliminar{

        width:28px;

        height:28px;

    }

}

/* =====================================================
   NOTIFICACIONES NUEVAS
===================================================== */

.notificacion-enlace.notificacion-nueva{

    background:#fffaf2;

}


.notificacion-enlace.notificacion-nueva:hover{

    background:#faf3e7;

}


.notificacion-etiqueta-nueva{

    display:inline-block;

    margin-bottom:6px;

    padding:3px 7px;

    border-radius:20px;

    background:#b9781d;

    color:#fff !important;

    font-size:8px !important;

    font-weight:700;

    letter-spacing:1px;

    line-height:1.2;

}

/* =====================================================
   SEGURIDAD DEL PERFIL
===================================================== */

.perfil-seguridad{
    margin-top:35px;
    padding:30px;

    background:#fff;

    border:1px solid #e2d5c5;
    border-radius:12px;
}


.perfil-seguridad-cabecera{
    padding-bottom:22px;
    margin-bottom:25px;

    border-bottom:1px solid #eee5da;
}


.perfil-seguridad-cabecera h2{
    margin:6px 0 8px;

    font-size:24px;
    font-weight:500;

    color:#2c2926;
}


.perfil-seguridad-cabecera p{
    margin:0;

    font-size:13px;
    color:#817a74;
}


.form-cambiar-password{
    display:grid;

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

    gap:20px;
}


.form-cambiar-password
.perfil-form-acciones{
    grid-column:1 / -1;

    margin-top:5px;
}


@media(max-width:750px){

    .perfil-seguridad{
        padding:22px 18px;
    }


    .form-cambiar-password{
        grid-template-columns:1fr;
    }


    .form-cambiar-password
    .perfil-form-acciones{
        grid-column:auto;
    }

}

/* =====================================================
   SEGUIR AUTOR
===================================================== */

.perfil-seguir-form{

    margin-top:18px;

}


.btn-seguir{

    min-width:115px;

    padding:9px 18px;

    border:1px solid #b9781d;

    border-radius:6px;

    background:#b9781d;

    color:#fff;

    font-family:inherit;

    font-size:12px;

    font-weight:500;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;

}


.btn-seguir:hover{

    background:#9f6516;

    border-color:#9f6516;

}


/* YA LO SIGUE */

.btn-seguir.btn-siguiendo{

    background:#fff;

    color:#7b7066;

    border-color:#d8c9b7;

}


.btn-seguir.btn-siguiendo:hover{

    background:#f8eeee;

    color:#9a4e45;

    border-color:#dfb9b4;

}


/* MÓVIL */

@media(max-width:600px){

    .btn-seguir{

        width:100%;

    }

}

@media(max-width:700px){

    .perfil-publico-estadisticas{

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

    }

}


@media(max-width:420px){

    .perfil-publico-estadisticas{

        grid-template-columns:1fr;

    }

}

/* =====================================================
   CONTADORES CLICABLES
===================================================== */

.perfil-estadistica-enlace{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:inherit;

    text-decoration:none;

    transition:
        background .2s ease;

}


.perfil-estadistica-enlace:hover{

    background:#faf7f2;

}


.perfil-estadistica-enlace:hover strong{

    color:#b9781d;

}


/* =====================================================
   PÁGINA SEGUIDORES
===================================================== */

.pagina-seguidores{

    max-width:850px;

    margin:0 auto;

}


.seguidores-cabecera{

    margin-bottom:25px;

}


.seguidores-volver{

    display:inline-block;

    margin-bottom:25px;

    color:#81766c;

    font-size:12px;

    text-decoration:none;

}


.seguidores-volver:hover{

    color:#b9781d;

}


.seguidores-cabecera h1{

    margin:6px 0 8px;

    font-size:30px;

    font-weight:500;

}


.seguidores-cabecera p{

    margin:0;

    color:#817a74;

    font-size:13px;

}


/* =====================================================
   PESTAÑAS
===================================================== */

.seguidores-tabs{

    display:flex;

    gap:5px;

    margin-bottom:20px;

    padding-bottom:12px;

    border-bottom:1px solid #e8ded2;

}


.seguidores-tabs a{

    padding:9px 16px;

    border-radius:6px;

    color:#7a7067;

    font-size:12px;

    text-decoration:none;

}


.seguidores-tabs a:hover{

    background:#f7f2eb;

}


.seguidores-tabs a.activo{

    background:#b9781d;

    color:#fff;

}


/* =====================================================
   LISTA
===================================================== */

.seguidores-lista{

    overflow:hidden;

    background:#fff;

    border:1px solid #e7ddd1;

    border-radius:10px;

}


.seguidor-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 18px;

    border-bottom:1px solid #eee5da;

}


.seguidor-item:last-child{

    border-bottom:0;

}


/* AVATAR */

.seguidor-avatar{

    width:48px;

    height:48px;

    flex:0 0 48px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eee4d7;

    color:#8b6b45;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

}


.seguidor-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

}


.seguidor-avatar span{

    width:100%;

    height:100%;

    align-items:center;

    justify-content:center;

}


/* INFORMACIÓN */

.seguidor-info{

    flex:1;

    min-width:0;

}


.seguidor-nombre{

    display:block;

    margin-bottom:3px;

    overflow:hidden;

    color:#302c29;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.seguidor-nombre:hover{

    color:#b9781d;

}


.seguidor-info span{

    color:#958a80;

    font-size:11px;

}


/* BOTÓN */

.seguidor-ver-perfil{

    padding:8px 13px;

    border:1px solid #d8c8b6;

    border-radius:6px;

    color:#74695f;

    font-size:11px;

    text-decoration:none;

    white-space:nowrap;

}


.seguidor-ver-perfil:hover{

    border-color:#b9781d;

    color:#b9781d;

}


/* =====================================================
   LISTA VACÍA
===================================================== */

.seguidores-vacio{

    padding:55px 20px;

    text-align:center;

    background:#fff;

    border:1px solid #e7ddd1;

    border-radius:10px;

}


.seguidores-vacio > span{

    display:block;

    margin-bottom:12px;

    font-size:28px;

    color:#c1a782;

}


.seguidores-vacio h2{

    margin:0 0 8px;

    font-size:19px;

    font-weight:500;

}


.seguidores-vacio p{

    margin:0;

    color:#8a8179;

    font-size:12px;

}


/* =====================================================
   MÓVIL
===================================================== */

@media(max-width:600px){

    .seguidor-item{

        gap:10px;

        padding:14px 12px;

    }


    .seguidor-avatar{

        width:42px;

        height:42px;

        flex-basis:42px;

    }


    .seguidor-ver-perfil{

        padding:7px 9px;

        font-size:10px;

    }


    .seguidores-tabs a{

        flex:1;

        text-align:center;

    }

}

/* =====================================================
   HISTORIAS DE AUTORES SEGUIDOS
===================================================== */

.portada-siguiendo{

    margin-bottom:55px;

    padding-bottom:45px;

    border-bottom:1px solid #e8ded2;

}


.autor-seguido-enlace{

    color:inherit;

    text-decoration:none;

}


.autor-seguido-enlace:hover{

    color:#b9781d;

    text-decoration:underline;

}

/* =====================================================
   FRASE DEL DÍA
===================================================== */

.pagina-frases{
    padding-top: 36px;
    padding-bottom: 60px;
}


/* CABECERA */

.frases-cabecera{
    max-width: 760px;
    margin: 0 auto 35px;
    text-align: center;
}

.frases-cabecera h1{
    margin: 8px 0 12px;
}

.frases-cabecera p{
    line-height: 1.7;
}


/* FRASE OFICIAL */

.frase-oficial{
    max-width: 650px;
    margin: 0 auto 60px;
}

.frase-oficial-titulo{
    text-align: center;
    margin-bottom: 20px;
}

.frase-oficial-titulo span{
    font-size: 12px;
    letter-spacing: 2px;
    color: #b8751a;
}

.frase-oficial-titulo h2{
    margin-top: 8px;
}


.frase-oficial-imagen{
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #e4d4bf;
    background: #faf7f2;
}

.frase-oficial-imagen img{
    display: block;
    width: 100%;
    max-height: 650px;
    object-fit: contain;
    margin: 0 auto;
}


.frase-imagen-vacia{
    display: none;
    min-height: 350px;
    padding: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.frase-imagen-vacia span{
    font-size: 34px;
    margin-bottom: 12px;
}

.frase-imagen-no-disponible
.frase-imagen-vacia{
    display: flex;
}


/* COMUNIDAD */

.frases-comunidad{
    border-top: 1px solid #e5d7c7;
    padding-top: 40px;
}


.frases-comunidad-cabecera{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.frases-comunidad-cabecera h2{
    margin: 7px 0 8px;
}

.frases-comunidad-cabecera p{
    margin: 0;
}


/* GRID */

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


/* TARJETA */

.frase-card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: 28px;
    border: 1px solid #e4d4bf;
    border-radius: 12px;
    background: #fff;
}


.frase-card-comillas{
    font-family: Georgia, serif;
    font-size: 45px;
    line-height: 1;
    color: #c88428;
    opacity: .55;
}


.frase-card blockquote{
    flex: 1;
    margin: 10px 0 25px;
    padding: 0;
    border: 0;
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    font-style: italic;
}


.frase-card-autor{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 18px;
}

.frase-card-autor a,
.frase-card-autor span{
    color: #222;
    text-decoration: none;
    font-weight: 600;
}

.frase-card-autor small{
    color: #777;
}


/* PIE */

.frase-card-pie{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #eee4d8;
}


.frase-likes{
    color: #9d6318;
}


.frase-compartir{
    padding: 0;
    border: 0;
    background: transparent;
    color: #a76512;
    cursor: pointer;
    font: inherit;
}


/* VACÍO */

.frases-vacio{
    padding: 60px 25px;
    border: 1px solid #e4d4bf;
    border-radius: 12px;
    text-align: center;
}

.frases-vacio > span{
    display: block;
    font-size: 34px;
    margin-bottom: 12px;
}

.frases-vacio h3{
    margin-bottom: 10px;
}

.frases-vacio p{
    margin-bottom: 22px;
}


/* RESPONSIVE */

@media(max-width: 900px){

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

}


@media(max-width: 650px){

    .pagina-frases{
        padding-top: 25px;
    }

    .frases-comunidad-cabecera{
        align-items: stretch;
        flex-direction: column;
    }

    .grid-frases-comunidad{
        grid-template-columns: 1fr;
    }

    .frase-card{
        min-height: auto;
    }

    .frase-oficial{
        margin-bottom: 45px;
    }

}

/* =====================================================
   PUBLICAR FRASE
===================================================== */

.publicar-frase-seccion{
    max-width: 800px;
    margin: 0 auto;
    padding: 45px 0 60px;
}


.publicar-frase-cabecera{
    margin-bottom: 32px;
}


.publicar-frase-cabecera h1{
    margin: 8px 0 12px;
}


.publicar-frase-cabecera p{
    max-width: 650px;
    line-height: 1.7;
}


.form-publicar-frase{
    padding: 30px;
    border: 1px solid #e4d4bf;
    border-radius: 12px;
    background: #fff;
}


.form-publicar-frase textarea{
    width: 100%;
    min-height: 150px;
    resize: vertical;
    box-sizing: border-box;
}


@media(max-width: 650px){

    .publicar-frase-seccion{
        padding: 30px 0 45px;
    }

    .form-publicar-frase{
        padding: 20px;
    }

}

/* =====================================================
   ADMIN - FRASES
===================================================== */

.admin-frases-pagina{
    max-width: 1100px;
    margin: 0 auto;
    padding: 45px 25px 70px;
}


.admin-frases-cabecera{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}


.admin-frases-cabecera h1{
    margin: 7px 0 10px;
}


.admin-frases-cabecera p{
    max-width: 650px;
    margin: 0;
    line-height: 1.6;
}


/* FILTROS */

.admin-frases-filtros{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4d4bf;
}


.admin-frases-filtros a{
    padding: 9px 16px;
    border: 1px solid #dfcfba;
    border-radius: 6px;
    color: #5c5145;
    text-decoration: none;
}


.admin-frases-filtros a.activo{
    background: #b8751a;
    border-color: #b8751a;
    color: #fff;
}


/* LISTADO */

.admin-frases-lista{
    display: grid;
    gap: 20px;
}


.admin-frase-card{
    padding: 25px;
    border: 1px solid #e4d4bf;
    border-radius: 10px;
    background: #fff;
}


.admin-frase-superior{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}


.admin-frase-estado{
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


.estado-pendiente{
    background: #fff2d8;
    color: #8a5913;
}


.estado-publicada{
    background: #e5f5e8;
    color: #276c35;
}


.estado-rechazada{
    background: #fbe5e5;
    color: #9b3030;
}


.admin-frase-fecha{
    font-size: 12px;
    color: #777;
}


.admin-frase-card blockquote{
    margin: 0 0 22px;
    padding: 20px;
    border-left: 3px solid #bd7b25;
    background: #faf7f2;
    font-family: Georgia, serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1.7;
}


.admin-frase-datos{
    display: flex;
    flex-wrap: wrap;
    gap: 15px 35px;
    font-size: 13px;
}


.admin-frase-datos span{
    margin-left: 5px;
    color: #777;
}


.admin-frase-motivo{
    margin-top: 20px;
    padding: 15px;
    background: #fff4f4;
}


.admin-frase-motivo p{
    margin: 7px 0 0;
}


/* ACCIONES */

.admin-frase-acciones{
    display: flex;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee4d8;
}


.btn-admin-aprobar,
.btn-admin-rechazar{
    padding: 10px 18px;
    border-radius: 5px;
    font: inherit;
}


.btn-admin-aprobar{
    border: 1px solid #387944;
    background: #387944;
    color: #fff;
}


.btn-admin-rechazar{
    border: 1px solid #a64242;
    background: #fff;
    color: #a64242;
}


/*
   Temporalmente están desactivados.
   Los activaremos en el siguiente paso.
*/

.btn-admin-aprobar:disabled,
.btn-admin-rechazar:disabled{
    opacity: .65;
    cursor: not-allowed;
}


/* VACÍO */

.admin-frases-vacio{
    padding: 55px 25px;
    border: 1px solid #e4d4bf;
    border-radius: 10px;
    text-align: center;
}


@media(max-width: 700px){

    .admin-frases-cabecera{
        align-items: stretch;
        flex-direction: column;
    }

    .admin-frase-superior{
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .admin-frase-acciones{
        flex-direction: column;
    }

}

/* =====================================================
   LIKE DE FRASES
===================================================== */

.form-like-frase{
    margin: 0;
}


.frase-likes{
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 0;
    border: 0;
    background: transparent;

    color: #9d6318;

    font: inherit;
    text-decoration: none;

    cursor: pointer;
}


.frase-likes:hover{
    opacity: .75;
}


.frase-likes.activo{
    font-weight: 700;
}


.frase-like-login{
    cursor: pointer;
}

/* =====================================================
   FRASE DEL DÍA - ADMIN
===================================================== */

.admin-frase-destacada{
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eee4d8;
}


.btn-destacar-frase{
    padding: 11px 18px;

    border: 1px solid #b8751a;
    border-radius: 5px;

    background: #b8751a;
    color: #fff;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}


.btn-destacar-frase:hover{
    opacity: .9;
}


.frase-ya-destacada{
    display: inline-block;

    padding: 9px 14px;

    border-radius: 5px;

    background: #fff2d8;
    color: #8a5913;

    font-weight: 600;
}

/* =====================================================
   FRASE DESTACADA DEL DÍA
===================================================== */

.frase-destacada-dia{
    max-width: 760px;
    margin: -25px auto 60px;
    text-align: center;
}


.frase-destacada-insignia{
    display: inline-block;

    position: relative;
    z-index: 2;

    margin-bottom: -14px;
    padding: 8px 18px;

    border-radius: 20px;

    background: #b8751a;
    color: #fff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
}


.frase-destacada-contenido{
    padding: 45px 45px 30px;

    border: 1px solid #dfc49e;
    border-radius: 12px;

    background: #faf7f2;
}


.frase-destacada-comillas{
    height: 35px;

    font-family: Georgia, serif;
    font-size: 55px;
    line-height: 1;

    color: #c88428;
    opacity: .5;
}


.frase-destacada-contenido blockquote{
    max-width: 620px;

    margin: 15px auto 22px;
    padding: 0;

    border: 0;

    font-family: Georgia, serif;
    font-size: 23px;
    font-style: italic;
    line-height: 1.7;

    color: #29231e;
}


.frase-destacada-autor{
    margin-bottom: 25px;
}


.frase-destacada-autor strong,
.frase-destacada-autor a{
    color: #332b23;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.frase-destacada-sello{
    padding-top: 18px;

    border-top: 1px solid #e5d4bd;

    color: #8a642f;

    font-size: 12px;
}


.frase-destacada-sello span{
    margin-right: 4px;

    color: #b8751a;
}


/* MÓVIL */

@media(max-width: 650px){

    .frase-destacada-dia{
        margin-top: -15px;
        margin-bottom: 45px;
    }


    .frase-destacada-contenido{
        padding:
            40px
            22px
            25px;
    }


    .frase-destacada-contenido blockquote{
        font-size: 19px;
    }


    .frase-destacada-insignia{
        font-size: 9px;
        letter-spacing: 1px;
    }

}

/* =====================================================
   MIS FRASES
===================================================== */

.pagina-mis-frases{
    padding-top: 40px;
    padding-bottom: 65px;
}


/* CABECERA */

.mis-frases-cabecera{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}


.mis-frases-cabecera h1{
    margin: 7px 0 10px;
}


.mis-frases-cabecera p{
    max-width: 680px;
    margin: 0;
    line-height: 1.7;
}


/* RESUMEN */

.mis-frases-resumen{
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
    margin-bottom: 25px;
}


.mis-frases-resumen > div{
    padding: 18px;

    border: 1px solid #e4d4bf;
    border-radius: 8px;

    background: #fff;
    text-align: center;
}


.mis-frases-resumen strong{
    display: block;

    margin-bottom: 4px;

    font-size: 25px;
    color: #9b641d;
}


.mis-frases-resumen span{
    font-size: 12px;
    color: #6d6257;
}


/* FILTROS */

.mis-frases-filtros{
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 30px;
    padding-bottom: 20px;

    border-bottom: 1px solid #e4d4bf;
}


.mis-frases-filtros a{
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 14px;

    border: 1px solid #dfcfba;
    border-radius: 6px;

    color: #5d5146;
    text-decoration: none;
}


.mis-frases-filtros a span{
    min-width: 20px;
    padding: 2px 6px;

    border-radius: 10px;

    background: #eee5d9;

    font-size: 10px;
    text-align: center;
}


.mis-frases-filtros a.activo{
    border-color: #ad711f;
    background: #ad711f;
    color: #fff;
}


.mis-frases-filtros a.activo span{
    background: rgba(255,255,255,.2);
}


/* LISTA */

.mis-frases-lista{
    display: grid;
    gap: 20px;
}


.mi-frase-card{
    position: relative;

    padding: 25px;

    border: 1px solid #e4d4bf;
    border-radius: 10px;

    background: #fff;
}


.mi-frase-card.mi-frase-destacada{
    border-color: #d5aa68;
}


/* SUPERIOR */

.mi-frase-superior{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}


.mi-frase-etiquetas{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.mi-frase-estado,
.mi-frase-premio{
    display: inline-block;

    padding: 5px 9px;

    border-radius: 4px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
}


.mi-frase-estado-pendiente{
    background: #fff2d8;
    color: #865711;
}


.mi-frase-estado-publicada{
    background: #e5f5e8;
    color: #286b35;
}


.mi-frase-estado-rechazada{
    background: #fbe5e5;
    color: #983434;
}


.mi-frase-premio{
    background: #b8751a;
    color: #fff;
}


.mi-frase-superior time{
    font-size: 12px;
    color: #81766b;
}


/* FRASE */

.mi-frase-card blockquote{
    margin: 0 0 20px;
    padding: 20px 22px;

    border: 0;
    border-left: 3px solid #bd7b25;

    background: #faf7f2;

    font-family: Georgia, serif;
    font-size: 19px;
    font-style: italic;
    line-height: 1.7;
}


/* INFORMACIÓN */

.mi-frase-informacion{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;

    color: #74695e;
    font-size: 12px;
}


/* DESTACADA */

.mi-frase-destacada-info{
    display: flex;
    gap: 14px;

    margin-top: 20px;
    padding: 17px;

    border: 1px solid #ead1a9;
    border-radius: 7px;

    background: #fff8e9;
}


.mi-frase-destacada-info > span{
    font-size: 24px;
    color: #b8751a;
}


.mi-frase-destacada-info strong{
    color: #8a5913;
}


.mi-frase-destacada-info p{
    margin: 5px 0 0;
    line-height: 1.6;
    font-size: 13px;
}


/* RECHAZO */

.mi-frase-rechazo{
    margin-top: 20px;
    padding: 17px;

    border-radius: 7px;

    background: #fff1f1;
}


.mi-frase-rechazo strong{
    color: #913838;
}


.mi-frase-rechazo p{
    margin: 6px 0 0;
    line-height: 1.6;
}


/* PIE */

.mi-frase-pie{
    margin-top: 20px;
    padding-top: 16px;

    border-top: 1px solid #eee4d8;

    font-size: 13px;
}


.mi-frase-pie a{
    color: #a36617;
    font-weight: 600;
    text-decoration: none;
}


.mi-frase-pie a:hover{
    text-decoration: underline;
}


.mi-frase-pie span{
    color: #81766b;
}


/* VACÍO */

.mis-frases-vacio{
    padding: 60px 25px;

    border: 1px solid #e4d4bf;
    border-radius: 10px;

    text-align: center;
}


.mis-frases-vacio > span{
    display: block;

    margin-bottom: 10px;

    font-size: 35px;
}


.mis-frases-vacio h2{
    margin-bottom: 8px;
}


.mis-frases-vacio p{
    margin-bottom: 22px;
}


/* RESPONSIVE */

@media(max-width: 750px){

    .mis-frases-cabecera{
        align-items: stretch;
        flex-direction: column;
    }


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

}


@media(max-width: 500px){

    .pagina-mis-frases{
        padding-top: 28px;
    }


    .mi-frase-superior{
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }


    .mi-frase-card{
        padding: 18px;
    }


    .mi-frase-card blockquote{
        padding: 17px;
        font-size: 17px;
    }

}

/* =====================================================
   QUITAR FRASE DESTACADA - ADMIN
===================================================== */

.frase-destacada-acciones{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


.frase-destacada-acciones form{
    margin: 0;
}


.btn-quitar-destacada{
    padding: 9px 14px;

    border: 1px solid #c85a5a;
    border-radius: 5px;

    background: transparent;
    color: #a83f3f;

    font: inherit;
    font-size: 13px;

    cursor: pointer;
}


.btn-quitar-destacada:hover{
    background: #fff1f1;
}

/* =====================================================
   SOBRE EL RINCÓN
===================================================== */

.pagina-sobre-rincon{
    padding-top: 55px;
    padding-bottom: 70px;
}


/* PRESENTACIÓN */

.sobre-presentacion{
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}


.sobre-presentacion h1{
    max-width: 820px;
    margin: 10px auto 22px;

    font-size: clamp(32px, 5vw, 55px);
    line-height: 1.12;
}


.sobre-presentacion p{
    max-width: 730px;
    margin: 0 auto 16px;

    line-height: 1.8;
}


.sobre-introduccion{
    font-size: 18px;
}


/* FRASE */

.sobre-frase{
    max-width: 780px;
    margin: 0 auto 75px;
    padding: 35px 45px;

    border-top: 1px solid #d9c5a8;
    border-bottom: 1px solid #d9c5a8;

    text-align: center;
}


.sobre-frase > span{
    display: block;

    height: 35px;

    font-family: Georgia, serif;
    font-size: 60px;
    line-height: 1;

    color: #bd7b25;
    opacity: .45;
}


.sobre-frase blockquote{
    margin: 10px 0 0;
    padding: 0;

    border: 0;

    font-family: Georgia, serif;
    font-size: 24px;
    font-style: italic;
    line-height: 1.6;
}


/* BLOQUES DOS COLUMNAS */

.sobre-bloque{
    margin-bottom: 80px;
}


.sobre-dos-columnas{
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 70px;
}


.sobre-bloque-titulo h2{
    margin-top: 9px;

    font-size: clamp(27px, 4vw, 40px);
    line-height: 1.2;
}


.sobre-bloque-texto p{
    margin-top: 0;
    margin-bottom: 18px;

    line-height: 1.8;
}


/* CABECERAS */

.sobre-seccion-cabecera{
    max-width: 700px;
    margin-bottom: 35px;
}


.sobre-seccion-cabecera h2{
    margin: 8px 0 10px;

    font-size: clamp(28px, 4vw, 40px);
}


.sobre-seccion-cabecera p{
    line-height: 1.7;
}


/* CATEGORÍAS */

.sobre-seccion-categorias{
    margin-bottom: 85px;
}


.sobre-categorias-grid{
    display: grid;

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

    gap: 18px;
}


.sobre-categorias-grid article{
    padding: 27px;

    border: 1px solid #e2d2bd;
    border-radius: 9px;

    background: #fff;
}


.sobre-categorias-grid article > span{
    display: block;

    margin-bottom: 15px;

    font-size: 26px;
    color: #b8751a;
}


.sobre-categorias-grid h3{
    margin: 0 0 9px;
}


.sobre-categorias-grid p{
    margin: 0;

    font-size: 14px;
    line-height: 1.7;
}


/* ANONIMATO */

.sobre-anonimato{
    padding: 50px;

    border: 1px solid #dfceb7;
    border-radius: 10px;

    background: #faf7f2;
}


.sobre-nota{
    margin-top: 25px;
    padding: 17px 20px;

    border-left: 3px solid #b8751a;

    background: #fff;
}


.sobre-nota p{
    margin: 5px 0 0;

    font-size: 13px;
}


/* CÓMO FUNCIONA */

.sobre-como-funciona{
    margin-bottom: 85px;
}


.sobre-pasos{
    display: grid;

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

    border-top: 1px solid #dfceb7;
}


.sobre-pasos article{
    padding: 30px;

    border-right: 1px solid #dfceb7;
}


.sobre-pasos article:last-child{
    border-right: 0;
}


.sobre-numero{
    display: block;

    margin-bottom: 25px;

    font-family: Georgia, serif;
    font-size: 30px;
    color: #b8751a;
}


.sobre-pasos h3{
    margin-bottom: 10px;
}


.sobre-pasos p{
    margin: 0;

    line-height: 1.7;
}


/* PRINCIPIOS */

.sobre-principios{
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 70px;

    margin-bottom: 85px;
}


.sobre-principios-intro h2{
    margin-top: 8px;

    font-size: clamp(27px, 4vw, 40px);
}


.sobre-principios-lista > div{
    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #e4d4bf;
}


.sobre-principios-lista > div:first-child{
    padding-top: 0;
}


.sobre-principios-lista > div > span{
    font-family: Georgia, serif;
    color: #b8751a;
}


.sobre-principios-lista h3{
    margin: 0 0 7px;
}


.sobre-principios-lista p{
    margin: 0;

    line-height: 1.7;
}


/* CTA */

.sobre-cta{
    max-width: 850px;

    margin: 0 auto;
    padding: 55px 40px;

    border-top: 1px solid #d9c5a8;
    border-bottom: 1px solid #d9c5a8;

    text-align: center;
}


.sobre-cta h2{
    max-width: 650px;

    margin: 10px auto 15px;

    font-size: clamp(29px, 4vw, 43px);
    line-height: 1.2;
}


.sobre-cta p{
    margin-bottom: 28px;

    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
}


.sobre-cta-botones{
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
}


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

@media(max-width: 850px){

    .sobre-dos-columnas,
    .sobre-principios{
        grid-template-columns: 1fr;
        gap: 30px;
    }


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


    .sobre-anonimato{
        padding: 35px;
    }

}


@media(max-width: 650px){

    .pagina-sobre-rincon{
        padding-top: 35px;
    }


    .sobre-presentacion{
        text-align: left;
    }


    .sobre-frase{
        padding:
            30px
            15px;
    }


    .sobre-frase blockquote{
        font-size: 20px;
    }


    .sobre-categorias-grid{
        grid-template-columns: 1fr;
    }


    .sobre-pasos{
        grid-template-columns: 1fr;
    }


    .sobre-pasos article{
        padding:
            25px
            5px;

        border-right: 0;
        border-bottom: 1px solid #dfceb7;
    }


    .sobre-pasos article:last-child{
        border-bottom: 0;
    }


    .sobre-anonimato{
        padding: 25px 20px;
    }


    .sobre-cta{
        padding:
            45px
            15px;
    }


    .sobre-cta-botones{
        flex-direction: column;
    }


    .sobre-cta-botones a{
        width: 100%;
        box-sizing: border-box;
    }

}

/* =========================================================
   SOBRE EL RINCÓN - NUEVO DISEÑO
========================================================= */

:root{
    --sr-oscuro:#171513;
    --sr-oscuro-2:#211d19;
    --sr-dorado:#b87924;
    --sr-dorado-claro:#d5a15a;
    --sr-crema:#f8f3eb;
    --sr-papel:#fffdf9;
    --sr-texto:#302b27;
    --sr-suave:#766c63;
    --sr-borde:#dfc9aa;
}


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

.sr-hero{
    position:relative;
    min-height:570px;

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

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            #5b3a18 0,
            #302317 22%,
            #171513 60%,
            #100f0e 100%
        );

    color:#fff;
}


.sr-hero::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:45px 45px;
}


.sr-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.20),
            rgba(0,0,0,.62)
        );
}


.sr-hero-luz{
    position:absolute;

    top:-120px;
    left:50%;

    width:650px;
    height:500px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(220,155,70,.22),
            transparent 68%
        );

    pointer-events:none;
}


.sr-hero-contenido{
    position:relative;
    z-index:2;

    width:min(900px, calc(100% - 40px));

    padding:80px 20px;

    text-align:center;
}


.sr-etiqueta{
    display:inline-block;

    margin-bottom:24px;

    color:var(--sr-dorado-claro);

    font-size:11px;
    font-weight:700;
    letter-spacing:4px;
}


.sr-hero h1{
    max-width:850px;

    margin:0 auto;

    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(45px, 7vw, 78px);
    font-weight:400;
    line-height:1.02;
}


.sr-hero h1 span{
    display:block;

    color:var(--sr-dorado-claro);
    font-style:italic;
}


.sr-linea{
    width:70px;
    height:1px;

    margin:28px auto;

    background:var(--sr-dorado);
}


.sr-hero p{
    max-width:650px;

    margin:0 auto;

    color:#ded6cd;

    font-family:Georgia, serif;
    font-size:18px;
    font-style:italic;
    line-height:1.8;
}


.sr-descubrir{
    display:inline-flex;

    flex-direction:column;
    align-items:center;
    gap:10px;

    margin-top:45px;

    color:#d9c6ad;

    font-size:9px;
    font-weight:700;
    letter-spacing:2.5px;

    text-decoration:none;
}


.sr-descubrir span{
    font-size:22px;

    animation:
        srFlecha 1.8s
        ease-in-out
        infinite;
}


@keyframes srFlecha{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(7px);
    }

}


/* =========================================================
   CONTENEDOR
========================================================= */

.sr-zona{
    background:#fff;
}


.sr-contenido{
    padding-top:0;
    padding-bottom:0;
}


.sr-mini{
    display:block;

    margin-bottom:9px;

    color:#9c681f;

    font-size:10px;
    font-weight:700;
    letter-spacing:2.5px;
}


.sr-mini-claro{
    color:var(--sr-dorado-claro);
}


/* =========================================================
   FRASE CENTRAL
========================================================= */

.sr-frase{
    position:relative;

    max-width:820px;

    margin:0 auto;
    padding:80px 40px;

    text-align:center;
}


.sr-frase::before,
.sr-frase::after{
    content:"";

    position:absolute;
    left:50%;

    width:72%;
    height:1px;

    transform:translateX(-50%);

    background:linear-gradient(
        90deg,
        transparent,
        var(--sr-borde),
        transparent
    );
}


.sr-frase::before{
    top:35px;
}


.sr-frase::after{
    bottom:35px;
}


.sr-comillas{
    display:block;

    height:40px;

    color:#d7b47f;

    font-family:Georgia, serif;
    font-size:65px;
    line-height:1;
}


.sr-frase blockquote{
    max-width:700px;

    margin:8px auto 20px;
    padding:0;

    border:0;

    color:#332d28;

    font-family:Georgia, serif;
    font-size:clamp(22px, 3vw, 30px);
    font-style:italic;
    line-height:1.6;
}


.sr-firma{
    color:#a17743;

    font-size:9px;
    font-weight:700;
    letter-spacing:3px;
}


/* =========================================================
   QUÉ ES EL RINCÓN
========================================================= */

.sr-que-es{
    display:grid;

    grid-template-columns:
        minmax(300px, .85fr)
        minmax(0, 1.15fr);

    align-items:center;

    gap:75px;

    padding:70px 0 105px;
}


.sr-que-es-visual{
    display:flex;
    justify-content:center;
}


.sr-marco{
    position:relative;

    width:min(100%, 390px);
    aspect-ratio:4 / 5;

    padding:15px;

    box-sizing:border-box;

    border:1px solid #a36c27;

    background:
        linear-gradient(
            145deg,
            #2a2118,
            #141210
        );

    box-shadow:
        18px 20px 0 #f0e6d8,
        0 25px 50px rgba(0,0,0,.13);
}


.sr-marco::before{
    content:"";

    position:absolute;
    inset:9px;

    border:1px solid rgba(211,160,88,.35);

    pointer-events:none;
}


.sr-marco-interior{
    height:100%;

    display:flex;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:35px;

    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.08);

    text-align:center;
}


.sr-marco-icono{
    margin-bottom:18px;

    color:#c88b39;
    font-size:30px;
}


.sr-marco strong{
    color:#e4b66f;

    font-family:Georgia, serif;
    font-size:31px;
    letter-spacing:4px;
}


.sr-marco small{
    max-width:220px;

    margin-top:9px;

    color:#bca98e;

    font-size:8px;
    letter-spacing:2.5px;
    line-height:1.8;
}


.sr-marco-linea{
    width:45px;
    height:1px;

    margin:27px 0;

    background:#a76c24;
}


.sr-marco p{
    max-width:240px;

    margin:0;

    color:#ddd0bd;

    font-family:Georgia, serif;
    font-size:16px;
    font-style:italic;
    line-height:1.7;
}


.sr-que-es-texto h2,
.sr-anonimato h2,
.sr-principios h2{
    margin:0;

    color:#28231f;

    font-family:Georgia, serif;
    font-size:clamp(34px, 5vw, 52px);
    font-weight:400;
    line-height:1.1;
}


.sr-que-es-texto h2 em,
.sr-anonimato h2 em,
.sr-principios h2 em{
    color:#a96e20;
    font-weight:400;
}


.sr-titulo-linea{
    width:55px;
    height:2px;

    margin:22px 0 27px;

    background:var(--sr-dorado);
}


.sr-que-es-texto > p,
.sr-anonimato-texto > p{
    margin:0 0 18px;

    color:#5f574f;

    font-size:15px;
    line-height:1.9;
}


.sr-destacado-texto{
    display:flex;
    gap:15px;

    margin-top:28px;
    padding:18px 20px;

    border-left:3px solid #b97823;

    background:#faf5ed;
}


.sr-destacado-texto span{
    color:#b97823;
}


.sr-destacado-texto p{
    margin:0;

    color:#695c4d;

    font-family:Georgia, serif;
    font-size:14px;
    font-style:italic;
    line-height:1.7;
}


/* =========================================================
   CATEGORÍAS OSCURAS
========================================================= */

.sr-categorias{
    position:relative;

    padding:95px 30px 85px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 0,
            #34271c 0,
            #201b17 35%,
            #151311 80%
        );

    color:#fff;
}


.sr-categorias::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.25;

    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(255,255,255,.025) 50%,
            transparent 50.2%
        );

    background-size:80px 80px;
}


.sr-ancho{
    position:relative;
    z-index:1;

    width:min(1050px, 100%);
    margin:0 auto;
}


.sr-categorias-cabecera,
.sr-seccion-titulo{
    max-width:720px;

    margin:0 auto 55px;

    text-align:center;
}


.sr-categorias-cabecera h2,
.sr-seccion-titulo h2{
    margin:0;

    font-family:Georgia, serif;
    font-size:clamp(34px, 5vw, 50px);
    font-weight:400;
    line-height:1.15;
}


.sr-categorias-cabecera h2{
    color:#fff;
}


.sr-categorias-cabecera h2 em,
.sr-seccion-titulo h2 em{
    display:block;

    color:#c68b3d;
    font-weight:400;
}


.sr-linea-centro{
    width:50px;
    height:1px;

    margin:22px auto;

    background:#ad7228;
}


.sr-categorias-cabecera p{
    max-width:620px;

    margin:0 auto;

    color:#bcb1a4;

    font-size:14px;
    line-height:1.8;
}


.sr-categorias-grid{
    display:grid;

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

    gap:17px;
}


.sr-categoria-card{
    position:relative;

    min-height:245px;

    padding:30px 27px;

    box-sizing:border-box;

    border:1px solid rgba(204,150,76,.23);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.01)
        );

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.sr-categoria-card:hover{
    transform:translateY(-6px);

    border-color:rgba(211,158,83,.65);

    background:
        linear-gradient(
            145deg,
            rgba(190,126,42,.12),
            rgba(255,255,255,.02)
        );
}


.sr-categoria-icono{
    display:block;

    margin-bottom:20px;

    color:#c78b3b;
    font-family:Georgia, serif;
    font-size:31px;
}


.sr-categoria-card h3{
    margin:0;

    color:#f1e8dc;

    font-family:Georgia, serif;
    font-size:20px;
    font-weight:400;
}


.sr-categoria-card > div{
    width:30px;
    height:1px;

    margin:15px 0;

    background:#9d6828;
}


.sr-categoria-card p{
    margin:0;

    color:#a99e91;

    font-size:12px;
    line-height:1.8;
}


.sr-explorar{
    margin-top:45px;
    text-align:center;
}


.sr-explorar a{
    color:#c8924b;

    font-size:10px;
    font-weight:700;
    letter-spacing:1.7px;

    text-decoration:none;
}


.sr-explorar a:hover{
    color:#e2b16c;
}


/* =========================================================
   ANONIMATO
========================================================= */

.sr-anonimato{
    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:80px;

    padding:100px 0;

    border-bottom:1px solid #e4d5c1;
}


.sr-nota{
    display:flex;
    gap:16px;

    margin-top:30px;
    padding:20px;

    border:1px solid #e1cba9;

    background:#faf6ef;
}


.sr-nota > span{
    color:#ad7021;
    font-size:20px;
}


.sr-nota strong{
    display:block;

    margin-bottom:6px;

    color:#94601c;

    font-size:10px;
    letter-spacing:1.3px;
}


.sr-nota p{
    margin:0;

    color:#75685a;

    font-size:12px;
    line-height:1.7;
}


/* =========================================================
   CÓMO FUNCIONA
========================================================= */

.sr-funciona{
    padding:100px 0;
}


.sr-seccion-titulo h2{
    color:#29241f;
}


.sr-pasos{
    position:relative;

    display:grid;

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

    gap:55px;
}


.sr-pasos::before{
    content:"";

    position:absolute;

    top:59px;
    left:16%;
    right:16%;

    height:1px;

    background:#dcc5a5;
}


.sr-pasos article{
    position:relative;
    z-index:1;

    text-align:center;
}


.sr-paso-numero{
    display:block;

    margin-bottom:15px;

    color:#aa722a;

    font-family:Georgia, serif;
    font-size:13px;
}


.sr-paso-icono{
    width:76px;
    height:76px;

    display:flex;

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

    margin:0 auto 22px;

    border:1px solid #c99550;
    border-radius:50%;

    background:#fff;

    color:#ae7121;

    font-size:25px;
}


.sr-pasos h3{
    margin:0 0 10px;

    font-family:Georgia, serif;
    font-size:22px;
    font-weight:400;
}


.sr-pasos p{
    max-width:250px;

    margin:0 auto;

    color:#756b62;

    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   PRINCIPIOS
========================================================= */

.sr-principios{
    display:grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(0,1.15fr);

    gap:80px;

    padding:85px 0 110px;

    border-top:1px solid #e5d6c3;
}


.sr-principios-titulo > p{
    max-width:390px;

    color:#756b61;

    font-size:14px;
    line-height:1.8;
}


.sr-principios-lista article{
    display:grid;

    grid-template-columns:
        55px 1fr;

    gap:20px;

    padding:25px 0;

    border-bottom:1px solid #e4d5c1;
}


.sr-principios-lista article:first-child{
    padding-top:0;
}


.sr-principio-numero{
    color:#b27627;

    font-family:Georgia, serif;
    font-size:15px;
}


.sr-principios-lista h3{
    margin:0 0 8px;

    color:#302a25;

    font-family:Georgia, serif;
    font-size:21px;
    font-weight:400;
}


.sr-principios-lista p{
    margin:0;

    color:#746a60;

    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   CTA FINAL
========================================================= */

.sr-cta{
    position:relative;

    padding:105px 30px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            #3d2b1a,
            #211a15 45%,
            #131210 85%
        );

    color:#fff;
}


.sr-cta::before{
    content:"";

    position:absolute;
    inset:20px;

    border:1px solid rgba(195,137,58,.15);

    pointer-events:none;
}


.sr-cta-contenido{
    position:relative;
    z-index:1;

    max-width:800px;

    margin:0 auto;

    text-align:center;
}


.sr-cta-icono{
    display:block;

    margin-bottom:20px;

    color:#c78c3c;
    font-size:31px;
}


.sr-cta h2{
    max-width:700px;

    margin:10px auto 20px;

    font-family:Georgia, serif;
    font-size:clamp(36px, 6vw, 58px);
    font-weight:400;
    line-height:1.12;
}


.sr-cta h2 em{
    display:block;

    color:#d0a05d;
    font-weight:400;
}


.sr-cta > div > p{
    margin:0;

    color:#c6b9aa;

    font-family:Georgia, serif;
    font-size:17px;
    font-style:italic;
}


.sr-cta-botones{
    display:flex;

    justify-content:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:35px;
}


.sr-btn{
    min-width:210px;

    padding:15px 22px;

    box-sizing:border-box;

    font-size:10px;
    font-weight:700;
    letter-spacing:1.4px;

    text-decoration:none;

    transition:
        transform .2s ease,
        background .2s ease;
}


.sr-btn:hover{
    transform:translateY(-2px);
}


.sr-btn-dorado{
    border:1px solid #bd7c28;

    background:#b8751a;
    color:#fff;
}


.sr-btn-dorado:hover{
    background:#ca892f;
}


.sr-btn-borde{
    border:1px solid #86643d;

    color:#dfc29a;
}


.sr-btn-borde:hover{
    background:rgba(255,255,255,.05);
}


.sr-cta-contenido > small{
    display:block;

    margin-top:30px;

    color:#756b60;

    font-family:Georgia, serif;
    font-style:italic;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .sr-que-es{
        gap:45px;
    }


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


    .sr-anonimato,
    .sr-principios{
        gap:45px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:700px){

    .sr-hero{
        min-height:520px;
    }


    .sr-hero-contenido{
        padding:
            65px
            10px;
    }


    .sr-hero h1{
        font-size:
            clamp(40px, 13vw, 60px);
    }


    .sr-hero p{
        font-size:16px;
    }


    .sr-frase{
        padding:
            70px
            10px;
    }


    .sr-frase::before,
    .sr-frase::after{
        width:90%;
    }


    .sr-que-es{
        grid-template-columns:1fr;

        gap:65px;

        padding:
            45px
            0
            80px;
    }


    .sr-marco{
        width:min(82%, 350px);
    }


    .sr-que-es-texto{
        text-align:left;
    }


    .sr-categorias{
        padding:
            75px
            20px;
    }


    .sr-categorias-grid{
        grid-template-columns:1fr;
    }


    .sr-categoria-card{
        min-height:auto;
    }


    .sr-anonimato{
        grid-template-columns:1fr;

        gap:30px;

        padding:
            75px
            0;
    }


    .sr-funciona{
        padding:
            80px
            0;
    }


    .sr-pasos{
        grid-template-columns:1fr;

        gap:50px;
    }


    .sr-pasos::before{
        display:none;
    }


    .sr-principios{
        grid-template-columns:1fr;

        gap:45px;

        padding:
            70px
            0
            85px;
    }


    .sr-cta{
        padding:
            80px
            20px;
    }


    .sr-cta-botones{
        flex-direction:column;
    }


    .sr-btn{
        width:100%;
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media(max-width:430px){

    .sr-hero{
        min-height:480px;
    }


    .sr-etiqueta{
        letter-spacing:3px;
    }


    .sr-hero h1{
        font-size:41px;
    }


    .sr-marco{
        width:88%;
    }


    .sr-marco strong{
        font-size:26px;
    }


    .sr-que-es-texto h2,
    .sr-anonimato h2,
    .sr-principios h2{
        font-size:35px;
    }


    .sr-categorias-cabecera h2,
    .sr-seccion-titulo h2{
        font-size:35px;
    }


    .sr-principios-lista article{
        grid-template-columns:
            38px
            1fr;
    }


    .sr-cta h2{
        font-size:39px;
    }

}

/* AJUSTE PORTADA SOBRE EL RINCÓN - PC */

.sr-hero{
    min-height:500px;
}

.sr-hero-contenido{
    padding:60px 20px;
}

.sr-descubrir{
    margin-top:32px;
}


/* AJUSTE MÓVIL */

@media(max-width:700px){

    .sr-hero{
        min-height:460px;
    }

    .sr-hero-contenido{
        padding:50px 15px;
    }

}

/* =====================================================
   MARCO GENERAL - SOBRE EL RINCÓN
===================================================== */

body{
    background:#eeeeee;
}

.sr-marco-pagina{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    background:#ffffff;

    overflow:hidden;
}


/* Las secciones oscuras quedan dentro del marco */

.sr-marco-pagina .sr-hero,
.sr-marco-pagina .sr-categorias,
.sr-marco-pagina .sr-cta{
    width:100%;
    box-sizing:border-box;
}


/* MÓVIL */

@media(max-width:700px){

    .sr-marco-pagina{
        width:100%;
        max-width:100%;
    }

}

/* =====================================================
   INVÍTAME UN TRAGO
===================================================== */

.trago-marco-pagina{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    overflow:hidden;

    background:#fff;
}


/* HERO */

.trago-hero{
    position:relative;

    min-height:480px;

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

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            #5a3918 0,
            #2b2016 25%,
            #171411 58%,
            #0d0c0b 100%
        );

    color:#fff;
}


.trago-hero::before{
    content:"";

    position:absolute;
    inset:0;

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

    background-size:50px 50px;

    opacity:.35;
}


.trago-hero-luz{
    position:absolute;

    top:-170px;
    left:50%;

    width:700px;
    height:600px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(218,146,56,.22),
            transparent 68%
        );
}


.trago-hero-contenido{
    position:relative;
    z-index:2;

    width:min(
        780px,
        calc(100% - 40px)
    );

    padding:70px 20px;

    text-align:center;
}


.trago-mini{
    display:block;

    margin-bottom:15px;

    color:#d39a4b;

    font-size:10px;
    font-weight:700;

    letter-spacing:3px;
}


.trago-mini-oscuro{
    color:#a66a1d;
}


.trago-hero h1{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            43px,
            7vw,
            72px
        );

    font-weight:400;

    line-height:1.05;
}


.trago-hero h1 em{
    display:block;

    color:#d4a15b;

    font-weight:400;
}


.trago-linea{
    width:55px;
    height:1px;

    margin:25px auto;

    background:#b8751a;
}


.trago-hero p{
    max-width:620px;

    margin:0 auto;

    color:#d1c5b6;

    font-family:Georgia, serif;

    font-size:17px;
    font-style:italic;

    line-height:1.8;
}


.trago-copa{
    display:block;

    margin-top:30px;

    font-size:38px;
}


/* INTRO */

.trago-intro{
    max-width:760px;

    margin:0 auto;

    padding:80px 35px;

    text-align:center;
}


.trago-intro h2,
.trago-carta-cabecera h2,
.trago-seleccion h2,
.trago-ayuda h2{
    margin:0;

    color:#29231f;

    font-family:Georgia, serif;

    font-size:
        clamp(
            31px,
            5vw,
            45px
        );

    font-weight:400;

    line-height:1.15;
}


.trago-intro h2 em,
.trago-ayuda h2 em{
    color:#a66b1f;

    font-weight:400;
}


.trago-intro > p{
    margin:0 0 17px;

    color:#665d54;

    font-size:14px;

    line-height:1.9;
}


.trago-intro blockquote{
    margin:30px auto 0;
    padding:24px;

    border-top:1px solid #dec7a6;
    border-bottom:1px solid #dec7a6;

    color:#8e5d1d;

    font-family:Georgia, serif;

    font-size:20px;
    font-style:italic;
}


/* CARTA */

.trago-carta{
    padding:75px 55px 90px;

    background:#faf7f2;
}


.trago-carta-cabecera{
    max-width:650px;

    margin:0 auto 45px;

    text-align:center;
}


.trago-carta-cabecera p{
    color:#756b61;

    line-height:1.7;
}


.trago-opciones{
    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:14px;
}


.trago-card{
    position:relative;

    display:flex;
    flex-direction:column;

    min-height:390px;

    padding:30px 20px 22px;

    box-sizing:border-box;

    border:1px solid #dfccb1;

    background:#fff;

    text-align:center;

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


.trago-card:hover{
    transform:
        translateY(-6px);

    border-color:#bc7b27;

    box-shadow:
        0 15px 35px
        rgba(74,48,20,.10);
}


.trago-card.seleccionado{
    border:2px solid #b8751a;

    box-shadow:
        0 15px 35px
        rgba(74,48,20,.14);
}


.trago-card-destacada{
    border-color:#b8751a;
}


.trago-recomendado{
    position:absolute;

    top:0;
    left:0;
    right:0;

    padding:7px;

    background:#b8751a;

    color:#fff;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.5px;
}


.trago-card-icono{
    display:block;

    margin:
        18px
        0
        20px;

    font-size:43px;
}


.trago-card-tipo{
    color:#a66a1d;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.4px;
}


.trago-card h3{
    margin:
        8px
        0
        10px;

    font-family:Georgia, serif;

    font-size:23px;

    font-weight:400;
}


.trago-card p{
    margin:0;

    color:#756c63;

    font-size:12px;

    line-height:1.7;
}


.trago-precio{
    margin:auto 0 18px;

    padding-top:20px;

    color:#9f641a;
}


.trago-precio small{
    font-size:15px;
}


.trago-precio strong{
    font-family:Georgia, serif;

    font-size:36px;

    font-weight:400;
}


.trago-elegir{
    width:100%;

    padding:12px;

    border:1px solid #b8751a;

    background:transparent;

    color:#9c6118;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    cursor:pointer;
}


.trago-card:hover
.trago-elegir,
.trago-card.seleccionado
.trago-elegir{
    background:#b8751a;

    color:#fff;
}


/* SELECCIÓN */

.trago-seleccion{
    padding:80px 35px;

    background:#fff;
}


.trago-seleccion > div{
    max-width:650px;

    margin:0 auto;

    padding:45px;

    box-sizing:border-box;

    border:1px solid #dfc8a7;

    text-align:center;
}


.trago-seleccion-icono{
    display:block;

    margin-bottom:15px;

    font-size:38px;
}


.trago-seleccion p{
    color:#756b61;

    font-size:13px;

    line-height:1.7;
}


.trago-total{
    margin:25px 0;

    color:#a6681c;

    font-family:Georgia, serif;

    font-size:38px;
}


.trago-continuar{
    width:100%;

    padding:15px;

    border:0;

    background:#b8751a;

    color:#fff;

    font-size:10px;
    font-weight:700;

    letter-spacing:1.3px;

    cursor:pointer;
}


.trago-continuar:disabled{
    background:#d8d0c5;

    cursor:not-allowed;
}


.trago-seleccion small{
    display:block;

    margin-top:15px;

    color:#999087;
}


/* AYUDA */

.trago-ayuda{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:70px;

    padding:80px 60px;

    background:#faf7f2;
}


.trago-ayuda-lista article{
    display:grid;

    grid-template-columns:
        40px 1fr;

    gap:15px;

    padding:20px 0;

    border-bottom:
        1px solid
        #e2d2bd;
}


.trago-ayuda-lista article > span{
    color:#ad7021;

    font-size:20px;
}


.trago-ayuda-lista h3{
    margin:0 0 7px;

    font-family:Georgia, serif;

    font-size:19px;
}


.trago-ayuda-lista p{
    margin:0;

    color:#746b62;

    font-size:12px;

    line-height:1.7;
}


/* CIERRE */

.trago-cierre{
    padding:75px 35px;

    background:
        radial-gradient(
            circle,
            #352619,
            #171411 70%
        );

    color:#fff;

    text-align:center;
}


.trago-cierre > span{
    font-size:34px;
}


.trago-cierre blockquote{
    max-width:650px;

    margin:20px auto;

    padding:0;

    border:0;

    color:#e2d5c3;

    font-family:Georgia, serif;

    font-size:23px;
    font-style:italic;

    line-height:1.6;
}


.trago-cierre small{
    color:#b98238;

    letter-spacing:3px;
}


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

@media(max-width:900px){

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


    .trago-ayuda{
        grid-template-columns:1fr;

        gap:35px;
    }

}


@media(max-width:600px){

    .trago-hero{
        min-height:450px;
    }


    .trago-hero h1{
        font-size:42px;
    }


    .trago-intro{
        padding:
            60px
            22px;
    }


    .trago-carta{
        padding:
            60px
            20px;
    }


    .trago-opciones{
        grid-template-columns:1fr;
    }


    .trago-card{
        min-height:360px;
    }


    .trago-seleccion{
        padding:
            60px
            20px;
    }


    .trago-seleccion > div{
        padding:
            35px
            20px;
    }


    .trago-ayuda{
        padding:
            60px
            25px;
    }


    .trago-cierre{
        padding:
            65px
            25px;
    }

}

/* =====================================================
   PAGO - INVÍTAME UN TRAGO
===================================================== */

.trago-pago{
    display:none;

    padding:80px 30px;

    background:#f5efe6;
}


.trago-pago.visible{
    display:block;
}


.trago-pago-contenido{
    position:relative;

    max-width:600px;

    margin:0 auto;
    padding:50px 55px;

    box-sizing:border-box;

    border:1px solid #d8bd96;

    background:#fff;

    text-align:center;

    box-shadow:
        0 20px 50px
        rgba(60,40,20,.08);
}


.trago-pago-contenido::before{
    content:"";

    position:absolute;

    inset:9px;

    border:1px solid #eee1cf;

    pointer-events:none;
}


.trago-pago-cerrar{
    position:absolute;
    z-index:3;

    top:15px;
    right:18px;

    width:34px;
    height:34px;

    border:0;

    background:transparent;

    color:#8c7964;

    font-size:25px;

    cursor:pointer;
}


.trago-pago-icono{
    position:relative;
    z-index:2;

    display:block;

    margin-bottom:15px;

    font-size:38px;
}


.trago-pago h2{
    position:relative;
    z-index:2;

    margin:5px 0 20px;

    color:#29231f;

    font-family:Georgia, serif;

    font-size:
        clamp(
            30px,
            5vw,
            43px
        );

    font-weight:400;
}


.trago-pago h2 em{
    display:block;

    color:#a76b1e;

    font-weight:400;
}


.trago-pago-intro{
    position:relative;
    z-index:2;

    margin-bottom:10px;

    color:#786e64;
}


.trago-pago-resumen{
    position:relative;
    z-index:2;

    display:flex;

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

    gap:14px;

    flex-wrap:wrap;
}


.trago-pago-resumen strong{
    font-family:Georgia, serif;

    font-size:21px;

    font-weight:400;
}


.trago-pago-resumen span{
    padding:6px 12px;

    border-radius:20px;

    background:#b8751a;

    color:#fff;

    font-weight:700;
}


.trago-pago-linea{
    position:relative;
    z-index:2;

    width:55px;
    height:1px;

    margin:25px auto;

    background:#c28a42;
}


.trago-pago-instruccion{
    position:relative;
    z-index:2;

    max-width:440px;

    margin:0 auto 25px;

    color:#70665d;

    font-size:13px;

    line-height:1.8;
}


/* QR */

.trago-qr{
    position:relative;
    z-index:2;

    width:230px;

    margin:0 auto 20px;
    padding:12px;

    box-sizing:border-box;

    border:1px solid #d8bd96;

    background:#fff;
}


.trago-qr img{
    display:block;

    width:100%;
    height:auto;
}


.trago-monto-recordatorio{
    position:relative;
    z-index:2;

    margin:20px 0;

    color:#71665b;

    font-size:13px;
}


.trago-monto-recordatorio strong{
    display:block;

    margin-top:5px;

    color:#a76b1e;

    font-family:Georgia, serif;

    font-size:34px;

    font-weight:400;
}


.trago-pago-aviso{
    position:relative;
    z-index:2;

    max-width:430px;

    margin:0 auto 25px;

    color:#91877c;

    font-size:11px;

    line-height:1.6;
}


.trago-pago-hecho{
    position:relative;
    z-index:2;

    width:100%;

    padding:15px;

    border:0;

    background:#b8751a;

    color:#fff;

    font-size:10px;
    font-weight:700;

    letter-spacing:1.2px;

    cursor:pointer;
}


.trago-pago-hecho:hover{
    background:#c98930;
}


.trago-pago-hecho.confirmado{
    background:#4f714e;

    cursor:default;
}


/* MÓVIL */

@media(max-width:600px){

    .trago-pago{
        padding:
            55px
            18px;
    }


    .trago-pago-contenido{
        padding:
            45px
            22px
            35px;
    }


    .trago-qr{
        width:min(
            220px,
            90%
        );
    }

}

/* =====================================================
   YAPE / PLIN + PAYPAL
===================================================== */

.trago-metodos{
    position:relative;
    z-index:2;

    margin:30px 0;
}

.trago-metodos-titulo{
    display:block;

    margin-bottom:13px;

    color:#786d62;

    font-size:9px;
    font-weight:700;

    letter-spacing:1.5px;
}

.trago-metodos-botones{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.trago-metodo{
    padding:15px;

    border:1px solid #dbc5a5;

    background:#fff;

    color:#675c52;

    font-size:12px;
    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.trago-metodo:hover{
    border-color:#b8751a;
}

.trago-metodo.activo{
    border-color:#b8751a;

    background:#faf2e6;

    color:#9e631a;
}


/* OCULTAR MÉTODO NO SELECCIONADO */

.trago-metodo-contenido{
    display:none;

    position:relative;
    z-index:2;

    padding-top:10px;
}

.trago-metodo-contenido.activo{
    display:block;
}


/* YAPE */

.trago-metodo-subtitulo{
    margin-bottom:20px;

    color:#756b61;

    font-size:13px;
}


/* PAYPAL */

.trago-paypal-logo{
    margin:15px 0;

    color:#003087;

    font-size:34px;
    font-weight:800;

    letter-spacing:-1px;
}

.trago-metodo-contenido h3{
    margin:10px 0;

    color:#302a25;

    font-family:Georgia, serif;

    font-size:25px;
    font-weight:400;
}

.trago-metodo-contenido > p{
    max-width:430px;

    margin:0 auto 20px;

    color:#756b61;

    font-size:13px;

    line-height:1.8;
}

.trago-paypal-monto{
    margin:25px 0;

    color:#74695e;

    font-size:13px;
}

.trago-paypal-monto strong{
    display:block;

    margin-top:7px;

    color:#a66a1d;

    font-family:Georgia, serif;

    font-size:35px;

    font-weight:400;
}

.trago-paypal-btn{
    display:block;

    width:100%;

    padding:16px;

    box-sizing:border-box;

    border-radius:5px;

    background:#0070ba;

    color:#fff;

    font-size:11px;
    font-weight:700;

    letter-spacing:.5px;

    text-decoration:none;

    transition:.2s;
}

.trago-paypal-btn:hover{
    background:#005ea6;
}

.trago-metodo-contenido > small{
    display:block;

    margin-top:15px;

    color:#92877c;

    font-size:10px;

    line-height:1.6;
}


/* MÓVIL */

@media(max-width:500px){

    .trago-metodos-botones{
        grid-template-columns:1fr;
    }

}

/* =====================================================
   DESCUBRE
===================================================== */

.descubre-marco{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    overflow:hidden;

    background:#fff;
}


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

.descubre-hero{
    position:relative;

    min-height:470px;

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

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            #49311d 0,
            #241b14 32%,
            #12100e 70%
        );

    color:#fff;
}


.descubre-hero::before{
    content:"";

    position:absolute;
    inset:0;

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

    background-size:50px 50px;
}


.descubre-hero-luz{
    position:absolute;

    top:-200px;
    left:50%;

    width:750px;
    height:650px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(199,130,47,.20),
            transparent 68%
        );
}


.descubre-hero-contenido{
    position:relative;
    z-index:2;

    max-width:780px;

    padding:70px 30px;

    text-align:center;
}


.descubre-mini{
    display:block;

    margin-bottom:15px;

    color:#d09a50;

    font-size:10px;
    font-weight:700;

    letter-spacing:3px;
}


.descubre-mini-oscuro{
    color:#a66a1d;
}


.descubre-hero h1{
    margin:0;

    font-family:Georgia,serif;

    font-size:
        clamp(
            42px,
            6vw,
            66px
        );

    font-weight:400;

    line-height:1.07;
}


.descubre-hero h1 em{
    display:block;

    color:#d3a15d;

    font-weight:400;
}


.descubre-linea{
    width:55px;
    height:1px;

    margin:25px auto;

    background:#b8751a;
}


.descubre-hero p{
    max-width:610px;

    margin:0 auto;

    color:#d1c5b6;

    font-family:Georgia,serif;

    font-size:16px;
    font-style:italic;

    line-height:1.8;
}


.descubre-flecha{
    display:block;

    margin-top:28px;

    color:#c18a40;

    font-size:25px;
}


/* =====================================================
   OPCIONES
===================================================== */

.descubre-opciones{
    padding:80px 55px 95px;

    background:#faf7f2;
}


.descubre-cabecera{
    max-width:680px;

    margin:0 auto 50px;

    text-align:center;
}


.descubre-cabecera h2{
    margin:0;

    color:#29231f;

    font-family:Georgia,serif;

    font-size:
        clamp(
            32px,
            5vw,
            46px
        );

    font-weight:400;
}


.descubre-cabecera h2 em{
    color:#a66a1d;

    font-weight:400;
}


.descubre-cabecera p{
    margin-top:18px;

    color:#756b61;

    font-size:13px;

    line-height:1.8;
}


/* GRID */

.descubre-grid{
    display:grid;

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

    gap:18px;
}


/* TARJETA */

.descubre-card{
    position:relative;

    min-height:390px;

    display:flex;
    flex-direction:column;

    padding:35px 28px 28px;

    box-sizing:border-box;

    border:1px solid #ddc8aa;

    background:#fff;

    color:#2d2925;

    text-align:center;

    text-decoration:none;

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


.descubre-card:hover{
    transform:
        translateY(-7px);

    border-color:#b8751a;

    box-shadow:
        0 18px 40px
        rgba(70,45,20,.11);
}


.descubre-card-destacada{
    border-color:#b8751a;
}


.descubre-recomendado{
    position:absolute;

    top:0;
    left:0;
    right:0;

    padding:7px;

    background:#b8751a;

    color:#fff;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.7px;
}


.descubre-numero{
    position:absolute;

    top:20px;
    right:20px;

    color:#e4d5c0;

    font-family:Georgia,serif;

    font-size:25px;
}


.descubre-icono{
    display:block;

    margin:
        25px
        0
        22px;

    font-size:45px;
}


.descubre-etiqueta{
    color:#a66a1d;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.5px;
}


.descubre-card h3{
    margin:10px 0 15px;

    font-family:Georgia,serif;

    font-size:26px;

    font-weight:400;
}


.descubre-card p{
    margin:0;

    color:#756c63;

    font-size:12px;

    line-height:1.8;
}


.descubre-enlace{
    display:block;

    margin-top:auto;
    padding-top:30px;

    color:#9e631b;

    font-size:9px;
    font-weight:700;

    letter-spacing:1.3px;
}


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

.descubre-frase{
    padding:75px 30px;

    background:
        radial-gradient(
            circle,
            #382719,
            #171411 72%
        );

    color:#fff;

    text-align:center;
}


.descubre-frase > span{
    color:#c58b3e;

    font-size:24px;
}


.descubre-frase blockquote{
    max-width:650px;

    margin:20px auto;

    padding:0;

    border:0;

    color:#e3d7c7;

    font-family:Georgia,serif;

    font-size:24px;
    font-style:italic;

    line-height:1.6;
}


.descubre-frase small{
    color:#b98238;

    letter-spacing:3px;
}


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

@media(max-width:800px){

    .descubre-grid{
        grid-template-columns:1fr;
    }


    .descubre-card{
        min-height:330px;
    }

}


@media(max-width:600px){

    .descubre-hero{
        min-height:440px;
    }


    .descubre-hero-contenido{
        padding:
            55px
            22px;
    }


    .descubre-hero h1{
        font-size:41px;
    }


    .descubre-opciones{
        padding:
            60px
            20px
            70px;
    }


    .descubre-frase{
        padding:
            60px
            25px;
    }


    .descubre-frase blockquote{
        font-size:20px;
    }

}

/* =====================================================
   TENDENCIAS
===================================================== */

.tendencias-marco{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    overflow:hidden;

    background:#fff;
}


/* HERO */

.tendencias-hero{
    position:relative;

    min-height:430px;

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

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            #58321c 0,
            #281a12 35%,
            #110f0d 75%
        );

    color:#fff;
}


.tendencias-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 20% 100%,
            rgba(184,117,26,.13),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 100%,
            rgba(184,117,26,.10),
            transparent 35%
        );
}


.tendencias-hero-contenido{
    position:relative;
    z-index:2;

    max-width:760px;

    padding:65px 30px;

    text-align:center;
}


.tendencias-fuego{
    display:block;

    margin-bottom:15px;

    font-size:43px;
}


.tendencias-mini{
    display:block;

    margin-bottom:13px;

    color:#d39a4b;

    font-size:9px;
    font-weight:700;

    letter-spacing:3px;
}


.tendencias-hero h1{
    margin:0;

    font-family:Georgia,serif;

    font-size:
        clamp(
            40px,
            6vw,
            62px
        );

    font-weight:400;

    line-height:1.08;
}


.tendencias-hero h1 em{
    display:block;

    color:#d4a15b;

    font-weight:400;
}


.tendencias-linea{
    width:55px;
    height:1px;

    margin:24px auto;

    background:#b8751a;
}


.tendencias-hero p{
    max-width:600px;

    margin:0 auto;

    color:#d1c5b6;

    font-family:Georgia,serif;

    font-size:15px;
    font-style:italic;

    line-height:1.8;
}


/* CONTENIDO */

.tendencias-contenido{
    padding:75px 55px 90px;

    background:#faf7f2;
}


.tendencias-cabecera{
    max-width:650px;

    margin:0 auto 45px;

    text-align:center;
}


.tendencias-cabecera > span{
    display:block;

    margin-bottom:12px;

    color:#a5681b;

    font-size:9px;
    font-weight:700;

    letter-spacing:2px;
}


.tendencias-cabecera h2{
    margin:0;

    color:#29231f;

    font-family:Georgia,serif;

    font-size:
        clamp(
            32px,
            5vw,
            45px
        );

    font-weight:400;
}


.tendencias-cabecera h2 em{
    color:#a66a1d;

    font-weight:400;
}


.tendencias-cabecera p{
    color:#766c62;

    font-size:13px;

    line-height:1.8;
}


/* GRID */

.tendencias-grid{
    display:grid;

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

    gap:18px;
}


/* TARJETAS */

.tendencia-card{
    overflow:hidden;

    border:1px solid #e0cfb8;

    background:#fff;

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


.tendencia-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 16px 35px
        rgba(70,45,20,.10);
}


.tendencia-top{
    border-color:#c99958;
}


/* IMAGEN */

.tendencia-imagen{
    position:relative;

    display:block;

    height:190px;

    overflow:hidden;

    background:#ddd;
}


.tendencia-imagen img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .4s ease;
}


.tendencia-card:hover
.tendencia-imagen img{
    transform:scale(1.04);
}


/* POSICIÓN */

.tendencia-posicion{
    position:absolute;

    top:12px;
    left:12px;

    min-width:40px;

    padding:8px 10px;

    box-sizing:border-box;

    background:rgba(20,16,13,.88);

    color:#fff;

    font-family:Georgia,serif;

    font-size:17px;

    text-align:center;
}


.tendencia-lider{
    position:absolute;

    right:0;
    bottom:0;

    padding:7px 12px;

    background:#b8751a;

    color:#fff;

    font-size:8px;
    font-weight:700;

    letter-spacing:1px;
}


/* CONTENIDO */

.tendencia-card-contenido{
    padding:24px 22px 20px;
}


.tendencia-categoria{
    color:#a6681b;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.tendencia-card h2{
    margin:8px 0 12px;

    font-family:Georgia,serif;

    font-size:22px;

    font-weight:400;

    line-height:1.25;
}


.tendencia-card h2 a{
    color:#2c2723;

    text-decoration:none;
}


.tendencia-card h2 a:hover{
    color:#a6681b;
}


.tendencia-card-contenido > p{
    min-height:62px;

    margin:0 0 17px;

    color:#746b62;

    font-size:12px;

    line-height:1.7;
}


/* META */

.tendencia-meta{
    display:flex;

    justify-content:space-between;

    gap:10px;

    padding:13px 0;

    border-top:1px solid #eee4d8;

    color:#8b8177;

    font-size:10px;
}


.tendencia-meta a{
    color:inherit;

    text-decoration:none;
}


.tendencia-meta a:hover{
    color:#a6681b;
}


/* FOOTER */

.tendencia-footer{
    display:flex;

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

    gap:10px;

    padding-top:13px;

    border-top:1px solid #eee4d8;
}


.tendencia-stats{
    display:flex;

    gap:10px;

    color:#71685f;

    font-size:10px;
}


.tendencia-leer{
    color:#9e631b;

    font-size:9px;
    font-weight:700;

    text-decoration:none;
}


/* VACÍO */

.tendencias-vacio{
    max-width:600px;

    margin:0 auto;

    padding:60px 30px;

    border:1px solid #decbb0;

    background:#fff;

    text-align:center;
}


.tendencias-vacio > span{
    color:#b8751a;

    font-size:30px;
}


.tendencias-vacio h2{
    font-family:Georgia,serif;

    font-weight:400;
}


.tendencias-vacio p{
    color:#756b61;
}


.tendencias-vacio a{
    color:#a6681b;

    font-weight:700;

    text-decoration:none;
}


/* AZAR */

.tendencias-azar{
    display:grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:center;

    gap:25px;

    padding:50px 60px;

    background:#211a15;

    color:#fff;
}


.tendencias-azar > span{
    font-size:42px;
}


.tendencias-azar small{
    color:#b98238;

    font-size:8px;

    letter-spacing:2px;
}


.tendencias-azar h2{
    margin:6px 0;

    font-family:Georgia,serif;

    font-size:28px;

    font-weight:400;
}


.tendencias-azar p{
    margin:0;

    color:#bfb2a4;

    font-size:12px;
}


.tendencias-azar > a{
    padding:13px 20px;

    border:1px solid #b8751a;

    color:#d5a35f;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    text-decoration:none;
}


.tendencias-azar > a:hover{
    background:#b8751a;

    color:#fff;
}


/* RESPONSIVE */

@media(max-width:900px){

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

}


@media(max-width:650px){

    .tendencias-hero{
        min-height:420px;
    }


    .tendencias-contenido{
        padding:
            60px
            20px
            70px;
    }


    .tendencias-grid{
        grid-template-columns:1fr;
    }


    .tendencia-card-contenido > p{
        min-height:auto;
    }


    .tendencias-azar{
        grid-template-columns:1fr;

        padding:
            45px
            25px;

        text-align:center;
    }


    .tendencias-azar > a{
        justify-self:center;
    }

}

/* =====================================================
   ADMIN - HISTORIAS DESTACADAS
===================================================== */

.admin-form-destacar{
    width:100%;

    display:flex;
    flex-direction:column;

    gap:8px;

    margin-top:5px;
}


.admin-btn-destacar,
.admin-btn-quitar-destacada{
    width:100%;

    padding:11px 14px;

    box-sizing:border-box;

    border-radius:4px;

    font-size:10px;
    font-weight:700;

    letter-spacing:.5px;

    cursor:pointer;
}


.admin-btn-destacar{
    border:1px solid #b8751a;

    background:#fff8ed;

    color:#9a6018;
}


.admin-btn-destacar:hover{
    background:#b8751a;

    color:#fff;
}


.admin-destacada-etiqueta{
    display:block;

    padding:8px 10px;

    border:1px solid #d5a35c;

    background:#fff4df;

    color:#95601d;

    font-size:9px;
    font-weight:700;

    line-height:1.4;

    text-align:center;

    letter-spacing:.7px;
}


.admin-btn-quitar-destacada{
    border:1px solid #d4cbc0;

    background:#fff;

    color:#756b61;
}


.admin-btn-quitar-destacada:hover{
    border-color:#a66a1d;

    color:#a66a1d;
}

/* =====================================================
   LO MEJOR DE EL RINCÓN
===================================================== */

.mejor-marco{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    overflow:hidden;

    background:#fff;
}


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

.mejor-hero{
    position:relative;

    min-height:470px;

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

    background:
        radial-gradient(
            circle at 50% 25%,
            #5a3a20 0,
            #2b1e15 33%,
            #12100e 75%
        );

    color:#fff;

    text-align:center;
}


.mejor-hero::before{
    content:"";

    position:absolute;
    inset:25px;

    border:1px solid
        rgba(207,155,84,.18);

    pointer-events:none;
}


.mejor-hero-contenido{
    position:relative;

    max-width:760px;

    padding:70px 30px;
}


.mejor-corona{
    display:block;

    margin-bottom:14px;

    color:#d5a35e;

    font-size:34px;
}


.mejor-mini{
    display:block;

    margin-bottom:16px;

    color:#d2a05b;

    font-size:9px;
    font-weight:700;

    letter-spacing:4px;
}


.mejor-hero h1{
    margin:0;

    font-family:Georgia,serif;

    font-size:
        clamp(
            42px,
            6vw,
            64px
        );

    font-weight:400;

    line-height:1.08;
}


.mejor-hero h1 em{
    display:block;

    color:#d7a760;

    font-weight:400;
}


.mejor-linea{
    width:55px;
    height:1px;

    margin:26px auto;

    background:#b8751a;
}


.mejor-hero p{
    max-width:600px;

    margin:0 auto;

    color:#d0c3b5;

    font-family:Georgia,serif;

    font-size:15px;
    font-style:italic;

    line-height:1.9;
}


/* =====================================================
   HISTORIA PRINCIPAL
===================================================== */

.mejor-principal{
    padding:80px 55px;

    background:#faf7f2;
}


.mejor-principal-cabecera{
    margin-bottom:35px;

    text-align:center;
}


.mejor-principal-cabecera > span{
    display:block;

    margin-bottom:10px;

    color:#a6691d;

    font-size:9px;
    font-weight:700;

    letter-spacing:2.5px;
}


.mejor-principal-cabecera h2{
    margin:0;

    font-family:Georgia,serif;

    font-size:40px;

    font-weight:400;
}


.mejor-principal-cabecera h2 em{
    color:#a66a1d;

    font-weight:400;
}


.mejor-principal-card{
    display:grid;

    grid-template-columns:
        1.15fr
        .85fr;

    min-height:470px;

    border:1px solid #d8bc95;

    background:#fff;
}


/* IMAGEN PRINCIPAL */

.mejor-principal-imagen{
    position:relative;

    display:block;

    min-height:470px;

    overflow:hidden;
}


.mejor-principal-imagen img{
    width:100%;
    height:100%;

    position:absolute;

    object-fit:cover;

    transition:
        transform .5s ease;
}


.mejor-principal-card:hover
.mejor-principal-imagen img{
    transform:scale(1.025);
}


/* SELLO */

.mejor-sello{
    position:absolute;

    top:25px;
    left:25px;

    width:90px;
    height:90px;

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

    box-sizing:border-box;

    border:1px solid
        rgba(255,255,255,.65);

    border-radius:50%;

    background:
        rgba(32,23,17,.88);

    color:#e5bd82;

    font-size:8px;
    font-weight:700;

    line-height:1.5;

    text-align:center;

    letter-spacing:1px;
}


.mejor-sello strong{
    display:block;

    margin-bottom:3px;

    font-size:17px;
}


.mejor-sello small{
    font-size:7px;
}


/* INFORMACIÓN PRINCIPAL */

.mejor-principal-info{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:50px 42px;
}


.mejor-categoria{
    color:#a66a1d;

    font-size:8px;
    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
}


.mejor-principal-info h2{
    margin:12px 0 0;

    color:#29231f;

    font-family:Georgia,serif;

    font-size:
        clamp(
            30px,
            4vw,
            42px
        );

    font-weight:400;

    line-height:1.15;
}


.mejor-separador{
    width:45px;
    height:1px;

    margin:22px 0;

    background:#b8751a;
}


.mejor-principal-info > p{
    margin:0;

    color:#70675e;

    font-family:Georgia,serif;

    font-size:14px;

    line-height:1.8;
}


.mejor-autor{
    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:25px;
    padding-top:16px;

    border-top:1px solid #eee2d4;

    color:#897d71;

    font-size:10px;
}


.mejor-autor a{
    color:#9d631d;

    text-decoration:none;
}


.mejor-estadisticas{
    display:flex;

    gap:18px;

    margin-top:14px;

    color:#766c62;

    font-size:10px;
}


.mejor-boton{
    align-self:flex-start;

    margin-top:28px;

    padding:
        13px
        19px;

    border:1px solid #a96b1c;

    color:#9a6018;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    text-decoration:none;
}


.mejor-boton:hover{
    background:#a96b1c;

    color:#fff;
}


/* =====================================================
   COLECCIÓN
===================================================== */

.mejor-coleccion{
    padding:
        80px
        55px
        95px;

    background:#fff;
}


.mejor-coleccion-cabecera{
    max-width:650px;

    margin:0 auto 45px;

    text-align:center;
}


.mejor-coleccion-cabecera > span{
    color:#a66a1d;

    font-size:9px;
    font-weight:700;

    letter-spacing:2px;
}


.mejor-coleccion-cabecera h2{
    margin:10px 0;

    font-family:Georgia,serif;

    font-size:39px;

    font-weight:400;
}


.mejor-coleccion-cabecera h2 em{
    color:#a66a1d;

    font-weight:400;
}


.mejor-coleccion-cabecera p{
    color:#756c63;

    font-size:13px;

    line-height:1.8;
}


/* GRID */

.mejor-grid{
    display:grid;

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

    gap:20px;
}


.mejor-card{
    overflow:hidden;

    border:1px solid #dfcfba;

    background:#fff;

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


.mejor-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 16px 35px
        rgba(65,42,20,.10);
}


/* IMAGEN */

.mejor-card-imagen{
    position:relative;

    display:block;

    height:200px;

    overflow:hidden;
}


.mejor-card-imagen img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .4s ease;
}


.mejor-card:hover
.mejor-card-imagen img{
    transform:scale(1.04);
}


.mejor-card-imagen span{
    position:absolute;

    left:0;
    bottom:0;

    padding:7px 11px;

    background:#a96b1c;

    color:#fff;

    font-size:8px;
    font-weight:700;

    letter-spacing:1px;
}


/* INFORMACIÓN */

.mejor-card-info{
    padding:23px 21px;
}


.mejor-card-info h3{
    margin:9px 0 13px;

    font-family:Georgia,serif;

    font-size:22px;

    font-weight:400;

    line-height:1.3;
}


.mejor-card-info h3 a{
    color:#2d2824;

    text-decoration:none;
}


.mejor-card-info h3 a:hover{
    color:#a66a1d;
}


.mejor-card-info > p{
    margin:0;

    color:#756c63;

    font-size:12px;

    line-height:1.75;
}


.mejor-card-meta{
    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-top:18px;
    padding-top:13px;

    border-top:1px solid #eee3d7;

    color:#8a8076;

    font-size:9px;
}


.mejor-leer{
    display:inline-block;

    margin-top:18px;

    color:#9d621a;

    font-size:9px;
    font-weight:700;

    letter-spacing:.5px;

    text-decoration:none;
}


/* =====================================================
   VACÍO
===================================================== */

.mejor-vacio{
    padding:
        100px
        30px;

    background:#faf7f2;

    text-align:center;
}


.mejor-vacio > span{
    color:#b8751a;

    font-size:34px;
}


.mejor-vacio h2{
    max-width:600px;

    margin:
        20px
        auto;

    font-family:Georgia,serif;

    font-size:36px;

    font-weight:400;
}


.mejor-vacio p{
    max-width:500px;

    margin:
        0
        auto
        30px;

    color:#746b62;

    line-height:1.8;
}


.mejor-vacio a{
    color:#9f631a;

    font-weight:700;

    text-decoration:none;
}


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

.mejor-final{
    padding:
        80px
        30px;

    background:
        radial-gradient(
            circle,
            #3b291a,
            #171411 72%
        );

    color:#fff;

    text-align:center;
}


.mejor-final > span{
    color:#c58b3e;

    font-size:26px;
}


.mejor-final blockquote{
    max-width:650px;

    margin:
        20px
        auto;

    padding:0;

    border:0;

    color:#e1d4c5;

    font-family:Georgia,serif;

    font-size:23px;
    font-style:italic;

    line-height:1.65;
}


.mejor-final > div{
    margin-bottom:30px;

    color:#b98238;

    font-size:8px;

    letter-spacing:4px;
}


.mejor-final a{
    display:inline-block;

    padding:13px 18px;

    border:1px solid #a96b1c;

    color:#d7a45f;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    text-decoration:none;
}


.mejor-final a:hover{
    background:#a96b1c;

    color:#fff;
}


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

@media(max-width:850px){

    .mejor-principal-card{
        grid-template-columns:1fr;
    }


    .mejor-principal-imagen{
        min-height:400px;
    }


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

}


@media(max-width:600px){

    .mejor-hero{
        min-height:450px;
    }


    .mejor-hero::before{
        inset:15px;
    }


    .mejor-principal{
        padding:
            60px
            20px;
    }


    .mejor-principal-imagen{
        min-height:300px;
    }


    .mejor-principal-info{
        padding:
            35px
            25px;
    }


    .mejor-autor{
        flex-direction:column;
    }


    .mejor-coleccion{
        padding:
            65px
            20px
            75px;
    }


    .mejor-grid{
        grid-template-columns:1fr;
    }


    .mejor-card-meta{
        flex-direction:column;
    }

}

/* =====================================================
   INICIO - DESCUBRE EL RINCÓN
===================================================== */

.inicio-descubre{
    position:relative;

    padding:
        75px
        40px
        80px;

    border-top:1px solid #ead8bf;
    border-bottom:1px solid #ead8bf;

    background:#faf8f4;
}


/* CABECERA */

.inicio-descubre-cabecera{
    max-width:650px;

    margin:
        0 auto
        42px;

    text-align:center;
}


.inicio-descubre-mini{
    display:block;

    margin-bottom:10px;

    color:#a76819;

    font-size:9px;
    font-weight:700;

    letter-spacing:2.5px;
}


.inicio-descubre-cabecera h2{
    margin:
        0
        0
        12px;

    color:#292521;

    font-family:Georgia,serif;

    font-size:36px;
    font-weight:400;
}


.inicio-descubre-cabecera p{
    max-width:570px;

    margin:0 auto;

    color:#746d66;

    font-size:13px;

    line-height:1.8;
}


/* GRID */

.inicio-descubre-grid{
    display:grid;

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

    gap:18px;

    max-width:1000px;

    margin:0 auto;
}


/* TARJETAS */

.inicio-descubre-card{
    position:relative;

    min-height:275px;

    display:flex;
    flex-direction:column;
    align-items:center;

    box-sizing:border-box;

    padding:
        34px
        27px
        30px;

    border:1px solid #dfc9aa;

    background:#fff;

    color:#302b27;

    text-align:center;

    text-decoration:none;

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


.inicio-descubre-card:hover{
    transform:
        translateY(-5px);

    border-color:#b87927;

    box-shadow:
        0
        15px
        35px
        rgba(74,49,23,.10);
}


/* ICONO */

.inicio-descubre-icono{
    width:58px;
    height:58px;

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

    margin-bottom:19px;

    border-radius:50%;

    background:#f5ede1;

    font-size:24px;

    transition:
        transform .25s ease;
}


.inicio-descubre-card:hover
.inicio-descubre-icono{
    transform:
        translateY(-2px)
        scale(1.06);
}


/* MINI TEXTO */

.inicio-descubre-card > span{
    display:block;

    margin-bottom:8px;

    color:#a7691d;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.5px;
}


/* TÍTULO */

.inicio-descubre-card h3{
    margin:
        0
        0
        12px;

    color:#2e2925;

    font-family:Georgia,serif;

    font-size:25px;
    font-weight:400;
}


/* DESCRIPCIÓN */

.inicio-descubre-card p{
    margin:
        0
        0
        22px;

    color:#786f67;

    font-size:11px;

    line-height:1.75;
}


/* ENLACE */

.inicio-descubre-card strong{
    margin-top:auto;

    color:#a66517;

    font-size:9px;
    font-weight:700;

    letter-spacing:.5px;
}


/* =====================================================
   TARJETA CENTRAL
===================================================== */

.inicio-descubre-azar{
    background:#30261e;

    border-color:#4d3a2a;

    color:#fff;
}


.inicio-descubre-azar
.inicio-descubre-icono{
    background:
        rgba(
            255,
            255,
            255,
            .08
        );
}


.inicio-descubre-azar > span{
    color:#d6a45e;
}


.inicio-descubre-azar h3{
    color:#fff;
}


.inicio-descubre-azar p{
    color:#c9bdb1;
}


.inicio-descubre-azar strong{
    color:#dda95e;
}


.inicio-descubre-azar:hover{
    border-color:#bd812f;

    box-shadow:
        0
        16px
        38px
        rgba(40,25,12,.20);
}


/* =====================================================
   LO MEJOR
===================================================== */

.inicio-descubre-mejor::before{
    content:"✦";

    position:absolute;

    top:13px;
    right:15px;

    color:#c18a3e;

    font-size:13px;
}


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

@media(max-width:800px){

    .inicio-descubre-grid{
        grid-template-columns:1fr;
    }


    .inicio-descubre-card{
        min-height:auto;
    }

}


@media(max-width:600px){

    .inicio-descubre{
        padding:
            60px
            20px;
    }


    .inicio-descubre-cabecera h2{
        font-size:31px;
    }


    .inicio-descubre-card{
        padding:
            30px
            23px;
    }

}

/* =====================================================
   FOOTER EL RINCÓN
===================================================== */

.footer-rincon{
    width:100%;

    background:#17130f;

    color:#c9beb1;

    border-top:3px solid #9d641d;
}


/* =====================================================
   CONTENIDO PRINCIPAL
===================================================== */

.footer-rincon-principal{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    padding:
        65px
        40px
        55px;

    box-sizing:border-box;

    display:grid;

    grid-template-columns:
        1.5fr
        .75fr
        .95fr
        1fr;

    gap:45px;
}


/* =====================================================
   MARCA
===================================================== */

.footer-rincon-marca{
    padding-right:15px;
}


.footer-rincon-mini{
    display:block;

    margin-bottom:9px;

    color:#b87a2c;

    font-size:8px;
    font-weight:700;

    letter-spacing:3px;
}


.footer-rincon-marca h2{
    margin:0;

    color:#f0e8dd;

    font-family:Georgia,serif;

    font-size:38px;
    font-weight:400;
}


.footer-rincon-linea{
    width:42px;
    height:1px;

    margin:
        17px
        0
        18px;

    background:#a86c21;
}


.footer-rincon-marca p{
    max-width:320px;

    margin:0;

    color:#a99e92;

    font-size:12px;

    line-height:1.85;
}


/* BOTÓN PUBLICAR */

.footer-rincon-publicar{
    display:inline-block;

    margin-top:25px;

    padding:
        12px
        17px;

    border:1px solid #9f671f;

    color:#d6a45f;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.3px;

    text-decoration:none;

    transition:
        background .2s ease,
        color .2s ease;
}


.footer-rincon-publicar:hover{
    background:#a56a1e;

    color:#fff;
}


/* =====================================================
   COLUMNAS
===================================================== */

.footer-rincon-columna{
    display:flex;

    flex-direction:column;

    align-items:flex-start;
}


.footer-rincon-columna h3{
    position:relative;

    margin:
        4px
        0
        24px;

    padding-bottom:12px;

    color:#eee4d8;

    font-family:Georgia,serif;

    font-size:17px;
    font-weight:400;
}


.footer-rincon-columna h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:27px;
    height:1px;

    background:#a66a1d;
}


.footer-rincon-columna a{
    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:13px;

    color:#aaa096;

    font-size:11px;

    line-height:1.4;

    text-decoration:none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.footer-rincon-columna a:hover{
    color:#d7a45e;

    transform:translateX(3px);
}


.footer-rincon-columna a span{
    width:18px;

    font-size:12px;

    text-align:center;
}


/* =====================================================
   COMUNIDAD
===================================================== */

.footer-rincon-comunidad{
    width:calc(100% - 80px);
    max-width:1020px;

    margin:0 auto;

    padding:
        22px
        28px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    gap:20px;

    border-top:1px solid #332a23;
    border-bottom:1px solid #332a23;

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


.footer-rincon-comunidad-icono{
    flex:0 0 auto;

    color:#a97028;

    font-size:21px;
}


.footer-rincon-comunidad p{
    margin:0;

    color:#8f867d;

    font-size:10px;

    line-height:1.7;
}


.footer-rincon-comunidad strong{
    color:#b9aea2;

    font-weight:600;
}


/* =====================================================
   PARTE INFERIOR
===================================================== */

.footer-rincon-inferior{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    padding:
        25px
        40px
        28px;

    box-sizing:border-box;

    display:flex;

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

    gap:25px;
}


.footer-rincon-inferior p{
    margin:0;

    color:#786f67;

    font-size:9px;
}


.footer-rincon-inferior p strong{
    color:#a99c8e;

    font-weight:500;
}


/* LEGAL */

.footer-rincon-legal{
    display:flex;

    align-items:center;

    gap:10px;
}


.footer-rincon-legal a{
    color:#81776e;

    font-size:9px;

    text-decoration:none;

    transition:color .2s ease;
}


.footer-rincon-legal a:hover{
    color:#c8944c;
}


.footer-rincon-legal span{
    color:#4d443d;

    font-size:7px;
}


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

@media(max-width:900px){

    .footer-rincon-principal{

        grid-template-columns:
            1.3fr
            1fr;

        gap:
            45px
            55px;

    }

}


/* =====================================================
   RESPONSIVE MÓVIL
===================================================== */

@media(max-width:600px){

    .footer-rincon-principal{

        padding:
            50px
            24px
            40px;

        grid-template-columns:1fr;

        gap:38px;

    }


    .footer-rincon-marca{
        padding-right:0;

        text-align:center;
    }


    .footer-rincon-marca h2{
        font-size:36px;
    }


    .footer-rincon-linea{
        margin:
            17px
            auto
            18px;
    }


    .footer-rincon-marca p{
        margin:0 auto;
    }


    .footer-rincon-columna{
        align-items:center;

        text-align:center;
    }


    .footer-rincon-columna h3{
        margin-bottom:20px;
    }


    .footer-rincon-columna h3::after{

        left:50%;

        transform:
            translateX(-50%);

    }


    .footer-rincon-columna a:hover{
        transform:none;
    }


    .footer-rincon-comunidad{

        width:calc(100% - 48px);

        padding:
            22px
            20px;

        flex-direction:column;

        text-align:center;

    }


    .footer-rincon-inferior{

        padding:
            25px
            24px
            30px;

        flex-direction:column;

        text-align:center;

    }


    .footer-rincon-legal{

        justify-content:center;

        flex-wrap:wrap;

    }

}

/* =====================================================
   FOOTER MÓVIL MÁS COMPACTO
===================================================== */

@media(max-width:600px){

    .footer-rincon-principal{
        padding:
            42px
            22px
            35px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            28px
            18px;
    }


    /* EL RINCÓN OCUPA TODO EL ANCHO */

    .footer-rincon-marca{
        grid-column:1 / -1;

        padding-bottom:8px;

        text-align:center;
    }


    .footer-rincon-marca p{
        max-width:340px;

        margin:0 auto;
    }


    /* COLUMNAS MÁS COMPACTAS */

    .footer-rincon-columna{
        align-items:center;

        text-align:center;
    }


    .footer-rincon-columna h3{
        margin:
            0
            0
            18px;

        font-size:16px;
    }


    .footer-rincon-columna a{
        justify-content:center;

        margin-bottom:11px;

        font-size:10px;
    }


    /* INFORMACIÓN OCUPA TODO EL ANCHO */

    .footer-rincon-columna:last-child{
        grid-column:1 / -1;

        display:grid;

        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            10px
            15px;
    }


    .footer-rincon-columna:last-child h3{
        grid-column:1 / -1;

        justify-self:center;
    }


    .footer-rincon-columna:last-child a{
        margin:0;

        padding:8px 5px;
    }


    /* MENSAJE DE COMUNIDAD MÁS PEQUEÑO */

    .footer-rincon-comunidad{
        width:calc(100% - 44px);

        padding:
            20px
            18px;

        gap:12px;
    }


    .footer-rincon-comunidad p{
        font-size:9px;

        line-height:1.65;
    }


    /* PIE FINAL */

    .footer-rincon-inferior{
        padding:
            22px
            20px
            27px;

        gap:16px;
    }

}

@media(max-width:600px){

    .footer-rincon-principal{
        padding-bottom:25px;
    }

    .footer-rincon-columna:last-child{
        row-gap:6px;
    }

    .footer-rincon-comunidad{
        margin-top:0;
    }

}


/* =====================================================
   CONTACTO
===================================================== */

.contacto-marco{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    background:#fff;
}


/* HERO */

.contacto-hero{
    padding:
        75px
        40px
        65px;

    border-bottom:1px solid #e5d3ba;

    background:#faf8f4;

    text-align:center;
}


.contacto-mini{
    display:block;

    margin-bottom:12px;

    color:#a66a1d;

    font-size:9px;
    font-weight:700;

    letter-spacing:3px;
}


.contacto-hero h1{
    margin:0;

    color:#292521;

    font-family:Georgia,serif;

    font-size:
        clamp(
            42px,
            6vw,
            58px
        );

    font-weight:400;
}


.contacto-linea{
    width:45px;
    height:1px;

    margin:22px auto;

    background:#ae7020;
}


.contacto-hero p{
    max-width:590px;

    margin:0 auto;

    color:#746c64;

    font-size:13px;

    line-height:1.85;
}


/* =====================================================
   CONTENIDO
===================================================== */

.contacto-contenido{
    display:grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:60px;

    padding:
        70px
        55px
        85px;
}


/* =====================================================
   INFORMACIÓN
===================================================== */

.contacto-info{
    padding-top:8px;
}


.contacto-info-mini,
.contacto-form-mini{
    display:block;

    margin-bottom:10px;

    color:#a66a1d;

    font-size:8px;
    font-weight:700;

    letter-spacing:2px;
}


.contacto-info > h2,
.contacto-formulario > h2{
    margin:
        0
        0
        17px;

    color:#2d2824;

    font-family:Georgia,serif;

    font-size:31px;
    font-weight:400;

    line-height:1.2;
}


.contacto-info > p{
    margin:
        0
        0
        30px;

    color:#756d65;

    font-size:12px;

    line-height:1.8;
}


/* OPCIONES */

.contacto-opciones{
    border-top:1px solid #eadfD1;
}


.contacto-opcion{
    display:flex;

    gap:15px;

    padding:
        19px
        0;

    border-bottom:1px solid #eadfd1;
}


.contacto-opcion > span{
    width:35px;
    height:35px;

    flex:0 0 35px;

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

    border-radius:50%;

    background:#f5ede2;

    color:#a66a1d;

    font-family:Georgia,serif;

    font-size:14px;
}


.contacto-opcion strong{
    color:#39322c;

    font-family:Georgia,serif;

    font-size:14px;
    font-weight:400;
}


.contacto-opcion p{
    margin:
        5px
        0
        0;

    color:#827970;

    font-size:10px;

    line-height:1.6;
}


/* NOTA */

.contacto-nota{
    display:flex;

    gap:14px;

    margin-top:28px;

    padding:
        18px
        19px;

    border:1px solid #e1cba9;

    background:#fff9ef;
}


.contacto-nota > span{
    font-size:19px;
}


.contacto-nota p{
    margin:0;

    color:#776b60;

    font-size:10px;

    line-height:1.7;
}


.contacto-nota strong{
    display:block;

    margin-bottom:3px;

    color:#9b621c;
}


/* =====================================================
   FORMULARIO
===================================================== */

.contacto-formulario{
    padding:
        38px
        40px
        42px;

    border:1px solid #dfc9aa;

    background:#fff;
}


.contacto-form{
    margin-top:28px;
}


.contacto-dos-columnas{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:15px;
}


.contacto-campo{
    margin-bottom:18px;
}


.contacto-campo label{
    display:block;

    margin-bottom:8px;

    color:#554b43;

    font-size:10px;
    font-weight:600;
}


.contacto-campo label span{
    color:#a66a1d;
}


.contacto-campo input,
.contacto-campo select,
.contacto-campo textarea{
    width:100%;

    box-sizing:border-box;

    border:1px solid #d9cbbb;

    border-radius:0;

    outline:none;

    background:#fff;

    color:#3c3530;

    font-family:inherit;

    font-size:12px;

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


.contacto-campo input,
.contacto-campo select{
    height:45px;

    padding:
        0
        13px;
}


.contacto-campo textarea{
    min-height:155px;

    padding:13px;

    resize:vertical;

    line-height:1.6;
}


.contacto-campo input:focus,
.contacto-campo select:focus,
.contacto-campo textarea:focus{
    border-color:#aa6c1c;

    box-shadow:
        0 0 0 2px
        rgba(170,108,28,.08);
}


/* PRIVACIDAD */

.contacto-privacidad{
    margin:
        5px
        0
        22px;

    color:#8b8177;

    font-size:9px;

    line-height:1.7;
}


.contacto-privacidad a{
    color:#9e631a;
}


/* BOTÓN */

.contacto-enviar{
    width:100%;

    padding:
        14px
        20px;

    border:1px solid #a66a1d;

    background:#a66a1d;

    color:#fff;

    font-family:inherit;

    font-size:9px;
    font-weight:700;

    letter-spacing:1.5px;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.contacto-enviar:hover{
    background:#8e5816;
}


/* =====================================================
   ALERTAS
===================================================== */

.contacto-alerta{
    display:flex;

    align-items:center;

    gap:12px;

    margin:
        20px
        0;

    padding:
        13px
        15px;

    font-size:10px;

    line-height:1.6;
}


.contacto-alerta p{
    margin:0;
}


.contacto-alerta > span{
    width:25px;
    height:25px;

    flex:0 0 25px;

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

    border-radius:50%;

    font-weight:700;
}


.contacto-exito{
    border:1px solid #b9ddc4;

    background:#edf8f0;

    color:#356845;
}


.contacto-exito > span{
    background:#4a9362;

    color:#fff;
}


.contacto-error{
    border:1px solid #e4b9b3;

    background:#fff1ef;

    color:#8c4038;
}


.contacto-error > span{
    background:#b75a50;

    color:#fff;
}


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

@media(max-width:800px){

    .contacto-contenido{
        grid-template-columns:1fr;

        gap:50px;
    }

}


@media(max-width:600px){

    .contacto-hero{
        padding:
            60px
            24px
            55px;
    }


    .contacto-contenido{
        padding:
            55px
            22px
            65px;
    }


    .contacto-formulario{
        padding:
            30px
            22px
            34px;
    }


    .contacto-dos-columnas{
        grid-template-columns:1fr;

        gap:0;
    }


    .contacto-info > h2,
    .contacto-formulario > h2{
        font-size:28px;
    }

}

/* =====================================================
   ADMIN - MENSAJES
===================================================== */

.mensajes-nuevos-resumen{
    display:flex;
    align-items:center;

    gap:10px;

    padding:
        12px
        18px;

    border:1px solid #dfc9aa;

    background:#fff8ed;
}


.mensajes-nuevos-resumen strong{
    color:#a66a1d;

    font-family:Georgia,serif;

    font-size:25px;
}


.mensajes-nuevos-resumen span{
    color:#75695e;

    font-size:10px;
}


/* FILTROS */

.mensajes-filtros{
    display:flex;

    margin-bottom:25px;

    border-bottom:1px solid #ddd3c8;
}


.mensajes-filtros a{
    display:flex;

    align-items:center;

    gap:9px;

    padding:
        14px
        20px;

    border:
        1px solid
        transparent;

    border-bottom:0;

    color:#756d65;

    font-size:10px;

    text-decoration:none;
}


.mensajes-filtros a span{
    min-width:20px;

    padding:
        3px
        6px;

    border-radius:20px;

    background:#eee9e3;

    color:#756d65;

    font-size:8px;

    text-align:center;
}


.mensajes-filtros a.activo{
    border-color:#ded3c6;

    background:#fff;

    color:#9d621a;

    font-weight:700;
}


/* PANEL */

.mensajes-panel{
    overflow:hidden;

    border:1px solid #ddd3c8;

    background:#fff;
}


/* FILA */

.mensaje-fila{
    position:relative;

    display:grid;

    grid-template-columns:
        6px
        180px
        minmax(0,1fr)
        80px;

    align-items:center;

    min-height:85px;

    border-bottom:1px solid #eee7df;

    color:inherit;

    text-decoration:none;

    transition:
        background .2s ease;
}


.mensaje-fila:last-child{
    border-bottom:0;
}


.mensaje-fila:hover{
    background:#faf7f2;
}


/* INDICADOR */

.mensaje-indicador{
    width:6px;

    align-self:stretch;

    background:transparent;
}


.mensaje-nuevo
.mensaje-indicador{
    background:#b87820;
}


/* REMITENTE */

.mensaje-remitente{
    padding:
        18px
        20px;
}


.mensaje-remitente strong{
    display:block;

    margin-bottom:5px;

    color:#332d28;

    font-size:11px;
}


.mensaje-remitente span{
    display:block;

    overflow:hidden;

    color:#91877e;

    font-size:9px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* CONTENIDO */

.mensaje-contenido{
    padding:
        18px
        20px;

    border-left:1px solid #eee7df;
}


.mensaje-asunto{
    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:7px;
}


.mensaje-asunto strong{
    color:#3a332e;

    font-size:11px;
}


.mensaje-contenido p{
    margin:0;

    color:#8a8178;

    font-size:9px;

    line-height:1.6;
}


/* NUEVO */

.mensaje-badge-nuevo{
    padding:
        3px
        6px;

    background:#b87820;

    color:#fff;

    font-size:7px;
    font-weight:700;

    letter-spacing:1px;
}


/* FECHA */

.mensaje-fecha{
    padding:
        15px;

    text-align:center;
}


.mensaje-fecha span{
    display:block;

    color:#6e655d;

    font-size:9px;
}


.mensaje-fecha small{
    display:block;

    margin-top:5px;

    color:#aaa098;

    font-size:8px;
}


/* LEÍDOS */

.mensaje-leido{
    opacity:.78;
}


/* RESPONDIDOS */

.mensaje-respondido
.mensaje-indicador{
    background:#55916a;
}


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

@media(max-width:700px){

    .mensajes-filtros{
        overflow-x:auto;

        white-space:nowrap;
    }


    .mensajes-filtros a{
        flex:0 0 auto;

        padding:
            12px
            15px;
    }


    .mensaje-fila{
        grid-template-columns:
            5px
            minmax(0,1fr)
            65px;
    }


    .mensaje-remitente{
        grid-column:2;

        padding:
            15px
            15px
            4px;
    }


    .mensaje-contenido{
        grid-column:2;

        padding:
            4px
            15px
            15px;

        border-left:0;
    }


    .mensaje-fecha{
        grid-column:3;

        grid-row:
            1 / span 2;
    }


    .mensaje-indicador{
        grid-column:1;

        grid-row:
            1 / span 2;
    }

}

/* =====================================================
   ADMIN - VER MENSAJE
===================================================== */

.ver-mensaje-cabecera{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:30px;
}


.ver-mensaje-cabecera h1{
    max-width:750px;

    margin:
        7px
        0
        8px;

    color:#292521;

    font-family:Georgia,serif;

    font-size:34px;
    font-weight:400;

    line-height:1.25;
}


.ver-mensaje-cabecera p{
    margin:0;

    color:#8b8279;

    font-size:10px;
}


/* ESTADO */

.ver-mensaje-estado{
    flex:0 0 auto;

    padding:
        9px
        13px;

    border:1px solid #d8c9b8;

    background:#fff;

    color:#81766c;

    font-size:8px;

    letter-spacing:1px;

    text-transform:uppercase;
}


.ver-mensaje-estado.estado-respondido{
    border-color:#b9d6c2;

    background:#eef7f0;

    color:#477557;
}


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

.ver-mensaje-grid{
    display:grid;

    grid-template-columns:
        280px
        minmax(0,1fr);

    border:1px solid #ddd2c5;

    background:#fff;
}


/* =====================================================
   REMITENTE
===================================================== */

.ver-mensaje-remitente{
    padding:
        35px
        30px;

    border-right:1px solid #e8dfd5;

    background:#faf8f5;
}


.ver-mensaje-mini{
    display:block;

    margin-bottom:20px;

    color:#a66a1d;

    font-size:8px;
    font-weight:700;

    letter-spacing:2px;
}


.ver-mensaje-avatar{
    width:54px;
    height:54px;

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

    margin-bottom:17px;

    border-radius:50%;

    background:#30261e;

    color:#d8a457;

    font-family:Georgia,serif;

    font-size:22px;
}


.ver-mensaje-remitente h2{
    margin:
        0
        0
        6px;

    color:#302a25;

    font-family:Georgia,serif;

    font-size:22px;
    font-weight:400;
}


.ver-mensaje-remitente > a{
    display:block;

    overflow:hidden;

    color:#a36921;

    font-size:10px;

    text-decoration:none;

    text-overflow:ellipsis;
}


/* DATOS */

.ver-mensaje-datos{
    margin-top:30px;

    border-top:1px solid #e4d9cc;
}


.ver-mensaje-datos div{
    padding:
        15px
        0;

    border-bottom:1px solid #e4d9cc;
}


.ver-mensaje-datos span{
    display:block;

    margin-bottom:5px;

    color:#a39a91;

    font-size:7px;
    font-weight:700;

    letter-spacing:1.3px;
}


.ver-mensaje-datos strong{
    display:block;

    color:#5c534b;

    font-size:9px;
    font-weight:500;

    line-height:1.5;
}


/* =====================================================
   MENSAJE
===================================================== */

.ver-mensaje-contenido{
    padding:
        38px
        42px;
}


.ver-mensaje-contenido h2{
    margin:
        0
        0
        25px;

    padding-bottom:20px;

    border-bottom:1px solid #eee5dc;

    color:#302a25;

    font-family:Georgia,serif;

    font-size:26px;
    font-weight:400;
}


.ver-mensaje-texto{
    min-height:180px;

    color:#514942;

    font-size:12px;

    line-height:1.9;
}


/* =====================================================
   ACCIONES
===================================================== */

.ver-mensaje-acciones{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid #eee5dc;
}


.ver-mensaje-acciones form{
    margin:0;
}


.ver-mensaje-btn{
    display:inline-flex;

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

    min-height:38px;

    box-sizing:border-box;

    padding:
        0
        15px;

    border:1px solid #cbb69b;

    background:#fff;

    color:#786653;

    font-family:inherit;

    font-size:8px;
    font-weight:700;

    letter-spacing:.7px;

    text-decoration:none;

    cursor:pointer;
}


.ver-mensaje-btn:hover{
    border-color:#a66a1d;

    color:#9b6018;
}


.ver-mensaje-btn.principal{
    border-color:#a66a1d;

    background:#a66a1d;

    color:#fff;
}


.ver-mensaje-btn.principal:hover{
    background:#8d5717;
}


/* =====================================================
   INFERIOR
===================================================== */

.ver-mensaje-inferior{
    display:flex;

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

    gap:20px;

    margin-top:20px;
}


.ver-mensaje-volver{
    color:#846f59;

    font-size:9px;

    text-decoration:none;
}


.ver-mensaje-eliminar{
    padding:0;

    border:0;

    background:none;

    color:#a65d55;

    font-family:inherit;

    font-size:9px;

    text-decoration:underline;

    cursor:pointer;
}


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

@media(max-width:700px){

    .ver-mensaje-cabecera{
        align-items:flex-start;

        flex-direction:column;
    }


    .ver-mensaje-cabecera h1{
        font-size:28px;
    }


    .ver-mensaje-grid{
        grid-template-columns:1fr;
    }


    .ver-mensaje-remitente{
        border-right:0;

        border-bottom:1px solid #e8dfd5;
    }


    .ver-mensaje-contenido{
        padding:
            30px
            24px;
    }


    .ver-mensaje-texto{
        min-height:auto;
    }


    .ver-mensaje-acciones{
        align-items:stretch;

        flex-direction:column;
    }


    .ver-mensaje-acciones form{
        width:100%;
    }


    .ver-mensaje-btn{
        width:100%;
    }


    .ver-mensaje-inferior{
        align-items:flex-start;

        flex-direction:column;
    }

}

/* =====================================================
   PÁGINAS LEGALES - EL RINCÓN
===================================================== */

.legal-marco{
    width:100%;
    max-width:1100px;

    margin:0 auto;

    background:#fff;
}


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

.legal-hero{
    padding:
        75px
        45px
        65px;

    border-bottom:1px solid #e5d4bc;

    background:#faf8f4;

    text-align:center;
}


.legal-mini{
    display:block;

    margin-bottom:12px;

    color:#a66a1d;

    font-size:9px;
    font-weight:700;

    letter-spacing:3px;
}


.legal-hero h1{
    margin:0;

    color:#292521;

    font-family:Georgia,serif;

    font-size:
        clamp(
            38px,
            6vw,
            55px
        );

    font-weight:400;

    line-height:1.15;
}


.legal-linea{
    width:45px;
    height:1px;

    margin:23px auto;

    background:#a96b1c;
}


.legal-hero p{
    max-width:650px;

    margin:0 auto;

    color:#746c64;

    font-size:13px;

    line-height:1.9;
}


.legal-actualizacion{
    display:block;

    margin-top:24px;

    color:#a0968c;

    font-size:9px;

    font-style:italic;
}


/* =====================================================
   ESTRUCTURA
===================================================== */

.legal-contenido{
    display:grid;

    grid-template-columns:
        235px
        minmax(0,1fr);

    gap:55px;

    padding:
        65px
        55px
        90px;
}


/* =====================================================
   ÍNDICE
===================================================== */

.legal-indice{
    position:relative;
}


.legal-indice-interior{
    position:sticky;

    top:25px;

    display:flex;

    flex-direction:column;

    padding:
        25px
        22px;

    border:1px solid #e1d2c0;

    background:#faf8f5;
}


.legal-indice-interior > span{
    margin-bottom:18px;

    padding-bottom:13px;

    border-bottom:1px solid #ded1c2;

    color:#a66a1d;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.7px;
}


.legal-indice a{
    padding:
        8px
        0;

    color:#756c63;

    font-size:9px;

    line-height:1.4;

    text-decoration:none;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.legal-indice a:hover{
    padding-left:4px;

    color:#a66a1d;
}


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

.legal-texto{
    min-width:0;
}


.legal-seccion{
    scroll-margin-top:30px;

    margin-bottom:60px;

    padding-bottom:55px;

    border-bottom:1px solid #eadfd3;
}


.legal-numero{
    display:block;

    margin-bottom:7px;

    color:#b1782d;

    font-family:Georgia,serif;

    font-size:11px;

    font-style:italic;
}


.legal-seccion h2{
    margin:
        0
        0
        22px;

    color:#302a25;

    font-family:Georgia,serif;

    font-size:30px;
    font-weight:400;

    line-height:1.25;
}


.legal-seccion h3{
    margin:
        27px
        0
        10px;

    color:#4c433b;

    font-family:Georgia,serif;

    font-size:18px;
    font-weight:400;
}


.legal-seccion p{
    margin:
        0
        0
        17px;

    color:#6e665f;

    font-size:12px;

    line-height:1.9;
}


.legal-seccion ul{
    margin:
        22px
        0
        0;

    padding:0;

    list-style:none;
}


.legal-seccion li{
    position:relative;

    margin-bottom:12px;

    padding-left:23px;

    color:#6e665f;

    font-size:12px;

    line-height:1.75;
}


.legal-seccion li::before{
    content:"✦";

    position:absolute;

    left:0;
    top:1px;

    color:#b47627;

    font-size:8px;
}


/* =====================================================
   AVISO
===================================================== */

.legal-aviso{
    display:flex;

    gap:16px;

    margin:
        27px
        0;

    padding:
        20px
        22px;

    border-left:3px solid #a96b1c;

    background:#fff8ed;
}


.legal-aviso > span{
    width:28px;
    height:28px;

    flex:0 0 28px;

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

    border-radius:50%;

    background:#a96b1c;

    color:#fff;

    font-size:11px;
    font-weight:700;
}


.legal-aviso p{
    margin:0;

    font-size:11px;
}


.legal-aviso strong{
    display:block;

    margin-bottom:3px;

    color:#8e5919;
}


/* =====================================================
   ENLACES
===================================================== */

.legal-enlace{
    display:inline-block;

    margin-top:5px;

    color:#9d621a;

    font-size:10px;
    font-weight:700;

    text-decoration:none;
}


.legal-enlace:hover{
    text-decoration:underline;
}


/* =====================================================
   DESTACADO
===================================================== */

.legal-destacado{
    margin-top:30px;

    padding:
        27px
        30px;

    border:1px solid #ddc7a7;

    background:#faf6ef;
}


.legal-destacado > span{
    display:block;

    margin-bottom:8px;

    color:#a66a1d;

    font-size:8px;
    font-weight:700;

    letter-spacing:2px;
}


.legal-destacado h3{
    margin:
        0
        0
        9px;

    color:#352e28;

    font-size:21px;
}


.legal-destacado p{
    margin:
        0
        0
        16px;
}


.legal-destacado a{
    color:#9c6119;

    font-size:9px;
    font-weight:700;

    text-decoration:none;
}


/* =====================================================
   ÚLTIMA SECCIÓN
===================================================== */

.legal-seccion-final{
    margin-bottom:0;

    padding-bottom:0;

    border-bottom:0;
}


.legal-boton{
    display:inline-block;

    margin-top:12px;

    padding:
        13px
        18px;

    border:1px solid #a66a1d;

    background:#a66a1d;

    color:#fff;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    text-decoration:none;
}


.legal-boton:hover{
    background:#8d5717;
}


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

@media(max-width:850px){

    .legal-contenido{
        grid-template-columns:1fr;

        gap:35px;
    }


    .legal-indice-interior{
        position:static;

        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        column-gap:20px;
    }


    .legal-indice-interior > span{
        grid-column:1 / -1;
    }

}


@media(max-width:600px){

    .legal-hero{
        padding:
            60px
            23px
            52px;
    }


    .legal-contenido{
        padding:
            45px
            22px
            65px;
    }


    .legal-indice-interior{
        grid-template-columns:1fr;

        padding:
            22px
            20px;
    }


    .legal-indice-interior > span{
        grid-column:auto;
    }


    .legal-indice a{
        padding:
            7px
            0;
    }


    .legal-seccion{
        margin-bottom:48px;

        padding-bottom:43px;
    }


    .legal-seccion h2{
        font-size:27px;
    }


    .legal-aviso{
        padding:
            18px
            17px;
    }


    .legal-destacado{
        padding:
            23px
            21px;
    }

}

/* =====================================================
   CONSENTIMIENTO DE COOKIES
===================================================== */

.cookie-banner{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:99990;

    padding:
        18px
        22px;

    opacity:0;

    transform:
        translateY(100%);

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

    pointer-events:none;
}


.cookie-banner.visible{
    opacity:1;

    transform:
        translateY(0);

    pointer-events:auto;
}


.cookie-banner[hidden]{
    display:none;
}


.cookie-banner-interior{
    width:100%;
    max-width:1050px;

    box-sizing:border-box;

    display:grid;

    grid-template-columns:
        52px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:20px;

    margin:0 auto;

    padding:
        22px
        24px;

    border:1px solid #d4b98f;

    box-shadow:
        0 15px 50px
        rgba(37,27,18,.18);

    background:#fffdf9;
}


/* ICONO */

.cookie-icono{
    width:48px;
    height:48px;

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

    border-radius:50%;

    background:#f4eadb;

    font-size:22px;
}


/* TEXTO */

.cookie-mini{
    display:block;

    margin-bottom:6px;

    color:#a66a1d;

    font-size:7px;
    font-weight:700;

    letter-spacing:2px;
}


.cookie-banner-texto h2{
    margin:
        0
        0
        7px;

    color:#302923;

    font-family:Georgia,serif;

    font-size:20px;
    font-weight:400;
}


.cookie-banner-texto p{
    max-width:600px;

    margin:
        0
        0
        7px;

    color:#756c64;

    font-size:9px;

    line-height:1.65;
}


.cookie-banner-texto a{
    color:#9d621a;

    font-size:8px;

    text-decoration:none;
}


.cookie-banner-texto a:hover{
    text-decoration:underline;
}


/* BOTONES */

.cookie-banner-botones{
    display:flex;

    align-items:center;

    gap:8px;
}


.cookie-btn{
    min-height:38px;

    padding:
        0
        14px;

    border:1px solid #cbb89f;

    background:#fff;

    color:#6f6153;

    font-family:inherit;

    font-size:7px;
    font-weight:700;

    letter-spacing:.7px;

    white-space:nowrap;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.cookie-btn:hover{
    border-color:#a66a1d;

    color:#925a17;
}


.cookie-btn-principal{
    border-color:#a66a1d;

    background:#a66a1d;

    color:#fff;
}


.cookie-btn-principal:hover{
    background:#8d5717;

    color:#fff;
}


.cookie-btn-configurar{
    background:#faf7f2;
}


/* =====================================================
   MODAL
===================================================== */

.cookie-modal{
    position:fixed;

    inset:0;

    z-index:99999;

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

    padding:20px;

    visibility:hidden;

    opacity:0;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.cookie-modal.visible{
    visibility:visible;

    opacity:1;
}


.cookie-modal-fondo{
    position:absolute;

    inset:0;

    background:
        rgba(28,23,19,.62);

    backdrop-filter:
        blur(2px);
}


.cookie-modal-caja{
    position:relative;

    z-index:1;

    width:100%;
    max-width:620px;
    max-height:90vh;

    box-sizing:border-box;

    overflow-y:auto;

    border:1px solid #d7c3a6;

    background:#fffdf9;

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.25);
}


/* CABECERA */

.cookie-modal-cabecera{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding:
        27px
        30px
        20px;

    border-bottom:1px solid #e9ded0;
}


.cookie-modal-cabecera h2{
    margin:0;

    color:#302923;

    font-family:Georgia,serif;

    font-size:27px;
    font-weight:400;
}


.cookie-modal-cerrar{
    width:34px;
    height:34px;

    flex:0 0 34px;

    border:1px solid #ddd0c0;

    background:#fff;

    color:#786d62;

    font-family:Georgia,serif;

    font-size:22px;

    cursor:pointer;
}


.cookie-modal-intro{
    padding:
        20px
        30px;

    border-bottom:1px solid #eee5db;
}


.cookie-modal-intro p{
    margin:0;

    color:#756c64;

    font-size:10px;

    line-height:1.75;
}


/* =====================================================
   CATEGORÍAS
===================================================== */

.cookie-categoria{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:25px;

    padding:
        22px
        30px;

    border-bottom:1px solid #eee5db;
}


.cookie-categoria-titulo{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:9px;
}


.cookie-categoria-icono{
    width:31px;
    height:31px;

    flex:0 0 31px;

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

    border-radius:50%;

    background:#f4eadb;

    color:#a66a1d;

    font-family:Georgia,serif;

    font-size:12px;
}


.cookie-categoria h3{
    margin:0;

    color:#3a322c;

    font-family:Georgia,serif;

    font-size:16px;
    font-weight:400;
}


.cookie-categoria small{
    display:block;

    margin-top:2px;

    color:#a29990;

    font-size:7px;

    text-transform:uppercase;

    letter-spacing:.8px;
}


.cookie-categoria p{
    max-width:450px;

    margin:0;

    color:#81776e;

    font-size:9px;

    line-height:1.65;
}


/* =====================================================
   SWITCH
===================================================== */

.cookie-switch{
    position:relative;

    width:44px;
    height:24px;

    flex:0 0 44px;

    display:block;

    cursor:pointer;
}


.cookie-switch input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
}


.cookie-switch > span{
    position:absolute;

    inset:0;

    border-radius:30px;

    background:#d4cec7;

    transition:
        background .2s ease;
}


.cookie-switch > span::after{
    content:"";

    position:absolute;

    top:3px;
    left:3px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 1px 4px
        rgba(0,0,0,.2);

    transition:
        transform .2s ease;
}


.cookie-switch input:checked + span{
    background:#a66a1d;
}


.cookie-switch input:checked + span::after{
    transform:
        translateX(20px);
}


.cookie-switch-fijo{
    cursor:default;
}


.cookie-switch-fijo > span{
    background:#a66a1d;
}


.cookie-switch-fijo > span::after{
    transform:
        translateX(20px);
}


/* =====================================================
   MODAL INFERIOR
===================================================== */

.cookie-modal-enlace{
    padding:
        16px
        30px
        0;
}


.cookie-modal-enlace a{
    color:#9c6119;

    font-size:8px;

    text-decoration:none;
}


.cookie-modal-acciones{
    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:
        22px
        30px
        28px;
}


.cookie-modal-abierto{
    overflow:hidden;
}


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

@media(max-width:850px){

    .cookie-banner-interior{
        grid-template-columns:
            45px
            minmax(0,1fr);
    }


    .cookie-banner-botones{
        grid-column:
            1 / -1;

        justify-content:flex-end;
    }

}


@media(max-width:600px){

    .cookie-banner{
        padding:
            10px;
    }


    .cookie-banner-interior{
        grid-template-columns:1fr;

        gap:13px;

        padding:
            20px
            18px;
    }


    .cookie-icono{
        width:40px;
        height:40px;

        font-size:18px;
    }


    .cookie-banner-texto h2{
        font-size:19px;
    }


    .cookie-banner-botones{
        grid-column:auto;

        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        width:100%;
    }


    .cookie-banner-botones
    .cookie-btn-principal{
        grid-column:
            1 / -1;
    }


    .cookie-btn{
        width:100%;

        padding:
            0
            8px;

        font-size:6.5px;
    }


    .cookie-modal{
        align-items:flex-end;

        padding:0;
    }


    .cookie-modal-caja{
        max-height:92vh;

        border-left:0;
        border-right:0;
        border-bottom:0;
    }


    .cookie-modal-cabecera{
        padding:
            23px
            20px
            18px;
    }


    .cookie-modal-cabecera h2{
        font-size:23px;
    }


    .cookie-modal-intro{
        padding:
            18px
            20px;
    }


    .cookie-categoria{
        gap:15px;

        padding:
            20px;
    }


    .cookie-modal-enlace{
        padding:
            16px
            20px
            0;
    }


    .cookie-modal-acciones{
        flex-direction:column-reverse;

        padding:
            20px;
    }

}

/* =========================================
   TITULO DE LAS HISTORIAS EN LAS TARJETAS
========================================= */

.portada-card-titulo{
    margin: 10px 0 8px;
    line-height: 1.35;
}

.portada-card-titulo a{
    color: #2b2118;
    text-decoration: none;
    font-size: 21px;
    font-weight: 700;
    transition: color .2s ease;
}

.portada-card-titulo a:hover{
    color: #a35b00;
}

@media (max-width: 768px){

    .portada-card-titulo a{
        font-size: 19px;
    }

}