html, body{
margin:0;
padding:0;
}

/* RESET */

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

/* BODY */

body{
font-family:Arial, Helvetica, sans-serif;
background:#7FB3C2;
color:#222;
}

/* CONTAINER */

.container{
max-width:1280px;
margin:0 auto;
padding:30px 40px;
}

/* HEADER */

.header{
background:white;
border-bottom:1px solid #eee;
padding:16px max(24px, calc((100% - 1180px) / 2 + 24px));
display:flex;
align-items:center;
justify-content:space-between;
height:70px;
}

.header-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}

.logo img{
height:42px;
}

/* FORMULARIOS */

input,button{
width:100%;
padding:10px;
margin-top:10px;
font-size:16px;
}

button{
background:#254957;
color:white;
border:none;
cursor:pointer;
border-radius:8px;
}

button:hover{
background:#1e3b45;
}

/* HERO */

.hero{
width:100%;
min-height:520px;

margin-top:20px;

background-size:cover;
background-color:#e9ecef;

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

position:relative;
}

/* OVERLAY OSCURO */

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.22);
z-index:1;
}

/* TEXTO HERO */

.hero-content{
position:relative;
z-index:2;
text-align:center;
color:white;
max-width:800px;
padding:20px;
}

.hero-content h1{
font-size:56px;
margin-bottom:18px;
}

.hero-content p{
font-size:24px;
margin-bottom:25px;
}

/* BOTÓN HERO */

.hero-button{
background:#254957;
color:#ffffff;
padding:16px 36px;
text-decoration:none;
border-radius:8px;
font-size:18px;
display:inline-block;
}

.hero-button{
    position:relative;
    z-index:1;
}

.hero-button:hover{
background:#1e3b45;
}

/* BENEFICIOS HERO */

.hero-benefits{
margin-top:24px;
font-size:18px;
line-height:1.7;
color:white;
}

/* TITULOS */

.titulo-home{
text-align:center;
margin:10px 0 25px 0;
font-size:28px;
}

/* GRID ACUERDOS */

.acuerdos-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:20px;
}

/* TARJETAS */

.acuerdo-card{
background:white;
padding:24px;
border-radius:12px;
text-decoration:none;
color:#222;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:all .2s ease;
text-align:center;
}

.acuerdo-card:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

.acuerdo-icon{
font-size:30px;
margin-bottom:12px;
}

/* CONTRATO */

.contrato{
background:#f8f9fb;
padding:25px;
margin-top:20px;
border-radius:8px;
line-height:1.6;
font-size:15px;
border:1px solid #e3e6ea;
white-space:pre-line;
}

.contrato h3{
margin-top:25px;
}

.contrato p{
margin:10px 0;
}

/* LOGOUT */

.logout{
background:#254957;
color:white;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
font-size:14px;
display:inline-block;
}

.logout:hover{
background:#1e3b45;
}

/* ESPACIO ENTRE HERO Y PRIMER BLOQUE */

.hero + .container{
padding-top:20px;
}

.android-app-cta{
background:#ffffff;
border:1px solid rgba(37,73,87,0.14);
border-radius:18px;
box-shadow:0 14px 34px rgba(0,0,0,0.08);
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:24px 28px;
margin:0 0 34px 0;
}

.android-app-kicker{
display:inline-block;
font-size:13px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
color:#007f86;
margin-bottom:8px;
}

.android-app-cta h2{
font-size:28px;
color:#254957;
margin:0 0 8px 0;
}

.android-app-cta p{
font-size:17px;
line-height:1.5;
color:#4f626a;
margin:0;
max-width:640px;
}

.android-app-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
min-width:250px;
}

.android-app-button{
background:#254957;
color:#ffffff;
text-decoration:none;
border-radius:10px;
padding:14px 22px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
white-space:nowrap;
box-shadow:0 10px 22px rgba(37,73,87,0.2);
}

.android-app-play-icon{
width:22px;
height:22px;
display:block;
flex:0 0 22px;
}

.android-app-button:hover{
background:#1e3b45;
}

@media(max-width:768px){
.android-app-cta{
flex-direction:column;
align-items:flex-start;
padding:22px;
}
}

/* WEB-02: home publica */
.home-desktop-nav{
display:flex;
align-items:center;
gap:22px;
}

.home-desktop-nav a,
.home-login-link{
color:var(--pg-ink);
font-size:14px;
font-weight:600;
text-decoration:none;
white-space:nowrap;
}

.home-header-actions{
gap:18px;
}

.home-page{
background:var(--pg-bg);
color:var(--pg-ink);
overflow:hidden;
}

.home-wrap{
width:min(100% - 48px,1180px);
margin:0 auto;
}

.home-hero{
background:var(--pg-surface);
}

.home-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
align-items:center;
gap:64px;
padding-top:64px;
padding-bottom:72px;
}

.home-hero-copy{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:22px;
}

.home-pill,
.home-phone-pill{
display:inline-flex;
align-items:center;
padding:7px 12px;
border-radius:999px;
background:var(--pg-soft);
color:var(--pg-primary);
font-size:13px;
font-weight:700;
}

.home-hero h1{
max-width:760px;
margin:0;
font-size:clamp(38px,5vw,58px);
line-height:1.06;
letter-spacing:-.03em;
font-weight:800;
}

.home-lead{
max-width:650px;
margin:0;
color:var(--pg-muted);
font-size:18px;
line-height:1.65;
}

.home-actions{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.pg-button{
min-height:54px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:0 26px;
border:1px solid var(--pg-primary);
border-radius:14px;
background:var(--pg-primary);
color:#fff;
font-size:16px;
font-weight:700;
text-decoration:none;
}

.pg-button:hover{
background:var(--pg-primary-hover);
color:#fff;
}

.pg-button svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}

.pg-button-secondary{
background:#fff;
color:var(--pg-primary);
border-color:var(--pg-border);
}

.pg-button-secondary:hover{
background:var(--pg-soft);
color:var(--pg-primary-hover);
}

.home-guarantees{
display:flex;
gap:20px;
flex-wrap:wrap;
color:var(--pg-muted);
font-size:13px;
font-weight:600;
}

.home-guarantees span::first-letter{
color:var(--pg-success);
}

.home-phone-wrap{
display:flex;
justify-content:center;
}

.home-phone{
width:300px;
max-width:100%;
padding:12px;
border-radius:36px;
background:var(--pg-ink);
box-shadow:0 24px 60px rgba(18,63,77,.22);
}

.home-phone-screen{
display:flex;
flex-direction:column;
gap:12px;
padding:18px 14px;
border-radius:26px;
background:var(--pg-bg);
}

.home-phone-pill{
align-self:flex-start;
padding:5px 9px;
font-size:11px;
}

.home-phone-screen>strong{
font-size:18px;
line-height:1.3;
font-weight:800;
}

.home-phone-summary{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:12px;
border:1px solid var(--pg-border);
border-radius:14px;
background:#fff;
}

.home-phone-summary span{
display:flex;
flex-direction:column;
gap:2px;
}

.home-phone-summary small{
color:var(--pg-muted);
font-size:9px;
font-weight:700;
letter-spacing:.06em;
}

.home-phone-summary b{
font-size:14px;
}

.home-phone-screen>p{
margin:0;
padding:12px;
border:1px solid var(--pg-border);
border-radius:14px;
background:#fff;
color:#1e3b45;
font-family:"Source Serif 4",Georgia,serif;
font-size:13px;
line-height:1.55;
}

.home-phone-button{
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:var(--pg-primary);
color:#fff;
font-size:14px;
font-weight:700;
}

.home-section{
padding:80px 0;
}

.home-section-white{
background:#fff;
}

.home-eyebrow{
display:block;
margin-bottom:10px;
color:#4a7c86;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}

.home-section h2,
.home-final-cta h2{
max-width:720px;
margin:0 0 36px;
font-size:clamp(28px,3.4vw,40px);
line-height:1.15;
letter-spacing:-.02em;
font-weight:800;
}

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

.home-steps article,
.home-trust-grid article{
padding:26px;
border:1px solid var(--pg-border);
border-radius:20px;
background:#fff;
}

.home-steps article>span{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
border-radius:50%;
background:var(--pg-primary);
color:#fff;
font-weight:800;
}

.home-steps h3,
.home-case h3,
.home-trust-grid h3{
margin:0 0 8px;
font-size:19px;
line-height:1.3;
font-weight:800;
}

.home-steps p,
.home-trust-grid p{
margin:0;
color:var(--pg-muted);
font-size:15px;
line-height:1.6;
}

.home-cases{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}

.home-case{
display:flex;
flex-direction:column;
gap:12px;
padding:22px;
border:1px solid var(--pg-border);
border-radius:20px;
background:#fff;
color:var(--pg-ink);
text-decoration:none;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.home-case:hover{
transform:translateY(-3px);
border-color:var(--pg-primary);
box-shadow:var(--pg-shadow);
color:var(--pg-ink);
}

.home-case-featured{
border-color:#9fc9c4;
background:linear-gradient(180deg,#fff 0%,#f6fbfa 100%);
}

.home-icon{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 44px;
border-radius:12px;
background:var(--pg-soft);
color:var(--pg-primary);
}

.home-icon svg{
width:22px;
height:22px;
}

.home-case em{
min-height:48px;
color:#1e3b45;
font-family:"Source Serif 4",Georgia,serif;
font-size:16px;
line-height:1.5;
}

.home-case b{
margin-top:auto;
color:var(--pg-primary);
font-size:14px;
}

.home-trust{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:48px;
align-items:start;
}

.home-trust h2{
margin-bottom:18px;
}

.home-trust small{
display:block;
margin-top:18px;
color:var(--pg-muted);
font-size:13px;
line-height:1.6;
}

.home-trust-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.home-trust-grid article{
display:flex;
gap:14px;
padding:20px;
}

.home-trust-grid h3{
font-size:16px;
}

.home-trust-grid p{
font-size:14px;
}

.home-faq{
max-width:860px;
}

.home-faq h2{
margin-bottom:28px;
}

.home-faq-list{
display:flex;
flex-direction:column;
gap:12px;
}

.home-faq details{
padding:0 20px;
border:1px solid var(--pg-border);
border-radius:16px;
background:#fff;
}

.home-faq summary{
padding:20px 28px 20px 0;
cursor:pointer;
font-size:17px;
font-weight:700;
list-style:none;
position:relative;
}

.home-faq summary::-webkit-details-marker{
display:none;
}

.home-faq summary::after{
content:"+";
position:absolute;
right:2px;
top:18px;
font-size:22px;
line-height:1;
}

.home-faq details[open] summary::after{
content:"−";
}

.home-faq details p{
margin:0 0 20px;
color:var(--pg-muted);
font-size:15px;
line-height:1.65;
}

.home-final-cta{
padding:72px 0;
background:var(--pg-ink);
color:#fff;
}

.home-final-cta .home-wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
}

.home-final-cta h2{
margin-bottom:10px;
color:#fff;
}

.home-final-cta p{
margin:0;
color:#cfe3e7;
font-size:18px;
}

.pg-button-light{
background:#fff;
border-color:#fff;
color:var(--pg-ink);
}

.pg-button-light:hover{
background:var(--pg-soft);
color:var(--pg-ink);
}

.pg-button-outline{
background:transparent;
border-color:#6b8f99;
color:#fff;
}

@media(max-width:1000px){
    .home-desktop-nav,
    .home-login-link{
        display:none;
    }

    .home-hero-grid,
    .home-trust{
        grid-template-columns:1fr;
    }

    .home-hero-copy{
        align-items:center;
        text-align:center;
    }

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

@media(max-width:768px){
    .home-wrap{
        width:min(100% - 32px,1180px);
    }

    .home-header-actions .login{
        display:none;
    }

    .home-hero-grid{
        gap:42px;
        padding-top:42px;
        padding-bottom:52px;
    }

    .home-hero h1{
        font-size:clamp(34px,10.5vw,44px);
    }

    .home-actions,
    .home-actions .pg-button{
        width:100%;
    }

    .home-guarantees{
        justify-content:center;
        gap:10px 16px;
    }

    .home-section{
        padding:56px 0;
    }

    .home-steps,
    .home-cases,
    .home-trust-grid{
        grid-template-columns:1fr;
    }

    .home-case em{
        min-height:0;
    }

    .home-final-cta .home-wrap{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:390px){
    .home-wrap{
        width:calc(100% - 28px);
    }

    .home-hero h1{
        font-size:34px;
    }

    .home-lead{
        font-size:16px;
    }

    .home-phone{
        width:286px;
    }

    .home-steps article,
    .home-case{
        padding:20px;
    }
}

/* WEB-01: sistema visual comu de PactaGo */
:root{
--pg-ink:#123f4d;
--pg-primary:#254957;
--pg-primary-hover:#123f4d;
--pg-muted:#5f737c;
--pg-bg:#f4f7f7;
--pg-surface:#ffffff;
--pg-border:#d6e3e5;
--pg-soft:#e8f4f2;
--pg-success:#1d5b4f;
--pg-radius-sm:12px;
--pg-radius:16px;
--pg-radius-lg:20px;
--pg-shadow:0 14px 34px rgba(18,63,77,.10);
}

html{
scroll-behavior:smooth;
}

body{
font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
background:var(--pg-bg);
color:var(--pg-ink);
line-height:1.5;
}

a{
color:var(--pg-primary);
}

a:hover{
color:var(--pg-primary-hover);
}

button,
input,
select,
textarea{
font:inherit;
}

button,
.hero-button,
.boton-verificacion,
.android-app-button{
border-radius:14px;
font-weight:700;
}

.header{
position:relative;
z-index:50;
min-height:72px;
height:auto;
padding:10px max(24px,calc((100% - 1180px)/2 + 24px));
background:var(--pg-surface);
border-bottom:1px solid var(--pg-border);
box-shadow:none;
}

.header .logo img{
width:auto;
height:38px !important;
display:block;
}

.header a.login,
.header a.logout,
.header a.perfil{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 18px;
border-radius:12px;
font-size:15px;
font-weight:700;
text-decoration:none;
}

.header a.login,
.header a.logout{
background:var(--pg-primary);
color:#fff;
}

.header a.perfil{
background:var(--pg-surface);
color:var(--pg-primary);
border:1px solid var(--pg-border);
}

.container{
max-width:1180px;
}

.acuerdo-card,
.feature-item,
.bloque-info,
.como-funciona-box,
.verify-card,
.verify-data-card{
border:1px solid var(--pg-border);
border-radius:var(--pg-radius-lg);
box-shadow:none;
}

.footer-custom{
margin-top:0;
padding:36px max(24px,calc((100% - 1180px)/2 + 24px));
background:#0d2f3a;
color:#cfe3e7;
border:0;
}

.footer-custom a{
color:#cfe3e7;
}

.footer-custom a:hover{
color:#fff;
}

@media(max-width:768px){
    .header{
        min-height:64px;
        padding:8px 16px;
    }

    .header .logo img{
        height:32px !important;
    }

    .container{
        padding-left:16px;
        padding-right:16px;
    }

    .footer-custom{
        padding:30px 16px;
    }
}

@media(max-width:768px){
.android-app-actions{
align-items:stretch;
width:100%;
min-width:0;
}

.android-app-button{
width:100%;
}

}

.android-landing-hero{
max-width:1180px;
margin:34px auto;
padding:46px;
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(280px,0.8fr);
gap:34px;
align-items:center;
background:#ffffff;
border:1px solid rgba(37,73,87,0.14);
border-radius:18px;
box-shadow:0 14px 34px rgba(0,0,0,0.08);
}

.android-landing-copy h1{
font-size:42px;
line-height:1.12;
color:#254957;
margin:0 0 16px;
}

.android-landing-copy p{
font-size:19px;
line-height:1.55;
color:#4f626a;
margin:0;
max-width:720px;
}

.android-landing-actions{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
margin-top:28px;
}

.android-landing-secondary{
color:#254957;
font-weight:700;
text-decoration:none;
padding:12px 0;
}

.android-landing-secondary:hover{
text-decoration:underline;
}

.android-landing-panel{
min-height:280px;
border-radius:16px;
background:linear-gradient(145deg,#eef8f8,#ffffff);
border:1px solid rgba(37,73,87,0.12);
display:flex;
align-items:center;
justify-content:center;
padding:28px;
text-align:center;
}

.android-landing-panel strong{
display:block;
font-size:26px;
color:#254957;
margin-bottom:10px;
}

.android-landing-panel span{
display:block;
color:#52656d;
font-size:16px;
line-height:1.5;
}

.android-landing-section{
margin-top:50px;
}

.android-landing-section h2{
font-size:32px;
color:#254957;
text-align:center;
margin-bottom:24px;
}

.android-landing-grid{
grid-template-columns:repeat(4,1fr);
}

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

.android-use-cases a{
background:#ffffff;
border:1px solid rgba(37,73,87,0.14);
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.06);
color:#254957;
font-weight:700;
padding:18px;
text-align:center;
text-decoration:none;
}

.android-use-cases a:hover{
transform:translateY(-2px);
box-shadow:0 12px 26px rgba(0,0,0,0.1);
}

.android-landing-note{
background:#ffffff;
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
padding:34px;
text-align:center;
margin-bottom:54px;
}

.android-landing-note p{
max-width:760px;
margin:0 auto 22px;
font-size:18px;
line-height:1.55;
color:#52656d;
}

.seo-faq{
margin:34px 0;
padding:28px;
background:#f8fbfb;
border:1px solid rgba(37,73,87,0.14);
border-radius:12px;
}

.seo-faq h2{
color:#254957;
font-size:26px;
margin:0 0 18px;
}

.seo-faq h3{
color:#254957;
font-size:18px;
margin:20px 0 8px;
}

.seo-faq p{
color:#4f626a;
font-size:16px;
line-height:1.55;
margin:0;
}

.home-seo-panel{
box-sizing:border-box;
width:calc(100% - 80px);
max-width:800px;
margin:34px auto 58px;
padding:34px;
background:#ffffff;
border:1px solid rgba(37,73,87,0.12);
border-radius:12px;
box-shadow:0 10px 28px rgba(0,0,0,0.07);
}

.home-seo-panel h2{
color:#254957;
font-size:26px;
line-height:1.2;
margin:0 0 14px;
}

.home-seo-panel h2:not(:first-child){
margin-top:30px;
}

.home-seo-panel p{
color:#394e57;
font-size:17px;
line-height:1.65;
margin:0 0 14px;
}

.home-seo-panel .ejemplo-box{
margin:18px 0 4px;
padding:20px 22px;
background:#f8fbfb;
border:1px solid rgba(37,73,87,0.12);
border-radius:10px;
}

.home-seo-panel .ejemplo-box p{
margin:0 0 8px;
font-size:16px;
line-height:1.45;
}

.home-seo-panel .ejemplo-box p:last-child{
margin-bottom:0;
}

.home-seo-panel a{
color:#254957;
font-weight:700;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
}

.home-seo-panel a:hover{
color:#007f8c;
}

@media(max-width:900px){
.android-landing-hero{
grid-template-columns:1fr;
margin:24px 18px;
padding:28px;
}

.android-landing-copy h1{
font-size:32px;
}

.android-landing-panel{
min-height:auto;
}

.android-landing-grid,
.android-use-cases{
grid-template-columns:1fr;
}

.home-seo-panel{
width:calc(100% - 32px);
margin:26px auto 42px;
padding:24px 20px;
}

.home-seo-panel h2{
font-size:23px;
}

.home-seo-panel p{
font-size:16px;
}
}

/* SECCIÓN COMO FUNCIONA */

.como-funciona{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
text-align:center;
margin-top:20px;
}

.como-funciona div{
font-size:15px;
}

/* FOOTER CORPORATIVO */

.footer{
background:#254957;
color:white;
padding:40px 20px;
text-align:center;
margin-top:60px;
font-size:14px;
}

.footer a{
color:#7FB3C2;
text-decoration:none;
}

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


/* CAJA COMO FUNCIONA */

.como-funciona-box{
background:white;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
padding:40px;
margin-top:30px;
}

/* GRID PASOS */

.como-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
text-align:center;
}

/* PASOS */

.paso{
padding:26px 20px 22px;
}

.paso h3{
margin-top:10px;
font-size:18px;
}

.paso p{
color:#666;
font-size:15px;
margin-top:6px;
}

/* NUMERO */

.paso-numero{
width:42px;
height:42px;
background:#7FB3C2;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
margin:0 auto 10px auto;
font-size:18px;
}

.boton-principal{
background:#254957;
color:white;
border:none;
padding:14px 20px;
border-radius:8px;
font-size:16px;
cursor:pointer;
width:100%;
}

.boton-principal:hover{
background:#1e3b45;
}
.login-box{
max-width:420px;
margin:80px auto;
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
text-align:center;
}

.login-box h1{
font-size:28px;
margin-bottom:10px;
}

.login-sub{
color:#666;
margin-bottom:25px;
font-size:15px;
}

.login-trust-box{
background:#f4f8f9;
border:1px solid #d9e7eb;
border-radius:8px;
color:#254957;
font-size:14px;
line-height:1.45;
margin:0 0 18px 0;
padding:14px 16px;
text-align:left;
}

.login-trust-box strong{
display:block;
font-size:14px;
margin-bottom:8px;
}

.login-trust-box ul{
list-style:none;
margin:0;
padding:0;
}

.login-trust-box li{
margin-top:5px;
padding-left:18px;
position:relative;
}

.login-trust-box li::before{
content:"✓";
color:#008c95;
font-weight:bold;
left:0;
position:absolute;
}
.login-trust-box li::before{
content:"\2713";
}

/* CookieYes: solo color corporativo de botones, sin alterar el banner */
.cky-consent-container .cky-btn-accept,
.cky-modal .cky-btn-accept {
    background-color: #254957 !important;
    border-color: #254957 !important;
    color: #ffffff !important;
}

.cky-consent-container .cky-btn-accept:hover,
.cky-modal .cky-btn-accept:hover {
    background-color: #1e3b45 !important;
    border-color: #1e3b45 !important;
}

.cky-consent-container .cky-btn-reject,
.cky-consent-container .cky-btn-customize,
.cky-modal .cky-btn-reject,
.cky-modal .cky-btn-preferences {
    background-color: #ffffff !important;
    border-color: #254957 !important;
    color: #254957 !important;
}

.cky-consent-container .cky-btn-reject:hover,
.cky-consent-container .cky-btn-customize:hover,
.cky-modal .cky-btn-reject:hover,
.cky-modal .cky-btn-preferences:hover {
    background-color: #f4f8f9 !important;
    border-color: #254957 !important;
    color: #254957 !important;
}

.cky-btn-revisit-wrapper {
    background-color: #254957 !important;
    border-color: #254957 !important;
}

.cky-btn-revisit-wrapper:hover {
    background-color: #1e3b45 !important;
    border-color: #1e3b45 !important;
}

.cky-btn-revisit-wrapper img {
    filter: brightness(0) invert(1) !important;
}

.invite-context-box{
background:#f4f8f9;
border:1px solid #d9e7eb;
border-radius:8px;
color:#254957;
font-size:14px;
line-height:1.45;
margin:0 0 18px 0;
padding:14px 16px;
text-align:left;
}

.invite-context-box span{
display:block;
font-size:12px;
font-weight:700;
letter-spacing:.03em;
margin-bottom:6px;
text-transform:uppercase;
}

.invite-context-box strong{
display:block;
font-size:17px;
line-height:1.3;
margin-bottom:6px;
}

.invite-context-box small{
display:block;
font-size:13px;
margin-bottom:8px;
}

.invite-context-box p{
margin:0;
}

.agreement-summary-card{
background:#f4f8f9;
border:1px solid #d9e7eb;
border-radius:10px;
color:#254957;
margin:0 0 22px 0;
padding:18px 20px;
text-align:left;
}

.agreement-summary-card h3{
font-size:20px;
margin:0 0 8px 0;
}

.agreement-summary-card p{
color:#52656f;
font-size:14px;
line-height:1.45;
margin:0 0 14px 0;
}

.agreement-summary-card dl{
display:grid;
gap:12px;
grid-template-columns:repeat(2,minmax(0,1fr));
margin:0;
}

.agreement-summary-card dt{
color:#52656f;
font-size:12px;
font-weight:700;
letter-spacing:.03em;
margin-bottom:4px;
text-transform:uppercase;
}

.agreement-summary-card dd{
font-size:15px;
font-weight:700;
margin:0;
}

.agreement-summary-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.agreement-summary-actions button{
    min-height:44px;
    padding:11px 18px;
    border-radius:8px;
    font-weight:600;
}

.agreement-reject-button{
    background:#fff;
    color:#a93226;
    border:1px solid #a93226;
    cursor:pointer;
}

.agreement-change-button[disabled]{
    background:#eef2f3;
    color:#68777d;
    border:1px solid #ccd6da;
    cursor:not-allowed;
    opacity:.75;
}

@media(max-width:700px){
    .agreement-summary-card dl{
        grid-template-columns:1fr;
    }
}

/* LOGIN */

.login-box input,
.login-box button{
width:100%;
padding:12px;
margin-top:10px;
font-size:16px;
box-sizing:border-box;
}

#codigo_box{
display:none;
}

#resultado{
margin-top:15px;
font-size:14px;
}

.login-message{
border-radius:8px;
line-height:1.45;
margin-top:16px;
padding:10px 12px;
text-align:left;
}

.login-message:empty{
display:none;
}

.login-message-info{
background:#f3fafb;
border:1px solid #cfe6ec;
color:#254957;
}

.login-message-error{
background:#fff4f2;
border:1px solid #f3b8af;
color:#8a1f11;
}

.login-seguridad{
margin-top:20px;
font-size:13px;
color:#777;
}

/* CREAR ACUERDO */

.acuerdo-box{
max-width:600px;
margin:40px auto 80px auto;
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.acuerdo-box h1,
.acuerdo-box h2{
text-align:center;
margin-bottom:25px;
font-size:28px;
}

.acuerdo-box input,
.acuerdo-box textarea,
.acuerdo-box select,
.acuerdo-box button{
width:100%;
padding:12px;
margin-top:12px;
font-size:16px;
box-sizing:border-box;
}

.acuerdo-box textarea{
min-height:120px;
resize:vertical;
}

.acuerdo-box button{
background:#254957;
color:white;
border:none;
cursor:pointer;
border-radius:8px;
}

.acuerdo-box button:hover{
background:#1e3b45;
}

#campos_dinamicos label{
margin-top:10px;
display:block;
font-weight:bold;
}

#resultado{
margin-top:20px;
font-size:14px;
}
/* PLACEHOLDERS UNIFORMES */

input::placeholder,
textarea::placeholder{
color:#888;
opacity:1;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color:#888;
}

input::-moz-placeholder,
textarea::-moz-placeholder{
color:#888;
}


/* =========================
PAGINAS ACUERDOS
========================= */

.acuerdo-hero{
max-width:1200px;
margin:0 auto;
padding:60px 40px;
}

.acuerdo-hero h1{
font-size:36px;
margin-bottom:20px;
color:#254957;
}

.acuerdo-hero p{
max-width:720px;
font-size:18px;
line-height:1.6;
color:#555;
}

.acuerdo-imagen{
max-width:1200px;
margin:40px auto;
}

.acuerdo-imagen img{
width:100%;
height:auto;
border-radius:10px;
display:block;
}

.acuerdo-box{
max-width:900px;
margin:40px auto 80px auto;
padding:20px 40px 60px 40px;
}

.acuerdo-box h2{
margin-top:40px;
color:#254957;
}

.acuerdo-box p{
color:#555;
line-height:1.6;
margin-top:10px;
}

.ejemplo-box{
background:#f5f6f8;
padding:25px;
border-radius:8px;
margin-top:20px;
}

.crear-box{
text-align:center;
margin-top:50px;
}

.crear-box a{
display:inline-block;
background:#254957;
color:white;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-size:18px;
}

.crear-box a:hover{
opacity:0.9;
}
/* botones header */

.header a.login,
.header a.logout{
background:#254957;
color:white;
padding:8px 16px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.header a.login:hover,
.header a.logout:hover{
opacity:0.9;
}

/* acciones header */

.header{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:15px 20px;
border-bottom:1px solid #eee;
}

.header .logo img{
height:40px;
}

.header a.login,
.header a.logout,
.header a.perfil{
background:#254957;
color:white;
padding:8px 16px;
border-radius:6px;
text-decoration:none;
font-size:14px;
display:inline-block;
}

.header a.perfil{
background:#7FB3C2;
color:#254957;
}

.header a.login:hover,
.header a.logout:hover,
.header a.perfil:hover{
opacity:0.9;
}

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

.perfil-container{
width:100%;
max-width:1400px;
margin:40px auto;
padding:20px 40px;
}

.perfil-datos{
background:#f5f6f8;
padding:20px;
border-radius:8px;
margin-bottom:40px;
}


/* =========================
LISTA ACUERDOS PERFIL
========================= */

.perfil-lista{
margin-top:20px;
}

.perfil-item{
padding:15px 0;
border-bottom:1px solid #eee;
}

.perfil-item strong{
display:block;
font-size:16px;
margin-bottom:6px;
}

.perfil-item a{
display:inline-block;
background:#254957;
color:white;
padding:6px 12px;
border-radius:5px;
text-decoration:none;
font-size:13px;
}

.perfil-item a:hover{
opacity:0.9;
}

.perfil-inicio{
display:inline-block;
margin-bottom:20px;
background:#254957;
color:white;
padding:6px 12px;
border-radius:5px;
text-decoration:none;
font-size:13px;
}

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

.perfil-form{
max-width:420px;
margin-top:20px;
}

.perfil-form input{
width:100%;
max-width:420px;
padding:8px;
margin-top:4px;
box-sizing:border-box;
}

.perfil-form label{
display:block;
margin-top:14px;
font-weight:600;
}


.perfil-layout{
display:grid;
grid-template-columns: 420px 1fr;
gap:40px;
align-items:start;
}

.perfil-form{
width:420px;
flex-shrink:0;
}

.perfil-acuerdos{
flex:1;
}

.perfil-inicio{
display:inline-block;
margin-bottom:20px;
background:#254957;
color:white;
padding:6px 12px;
border-radius:5px;
text-decoration:none;
font-size:13px;
}

.perfil-container h1{
margin-bottom:20px;
}

.perfil-inicio{
display:inline-block;
margin-bottom:30px;
background:#254957;
color:white;
padding:6px 12px;
border-radius:5px;
text-decoration:none;
font-size:13px;
}


/* HERO ACUERDOS */

.acuerdo-hero{
position:relative;
width:100%;
height:460px;
overflow:hidden;
margin-bottom:50px;
}

.acuerdo-hero img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

.acuerdo-hero-texto{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-width:650px;
color:#fff;
background:rgba(23,50,59,0.34);
backdrop-filter:blur(1px);
padding:22px 28px;
border-radius:8px;
text-align:center;
text-shadow:0 2px 8px rgba(0,0,0,0.55);
}

.acuerdo-hero-texto h1{
margin:0 0 10px 0;
font-size:36px;
color:#fff;
}

.acuerdo-hero-texto p{
margin:0;
font-size:16px;
line-height:1.5;
color:#fff;
}

.acuerdo-hero-cta{
margin-top:18px;
}

.acuerdo-hero .boton-crear-hero{
background:#fff;
border-color:#fff;
color:#254957;
text-shadow:none;
}

.acuerdo-hero .boton-crear-hero:hover{
background:#254957;
border-color:#254957;
color:#fff;
}

.volver-inicio{
max-width:1100px;
margin:20px auto 10px auto;
padding:0 20px;
}

.volver-inicio a{
text-decoration:none;
color:#254957;
font-weight:600;
font-size:16px;
}

.volver-inicio a:hover{
text-decoration:underline;
}


/* =========================
PAGINAS LEGALES
========================= */

.legal{
max-width:900px;
margin:60px auto;
background:white;
padding:50px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.legal h1{
font-size:34px;
margin-bottom:30px;
color:#254957;
}

.legal h2{
font-size:22px;
margin-top:40px;
margin-bottom:15px;
color:#254957;
}

.legal p{
font-size:16px;
line-height:1.7;
margin-bottom:18px;
color:#444;
}

.legal ul{
margin-left:20px;
margin-bottom:20px;
}

.legal li{
margin-bottom:10px;
line-height:1.6;
}


/* =========================
FOOTER LEGAL LINKS
========================= */

.footer-legal{
margin-bottom:12px;
}

.footer-legal a{
color:#254957;
text-decoration:none;
font-weight:600;
margin:0 8px;
font-size:14px;
}

.footer-legal a:hover{
text-decoration:underline;
opacity:0.8;
}

.footer-copy{
color:#254957;
font-size:13px;
opacity:0.8;
}



/* =========================
CONTRATO ESTILO DOCUMENTO
========================= */

.contrato{
background:#ffffff;

max-width:820px;
margin:40px auto;

padding:50px 70px;

font-family:"Times New Roman", Georgia, serif;
font-size:16px;
line-height:1.2;
color:#1a1a1a;

border:1px solid #d8d8d8;
border-radius:4px;

/* sombra hoja */
box-shadow:
0 2px 6px rgba(0,0,0,0.10),
0 12px 30px rgba(0,0,0,0.08);

/* ligero tono papel */
background-image:
linear-gradient(#ffffff,#fcfcfc);

position:relative;

white-space:normal;
}

/* línea superior tipo documento */

.contrato::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:6px;
background:#254957;
border-radius:4px 4px 0 0;
}

/* títulos */

.contrato h1,
.contrato h2,
.contrato h3{
text-align:center;
font-weight:600;
letter-spacing:0.5px;
margin-bottom:16px;
margin-top:0;
}

/* bloques de texto */

.contrato p{
margin-bottom:6px;
text-align:justify;
}

/* negritas */

.contrato strong{
font-weight:700;
}

/* separación mínima entre párrafos */

.contrato p + p{
margin-top:4px;
}


/* ESPACIO ENTRE HEADER Y CONTENIDO */

.volver-inicio{
margin-top:30px;
margin-bottom:20px;
}

/* BOTON REGISTRAR COLOR CORPORATIVO */

#registro-btn{
background:#254957;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

#registro-btn:hover{
background:#1e3b45;
}

/* separacion boton registrar */

#registro-btn{
margin-top:25px;
}



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

.registro-box{
max-width:500px;
margin:60px auto;
}

.registro-box input,
.registro-box button{
width:100%;
padding:10px;
margin-top:10px;
font-size:16px;
}

#resultado{
margin-top:20px;
}

/* REGISTRO USUARIO */

.registro-box{
max-width:520px;
margin:60px auto;
}

.registro-box input,
.registro-box button{
width:100%;
}

.acuerdo-box label{
display:block;
font-weight:600;
margin-top:18px;
margin-bottom:6px;
color:#222;
font-size:15px;
}

.acuerdo-box input,
.acuerdo-box textarea,
.acuerdo-box select{
width:100%;
padding:10px;
font-size:16px;
box-sizing:border-box;
}


.perfil-item-linea{
display:flex;
align-items:center;
gap:12px;
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,0.4);
}

.perfil-boton-ver{
background:#254957;
color:white;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.perfil-titulo{
font-size:15px;
}

.perfil-acuerdos{
flex:1;
max-height:520px;
overflow-y:auto;
padding-right:10px;
}


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

.perfil-horizontal{
background:white;
padding:25px;
border-radius:12px;
margin-bottom:40px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.perfil-horizontal .fila{
display:flex;
gap:20px;
margin-bottom:15px;
flex-wrap:wrap;
}

.perfil-horizontal .fila div{
flex:1;
min-width:200px;
}

.perfil-horizontal input{
width:100%;
padding:10px;
margin-top:5px;
}

/* BLOQUES ACUERDOS */

.bloque-acuerdos{
background:white;
padding:25px;
border-radius:12px;
margin-bottom:25px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.bloque-acuerdos h2{
margin-bottom:15px;
color:#254957;
}

/* SCROLL */

.scroll-box{
max-height:180px;
overflow-y:auto;
padding-right:5px;
}

/* ITEMS */

.perfil-item-linea{
display:flex;
align-items:center;
gap:12px;
padding:10px 0;
border-bottom:1px solid #eee;
}

.perfil-boton-ver{
background:#254957;
color:white;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

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

@media (max-width:768px){

/* evitar desbordes */
body{
overflow-x:hidden;
}

/* container */
.container{
max-width:100%;
padding:20px;
}

/* HEADER */
.header{
flex-direction:column;
align-items:center;
height:auto;
gap:10px;
text-align:center;
}

.header div:last-child{
justify-content:center;
flex-wrap:wrap;
}

/* HERO */
.hero{
min-height:320px;
margin-top:10px;
}

.hero-content h1{
font-size:28px;
line-height:1.2;
}

.hero-content p{
font-size:18px;
}

/* GRID HOME */
.acuerdos-grid{
grid-template-columns:1fr;
}

/* COMO FUNCIONA */
.como-funciona{
grid-template-columns:1fr;
}

/* PERFIL FORM */
.perfil-horizontal .fila{
flex-direction:column;
}

.perfil-horizontal .fila div{
min-width:100%;
}

/* BLOQUES ACUERDOS */
.scroll-box{
max-height:140px;
}

/* ITEMS PERFIL */
.perfil-item-linea{
flex-direction:column;
align-items:flex-start;
gap:5px;
}

/* BOTONES */
.boton-principal{
font-size:15px;
padding:12px;
}

/* TEXTO */
h1{
font-size:26px;
}

h2{
font-size:20px;
}

}

/* evitar zoom en inputs iPhone */
input, textarea, select{
font-size:16px;
}

.volver-inicio a.boton-principal{
font-size:14px;
padding:6px 12px;
border-radius:6px;
color:#fff !important;
text-decoration:none !important;
font-weight:400; /* 🔴 esto */
}

/* BLOQUE OK */

.acuerdo-ok{
text-align:center;
margin-top:30px;
}

.acuerdo-ok h3{
margin:10px 0 15px;
}

/* BOTÓN PRINCIPAL */

.boton-principal{
background:#254957;
color:white;
border:none;
border-radius:8px;
padding:14px;
display:block;
text-align:center;
font-size:16px;
}

/* BOTONES SECUNDARIOS */

.boton-secundario{
background:#f1f3f5;
color:#254957;
border:1px solid #ddd;
border-radius:6px;
padding:8px 14px;
font-size:14px;
cursor:pointer;
text-decoration:none;
}

/* CONTENEDOR SHARE */

.acuerdo-share{
margin-top:30px;
}

.acuerdo-share h4{
text-align:center;
font-size:18px;
font-weight:600;
margin-bottom:15px;
}



/* HOVER */

.share-actions a.boton-secundario:hover,
.share-actions button.boton-secundario:hover{
background:#1e3b45;
}

/* BOTÓN VOLVER */

.volver-inicio a{
width:auto !important;
display:inline-block;
padding:10px 20px;
}


.share-actions{
display:flex;
gap:10px;
align-items:stretch;
}

.share-created-copy{
color:#4f626a;
font-size:15px;
line-height:1.5;
margin:10px auto 0;
max-width:560px;
}

.share-status-panel{
background:#f4fafb;
border:1px solid #d8edf2;
border-radius:10px;
margin:24px 0;
padding:20px;
text-align:left;
}

.share-status-label{
color:#6d858d;
font-size:13px;
font-weight:700;
letter-spacing:.02em;
margin-bottom:6px;
text-transform:uppercase;
}

.share-status-title{
color:#0b2f3d;
font-size:22px;
font-weight:800;
line-height:1.25;
margin-bottom:8px;
}

.share-status-panel p,
.share-help,
.share-close-help{
color:#3e5963;
font-size:14px;
line-height:1.5;
margin:0;
}

.share-panel-title{
color:#0b2f3d;
font-size:22px;
line-height:1.25;
margin:0 0 8px;
text-align:center;
}

.acuerdo-share > h4:nth-of-type(2),
.acuerdo-share .agreement-progress{
display:none;
}

.share-actions a,
.share-actions button{
flex:1;
height:50px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
background:#254957;
color:white;
border-radius:8px;
text-decoration:none;
border:0;
font:inherit;
font-weight:700;
cursor:pointer;
min-width:0;
margin:0;
padding:0 14px;
line-height:1.2;
appearance:none;
-webkit-appearance:none;
}

.share-actions > .boton-secundario{
width:0 !important;
min-width:0 !important;
max-width:none !important;
flex:1 1 0 !important;
min-height:50px !important;
height:50px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 14px !important;
line-height:1.2 !important;
vertical-align:top !important;
}

.agreement-progress{
background:#f4fafb;
border:1px solid #d8edf2;
border-radius:8px;
margin:18px 0 24px;
padding:18px;
text-align:center;
}

.agreement-progress-track{
background:#d8edf2;
border-radius:999px;
height:8px;
margin-bottom:14px;
overflow:hidden;
}

.agreement-progress-track span{
background:#254957;
border-radius:999px;
display:block;
height:100%;
transition:width .2s ease;
}

.agreement-progress-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}

.agreement-progress-step{
color:#536b74;
font-size:13px;
font-weight:600;
line-height:1.25;
padding-top:18px;
position:relative;
text-align:center;
}

.agreement-progress-step::before{
background:#d8edf2;
border:3px solid #f4fafb;
border-radius:999px;
content:"";
height:14px;
left:50%;
position:absolute;
top:-2px;
transform:translateX(-50%);
width:14px;
}

.agreement-progress-step.is-active{
color:#0b2f3d;
font-weight:800;
}

.agreement-progress-step.is-active::before{
background:#254957;
box-shadow:0 0 0 3px rgba(37,73,87,.18);
}

.acuerdo-box{
margin-top:20px !important;
}

.acuerdo-ok{
text-align:center;
margin-top:10px; /* antes 30px */
}

.acuerdo-ok div{
margin-bottom:5px; /* antes 10px */
}

/* =========================
RELACIONADOS (SEO BLOCK)
========================= */

.relacionados-titulo{
margin-top:35px;
margin-bottom:15px;
font-size:18px;
color:#254957;
text-align:center;
}

/* contenedor */
.relacionados-links{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-bottom:10px;
}

/* links tipo botón */
.relacionados-links a{
background:#f1f3f5;
color:#254957;
border:1px solid #ddd;
border-radius:20px;
padding:8px 14px;
font-size:14px;
text-decoration:none;
transition:all 0.2s ease;
}

/* hover */
.relacionados-links a:hover{
background:#254957;
color:#fff;
border-color:#254957;
}


.volver-inicio a{
    background:#254957;
    color:#fff !important;
    border:1px solid #254957;
    border-radius:8px;
    padding:10px 20px;
    display:inline-block;
    text-decoration:none;
    font-size:15px;
    font-weight:400;
}

.timeline{
margin-top:20px;
border-left:2px solid #254957;
padding-left:20px;
}

.timeline-item{
position:relative;
margin-bottom:20px;
}

.timeline-dot{
width:10px;
height:10px;
background:#254957;
border-radius:50%;
position:absolute;
left:-26px;
top:6px;
}

.timeline-date{
font-size:13px;
color:#888;
margin-bottom:4px;
}

.timeline-text{
font-size:15px;
color:#333;
}

.timeline-ip{
font-size:12px;
color:#aaa;
}

.perfil-item-linea {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.perfil-item-linea .acciones {
    display: flex;
    gap: 8px;
    align-items: center;
}

.perfil-item-linea .info {
    flex: 1;
}

.perfil-item-linea > div[id^="share_"] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* REDUCIR ESPACIADO ENTRE BLOQUES */

.seccion,
.section,
.bloque {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

/* Ajuste específico si existe */
.como-funciona {
    margin-top: 30px !important;
}

.acuerdos-simples {
    margin-top: 30px !important;
}

.separador-bloque {
    margin-top: 30px;
}

.bloque-gris {
    background: #f5f6f8;
    padding: 50px 20px;
    text-align: center;
}

.acuerdos-simple-texto {
    margin-top: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.acuerdos-simple-texto h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.acuerdos-simple-texto p {
    font-size: 15px;
    color: #444;
    line-height: 1.5;
}

.acuerdos-simple-texto {
    margin-top: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    background: #ffffff;
    padding: 25px 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.acuerdos-simple-texto h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.acuerdos-simple-texto p {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

.bloque-info {
    max-width: 800px;
    margin: 20px auto 0 auto;
    padding: 25px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.bloque-info p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin: 10px 0;
}

/* =========================
HOME - BLOQUE CARACTERÍSTICAS
========================= */

.features-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-top:30px;
margin-bottom:10px;
}

.feature-item{
background:#ffffff;
padding:20px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
text-align:left;
}

.feature-item h3{
font-size:16px;
margin-bottom:8px;
color:#254957;
}

.feature-item p{
font-size:14px;
color:#555;
line-height:1.4;
}


/* =========================
RESPONSIVE HOME FEATURES
========================= */

@media (max-width:768px){

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

}


/* =========================
HOME - FEATURES (4 COLUMNAS)
========================= */

.features-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:30px;
margin-bottom:10px;
}

.feature-item{
background:#ffffff;
padding:20px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
text-align:left;
}

.feature-item h3{
font-size:18px;
font-weight:600;
margin-bottom:8px;
color:#254957;
}

.feature-item p{
font-size:14px;
color:#555;
line-height:1.5;
}

.feature-item{
background:#ffffff;
padding:20px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
text-align:left;
transition:all .2s ease; /* 🔴 AÑADE ESTA LÍNEA */
}

.feature-item:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

@media (min-width:769px){
.feature-item h3{
min-height:50px;
}
}



/* =========================
BADGE GRATIS HERO
========================= */

.hero-free{
margin-top:14px;
display:inline-block;
background:#ffffff;
color:#254957;
padding:8px 16px;
border-radius:20px;
font-size:14px;
font-weight:600;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}


/* =========================
UNIFICACIÓN TIPOGRÁFICA
========================= */

.acuerdo-card h3,
.feature-item h3,
.paso h3{
font-size:18px;
font-weight:600;
color:#254957;
}

.acuerdo-card p,
.feature-item p,
.paso p,
.bloque-info p{
font-size:14px;
line-height:1.5;
color:#555;
}

.titulo-home{
font-size:28px;
font-weight:600;
color:#254957;
}


/* =========================
COHERENCIA VISUAL CAJAS
========================= */

.feature-item,
.bloque-info,
.como-funciona-box{
box-shadow:0 8px 20px rgba(0,0,0,0.08);
border-radius:12px;
}


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

@media (max-width:768px){

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

}


/* =========================
BOTÓN VERIFICACIÓN (CORPORATIVO)
========================= */

.boton-verificacion{
display:inline-block;
background:#254957;
color:#ffffff;
padding:12px 28px;
border-radius:8px;
font-size:16px;
text-decoration:none;
transition:all 0.2s ease;
}

.boton-verificacion:hover{
background:#1e3b45;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}


/* =========================
UNIFICAR TITULOS HOME
========================= */

.titulo-unificado{
font-size:28px;
font-weight:600;
color:#254957;
}

/* =========================
HOME - TIPOGRAFÍA MÁS GRANDE
========================= */

/* títulos secciones */
.titulo-home{
font-size:36px;
font-weight:600;
}

/* tarjetas */
.acuerdo-card h3{
font-size:22px;
}

.acuerdo-card p{
font-size:17px;
}

/* pasos */
.paso h3{
font-size:22px;
}

.paso p{
font-size:17px;
}

/* features */
.feature-item h3{
font-size:21px;
}

.feature-item p{
font-size:17px;
}

/* bloque texto */
.bloque-info p{
font-size:17px;
line-height:1.6;
}

@media (max-width:768px){

.titulo-home{
font-size:26px;
}

.acuerdo-card h3,
.paso h3,
.feature-item h3{
font-size:19px;
}

.acuerdo-card p,
.paso p,
.feature-item p,
.bloque-info p{
font-size:16px;
}

}

/* =========================
HERO - BOTONES MÁS GRANDES Y SEPARADOS
========================= */

/* botón principal */
.hero-button{
padding:20px 44px;
font-size:20px;
margin-top:25px;
}

/* badge gratis */
.hero-free{
margin-top:20px;
padding:10px 22px;
font-size:16px;
}

/* separación extra entre ambos */
.hero-button + .hero-free{
margin-top:18px;
}

@media (max-width:768px){

.hero-button{
padding:16px 30px;
font-size:18px;
}

.hero-free{
font-size:14px;
padding:8px 18px;
}

}

/* =========================
HERO - HALO VISIBLE (DOBLE)
========================= */

.hero-free{
position:relative;
z-index:1;
}

/* animación */

/* =========================
HERO - HALO VISIBLE (DOBLE)
========================= */

.hero-free{
position:relative;
z-index:1;
}

/* animación */
@keyframes halo-visible{

0%{
opacity:0.65;
transform:scale(1);
}

70%{
opacity:0;
transform:scale(1.08);
}

100%{
opacity:0;
transform:scale(1.12);
}

}


/* =========================
BOTÓN VERIFICACIÓN GRANDE
========================= */

.bloque-boton-verificacion{
text-align:center;
margin-top:50px;
}

.boton-verificacion{
display:inline-block;
background:#254957;
color:#ffffff;
padding:18px 42px;
border-radius:10px;
font-size:18px;
font-weight:600;
text-decoration:none;
transition:all 0.2s ease;
}

.boton-verificacion:hover{
background:#1e3b45;
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* =========================
PÁGINA VERIFICACIÓN (DEFINITIVO)
========================= */

body .verificacion-page{
max-width:900px;
margin:0 auto;
}

/* =========================
INTRO
========================= */

body .verificacion-intro{
background:#ffffff;
padding:30px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
margin-top:20px;
}

body .verificacion-intro p{
font-size:17px;
line-height:1.6;
color:#444;
margin-bottom:12px;
}


/* =========================
BLOQUE DEMO (ESTILO DOCUMENTO TÉCNICO)
========================= */

body .verificacion-demo{
background:#ffffff;
border-radius:10px;
margin-top:40px;
border:1px solid #e3e6ea;

box-shadow:
0 2px 6px rgba(0,0,0,0.08),
0 12px 30px rgba(0,0,0,0.06);

overflow:hidden;
}

/* cabecera tipo sistema */
body .demo-header{
background:#254957;
color:#ffffff;
padding:14px 18px;
font-size:13px;
letter-spacing:0.3px;
}

/* caja interior */
body .demo-box{
background:#f8f9fb;
padding:20px;
}

/* filas */
body .demo-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid #e3e6ea;
}

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

/* etiquetas */
body .demo-label{
font-size:13px;
color:#666;
text-transform:uppercase;
letter-spacing:0.5px;
}

/* valores */
body .demo-value{
font-size:13px;
color:#111;
font-family:monospace;
word-break:break-all;
}

/* estado */
body .demo-ok{
font-size:13px;
color:#2e7d32;
font-weight:600;
font-family:monospace;
}

/* footer tipo log */
body .demo-footer{
background:#f1f3f5;
padding:12px 18px;
font-size:12px;
color:#777;
border-top:1px solid #e3e6ea;
font-family:monospace;
}


/* =========================
BLOQUES DE CONTENIDO
========================= */

body .verificacion-bloque{
background:#ffffff;
padding:30px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
margin-top:30px;
}

body .verificacion-bloque h2{
font-size:22px;
font-weight:600;
color:#254957;
margin-bottom:12px;
}

body .verificacion-bloque p{
font-size:17px;
line-height:1.6;
color:#444;
margin-bottom:12px;
}

body .verificacion-bloque ul{
margin-top:10px;
margin-bottom:12px;
padding-left:20px;
}

body .verificacion-bloque li{
font-size:16px;
color:#444;
margin-bottom:6px;
line-height:1.5;
}


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

body .verificacion-cta{
text-align:center;
margin-top:50px;
padding:40px 20px;
background:#f5f6f8;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

body .verificacion-cta h2{
margin-bottom:15px;
color:#254957;
font-size:24px;
}

body .verificacion-cta p{
font-size:16px;
color:#555;
}

body .verificacion-cta .hero-button{
padding:18px 40px;
font-size:18px;
margin-top:15px;
}


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

@media (max-width:768px){

body .verificacion-page{
padding:20px;
}

body .verificacion-intro,
body .verificacion-demo,
body .verificacion-bloque{
padding:20px;
}

body .demo-item{
flex-direction:column;
align-items:flex-start;
gap:5px;
}

body .verificacion-bloque h2{
font-size:20px;
}

body .verificacion-bloque p,
body .verificacion-bloque li{
font-size:15px;
}

body .verificacion-intro p{
font-size:15px;
}

}

.volver-inicio{
    max-width: 900px;
    margin: 20px auto 0 auto;
    padding: 0 10px;
}

.footer-custom{
    margin-top:40px;
    padding:12px 20px;
    text-align:center;
    background:#7FB3C2;
}

.footer-custom a{
    color:#254957;
    text-decoration:none;
}

.footer-custom a:hover{
    text-decoration:underline;
}

/* enlaces */
.footer-legal a{
    font-size:15px;
    line-height:1.4;
    display:inline-block;
    margin:3px 6px;
}

/* contenedor enlaces */
.footer-legal{
    margin-bottom:6px;
}

/* copyright */
.footer-copy{
    font-size:14px;
    line-height:1.3;
}



/* =========================
RESPONSIVE - FORMULARIO CREAR ACUERDO
========================= */

@media (max-width: 768px){

    .acuerdo-box input,
    .acuerdo-box textarea,
    .acuerdo-box select{
        width:100%;
        border:1.5px solid #b5bfc9; /* gris medio más visible */
        border-radius:8px;
        padding:10px 12px;
        font-size:14px;
        background:#ffffff;
        box-shadow:none; /* quitamos sombra para que el borde mande */
        transition: all 0.2s ease;
    }

    /* hover ligero (opcional pero recomendable en móvil híbrido) */
    .acuerdo-box input:hover,
    .acuerdo-box textarea:hover,
    .acuerdo-box select:hover{
        border-color:#9aa7b2;
    }

    /* foco claro */
    .acuerdo-box input:focus,
    .acuerdo-box textarea:focus,
    .acuerdo-box select:focus{
        border-color:#254957;
        box-shadow:0 0 0 2px rgba(37,73,87,0.18);
        outline:none;
    }

}

@media (max-width: 768px){

    .contrato{
        max-width: 100%;        /* elimina limitación */
        width: 100%;
        margin: 20px 0;         /* quita centrado con márgenes grandes */
        padding: 20px 16px;     /* reduce padding lateral */
        border-radius: 8px;     /* opcional, más compacto */
    }

}
@media (max-width: 768px){

    .registro-box{
        padding: 16px;
    }

    .registro-box input{
        width: 100%;
        box-sizing: border-box; /* CLAVE */
        display: block;
    }

}

@media (max-width: 768px){

    body{
        overflow-x: hidden;
    }

    .container,
    .registro-box{
        max-width: 100%;
        width: 100%;
    }

}

.bloque-info a{
    color:#254957;
    text-decoration:none;
    font-weight:500;
    border-bottom:1px solid rgba(37,73,87,0.3);
    transition:all 0.2s ease;
}

.bloque-info a:hover{
    border-bottom:1px solid #254957;
}

/* separar CTA final correctamente */
.bloque-gris.separador-bloque{
    margin-top: 80px;
}

/* FIX MOBILE FORMULARIOS PACTAGO */
input,
textarea,
select {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
}

input {
    min-width: 0;
}


/* LOGIN - CAMPOS MÁS MARCADOS SOLO MOBILE */
@media screen and (max-width: 768px) {

    .login-box input {
        border: 2px solid #c4c4c4;
        border-radius: 8px;
        padding: 12px 14px;
        background: #ffffff;
        box-sizing: border-box;
        font-size: 16px;
    }

    .login-box input:focus {
        border-color: #254957;
        box-shadow: 0 0 0 2px rgba(37,73,87,0.15);
        outline: none;
    }

}

/* CREAR ACUERDO - CAMPOS MÁS MARCADOS SOLO MOBILE */
@media screen and (max-width: 768px) {

    .acuerdo-box input,
    .acuerdo-box textarea,
    .acuerdo-box select {
        border: 2px solid #c4c4c4;
        border-radius: 8px;
        padding: 12px 14px;
        background: #ffffff;
        box-sizing: border-box;
        font-size: 16px;
        width: 100%;
    }

    .acuerdo-box input:focus,
    .acuerdo-box textarea:focus,
    .acuerdo-box select:focus {
        border-color: #254957;
        box-shadow: 0 0 0 2px rgba(37,73,87,0.15);
        outline: none;
    }

}



@media (min-width: 1024px){
    img[src="/logo-512.png"]{
        height: 70px !important;
        width: auto !important;
        max-height: none !important;
    }
}

/* BOTONES HEADER (Mi perfil / Cerrar sesión) */
.header a.perfil,
.header a.logout{
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 8px;
}


.volver-inicio{
    margin-bottom: 20px;
}

.volver-inicio a,
.volver-inicio a:hover,
.volver-inicio a:focus,
.volver-inicio a:active,
.volver-inicio button,
.volver-inicio button:hover,
.volver-inicio button:focus,
.volver-inicio button:active{
    align-items:center;
    display:inline-flex !important;
    justify-content:center;
    line-height:1.2;
    min-height:44px;
    padding:0 18px;
    text-decoration: none;
    width:auto !important;
}

.legal-aviso{
    font-size:12px;
    line-height:1.3;
    text-align:center;
    color:#666;
    margin-top:10px;
}


.botones-inline button{
    width:auto !important;
}


/* centrar checkbox acuerdo */
.acuerdo-checkbox{
    text-align:center;
    margin-top:20px;
}

.acuerdo-checkbox label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

/* FIX definitivo centrado checkbox acuerdo */
.acuerdo-checkbox label{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    width:auto !important;
    margin:0 auto !important;
}

.acuerdo-checkbox{
    text-align:center;
}

/* PERFIL MOBILE - botones en línea */
@media (max-width:768px){

    .perfil-item-linea{
        flex-direction:row;        /* 🔴 evita columna */
        align-items:center;
        flex-wrap:wrap;            /* permite 2 líneas si no cabe */
    }

    .perfil-item-linea .acciones{
        display:flex;
        flex-wrap:wrap;            /* 🔴 clave */
        gap:6px;
    }

    .perfil-item-linea .acciones a,
    .perfil-item-linea .acciones button{
        width:auto !important;     /* 🔴 rompe el width:100% global */
        flex:0 0 auto;
        padding:6px 10px;
        font-size:13px;
    }

    .perfil-item-linea .info{
        width:100%;
        margin-bottom:5px;
    }

}

/* PERFIL MOBILE - forzar botones en línea en TODOS los bloques */
@media (max-width:768px){

    /* cualquier botón dentro de items de perfil */
    .perfil-item-linea a,
    .perfil-item-linea button{
        width:auto !important;
        display:inline-block;
        margin-right:6px;
        margin-bottom:6px;
    }

    /* por si hay divs distintos a .acciones */
    .perfil-item-linea > div{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }

}

/* INDICADOR SCROLL BLOQUES ACUERDOS */
.scroll-box{
    position: relative;
    overflow-y: auto;
}

/* scrollbar visible (mobile + desktop) */
.scroll-box::-webkit-scrollbar{
    width:6px;
}

.scroll-box::-webkit-scrollbar-thumb{
    background:#254957;
    border-radius:6px;
}

/* fade inferior (indica que hay más contenido) */
.scroll-box::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events:none;
}

.perfil-container .boton-principal {
    width: auto !important;
    display: inline-block !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
}

.perfil-container {
    text-align: center;
}

@keyframes latido-suave {
  0%   { box-shadow: 0 0 0 0 rgba(37,73,87, 0.3); }
  70%  { box-shadow: 0 0 0 8px rgba(37,73,87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37,73,87, 0); }
}

.acuerdo-checkbox-latido {
  animation: latido-suave 2s ease-out infinite;
}

/* FIX CAMPO IMPORTE */
.acuerdo-box div[style*="display:flex"] {
    align-items: stretch;
}

.acuerdo-box div[style*="display:flex"] input[type="number"] {
    flex: 1;
    width: auto !important;
    padding: 10px !important;
    height: 42px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.acuerdo-box div[style*="display:flex"] span {
    display: flex;
    align-items: center;
    height: 42px !important;
    padding: 0 12px;
}

.registro-box input,
.registro-box select {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 44px;
}

.registro-step{
    background:#f7fbfc;
    border:1px solid #d9e7eb;
    border-radius:10px;
    margin:18px 0;
    padding:16px;
}

.registro-step-kicker{
    color:#6f8e9a;
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
    margin-bottom:4px;
    text-transform:uppercase;
}

.registro-step h3{
    color:#173f50;
    font-size:18px;
    margin:0 0 6px;
}

.registro-step p{
    color:#52656f;
    font-size:14px;
    line-height:1.45;
    margin:0 0 12px;
}

.registro-step label{
    color:#173f50;
    display:block;
    font-size:14px;
    font-weight:700;
    margin:12px 0 4px;
}

.btn-eliminar-cuenta {
  width: auto !important;
  display: inline-block;
  background: #c0392b;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

@media (max-width: 768px) {
    .acuerdo-box {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .acuerdo-box * {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

@media (max-width: 768px) {
    .estado ul {
        padding-left: 24px;
    }
}

@media (max-width: 768px) {
    .perfil-container {
        text-align: left;
    }

    .perfil-container label {
        display: block;
        text-align: left;
        margin-bottom: 6px;
    }
}

@media (max-width: 768px) {
    .perfil-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 16px;
    }
}


@media (max-width: 768px) {
    .perfil-container input {
        width: 100%;
        border: 2px solid #c4c4c4;
        border-radius: 8px;
        padding: 12px 14px;
        background: #ffffff;
        font-size: 16px;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .perfil-container > button.boton-principal {
        display: block !important;
        margin: 20px auto !important;
        width: fit-content !important;
    }
}

@media (max-width: 768px) {
    .perfil-container h1 {
        text-align: center;
    }
}

/* =========================
HEADER (NO ROMPER DESKTOP)
========================= */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* contenedor derecha (perfil, login, etc) */
.header > div:last-child {
    display: flex;
    gap: 10px;
}


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

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #254957;
}


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

/* oculto siempre por defecto */
.menu-mobile {
    display: none;
}


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

@media (max-width: 768px) {

    /* mostrar hamburguesa */
    .menu-toggle {
        display: block;
    }

    /* ocultar botones header */
    .header > div:last-child {
        display: none;
    }

    /* menu desplegable */
    .menu-mobile {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        z-index: 9999;
    }

    .menu-mobile.activo {
        display: block;
    }

    /* links */
    .menu-mobile a {
        display: block;
        padding: 14px 20px;
        border-bottom: 1px solid #eee;
        color: #254957;
        text-decoration: none;
        font-size: 16px;
    }

    /* hover */
    .menu-mobile a:hover {
        background: #f5f5f5;
    }

    /* secundarios */
    .menu-mobile a.secundario {
        font-size: 14px;
        color: #777;
    }

    /* logout */
    .menu-mobile a.logout {
        color: #c0392b;
        font-weight: bold;
    }

    /* separador */
    .menu-separador {
        height: 10px;
        background: #f5f5f5;
    }
}

@media (max-width: 768px) {

    .header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .logo {
        margin: 0 !important;
    }

    .menu-toggle {
        margin-left: auto !important;
    }
}

@media (max-width: 768px) {

    .menu-toggle {
        width: auto !important;
        display: block;
        margin-left: auto !important;
    }

}

@media (max-width: 768px) {

    .menu-toggle {
        width: auto !important;
    }

}

@media (max-width: 768px) {

    /* HEADER alineado */
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* LOGO más grande */
    .logo img {
        height: 42px;
        width: auto;
    }

    /* HAMBURGUESA */
    .menu-toggle {
        font-size: 32px;
        width: auto !important;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

@media (max-width: 768px) {

    /* HEADER: quitar limitaciones */
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: auto !important;
        padding: 10px 15px;
    }

    /* LOGO GRANDE DE VERDAD */
    .logo img {
        height: 50px !important;
        width: auto;
        display: block;
    }

    /* HAMBURGUESA ALINEADA */
    .menu-toggle {
        font-size: 32px;
        width: auto !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        height: 50px; /* misma altura que logo */
    }

}
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    color: #254957 !important;
}

.menu-toggle:focus-visible,
.menu-mobile a:focus-visible{
    outline:3px solid #7fb8c8 !important;
    outline-offset:3px !important;
    border-radius:6px;
}

@media (max-width: 768px) {

    .menu-mobile {
        top: 80px; /* antes 60px */
    }

}

.menu-mobile a.logout {
    color: #254957 !important;
    font-weight: normal !important;
}

.menu-mobile a.logout,
.menu-mobile a.logout:active,
.menu-mobile a.logout:focus,
.menu-mobile a.logout:hover,
.menu-mobile a.logout:visited {
    background: transparent !important;
    color: #254957 !important;
    font-weight: normal !important;
}

.perfil-aviso{
    margin: 4px 0 14px;
    padding: 6px 10px;
    background: #f7f9fa;
    border-left: 3px solid #254957;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: #555;
}

.perfil-aviso strong{
    display: inline;
    font-weight: 600;
    color: #254957;
    margin-right: 4px;
}

.perfil-aviso p{
    margin: 2px 0;
}

.perfil-aviso a{
    color: #254957;
    text-decoration: underline;
}

.perfil-horizontal{
    margin-bottom: 4px !important;
}

/* FIX iOS inputs date overflow */
.acuerdo-box input[type="date"]{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.bloque-boton-verificacion{
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.boton-verificacion{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px; /* ajusta si quieres más ancho */
    height: 52px; /* opcional para altura uniforme */
    text-align: center;
}

.badge-cumplido{
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    background: #eee;
    color: #555;
    cursor: pointer;
}

.badge-cumplido.activo{
    background: #254957;
    color: #fff;
}

/* ===== BLOG ===== */

.blog-container{
    max-width:1200px;
    margin:40px auto;
    min-height:70vh;
    padding:0 20px;
}

.blog-list{
    width:100%;
}

/* ITEM */

.blog-item{
    display:flex;
    gap:25px;
    margin-bottom:35px;
    padding-bottom:25px;
    border-bottom:1px solid rgba(37,73,87,0.12);
    align-items:center;
}

/* IMAGEN */

.blog-thumb{
    width:220px;
    height:130px;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
}

/* TEXTO */

.blog-text h2{
    margin:0 0 8px 0;
    font-size:22px;
}

.blog-text a{
    color:#254957;
    text-decoration:none;
}

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

.blog-text p{
    margin:0;
    font-size:16px;
    color:#52656d;
    line-height:1.5;
}

/* MOBILE */

@media(max-width:768px){

    .blog-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .blog-thumb{
        width:100%;
        height:auto;
    }

    .blog-text h2{
        font-size:20px;
    }

    .blog-text p{
        font-size:15px;
    }
}

/* ===== ESPACIADO CABECERA BLOG ===== */

.blog-container h1{
    margin-bottom:10px;
}

.blog-container > p{
    margin-bottom:50px;
    display:block;
}

```css
/* CONTENEDOR GENERAL (si usas caja centrada) */
.login-box{
    max-width:420px;
    margin:80px auto;
    padding:30px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    text-align:center;
}

/* TÍTULO */
.login-box h2{
    margin-bottom:10px;
    font-size:22px;
    color:#254957;
}

/* TEXTOS */
.login-sub{
    font-size:14px;
    color:#666;
    line-height:1.4;
    margin:0;
}

/* SEPARACIÓN ENTRE TÍTULO Y PRIMER TEXTO */
.login-box h2 + .login-sub{
    margin-top:18px; /* ajusta aquí */
}

/* SEPARACIÓN ENTRE LOS DOS TEXTOS */
.login-sub + .login-sub{
    margin-top:10px;
}

.crear-box-top{
    text-align:center;
    margin-bottom:20px;
}

/* BOTONES CREAR ACUERDO URLS ACUERDOS */

.boton-crear-top{
    display:inline-block;
    padding:10px 18px;
    font-size:14px;
    color:#254957;
    text-decoration:none;
    border:1px solid #254957;
    border-radius:6px;
    background:#fff;
    position:relative;
    transition:all 0.25s ease;
    animation:pulso-borde 1.2s infinite;
}

@keyframes pulso-borde{
    0%{
        box-shadow:0 0 0 0 rgba(127,179,194,0.6);
    }
    60%{
        box-shadow:0 0 0 8px rgba(127,179,194,0.25);
    }
    100%{
        box-shadow:0 0 0 0 rgba(127,179,194,0);
    }
}

.boton-crear-top:hover{
    background:#254957;
    color:#fff;
    animation:none;
}

.crear-box-top{
    text-align:center;
    margin:30px 0 20px 0;
}

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

.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* bloque derecha */
.header-derecha{
    display:flex;
    align-items:center;
    gap:18px;
}

/* botones */
.header-botones{
    display:flex;
    align-items:center;
}

.header-botones a{
    margin-left:10px;
}

.hero-button::after{
    content:"";
    position:absolute;
    top:-8px;
    left:-8px;
    right:-8px;
    bottom:-8px;
    border-radius:14px;
    border:3px solid rgba(255,255,255,0.75);
    opacity:0;
    transform:scale(1);
    animation:halo-visible 1.5s ease-out infinite;
    pointer-events:none;
}


/* ===== PACTAGO V2 BASE VISUAL ===== */

:root{
    --pg-bg:#f5f7f6;
    --pg-surface:#ffffff;
    --pg-text:#1e2a2e;
    --pg-muted:#66757b;
    --pg-primary:#254957;
    --pg-primary-dark:#1e3b45;
    --pg-accent:#2f7d68;
    --pg-border:#dfe7e9;
    --pg-shadow:0 1px 4px rgba(20,35,40,0.08);
}

body{
    background:var(--pg-bg);
    color:var(--pg-text);
}

.header{
    min-height:70px;
    height:auto;
    border-bottom:1px solid var(--pg-border);
    box-shadow:0 1px 3px rgba(20,35,40,0.06);
    position:sticky;
    top:0;
    z-index:50;
}

.container{
    max-width:1180px;
}

button,
.hero-button,
.login,
.logout,
.perfil,
.boton-crear-top{
    border-radius:8px;
    font-weight:700;
}

button,
.hero-button{
    background:var(--pg-primary);
}

button:hover,
.hero-button:hover{
    background:var(--pg-primary-dark);
}

.login,
.perfil{
    color:var(--pg-primary);
    border:1px solid var(--pg-border);
    background:#fff;
}

.logout{
    background:var(--pg-primary);
}

.acuerdo-card,
.paso,
.beneficio,
.card,
.panel,
.box,
.form-box{
    border-radius:8px;
    border:1px solid var(--pg-border);
    box-shadow:var(--pg-shadow);
}

.acuerdo-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(20,35,40,0.10);
}

.contrato{
    background:#fff;
    border-color:var(--pg-border);
    box-shadow:var(--pg-shadow);
}

input,
select,
textarea{
    border:1px solid #cfd8dc;
    border-radius:8px;
}

input:focus,
select:focus,
textarea:focus{
    outline:2px solid rgba(47,125,104,0.22);
    border-color:var(--pg-accent);
}

.menu-mobile{
    border:1px solid var(--pg-border);
    box-shadow:var(--pg-shadow);
}

@media (max-width: 768px){
    body{
        background:#fff;
    }

    .header{
        padding:12px 16px;
    }

    .container{
        padding:22px 18px;
    }
}

/* =========================
WEB V2 DETALLE ACUERDO
========================= */

.v2-page{
width:100%;
max-width:1180px;
margin:36px auto 70px auto;
padding:0 28px;
}

.v2-detail-hero{
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:24px;
align-items:stretch;
background:#ffffff;
border:1px solid rgba(37,73,87,0.14);
border-radius:8px;
padding:28px;
box-shadow:0 12px 30px rgba(31,55,64,0.08);
}

.v2-back{
display:inline-block;
margin-bottom:18px;
color:#254957;
font-size:14px;
font-weight:700;
text-decoration:none;
}

.v2-kicker{
margin:0 0 8px 0;
color:#1f6f7a;
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0;
}

.v2-detail-hero h1{
margin:0 0 12px 0;
color:#17323b;
font-size:34px;
line-height:1.12;
}

.v2-detail-hero p{
max-width:720px;
color:#4d5b61;
line-height:1.55;
}

.v2-status-panel{
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
padding:20px;
background:#f6fafb;
border:1px solid rgba(37,73,87,0.12);
border-radius:8px;
}

.v2-status-panel strong{
font-size:26px;
color:#17323b;
}

.v2-status-panel small,
.v2-muted,
.v2-document small,
.v2-participant small,
.v2-timeline small{
color:#66767c;
}

.v2-status{
display:inline-flex;
align-items:center;
justify-content:center;
width:max-content;
min-height:28px;
padding:0 10px;
border-radius:999px;
font-size:13px;
font-weight:700;
background:#eef3f4;
color:#254957;
}

.v2-status-firmado{
background:#e6f6ec;
color:#17633a;
}

.v2-status-pendiente{
background:#fff3d7;
color:#765000;
}

.v2-status-cancelado{
background:#fde8e6;
color:#8d241b;
}

.v2-detail-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,0.78fr);
gap:24px;
margin-top:24px;
}

.v2-section{
background:#ffffff;
border:1px solid rgba(37,73,87,0.14);
border-radius:8px;
padding:24px;
box-shadow:0 10px 26px rgba(31,55,64,0.06);
}

.v2-section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}

.v2-section h2{
margin:0;
color:#17323b;
font-size:22px;
}

.v2-definition-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.v2-definition-list div{
padding:14px;
background:#f8fbfb;
border:1px solid rgba(37,73,87,0.08);
border-radius:8px;
}

.v2-definition-list dt{
margin-bottom:5px;
color:#66767c;
font-size:13px;
}

.v2-definition-list dd{
margin:0;
color:#17323b;
font-weight:700;
}

.v2-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}

.v2-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 14px;
background:#eef3f4;
color:#254957;
border:1px solid rgba(37,73,87,0.18);
border-radius:8px;
font-weight:700;
font-size:14px;
text-decoration:none;
}

.v2-button-primary{
background:#254957;
color:#ffffff;
}

.v2-participants,
.v2-documents{
display:grid;
gap:12px;
}

.v2-participant,
.v2-document{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 0;
border-bottom:1px solid #edf1f2;
}

.v2-participant:last-child,
.v2-document:last-child{
border-bottom:0;
}

.v2-participant span{
color:#66767c;
}

.v2-participant strong,
.v2-document strong{
color:#17323b;
}

.v2-document div{
display:grid;
gap:4px;
}

.v2-document code{
max-width:180px;
overflow:hidden;
color:#254957;
font-size:13px;
}

.v2-timeline{
list-style:none;
display:grid;
gap:18px;
padding:0;
margin:0;
}

.v2-timeline li{
display:grid;
grid-template-columns:16px minmax(0,1fr);
gap:12px;
}

.v2-timeline li > span{
width:12px;
height:12px;
margin-top:4px;
border-radius:50%;
background:#1f6f7a;
box-shadow:0 0 0 4px #e4f2f4;
}

.v2-timeline strong{
display:block;
color:#17323b;
}

.v2-timeline p{
margin:5px 0 0 0;
color:#4d5b61;
line-height:1.45;
}

.v2-empty{
background:#ffffff;
border-radius:8px;
padding:28px;
color:#17323b;
box-shadow:0 10px 26px rgba(31,55,64,0.08);
}

.v2-sign-layout{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,0.48fr);
gap:24px;
align-items:start;
}

.v2-sign-main h1{
margin:0 0 12px 0;
color:#17323b;
font-size:34px;
line-height:1.12;
}

.v2-sign-main > p{
max-width:760px;
color:#4d5b61;
line-height:1.55;
}

.v2-sign-summary{
margin-top:22px;
}

.v2-sign-form{
margin-top:24px;
padding-top:22px;
border-top:1px solid #edf1f2;
}

.v2-check{
display:flex;
align-items:flex-start;
gap:12px;
padding:16px;
background:#f8fbfb;
border:1px solid rgba(37,73,87,0.12);
border-radius:8px;
color:#17323b;
font-weight:700;
line-height:1.45;
}

.v2-check input{
width:auto;
margin:3px 0 0 0;
flex:0 0 auto;
}

.v2-sign-form .v2-button{
width:auto;
margin-top:16px;
border:0;
cursor:pointer;
}

.v2-sign-form .v2-button:disabled{
opacity:0.7;
cursor:wait;
}

.v2-sign-message{
min-height:22px;
margin-top:14px;
font-weight:700;
}

.v2-sign-message-ok{
color:#17633a;
}

.v2-sign-message-error{
color:#8d241b;
}

.v2-sign-notice{
margin-top:24px;
padding:18px;
background:#fff8e8;
border:1px solid #f1dba5;
border-radius:8px;
}

.v2-sign-notice strong{
display:block;
margin-bottom:6px;
color:#765000;
}

.v2-sign-notice p{
margin:0 0 14px 0;
color:#5f5140;
line-height:1.45;
}

@media(max-width:900px){
    .v2-detail-hero,
    .v2-detail-grid,
    .v2-sign-layout{
        grid-template-columns:1fr;
    }

    .v2-detail-hero h1{
        font-size:28px;
    }
}

@media(max-width:620px){
    .v2-page{
        padding:0 16px;
        margin-top:24px;
    }

    .v2-detail-hero,
    .v2-section{
        padding:18px;
    }

    .v2-definition-list{
        grid-template-columns:1fr;
    }

    .v2-participant,
    .v2-document{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* =========================
PULIDO MOBILE FLUJO ACUERDO
========================= */

.acuerdo-documentos-acciones{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}

.acuerdo-documentos-acciones br{
display:none;
}

.boton-principal,
.boton-secundario,
.perfil-boton-ver{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
box-sizing:border-box;
}

@media(max-width:768px){
    .acuerdo-box{
        padding:18px 14px 32px 14px !important;
    }

    .acuerdo-box h1,
    .acuerdo-box h2{
        font-size:24px;
        line-height:1.2;
    }

    .contrato{
        margin:18px 0 !important;
        padding:18px 14px !important;
        max-width:100% !important;
        font-size:14px;
        line-height:1.65;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .estado{
        margin-top:18px;
    }

    .estado ul{
        padding-left:20px !important;
        margin-top:10px;
    }

    .estado li{
        margin-bottom:6px;
        line-height:1.35;
    }

    .acuerdo-checkbox{
        max-width:none !important;
        padding:14px !important;
        text-align:left !important;
    }

    .acuerdo-checkbox label{
        width:100%;
        align-items:flex-start !important;
        justify-content:flex-start !important;
        line-height:1.35;
    }

    .acuerdo-checkbox input{
        flex:0 0 auto;
    }

    .botones-inline,
    .acuerdo-documentos-acciones{
        flex-direction:column;
        align-items:stretch !important;
        gap:8px !important;
    }

    .botones-inline a,
    .botones-inline button,
    .acuerdo-documentos-acciones a,
    .acuerdo-documentos-acciones button{
        width:100% !important;
        margin:0 !important;
    }

    #envio_modal,
    #qr_modal_envio,
    #pago_modal{
        padding:14px;
        box-sizing:border-box;
    }

    #envio_modal > div,
    #qr_modal_envio > div,
    #pago_modal > div{
        width:100% !important;
        max-width:360px !important;
        padding:22px 18px !important;
        max-height:calc(100vh - 32px);
        overflow:auto;
        box-sizing:border-box;
    }

    #envio_modal .boton-secundario,
    #pago_modal .boton-principal{
        width:100% !important;
        margin-top:8px !important;
    }

    .perfil-item-linea{
        align-items:stretch !important;
    }

    .perfil-item-linea .acciones{
        width:100%;
    }
}

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

.perfil-hero{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:18px;
text-align:left;
}

.perfil-hero h1{
margin:0 0 6px 0;
color:#17323b;
}

.perfil-hero p{
margin:0;
color:#52656d;
line-height:1.45;
}

.perfil-hero-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}

.perfil-cta-crear{
white-space:nowrap;
}

.perfil-container .perfil-hero-actions a,
.perfil-container .perfil-hero-actions button{
min-height:44px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
padding:0 16px !important;
border-radius:8px !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.2 !important;
text-align:center !important;
text-decoration:none !important;
white-space:nowrap !important;
margin:0 !important;
}

.perfil-container .perfil-hero-actions a:hover,
.perfil-container .perfil-hero-actions a:focus,
.perfil-container .perfil-hero-actions a:active{
text-decoration:none !important;
}

.perfil-container .perfil-cta-crear,
.perfil-container .perfil-inicio{
background:#254957 !important;
border:1px solid #254957 !important;
color:#ffffff !important;
}

.perfil-container .perfil-cta-crear{
min-width:186px;
}

.perfil-container .perfil-inicio{
min-width:130px;
}

.perfil-resumen{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:12px;
margin:0 0 18px 0;
}

.perfil-resumen div{
padding:16px;
background:#f8fbfb;
border:1px solid rgba(37,73,87,0.12);
border-radius:8px;
text-align:left;
}

.perfil-resumen strong{
display:block;
font-size:26px;
color:#17323b;
line-height:1;
}

.perfil-resumen span{
display:block;
margin-top:6px;
color:#52656d;
font-weight:700;
}

.perfil-datos{
display:grid;
gap:14px;
margin:0 0 18px 0;
}

.perfil-datos-bloque{
background:#ffffff;
border:1px solid rgba(37,73,87,0.12);
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
padding:18px;
text-align:left;
}

.perfil-datos-bloque h2{
color:#173f50;
font-size:20px;
margin:0 0 6px 0;
}

.perfil-datos-bloque p{
color:#52656f;
font-size:14px;
line-height:1.45;
margin:0 0 14px 0;
}

.perfil-datos-grid{
display:grid;
column-gap:24px;
row-gap:10px;
grid-template-columns:repeat(4,minmax(0,1fr));
}

.perfil-dato{
border-bottom:1px solid rgba(37,73,87,0.10);
min-width:0;
padding:8px 0 10px;
}

.perfil-dato span{
color:#52656f;
display:block;
font-size:12px;
font-weight:800;
letter-spacing:.03em;
margin-bottom:6px;
text-transform:uppercase;
}

.perfil-dato strong{
color:#17323b;
display:block;
font-size:15px;
line-height:1.35;
overflow-wrap:anywhere;
user-select:text;
}

.perfil-dato-sensible strong{
font-family:inherit;
}

.perfil-refresh{
margin:0 0 18px 0;
}

.perfil-card{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto auto;
gap:14px;
align-items:center !important;
padding:16px 0 !important;
text-align:left;
}

.perfil-card-info{
display:flex;
flex-direction:column;
gap:5px;
min-width:0;
}

.perfil-card-info strong{
color:#17323b;
font-size:16px;
overflow-wrap:anywhere;
}

.perfil-card-info small{
color:#66767c;
}

.perfil-card-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:flex-end;
align-items:center;
}

.perfil-share-actions{
grid-column:1 / -1;
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
padding:12px;
background:#f8fbfb;
border:1px solid rgba(37,73,87,0.10);
border-radius:8px;
}

.perfil-estado{
display:inline-flex;
width:max-content;
align-items:center;
min-height:26px;
padding:0 9px;
border-radius:999px;
font-size:12px;
font-weight:800;
background:#eef3f4;
color:#254957;
}

.perfil-estado-listo{
background:#e6f6ec;
color:#17633a;
}

.perfil-estado-firmado{
background:#e6f6ec;
color:#17633a;
}

.perfil-estado-rechazado{
background:#fde8e6;
color:#8d241b;
}

.perfil-empty{
margin:0;
padding:16px;
background:#f8fbfb;
border:1px dashed rgba(37,73,87,0.22);
border-radius:8px;
color:#52656d;
font-weight:700;
}

.home-pending-alert{
margin:0 0 28px;
padding:18px;
border:1px solid rgba(37,73,87,0.18);
border-left:5px solid #254957;
border-radius:8px;
background:#f4fafb;
box-shadow:0 8px 22px rgba(37,73,87,0.08);
display:grid;
grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
gap:18px;
align-items:start;
}

.home-pending-alert strong{
display:block;
color:#17323b;
font-size:18px;
margin-bottom:6px;
}

.home-pending-alert p{
margin:0;
color:#52656d;
}

.home-pending-list{
display:grid;
gap:10px;
}

.home-pending-list a{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
column-gap:14px;
row-gap:4px;
align-items:center;
padding:14px;
border:1px solid rgba(37,73,87,0.12);
border-radius:8px;
background:#ffffff;
text-decoration:none;
color:#17323b;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.home-pending-list a:hover{
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(37,73,87,0.12);
border-color:rgba(217,143,42,0.45);
}

.home-pending-list span{
display:block;
font-weight:800;
overflow-wrap:anywhere;
grid-column:1;
}

.home-pending-list small{
display:block;
margin-top:4px;
color:#66767c;
line-height:1.35;
grid-column:1;
}

.home-pending-action{
grid-column:2;
grid-row:1 / span 2;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 18px;
border-radius:8px;
background:#d98f2a;
color:#ffffff !important;
font-size:14px !important;
font-weight:800;
white-space:nowrap;
box-shadow:0 8px 16px rgba(217,143,42,0.22);
}

/* =========================
VERIFICACION PUBLICA
========================= */

.verify-page{
max-width:900px;
margin:42px auto 64px;
padding:0 20px;
}

.verify-back{
margin-bottom:22px;
}

.verify-hero{
margin-bottom:18px;
}

.verify-kicker{
margin:0 0 8px 0;
color:#254957;
font-size:13px;
font-weight:700;
letter-spacing:0;
text-transform:uppercase;
}

.verify-hero h1{
margin:0 0 10px 0;
color:#17323b;
font-size:36px;
line-height:1.12;
}

.verify-hero p{
max-width:720px;
margin:0;
color:#52656d;
font-size:16px;
line-height:1.55;
}

.verify-card,
.verify-result,
.verify-data-card{
background:#ffffff;
border:1px solid rgba(37,73,87,0.12);
border-radius:8px;
box-shadow:0 8px 22px rgba(23,50,59,0.06);
}

.verify-card{
padding:22px;
margin-top:16px;
}

.verify-card h2{
margin:0 0 12px 0;
color:#17323b;
font-size:22px;
line-height:1.25;
}

.verify-card h3{
margin:18px 0 10px 0;
color:#17323b;
font-size:17px;
line-height:1.25;
}

.verify-card p{
margin:0;
color:#52656d;
line-height:1.5;
}

.verify-form label{
display:block;
margin-bottom:8px;
color:#17323b;
font-weight:700;
}

.verify-form-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:stretch;
}

.verify-form input{
width:100%;
min-height:46px;
padding:0 14px;
border:1px solid #cbd8dc;
border-radius:8px;
box-sizing:border-box;
font-size:15px;
}

.verify-form input::placeholder{
color:#91a0a6;
}

.verify-form button{
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 18px;
border:1px solid #254957;
border-radius:8px;
background:#254957;
color:#ffffff;
font-size:15px;
font-weight:700;
cursor:pointer;
}

.verify-form p{
margin:10px 0 0 0;
color:#66767c;
font-size:13px;
}

.verify-result{
padding:18px 20px;
margin-top:16px;
}

.verify-result h2{
margin:0 0 6px 0;
font-size:22px;
line-height:1.25;
}

.verify-result p{
margin:0;
color:#52656d;
line-height:1.45;
}

.verify-result-ok{
border-color:rgba(31,126,86,0.26);
background:#f2fbf6;
}

.verify-result-ok h2{
color:#1f7e56;
}

.verify-result-error{
border-color:rgba(174,70,70,0.24);
background:#fff6f4;
}

.verify-result-error h2{
color:#9f3333;
}

.verify-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:12px;
margin-top:16px;
}

.verify-data-card{
padding:16px;
}

.verify-data-card span{
display:block;
margin-bottom:6px;
color:#66767c;
font-size:13px;
font-weight:700;
}

.verify-data-card strong{
display:block;
color:#17323b;
font-size:18px;
line-height:1.25;
overflow-wrap:anywhere;
}

.verify-hash{
display:block;
padding:12px;
border-radius:8px;
background:#f5f8f9;
color:#17323b;
font-size:13px;
line-height:1.45;
white-space:normal;
overflow-wrap:anywhere;
}

.verify-timeline{
display:grid;
gap:12px;
}

.verify-timeline-item{
display:grid;
grid-template-columns:16px minmax(0,1fr);
gap:10px;
align-items:start;
}

.verify-timeline-item > span{
width:11px;
height:11px;
margin-top:4px;
border-radius:999px;
background:#254957;
}

.verify-timeline-item small{
display:block;
margin-bottom:3px;
color:#66767c;
font-size:12px;
}

.verify-timeline-item strong{
display:block;
color:#17323b;
font-size:15px;
line-height:1.3;
}

@media(max-width:768px){
    .home-pending-alert{
        grid-template-columns:1fr;
    }

    .home-pending-list a{
        grid-template-columns:1fr;
    }

    .home-pending-action{
        grid-column:1;
        grid-row:auto;
        width:100%;
        margin-top:8px;
    }

    .perfil-hero{
        flex-direction:column;
        align-items:stretch;
    }

    .perfil-hero-actions{
        justify-content:stretch;
    }

    .perfil-hero-actions a,
    .perfil-refresh{
        width:100% !important;
    }

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

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

    .perfil-card{
        grid-template-columns:1fr;
        align-items:stretch !important;
        gap:12px;
    }

    .perfil-card-actions{
        justify-content:stretch;
    }

    .perfil-card-actions a,
    .perfil-card-actions span,
    .perfil-share-actions a{
        width:100% !important;
    }

    .acuerdo-cumplido{
        margin-left:0 !important;
        text-align:left !important;
    }

    .verify-page{
        margin:28px auto 44px;
        padding:0 14px;
    }

    .verify-hero h1{
        font-size:30px;
    }

    .verify-form-row,
    .verify-grid{
        grid-template-columns:1fr;
    }

    .verify-form button{
        width:100%;
    }
}

/* WEB-01: prioritat final del sistema visual compartit */
body{
font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
background:var(--pg-bg);
color:var(--pg-ink);
}

.header{
position:relative;
z-index:50;
width:100%;
min-height:72px;
height:auto;
padding:10px max(24px,calc((100% - 1180px)/2 + 24px));
display:flex;
align-items:center;
justify-content:space-between;
background:var(--pg-surface);
border-bottom:1px solid var(--pg-border);
box-shadow:none;
}

.header .logo img{
width:auto;
height:38px !important;
display:block;
}

.header a.login,
.header a.logout,
.header a.perfil{
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 18px;
border-radius:12px;
font-size:15px;
font-weight:700;
text-decoration:none;
}

.footer-custom{
margin-top:0;
padding:36px max(24px,calc((100% - 1180px)/2 + 24px));
background:#0d2f3a;
color:#cfe3e7;
border:0;
}

.footer-custom a{
color:#cfe3e7;
}

@media(max-width:768px){
    .header{
        min-height:64px;
        padding:8px 16px;
    }

    .header .logo img{
        height:32px !important;
    }

    .footer-custom{
        padding:30px 16px;
    }
}

/* WEB-04: estructura comuna de les landings de tipus d'acord */
.agreement-landing-example{margin:18px 0 0;color:#49616b;font-family:"Source Serif 4",serif;font-size:1.08rem;line-height:1.55}
.agreement-landing-flow{max-width:1120px;margin:24px auto;padding:32px;border:1px solid #dbe5e7;border-radius:24px;background:#f4f7f7;text-align:center}
.agreement-landing-flow h2{margin:0 0 22px;color:#123f4d}
.agreement-landing-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.agreement-landing-steps article{padding:20px;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(18,63,77,.06)}
.agreement-landing-steps span{display:inline-grid;width:32px;height:32px;place-items:center;border-radius:50%;background:#dcebed;color:#123f4d;font-weight:800}
.agreement-landing-steps h3{margin:12px 0 6px;color:#123f4d;font-size:1rem}
.agreement-landing-steps p{margin:0;color:#5f737c;line-height:1.5}
.agreement-landing-primary{display:inline-flex;margin:24px auto 0}
.agreement-landing-trust{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px;color:#49616b;font-size:.9rem}
.agreement-landing-trust strong,.agreement-landing-trust span{padding:8px 12px;border-radius:999px;background:#e7f0f1}
.agreement-landing-faq{margin-top:32px}
@media(max-width:640px){.agreement-landing-flow{margin:18px 16px;padding:24px 18px;border-radius:20px}.agreement-landing-steps{grid-template-columns:1fr}.agreement-landing-primary{width:100%;justify-content:center}.agreement-landing-trust{align-items:stretch;flex-direction:column}.agreement-landing-trust strong,.agreement-landing-trust span{border-radius:12px}}
/* WEB-04: CookieYes como franja inferior compacta en todos los tamaños. */
.cky-consent-container { bottom:0 !important; left:0 !important; max-width:none !important; right:0 !important; width:100% !important; }
.cky-consent-container .cky-consent-bar { border-radius:0 !important; box-shadow:0 -4px 18px rgba(18,63,77,.14) !important; max-width:none !important; padding:10px max(16px,calc((100% - 1180px)/2 + 24px)) !important; width:100% !important; }
.cky-consent-container .cky-notice,.cky-consent-container .cky-notice-group { align-items:center !important; display:flex !important; gap:16px !important; justify-content:space-between !important; }
.cky-consent-container .cky-notice-des,.cky-consent-container .cky-notice-des p { font-size:12px !important; line-height:1.4 !important; margin:0 !important; }
.cky-consent-container .cky-notice-btn-wrapper { display:flex !important; flex:0 0 auto !important; flex-direction:row !important; gap:8px !important; margin:0 !important; }
.cky-consent-container .cky-btn { margin:0 !important; min-height:36px !important; padding:7px 12px !important; width:auto !important; }
@media (max-width:767px) {
  .cky-consent-container .cky-notice,.cky-consent-container .cky-notice-group { align-items:stretch !important; flex-direction:column !important; gap:8px !important; }
  .cky-consent-container .cky-notice-btn-wrapper { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; width:100% !important; }
  .cky-consent-container .cky-btn { font-size:11px !important; padding:7px 4px !important; width:100% !important; }
}