/* Bloque "Protección Advancing" (mismo que en la home): cifras y calendario del día 5 */
/* ---------- protección Advancing: banda a todo el ancho, cuatro cifras grandes y calendario ---------- */
.proteccion-sec{background:var(--gris-claro);padding:clamp(40px,5vw,64px) 0}
.proteccion-cab{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
.proteccion-cab h2{font-size:clamp(26px,2.8vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.proteccion-cab .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--marino)}
.proteccion-cab .pill .ic{width:18px;height:18px;color:var(--verde)}
.proteccion-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(24px,3vw,36px)}
.datos{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1fr);margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--borde)}
.dato{padding:0 clamp(24px,3vw,48px)}
.dato:first-child{padding-left:0}
.datos .dato:last-child{padding-right:0}
.dato + .dato{border-left:1px solid var(--borde)}
.dato-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--marino);margin-bottom:12px}
.dato-ic .ic{width:19px;height:19px}
.dato-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dato-top .dato-ic{margin-bottom:0}
.dato small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--gris)}
.dato b{--n:clamp(28px,2.8vw,40px);display:block;font-size:var(--n);font-weight:700;line-height:1;color:var(--marino);letter-spacing:-.03em}
.dato b i{display:inline;margin-left:.2em;font-style:normal;font-size:1em;font-weight:inherit;letter-spacing:inherit}
.dato b.txt{font-size:var(--n);line-height:1}
@media (min-width:1180px){.dato b.txt,.datos .dato b{white-space:nowrap}}
/* las tres columnas comparten filas (icono, "HASTA", cifra, texto) para que cada cifra quede a la misma altura */
.datos{grid-template-rows:auto auto auto}
.datos > .dato{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
.datos .dato-top{grid-row:1}
.datos .dato b{grid-row:2}
.datos .dato p{grid-row:3}
.dato p{font-size:15px;line-height:1.45;color:var(--gris);margin-top:10px;max-width:24em}
/* día 5: la cifra protagonista, con su calendario al lado */
.dato.dia5{padding:0}
.dato.dia5 b{font-size:clamp(52px,6.2vw,84px);letter-spacing:-.04em}
.dato.dia5 p{font-size:16px;max-width:22em}
@media (max-width:860px){.proteccion-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .datos{grid-template-columns:minmax(0,1fr)}
  .dato{padding:20px 0}
  .dato + .dato{border-left:0;border-top:1px solid var(--borde)}
}
.proteccion-sec .cal{margin-top:0}
.cifra{display:inline-block;font-variant-numeric:tabular-nums;text-align:left}
.cal{margin-top:18px}
.cal-nums{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));text-align:center;font-family:var(--f);font-size:14px;color:var(--gris)}
.cal-nums .hoy{color:var(--marino);font-weight:700}
.cal-pista{position:relative;height:5px;margin:10px 5% 0;border-radius:5px;background:var(--borde)}
.cal-relleno{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--menta-suave),var(--menta));transform-origin:left center;transform:scaleX(.4444)}
.cal-mover{position:absolute;inset:0;transform:translateX(0)}
.cal-mover i{position:absolute;left:44.44%;top:50%;width:20px;height:20px;border-radius:50%;background:var(--menta);box-shadow:0 0 0 4px #fff;transform:translate(-50%,-50%)}
.cal small{display:block;margin-top:12px;margin-left:calc(5% + 44.44% * .9);transform:translateX(-50%);width:max-content;font-size:12.5px;font-weight:700;color:var(--marino)}
.cal-nums .hoy,.cal small{transition:opacity .4s ease 1.1s}
.cal-relleno,.cal-mover{transition:transform 1.4s cubic-bezier(.33,1,.68,1)}
/* estado inicial, solo si el script va a animarlo */
.cal-espera .cal-relleno{transform:scaleX(0)}
.cal-espera .cal-mover{transform:translateX(-44.44%)}
.cal-espera .cal small{opacity:0;transition:none}
@media (prefers-reduced-motion: reduce){.cal-relleno,.cal-mover{transition:none}}
.antes-grid .recorrido{padding-bottom:34px}
.cal small{letter-spacing:0}
@media (max-width:760px){
  /* datos de Protección al mismo tamaño */
  .proteccion-sec .dato b,.proteccion-sec .dato b:not(.txt),.proteccion-sec .dato.dia5 b,.proteccion-sec .dato b.txt{font-size:clamp(30px,9.6vw,38px);letter-spacing:-.03em;line-height:1.05}
  /* "mensualidades" al mismo tamaño que el número, como "Día" junto al 5 */
  .proteccion-sec .dato b i{display:inline;margin-left:.18em;font-size:1em;font-weight:inherit;letter-spacing:inherit}
  .proteccion-sec .dato.dia5 p{font-size:15px}
}
/* misma tipografía y tamaños que en la home */
.proteccion-sec h2,.proteccion-sec .dato b,.proteccion-sec .cifra{font-family:var(--f)}
.proteccion-cab h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;color:var(--marino)}

/* móvil: las cifras de Protección nunca más grandes que el título de la sección */
@media (max-width:760px){
  .proteccion-sec .dato b,.proteccion-sec .dato b:not(.txt),.proteccion-sec .dato.dia5 b,.proteccion-sec .dato b.txt{font-size:26px;line-height:1.1;letter-spacing:-.02em}
}