/* Entrada de TarjetIT (dominio principal). Colores de la marca: azul marino, azul JortIT y celeste. */
.entrada {
  --navy: #0B2545;
  --azul: #149DDD;
  --celeste: #7CC6EC;
  --bruma: #EEF6FB;
  --texto: #1F2328;
  --suave: #4A5563;
  color: var(--texto);
}

.entrada h1, .entrada h2, .entrada h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; color: var(--navy); }

.top, .entrada main > section, .jortit-banda { padding-inline: 16px; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1080px; margin: 0 auto; padding-block: 16px;
}
.marca img { width: 160px; height: auto; }
.entrar-top {
  font-weight: 700; color: var(--navy); text-decoration: none;
  padding: 8px 14px; border: 1.5px solid var(--navy); border-radius: 999px;
}
.entrar-top:hover { background: var(--navy); color: #fff; }

.entrada main > section { max-width: 1080px; margin: 0 auto; }

/* Portada: el titular y una tarjeta de sellos real, hecha con HTML. */
.hero { display: grid; gap: 32px; padding-block: 24px 40px; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 13ch; }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--suave); max-width: 46ch; margin-top: 16px; }

.muestra { margin: 0; }
.tarjeta {
  background: var(--navy); color: #fff; border-radius: 20px; padding: 22px 20px 18px;
  max-width: 380px; margin-inline: auto; transform: rotate(-2deg);
  box-shadow: 0 18px 40px -18px rgba(11, 37, 69, 0.55);
}
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tarjeta-negocio { font: 700 1.2rem/1.2 'Bricolage Grotesque', system-ui, sans-serif; }
.tarjeta-cuenta { color: var(--celeste); font-weight: 700; }
.sellos { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sellos li {
  aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(124, 198, 236, 0.55);
  display: grid; place-items: center;
}
.sellos li.lleno { background: var(--azul); border: 0; }
.sellos li.lleno:nth-child(odd) { transform: rotate(-8deg); }
.sellos li.lleno:nth-child(even) { transform: rotate(6deg); }
.sellos svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.premio { font-size: 0.72rem; font-weight: 700; color: var(--celeste); }
.tarjeta-pie { margin: 0; color: #D7E9F5; font-size: 0.95rem; }

/* El único movimiento de la página: el último sello cae al cargar. */
@keyframes sellar { from { transform: scale(1.6) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(6deg); opacity: 1; } }
.sellos li.nuevo { animation: sellar 0.45s cubic-bezier(.2,.9,.3,1.3) 0.4s both; }

/* Área de clientes: buscar el negocio o entrar al panel. */
.acceso { display: grid; gap: 16px; padding-block: 8px 48px; }
.acceso-bloque { background: var(--bruma); border-radius: 16px; padding: 24px 20px; }
.acceso-bloque h3 { font-size: 1.4rem; margin-bottom: 6px; }
.acceso-bloque p { color: var(--suave); }
.acceso-bloque.admin { background: #fff; border: 1.5px solid #CFE3F0; }

.buscar { display: flex; gap: 8px; margin-top: 12px; }
.buscar input {
  flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid #B9D3E4; background: #fff;
}
.buscar button, .boton {
  font: 700 1rem/1 'Atkinson Hyperlegible Next', system-ui, sans-serif; cursor: pointer;
  background: var(--navy); color: #fff; border: 0; border-radius: 10px; padding: 13px 18px;
  text-decoration: none; display: inline-block;
}
.buscar button:hover, .boton:hover { background: #12355F; }
.resultados { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.resultados a {
  display: block; background: #fff; border-radius: 10px; padding: 12px 14px;
  font-weight: 700; color: var(--navy); text-decoration: none; border: 1.5px solid #CFE3F0;
}
.resultados a:hover { border-color: var(--azul); }
.sin-resultados { margin: 12px 0 0; }

.pasos, .negocios { padding-block: 24px 40px; border-top: 1px solid #E3EDF4; }
.pasos h2, .negocios h2 { font-size: 1.8rem; margin-bottom: 18px; }
.pasos ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 14px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; font-size: 1.1rem; }
.pasos li::before {
  content: counter(paso); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul); color: #fff;
  font: 700 1.2rem/1 'Bricolage Grotesque', system-ui, sans-serif;
}
.negocios ul { margin: 0 0 20px; padding-left: 1.2em; display: grid; gap: 8px; font-size: 1.05rem; max-width: 60ch; }
.negocios-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.negocios-acciones a:not(.boton) { color: var(--navy); font-weight: 700; }

/* Publicidad de JortIT. */
.jortit-banda {
  background: var(--navy); color: #fff; padding-block: 32px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; justify-content: center;
}
.jortit-banda > div { max-width: 52ch; }
.jortit-banda p { margin: 0 0 6px; color: #D7E9F5; }
.jortit-banda a { color: #fff; font-weight: 700; }
.jortit-lema { font-size: 1.05rem; }

/* Página de planes. */
.planes-intro { padding-block: 24px 8px; }
.planes-intro h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; }
.planes { display: grid; gap: 16px; padding-block: 24px 40px; }
.plan {
  border: 1.5px solid #CFE3F0; border-radius: 16px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 10px; background: #fff;
}
.plan h2 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.medalla { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.plan-bronce .medalla { background: #B87333; }
.plan-plata .medalla { background: #A7B1BC; }
.plan-oro .medalla { background: #D4A72C; }
.plan-precio { margin: 0; color: var(--suave); }
.plan-precio strong { font: 700 2.4rem/1 'Bricolage Grotesque', system-ui, sans-serif; color: var(--navy); font-variant-numeric: tabular-nums; }
.plan-para { margin: 0; color: var(--suave); }
.plan-historial { margin: 0 0 6px; padding-top: 10px; border-top: 1px solid #E3EDF4; }
.plan .boton { margin-top: auto; text-align: center; }

.incluye, .extra, .pago { padding-block: 24px 40px; border-top: 1px solid #E3EDF4; }
.incluye h2, .extra h2, .pago h2 { font-size: 1.6rem; margin-bottom: 14px; }
.incluye ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 1.05rem; max-width: 64ch; }
.extra p, .pago p { max-width: 60ch; font-size: 1.05rem; color: var(--suave); }

/* Lo que distingue la página: la distinción Fundadores, con su sello. */
.entrada main > section.fundadores {
  background: var(--navy); color: #fff; border-radius: 20px; padding: 28px 20px;
  max-width: none; margin: 0 max(16px, calc((100% - 1080px) / 2)) 40px;
  display: grid; gap: 20px; align-items: center;
}
.fundadores h2 { color: #fff; font-size: 1.7rem; margin-bottom: 10px; }
.fundadores p { color: #D7E9F5; max-width: 58ch; }
.fundadores-sello {
  width: 112px; height: 112px; border-radius: 50%; border: 3px dashed var(--celeste);
  display: grid; place-content: center; text-align: center; transform: rotate(-8deg); color: #fff;
}
.fundadores-sello span { font: 700 2.6rem/1 'Bricolage Grotesque', system-ui, sans-serif; }
.fundadores-sello small { color: var(--celeste); font-weight: 700; }
.boton.claro { background: #fff; color: var(--navy); margin-top: 6px; }
.boton.claro:hover { background: var(--bruma); }

/* Comprar un plan: datos del negocio y del dueño, y pago con Mercado Pago. */
.compra { display: grid; gap: 28px; padding-block: 24px 48px; align-items: start; }
.compra-intro h1, .compra-pendiente h1 { font-size: clamp(2rem, 6.5vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.compra-pasos { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 10px; }
.compra-pasos li { counter-increment: paso; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.compra-pasos li::before {
  content: counter(paso); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul); color: #fff; font: 700 1rem/1 'Bricolage Grotesque', system-ui, sans-serif;
}
.compra-nota { color: var(--suave); margin-top: 18px; max-width: 46ch; }
.compra-form { background: var(--bruma); border-radius: 16px; padding: 22px 18px; display: grid; gap: 20px; }
.compra-form h2 { font-size: 1.4rem; }
.compra-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.compra-form legend { font: 700 1.15rem/1.2 'Bricolage Grotesque', system-ui, sans-serif; color: var(--navy); padding: 0; margin-bottom: 10px; }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo label { font-weight: 700; }
.campo input, .campo select {
  font: inherit; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #B9D3E4; background: #fff; color: var(--texto);
}
.campo input:focus-visible, .campo select:focus-visible { border-color: var(--azul); }
.campo-par { display: grid; gap: 12px; align-items: start; }
.campo-ayuda { color: var(--suave); font-size: 0.92rem; margin: 0; }
.campo-error { color: #B42318; font-size: 0.92rem; font-weight: 700; }
.campo-error:empty { display: none; }
.input-validation-error { border-color: #B42318 !important; }
.compra-error { background: #FEE4E2; color: #7A271A; border-radius: 10px; padding: 10px 14px; margin: 0; }
.compra-error.validation-summary-valid { display: none; }
.compra-error ul { margin: 0; padding-left: 1.1em; }
.plan-opciones { display: grid; gap: 8px; }
.plan-opcion {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; cursor: pointer;
  background: #fff; border: 1.5px solid #CFE3F0; border-radius: 12px; padding: 12px 14px;
}
.plan-opcion:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.plan-opcion input { accent-color: var(--navy); width: 18px; height: 18px; margin: 0; }
.plan-opcion-nombre { font-weight: 700; color: var(--navy); }
.plan-opcion-precio { color: var(--suave); font-variant-numeric: tabular-nums; text-align: right; }
.plan-opcion.plan-bronce .medalla { background: #B87333; }
.plan-opcion.plan-plata .medalla { background: #A7B1BC; }
.plan-opcion.plan-oro .medalla { background: #D4A72C; }
.boton-grande { width: 100%; padding-block: 16px; font-size: 1.05rem; }
.compra-pendiente { padding-block: 32px 56px; display: grid; gap: 16px; justify-items: start; }
.compra-pendiente .lead { margin-top: 0; }
.compra-pendiente form { margin: 0; }

@media (min-width: 760px) {
  .marca img { width: 190px; }
  .hero { grid-template-columns: 1.15fr 1fr; padding-block: 48px 64px; }
  .acceso { grid-template-columns: 1.3fr 1fr; }
  .pasos ol { grid-template-columns: repeat(3, 1fr); }
  .pasos li { grid-template-columns: 1fr; align-items: start; align-content: start; }
  .planes { grid-template-columns: repeat(3, 1fr); }
  .entrada main > section.fundadores { grid-template-columns: auto 1fr; padding: 36px; gap: 32px; }
  .compra { grid-template-columns: 0.85fr 1.15fr; gap: 48px; padding-block: 48px 64px; }
  .compra-intro { position: sticky; top: 24px; }
  .compra-form { padding: 28px; }
  .campo-par { grid-template-columns: 1fr 1fr; }
}

/* Pendiente: correo de Mercado Pago y botón de pago. */
.compra-pagar { display: grid; gap: 16px; width: 100%; max-width: 30rem; }

/* Comprar: forma de pago. El correo de Mercado Pago solo se ve con esa opción elegida. */
.forma-pago { display: grid; gap: 10px; }
.pago-opcion {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; cursor: pointer;
  background: #fff; border: 1.5px solid #CFE3F0; border-radius: 12px; padding: 12px 14px;
}
.pago-opcion:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.pago-opcion input { accent-color: var(--navy); width: 18px; height: 18px; margin: 0; grid-row: span 2; }
.pago-opcion-nombre { font-weight: 700; color: var(--navy); }
.pago-opcion-detalle { color: var(--suave); font-size: 0.92rem; }
.forma-pago:has(input[value="Efectivo"]:checked) .pago-mp-correo { display: none; }

/* Pendiente: las dos formas de pago. */
.compra-opcion { width: 100%; max-width: 34rem; display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid #E3EDF4; }
.compra-opcion h2 { font-size: 1.2rem; margin: 0; }
.compra-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.compra-datos dt { color: var(--suave); }
.compra-datos dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }