@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&family=Roboto:wght@400;500;700&display=swap');
    :root { --azul:#1a9dd9; --rojo:#c94126; --texto:#99a2a6; --oscuro:#333334; --linea:#e9ecee; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:#fff; color:var(--texto); font:16px/1.58 Roboto,Arial,sans-serif; }
    a { color:inherit; text-decoration:none; }
    a:hover { color:var(--azul); }
    .franja { height:42px; background:var(--azul); color:#fff; }
    .franja__interior { max-width:1360px; margin:auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }
    .franja__marca { font-size:13px; font-weight:700; letter-spacing:.08em; }
    .franja__contacto { font-size:11px; font-weight:700; letter-spacing:.08em; }
    .cabecera { height:90px; border-bottom:1px solid var(--linea); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; max-width:1360px; margin:auto; padding:0 36px; }
    .cabecera__indice { color:#333; font-size:12px; line-height:1.1; letter-spacing:.06em; display:flex; align-items:center; gap:12px; }
    .hamburguesa { font-size:33px; line-height:1; font-weight:300; }
    .cabecera__logo { justify-self:center; text-align:center; color:#2a2a2a; }
    .cabecera__logo img { width:250px; max-width:100%; height:auto; display:block; margin:auto; }
    .cabecera__logo small { display:block; font-size:12px; letter-spacing:.1em; font-weight:500; margin-top:0; }
    .cabecera__buscar { justify-self:end; border-bottom:1px solid #555; width:260px; padding:8px 0; color:#777; font-size:14px; display:flex; justify-content:space-between; }
    .miga { border-top:1px solid #f3f3f3; text-align:center; text-transform:uppercase; font-size:11px; padding:13px 20px 0; color:#8f989d; }
    .rejilla { max-width:1360px; margin:54px auto 80px; padding:0 36px; display:grid; grid-template-columns:255px minmax(0,984px); gap:40px; }
    .lateral h2 { color:#222; font:400 18px/1.2 Roboto,Arial,sans-serif; margin:0 0 12px; }
    .lateral h2:not(:first-child) { margin-top:32px; }
    .lateral a { display:block; font-size:14px; line-height:1.4; padding:5px 0; color:#9da5a9; }
    .lateral a:hover { color:var(--azul); }
    .lateral .nivel1 { color:#3a3a3a; border-left:3px solid var(--azul); padding-left:6px; }
    .lateral .grupo { background:#f0f0f2; border-radius:9px; padding:10px 14px 12px; margin:4px 0 12px; }
    .lateral .grupo a { padding:4px 0; }
    .lateral .grupo .activo { color:#333; border-left:3px solid var(--azul); margin-left:0; padding-left:6px; font-weight:500; }
    main { min-width:0; }
    h1 { font:300 clamp(38px,4vw,48px)/1.1 'Roboto Condensed','Arial Narrow',sans-serif; color:var(--oscuro); margin:0 0 30px; }
    h2 { font:300 29px/1.2 'Roboto Condensed','Arial Narrow',sans-serif; color:#3b3b3b; margin:48px 0 16px; }
    h3 { color:#51595d; font:500 18px/1.3 Roboto,Arial,sans-serif; margin:26px 0 10px; }
    p { margin:0 0 17px; }
    .etiqueta { color:#a0a8ab; text-transform:uppercase; font-size:16px; margin:0 0 20px; }
    .pasos { list-style:none; counter-reset:paso; padding:0; margin:0 0 20px; }
    .pasos li { counter-increment:paso; display:flex; gap:9px; align-items:flex-start; margin:7px 0; }
    .pasos li::before { content:counter(paso); flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--rojo); color:#fff; font:700 12px/1 Roboto,Arial,sans-serif; margin-top:2px; }
    .pasos strong { font-weight:500; color:#737d81; }
    figure { margin:18px 0 30px; }
    figure img { display:block; width:100%; height:auto; border:1px solid #e9e9e9; }
    .captura-anotada { position:relative; }
    .marca, .marca-texto { display:grid; place-items:center; width:25px; height:25px; border:2px solid #fff; border-radius:50%; background:var(--rojo); color:#fff; font:700 13px/1 Roboto,Arial,sans-serif; box-shadow:0 1px 4px #0005; }
    .marca { position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
    .marca--nuevo { left:5.7%; top:3.4%; }
    .marca--buscar { left:12.5%; top:85.2%; }
    .marca--anadir { left:37.3%; top:85.2%; }
    .marca--cobrar { left:60%; top:95.5%; }
    .pasos--continuacion { counter-reset:paso 3; }
    .marca-texto { display:inline-grid; width:21px; height:21px; margin-right:3px; vertical-align:middle; font-size:11px; }
    figcaption { color:#8b9599; font-size:13px; line-height:1.5; margin-top:9px; }
    .figura-ticket { max-width:380px; margin:22px auto 30px; }
    .figura-ticket a { display:block; }
    .bloque { border-left:4px solid var(--azul); padding:3px 0 3px 18px; margin:24px 0; }
    .bloque--ticket { border-left-color:var(--rojo); }
    .bloque h3 { margin:0 0 7px; }
    .bloque p { margin:0; }
    footer { border-top:1px solid var(--linea); text-align:center; padding:30px 20px; font-size:13px; }
    footer img { display:block; width:130px; height:auto; margin:0 auto 8px; }
    @media (max-width:850px) {
      .cabecera { grid-template-columns:1fr 1fr; padding:0 20px; }
      .cabecera__logo { justify-self:end; }
      .cabecera__logo img { width:170px; }
      .cabecera__buscar { display:none; }
      .rejilla { display:block; margin-top:30px; padding:0 20px; }
      .lateral { padding:16px 18px; background:#f7f8f9; margin-bottom:34px; }
      .lateral h2:not(:first-child), .lateral .grupo a:not(.activo), .lateral>a { display:none; }
      .lateral .grupo { margin:0; padding:4px 8px; }
      h1 { margin-bottom:25px; }
    }
    .indice-intro { max-width:750px; margin-bottom:34px; }
    .indice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 34px; }
    .indice-seccion { border-top:2px solid #e7e9eb; padding-top:13px; }
    .indice-seccion h2 { margin:0 0 13px; font-size:25px; }
    .indice-seccion h2 span { color:var(--rojo); margin-right:7px; }
    .indice-lista { list-style:none; padding:0; margin:0; }
    .indice-lista li { padding:7px 0; border-bottom:1px solid #f0f1f2; line-height:1.35; }
    .indice-lista a { color:#4a5559; border-left:3px solid var(--azul); padding-left:8px; font-weight:500; }
    .indice-lista .pendiente { color:#8b969b; }
    .estado { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#a9b1b5; white-space:nowrap; margin-left:5px; }
    @media (max-width:850px) { .indice-grid { grid-template-columns:1fr; } }

    /* Anillo único para iconos de las capturas. El cursor anotado va siempre encima. */
    .captura-guia .marca-icono { position:absolute; z-index:2; display:block; width:var(--marca-tamano,32px); height:auto; aspect-ratio:1; border:2px solid #5e8793; border-radius:50%; box-shadow:0 0 0 3px #fffc,0 1px 3px #20394355; transform:translate(-50%,-50%); pointer-events:none; }
    .captura-guia img.cursor-frente { position:absolute; inset:0; z-index:4; width:100%; height:auto; max-width:none; pointer-events:none; }