/* /pricing — LO COMUN A LAS VARIANTES DE LA RONDA 3.
   Lo que el usuario aprobo de la E (12/11/2026): "el precio no cambia,
   cambia cuando pagas", la fila "sin..." y las preguntas. Cada variante solo
   cambia la calculadora de arriba (su propia hoja, `css/pricing-eN.css`). */

[hidden] { display: none !important; }
.pe-hero .wrap, .pe-sec .wrap { padding-inline: max(var(--gut), 20px); }

/* ---------- tipos del encabezado (comunes) ---------- */
.pe-k { font-size: 16px; font-weight: 600; color: var(--text-3); margin: 0 0 14px; }
.pe-h1 {
  font-size: clamp(42px, 5.6vw, 80px); line-height: 1; font-weight: 700;
  letter-spacing: var(--tr-display); color: var(--ink); margin: 0;
}
.pe-sub { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text-2); margin: 18px 0 0; max-width: 30em; }

/* ---------- cuando pagas ---------- */
.pe-sec { background: var(--paper); padding: clamp(56px, 7vw, 104px) 0; }
.pe-h2 {
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; font-weight: 700;
  letter-spacing: var(--tr-title); color: var(--ink); margin: 0 0 clamp(32px, 4vw, 56px);
}
.pe-h2 span { color: var(--text-3); }
.pe-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.pe-op { display: flex; flex-direction: column; align-items: flex-start; border-top: 2px solid var(--ink); padding-top: 20px; }
.pe-op__cuando {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.pe-op__cuando i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.pe-op__t { font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; letter-spacing: var(--tr-title); color: var(--ink); margin: 14px 0 0; }
.pe-op__lema { font-size: 18px; color: var(--text-2); margin: 4px 0 0; }
.pe-op__l { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 8px; }
.pe-op__l li { font-size: 15.5px; line-height: 1.4; color: var(--text-2); padding-left: 18px; position: relative; }
.pe-op__l li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 2px; background: var(--text-4); }
.pe-op__l b { color: var(--ink); font-weight: 600; }
.pe-op .btn { margin-top: auto; }

/* ---------- sin letra chica ---------- */
.pe-sec--chica { background: var(--surface); padding: clamp(32px, 4vw, 48px) 0; }
.pe-sin { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.pe-sin li { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; color: var(--ink); }
.pe-sin li::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- preguntas ---------- */
.pe-faq { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(20px, 4vw, 64px); }
.pe-h3 { font-size: 26px; font-weight: 700; letter-spacing: var(--tr-sub); color: var(--ink); margin: 14px 0 0; }
.pe-faq__l details { border-bottom: 1px solid var(--line); }
.pe-faq__l summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-size: 17px; font-weight: 600; color: var(--ink);
}
.pe-faq__l summary::-webkit-details-marker { display: none; }
.pe-faq__l summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 26px/1 var(--font); color: var(--text-3); transition: transform .2s ease;
}
.pe-faq__l details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pe-faq__l summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pe-faq__l p { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 900px) {
  .pe-tres { grid-template-columns: 1fr; gap: 36px; }
  .pe-faq { grid-template-columns: 1fr; }
  .pe-sin { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .pe-sin { display: grid; grid-template-columns: 1fr 1fr; }
  .pe-sin li { font-size: 16px; }
}

/* ---------- carga de credito (ronda 4: lo principal de abajo) ----------
   Tres formas de cargar. Las dos primeras se pagan antes, la tercera es un
   adelanto que se paga despues con 4%. El plan anual va aparte. */
.pe-carga__head { display: grid; grid-template-columns: auto 1fr; gap: 16px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.pe-carga__head .pe-h2 { margin: 0; }
.pe-carga__head .pe-h2 span { color: var(--teal); }
/* LOS BLANCOS DE ESTA PARTE (13/11): con fondo blanco y tarjetas blancas
   todo quedaba encandilado. El fondo toma el crema del mapa y las tarjetas
   un blanco calido apenas mas claro, para que se separen sin brillar. */
.pe-sec--carga { background: #F4F1EC; }
.pe-sec--carga .pe-via { background: #FBF9F6; border-color: #E6E1D8; }
.pe-sec--carga .pe-via__badge { background: #FBF9F6; }
.pe-carga__sub { font-size: 18px; line-height: 1.5; color: var(--text-2); margin: 0 0 .4em; max-width: 26em; }
.pe-carga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(16px, 2vw, 24px); }
.pe-carga__grupo {
  margin: 0; display: flex; justify-content: space-between; gap: 12px;
  padding: 0 4px 10px; border-bottom: 2px solid var(--ink);
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.pe-carga__grupo span:last-child:not(:first-child) { color: var(--text-3); font-weight: 600; }
.pe-carga__grupo--antes { grid-column: 1 / 3; }
.pe-carga__grupo--despues { grid-column: 3 / 4; border-bottom-color: var(--teal); }
.pe-via__d b { color: var(--ink); font-weight: 600; }
/* LAS TRES FORMAS DE CARGAR (13/11). Antes: tarjeta gris con icono de
   linea. Ahora con la marca implicita: el icono en un cuadro teal (el de
   pagar despues, en el teal profundo del plan anual) con una insignia que
   dice lo propio de cada una, la trama de puntos del mapa en la esquina y
   la Z de Znapp casi invisible al pie. */
.pe-via {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -32px rgba(52,49,44,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pe-via::before {                      /* la trama de puntos, arriba a la derecha */
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 62%; height: 150px;
  background: radial-gradient(rgba(19,193,172,.28) 1.1px, transparent 1.6px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 70%);
}
.pe-via::after {                       /* la Z de la marca, recortada al pie */
  content: ""; position: absolute; z-index: -1; right: -28px; bottom: -36px; width: 150px; height: 130px;
  background: var(--teal);
  -webkit-mask: url(../images/znapp-z-blanca.png) center / contain no-repeat;
          mask: url(../images/znapp-z-blanca.png) center / contain no-repeat;
  opacity: .07; transition: opacity .25s ease, transform .35s ease;
}
.pe-via:hover { transform: translateY(-3px); border-color: rgba(19,193,172,.45); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 26px 48px -30px rgba(11,140,124,.55); }
.pe-via:hover::after { opacity: .11; transform: translate(-4px, -4px); }
.pe-via__ic {
  position: relative; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--teal-hi), var(--teal) 55%, #0d9e8c); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 22px -12px rgba(19,193,172,.9);
}
.pe-via__ic svg { width: 30px; height: 30px; stroke-width: 2; }
.pe-via--despues .pe-via__ic {
  background: linear-gradient(145deg, #0b8c7c, #06594f); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 22px -12px rgba(6,89,79,.9);
}
/* la insignia: lo propio de cada forma (ida y vuelta, al instante, 30 dias) */
.pe-via__badge {
  position: absolute; right: -7px; bottom: -7px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--teal-field);
  box-shadow: 0 0 0 1px var(--line), 0 4px 10px -4px rgba(52,49,44,.4);
  font-style: normal;
}
.pe-via__ic .pe-via__badge svg { width: 15px; height: 15px; }
.pe-via--tarj .pe-via__badge { color: var(--pj1-z, #F44D30); }
.pe-via__badge--txt { font-size: 11px; font-weight: 800; letter-spacing: -.02em; color: #06594f; }
.pe-via__t { font-size: clamp(21px, 1.7vw, 24px); line-height: 1.2; font-weight: 700; letter-spacing: var(--tr-title); color: var(--ink); margin: 22px 0 0; }
.pe-via__d { font-size: 16px; line-height: 1.5; color: var(--text-2); margin: 8px 0 24px; }
.pe-via .btn { margin-top: auto; height: 46px; padding: 0 20px; font-size: 15px; }

/* LOS MEDIOS ACEPTADOS (13/11): marcas a color en pastillas blancas y, en
   transferencia, los tres datos que pide el banco. Discretos: se ven, no gritan. */
.pc-medios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.pc-medios__l { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.pc-chip {
  height: 28px; padding: 0 9px; display: inline-grid; place-items: center; border-radius: 6px;
  background: #fff; border: 1px solid #E6E1D8; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-2);
}
.pc-marca { display: block; width: 42px; height: 28px; padding: 7px; box-sizing: border-box; object-fit: contain; background: #fff; border: 1px solid #E6E1D8; border-radius: 6px; }
.pc-marca--amex { padding: 3px; }

/* PAGAR ANTES, UN SOLO RECUADRO (13/11). Transferencia y tarjeta son lo
   mismo —se paga antes, sin costo extra— y cambia solo el medio: comparten
   un rectangulo, partido por una linea. La trama y la Z pasan al recuadro. */
.pe-carga__antes {
  grid-column: 1 / 3; position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #FBF9F6; border: 1px solid #E6E1D8; border-radius: var(--r-surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -32px rgba(52,49,44,.45);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pe-carga__antes::before {
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 40%; height: 170px;
  background: radial-gradient(rgba(19,193,172,.28) 1.1px, transparent 1.6px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 70%);
}
.pe-carga__antes::after {
  content: ""; position: absolute; z-index: -1; right: -28px; bottom: -36px; width: 170px; height: 148px;
  background: var(--teal);
  -webkit-mask: url(../images/znapp-z-blanca.png) center / contain no-repeat;
          mask: url(../images/znapp-z-blanca.png) center / contain no-repeat;
  opacity: .07;
}
.pe-carga__antes .pe-via { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; isolation: auto; }
.pe-carga__antes .pe-via::before, .pe-carga__antes .pe-via::after { display: none; }
.pe-carga__antes .pe-via + .pe-via { border-left: 1px solid #E6E1D8; }
.pe-carga__antes .pe-via:hover { transform: none; box-shadow: none; }
/* un solo boton para los dos medios: se carga credito, el medio se elige despues */
.pe-carga__antes .pe-via { padding-bottom: 0; }
.pe-carga__antes .pe-via__d { margin-bottom: 0; }
.pe-carga__antes .pe-via .pc-medios { margin: 14px 0 0; }
.pe-carga__pie { grid-column: 1 / -1; padding: 22px clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px); }
.pe-carga__pie .btn { height: 46px; padding: 0 30px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .pe-carga__antes:hover { border-color: rgba(19,193,172,.45); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 26px 48px -30px rgba(11,140,124,.55); }
}

/* EL PLAN ANUAL (13/11). Rechazados: fondo negro (pesado), teal al 12% (sin
   contraste) y teal liso con aros (sin marca). Ahora es una tarjeta de
   miembro de Znapp: campo teal con la Z de la marca enorme y recortada a la
   derecha, una luz suave arriba a la izquierda, un calendario "12" como
   insignia y una trama de puntos muy tenue, como la ciudad del mapa. */
.pe-anual {
  --an-bg: #06594f;
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end;
  padding: clamp(32px, 3.8vw, 60px); border-radius: 28px;
  background:
    radial-gradient(640px 400px at 0% 0%, rgba(23,214,191,.22), transparent 70%),
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(135deg, #033f38 0%, var(--an-bg) 45%, #0a8475 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 40px 80px -48px rgba(4,70,62,.95);
}
.pe-anual > :not(.pe-anual__z) { position: relative; z-index: 1; }
.pe-anual__z {
  position: absolute; z-index: 0; pointer-events: none;
  right: -6%; top: 50%; height: 135%; width: auto; transform: translateY(-50%);
  opacity: .09;
}
.pe-anual__ic {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; margin-bottom: 22px;
  background: #fff; color: var(--an-bg);
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.45);
}
.pe-anual__ic svg { width: 34px; height: 34px; }
.pe-anual__t { white-space: nowrap; font-size: clamp(32px, 3vw, 44px); line-height: 1; font-weight: 700; letter-spacing: var(--tr-display); color: #fff; margin: 0; }
.pe-anual__d { font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.82); margin: 14px 0 0; }
.pe-anual__dato { border-left: 1.5px solid rgba(255,255,255,.28); padding-left: clamp(16px, 2vw, 28px); }
.pe-anual__num { margin: 0; display: flex; align-items: baseline; gap: .2em; font-size: clamp(40px, 3.6vw, 54px); line-height: .9; white-space: nowrap; }
.pe-anual__num b {
  display: block; font-size: 1em; font-weight: 800;
  letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums;
}
/* el 30% de antes, grande y tachado, al lado del 15% */
.pe-anual__num s {
  position: relative; text-decoration: none; font-size: .62em; font-weight: 700; letter-spacing: -.04em;
  color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums;
}
.pe-anual__num s::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: 52%; height: .09em; border-radius: 99px;
  background: var(--pj1-z, #F44D30); transform: rotate(-12deg);
}
/* las bajadas reservan tres renglones: asi los numeros quedan a la misma
   altura aunque una bajada sea mas larga (13/11) */
.pe-anual__dato span { min-height: calc(3 * 1.35em); display: block; margin-top: 12px; font-size: 16px; line-height: 1.35; color: rgba(255,255,255,.9); font-weight: 600; }
/* 50% OFF (13/11): la etiqueta de descuento, en el naranja de los Znappers */
.pe-anual__num .pe-anual__off {
  align-self: center; font-style: normal; font-size: .3em; font-weight: 800; letter-spacing: .06em; line-height: 1;
  padding: .32em .55em .3em; border-radius: 8px; background: var(--pj1-z, #F44D30); color: #fff;
  transform: rotate(-6deg); box-shadow: 0 8px 18px -8px rgba(0,0,0,.5);
}
.pe-anual__num { position: relative; }
.pe-anual__num .pe-anual__hasta { position: absolute; left: 0; bottom: 100%; margin-bottom: .2em; font-size: max(11px, .27em); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.pe-anual__dato strong { color: #fff; font-weight: 800; font-size: 1.12em; letter-spacing: -.01em; }
.pe-anual__extra {
  grid-column: 1 / -1; margin: clamp(4px, 1vw, 12px) 0 0;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-radius: 16px;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.85);
}
.pe-anual__extra b { display: block; color: #fff; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 3px; }
.pe-anual__extra-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--an-bg); }
.pe-anual__extra-ic svg { width: 28px; height: 28px; }
.pe-anual__pie {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  padding-top: clamp(4px, .6vw, 8px);
}
.pe-anual__pie p { margin: 0; font-size: 16px; color: rgba(255,255,255,.82); }
.pe-anual__pie b { color: #fff; }
.pe-anual .btn--primary { background: var(--paper); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
@media (hover: hover) and (pointer: fine) { .pe-anual .btn--primary:hover { background: #fff; } }
.pe-anual .btn--primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 1100px) {
  .pe-carga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-carga__grupo--antes { grid-column: 1 / 3; grid-row: 1; }
  .pe-carga__grupo--despues { grid-column: 1 / 3; grid-row: 3; margin-top: 18px; }
  .pe-via--despues { grid-column: 1 / 3; }
}
@media (max-width: 600px) {
  .pe-carga { grid-template-columns: 1fr; }
  .pe-carga__grupo--antes { grid-column: 1; grid-row: 1; }
  .pe-carga__grupo--despues { grid-column: 1; grid-row: 3; }
  .pe-via--despues { grid-column: 1; }
  .pe-carga__antes { grid-column: 1; grid-template-columns: 1fr; }
  .pe-carga__antes .pe-via + .pe-via { border-left: 0; border-top: 1px solid #E6E1D8; }
  .pe-carga__antes .pe-via:first-child { padding-bottom: 24px; }
}
@media (max-width: 900px) {
  .pe-carga__head { grid-template-columns: 1fr; }
  .pe-anual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-anual__cab { grid-column: 1 / -1; margin-bottom: 8px; }
  .pe-anual__dato { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .pe-via { transition: none; } }
@media (max-width: 520px) {
  .pe-anual { gap: 20px 14px; }
  .pe-anual__dato { padding-left: 12px; }
  .pe-anual__num { font-size: 40px; }
  .pe-anual__extra { align-items: flex-start; }
  .pe-anual__dato span { font-size: 14.5px; margin-top: 8px; }
  .pe-anual__pie .btn { width: 100%; }
  .pe-anual__t { font-size: 34px; }
  .pe-anual__d, .pe-carga__sub { font-size: 16px; }
  .pe-anual__extra { font-size: 15px; padding: 16px; }
  .pe-anual__extra b { font-size: 18px; }
  .pe-anual__pie p { font-size: 15px; }
  .pe-anual__t { white-space: normal; }
}
@media (max-width: 900px) {
  .pe-anual__z { height: 70%; top: auto; bottom: -8%; right: -14%; transform: none; }
  .pe-anual__ic { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; }
  .pe-anual__ic svg { width: 30px; height: 30px; }
}
@media (max-width: 400px) {
  .pe-anual__num { font-size: 34px; }
  .pe-anual__dato { padding-left: 10px; }
}

/* el CTA del hero baja hasta aca: que el titulo no quede debajo de la barra */
#cargar { scroll-margin-top: calc(var(--navh, 72px) + 8px); }