/* STRONGER — Reto 21: estilos del template (fieles al design system) + responsive. */
body{margin:0;background:#F2F2EF}*{box-sizing:border-box}
.rt-lbl{font-family:"Manrope",sans-serif;font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.rt-glass{background:rgba(255,255,255,.66);backdrop-filter:blur(26px) saturate(185%);-webkit-backdrop-filter:blur(26px) saturate(185%);border:1px solid rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 26px 54px -36px rgba(14,15,18,.3)}
.rt-seg{background:rgba(255,255,255,.62);border:1.5px solid rgba(14,15,18,.1);color:#0E0F12;transition:all .18s cubic-bezier(.4,0,.2,1)}
.rt-seg:hover{border-color:rgba(14,15,18,.3)}
.rt-seg[data-sel="1"]{background:linear-gradient(168deg,#454A52 0%,#3A3E45 100%);border-color:#3A3E45;color:#FFF;box-shadow:0 14px 30px -18px rgba(58,62,69,.55)}
.rt-pick{background:rgba(255,255,255,.62);backdrop-filter:blur(20px) saturate(180%);border:1.5px solid rgba(14,15,18,.09);box-shadow:0 1px 0 rgba(255,255,255,.9) inset;transition:all .2s cubic-bezier(.4,0,.2,1)}
.rt-pick:hover{border-color:rgba(14,15,18,.28);transform:translateY(-2px)}
.rt-pick[data-sel="1"]{background:rgba(237,240,254,.86);border-color:#1B33C4;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 40px -24px rgba(27,51,196,.45)}
.rt-n{color:#6E6E69;transition:color .18s}
.rt-pick[data-sel="1"] .rt-n{color:#1B33C4}
.rt-ring{border:1.5px solid rgba(14,15,18,.18);background:transparent}
.rt-pick[data-sel="1"] .rt-ring{border-color:#1B33C4;background:#1B33C4}
.rt-tick{opacity:0}
.rt-pick[data-sel="1"] .rt-tick{opacity:1}
.rt-sug{display:none}.rt-pick[data-sug="1"] .rt-sug{display:inline-flex}
.rt-food{background:rgba(255,255,255,.72);border:1px solid rgba(58,62,69,.75);color:#2A2F36;transition:all .16s cubic-bezier(.4,0,.2,1)}
.rt-food:hover{transform:translateY(-1px)}
.rt-food[data-sel="0"]{background:rgba(242,242,239,.6);border-color:rgba(14,15,18,.1);color:#6E6E69}
.rt-dot{background:#1B33C4}
.rt-food[data-sel="0"] .rt-dot{background:#D8D8D3}
.rt-add{background:transparent;border:1px dashed rgba(14,15,18,.3);color:#3A3E45;transition:all .16s}
.rt-add:hover{border-color:#0E0F12;background:rgba(255,255,255,.6)}
.rt-in{border:none;outline:none;background:transparent;font-family:"Manrope",sans-serif;font-size:14px;color:#0E0F12}
.rt-in::placeholder{color:#9A9A94}
.rt-ta{width:100%;min-height:104px;resize:vertical;padding:16px 18px;border-radius:16px;border:1px solid rgba(14,15,18,.12);background:rgba(255,255,255,.72);font-family:"Manrope",sans-serif;font-size:15px;line-height:1.6;color:#0E0F12;outline:none}
.rt-ta:focus{border-color:#1B33C4;box-shadow:0 0 0 3px #EDF0FE}
.rt-logo{position:relative;display:block}
.rt-logo img{display:block;width:100%;height:auto}
.rt-er{position:absolute;left:0;top:0}
.rt-er-on{animation:erOn 2.6s steps(1,end) .35s both}
@keyframes erOn{
0%,4%{opacity:.08;filter:none}
5%,7%{opacity:1;filter:drop-shadow(0 0 14px rgba(27,51,196,.75)) drop-shadow(0 0 34px rgba(27,51,196,.4)) brightness(1.22)}
8%,11%{opacity:.06;filter:none}
12%,13%{opacity:1;filter:drop-shadow(0 0 10px rgba(27,51,196,.6)) brightness(1.14)}
14%,19%{opacity:.1;filter:none}
20%,24%{opacity:1;filter:drop-shadow(0 0 18px rgba(27,51,196,.85)) drop-shadow(0 0 44px rgba(27,51,196,.45)) brightness(1.28)}
25%,28%{opacity:.24;filter:none}
29%,31%{opacity:1;filter:drop-shadow(0 0 12px rgba(27,51,196,.66)) brightness(1.16)}
32%,35%{opacity:.5;filter:drop-shadow(0 0 6px rgba(27,51,196,.3))}
36%,100%{opacity:1;filter:drop-shadow(0 0 16px rgba(27,51,196,.62)) drop-shadow(0 0 40px rgba(27,51,196,.34)) brightness(1.2)}}
.rt-er-glow{filter:drop-shadow(0 0 16px rgba(27,51,196,.7)) drop-shadow(0 0 44px rgba(27,51,196,.4)) brightness(1.2)}

/* Modelos 3D (láminas recortadas).
   El encuadre NO depende de transform: llena el recuadro con inset + object-fit,
   así la animación de oscilación no puede descentrar ni recortar la figura
   (era lo que pasaba en la tarjeta seleccionada). */
.rt-modelbox{isolation:isolate}
.rt-model{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:contain;object-position:center center;
  padding:3% 4%;
  pointer-events:none;z-index:1;
}
.rt-modelbox-sm .rt-model{padding:2% 3%}
/* Oscilación sutil sobre el eje Y (no un giro real: son imágenes planas) */
/* Punto de fuga lejano a propósito: con 900px la proyección crecía 14 px de alto
   y el recuadro (overflow:hidden) recortaba la figura en la tarjeta seleccionada. */
@keyframes rtSpinY{
  0%,100%{transform:perspective(1800px) rotateY(-9deg)}
  50%{transform:perspective(1800px) rotateY(9deg)}
}
.rt-spin{animation:rtSpinY 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rt-spin{animation:none}}

/* Lockup CSS de respaldo mientras faltan los PNG del logo */
.st-lockup{display:inline-flex;align-items:flex-end;gap:2px;border:none}
.st-lockup-tile{display:inline-flex;flex-direction:column;align-items:flex-start;background:#0E0F12;color:#FFF;border:3px solid #0E0F12;padding:.18em .34em .22em;line-height:1}
.st-lockup-tile .n{font-family:"Space Mono",monospace;font-weight:700;font-size:.32em;letter-spacing:.1em}
.st-lockup-tile .sym{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.62em;margin-top:.08em}
.st-lockup-tile .word{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.44em;letter-spacing:.06em;margin-top:.14em}
.st-lockup .er{font-family:"Pacifico",cursive;color:#1B33C4;font-size:.9em;margin-left:.08em;transform:translateY(.1em)}
.st-lockup.inverse .st-lockup-tile{background:#FFF;color:#0E0F12;border-color:#FFF}

/* ===== Responsive móvil ===== */
html{-webkit-text-size-adjust:100%}
@media (max-width:760px){
  /* En móvil se ve primero «Mantenimiento» = tu forma de hoy (el resto conserva 01→04). */
  .rt-objetivos [data-obj="habito"]{order:-1}
  .rt-header{padding:0 18px !important;height:66px !important;gap:14px !important}
  .rt-header .rt-progress{display:none !important}
  .rt-main{padding:0 18px 90px !important}
  .rt-hero{padding:72px 0 64px !important}
  .rt-h1{font-size:clamp(24px,7.6vw,34px) !important;letter-spacing:.1em !important}
  .rt-h2{font-size:clamp(28px,8vw,34px) !important}
  .rt-grid-3{grid-template-columns:1fr !important}
  .rt-grid-4{grid-template-columns:repeat(2,1fr) !important}
  .rt-grid-2{grid-template-columns:1fr !important}
  .rt-objetivos{grid-template-columns:repeat(2,1fr) !important}
  .rt-fuentes{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .rt-row{flex-wrap:wrap !important}
  .rt-row>*{flex:1 1 44% !important}
  .rt-card-pad{padding:22px 18px !important}
  .rt-checkout{grid-template-columns:1fr !important}
  .rt-price{font-size:58px !important}
  .rt-metric-v{font-size:32px !important}
  .rt-antes{grid-template-columns:1fr !important;gap:12px !important}
  .rt-antes>div:nth-child(2){flex-direction:row !important;justify-content:center !important}
  .rt-antes>div:nth-child(2) svg{transform:rotate(90deg)}
}
@media (max-width:430px){
  .rt-objetivos{grid-template-columns:1fr !important}
  .rt-grid-4{grid-template-columns:1fr !important}
}