/* =========================================================================
   PLAN DE TRABAJO — /plan-de-trabajo/ (página oculta, no enlazada)
   Hereda TODO de site.css: tokens, barra, pie, botones, .section, .shell,
   .head, .qa, .cta, .kv, .stats y el aviso de cookies.
   Aquí viven solo los tres componentes que no existían: el recorrido en
   línea de tiempo, las tres formas de trabajar y la tabla de precios.
   ========================================================================= */

/* ---------- portada ---------- */
.ptop{ padding-top:clamp(96px, 14vh, 168px); padding-bottom:var(--s6); }
.ptop__h1{
  font-size:var(--t-hero); font-weight:200; letter-spacing:-.05em; line-height:1.02;
  margin-top:var(--s3);
}
.ptop__sub{
  margin-top:var(--s3); max-width:36ch;
  font-size:var(--t-lead); font-weight:300; line-height:1.45; letter-spacing:-.015em;
  color:var(--ink-60);
}
.ptop__nav{
  display:flex; flex-wrap:wrap; gap:0 var(--s4);
  margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid var(--line);
}
.ptop__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-small); font-weight:300; color:var(--ink-60);
  transition:color var(--dur) var(--ease);
}
.ptop__nav a:hover{ color:var(--signal-deep); }

/* ---------- 01 · recorrido (línea de tiempo) ----------
   Móvil: vertical, con el raíl a la izquierda.
   Escritorio: horizontal, con las etapas escalonadas arriba y abajo. */
.ruta{ display:grid; gap:0; }
.ruta__e{
  position:relative; padding:0 0 var(--s4) var(--s4);
  border-left:1px solid var(--line);
}
.deep .ruta__e{ border-left-color:var(--line-deep); }
.ruta__e:last-child{ border-left-color:transparent; padding-bottom:0; }
.ruta__e::before{
  content:""; position:absolute; left:-5px; top:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 0 4px rgba(0,158,254,.18);
}
.ruta__c{ font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--signal-deep); }
.deep .ruta__c{ color:var(--signal); }
.ruta__t{ margin-top:6px; font-size:1.0625rem; font-weight:400; letter-spacing:-.02em; }
.deep .ruta__t{ color:var(--white); }
.ruta__d{ margin-top:8px; font-size:var(--t-small); font-weight:300; line-height:1.5; color:var(--ink-60); }
.deep .ruta__d{ color:var(--on-deep-60); }
.ruta__d b{ font-weight:500; color:var(--ink); }
.deep .ruta__d b{ color:var(--on-deep); }

@media (min-width:1040px){
  .ruta{
    grid-template-columns:repeat(6, minmax(0,1fr));
    grid-template-rows:auto 1px auto;
    column-gap:var(--s3);
  }
  .ruta__raya{ grid-row:2; grid-column:1 / -1; background:var(--line); }
  .deep .ruta__raya{ background:var(--line-deep); }
  /* una etapa por columna, en el orden en que se leen */
  .ruta__e:nth-child(1){ grid-column:1; }
  .ruta__e:nth-child(2){ grid-column:2; }
  .ruta__e:nth-child(3){ grid-column:3; }
  .ruta__e:nth-child(4){ grid-column:4; }
  .ruta__e:nth-child(5){ grid-column:5; }
  .ruta__e:nth-child(6){ grid-column:6; }
  /* escalonadas: las impares encima del raíl, las pares debajo */
  .ruta__e{
    grid-row:1; align-self:end;
    padding:0 0 26px; border-left:0;
  }
  .ruta__e:nth-child(even){
    grid-row:3; align-self:start;
    padding:26px 0 0;
  }
  /* el palito que baja (o sube) hasta el raíl */
  .ruta__e::after{
    content:""; position:absolute; left:4px; bottom:0;
    width:1px; height:26px; background:var(--line);
  }
  .deep .ruta__e::after{ background:var(--line-deep); }
  .ruta__e:nth-child(even)::after{ bottom:auto; top:0; }
  .ruta__e::before{ left:0; top:auto; bottom:-4px; }
  .ruta__e:nth-child(even)::before{ bottom:auto; top:-4px; }
  .ruta__e:last-child{ padding-bottom:26px; }
}

/* ---------- 02 · tres formas de trabajar ---------- */
.vias{ display:grid; gap:var(--s3); grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .vias{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.via{
  position:relative; display:flex; flex-direction:column;
  padding:var(--s4) var(--s3) var(--s3);
  background:var(--white); border:1px solid var(--line);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.via:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(0,10,20,.45); }
.via--reco{ background:var(--ink-deep); border-color:var(--ink-deep); color:var(--on-deep); }
.via__sello{
  position:absolute; top:0; right:var(--s3); transform:translateY(-50%);
  padding:6px 12px; background:var(--signal); color:var(--ink-deep);
  font-size:var(--t-label); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.via__n{ font-size:var(--t-label); letter-spacing:.18em; color:var(--ink-45); font-variant-numeric:tabular-nums; }
.via--reco .via__n{ color:var(--on-deep-30); }
.via__t{ margin-top:var(--s2); font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; }
.via--reco .via__t{ color:var(--white); }
.via__p{
  margin-top:10px; font-size:1.25rem; font-weight:300; letter-spacing:-.02em;
  color:var(--signal-deep); font-variant-numeric:tabular-nums;
}
.via--reco .via__p{ color:var(--signal); }
.via__p small{ display:block; margin-top:4px; font-size:var(--t-small); color:var(--ink-45); letter-spacing:0; }
.via--reco .via__p small{ color:var(--on-deep-60); }
.via__d{
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line);
  font-size:var(--t-small); font-weight:300; line-height:1.55; color:var(--ink-60);
}
.via--reco .via__d{ border-top-color:var(--line-deep); color:var(--on-deep-60); }

/* ¿cuál te conviene? */
.cual{ margin-top:var(--s5); border-top:1px solid var(--line); }
.cual__h{ margin-block:var(--s4) var(--s3); font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; }
.cual__l{ display:grid; gap:0; }
.cual__i{
  display:grid; gap:4px var(--s4); grid-template-columns:minmax(0,1fr);
  padding-block:var(--s3); border-bottom:1px solid var(--line);
}
@media (min-width:720px){ .cual__i{ grid-template-columns:minmax(0,1fr) auto; align-items:baseline; } }
.cual__q{ font-weight:300; color:var(--ink-60); }
.cual__a{ font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--signal-deep); white-space:nowrap; }

/* ---------- 03 y 04 · el detalle de cada forma ---------- */
.bloque{ display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){
  .bloque{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s7); align-items:start; }
}
.bloque__p{
  font-size:clamp(1.75rem, 3vw, 2.5rem); font-weight:200; letter-spacing:-.045em; line-height:1;
  color:var(--signal-deep); font-variant-numeric:tabular-nums;
}
.deep .bloque__p{ color:var(--signal); }
.bloque__cond{ margin-top:10px; font-size:var(--t-small); color:var(--ink-45); }
.deep .bloque__cond{ color:var(--on-deep-60); }
.bloque__lead{ margin-top:var(--s3); font-weight:300; line-height:1.55; color:var(--ink-60); max-width:38ch; }
.deep .bloque__lead{ color:var(--on-deep-60); }

.lista{ display:grid; gap:11px; }
.lista li{
  position:relative; padding-left:20px;
  font-weight:300; line-height:1.5; color:var(--ink-60);
}
.deep .lista li{ color:var(--on-deep-60); }
.lista li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:8px; height:8px; border-radius:50%; background:var(--signal);
}
.lista strong{ font-weight:500; color:var(--ink); }
.deep .lista strong{ color:var(--white); }
.lista--no li::before{ background:var(--grey); }

.sub{
  margin-bottom:var(--s3); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45);
}
.deep .sub{ color:var(--on-deep-60); }
.bloque__grupo + .bloque__grupo{ margin-top:var(--s5); }

/* ---------- 05 · precios de los servicios sueltos ---------- */
.tarifas{ border-top:1px solid var(--line); }
.deep .tarifas{ border-top-color:var(--line-deep); }
.tarifa{
  display:grid; gap:2px var(--s4); grid-template-columns:minmax(0,1fr);
  padding-block:var(--s3); border-bottom:1px solid var(--line);
}
.deep .tarifa{ border-bottom-color:var(--line-deep); }
@media (min-width:640px){ .tarifa{ grid-template-columns:minmax(0,1fr) auto; align-items:baseline; } }
.tarifa__k{ font-weight:300; }
.tarifa__n{ font-size:var(--t-small); color:var(--ink-45); }
.deep .tarifa__n{ color:var(--on-deep-60); }
.tarifa__v{
  font-size:1.0625rem; font-weight:400; letter-spacing:-.01em; white-space:nowrap;
  color:var(--signal-deep); font-variant-numeric:tabular-nums;
}
.deep .tarifa__v{ color:var(--signal); }

/* ---------- 05 · métricas con icono ---------- */
/* cada métrica lleva su propio borde: si la última fila queda a medias,
   no se dibuja ningún hueco vacío */
.mets{ display:grid; gap:var(--s2); grid-template-columns:minmax(0,1fr); }
@media (min-width:540px){ .mets{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:960px){ .mets{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.met{
  display:flex; flex-direction:column; gap:6px;
  padding:var(--s3); border:1px solid var(--line-deep);
  transition:border-color var(--dur) var(--ease);
}
.met:hover{ border-color:var(--signal); }
.met__i{ display:block; width:22px; height:22px; margin-bottom:6px; color:var(--signal); }
.met__i svg{ width:100%; height:100%; display:block; }
.met__n{
  font-size:clamp(1.8rem, 3.2vw, 2.6rem); font-weight:200; letter-spacing:-.05em; line-height:.95;
  color:var(--white); font-variant-numeric:tabular-nums;
}
.met__k{ font-size:var(--t-small); font-weight:300; line-height:1.4; color:var(--on-deep); }
.met__f{ margin-top:auto; padding-top:var(--s2); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--on-deep-60); }

/* lo que se ahorra */
.ahorro{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line-deep); }
.ahorro__h{ font-size:var(--t-h3); font-weight:400; letter-spacing:-.03em; color:var(--white); }
.ahorro__intro{ margin-top:var(--s2); max-width:52ch; font-weight:300; line-height:1.55; color:var(--on-deep-60); }
.ahorros{
  display:grid; gap:var(--s3); margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){ .ahorros{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s4); } }
.ahr{ display:flex; flex-direction:column; gap:6px; padding-top:var(--s3); border-top:2px solid var(--signal); }
.ahr__n{
  font-size:clamp(1.9rem, 3.4vw, 2.75rem); font-weight:200; letter-spacing:-.05em; line-height:1;
  color:var(--signal); font-variant-numeric:tabular-nums;
}
.ahr__k{ font-size:var(--t-small); font-weight:300; line-height:1.5; color:var(--on-deep-60); }
.ahorro__pie{ margin-top:var(--s5); font-size:var(--t-label); line-height:1.6; letter-spacing:.04em; color:var(--on-deep-60); max-width:66ch; }

/* ---------- 09 · cierre ---------- */
.fin{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.fin .btn{ flex:0 0 auto; }
.btn--wa{ --btn-bg:#25D366; --btn-fg:#04291a; --btn-bd:#25D366; }
.deep .btn--wa{ --btn-bg:#25D366; --btn-fg:#04291a; --btn-bd:#25D366; }
.btn--wa:hover, .deep .btn--wa:hover{ --btn-bg:#1FB356; --btn-bd:#1FB356; --btn-fg:#04291a; }
@media (max-width:519px){ .fin .btn{ width:100%; justify-content:center; } }