/* ========================= */
/*        MANIFIESTO         */
/* ========================= */

.big-statement{
    max-width:1150px;
    font-family:var(--font-serif);
    font-size:clamp(34px, 5vw, 74px);
    font-weight:600;
    line-height:1.02;
    letter-spacing:-.04em;
    text-wrap:balance;
}

.manifesto-body{
    max-width:560px;
    margin:44px 0 0 auto;
    color:var(--fg-2);
    font-size:clamp(17px, 1.4vw, 20px);
    line-height:1.6;
}

.manifesto-body strong{
    color:var(--fg);
    font-weight:700;
}

.principles{
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1.3fr 1fr;
    margin-top:90px;
    border-top:1.5px solid var(--fg);
}

.principles li{ padding:34px 36px 6px 0; }

.principles li + li{
    padding-left:36px;
    border-left:1px solid var(--line);
}

.principles .num{
    font-family:var(--font-serif);
    font-size:52px;
    font-weight:300;
    line-height:1;
    letter-spacing:-.04em;
    color:var(--fg-3);
}

.principles h3{
    margin:18px 0 12px;
    font-family:var(--font-serif);
    font-size:22px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.02em;
}

.principles p{ color:var(--fg-3); }

/* ========================= */
/*   SERVICIOS (FICHA)       */
/* ========================= */

.service-list{
    list-style:none;
    border-top:1.5px solid var(--fg);
}

.service-item{
    position:relative;
    isolation:isolate;
    border-bottom:1px solid var(--line);
}

.service-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .5s var(--ease);
}

.service-row{
    width:100%;
    display:grid;
    grid-template-columns:70px minmax(0, 1.1fr) minmax(0, 1fr) 40px;
    align-items:center;
    gap:24px;
    padding:28px 12px;
    background:none;
    border:none;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:color .3s, padding .5s var(--ease);
}

.service-row .num{
    color:var(--fg-3);
    transition:color .3s;
}

.service-row .num::before{ content:"S-"; }

.service-name{
    font-family:var(--font-serif);
    font-size:clamp(22px, 2.7vw, 36px);
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.03em;
}

.service-desc{
    color:var(--fg-3);
    font-size:15.5px;
    transition:color .3s;
}

.service-plus{
    position:relative;
    width:38px;
    height:38px;
    border:1.5px solid var(--line-strong);
    border-radius:4px;
    transition:transform .45s var(--ease), border-color .3s, background .3s;
}

.service-plus::before,
.service-plus::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:12px;
    height:1.5px;
    background:currentColor;
    transform:translate(-50%,-50%);
}

.service-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }

@media (hover:hover){
    .service-item:not(.open):hover::before{ transform:scaleX(1); }
    .service-item:not(.open):hover .service-row{ color:#F1F0EA; padding-left:28px; }
    .service-item:not(.open):hover .num,
    .service-item:not(.open):hover .service-desc{ color:#B9B4C2; }
    .service-item:not(.open):hover .service-plus{ border-color:#D8B77A; color:#D8B77A; transform:rotate(90deg); }
}

.service-item.open{ background:var(--panel); }

.service-item.open .service-plus{
    transform:rotate(45deg);
    background:var(--ink);
    border-color:var(--ink);
    color:#F1F0EA;
}

.service-detail{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .5s var(--ease);
}

.service-item.open .service-detail{ grid-template-rows:1fr; }

.service-detail-inner{
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:24px;
    padding:0 50px 0 106px;
}

.service-item.open .service-detail-inner{ padding-bottom:36px; }

.service-detail h4{
    margin-bottom:12px;
    color:var(--accent);
}

.service-detail ul{ list-style:none; }

.service-detail li{
    padding:8px 0;
    border-bottom:1px dashed var(--line-strong);
    color:var(--fg-2);
}

.service-detail li::before{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:10px;
    background:var(--accent);
    transform:translateY(-2px) rotate(45deg);
}

.service-detail p{
    margin-bottom:22px;
    color:var(--fg-2);
}

/* ========================= */
/*           CASOS           */
/* ========================= */

.case-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    border-top:1.5px solid var(--fg);
    counter-reset:caso;
}

.case{
    position:relative;
    padding:44px 48px 52px 0;
    border-bottom:1px solid var(--line);
    counter-increment:caso;
}

.case:nth-child(even){
    padding:44px 0 52px 48px;
    border-left:1px solid var(--line);
}

.case-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:44px;
    color:var(--fg-3);
}

.case-meta .mono::before{
    content:"C-0" counter(caso) " · ";
    color:var(--accent);
}

.status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--fg-2);
}

.status.done::before{
    content:"✓";
    color:var(--accent);
}

.case-name{
    font-family:var(--font-serif);
    font-size:clamp(36px, 4.4vw, 62px);
    font-weight:600;
    line-height:1;
    letter-spacing:-.045em;
}

.case-name .amp{
    font-style:normal;
    font-weight:300;
    color:var(--fg-3);
}

.case-what{
    margin:14px 0 26px;
    color:var(--primary-light);
    font-size:clamp(16px, 1.3vw, 18px);
    font-weight:700;
    line-height:1.4;
}

.case-metric{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:baseline;
    gap:14px 16px;
    padding:22px 0;
    margin-bottom:22px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.case-metric > .blocks,
.case-metric > .bars,
.case-metric > .merge{ grid-column:1 / -1; }

.case-metric strong{
    font-family:var(--font-serif);
    font-size:clamp(28px, 2.6vw, 38px);
    font-weight:600;
    letter-spacing:-.035em;
    line-height:1;
    white-space:nowrap;
}

.case-metric span{
    color:var(--fg-3);
    font-size:14px;
}

/* Bloques: 1 bloque = 1 mes de trabajo ahorrado */
.blocks{
    display:flex;
    gap:6px;
}

.blocks i{
    width:44px;
    height:22px;
    background:var(--accent);
    transform-origin:left;
}

.in .blocks i{ animation:grow .7s var(--ease) both; }
.in .blocks i:nth-child(2){ animation-delay:.12s; }
.in .blocks i:nth-child(3){ animation-delay:.24s; }
.in .blocks i:nth-child(4){ animation-delay:.36s; }

/* Barras a escala: 60 min contra 10 min */
.bars{
    display:grid;
    gap:8px;
}

.bar{
    display:grid;
    grid-template-columns:56px 1fr 60px;
    align-items:center;
    gap:12px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--fg-3);
}

.bar b{
    display:block;
    width:var(--w);
    height:14px;
    background:var(--line-strong);
    transform-origin:left;
}

.bar.now b{ background:var(--accent); }

.bar em{
    color:var(--fg-2);
    font-weight:700;
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.in .bar b{ animation:grow .9s var(--ease) both; }
.in .bar.now b{ animation-delay:.2s; }

/* Muchas piezas que terminan en una sola */
.merge{
    display:flex;
    align-items:center;
    gap:6px;
}

.merge i{
    width:14px;
    height:14px;
    border:1.5px solid var(--line-strong);
}

.merge b{
    width:44px;
    height:22px;
    margin-left:18px;
    background:var(--accent);
    position:relative;
}

.merge b::before{
    content:"→";
    position:absolute;
    right:calc(100% + 4px);
    top:50%;
    transform:translateY(-52%);
    color:var(--fg-3);
    font-size:14px;
}

.case-desc{
    max-width:480px;
    color:var(--fg-3);
}

.tags{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:24px;
}

.tags li{
    padding:5px 10px;
    border:1px solid var(--line-strong);
    border-radius:2px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--fg-2);
}

.cases-cta{
    margin-top:46px;
    color:var(--fg-2);
    font-size:19px;
}

/* ========================= */
/*        COMPARATIVA        */
/* ========================= */

.compare-table{ border-top:1.5px solid var(--fg); }

.compare-row{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);
    align-items:baseline;
    gap:24px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
}

.compare-row > span:first-child{
    font-family:var(--font-serif);
    font-size:18px;
    font-weight:600;
    letter-spacing:-.015em;
}

.compare-row > span:nth-child(2){
    color:var(--fg-3);
    text-decoration:line-through;
    text-decoration-color:var(--line-strong);
}

.compare-row > span:nth-child(3){
    color:var(--fg);
    font-weight:600;
}

.compare-row > span:nth-child(3)::before{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:10px;
    background:var(--accent);
    transform:translateY(-2px) rotate(45deg);
}

.compare-headrow{ padding:14px 0; }

.compare-headrow > span{
    color:var(--fg-3) !important;
    font-family:var(--font-sans) !important;
    font-size:11px !important;
    font-weight:700 !important;
    text-decoration:none !important;
}

.compare-headrow > span::before{ content:none !important; }
.compare-headrow > span:nth-child(3){ color:var(--accent) !important; }

/* ========================= */
/*          PROCESO          */
/* ========================= */

.steps{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
}

.step{
    position:relative;
    padding:0 28px 0 0;
}

.step::before{
    content:"";
    display:block;
    height:1.5px;
    margin-bottom:30px;
    background:var(--fg);
}

.step::after{
    content:"";
    position:absolute;
    top:-4px;
    left:0;
    width:9px;
    height:9px;
    background:var(--accent);
    transform:rotate(45deg);
}

.step-num{
    font-family:var(--font-serif);
    font-size:52px;
    font-weight:300;
    line-height:1;
    letter-spacing:-.04em;
    color:var(--fg-3);
}

.step-num::before{
    content:"Fase ";
    display:block;
    margin-bottom:8px;
    font-family:var(--font-sans);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
}

.step h3{
    margin:20px 0 10px;
    font-family:var(--font-serif);
    font-size:20px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.015em;
}

.step p{
    color:var(--fg-3);
    font-size:16px;
}

/* ========================= */
/*   GARANTÍA POR FASES      */
/* ========================= */

.guard-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    border:1.5px solid var(--fg);
    background:var(--panel);
}

.guard-item{ padding:30px 26px 32px; }

.guard-item + .guard-item{ border-left:1px solid var(--line); }

.guard-item h3{
    margin-bottom:10px;
    font-family:var(--font-serif);
    font-size:19px;
    font-weight:600;
    letter-spacing:-.015em;
}

.guard-item h3::before{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:10px;
    background:var(--accent);
    transform:translateY(-2px) rotate(45deg);
}

.guard-item p{
    color:var(--fg-3);
    font-size:15.5px;
}

/* ========================= */
/*            FAQ            */
/* ========================= */

.faq-list{
    max-width:980px;
    border-top:1.5px solid var(--fg);
}

.faq details{ border-bottom:1px solid var(--line); }

.faq summary{
    position:relative;
    padding:24px 50px 24px 0;
    list-style:none;
    cursor:pointer;
    font-family:var(--font-serif);
    font-size:clamp(17px, 1.6vw, 21px);
    font-weight:600;
    letter-spacing:-.015em;
    transition:color .25s;
}

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

.faq summary::after{
    content:"+";
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    font-weight:300;
    font-size:28px;
    color:var(--fg-3);
    transition:transform .3s var(--ease), color .3s;
}

.faq details[open] summary::after{
    transform:translateY(-50%) rotate(45deg);
    color:var(--accent);
}

.faq summary:hover{ color:var(--accent); }

.faq details p{
    max-width:760px;
    padding:0 50px 26px 0;
    color:var(--fg-2);
}

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

.contact-title{
    margin-bottom:70px;
    font-family:var(--font-serif);
    font-size:clamp(38px, 6.4vw, 100px);
    font-weight:600;
    line-height:.98;
    letter-spacing:-.05em;
    text-wrap:balance;
}

.contact-grid{ border-top:1.5px solid var(--fg); }

.contact-row{
    display:grid;
    grid-template-columns:140px minmax(0,1fr) auto;
    align-items:center;
    gap:24px;
    padding:26px 0;
    border-bottom:1px solid var(--line);
    text-decoration:none;
    transition:padding .45s var(--ease), color .3s;
}

.contact-row .mono{ color:var(--fg-3); }

.contact-value{
    font-family:var(--font-serif);
    font-size:clamp(22px, 2.8vw, 38px);
    font-weight:500;
    letter-spacing:-.03em;
    overflow-wrap:anywhere;
    user-select:all;
}

.contact-hint{
    color:var(--fg-3);
    font-size:15px;
    transition:color .3s;
}

.contact-row:hover{ padding-left:16px; }

.contact-row:hover .contact-value,
.contact-row:hover .contact-hint{ color:var(--accent); }