/* yoficho.es - portada renovada, siguiendo el lenguaje visual de SOL-CLI 2.0 */

.sol-skip-link{
    position:absolute;
    left:-9999px;
    top:10px;
    z-index:9999;
    padding:10px 14px;
    background:#0d3b66;
    color:#fff;
    border-radius:6px;
    font-weight:700;
}
.sol-skip-link:focus{
    left:10px;
    outline:3px solid #23c6c8;
}
a:focus,
button:focus,
.btn:focus{
    outline:3px solid #23c6c8 !important;
    outline-offset:3px;
}

/* Navbar */
.gt-navbar{
    /* 28/10/2026: puntos muy suaves y una esfera de reloj en el hueco del centro (como la «o» del logo); raya turquesa abajo */
    background-color:#0d3b66;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%20420%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3Cg%20stroke-opacity%3D%22.09%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22210%22%20r%3D%22176%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22210%22%20r%3D%22120%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22210%22%20r%3D%2264%22%2F%3E%3C%2Fg%3E%3Cg%20stroke-opacity%3D%22.14%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2252%22%20transform%3D%22rotate%280%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%2830%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%2860%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2252%22%20transform%3D%22rotate%2890%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%28120%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%28150%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2252%22%20transform%3D%22rotate%28180%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%28210%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%28240%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2252%22%20transform%3D%22rotate%28270%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%28300%20210%20210%29%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%2234%22%20x2%3D%22210%22%20y2%3D%2244%22%20transform%3D%22rotate%28330%20210%20210%29%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%2323c6c8%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%22210%22%20y1%3D%22210%22%20x2%3D%22210%22%20y2%3D%22120%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%22210%22%20x2%3D%22272%22%20y2%3D%22248%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px);
    background-repeat:no-repeat, repeat;
    background-size:300px 300px, 18px 18px;
    background-position:left 38% center, 0 0;
    border:0;
    border-bottom:3px solid #23c6c8;
    margin-bottom:0;
    box-shadow:0 4px 18px rgba(13,59,102,.18);
}
.gt-navbar .navbar-brand{
    padding:14px 15px;
}
.gt-navbar .navbar-nav > li > a{
    color:#e7f0fa;
    font-weight:600;
    padding-top:22px;
}
.gt-navbar .navbar-nav > li > a:hover,
.gt-navbar .navbar-nav > li > a:focus{
    color:#fff;
    background:transparent;
}
.gt-nav-login{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:14px;
    background:#1c84c6;
    color:#fff !important;
    border-radius:999px;
    padding:8px 18px;
    font-weight:700;
}
/* 27/10/2026: con el selector del menú delante, si no el «fondo transparente» del menú lo dejaba invisible */
.gt-navbar .navbar-nav > li > a.gt-nav-login:hover,
.gt-navbar .navbar-nav > li > a.gt-nav-login:focus{
    background:#23c6c8;
    color:#0d3b66 !important;
}

/* Hero */
.gt-hero{
    padding:140px 0 70px;
    background:linear-gradient(135deg,#0d3b66,#1c84c6 65%,#23c6c8);
    color:#fff;
}
.gt-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);
    font-weight:700;
    font-size:13px;
    letter-spacing:.3px;
}
.gt-hero h1{
    font-size:42px;
    font-weight:900;
    margin:0 0 4px;
    line-height:1.15;
}
.gt-hero h1 span{
    color:#50CAFC;
}
.gt-hero p{
    font-size:17px;
    line-height:1.65;
    color:rgba(255,255,255,.92);
    max-width:560px;
}
.gt-hero-clock{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    font-weight:700;
    font-size:14px;
}
.gt-hero-clock i{
    color:#50CAFC;
}

.gt-btn-main{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-height:64px;
    padding:0 30px;
    margin-top:26px;
    border-radius:16px;
    background:#fff;
    color:#0d3b66 !important;
    font-weight:900;
    text-transform:uppercase;
    text-decoration:none !important;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
    transition:all .2s ease;
}
.gt-btn-main:hover,
.gt-btn-main:focus{
    transform:translateY(-3px);
    box-shadow:0 22px 46px rgba(0,0,0,.28);
    color:#0d3b66 !important;
}
.gt-btn-main i{
    font-size:28px;
    color:#1c84c6;
}
.gt-btn-main .gt-btn-sub{
    display:block;
    font-size:11px;
    font-weight:600;
    text-transform:none;
    color:#676a6c;
    margin-top:2px;
}
.gt-btn-main.gt-btn-off{
    background:#e2453c;
    color:#fff !important;
}
.gt-btn-main.gt-btn-off i{
    color:#fff;
}
.gt-btn-main.gt-btn-off .gt-btn-sub{
    color:rgba(255,255,255,.8);
}

.gt-hero-visual{
    text-align:center;
}
.gt-hero-visual img{
    max-width:100%;
    border-radius:22px;
    box-shadow:0 30px 60px rgba(0,0,0,.28);
}

/* Aviso de fichaje correcto (tras cerrar sesión automáticamente) */
.gt-aviso-ok{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
    padding:16px 20px;
    border-radius:14px;
    background:rgba(46,204,113,.16);
    border:1px solid rgba(46,204,113,.4);
    font-size:15px;
    font-weight:600;
}
.gt-aviso-ok i{
    font-size:26px;
    color:#2ecc71;
    flex:none;
}

/* Aviso legal */
.gt-legal-strip{
    margin-top:34px;
    padding:18px 22px;
    border-left:5px solid #50CAFC;
    border-radius:12px;
    background:rgba(255,255,255,.10);
    font-size:14px;
    line-height:1.6;
}
.gt-legal-strip mark{
    background:#50CAFC;
    color:#0d3b66;
    padding:1px 6px;
    border-radius:4px;
    font-weight:700;
}

/* Features */
.sol-access-section{
    background:#f7f9fb;
    padding:70px 0;
}
.sol-access-section h2{
    text-align:center;
    color:#0d3b66;
    font-weight:900;
    margin-bottom:10px;
}
.sol-access-section > .container > p{
    text-align:center;
    color:#676a6c;
    max-width:620px;
    margin:0 auto 40px;
}
.sol-icon{
    width:74px;
    height:74px;
    margin:0 auto 18px auto;
    border-radius:50%;
    background:linear-gradient(135deg,#1c84c6,#23c6c8);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 30px rgba(28,132,198,.25);
    transition:all .3s ease;
}
.gt-feature-card{
    min-height:220px;
    margin-bottom:24px;
    padding:30px 22px;
    text-align:center;
    border-radius:18px;
    background:#fff;
    border:1px solid #e7eaec;
    box-shadow:0 14px 36px rgba(30,40,60,.07);
}
.gt-feature-card:hover .sol-icon{
    transform:translateY(-5px) scale(1.08);
    box-shadow:0 18px 40px rgba(28,132,198,.35);
}
.sol-icon i{
    font-size:32px;
    color:#fff;
    line-height:1;
}
.gt-feature-card h4{
    color:#0d3b66;
    font-weight:800;
    margin-top:0;
}
.gt-feature-card p{
    color:#676a6c;
    font-size:14px;
    margin:0;
}

/* Footer */
.gt-footer{
    padding:28px 0;
    background:#0d3b66;
    color:rgba(255,255,255,.85);
    font-size:13px;
}
.gt-footer a{
    color:#50CAFC;
}

/* WhatsApp flotante */
.sol-whatsapp-float{
    position:fixed;
    right:22px;
    bottom:26px;
    z-index:9998;
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:12px 18px;
    border-radius:999px;
    background:#25d366;
    color:#083b1c !important;
    font-weight:800;
    text-decoration:none !important;
    box-shadow:0 14px 32px rgba(0,0,0,.22);
    border:2px solid rgba(255,255,255,.85);
}
.sol-whatsapp-float:hover,
.sol-whatsapp-float:focus{
    color:#062d15 !important;
    transform:translateY(-2px);
}
.sol-whatsapp-float i{
    font-size:24px;
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

@media (max-width: 900px){
    .gt-hero{
        padding:130px 0 50px;
        text-align:center;
    }
    .gt-hero p{
        margin-left:auto;
        margin-right:auto;
    }
    .gt-hero-visual{
        margin-top:40px;
    }
    .gt-feature-card:hover .sol-icon{
        transform:none;
    }
}

/* 27/10/2026: móvil. Botón de menú visible sobre el azul y la portada empieza debajo de la cabecera */
.gt-navbar .navbar-toggle{ border-color:rgba(255,255,255,.55); margin-top:16px; }
.gt-navbar .navbar-toggle .icon-bar{ background:#fff; }
.gt-navbar .navbar-toggle:hover,
.gt-navbar .navbar-toggle:focus{ background:rgba(255,255,255,.12); }
.gt-navbar .navbar-collapse{ border-color:rgba(255,255,255,.15); box-shadow:none; }
@media (max-width: 767px){
    .gt-hero{ padding-top:160px; }
    .gt-navbar .navbar-nav > li > a{ padding-top:10px; padding-bottom:10px; }
    .gt-nav-login{ margin:8px 15px 14px; }
}