/* ============================================================
   LEGALES: botón de arrepentimiento + términos y condiciones
   Archivo propio: no pisa paginas.css ni home.css.
   Carga sitewide porque el chip del hero y la fila del pie
   viven en toda la web; el resto está scopeado a .ar-*.
   ============================================================ */

/* ---------- 1. EL CHIP DEL HERO (la home) --------------------
   La Res. 424/2020 pide "acceso fácil y directo desde la página de inicio"
   y "un lugar destacado, en cuanto a visibilidad y tamaño".

   La tensión: Iara rechaza lo que ensucia el diseño y Rami quiere que la
   home venda. Un cartel a lo ancho arriba del banner cumple la ley y rompe
   las dos cosas.

   La salida: el chip vive DENTRO del hero, apoyado sobre el tramo del scrim
   que ya está al 88-94% de negro, así que se lee sin agregarle ni una capa
   nueva a la foto. Va en la esquina que el diseño dejó libre, ABAJO a la
   derecha en las dos pantallas (en celular, desde el 7-sep: ver la cuña de
   la media query): no pisa el titular, no pisa los botones de venta, no pisa
   los puntitos del carrusel, y está en la primera pantalla con contraste de
   sobra. Tamaño de texto 13,5 px y área de toque de 44 px: es un link de
   verdad, no letra chica escondida.
   Se pinta UNA vez para los tres banners (es hermano de los .hslide), así
   que está sí o sí, mire la foto que mire. */
.pk-arrep-hero{
  position:absolute; z-index:5;
  bottom:32px; left:0; right:0;
  max-width:1280px; margin:0 auto; padding:0 48px;
  display:flex; justify-content:flex-end;
  pointer-events:none;                 /* la franja no se come los clics del banner */
}
.pk-arrep-hero a{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:10px 18px;
  border:1px solid rgba(255,255,255,.5); border-radius:999px;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  color:#fff; font-family:var(--f-body); font-size:13.5px; font-weight:700;
  letter-spacing:.01em; line-height:1.1; text-decoration:none;
  transition:background .18s ease, border-color .18s ease;
}
.pk-arrep-hero a:hover,
.pk-arrep-hero a:focus-visible{background:rgba(0,0,0,.78); border-color:#fff; color:#fff}
.pk-arrep-hero svg{width:17px; height:17px; flex:0 0 17px; stroke:#fff; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}

@media (max-width:760px){
  /* 🔴 CUÑA 7-sep-2026 — EN CELULAR EL CHIP BAJA A LA BASE DEL HERO (decisión del Director con
     delegación de Iara, 7-sep). Hasta hoy iba `top:14px`: era LO PRIMERO TOCABLE de la home en el
     teléfono, arriba del titular y del CTA de venta — el botón de arrepentirse antes que el de
     comprar. Baja a la esquina de abajo a la derecha, como ya está en compu: el orden pasa a ser
     titular → CTA → chip. Medido a 390x844: chip en y 703-743, los puntitos del carrusel en y 771
     (su zona de toque de 44 px arranca en 751: 8 px libres) y los flotantes en y 776. Sigue dentro
     del hero y en la primera pantalla (la ley pide acceso visible desde la home).
     El lugar se lo hace el padding de 110 px del `.inner` (home.css, misma fecha): con los 66 de
     antes el chip pisaba el botón "Cómo comprar". */
  .pk-arrep-hero{bottom:56px; top:auto; padding:0 16px; justify-content:flex-end}
  /* MEDIDO contra los tres banners, muestreando adentro de la píldora (blanco vs. el fondo
     compuesto, peor pixel): con el 50% de compu daba 7,3:1 y con este 86% da 17,6:1. Los dos
     pasan AA, así que esto no es un arreglo de contraste: la píldora vivió arriba del banner
     (donde el scrim solo llega al 22% de negro y sobre el cielo se lava) y ahí abajo el fondo
     firme sigue siendo el que mejor cumple el "destacado en visibilidad y tamaño" de la ley.
     Mientras el cartel de cookies esté (más abajo), la píldora vuelve a esa esquina de arriba. */
  .pk-arrep-hero a{font-size:12.5px; padding:9px 14px; min-height:40px;
    background:rgba(0,0,0,.86); border-color:rgba(255,255,255,.62)}
  /* 🔴 Y MIENTRAS EL CARTEL DE COOKIES ESTÁ, EL CHIP ESPERA EN LA ESQUINA DE ARRIBA (la posición
     que tuvo siempre en celular). Medido a 390x664 (iPhone real, 1ª visita): el cartel arranca en
     y=530 y el hero cedido termina su copy en y=518 — entre el CTA y el cartel quedan 12 px, y el
     chip mide 40: NO HAY base donde ponerlo sin pisar el "Cómo comprar" o quedar abajo de la
     barra. Es el criterio que ya usa pk-consent.php con los flotantes ("cuando dos cosas se
     pelean el mismo lugar, una espera") — pero el chip no puede apagarse (Res. 424/2020), así
     que en vez de esconderse se corre a la única esquina libre. El cartel vive los primeros
     segundos de la primera visita; al responderlo, el chip baja solo a la base. */
  body.pk-ck-visible .pk-arrep-hero{bottom:auto; top:14px}
}

/* ---------- 2. LA FILA LEGAL DEL PIE --------------------------
   Va como fila propia entre las columnas y el copyright: los legales
   se buscan juntos, no repartidos en la columna de Ayuda. */
.pk-footer .pk-legalrow{
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
  padding:20px 0 0; font-size:13.5px;
}
.pk-footer .pk-legalrow a{color:#c0c0c0}
.pk-footer .pk-legalrow a:hover{color:var(--orange)}
.pk-footer .pk-legalrow a.destacado{color:#fff; font-weight:700}
.pk-footer .pk-legalrow .sep{color:#3a3a3a}
@media (max-width:760px){
  .pk-footer .pk-legalrow{gap:10px 16px; font-size:13px}
  .pk-footer .pk-legalrow .sep{display:none}
}

/* ---------- 3. TEXTO LEGAL CORRIDO (las dos páginas) ---------- */
.pk-legal{max-width:820px}
.pk-legal h2{font-size:clamp(21px,2.3vw,26px); font-weight:800; letter-spacing:-.02em;
  margin:44px 0 12px; color:var(--ink)}
.pk-legal h2:first-child{margin-top:0}
.pk-legal p{font-size:16px; line-height:1.72; color:#3f3f3f; margin:0 0 14px}
.pk-legal ul{list-style:none; margin:0 0 18px; padding:0}
.pk-legal ul li{position:relative; padding:7px 0 7px 20px; font-size:16px; line-height:1.65; color:#3f3f3f}
.pk-legal ul li::before{content:""; position:absolute; left:0; top:16px; width:7px; height:7px;
  border-radius:50%; background:var(--orange)}
/* Los pasos numerados: el número cuenta solo, no se escribe a mano en el texto. */
.pk-legal ol.pk-legal-num{list-style:none; counter-reset:pkn; margin:0 0 18px; padding:0}
.pk-legal ol.pk-legal-num li{counter-increment:pkn; position:relative; padding:9px 0 9px 40px;
  font-size:16px; line-height:1.65; color:#3f3f3f}
.pk-legal ol.pk-legal-num li::before{content:counter(pkn); position:absolute; left:0; top:8px;
  width:26px; height:26px; border-radius:50%; background:var(--orange-solido); color:#fff;
  font-size:13.5px; font-weight:800; display:flex; align-items:center; justify-content:center}

.pk-legal a{color:var(--orange-txt); font-weight:700}
.pk-legal b{color:var(--ink)}
/* Un <b> adentro de un link se comía el naranja y el link parecía texto suelto:
   pasaba en los tres links del cuerpo de los T&C. El link manda sobre el negrita. */
.pk-legal a b{color:inherit}
.pk-legal .pk-legal-fecha{font-size:13.5px; color:var(--gray); text-transform:uppercase;
  letter-spacing:.1em; font-weight:700; margin-bottom:28px}
.pk-legal .pk-legal-cierre{margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  font-size:14.5px; color:#666; font-style:italic}

/* ---------- 4. EL FORMULARIO DEL ARREPENTIMIENTO -------------- */
.ar-box{max-width:820px; margin-top:10px; scroll-margin-top:100px}
.ar-form{background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px 30px 26px}
.ar-intro{font-size:15px; line-height:1.6; color:#555; margin:0 0 22px}
.ar-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
.ar-f{display:flex; flex-direction:column; gap:6px}
.ar-f.ar-full{grid-column:1 / -1}
.ar-l{font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink)}
.ar-op{font-weight:600; color:var(--gray); letter-spacing:0}
.ar-f input, .ar-f textarea{
  font-family:var(--f-body); font-size:15.5px; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:#fff;
  width:100%; min-height:46px;
}
.ar-f textarea{min-height:84px; resize:vertical}
.ar-f input:focus, .ar-f textarea:focus{outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(239,90,40,.14)}
.ar-h{font-size:12.5px; color:var(--gray); line-height:1.45}
.ar-err{display:block; font-size:12.8px; font-weight:700; color:#c02626; line-height:1.45}
.ar-err-top{background:#fdf0f0; border:1px solid #f0c2c2; border-radius:8px; padding:13px 16px;
  margin:0 0 20px; font-size:14.5px; max-width:820px}
.ar-hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}
.ar-send{margin-top:24px}
.ar-legal{font-size:12.8px; color:var(--gray); line-height:1.55; margin:16px 0 0; max-width:600px}

/* El acuse. Es la prueba de que cumplimos: tiene que verse antes que nada. */
.ar-ok{background:var(--cream); border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:0 12px 12px 0; padding:30px 32px}
.ar-ok-k{display:inline-block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:800; color:var(--orange-txt); margin-bottom:12px}
.ar-ok-p{font-size:15.5px; line-height:1.65; color:#3f3f3f; margin:0 0 14px}
.ar-cod{font-family:var(--f-display), var(--f-body); font-size:clamp(26px,4.4vw,38px); font-weight:800;
  letter-spacing:.02em; color:var(--ink); background:#fff; border:1px dashed var(--line);
  border-radius:10px; padding:18px 20px; text-align:center; margin:0 0 18px; word-break:break-all}
.ar-ok-warn{background:#fdf6ec; border:1px solid #f0d9b0; border-radius:8px; padding:14px 16px;
  font-size:14.5px; line-height:1.6; color:#6b4a13; margin:0 0 14px}
.ar-ok-warn a{color:#6b4a13; font-weight:800; text-decoration:underline}

@media (max-width:760px){
  .ar-grid{grid-template-columns:1fr}
  .ar-form{padding:22px 20px 20px}
  .ar-ok{padding:24px 20px}
}

/* 🔴 CUÑA 7-sep-2026 — EL CHIP LEGAL TAMBIÉN SE LEVANTA MIENTRAS ESTÁ LA BARRA DE COOKIES.
   El mismo día en que el hero pasó a medir lo que la pantalla le deja (`home.css`), su borde de
   abajo dejó de estar fuera de la vista y coincidió con la barra al pie: el chip, que vive a
   `bottom:32px` del hero, quedaba cortado por la mitad en compu.
   Acá no es solo estética: la Res. 424/2020 pide que el botón de arrepentimiento esté en "un lugar
   destacado, en cuanto a visibilidad y tamaño", y medio chip tapado no lo cumple.
   Se corre exactamente el alto MEDIDO de la barra, que es lo mismo que hacen el hero y la barra de
   compra de la ficha; cuando la persona responde las cookies vuelve solo a su lugar. */
/* 🔴 y SOLO en compu, que es donde el chip se ancla por abajo. En celular (línea 52) va con
   `bottom:auto; top:14px` porque ahí el copy del hero está pegado abajo — escribir un `bottom`
   sin la media query le daba las dos anclas a la vez y el chip terminaba parado justo encima de
   "Ver las bicis". Lo cazó `qa_flotantes.cjs` en la corrida siguiente, en 360 y en 430 px: el
   toque en el centro del botón se lo llevaba el chip. Un arreglo que rompe la otra pantalla es
   el defecto que este candado existe para frenar. */
@media (min-width:761px){
  body.pk-ck-visible .pk-arrep-hero{bottom:calc(32px + var(--pk-ck-h, 68px))}
}

/* ---------- 5. CANCELAR O DEVOLVER UNA COMPRA YA IDENTIFICADA (18-oct-2026) ----------
   Desde Mis compras: la compra a la vista y un botón; nada para completar (pk-arrep-pedido.php). */
.ar-compra{display:flex; gap:16px; align-items:center; border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin:0 0 16px; background:var(--cream)}
.ar-compra-img{width:64px; height:64px; object-fit:contain; background:#fff; border-radius:8px; flex:none}
.ar-compra-txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.ar-compra-k{font-size:12.5px; font-weight:800; letter-spacing:.02em; color:var(--gray)}
.ar-compra-p{font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.4}
.ar-compra-t{font-size:15px; color:var(--ink)}
.ar-a-quien{margin:0 0 18px; font-size:14px}
.ar-form-pedido .ar-f{margin:0}
.ar-form-pedido textarea{min-height:64px}
.ar-form-pedido .ar-legal{margin-top:20px}
@media (max-width:760px){ .pk-arrep-pedido .pk-wafloat, .pk-arrep-pedido .pk-bot{display:none} }