/* ============================================================================ RC TURISMO AVENTURA — simulador de /seguro-turismo-aventura/ (17/09/2026) Bloque PROPIO y autónomo, con prefijo .rct- (verificado libre: 0 apariciones en el repo antes de este archivo). No reusa ni una sola clase de otro bloque. POR QUÉ NO SE APOYA EN .calc__* ------------------------------- El esqueleto compartido de simuladores —el bloque rotulado «CAUCIÓN»— lo consumen varios archivos JS repartidos en decenas de páginas y en la mayoría de las verticales del sitio. Tocarlo para acomodar una vertical nueva es la forma conocida de romper las otras. Igual que casa rodante, esta vertical trae su propio bloque y no le pide nada a nadie. POR QUÉ ES TODO DE BOTONES -------------------------- El precio va a la vista sin pedir datos (la lección de praxis). Nadie escribe nada: el guía toca su perfil, la suma y la vigencia, y el número por día aparece solo. MAPA DEL MARKUP QUE ESTE CSS VISTE (para quien escriba turismo-aventura.js) -------------------------------------------------------------------------- .rct-calc .rct-step > .rct-step__n + .rct-step__body (h3, .rct-step__hint, controles) .rct-chips[.rct-chips--sumas] > button.rct-chip > b + small .rct-dedu > .rct-dedu__l2 + texto + .rct-dedu__l1 .rct-vigs > button.rct-vig[.rct-vig--top] > .rct-vig__sello, __nombre, __dia, __total, __cuotas, __arg .rct-acts > .rct-acts__head (.rct-cont + button.rct-todo) > .rct-grupo > .rct-grupo__tit + .rct-tags > button.rct-tag > .rct-escape .rct-res > .rct-res__lbl, __dia, __cuenta, __total > .rct-part > .rct-res__partlbl + .rct-chips--pax > button.rct-chip--pax + .rct-res__partout > .rct-ap > button.rct-ap__sw + .rct-ap__txt (+ .rct-ap__why) > .rct-res__actions + .rct-res__disc El estado elegido se marca con la clase .is-on en el botón (y aria-pressed para el lector de pantalla). El switch de AP acepta las dos formas: .is-on o aria-checked="true", así el JS puede usar role="switch" sin pelearse con el CSS. ============================================================================ */ .rct-calc{display:grid;gap:1.1rem;} /* ⚠️ min-width:0 en los hijos NO es adorno: sin esto la página tiene scroll horizontal en celular. Los items de un grid arrancan con min-width:auto, que les prohíbe encogerse por debajo del ancho de su contenido — y el panel de resultado, con el precio grande y los chips del partidor, pedía 403px dentro de un contenedor de 340. El desborde se propaga al y termina empujando hasta el header del sitio, así que se ve como si estuviera rota la página entera y no el simulador. Medido en 375px de ancho: 420 → 375. */ .rct-calc > *{min-width:0;} /* --- Los pasos numerados --------------------------------------------------- */ .rct-step{display:flex;gap:.9rem;align-items:flex-start;} .rct-step__n{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-pill); display:grid;place-items:center;font-weight:800;font-size:.9rem;color:#fff; background:linear-gradient(135deg,var(--magenta) 0%,var(--purple) 100%);margin-top:.15rem;} .rct-step__body{flex:1 1 auto;min-width:0;} .rct-step__body h3{margin:0 0 .5rem;font-size:1.05rem;font-weight:800;color:var(--fg-1);} .rct-step__hint{margin:-.25rem 0 .6rem;font-size:.88rem;color:var(--fg-3);line-height:1.5;} /* --- Chips: perfil (paso 1) y suma asegurada (paso 2) ---------------------- */ /* 48px de alto mínimo: es el dedo, no el diseño. El guía mira esto parado en un refugio con el celular en una mano. */ .rct-chips{display:flex;flex-wrap:wrap;gap:.5rem;} .rct-chip{appearance:none;cursor:pointer;text-align:left;font:inherit; background:var(--bg-1);border:2px solid var(--border-1);border-radius:var(--r-md); padding:.6rem .85rem;min-height:48px;display:flex;flex-direction:column;justify-content:center; transition:border-color .15s var(--ease),background .15s var(--ease),transform .12s var(--ease);} .rct-chip:hover{border-color:var(--magenta-300);transform:translateY(-1px);} .rct-chip b{display:block;font-size:.95rem;font-weight:800;color:var(--fg-1);line-height:1.2;} .rct-chip small{display:block;font-size:.78rem;color:var(--fg-3);margin-top:.1rem;} .rct-chip.is-on{border-color:var(--magenta);background:var(--magenta-50);} .rct-chip.is-on b{color:var(--magenta-700);} /* Las seis sumas son números cortos y comparables: centrados, angostos y con cifras de ancho fijo para que la escalera se lea como escalera. */ /* Los chips de suma se marcan con su propia clase además de estar dentro del contenedor, porque el JS los emite así. Se estilan por las dos vías para que funcionen aunque alguna vez se los use sueltos, fuera de .rct-chips--sumas. */ .rct-chips--sumas .rct-chip, .rct-chip--suma{min-width:84px;align-items:center;text-align:center;} .rct-chips--sumas .rct-chip b, .rct-chip--suma b{font-variant-numeric:tabular-nums;} /* --- La franja del deducible ----------------------------------------------- */ /* Va pegada debajo de los chips de suma porque el piso del deducible SUBE con la suma: es la contra de elegir más cobertura y hay que verla en el mismo gesto, no tres pantallas abajo. Tono: la paleta magenta suave del sitio (la misma de .tools-note--warn y del aviso de praxis). NO es un error, es un dato incómodo — acá no hay tokens de ámbar y no se inventa uno por un cartel. */ .rct-dedu{margin:.7rem 0 0;padding:.75rem .9rem;border-radius:var(--r-md); background:var(--magenta-50);border:1px solid var(--magenta-100); font-size:.88rem;line-height:1.55;color:var(--fg-2);} /* Dos párrafos, no una etiqueta y un texto: el JS emite __l1 con el ejemplo numérico (que se recalcula con la suma elegida) y __l2 con la advertencia fija de que más suma es más piso. */ .rct-dedu__l1{margin:0;font-weight:700;color:var(--magenta-700); font-variant-numeric:tabular-nums;} .rct-dedu__l2{margin:.5rem 0 0;color:var(--fg-2);} .rct-dedu strong{color:var(--ink-900);font-weight:800;} /* --- El aviso del mínimo legal del EMETUR (sólo aparece con cotización) ----- */ /* Lo pinta avisoMinimoLegal() en el JS y compara la suma elegida contra los u$s 50.000 de la Resolución 492/96, convertidos con el dólar del BCRA. Dos estados: is-ok (la suma alcanza) e is-corto (no llega). El segundo NO usa rojo de error: no es que el cliente se equivocó, es un dato que necesita para elegir. El borde izquierdo grueso es lo único que los diferencia de un vistazo, y además cambia el texto — no se confía sólo en el color. */ .rct-dedu__min{margin:.6rem 0 0;padding:.55rem .75rem;border-radius:var(--r-sm,8px); background:rgba(255,255,255,.75);border-left:3px solid var(--magenta-300); font-size:.86rem;line-height:1.5;color:var(--fg-2);} .rct-dedu__min.is-corto{border-left-color:var(--magenta);background:#fff;} .rct-dedu__min small{display:block;margin-top:.3rem;font-size:.78rem;color:var(--fg-3);line-height:1.45;} /* El aviso de las cuatro actividades de la norma que el slip no nombra. Va en el cuerpo de la página (no en el simulador) y comparte el tono del deducible: dato incómodo dicho de frente, no advertencia de error. */ .rct-aviso{margin:.9rem 0 0;padding:.85rem 1rem;border-radius:var(--r-md); background:var(--magenta-50);border-left:3px solid var(--magenta); font-size:.92rem;line-height:1.6;color:var(--fg-2);} .rct-aviso strong{color:var(--ink-900);font-weight:800;} /* --- Las tres vigencias ---------------------------------------------------- */ /* Apiladas en celular y en tres columnas desde 720px (abajo). Se muestran las tres a la vez y no se preguntan: la anual gana sola cuando se ve al lado de las otras dos. */ .rct-vigs{display:grid;gap:.6rem;grid-template-columns:1fr;margin-top:.2rem;} .rct-vig{position:relative;appearance:none;cursor:pointer;text-align:left;font:inherit; background:var(--bg-1);border:2px solid var(--border-1);border-radius:var(--r-md); padding:1rem;display:grid;gap:.25rem;align-content:start; transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .12s var(--ease);} .rct-vig:hover{border-color:var(--magenta-300);transform:translateY(-1px);box-shadow:var(--shadow-md);} /* La anual queda marcada aunque no esté elegida: es la barata de verdad. */ .rct-vig--top{border-color:var(--magenta-300);box-shadow:var(--shadow-xs);} .rct-vig.is-on{border-color:var(--magenta);background:var(--magenta-50);box-shadow:var(--shadow-md);} .rct-vig__sello{position:absolute;top:-10px;right:12px;font-size:.68rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:#fff;border-radius:var(--r-pill); padding:.22rem .6rem;background:linear-gradient(135deg,var(--magenta) 0%,var(--purple) 100%);} .rct-vig__nombre{font-size:.8rem;font-weight:800;color:var(--magenta-700); text-transform:uppercase;letter-spacing:.05em;} .rct-vig__dia{font-size:1.5rem;font-weight:800;color:var(--fg-1);letter-spacing:-.01em; font-variant-numeric:tabular-nums;line-height:1.1;} .rct-vig__dia small{font-size:.8rem;font-weight:700;color:var(--fg-3);margin-left:.35rem;letter-spacing:0;} /* «por día» va en su propio renglón, chiquito y sin peso: el número de arriba es el que tiene que leerse solo. Lo emite el JS como span aparte y no como dentro del precio, así que necesita su propia regla. */ .rct-vig__pordia{display:block;margin-top:-.15rem;font-size:.78rem;font-weight:700; color:var(--fg-3);letter-spacing:.02em;} .rct-vig__total{font-size:.92rem;font-weight:700;color:var(--fg-2);font-variant-numeric:tabular-nums;} .rct-vig__cuotas{font-size:.82rem;color:var(--fg-3);} /* El argumento («pagás 7 meses y medio y estás cubierto 12») se muestra, no se explica en otra sección: va dentro de la tarjeta que lo hace verdad. */ .rct-vig__arg{margin-top:.2rem;padding-top:.5rem;border-top:1px solid var(--border-1); font-size:.84rem;line-height:1.5;color:var(--fg-2);} .rct-vig__arg b{color:var(--magenta-700);font-weight:800;} .rct-vig.is-on .rct-vig__arg{border-top-color:var(--magenta-100);} /* --- El panel del resultado ------------------------------------------------ */ /* Fondo magenta→violeta con texto blanco, como el resto de los cierres del sitio. Todo lo que vive adentro (partidor y switch de AP) se apoya sobre este fondo oscuro: por eso usa blanco y transparencias, nunca los grises de texto que se pierden acá. */ .rct-res{border-radius:var(--r-lg);padding:1.3rem 1.2rem;color:#fff; background:linear-gradient(135deg,var(--magenta-700) 0%,var(--purple) 100%); box-shadow:var(--shadow-md);} /* El foco del sitio es magenta y sobre este fondo no se vería: acá se ve blanco. */ .rct-res :focus-visible{outline:2px solid #fff;outline-offset:2px;} .rct-res__lbl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.8);} .rct-res__dia{margin:.3rem 0 0;font-size:2.6rem;font-weight:800;line-height:1.05; letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .rct-res__dia small{font-size:1rem;font-weight:700;letter-spacing:0;opacity:.85;margin-left:.4rem;} /* La cuenta a la vista: de dónde sale ese número por día. Sin esto el precio por día parece un truco de marketing; con esto es una división. */ .rct-res__cuenta{margin:.35rem 0 0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.88); font-variant-numeric:tabular-nums;} .rct-res__total{margin:.5rem 0 0;font-size:1.05rem;font-weight:700;color:#fff; font-variant-numeric:tabular-nums;} .rct-res__total small{display:block;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.85);margin-top:.15rem;} /* La aclaración de que las cuotas van sólo por débito o tarjeta. Va bajada de tono pero NO escondida: es una condición del producto, no letra chica. */ .rct-res__nota{display:block;margin-top:.2rem;font-size:.82rem;font-weight:600; color:rgba(255,255,255,.8);} .rct-res__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;} .rct-res__disc{margin:1rem 0 0;font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.75);} .rct-res__disc strong{color:rgba(255,255,255,.95);font-weight:700;} /* --- El partidor por pasajero (dentro del panel) --------------------------- */ /* Divide el costo diario por la cantidad de gente que sube a la excursión. Vive adentro del panel magenta —y no en un paso aparte— porque no cambia el precio: sólo lo dice en la unidad en la que el guía piensa su negocio. */ .rct-res__part{margin:1.1rem 0 0;padding:.9rem 1rem;border-radius:var(--r-md); background:rgba(26,19,32,.22);border:1px solid rgba(255,255,255,.18);} .rct-res__partlbl{display:block;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.88); margin-bottom:.55rem;} .rct-chips--pax{display:flex;flex-wrap:wrap;gap:.4rem;} .rct-chip--pax{appearance:none;cursor:pointer;font:inherit;min-height:44px;padding:.35rem .9rem; border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12); color:#fff;font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums; transition:background .15s var(--ease),border-color .15s var(--ease);} .rct-chip--pax:hover{background:rgba(255,255,255,.22);border-color:#fff;} /* Elegido = blanco pleno con texto magenta oscuro: es el mayor contraste disponible sobre este fondo, y se distingue del resto sin depender del color. */ .rct-chip--pax.is-on{background:#fff;border-color:#fff;color:var(--magenta-700);} .rct-res__partout{display:block;margin-top:.65rem;font-size:1.15rem;font-weight:800;color:#fff; font-variant-numeric:tabular-nums;line-height:1.3;} .rct-res__partout small{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85);margin-top:.1rem;} /* --- El switch del 10% por contratar también AP ---------------------------- */ /* ⚠️ Acá el control es un DE VERDAD envuelto en su , no un