/* =========================================================
   FRAMEUP
   SISTEMA VISUAL COMPLETO
   VERSIÓN REFORZADA
========================================================= */


/* =========================================================
   TIPOGRAFÍA
========================================================= */

/* Lato se carga con <link> en cada página (más rápido que @import) */


/* =========================================================
   VARIABLES OFICIALES FRAMEUP
========================================================= */

:root {

    /* IDENTIDAD */

    --frameup-orange: #ED6B27;
    --frameup-orange-hover: #D95C1D;

    --frameup-black: #1D1E1D;
    --frameup-dark: #1D1E1D;

    --frameup-white: #FFFFFF;

    --frameup-background: #EFEDEA;
    --frameup-surface: #FFFFFF;

    --frameup-gray: #6F6F6F;
    --frameup-gray-soft: #9A9895;

    --frameup-light-gray: #F7F6F4;

    --frameup-border: #DDDAD6;


    /* ESTADOS */

    --frameup-green: #3F9C67;
    --frameup-green-bg: #E9F5ED;

    --frameup-red: #B95656;
    --frameup-red-bg: #F7E9E9;

    --frameup-yellow: #B47A20;


    /* DISEÑO */

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 22px;
    --radius-xl: 28px;

    --shadow-small:
        0 5px 18px
        rgba(29, 30, 29, 0.05);

    --shadow-medium:
        0 15px 40px
        rgba(29, 30, 29, 0.08);

    --shadow-large:
        0 25px 60px
        rgba(29, 30, 29, 0.12);

}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    background:
        var(--frameup-background);

    color:
        var(--frameup-black);

    line-height: 1.5;

    -webkit-font-smoothing:
        antialiased;
}


button,
input,
select,
textarea {
    font-family:
        "Lato",
        Arial,
        sans-serif;
}


button {
    border: none;
    cursor: pointer;
}


a {
    color: inherit;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}


img {
    max-width: 100%;
}


::selection {
    background:
        var(--frameup-orange);

    color:
        white;
}


/* =========================================================
   TIPOGRAFÍA
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--frameup-black);

    font-weight: 900;

    line-height: 1.08;
}


strong {
    font-weight: 900;
}


p {
    color:
        var(--frameup-gray);
}


.etiqueta {
    display: block;

    margin-bottom: 9px;

    color:
        var(--frameup-orange);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


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

.header {
    width: 100%;

    min-height: 76px;

    padding:
        10px 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

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

    border-bottom:
        1px solid
        var(--frameup-border);

    position: relative;

    z-index: 100;
}


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

.logo {
    flex-shrink: 0;

    display: flex;

    align-items: center;

    color:
        var(--frameup-black);

    font-size: 25px;

    font-weight: 900;
}


.logo img {
    width: 210px;

    height: 54px;

    display: block;

    object-fit: contain;

    object-position: left center;
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.nav {
    display: flex;

    align-items: center;

    gap: 30px;
}


.nav a {
    position: relative;

    padding:
        8px 0;

    color:
        var(--frameup-black);

    font-size: 14px;

    font-weight: 600;
}


.nav a:hover {
    color:
        var(--frameup-orange);
}


.nav a.activo {
    font-weight: 900;
}


.nav a.activo::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -9px;

    height: 3px;

    border-radius:
        20px;

    background:
        var(--frameup-orange);
}


.acciones {
    display: flex;

    align-items: center;

    gap: 10px;
}


.acciones span {
    color:
        var(--frameup-gray);

    font-size: 13px;
}


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

.btn-principal,
.btn-grande,
.btn-formulario,
.btn-crear-proyecto,
.btn-contactar,
.btn-publicar-perfil,
.btn-ver-perfil {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 21px;

    border-radius:
        var(--radius-small);

    border:
        1px solid
        var(--frameup-orange);

    background:
        var(--frameup-orange);

    color:
        white;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;
}


.btn-principal:hover,
.btn-grande:hover,
.btn-formulario:hover,
.btn-crear-proyecto:hover,
.btn-contactar:hover,
.btn-publicar-perfil:hover,
.btn-ver-perfil:hover {
    background:
        var(--frameup-orange-hover);

    border-color:
        var(--frameup-orange-hover);

    color:
        white;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px
        rgba(237, 107, 39, 0.20);
}


.btn-secundario,
.btn-profesional,
.btn-guardar {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 21px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-small);

    background:
        white;

    color:
        var(--frameup-black);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


.btn-secundario:hover,
.btn-profesional:hover,
.btn-guardar:hover {
    border-color:
        var(--frameup-orange);

    color:
        var(--frameup-orange);
}


/* =========================================================
   FRAMEUP HOME
========================================================= */

.frameup-hero {
    width:
        min(1400px, 96%);

    min-height:
        620px;

    margin:
        18px auto 0;

    padding:
        75px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-radius:
        var(--radius-large);

    background-color:
        var(--frameup-black);

    background-image:

        linear-gradient(
            90deg,
            rgba(29, 30, 29, 0.98) 0%,
            rgba(29, 30, 29, 0.92) 40%,
            rgba(29, 30, 29, 0.52) 68%,
            rgba(29, 30, 29, 0.20) 100%
        ),

        url("assets/hero-frameup.webp");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


.frameup-hero-overlay {
    position:
        absolute;

    inset: 0;

    pointer-events:
        none;
}


.frameup-hero-contenido {
    width:
        min(660px, 100%);

    position:
        relative;

    z-index: 2;

    color: white;
}


.frameup-hero-etiqueta {
    margin-bottom:
        14px;

    color:
        var(--frameup-orange);

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;
}


.frameup-hero h1 {
    margin:
        0 0 23px;

    color:
        white;

    font-size:
        clamp(
            50px,
            6vw,
            82px
        );

    font-weight:
        900;

    line-height:
        0.98;

    letter-spacing:
        -2.5px;
}


.frameup-hero h1 span {
    display: block;

    color:
        var(--frameup-orange);
}


.frameup-hero-descripcion {
    max-width:
        600px;

    margin-bottom:
        30px;

    color:
        #EEEEEE;

    font-size:
        18px;

    line-height:
        1.65;
}


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

.frameup-buscador {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        6px;

    border-radius:
        17px;

    background:
        white;

    box-shadow:
        var(--shadow-medium);
}


.frameup-buscador-input {
    min-width: 0;

    flex: 1;

    display: flex;

    align-items: center;

    gap: 10px;

    padding-left:
        14px;
}


.frameup-buscador-input span {
    color:
        var(--frameup-gray-soft);
}


.frameup-buscador input {
    width: 100%;

    height: 50px;

    border: none;

    outline: none;

    background:
        transparent;

    color:
        var(--frameup-black);

    font-size:
        15px;
}


.frameup-buscador input::placeholder {
    color:
        #969696;
}


.frameup-buscador button {
    min-width:
        130px;

    height:
        48px;

    padding:
        0 20px;

    border-radius:
        12px;

    background:
        var(--frameup-orange);

    color:
        white;

    font-size:
        14px;

    font-weight:
        700;
}


.frameup-buscador button:hover {
    background:
        var(--frameup-orange-hover);
}


.frameup-ejemplo {
    margin:
        10px 5px 26px;

    color:
        #B8B8B8;

    font-size:
        12px;
}


/* =========================================================
   DOS CAMINOS HOME
========================================================= */

.frameup-caminos {
    display: grid;

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

    gap: 12px;
}


.frameup-caminos a {
    min-height:
        78px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        16px;

    border-radius:
        14px;
}


.frameup-camino-principal {
    background:
        var(--frameup-orange);

    color:
        white;
}


.frameup-camino-principal:hover {
    background:
        var(--frameup-orange-hover);

    color:
        white;
}


.frameup-camino-secundario {
    background:
        rgba(255, 255, 255, 0.10);

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    color:
        white;
}


.frameup-camino-secundario:hover {
    background:
        rgba(255, 255, 255, 0.16);

    color:
        white;
}


.frameup-camino-icono {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        11px;

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

    font-size:
        18px;
}


.frameup-caminos strong,
.frameup-caminos small {
    display: block;
}


.frameup-caminos strong {
    margin-bottom:
        3px;

    font-size:
        13px;

    font-weight:
        900;
}


.frameup-caminos small {
    opacity:
        0.8;

    font-size:
        11px;
}


/* =========================================================
   HOME - PRODUCCIONES
========================================================= */

.frameup-producciones,
.frameup-como-funciona {
    width:
        min(1200px, 90%);

    margin:
        0 auto;

    padding:
        90px 0;
}


.frameup-seccion-titulo {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        35px;
}


.frameup-seccion-titulo h2 {
    margin:
        4px 0 8px;

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );
}


.frameup-seccion-titulo p {
    max-width:
        650px;

    color:
        var(--frameup-gray);
}


.frameup-seccion-titulo > a {
    flex-shrink: 0;

    color:
        var(--frameup-orange);

    font-weight:
        700;
}


.frameup-producciones-grid {
    display: grid;

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

    gap:
        14px;
}


.frameup-producciones-grid a {
    min-height:
        135px;

    padding:
        21px;

    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-end;

    gap:
        20px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        var(--shadow-small);
}


.frameup-producciones-grid a:hover {
    border-color:
        var(--frameup-orange);

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-medium);
}


.frameup-producciones-grid span {
    font-size:
        27px;
}


/* =========================================================
   HOME - CÓMO FUNCIONA
========================================================= */

.frameup-como-funciona {
    padding-top:
        40px;
}


.frameup-pasos-grid {
    display: grid;

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

    gap:
        15px;
}


.frameup-paso {
    min-height:
        270px;

    position:
        relative;

    padding:
        30px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        white;

    box-shadow:
        var(--shadow-small);
}


.frameup-numero {
    width:
        34px;

    height:
        34px;

    position:
        absolute;

    top:
        -14px;

    left:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--frameup-orange);

    color:
        white;

    font-size:
        12px;

    font-weight:
        900;
}


.frameup-paso-icono {
    margin:
        26px 0 30px;

    font-size:
        30px;
}


.frameup-paso h3 {
    margin-bottom:
        10px;

    font-size:
        19px;
}


.frameup-paso p {
    font-size:
        14px;

    line-height:
        1.6;
}


/* =========================================================
   CTA PROFESIONAL HOME
========================================================= */

.frameup-profesional-cta {
    width:
        min(1200px, 90%);

    margin:
        20px auto 90px;

    padding:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-radius:
        var(--radius-large);

    background:
        var(--frameup-black);

    color:
        white;
}


.frameup-profesional-cta h2 {
    margin:
        5px 0 12px;

    color:
        white;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );
}


.frameup-profesional-cta p {
    max-width:
        680px;

    color:
        #C9C9C9;

    line-height:
        1.6;
}


.frameup-cta-blanco {
    flex-shrink: 0;

    padding:
        15px 22px;

    border-radius:
        11px;

    background:
        white;

    color:
        var(--frameup-black);

    font-weight:
        700;
}


.frameup-cta-blanco:hover {
    color:
        var(--frameup-orange);
}


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

.frameup-footer {
    padding:
        45px 6%;

    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        40px;

    border-top:
        1px solid
        var(--frameup-border);

    background:
        white;
}


.frameup-footer-marca img {
    width:
        210px;

    display:
        block;

    margin-bottom:
        10px;
}


.frameup-footer-marca p {
    color:
        var(--frameup-gray);

    font-size:
        13px;
}


.frameup-footer-links {
    display:
        flex;

    gap:
        25px;
}


.frameup-footer-links a {
    color:
        var(--frameup-gray);

    font-size:
        13px;

    font-weight:
        600;
}


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


.frameup-footer-copy {
    color:
        var(--frameup-gray-soft);

    font-size:
        12px;
}


/* =========================================================
   REGISTRO - ELEGIR USUARIO
========================================================= */

.registro {
    min-height:
        calc(100vh - 76px);

    padding:
        70px 8%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.registro-contenido {
    width:
        100%;

    max-width:
        950px;

    text-align:
        center;
}


.registro-contenido h1 {
    margin-bottom:
        15px;

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );
}


.registro-descripcion {
    max-width:
        650px;

    margin:
        0 auto 45px;

    color:
        var(--frameup-gray);

    font-size:
        17px;

    line-height:
        1.6;
}


.tipos-usuario {
    display:
        grid;

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

    gap:
        22px;
}


.tarjeta-usuario {
    padding:
        42px 34px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-large);

    background:
        white;

    color:
        var(--frameup-black);

    text-align:
        left;

    box-shadow:
        var(--shadow-small);
}


.tarjeta-usuario:hover {
    border-color:
        var(--frameup-orange);

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-medium);
}


.icono-usuario {
    margin-bottom:
        25px;

    font-size:
        40px;
}


.tarjeta-usuario h2 {
    margin-bottom:
        14px;

    font-size:
        25px;
}


.tarjeta-usuario p {
    margin-bottom:
        28px;

    line-height:
        1.65;
}


.enlace-tarjeta {
    color:
        var(--frameup-orange);

    font-weight:
        900;
}


/* =========================================================
   FORMULARIOS
========================================================= */

.formulario-registro {
    min-height:
        calc(100vh - 76px);

    padding:
        65px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.formulario-contenedor {
    width:
        100%;

    max-width:
        540px;

    padding:
        44px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-large);

    background:
        white;

    box-shadow:
        var(--shadow-small);
}


.volver {
    display:
        inline-block;

    margin-bottom:
        28px;

    color:
        var(--frameup-gray);

    font-size:
        14px;

    font-weight:
        600;
}


.volver:hover {
    color:
        var(--frameup-orange);
}


.formulario-contenedor h1 {
    margin-bottom:
        10px;

    font-size:
        39px;
}


.formulario-descripcion {
    margin-bottom:
        34px;

    line-height:
        1.6;
}


.grupo-formulario {
    margin-bottom:
        22px;
}


.grupo-formulario label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--frameup-black);

    font-size:
        14px;

    font-weight:
        700;
}


.grupo-formulario input,
.grupo-formulario select,
.grupo-formulario textarea {
    width:
        100%;

    padding:
        14px 15px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        10px;

    outline:
        none;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        15px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.grupo-formulario textarea {
    min-height:
        120px;

    resize:
        vertical;
}


.grupo-formulario input:focus,
.grupo-formulario select:focus,
.grupo-formulario textarea:focus {
    border-color:
        var(--frameup-orange);

    box-shadow:
        0 0 0 3px
        rgba(237, 107, 39, 0.10);
}


.terminos {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        25px;
}


.terminos label {
    color:
        var(--frameup-gray);

    font-size:
        13px;

    line-height:
        1.5;
}


.btn-formulario {
    width:
        100%;
}


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

.panel-cliente {
    width:
        min(1200px, 90%);

    margin:
        0 auto;

    padding:
        65px 0 100px;
}


.panel-bienvenida {
    margin-bottom:
        55px;

    padding:
        55px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-large);

    background:
        white;

    box-shadow:
        var(--shadow-small);
}


.panel-bienvenida h1 {
    margin-bottom:
        14px;

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );
}


.panel-bienvenida p {
    max-width:
        650px;

    margin-bottom:
        28px;

    font-size:
        17px;

    line-height:
        1.65;
}


.btn-crear-proyecto {
    padding:
        15px 23px;
}


.mis-proyectos {
    margin-top:
        30px;
}


.titulo-seccion {
    margin-bottom:
        25px;
}


.titulo-seccion h2 {
    font-size:
        30px;
}


.titulo-seccion p {
    margin-top:
        7px;
}


.proyecto-vacio {
    padding:
        50px 25px;

    border:
        1px dashed
        #BBB7B2;

    border-radius:
        var(--radius-medium);

    background:
        white;

    text-align:
        center;
}


.proyecto-vacio h3 {
    margin-bottom:
        8px;
}


/* =========================================================
   CREAR PROYECTO
========================================================= */

.crear-proyecto {
    padding:
        65px 20px 100px;
}


.proyecto-contenedor {
    width:
        min(760px, 100%);

    margin:
        auto;

    padding:
        48px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-large);

    background:
        white;

    box-shadow:
        var(--shadow-small);
}


.proyecto-contenedor h1 {
    margin-bottom:
        14px;

    font-size:
        41px;
}


.proyecto-descripcion {
    margin-bottom:
        40px;

    line-height:
        1.65;
}


.pregunta-proyecto {
    margin-bottom:
        30px;
}


.pregunta-proyecto > label {
    display:
        block;

    margin-bottom:
        11px;

    color:
        var(--frameup-black);

    font-size:
        16px;

    font-weight:
        700;
}


.pregunta-proyecto input[type="text"],
.pregunta-proyecto input[type="date"],
.pregunta-proyecto select,
.pregunta-proyecto textarea {
    width:
        100%;

    padding:
        14px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        10px;

    outline:
        none;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        15px;
}


.pregunta-proyecto textarea {
    min-height:
        115px;

    resize:
        vertical;
}


.pregunta-proyecto input:focus,
.pregunta-proyecto select:focus,
.pregunta-proyecto textarea:focus {
    border-color:
        var(--frameup-orange);

    box-shadow:
        0 0 0 3px
        rgba(237, 107, 39, 0.10);
}


.opciones-radio {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.opciones-radio label {
    padding:
        12px 16px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        10px;

    background:
        var(--frameup-light-gray);

    color:
        var(--frameup-black);

    cursor:
        pointer;
}


/* =========================================================
   RESULTADO PROYECTO / ORIENTACIÓN
========================================================= */

.resultado {
    width:
        min(1200px, 90%);

    margin:
        auto;

    padding:
        65px 0 100px;
}


.resultado-encabezado {
    max-width:
        820px;

    margin-bottom:
        45px;
}


.resultado-encabezado h1 {
    margin-bottom:
        15px;

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );
}


.resultado-encabezado > p:last-child {
    font-size:
        17px;

    line-height:
        1.65;
}


.resumen-proyecto,
.informacion-proyecto {
    margin-bottom:
        50px;

    padding:
        34px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-large);

    background:
        white;
}


.resumen-proyecto h2,
.informacion-proyecto h2 {
    margin-bottom:
        25px;
}


.resumen-grid {
    display:
        grid;

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

    gap:
        15px;
}


.resumen-grid div {
    padding:
        19px;

    border-radius:
        12px;

    background:
        var(--frameup-light-gray);
}


.resumen-grid span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--frameup-gray);

    font-size:
        12px;
}


.resumen-grid strong {
    font-size:
        15px;
}


.recomendaciones {
    margin-bottom:
        55px;
}


.lista-recomendaciones {
    display:
        grid;

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

    gap:
        18px;

    margin-top:
        28px;
}


.tarjeta-recomendacion {
    padding:
        28px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        white;

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


.tarjeta-recomendacion:hover {
    border-color:
        var(--frameup-orange);

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-medium);
}


.icono-profesion {
    margin-bottom:
        18px;

    font-size:
        34px;
}


.tarjeta-recomendacion h3 {
    margin-bottom:
        9px;

    font-size:
        19px;
}


.tarjeta-recomendacion p {
    font-size:
        14px;

    line-height:
        1.55;
}


.info-item {
    margin-bottom:
        23px;
}


.info-item strong {
    display:
        block;

    margin-bottom:
        7px;
}


.info-item p {
    line-height:
        1.6;
}


.continuar-profesionales {
    padding:
        42px;

    border-radius:
        var(--radius-large);

    background:
        var(--frameup-black);

    color:
        white;
}


.continuar-profesionales h2 {
    margin-bottom:
        9px;

    color:
        white;

    font-size:
        30px;
}


.continuar-profesionales p {
    max-width:
        650px;

    margin-bottom:
        24px;

    color:
        #CCCCCC;

    line-height:
        1.6;
}


.btn-buscar-profesionales {
    display:
        inline-flex;

    padding:
        14px 22px;

    border-radius:
        10px;

    background:
        var(--frameup-orange);

    color:
        white;

    font-weight:
        700;
}


.btn-buscar-profesionales:hover {
    background:
        var(--frameup-orange-hover);

    color:
        white;
}


/* =========================================================
   EXPLORAR PROFESIONALES
========================================================= */

.pagina-profesionales {
    width:
        min(1240px, 90%);

    margin:
        auto;

    padding:
        60px 0 100px;
}


.profesionales-encabezado {
    max-width:
        780px;

    margin-bottom:
        35px;
}


.profesionales-encabezado h1 {
    margin-bottom:
        13px;

    font-size:
        clamp(
            38px,
            5vw,
            50px
        );
}


.profesionales-encabezado > p:last-child {
    font-size:
        17px;

    line-height:
        1.6;
}


.filtros-profesionales {
    margin-bottom:
        35px;

    display:
        grid;

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

    gap:
        10px;
}


.filtros-profesionales input,
.filtros-profesionales select {
    width:
        100%;

    min-height:
        48px;

    padding:
        12px 14px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        10px;

    outline:
        none;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        14px;
}


.filtros-profesionales input:focus,
.filtros-profesionales select:focus {
    border-color:
        var(--frameup-orange);

    box-shadow:
        0 0 0 3px
        rgba(237, 107, 39, 0.10);
}


.grid-profesionales {
    display:
        grid;

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

    gap:
        22px;
}


.tarjeta-profesional {
    overflow:
        hidden;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        white;

    box-shadow:
        var(--shadow-small);

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


.tarjeta-profesional:hover {
    border-color:
        rgba(237, 107, 39, 0.7);

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-medium);
}


.profesional-portada {
    height:
        145px;

    padding:
        14px;

    position:
        relative;

    display:
        flex;

    justify-content:
        flex-end;

    background:
        var(--frameup-black);
}


.portada-1 {
    background:
        linear-gradient(
            135deg,
            #1D1E1D,
            #484A48
        );
}


.portada-2 {
    background:
        linear-gradient(
            135deg,
            #34251F,
            #ED6B27
        );
}


.portada-3 {
    background:
        linear-gradient(
            135deg,
            #222322,
            #676767
        );
}


.estado,
.estado-profesional {
    height:
        fit-content;

    padding:
        7px 10px;

    border-radius:
        20px;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        11px;

    font-weight:
        700;
}


.estado.disponible,
.estado-profesional.disponible {
    background:
        var(--frameup-green-bg);

    color:
        #28643B;
}


.estado.ocupado,
.estado-profesional.ocupado {
    background:
        var(--frameup-red-bg);

    color:
        #8A3A3A;
}


.profesional-contenido {
    padding:
        0 23px 23px;

    position:
        relative;
}


.avatar-profesional {
    width:
        72px;

    height:
        72px;

    margin-top:
        -36px;

    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        4px solid white;

    border-radius:
        50%;

    background:
        var(--frameup-black);

    color:
        white;

    font-size:
        20px;

    font-weight:
        900;
}


.avatar-profesional img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.profesional-contenido h2 {
    margin-bottom:
        4px;

    font-size:
        20px;
}


.profesion {
    margin-bottom:
        5px;

    color:
        var(--frameup-black);

    font-size:
        13px;

    font-weight:
        700;
}


.ubicacion {
    margin-bottom:
        17px;

    color:
        var(--frameup-gray);

    font-size:
        12px;
}


.bio-profesional {
    min-height:
        62px;

    margin-bottom:
        20px;

    font-size:
        13px;

    line-height:
        1.55;
}


.datos-profesional {
    margin-bottom:
        18px;

    padding:
        14px 0;

    display:
        flex;

    gap:
        27px;

    border-top:
        1px solid
        #EEEEEE;

    border-bottom:
        1px solid
        #EEEEEE;
}


.datos-profesional div {
    display:
        flex;

    flex-direction:
        column;
}


.datos-profesional strong {
    font-size:
        17px;
}


.datos-profesional span {
    color:
        var(--frameup-gray);

    font-size:
        11px;
}


.btn-ver-perfil {
    width:
        100%;
}


/* =========================================================
   CONTEXTO DE BÚSQUEDA
========================================================= */

.contexto-busqueda {
    margin-bottom:
        28px;

    padding:
        24px 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-radius:
        var(--radius-medium);

    background:
        var(--frameup-black);

    color:
        white;
}


.contexto-busqueda .etiqueta {
    color:
        var(--frameup-orange);
}


.contexto-busqueda h2 {
    color:
        white;

    font-size:
        24px;
}


.contexto-datos {
    display:
        flex;

    gap:
        30px;
}


.contexto-datos div {
    min-width:
        110px;
}


.contexto-datos span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #B9B9B9;

    font-size:
        11px;
}


.contexto-datos strong {
    color:
        white;

    font-size:
        14px;
}


.cabecera-resultados {
    margin-bottom:
        18px;

    color:
        var(--frameup-gray);

    font-size:
        14px;
}


.cabecera-resultados strong {
    color:
        var(--frameup-black);

    font-size:
        19px;
}


.coincidencia-proyecto {
    display:
        none;

    position:
        absolute;

    top:
        14px;

    left:
        14px;

    padding:
        7px 10px;

    border-radius:
        20px;

    background:
        var(--frameup-orange);

    color:
        white;

    font-size:
        10px;

    font-weight:
        900;
}


.coincidencia-proyecto.visible {
    display:
        inline-block;
}


.tarjeta-profesional.oculta {
    display:
        none;
}


.sin-resultados {
    padding:
        55px 20px;

    border:
        1px dashed
        #BBB7B2;

    border-radius:
        var(--radius-medium);

    background:
        white;

    text-align:
        center;
}


.sin-resultados h2 {
    margin-bottom:
        8px;
}


/* =========================================================
   PERFIL PROFESIONAL
========================================================= */

.perfil-body {
    background:
        var(--frameup-background);
}


.perfil-profesional {
    width:
        min(1200px, 90%);

    margin:
        auto;

    padding:
        38px 0 80px;
}


.perfil-portada {
    min-height:
        300px;

    padding:
        42px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;

    border-radius:
        var(--radius-large);

    background:
        var(--frameup-black);

    color:
        white;
}


.perfil-identidad {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        24px;
}


.perfil-avatar-grande {
    width:
        140px;

    height:
        140px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        5px solid
        rgba(255, 255, 255, 0.20);

    border-radius:
        22px;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        37px;

    font-weight:
        900;
}


.perfil-avatar-grande img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.perfil-especialidad {
    margin-bottom:
        5px;

    color:
        #CCCCCC;

    font-size:
        13px;
}


.perfil-info-principal h1 {
    margin-bottom:
        7px;

    color:
        white;

    font-size:
        40px;
}


.perfil-ubicacion {
    margin-bottom:
        14px;

    color:
        #D0D0D0;
}


.perfil-disponible {
    display:
        inline-block;

    padding:
        7px 12px;

    border-radius:
        20px;

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

    color:
        white;

    font-size:
        12px;
}


.perfil-acciones {
    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;
}


.perfil-acciones .btn-contactar {
    background:
        var(--frameup-orange);

    color:
        white;

    border-color:
        var(--frameup-orange);
}


.perfil-acciones .btn-guardar {
    background:
        transparent;

    color:
        white;

    border-color:
        rgba(255, 255, 255, 0.45);
}


.perfil-acciones .btn-guardar:hover {
    background:
        rgba(255, 255, 255, 0.10);

    color:
        white;

    border-color:
        white;
}


#btn-ir-panel-profesional,
#btn-editar-mi-perfil {
    align-items:
        center;

    justify-content:
        center;
}


.perfil-menu {
    margin:
        18px 0 28px;

    padding:
        19px 28px;

    display:
        flex;

    gap:
        28px;

    overflow-x:
        auto;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        14px;

    background:
        white;
}


.perfil-menu a {
    position:
        relative;

    color:
        var(--frameup-black);

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.perfil-menu a:hover {
    color:
        var(--frameup-orange);
}


.seccion-perfil {
    margin-bottom:
        23px;

    padding:
        34px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        white;
}


.seccion-perfil h2 {
    margin-bottom:
        24px;

    font-size:
        28px;
}


/* =========================================================
   PORTAFOLIO EN PERFIL
========================================================= */

.grid-portafolio {
    display:
        grid;

    grid-template-columns:
        2fr 1fr;

    gap:
        18px;
}


.trabajo {
    overflow:
        hidden;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        15px;

    background:
        white;
}


.trabajo-grande {
    grid-row:
        span 2;
}


.trabajo-imagen {
    min-height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        var(--frameup-black);

    color:
        white;

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.trabajo-grande .trabajo-imagen {
    min-height:
        325px;
}


.trabajo-imagen img {
    width:
        100%;

    height:
        100%;

    min-height:
        inherit;

    display:
        block;

    object-fit:
        cover;
}


.trabajo-info {
    padding:
        19px;
}


.trabajo-info span {
    color:
        var(--frameup-orange);

    font-size:
        11px;

    font-weight:
        700;
}


.trabajo-info h3 {
    margin:
        6px 0;

    font-size:
        18px;
}


.trabajo-info p {
    font-size:
        13px;
}


.btn-ver-proyecto {
    display:
        inline-block;

    margin-top:
        14px;

    color:
        var(--frameup-orange);

    font-size:
        12px;

    font-weight:
        700;
}


.portafolio-vacio {
    grid-column:
        1 / -1;

    padding:
        48px;

    border-radius:
        14px;

    background:
        var(--frameup-light-gray);

    text-align:
        center;
}


.portafolio-vacio h3 {
    margin-bottom:
        7px;
}


/* =========================================================
   ACERCA / DATOS
========================================================= */

.perfil-columnas {
    display:
        grid;

    grid-template-columns:
        2fr 1fr;

    gap:
        45px;
}


.perfil-acerca p:last-child {
    line-height:
        1.8;
}


.perfil-datos {
    display:
        grid;

    gap:
        12px;
}


.perfil-datos div {
    padding:
        19px;

    border-radius:
        11px;

    background:
        var(--frameup-light-gray);
}


.perfil-datos strong,
.perfil-datos span {
    display:
        block;
}


.perfil-datos span {
    margin-top:
        4px;

    color:
        var(--frameup-gray);

    font-size:
        11px;
}


/* =========================================================
   EXPERIENCIA
========================================================= */

.experiencia-item {
    padding:
        19px 0;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        #EEEEEE;
}


.experiencia-item:last-child {
    border-bottom:
        none;
}


.experiencia-item p,
.experiencia-item > span {
    margin-top:
        4px;

    color:
        var(--frameup-gray);

    font-size:
        13px;
}


/* =========================================================
   EQUIPOS
========================================================= */

.equipos-lista {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.equipos-lista span {
    padding:
        9px 13px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        8px;

    background:
        var(--frameup-light-gray);

    color:
        var(--frameup-black);

    font-size:
        13px;
}


/* =========================================================
   CALENDARIO
========================================================= */

.texto-disponibilidad {
    margin-bottom:
        23px;
}


.calendario-profesional {
    margin-top:
        18px;

    padding:
        24px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        var(--frameup-light-gray);
}


.calendario-header {
    margin-bottom:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.calendario-header h3 {
    font-size:
        20px;

    text-transform:
        capitalize;
}


.boton-mes {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        10px;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        18px;
}


.boton-mes:hover {
    border-color:
        var(--frameup-orange);

    background:
        var(--frameup-orange);

    color:
        white;
}


.calendario-semana,
.calendario-dias {
    display:
        grid;

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

    gap:
        7px;
}


.calendario-semana {
    margin-bottom:
        7px;
}


.calendario-semana span {
    padding:
        7px 0;

    color:
        var(--frameup-gray);

    font-size:
        11px;

    font-weight:
        700;

    text-align:
        center;
}


.calendario-dia {
    min-height:
        60px;

    aspect-ratio:
        1 / 1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        9px;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        13px;

    font-weight:
        700;

    user-select:
        none;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease;
}


button.calendario-dia {
    cursor:
        pointer;
}


button.calendario-dia:hover {
    border-color:
        var(--frameup-orange);

    transform:
        translateY(-1px);
}


.calendario-vacio {
    min-height:
        60px;
}


.calendario-dia.disponible-fecha {
    border-color:
        #B9DFC2;

    background:
        var(--frameup-green-bg);

    color:
        #28643B;
}


.calendario-dia.ocupado-fecha {
    border-color:
        #E2BBBB;

    background:
        var(--frameup-red-bg);

    color:
        #893C3C;
}


.calendario-dia.hoy {
    outline:
        2px solid
        var(--frameup-orange);

    outline-offset:
        2px;
}


.calendario-leyenda {
    margin:
        10px 0 14px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;
}


.leyenda-item {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--frameup-gray);

    font-size:
        12px;
}


.leyenda-color {
    width:
        14px;

    height:
        14px;

    display:
        inline-block;

    border-radius:
        4px;
}


.disponible-color {
    border:
        1px solid
        #B9DFC2;

    background:
        var(--frameup-green-bg);
}


.ocupado-color {
    border:
        1px solid
        #E2BBBB;

    background:
        var(--frameup-red-bg);
}


.sin-marcar-color {
    border:
        1px solid
        var(--frameup-border);

    background:
        white;
}


.ayuda-calendario {
    margin-top:
        14px;

    font-size:
        12px;

    line-height:
        1.5;
}


/* =========================================================
   FECHA DEL CLIENTE
========================================================= */

.estado-fecha-cliente {
    margin-bottom:
        23px;

    padding:
        19px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        13px;

    background:
        var(--frameup-light-gray);
}


.estado-fecha-cliente span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--frameup-gray);

    font-size:
        11px;
}


.estado-fecha-cliente strong {
    display:
        block;

    margin-bottom:
        6px;

    font-size:
        17px;
}


.estado-fecha-cliente p {
    font-weight:
        700;
}


.estado-fecha-cliente.fecha-disponible {
    border-color:
        #B9DFC2;

    background:
        var(--frameup-green-bg);

    color:
        #28643B;
}


.estado-fecha-cliente.fecha-ocupada {
    border-color:
        #E2BBBB;

    background:
        var(--frameup-red-bg);

    color:
        #893C3C;
}


.estado-fecha-cliente.fecha-desconocida {
    background:
        var(--frameup-light-gray);

    color:
        var(--frameup-gray);
}


/* =========================================================
   COMPLETAR PERFIL PROFESIONAL
========================================================= */

.configuracion-profesional {
    width:
        min(950px, 90%);

    margin:
        auto;

    padding:
        60px 0 100px;
}


.configuracion-encabezado {
    margin-bottom:
        45px;
}


.configuracion-encabezado h1 {
    margin-bottom:
        13px;

    font-size:
        clamp(
            38px,
            5vw,
            48px
        );
}


.configuracion-encabezado > p {
    max-width:
        700px;

    margin-bottom:
        28px;

    font-size:
        16px;

    line-height:
        1.6;
}


.barra-progreso {
    width:
        100%;

    height:
        7px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #DDDAD6;
}


.progreso-activo {
    width:
        25%;

    height:
        100%;

    border-radius:
        20px;

    background:
        var(--frameup-orange);
}


.texto-progreso {
    display:
        inline-block;

    margin-top:
        9px;

    color:
        var(--frameup-gray);

    font-size:
        12px;
}


.bloque-configuracion {
    margin-bottom:
        22px;

    padding:
        34px;

    display:
        grid;

    grid-template-columns:
        56px 1fr;

    gap:
        24px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-large);

    background:
        white;
}


.numero-configuracion {
    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--frameup-orange);

    color:
        white;

    font-weight:
        900;
}


.contenido-configuracion h2 {
    margin-bottom:
        7px;

    font-size:
        25px;
}


.contenido-configuracion > p {
    margin-bottom:
        28px;

    line-height:
        1.55;
}


.dos-columnas-formulario {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;
}


/* =========================================================
   PORTAFOLIO MÚLTIPLE
========================================================= */

#contenedor-proyectos-portafolio {
    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;
}


.proyecto-portafolio-form {
    padding:
        24px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        15px;

    background:
        var(--frameup-light-gray);
}


.cabecera-proyecto-portafolio {
    margin-bottom:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.cabecera-proyecto-portafolio h3 {
    font-size:
        18px;
}


.btn-agregar-proyecto {
    width:
        100%;

    margin-top:
        18px;

    padding:
        14px;

    border:
        1px dashed
        #A9A5A0;

    border-radius:
        11px;

    background:
        white;

    color:
        var(--frameup-black);

    font-size:
        13px;

    font-weight:
        700;
}


.btn-agregar-proyecto:hover {
    border-color:
        var(--frameup-orange);

    color:
        var(--frameup-orange);

    background:
        #FFF8F4;
}


.btn-eliminar-proyecto {
    padding:
        8px 11px;

    border-radius:
        8px;

    background:
        var(--frameup-red-bg);

    color:
        #8A3A3A;

    font-size:
        11px;

    font-weight:
        700;
}


.ayuda-portafolio {
    margin-top:
        9px;

    font-size:
        12px;

    line-height:
        1.5;
}


/* =========================================================
   PUBLICAR PERFIL
========================================================= */

.publicar-perfil {
    padding:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-radius:
        var(--radius-large);

    background:
        var(--frameup-black);

    color:
        white;
}


.publicar-perfil h2 {
    margin-bottom:
        6px;

    color:
        white;
}


.publicar-perfil p {
    color:
        #CCCCCC;
}


.btn-publicar-perfil {
    flex-shrink:
        0;
}


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

.panel-profesional {
    width:
        min(1200px, 90%);

    margin:
        0 auto;

    padding:
        60px 0 100px;
}


.panel-profesional-bienvenida {
    margin-bottom:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


.panel-profesional-bienvenida h1 {
    margin-bottom:
        11px;

    font-size:
        clamp(
            38px,
            5vw,
            55px
        );
}


.panel-profesional-bienvenida > div > p:last-child {
    max-width:
        650px;

    line-height:
        1.6;
}


.panel-resumen-profesional {
    margin-bottom:
        65px;

    display:
        grid;

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

    gap:
        16px;
}


.panel-estadistica {
    padding:
        23px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        15px;

    background:
        white;
}


.panel-estadistica > span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--frameup-gray);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.5px;

    text-transform:
        uppercase;
}


.panel-estadistica strong {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--frameup-black);

    font-size:
        27px;
}


.panel-estadistica p {
    font-size:
        12px;

    line-height:
        1.5;
}


.panel-seccion {
    margin-bottom:
        65px;
}


.panel-titulo-seccion {
    margin-bottom:
        23px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;
}


.panel-titulo-seccion h2 {
    font-size:
        30px;
}


.panel-acciones-grid {
    display:
        grid;

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

    gap:
        16px;
}


.panel-accion-card {
    min-height:
        235px;

    padding:
        24px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        white;

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


.panel-accion-card:hover {
    border-color:
        var(--frameup-orange);

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-medium);
}


.panel-accion-icono {
    width:
        47px;

    height:
        47px;

    margin-bottom:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        #FFF0E8;

    font-size:
        21px;
}


.panel-accion-card h3 {
    margin-bottom:
        8px;

    font-size:
        18px;
}


.panel-accion-card p {
    margin-bottom:
        23px;

    font-size:
        13px;

    line-height:
        1.55;
}


.panel-accion-card a {
    margin-top:
        auto;

    color:
        var(--frameup-orange);

    font-size:
        12px;

    font-weight:
        700;
}


/* =========================================================
   SOLICITUDES PROFESIONALES
========================================================= */

.lista-solicitudes {
    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}


.solicitud-card {
    padding:
        23px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        28px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        white;
}


.solicitud-principal {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.solicitud-avatar {
    width:
        51px;

    height:
        51px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--frameup-black);

    color:
        white;

    font-size:
        13px;

    font-weight:
        900;
}


.solicitud-tipo {
    display:
        inline-block;

    margin-bottom:
        4px;

    color:
        var(--frameup-orange);

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.solicitud-principal h3 {
    margin-bottom:
        4px;

    font-size:
        16px;
}


.solicitud-principal p {
    font-size:
        12px;

    line-height:
        1.5;
}


.solicitud-principal small {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--frameup-gray-soft);

    font-size:
        11px;
}


.solicitud-datos {
    display:
        grid;

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

    gap:
        18px;
}


.solicitud-datos span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--frameup-gray-soft);

    font-size:
        9px;

    text-transform:
        uppercase;
}


.solicitud-datos strong {
    font-size:
        11px;
}


.solicitud-acciones {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.btn-aceptar-solicitud,
.btn-rechazar-solicitud {
    min-width:
        130px;

    padding:
        10px 13px;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        700;
}


.btn-aceptar-solicitud {
    background:
        var(--frameup-orange);

    color:
        white;
}


.btn-aceptar-solicitud:hover {
    background:
        var(--frameup-orange-hover);
}


.btn-rechazar-solicitud {
    border:
        1px solid
        var(--frameup-border);

    background:
        white;

    color:
        var(--frameup-gray);
}


.solicitud-card.solicitud-aceptada {
    border-color:
        #AED6B8;

    background:
        #F5FBF6;
}


.solicitud-card.solicitud-rechazada {
    opacity:
        0.52;
}


.sin-solicitudes-profesional {
    padding:
        52px 25px;

    border:
        1px dashed
        #BBB7B2;

    border-radius:
        var(--radius-medium);

    background:
        white;

    text-align:
        center;
}


.sin-solicitudes-profesional h3 {
    margin-bottom:
        7px;
}


/* =========================================================
   SOLICITUD DE CONTACTO
========================================================= */

.pagina-solicitud {
    width:
        min(760px, 90%);

    margin:
        0 auto;

    padding:
        65px 0 100px;
}


.solicitud-contacto-encabezado {
    margin-bottom:
        32px;

    text-align:
        center;
}


.solicitud-contacto-encabezado h1 {
    margin-bottom:
        13px;

    font-size:
        clamp(
            38px,
            5vw,
            50px
        );
}


.solicitud-contacto-encabezado > p:last-child {
    max-width:
        620px;

    margin:
        auto;

    line-height:
        1.6;
}


.solicitud-profesional-resumen {
    margin-bottom:
        18px;

    padding:
        21px;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    border-radius:
        var(--radius-medium);

    background:
        var(--frameup-black);

    color:
        white;
}


.solicitud-profesional-avatar {
    width:
        58px;

    height:
        58px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        var(--frameup-orange);

    color:
        white;

    font-weight:
        900;
}


.solicitud-profesional-resumen span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #BFBFBF;

    font-size:
        11px;
}


.solicitud-profesional-resumen h2 {
    margin-bottom:
        3px;

    color:
        white;

    font-size:
        20px;
}


.solicitud-profesional-resumen p {
    color:
        #D7D7D7;

    font-size:
        12px;
}


.form-solicitud-profesional {
    padding:
        30px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-large);

    background:
        white;
}


.solicitud-form-acciones {
    margin-top:
        28px;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;
}


/* =========================================================
   BUSCADOR ANTIGUO COMPATIBILIDAD
========================================================= */

.busqueda-directa {
    width:
        100%;

    max-width:
        680px;

    margin:
        45px auto 0;

    text-align:
        center;
}


.busqueda-directa > p {
    margin-bottom:
        13px;

    color:
        var(--frameup-black);

    font-size:
        14px;

    font-weight:
        700;
}


.busqueda-directa-form {
    width:
        100%;

    padding:
        7px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        15px;

    background:
        white;
}


.busqueda-directa-form input {
    min-width:
        0;

    flex: 1;

    height:
        46px;

    padding:
        0 14px;

    border:
        none;

    outline:
        none;

    background:
        transparent;
}


.busqueda-directa-form button {
    height:
        46px;

    padding:
        0 20px;

    border-radius:
        10px;

    background:
        var(--frameup-orange);

    color:
        white;

    font-weight:
        700;
}


/* =========================================================
   COMPATIBILIDAD CON HOME ANTIGUA
========================================================= */

.hero {
    min-height:
        600px;

    padding:
        80px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


.hero-contenido {
    max-width:
        850px;
}


.hero h1 {
    margin-bottom:
        23px;

    font-size:
        clamp(
            42px,
            6vw,
            60px
        );
}


.descripcion {
    max-width:
        650px;

    margin:
        0 auto 32px;

    font-size:
        18px;

    line-height:
        1.55;
}


.hero-botones {
    display:
        flex;

    justify-content:
        center;

    gap:
        13px;
}


.btn-grande,
.btn-profesional {
    min-width:
        215px;

    min-height:
        50px;
}


.como-funciona {
    padding:
        85px 8%;

    background:
        white;

    text-align:
        center;
}


.como-funciona h2 {
    margin-bottom:
        9px;

    font-size:
        37px;
}


.subtitulo {
    margin-bottom:
        45px;
}


.pasos {
    display:
        grid;

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

    gap:
        25px;
}


.paso {
    padding:
        33px;

    border:
        1px solid
        var(--frameup-border);

    border-radius:
        var(--radius-medium);

    background:
        var(--frameup-light-gray);
}


.paso span {
    width:
        44px;

    height:
        44px;

    margin-bottom:
        19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--frameup-orange);

    color:
        white;

    font-weight:
        900;
}


.paso h3 {
    margin-bottom:
        13px;
}


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

@media (max-width: 1100px) {

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


    .panel-resumen-profesional,
    .panel-acciones-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .solicitud-card {
        grid-template-columns:
            1fr;
    }


    .solicitud-acciones {
        flex-direction:
            row;
    }

}


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

@media (max-width: 950px) {

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


    .frameup-profesional-cta {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .frameup-footer {
        grid-template-columns:
            1fr;
    }


    .filtros-profesionales {
        grid-template-columns:
            1fr 1fr;
    }


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


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

}


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

@media (max-width: 820px) {

    .nav {
        display:
            none;
    }


    .perfil-portada {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


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


    .grid-portafolio {
        grid-template-columns:
            1fr;
    }


    .trabajo-grande {
        grid-row:
            auto;
    }


    .trabajo-grande .trabajo-imagen {
        min-height:
            250px;
    }


    .contexto-busqueda {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .contexto-datos {
        width:
            100%;

        flex-wrap:
            wrap;
    }


    .panel-profesional-bienvenida {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


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

@media (max-width: 720px) {

    .header {
        min-height:
            70px;

        padding:
            8px 5%;
    }


    .logo img {
        width:
            200px;

        height:
            50px;
    }


    .acciones .btn-secundario {
        display:
            none;
    }


    .frameup-hero {
        width:
            100%;

        min-height:
            auto;

        margin:
            0;

        padding:
            65px 6%;

        border-radius:
            0;

        background-position:
            center;
    }


    .frameup-hero h1 {
        font-size:
            clamp(
                43px,
                12vw,
                62px
            );

        letter-spacing:
            -1.5px;
    }


    .frameup-hero-descripcion {
        font-size:
            16px;
    }


    .frameup-buscador {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .frameup-buscador button {
        width:
            100%;
    }


    .frameup-caminos {
        grid-template-columns:
            1fr;
    }


    .frameup-producciones,
    .frameup-como-funciona {
        width:
            90%;

        padding:
            65px 0;
    }


    .frameup-seccion-titulo {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .frameup-profesional-cta {
        width:
            90%;

        padding:
            35px 25px;
    }


    .tipos-usuario {
        grid-template-columns:
            1fr;
    }


    .lista-recomendaciones {
        grid-template-columns:
            1fr;
    }


    .bloque-configuracion {
        grid-template-columns:
            1fr;
    }


    .dos-columnas-formulario {
        grid-template-columns:
            1fr;
    }


    .publicar-perfil {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .btn-publicar-perfil {
        width:
            100%;
    }


    .panel-resumen-profesional,
    .panel-acciones-grid {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 620px) {

    .frameup-producciones-grid,
    .frameup-pasos-grid {
        grid-template-columns:
            1fr;
    }


    .grid-profesionales {
        grid-template-columns:
            1fr;
    }


    .filtros-profesionales {
        grid-template-columns:
            1fr;
    }


    .resumen-grid {
        grid-template-columns:
            1fr;
    }


    .formulario-contenedor {
        padding:
            30px 21px;
    }


    .proyecto-contenedor {
        padding:
            30px 21px;
    }


    .resultado {
        width:
            calc(100% - 40px);
    }


    .perfil-profesional {
        width:
            calc(100% - 32px);
    }


    .perfil-portada {
        padding:
            28px 22px;
    }


    .perfil-identidad {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .perfil-avatar-grande {
        width:
            105px;

        height:
            105px;
    }


    .perfil-info-principal h1 {
        font-size:
            31px;
    }


    .perfil-acciones {
        width:
            100%;
    }


    .perfil-acciones button,
    .perfil-acciones a {
        flex:
            1;
    }


    .seccion-perfil {
        padding:
            25px 20px;
    }


    .calendario-profesional {
        padding:
            14px;
    }


    .calendario-semana,
    .calendario-dias {
        gap:
            4px;
    }


    .calendario-dia,
    .calendario-vacio {
        min-height:
            42px;
    }


    .calendario-dia {
        font-size:
            11px;
    }


    .calendario-leyenda {
        flex-direction:
            column;

        gap:
            7px;
    }


    .solicitud-datos {
        grid-template-columns:
            1fr;
    }


    .solicitud-acciones {
        flex-direction:
            column;
    }


    .btn-aceptar-solicitud,
    .btn-rechazar-solicitud {
        width:
            100%;
    }


    .solicitud-form-acciones {
        flex-direction:
            column-reverse;
    }


    .solicitud-form-acciones button {
        width:
            100%;
    }


    .busqueda-directa-form {
        flex-direction:
            column;
    }


    .busqueda-directa-form input,
    .busqueda-directa-form button {
        width:
            100%;
    }


    .hero-botones {
        flex-direction:
            column;
    }


    .pasos {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 450px) {

    .header {
        gap:
            8px;
    }


    .logo img {
        width:
            170px;
    }


    .acciones .btn-principal {
        padding:
            10px 13px;

        font-size:
            12px;
    }


    .frameup-hero {
        padding:
            55px 20px;
    }


    .frameup-hero h1 {
        font-size:
            42px;
    }


    .panel-bienvenida,
    .continuar-profesionales {
        padding:
            30px 22px;
    }


    .perfil-menu {
        padding:
            17px 19px;
    }


    .perfil-acciones {
        flex-direction:
            column;
    }


    .perfil-acciones button,
    .perfil-acciones a {
        width:
            100%;
    }


    .experiencia-item {
        flex-direction:
            column;
    }


    .cabecera-proyecto-portafolio {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}
/* =========================================================
   FRAMEUP
   PASO 23B
   RESPONSIVE FINAL
   PC + TABLET + CELULAR
========================================================= */


/* =========================================================
   PROTECCIÓN GLOBAL CONTRA DESBORDAMIENTOS
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


img,
video,
iframe {
    max-width: 100%;
}


input,
select,
textarea,
button {
    max-width: 100%;
}


a,
button {
    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   VIDEO / REELS
========================================================= */

.frameup-reel {
    width: 100%;
    overflow: hidden;
}


.frameup-reel video {
    width: 100% !important;
    max-width: 100%;
    display: block;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/* =========================================================
   TABLET GRANDE
   1100px
========================================================= */

@media (max-width: 1100px) {


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

    .header {
        padding:
            10px 4%;

        gap:
            16px;
    }


    .nav {
        gap:
            18px;
    }


    .nav a {
        font-size:
            12px;
    }


    /* =====================================================
       HOME
    ====================================================== */

    .frameup-hero {
        width:
            96%;

        padding:
            55px;
    }


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


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


    /* =====================================================
       CATÁLOGO
    ====================================================== */

    .pagina-profesionales {
        max-width:
            none;

        padding:
            50px 5%;
    }


    .filtros-profesionales {
        grid-template-columns:
            1.5fr 1fr 1fr;
    }


    #filtro-disponibilidad {
        grid-column:
            1 / -1;
    }


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


    /* =====================================================
       PERFIL
    ====================================================== */

    .frameup-profile-layout {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap:
            20px;
    }


    .frameup-profile-team-panel {
        grid-template-columns:
            1fr 1fr;
    }


    /* =====================================================
       CLIENTE
    ====================================================== */

    .frameup-client-dashboard {
        width:
            92%;
    }


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


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


    /* =====================================================
       PROYECTOS
    ====================================================== */

    .frameup-project-layout {
        grid-template-columns:
            minmax(0, 1fr)
            250px;
    }


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


    .frameup-result-layout {
        grid-template-columns:
            minmax(0, 1fr)
            300px;
    }


    /* =====================================================
       EQUIPOS
    ====================================================== */

    .frameup-team-layout {
        grid-template-columns:
            minmax(0, 1fr)
            290px;
    }


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

    .panel-resumen-profesional,
    .panel-acciones-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


}


/* =========================================================
   TABLET
   900px
========================================================= */

@media (max-width: 900px) {


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

       Mantenemos navegación visible.
    ====================================================== */

    .header {
        min-height:
            auto;

        padding:
            12px 4%;

        flex-wrap:
            wrap;

        row-gap:
            10px;
    }


    .logo {
        flex-shrink:
            0;
    }


    .logo img {
        width:
            135px;
    }


    .acciones {
        margin-left:
            auto;

        display:
            flex;

        align-items:
            center;

        gap:
            8px;
    }


    .header .nav {
        width:
            100%;

        order:
            3;

        display:
            flex !important;

        gap:
            22px;

        padding:
            8px 0 4px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        white-space:
            nowrap;

        scrollbar-width:
            none;
    }


    .header .nav::-webkit-scrollbar {
        display:
            none;
    }


    .header .nav a {
        flex-shrink:
            0;

        font-size:
            12px;
    }


    .nav a.activo::after {
        bottom:
            -5px;
    }


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

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

        align-items:
            flex-start;

        gap:
            25px;

        padding:
            40px 6%;
    }


    .frameup-footer-links {
        flex-wrap:
            wrap;

        gap:
            15px 22px;
    }


    /* =====================================================
       HOME
    ====================================================== */

    .frameup-hero {
        width:
            100%;

        min-height:
            540px;

        margin-top:
            0;

        padding:
            55px 6%;

        border-radius:
            0;
    }


    .frameup-caminos {
        grid-template-columns:
            1fr;
    }


    .frameup-profesional-cta {
        width:
            90%;

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    /* =====================================================
       CATÁLOGO
    ====================================================== */

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


    #buscar-profesional {
        grid-column:
            1 / -1;
    }


    #filtro-disponibilidad {
        grid-column:
            auto;
    }


    .contexto-busqueda {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            20px;
    }


    .contexto-datos {
        width:
            100%;
    }


    /* =====================================================
       PERFIL
    ====================================================== */

    .frameup-profile-layout {
        grid-template-columns:
            1fr;
    }


    .frameup-profile-sidebar {
        position:
            static;
    }


    .frameup-profile-hero-content {
        gap:
            25px;
    }


    .frameup-profile-nav {
        overflow-x:
            auto;

        white-space:
            nowrap;

        scrollbar-width:
            none;
    }


    .frameup-profile-nav::-webkit-scrollbar {
        display:
            none;
    }


    .frameup-profile-nav a {
        flex-shrink:
            0;
    }


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

    .frameup-login-page {
        width:
            92%;

        padding:
            40px 0 70px;
    }


    .frameup-login-card {
        grid-template-columns:
            1fr;
    }


    .frameup-login-brand {
        min-height:
            430px;
    }


    /* =====================================================
       REGISTROS
    ====================================================== */

    .frameup-auth-card {
        grid-template-columns:
            1fr;
    }


    .frameup-auth-brand {
        min-height:
            420px;
    }


    /* =====================================================
       CLIENTE
    ====================================================== */

    .frameup-client-welcome {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .frameup-client-welcome-action {
        width:
            100%;
    }


    .frameup-client-welcome-action a {
        width:
            100%;

        justify-content:
            center;
    }


    .frameup-client-explore {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            25px;
    }


    /* =====================================================
       PROYECTO
    ====================================================== */

    .frameup-project-layout,
    .frameup-result-layout {
        grid-template-columns:
            1fr;
    }


    .frameup-project-sidebar,
    .frameup-result-sidebar {
        position:
            static;
    }


    .frameup-project-sidebar {
        display:
            grid;

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


    /* =====================================================
       EQUIPO
    ====================================================== */

    .frameup-team-layout {
        grid-template-columns:
            1fr;
    }


    .frameup-team-sidebar {
        position:
            static;
    }


    /* =====================================================
       CONTACTO
    ====================================================== */

    .frameup-contact-layout {
        grid-template-columns:
            1fr;
    }


    .frameup-contact-professional {
        position:
            static;
    }


}


/* =========================================================
   CELULAR / TABLET PEQUEÑA
   700px
========================================================= */

@media (max-width: 700px) {


    /* =====================================================
       BASE
    ====================================================== */

    body {
        font-size:
            14px;
    }


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

    .header {
        padding:
            10px 15px;
    }


    .logo img {
        width:
            118px;

        max-height:
            44px;
    }


    .acciones a,
    .acciones button {
        padding:
            9px 11px;

        font-size:
            10px;
    }


    .header .nav {
        margin-left:
            -15px;

        margin-right:
            -15px;

        width:
            calc(100% + 30px);

        padding:
            9px 15px 5px;
    }


    /* =====================================================
       HOME
    ====================================================== */

    .frameup-hero {
        min-height:
            auto;

        padding:
            65px 20px;
    }


    .frameup-hero h1 {
        font-size:
            clamp(
                39px,
                12vw,
                56px
            );

        letter-spacing:
            -1.8px;
    }


    .frameup-buscador {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .frameup-buscador input,
    .frameup-buscador button {
        width:
            100%;
    }


    .frameup-producciones,
    .frameup-como-funciona {
        width:
            calc(100% - 30px);

        padding:
            60px 0;
    }


    .frameup-producciones-grid,
    .frameup-pasos-grid {
        grid-template-columns:
            1fr;
    }


    .frameup-seccion-titulo {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frameup-profesional-cta {
        width:
            calc(100% - 30px);

        padding:
            30px 22px;
    }


    /* =====================================================
       CATÁLOGO
    ====================================================== */

    .pagina-profesionales {
        padding:
            38px 15px 70px;
    }


    .profesionales-encabezado {
        margin-bottom:
            28px;
    }


    .profesionales-encabezado h1 {
        font-size:
            36px;
    }


    .profesionales-encabezado > p:last-child {
        font-size:
            15px;
    }


    .filtros-profesionales {
        grid-template-columns:
            1fr;

        gap:
            9px;

        margin-bottom:
            25px;
    }


    #buscar-profesional,
    #filtro-disponibilidad {
        grid-column:
            auto;
    }


    .grid-profesionales {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .tarjeta-profesional {
        width:
            100%;
    }


    .profesional-contenido {
        padding:
            0 20px 22px;
    }


    .frameup-team-context {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            20px;
    }


    .frameup-team-context-actions {
        width:
            100%;

        flex-wrap:
            wrap;
    }


    .frameup-team-context-link {
        flex:
            1;
    }


    /* =====================================================
       PERFIL
    ====================================================== */

    .frameup-profile-v2 {
        width:
            calc(100% - 30px);

        margin:
            0 auto;
    }


    .frameup-profile-hero {
        min-height:
            auto;
    }


    .frameup-profile-hero-content {
        padding:
            30px 20px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frameup-profile-identidad {
        width:
            100%;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frameup-profile-avatar {
        width:
            90px;

        height:
            90px;
    }


    .frameup-profile-info h1,
    #perfil-nombre {
        font-size:
            35px;
    }


    .frameup-profile-actions {
        width:
            100%;

        flex-direction:
            column;
    }


    .frameup-profile-actions button,
    .frameup-profile-actions a {
        width:
            100%;

        justify-content:
            center;
    }


    .frameup-profile-nav {
        width:
            100%;

        padding:
            0 3px;
    }


    .frameup-profile-team-panel {
        grid-template-columns:
            1fr;

        padding:
            17px;
    }


    .frameup-profile-team-panel
    .frameup-team-add-button,
    .frameup-profile-team-view {
        width:
            100%;
    }


    .frameup-profile-card {
        padding:
            22px 18px;
    }


    .grid-portafolio {
        grid-template-columns:
            1fr;
    }


    /* REEL */

    .frameup-reel video {
        min-height:
            0 !important;

        height:
            auto !important;

        aspect-ratio:
            16 / 9;
    }


    /* CALENDARIO */

    .calendario-profesional {
        padding:
            15px;

        overflow-x:
            auto;
    }


    .calendario-semana,
    .calendario-dias {
        gap:
            4px;
    }


    .calendario-semana span {
        padding:
            5px 0;

        font-size:
            9px;
    }


    .calendario-dia {
        min-height:
            38px;

        border-radius:
            7px;

        font-size:
            10px;
    }


    .boton-mes {
        width:
            36px;

        height:
            36px;
    }


    .calendario-header h3 {
        font-size:
            16px;
    }


    /* =====================================================
       REGISTRO CLIENTE / PROFESIONAL
    ====================================================== */

    .frameup-auth-wrapper {
        width:
            calc(100% - 28px);

        padding:
            25px 0 60px;
    }


    .frameup-auth-brand {
        min-height:
            auto;

        padding:
            38px 25px;
    }


    .frameup-auth-brand h1 {
        font-size:
            38px;
    }


    .frameup-auth-content {
        padding:
            35px 22px;
    }


    .frameup-user-options {
        grid-template-columns:
            1fr;
    }


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

    .frameup-login-page {
        width:
            calc(100% - 28px);

        padding:
            25px 0 60px;
    }


    .frameup-login-brand {
        min-height:
            auto;

        padding:
            38px 25px;
    }


    .frameup-login-brand h1 {
        font-size:
            39px;
    }


    .frameup-login-content {
        padding:
            35px 22px;
    }


    .frameup-login-options {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


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

    .frameup-client-dashboard {
        width:
            calc(100% - 30px);

        margin:
            0 auto;
    }


    .frameup-client-welcome {
        padding:
            30px 22px;
    }


    .frameup-client-welcome h1 {
        font-size:
            38px;
    }


    .frameup-client-paths,
    .frameup-client-process {
        grid-template-columns:
            1fr;
    }


    .frameup-client-section {
        padding:
            25px 0;
    }


    .frameup-client-section-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }


    .frameup-client-explore {
        padding:
            30px 22px;
    }


    .frameup-saved-projects {
        grid-template-columns:
            1fr;
    }


    /* =====================================================
       CREACIÓN DE PROYECTO
    ====================================================== */

    .frameup-project-page {
        width:
            calc(100% - 30px);

        padding:
            30px 0 70px;
    }


    .frameup-project-intro {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            18px;
    }


    .frameup-project-intro h1 {
        font-size:
            40px;
    }


    .frameup-project-back {
        width:
            100%;
    }


    .frameup-project-sidebar {
        grid-template-columns:
            1fr;
    }


    .frameup-project-section-header {
        padding:
            22px 18px;
    }


    .frameup-project-section-content {
        padding:
            22px 18px;
    }


    .frameup-production-grid {
        grid-template-columns:
            1fr;
    }


    .frameup-project-grid-2 {
        grid-template-columns:
            1fr;
    }


    .frameup-radio-options {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .frameup-radio-option,
    .frameup-radio-option label {
        width:
            100%;
    }


    .frameup-project-submit {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            25px 20px;
    }


    .frameup-project-submit button {
        width:
            100%;
    }


    /* =====================================================
       RESULTADO / ORIENTACIÓN
    ====================================================== */

    .frameup-result-page {
        width:
            calc(100% - 30px);

        padding:
            30px 0 70px;
    }


    .frameup-result-hero {
        padding:
            34px 22px;
    }


    .frameup-result-hero h1 {
        font-size:
            38px;
    }


    .frameup-role-list {
        grid-template-columns:
            1fr;
    }


    .frameup-result-summary {
        grid-template-columns:
            1fr;
    }


    .frameup-result-card {
        padding:
            23px 18px;
    }


    /* =====================================================
       EQUIPO
    ====================================================== */

    .frameup-team-page {
        width:
            calc(100% - 30px);

        padding:
            30px 0 70px;
    }


    .frameup-team-hero {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            33px 22px;
    }


    .frameup-team-hero h1 {
        font-size:
            38px;
    }


    .frameup-team-hero-action {
        width:
            100%;
    }


    .frameup-team-project-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .frameup-team-progress-top {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .frameup-team-section {
        padding:
            22px 17px;
    }


    .frameup-team-role-row {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .frameup-team-role-search {
        width:
            100%;
    }


    .frameup-team-member-actions {
        flex-direction:
            column;
    }


    /* =====================================================
       CONTACTO
    ====================================================== */

    .frameup-contact-page {
        width:
            calc(100% - 30px);

        padding:
            30px 0 70px;
    }


    .frameup-contact-intro h1 {
        font-size:
            39px;
    }


    .frameup-contact-card {
        padding:
            23px 18px;
    }


    .frameup-contact-grid {
        grid-template-columns:
            1fr;
    }


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

    .panel-profesional {
        width:
            calc(100% - 30px);

        padding:
            40px 0 70px;
    }


    .panel-profesional-bienvenida {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .panel-resumen-profesional,
    .panel-acciones-grid {
        grid-template-columns:
            1fr;
    }


    .panel-titulo-seccion {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .solicitud-card {
        grid-template-columns:
            1fr;
    }


    .solicitud-datos {
        grid-template-columns:
            1fr;
    }


    .solicitud-acciones {
        flex-direction:
            column;
    }


    .btn-aceptar-solicitud,
    .btn-rechazar-solicitud {
        width:
            100%;
    }


    /* =====================================================
       CONFIGURACIÓN PROFESIONAL
    ====================================================== */

    .configuracion-layout,
    .configuracion-grid,
    .bloque-configuracion,
    .dos-columnas-formulario {
        grid-template-columns:
            1fr;
    }


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


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

    .frameup-footer {
        padding:
            35px 20px;
    }


    .frameup-footer-marca img {
        width:
            135px;
    }


}


/* =========================================================
   CELULAR PEQUEÑO
   480px
========================================================= */

@media (max-width: 480px) {


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

    .logo img {
        width:
            105px;
    }


    .acciones a,
    .acciones button {
        min-height:
            36px;

        padding:
            7px 9px;

        font-size:
            9px;
    }


    .header .nav a {
        font-size:
            11px;
    }


    /* =====================================================
       HOME
    ====================================================== */

    .frameup-hero {
        padding:
            55px 16px;
    }


    .frameup-hero h1 {
        font-size:
            38px;
    }


    .frameup-hero p {
        font-size:
            14px;
    }


    /* =====================================================
       PERFIL
    ====================================================== */

    .frameup-profile-v2 {
        width:
            calc(100% - 22px);
    }


    .frameup-profile-info h1,
    #perfil-nombre {
        font-size:
            31px;
    }


    .calendario-profesional {
        padding:
            10px;
    }


    .calendario-semana,
    .calendario-dias {
        gap:
            2px;
    }


    .calendario-dia {
        min-height:
            32px;

        font-size:
            9px;
    }


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

    .frameup-login-type {
        grid-template-columns:
            1fr;
    }


    /* =====================================================
       EQUIPO
    ====================================================== */

    .frameup-team-project-summary {
        grid-template-columns:
            1fr;
    }


    /* =====================================================
       PROYECTOS GUARDADOS
    ====================================================== */

    .frameup-saved-project-head {
        flex-direction:
            column;
    }


    .frameup-saved-project-info {
        grid-template-columns:
            1fr;
    }


    .frameup-saved-project-actions {
        grid-template-columns:
            1fr;
    }


    .frameup-project-delete {
        grid-column:
            auto;
    }


    /* =====================================================
       PORTAFOLIO PROFESIONAL
    ====================================================== */

    .dias-disponibilidad {
        grid-template-columns:
            1fr;
    }


    /* =====================================================
       BOTONES GRANDES EN CELULAR
    ====================================================== */

    .btn-principal,
    .btn-secundario,
    .btn-contactar,
    .btn-guardar,
    .frameup-client-main-button {
        max-width:
            100%;
    }


}/* =========================================================
   FRAMEUP
   AJUSTES FINALES DE IDENTIDAD
========================================================= */

:root {

    --frameup-orange:
        #ED6B27;

    --frameup-orange-hover:
        #D85A1C;

    --frameup-black:
        #1D1E1D;

    --frameup-background:
        #EFEDEA;

    --frameup-white:
        #FFFFFF;

}


/* =========================================================
   TIPOGRAFÍA
========================================================= */

body,
button,
input,
select,
textarea {

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

}


h1,
h2,
h3 {

    font-weight:
        900;

}


.nav a,
button,
.btn-principal,
.btn-secundario,
.btn-contactar,
.btn-guardar {

    font-weight:
        600;

}


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

   No reconstruimos ni modificamos
   artificialmente el logotipo.
========================================================= */

.logo img,
.frameup-footer-marca img {

    filter:
        none;

}/* =====================================================
   MEJORA 16
   ESTADO VACÍO - SOLO PORTAFOLIO
===================================================== */

#portafolio .estado-vacio-perfil {
    width: 100%;
    min-height: 300px;

    padding: 45px 25px;

    border: 1px dashed #d9dde1;
    border-radius: 16px;

    background-color: #fafafa;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}


#portafolio .estado-vacio-perfil[hidden] {
    display: none !important;
}


/* ICONO */

#portafolio .estado-vacio-icono {
    width: 68px;
    height: 68px;

    margin-bottom: 18px;

    border-radius: 18px;

    background-color:
        rgba(243, 107, 33, 0.10);

    display: flex;

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


#portafolio .estado-vacio-icono svg {
    width: 32px;
    height: 32px;

    fill: none;

    stroke: #f36b21;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ETIQUETA */

#portafolio .estado-vacio-etiqueta {
    margin-bottom: 8px;

    color: #f36b21;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* TITULO */

#portafolio .estado-vacio-perfil h3 {
    max-width: 500px;

    margin: 0 0 10px;

    color: #202020;

    font-size: 22px;

    line-height: 1.3;
}


/* DESCRIPCION */

#portafolio .estado-vacio-perfil p {
    max-width: 520px;

    margin: 0;

    color: #777;

    font-size: 14px;

    line-height: 1.6;
}


/* BOTON */

#portafolio .btn-estado-vacio {
    margin-top: 22px;

    padding: 13px 20px;

    border: none;

    border-radius: 10px;

    background-color: #f36b21;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    transition: 0.2s ease;
}


#portafolio .btn-estado-vacio:hover {
    background-color: #db5917;

    transform: translateY(-1px);
}


/* TEXTO PEQUEÑO */

#portafolio .estado-vacio-perfil small {
    max-width: 450px;

    margin-top: 14px;

    color: #999;

    font-size: 11px;

    line-height: 1.5;
}


/* RESPONSIVE */

@media (max-width: 600px) {

    #portafolio .estado-vacio-perfil {
        min-height: 270px;

        padding: 35px 20px;
    }


    #portafolio .estado-vacio-perfil h3 {
        font-size: 19px;
    }


    #portafolio .btn-estado-vacio {
        width: 100%;
    }

}