:root {
    --fondo: #F6F3EC;
    --superficie: #FFFFFF;
    --tinta: #1B1E24;
    --tinta-suave: #5A5F69;
    --linea: #E3DED3;
    --acento: #0B6E69;
    --acento-hover: #095752;
    --acento-suave: #E0F0EE;
    --sobre-acento: #FFFFFF;
    --exito: #1F7A4D;
    --error: #B3261E;
    --sombra: 0 1px 2px rgba(27,30,36,.05), 0 8px 24px rgba(27,30,36,.06);
    --r: 14px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --fondo: #121418;
      --superficie: #1B1E24;
      --tinta: #F1EEE8;
      --tinta-suave: #A7ABB3;
      --linea: #2E323A;
      --acento: #4FC3B5;
      --acento-hover: #6FD3C7;
      --acento-suave: #17302E;
      --sobre-acento: #0E1B1A;
      --exito: #5BC08B;
      --error: #F07C74;
      --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    }
  }
  :root[data-theme="dark"] {
    --fondo: #121418; --superficie: #1B1E24; --tinta: #F1EEE8; --tinta-suave: #A7ABB3;
    --linea: #2E323A; --acento: #4FC3B5; --acento-hover: #6FD3C7; --acento-suave: #17302E;
    --sobre-acento: #0E1B1A; --exito: #5BC08B; --error: #F07C74;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--fondo); color: var(--tinta);
    font: 400 16px/1.55 Manrope, system-ui, sans-serif;
  }
  a { color: inherit; }
  .envoltura { max-width: 680px; margin: 0 auto; padding: 0 16px; }

  /* Encabezado */
  .cabecera { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; }
  .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
  .marca-logo { width: 30px; height: 30px; border-radius: 8px; flex: none; overflow: hidden;
    }
  .cabecera-etiqueta { font-size: 13px; color: var(--tinta-suave); font-weight: 600; }

  /* Portada */
  .portada { padding: 28px 0 8px; }
  .antetitulo { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--acento); margin-bottom: 14px; }
  h1 { font: 600 clamp(34px, 8.5vw, 52px)/1.06 Fraunces, Georgia, serif; letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
  .bajada { font-size: 18px; color: var(--tinta-suave); margin: 0 0 22px; max-width: 34em; text-wrap: pretty; }
  .garantias { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
  .garantias li { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; padding: 7px 13px; }
  .garantias svg { width: 16px; height: 16px; color: var(--exito); flex: none; }

  .boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px;
    border-radius: 12px; border: 0; font: 700 16px/1 Manrope, system-ui, sans-serif; cursor: pointer; text-decoration: none;
    background: var(--acento); color: var(--sobre-acento); transition: background .15s, transform .1s; }
  .boton:hover { background: var(--acento-hover); }
  .boton:active { transform: scale(.98); }
  .boton[disabled] { opacity: .6; cursor: progress; }
  .boton-secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--linea); }
  .boton-secundario:hover { background: var(--superficie); }
  .boton-ancho { width: 100%; }
  :focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

  /* Por qué */
  .seccion { padding: 44px 0 0; }
  h2 { font: 600 26px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; margin: 0 0 18px; }
  .razones { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .razones li { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 18px; }
  .razones strong { display: block; font-size: 16px; margin-bottom: 2px; }
  .razones span { color: var(--tinta-suave); font-size: 15px; }

  /* Formulario */
  .tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra);
    padding: 24px 18px; margin: 44px 0 0; scroll-margin-top: 16px; }
  @media (min-width: 560px) { .tarjeta { padding: 32px 30px; } }
  .progreso { display: flex; gap: 6px; margin-bottom: 8px; }
  .progreso span { flex: 1; height: 5px; border-radius: 99px; background: var(--linea); transition: background .25s; }
  .progreso span.activo { background: var(--acento); }
  .paso-contador { font-size: 13px; font-weight: 700; color: var(--tinta-suave); margin: 0 0 4px; }
  .paso-titulo { font: 600 24px/1.2 Fraunces, Georgia, serif; margin: 0 0 22px; }
  .paso[hidden] { display: none; }

  .campo { margin-bottom: 20px; border: 0; padding: 0; min-width: 0; }
  .campo > label, .campo > legend { display: block; font-weight: 700; font-size: 15px; margin-bottom: 7px; padding: 0; }
  .opcional { font-weight: 500; color: var(--tinta-suave); font-size: 13px; }
  .ayuda { font-size: 13px; color: var(--tinta-suave); margin: 6px 0 0; }
  input[type=text], input[type=email], input[type=tel], input[type=url], select {
    width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--linea);
    background: var(--fondo); color: var(--tinta); font: 500 16px/1.3 Manrope, system-ui, sans-serif; appearance: none; }
  select { background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%), linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
  input:focus, select:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px var(--acento-suave); }
  [aria-invalid=true] { border-color: var(--error) !important; }
  .error { color: var(--error); font-size: 14px; font-weight: 600; margin: 6px 0 0; }
  .error:empty { display: none; }

  /* Fichas (radios y casillas con forma de botón) */
  .fichas { display: flex; flex-wrap: wrap; gap: 8px; }
  .ficha { position: relative; }
  .ficha input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .ficha span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px;
    border: 1.5px solid var(--linea); background: var(--fondo); font-weight: 600; font-size: 15px; transition: all .12s; }
  .ficha input:checked + span { background: var(--acento-suave); border-color: var(--acento); color: var(--tinta); }
  .ficha input:checked + span::before { content: "✓"; margin-right: 6px; color: var(--acento); font-weight: 800; }
  .ficha input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
  .fichas.invalido .ficha span { border-color: var(--error); }

  .perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .perfil { position: relative; }
  .perfil input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .perfil span { display: flex; align-items: center; min-height: 64px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--linea);
    background: var(--fondo); font-weight: 700; font-size: 15px; line-height: 1.25; transition: all .12s; }
  .perfil input:checked + span { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }
  .perfil input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
  .perfiles.invalido .perfil span { border-color: var(--error); }

  .redes { display: grid; gap: 10px; }
  .red { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; }
  .red label { font-weight: 600; font-size: 14px; color: var(--tinta-suave); }
  .agregar { background: none; border: 0; color: var(--acento); font: 700 15px Manrope, sans-serif; padding: 10px 0; cursor: pointer; }
  .trabajos { display: grid; gap: 8px; }

  .consentimiento { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1.5px solid var(--linea);
    background: var(--fondo); margin-bottom: 10px; cursor: pointer; font-size: 15px; }
  .consentimiento input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--acento); flex: none; cursor: pointer; }
  .consentimiento.invalido { border-color: var(--error); }

  .acciones { display: flex; gap: 10px; margin-top: 26px; }
  .acciones .boton { flex: 1; }
  .acciones .boton-secundario { flex: 0 0 auto; }
  .aviso-envio { margin: 14px 0 0; padding: 12px 14px; border-radius: 11px; background: var(--acento-suave); color: var(--tinta);
    font-size: 15px; font-weight: 600; }
  .aviso-envio:empty { display: none; }
  .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .girando { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: giro .7s linear infinite; }
  @keyframes giro { to { transform: rotate(360deg); } }

  /* Final */
  .final { text-align: center; padding: 12px 0 6px; }
  .final-icono { width: 64px; height: 64px; border-radius: 50%; background: var(--acento-suave); color: var(--exito);
    display: grid; place-items: center; margin: 0 auto 16px; }
  .final h2 { font-size: 28px; margin-bottom: 10px; }
  .final p { color: var(--tinta-suave); margin: 0 auto 22px; max-width: 30em; }
  .final .boton { margin-bottom: 10px; }

  .privacidad-resumen { margin-top: 44px; padding: 18px; border-radius: var(--r); border: 1px dashed var(--linea); font-size: 15px; color: var(--tinta-suave); }
  .privacidad-resumen strong { color: var(--tinta); }
  .organiza { margin-top: 20px; font-size: 15px; color: var(--tinta-suave); }
  .organiza strong { color: var(--tinta); }
  footer { padding: 36px 0 44px; font-size: 14px; color: var(--tinta-suave); display: flex; flex-wrap: wrap; gap: 6px 16px; }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

  /* Portada con foto */
  .portada-foto { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #20242B; }
  .portada-foto::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(14,16,20,.62) 0%, rgba(14,16,20,.55) 40%, rgba(14,16,20,.78) 100%); }
  .portada-contenido { min-height: min(92svh, 760px); display: flex; flex-direction: column; }
  .portada-foto .portada { margin-top: auto; padding: 48px 0 20px; }
  .portada-foto .antetitulo { color: #F2C14E; }
  .portada-foto h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
  .portada-foto .bajada { color: rgba(255,255,255,.9); }
  .portada-foto .cabecera-etiqueta { color: rgba(255,255,255,.85); }
  .portada-foto .garantias li { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .portada-foto .garantias svg { color: #9BE3B9; }
  .portada-foto .boton { background: #fff; color: #095752; }
  .portada-foto .boton:hover { background: #F6F3EC; }
  .portada-foto .marca-logo { background: none; }
  .portada-credito { font-size: 12px; color: rgba(255,255,255,.7); margin: 0 0 14px; text-align: right; }

  .creditos { width: 100%; font-size: 13px; }
  .creditos summary { cursor: pointer; }
  .creditos ul { padding-left: 18px; margin: 10px 0 0; }
  .creditos li { margin-bottom: 4px; }

  /* Aliados */
  .aliados { margin-top: 36px; }
  .aliados h2 { font-size: 20px; }
  .aliados-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
  .aliados-lista img { height: 48px; width: auto; filter: grayscale(1); opacity: .8; }
  .portada-foto .bajada strong { color: #fff; font-weight: 600; }

  /* Portada con mapa del Perú */
  .portada-mapa { background:
      radial-gradient(60% 50% at 78% 38%, rgba(20,150,140,.34), transparent 70%),
      radial-gradient(50% 40% at 10% 100%, rgba(242,193,78,.12), transparent 70%),
      #14171C; }
  .portada-mapa::after { display: none; }
  .portada-mapa .envoltura { max-width: 1120px; }
  .portada-mapa .portada-contenido { min-height: 0; }
  .portada-rejilla { display: flex; flex-direction: column; }
  .portada-mapa .portada { padding: 28px 0 8px; }
  .mapa { margin: 8px auto 0; width: 100%; max-width: 420px; pointer-events: none; }
  .mapa img { display: block; width: 100%; height: auto; }
  @media (min-width: 900px) {
    .portada-mapa .portada-contenido { min-height: min(92svh, 760px); }
    .portada-rejilla { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; }
    .portada-mapa .portada { padding: 40px 0 64px; }
    .mapa { margin: 0; max-width: none; padding: 8px 0 32px; }
    .mapa img { max-height: 660px; width: auto; margin: 0 auto; }
  }
  .marca-logo svg { display: block; width: 100%; height: 100%; }

  /* Interés en Perfil Destacado */
  .consentimiento.destacado { border-color: #E3C77A; background: linear-gradient(180deg, rgba(242,193,78,.12), rgba(242,193,78,.04)); }
  .etiqueta-pago { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700;
    background: #F2C14E; color: #3B2B00; vertical-align: 2px; }